This project demonstrates how to deploy a pre-trained machine learning model (Scikit-learn's LinearSVC with TfidfVectorizer) entirely within a web browser using Pyodide and worker api. The application uses a React frontend managed by the Vite build tool.
The ML model is loaded asynchronously from static files, eliminating the need for a backend server for running predictions. The estimated testing accuracy of the underlying model is 61%.
This project uses a modern polyglot stack by integrating front-end frameworks with scientific Python libraries:
| Category | Technology | Version(s) | Role in Project |
|---|---|---|---|
| Frontend | React | ^18.2.0 |
JavaScript library for building the UI and the input/output components (Body.jsx). |
| Build Tooling | Vite | ^7.1.9 |
Used for development server (npm start) and optimized production builds. |
The app is served from /emotion/, not from a domain root: it is reached as
https://sabo.sh/emotion/… through a Cloudflare worker that proxies requests
without rewriting the path, so the origin has to answer on /emotion/… itself.
base in vite.config.ts is the single source of truth — it sets every
emitted asset URL. Vite builds into build/emotion while Netlify publishes
build/, so the files sit on disk at exactly the paths they are served from,
and textemotiondetection.netlify.app/emotion/ renders the same page as the
short domain.
One thing does not follow base on its own: the Pyodide wheel. It is
fetched by URL from inside the web worker, so pyodideWorker.ts builds that
URL from import.meta.env.BASE_URL rather than a leading slash — a bare
/model_api-…whl would be looked for at the domain root, where a different
project lives.
-
Install JavaScript dependencies:
npm install
-
Start the development server:
npm start # Runs the 'vite' commandThe application will launch, but the ML prediction button will not work until the model files are placed in the
publicfolder.