froont

.gitignore

@@ -1,3 +1,4 @@
 .env
 *.pyc
-/temp_exports/*
+/temp_exports/*
+/frontend/node_modules/*

frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "text-classifier-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@types/node": "^16.18.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "axios": "^0.27.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.8.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import Home from './components/Home';
+import Classify from './components/Classify';
+import Validate from './components/Validate';
+import Improve from './components/Improve';
+
+const App: React.FC = () => {
+  return (
+    <Router>
+      <div className="min-h-screen bg-gray-50">
+        <nav className="bg-white shadow-sm">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between h-16">
+              <div className="flex">
+                <div className="flex-shrink-0 flex items-center">
+                  <span className="text-xl font-bold text-primary-600">Text Classifier</span>
+                </div>
+                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                  <Link
+                    to="/"
+                    className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                  >
+                    Home
+                  </Link>
+                  <Link
+                    to="/classify"
+                    className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                  >
+                    Classify
+                  </Link>
+                  <Link
+                    to="/validate"
+                    className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                  >
+                    Validate
+                  </Link>
+                  <Link
+                    to="/improve"
+                    className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                  >
+                    Improve
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+
+        <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/classify" element={<Classify />} />
+            <Route path="/validate" element={<Validate />} />
+            <Route path="/improve" element={<Improve />} />
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  );
+};
+
+export default App; 

frontend/src/api/api.ts

@@ -0,0 +1,62 @@
+import axios from 'axios';
+import {
+  ClassificationResponse,
+  BatchClassificationResponse,
+  CategorySuggestionResponse,
+  ValidationRequest,
+  ValidationResponse,
+  ImprovementRequest,
+  ImprovementResponse,
+  ModelInfoResponse,
+  HealthResponse
+} from '../types/api';
+
+const API_BASE_URL = 'http://localhost:8000';
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export const healthCheck = async (): Promise<HealthResponse> => {
+  const response = await api.get<HealthResponse>('/health');
+  return response.data;
+};
+
+export const getModelInfo = async (): Promise<ModelInfoResponse> => {
+  const response = await api.get<ModelInfoResponse>('/model-info');
+  return response.data;
+};
+
+export const classifyText = async (text: string, categories?: string[]): Promise<ClassificationResponse> => {
+  const response = await api.post<ClassificationResponse>('/classify', {
+    text,
+    categories,
+  });
+  return response.data;
+};
+
+export const classifyBatch = async (texts: string[], categories?: string[]): Promise<BatchClassificationResponse> => {
+  const response = await api.post<BatchClassificationResponse>('/classify-batch', {
+    texts,
+    categories,
+  });
+  return response.data;
+};
+
+export const suggestCategories = async (texts: string[]): Promise<CategorySuggestionResponse> => {
+  const response = await api.post<CategorySuggestionResponse>('/suggest-categories', texts);
+  return response.data;
+};
+
+export const validateClassifications = async (request: ValidationRequest): Promise<ValidationResponse> => {
+  const response = await api.post<ValidationResponse>('/validate', request);
+  return response.data;
+};
+
+export const improveClassification = async (request: ImprovementRequest): Promise<ImprovementResponse> => {
+  const response = await api.post<ImprovementResponse>('/improve-classification', request);
+  return response.data;
+}; 

frontend/src/components/Classify.tsx

@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import { classifyText, classifyBatch, suggestCategories } from '../api/api';
+import { ClassificationResponse, CategorySuggestionResponse } from '../types/api';
+
+const Classify: React.FC = () => {
+  const [text, setText] = useState('');
+  const [categories, setCategories] = useState<string[]>([]);
+  const [result, setResult] = useState<ClassificationResponse | null>(null);
+  const [batchResults, setBatchResults] = useState<ClassificationResponse[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [suggestedCategories, setSuggestedCategories] = useState<string[]>([]);
+
+  const handleClassify = async () => {
+    if (!text) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const response = await classifyText(text, categories.length > 0 ? categories : undefined);
+      setResult(response);
+    } catch (err) {
+      setError('Failed to classify text');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBatchClassify = async () => {
+    if (!text) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const texts = text.split('\n').filter(t => t.trim());
+      const response = await classifyBatch(texts, categories.length > 0 ? categories : undefined);
+      setBatchResults(response.results);
+    } catch (err) {
+      setError('Failed to classify texts');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSuggestCategories = async () => {
+    if (!text) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const texts = text.split('\n').filter(t => t.trim());
+      const response = await suggestCategories(texts);
+      setSuggestedCategories(response.categories);
+    } catch (err) {
+      setError('Failed to suggest categories');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">Text Classification</h3>
+          <div className="mt-2 max-w-xl text-sm text-gray-500">
+            <p>Enter text to classify or multiple texts (one per line) for batch classification.</p>
+          </div>
+          <div className="mt-5">
+            <textarea
+              rows={4}
+              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+              placeholder="Enter text to classify..."
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+            />
+          </div>
+          <div className="mt-5">
+            <div className="flex items-center space-x-4">
+              <button
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                onClick={handleClassify}
+                disabled={loading}
+              >
+                Classify
+              </button>
+              <button
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                onClick={handleBatchClassify}
+                disabled={loading}
+              >
+                Batch Classify
+              </button>
+              <button
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                onClick={handleSuggestCategories}
+                disabled={loading}
+              >
+                Suggest Categories
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {loading && (
+        <div className="flex justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {result && (
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+          <div className="px-4 py-5 sm:px-6">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">Classification Result</h3>
+          </div>
+          <div className="border-t border-gray-200">
+            <dl>
+              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Category</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {result.category}
+                </dd>
+              </div>
+              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Confidence</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {(result.confidence * 100).toFixed(2)}%
+                </dd>
+              </div>
+              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Explanation</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {result.explanation}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      )}
+
+      {batchResults.length > 0 && (
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+          <div className="px-4 py-5 sm:px-6">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">Batch Classification Results</h3>
+          </div>
+          <div className="border-t border-gray-200">
+            <ul className="divide-y divide-gray-200">
+              {batchResults.map((result, index) => (
+                <li key={index} className="px-4 py-4 sm:px-6">
+                  <div className="flex items-center justify-between">
+                    <p className="text-sm font-medium text-primary-600 truncate">
+                      Category: {result.category}
+                    </p>
+                    <div className="ml-2 flex-shrink-0 flex">
+                      <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                        {(result.confidence * 100).toFixed(2)}%
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-2 sm:flex sm:justify-between">
+                    <div className="sm:flex">
+                      <p className="flex items-center text-sm text-gray-500">
+                        {result.explanation}
+                      </p>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {suggestedCategories.length > 0 && (
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+          <div className="px-4 py-5 sm:px-6">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">Suggested Categories</h3>
+          </div>
+          <div className="border-t border-gray-200">
+            <div className="px-4 py-5 sm:p-6">
+              <div className="flex flex-wrap gap-2">
+                {suggestedCategories.map((category, index) => (
+                  <span
+                    key={index}
+                    className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-primary-100 text-primary-800"
+                  >
+                    {category}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Classify; 

frontend/src/components/Home.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from 'react';
+import { healthCheck, getModelInfo } from '../api/api';
+import { HealthResponse, ModelInfoResponse } from '../types/api';
+
+const Home: React.FC = () => {
+  const [health, setHealth] = useState<HealthResponse | null>(null);
+  const [modelInfo, setModelInfo] = useState<ModelInfoResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [healthData, modelData] = await Promise.all([
+          healthCheck(),
+          getModelInfo()
+        ]);
+        setHealth(healthData);
+        setModelInfo(modelData);
+      } catch (err) {
+        setError('Failed to fetch data from the server');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 border-l-4 border-red-400 p-4">
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <div className="ml-3">
+            <p className="text-sm text-red-700">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="px-4 py-5 sm:px-6">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">System Status</h3>
+        </div>
+        <div className="border-t border-gray-200">
+          <dl>
+            <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">Status</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {health?.status}
+              </dd>
+            </div>
+            <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">Model Ready</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {health?.model_ready ? 'Yes' : 'No'}
+              </dd>
+            </div>
+            <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">API Key Configured</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {health?.api_key_configured ? 'Yes' : 'No'}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+        <div className="px-4 py-5 sm:px-6">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">Model Information</h3>
+        </div>
+        <div className="border-t border-gray-200">
+          <dl>
+            <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">Model Name</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {modelInfo?.model_name}
+              </dd>
+            </div>
+            <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">Model Version</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {modelInfo?.model_version}
+              </dd>
+            </div>
+            <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">Max Tokens</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {modelInfo?.max_tokens}
+              </dd>
+            </div>
+            <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt className="text-sm font-medium text-gray-500">Temperature</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {modelInfo?.temperature}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home; 

frontend/src/components/Improve.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { improveClassification } from '../api/api';
+import { ImprovementRequest, ImprovementResponse } from '../types/api';
+
+const Improve: React.FC = () => {
+  const [text, setText] = useState('');
+  const [categories, setCategories] = useState('');
+  const [validationReport, setValidationReport] = useState('');
+  const [improvementResult, setImprovementResult] = useState<ImprovementResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleImprove = async () => {
+    if (!text || !categories || !validationReport) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const request: ImprovementRequest = {
+        df: { text: text.split('\n').filter(t => t.trim()) },
+        validation_report: validationReport,
+        text_columns: ['text'],
+        categories,
+        classifier_type: 'gpt35',
+        show_explanations: true,
+        file_path: 'examples/emails.csv'
+      };
+
+      const response = await improveClassification(request);
+      setImprovementResult(response);
+    } catch (err) {
+      setError('Failed to improve classifications');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">Improve Classifications</h3>
+          <div className="mt-2 max-w-xl text-sm text-gray-500">
+            <p>Enter text samples and validation report to improve classifications.</p>
+          </div>
+          <div className="mt-5 space-y-4">
+            <div>
+              <label htmlFor="text" className="block text-sm font-medium text-gray-700">
+                Text Samples
+              </label>
+              <div className="mt-1">
+                <textarea
+                  id="text"
+                  rows={4}
+                  className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  placeholder="Enter text samples (one per line)..."
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                />
+              </div>
+            </div>
+            <div>
+              <label htmlFor="categories" className="block text-sm font-medium text-gray-700">
+                Categories
+              </label>
+              <div className="mt-1">
+                <input
+                  type="text"
+                  id="categories"
+                  className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  placeholder="Enter categories (comma-separated)"
+                  value={categories}
+                  onChange={(e) => setCategories(e.target.value)}
+                />
+              </div>
+            </div>
+            <div>
+              <label htmlFor="validation-report" className="block text-sm font-medium text-gray-700">
+                Validation Report
+              </label>
+              <div className="mt-1">
+                <textarea
+                  id="validation-report"
+                  rows={4}
+                  className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                  placeholder="Enter validation report..."
+                  value={validationReport}
+                  onChange={(e) => setValidationReport(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="mt-5">
+            <button
+              type="button"
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+              onClick={handleImprove}
+              disabled={loading}
+            >
+              Improve
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {loading && (
+        <div className="flex justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {improvementResult && (
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+          <div className="px-4 py-5 sm:px-6">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">Improvement Results</h3>
+          </div>
+          <div className="border-t border-gray-200">
+            <dl>
+              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Success</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {improvementResult.success ? 'Yes' : 'No'}
+                </dd>
+              </div>
+              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">New Validation Report</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {improvementResult.new_validation_report}
+                </dd>
+              </div>
+              {improvementResult.updated_categories.length > 0 && (
+                <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                  <dt className="text-sm font-medium text-gray-500">Updated Categories</dt>
+                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                    <div className="flex flex-wrap gap-2">
+                      {improvementResult.updated_categories.map((category, index) => (
+                        <span
+                          key={index}
+                          className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-primary-100 text-primary-800"
+                        >
+                          {category}
+                        </span>
+                      ))}
+                    </div>
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Improve; 

frontend/src/components/Validate.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import { validateClassifications } from '../api/api';
+import { ValidationRequest, ValidationResponse } from '../types/api';
+
+const Validate: React.FC = () => {
+  const [text, setText] = useState('');
+  const [categories, setCategories] = useState<string[]>([]);
+  const [validationResult, setValidationResult] = useState<ValidationResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleValidate = async () => {
+    if (!text) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const texts = text.split('\n').filter(t => t.trim());
+      const samples = texts.map(t => ({
+        text: t,
+        assigned_category: '', // This would be filled with actual classifications
+        confidence: 0
+      }));
+
+      const request: ValidationRequest = {
+        samples,
+        current_categories: categories,
+        text_columns: ['text']
+      };
+
+      const response = await validateClassifications(request);
+      setValidationResult(response);
+    } catch (err) {
+      setError('Failed to validate classifications');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-lg leading-6 font-medium text-gray-900">Validate Classifications</h3>
+          <div className="mt-2 max-w-xl text-sm text-gray-500">
+            <p>Enter text samples (one per line) to validate their classifications.</p>
+          </div>
+          <div className="mt-5">
+            <textarea
+              rows={4}
+              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+              placeholder="Enter text samples..."
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+            />
+          </div>
+          <div className="mt-5">
+            <button
+              type="button"
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+              onClick={handleValidate}
+              disabled={loading}
+            >
+              Validate
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {loading && (
+        <div className="flex justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 border-l-4 border-red-400 p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {validationResult && (
+        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
+          <div className="px-4 py-5 sm:px-6">
+            <h3 className="text-lg leading-6 font-medium text-gray-900">Validation Results</h3>
+          </div>
+          <div className="border-t border-gray-200">
+            <dl>
+              {validationResult.accuracy_score !== undefined && (
+                <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                  <dt className="text-sm font-medium text-gray-500">Accuracy Score</dt>
+                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                    {(validationResult.accuracy_score * 100).toFixed(2)}%
+                  </dd>
+                </div>
+              )}
+              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                <dt className="text-sm font-medium text-gray-500">Validation Report</dt>
+                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                  {validationResult.validation_report}
+                </dd>
+              </div>
+              {validationResult.misclassifications && validationResult.misclassifications.length > 0 && (
+                <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                  <dt className="text-sm font-medium text-gray-500">Misclassifications</dt>
+                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                    <ul className="border border-gray-200 rounded-md divide-y divide-gray-200">
+                      {validationResult.misclassifications.map((item, index) => (
+                        <li key={index} className="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
+                          <div className="w-0 flex-1 flex items-center">
+                            <span className="ml-2 flex-1 w-0 truncate">
+                              {item.text}
+                            </span>
+                          </div>
+                          <div className="ml-4 flex-shrink-0">
+                            <span className="text-gray-500">
+                              Current: {item.current_category}
+                            </span>
+                          </div>
+                        </li>
+                      ))}
+                    </ul>
+                  </dd>
+                </div>
+              )}
+              {validationResult.suggested_improvements && validationResult.suggested_improvements.length > 0 && (
+                <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                  <dt className="text-sm font-medium text-gray-500">Suggested Improvements</dt>
+                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                    <ul className="list-disc pl-5 space-y-1">
+                      {validationResult.suggested_improvements.map((improvement, index) => (
+                        <li key={index}>{improvement}</li>
+                      ))}
+                    </ul>
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Validate; 

frontend/src/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+} 

frontend/src/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+); 

frontend/src/types/api.ts

@@ -0,0 +1,65 @@
+export interface ClassificationResponse {
+  category: string;
+  confidence: number;
+  explanation: string;
+}
+
+export interface BatchClassificationResponse {
+  results: ClassificationResponse[];
+}
+
+export interface CategorySuggestionResponse {
+  categories: string[];
+}
+
+export interface ValidationSample {
+  text: string;
+  assigned_category: string;
+  confidence: number;
+}
+
+export interface ValidationRequest {
+  samples: ValidationSample[];
+  current_categories: string[];
+  text_columns: string[];
+}
+
+export interface ValidationResponse {
+  validation_report: string;
+  accuracy_score?: number;
+  misclassifications?: Array<{
+    text: string;
+    current_category: string;
+  }>;
+  suggested_improvements?: string[];
+}
+
+export interface ImprovementRequest {
+  df: Record<string, any>;
+  validation_report: string;
+  text_columns: string[];
+  categories: string;
+  classifier_type: string;
+  show_explanations: boolean;
+  file_path: string;
+}
+
+export interface ImprovementResponse {
+  improved_df: Record<string, any>;
+  new_validation_report: string;
+  success: boolean;
+  updated_categories: string[];
+}
+
+export interface ModelInfoResponse {
+  model_name: string;
+  model_version: string;
+  max_tokens: number;
+  temperature: number;
+}
+
+export interface HealthResponse {
+  status: string;
+  model_ready: boolean;
+  api_key_configured: boolean;
+} 

frontend/tailwind.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+      },
+    },
+  },
+  plugins: [],
+} 

frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}