This is a comprehensive frontend demo application that showcases the capabilities of the multi-class text classifier library. The demo provides an intuitive interface for exploring classification features, dataset management, and document processing capabilities.
The demo consists of two main components:
- Frontend: React TypeScript application with Tailwind CSS
- Backend: FastAPI Python server that interfaces with the text classifier library
- Interactive Wizard: Step-by-step interface for generating classification attributes
- Dashboard: Overview of classification results and dataset management
- Document Processing: Upload and classify PDF documents
- Real-time Classification: Live classification results with confidence scores
- Dataset Management: View and manage classification datasets
- Python 3.8+ with pip
- Node.js 16+ with npm
- Virtual environment support (recommended)
- AWS credentials configured with AWS CLI
The easiest way to get started is using our cross-platform launch script:
# Make the script executable (Mac/Linux)
chmod +x launch-demo.sh
# Launch both frontend and backend
./launch-demo.shThe script will:
- Create and activate a Python virtual environment
- Install Python dependencies
- Install Node.js dependencies
- Start the backend server (port 8000)
- Start the frontend development server (port 3000)
- Open the demo in your default browser
If you prefer to set up manually or need more control:
-
Create and activate virtual environment:
# From the project root directory python -m venv .venv # Activate virtual environment # On Mac/Linux: source .venv/bin/activate # On Windows: # .venv\Scripts\activate
-
Install Python dependencies:
pip install -r requirements.txt
-
Start the backend server:
cd ui/backend python start_backend.pyThe backend API will be available at
http://localhost:8000
-
Install Node.js dependencies:
cd ui/frontend npm install -
Start the development server:
npm start
The frontend will be available at
http://localhost:3000
- Access the Demo: Open
http://localhost:3000in your browser - Explore the Wizard: Use the step-by-step wizard to generate classification attributes
- Upload Documents: Test document classification with PDF files
- View Results: Check the dashboard for classification results and insights
The backend API documentation is available at http://localhost:8000/docs when the server is running.
The frontend is built with:
- React 19 with TypeScript
- Tailwind CSS for styling
- Zustand for state management
- React Router for navigation
- Lucide React for icons
Key directories:
src/components/- Reusable UI componentssrc/pages/- Main application pagessrc/stores/- State managementsrc/types/- TypeScript type definitions
The backend uses:
- FastAPI for the web framework
- Uvicorn as the ASGI server
- Pydantic for data validation
- Integration with the main text classifier library
Key files:
backend_api.py- Main API endpointsstart_backend.py- Server startup scriptservices/- Business logic and integrations
-
Port conflicts: If ports 3000 or 8000 are in use, modify the launch script or start servers manually on different ports
-
Python virtual environment: Ensure you're using the virtual environment:
which python # Should point to .venv/bin/python -
Node.js dependencies: If you encounter npm issues, try:
cd ui/frontend rm -rf node_modules package-lock.json npm install -
Backend connection: The frontend expects the backend at
http://localhost:8000. If running on different ports, update the API base URL in the frontend configuration.
- Backend logs: Check the terminal where you started the backend server
- Frontend logs: Check the browser developer console
- API testing: Use the interactive docs at
http://localhost:8000/docs
When making changes to the demo:
- Follow the coding standards defined in the project
- Test both frontend and backend components
- Update documentation as needed
- Ensure the launch script continues to work on both Mac and Linux
This demo application is part of the multi-class text classifier library project.