Text Classification App — Spam Detection

A full-stack spam detection application: FastAPI backend and React frontend. The model classifies text as spam or ham (not spam) and returns a confidence score.

Project structure

text-classification-app/
├── backend/
│   ├── api/
│   │   ├── main.py           # FastAPI app
│   │   ├── schemas.py        # Request/response models
│   │   ├── routes/           # Health & predict endpoints
│   │   └── services/         # Model loading & prediction
│   ├── models/               # Trained pipeline (created by training)
│   ├── data/                 # Sample dataset (CSV)
│   ├── training/
│   │   └── train.py          # Train and save model
│   └── requirements.txt
├── frontend/                 # React (Vite) app
│   ├── src/
│   │   ├── App.jsx
│   │   └── components/
│   ├── package.json
│   └── vite.config.js
└── README.md

Setup

1. Backend (Python)

• Python 3.10+ recommended.

cd backend
python -m venv venv
# Windows:
venv\Scripts\activate
# macOS/Linux:
# source venv/bin/activate

pip install -r requirements.txt

Train the model (required before using the API):

# From backend directory
python -m training.train

This reads backend/data/sample_spam.csv, trains a TF-IDF + Naive Bayes pipeline, and saves it to backend/models/spam_pipeline.joblib.

Run the API:

# From backend directory (use python -m so uvicorn is found)
python -m uvicorn api.main:app --reload --host 0.0.0.0 --port 8000

python -m uvicorn api.main:app --reload --host 0.0.0.0 --port 8001

Then in frontend/ create a file .env with:

VITE_API_URL=http://localhost:8001

Restart the frontend dev server so it uses the new API URL.

• Health: http://localhost:8001/health
• Docs: http://localhost:8001/docs
• Predict: POST http://localhost:8001/predict/text with body {"text": "Your message here"}

2. Frontend (React)

cd frontend
npm install
npm run dev

API endpoints

Method	Endpoint	Description
GET	/health	Health check, model loaded status
GET	/docs	Swagger UI documentation
POST	/predict/text	Body: {"text": "..."} → label + confidence

Testing

1. Backend: Start the API, then:
   • Open /docs and try GET /health and POST /predict/text with sample text.
   • Or: curl -X POST http://localhost:8000/predict/text -H "Content-Type: application/json" -d "{\"text\": \"Free prize click here\"}"
2. Frontend: Enter text, click “Classify”, and confirm the label (Spam / Not spam) and confidence.

Dependencies

• Backend: requirements.txt in backend/ (FastAPI, uvicorn, scikit-learn, joblib, pandas, pydantic).
• Frontend: package.json in frontend/ (React, Vite). #This how it looks like the wwebpage: