Browser-Based Sentiment Analysis Tool
Build a React and TypeScript web app that analyzes the sentiment of text (how positive or negative it is) entirely in the browser, with a pre-trained TensorFlow.js model: nothing typed is ever sent to a server. As the user types, the app shows a score and a label with the model's confidence, keeps a history of analyzed texts, and loads fast on return visits because the model is saved in the browser. The hard parts are turning text into the exact numbers the model was trained on, loading a large model without freezing the page, and handling the model's limits honestly. You'll learn TensorFlow.js, preprocessing text for a model, typed wrappers around untyped APIs, Web Workers, caching models in IndexedDB, and testing ML code.
- Estimate
- ~11h
- Steps
- 7
- Completed by
- 0
- Proposed by
- codeseed.app
TensorFlow.js · React
Project roadmap
- 01
Set up the app
~1hCreate a React and TypeScript project with Vite and add @tensorflow/tfjs. Choose a pre-trained sentiment model for TensorFlow.js, for example the sentiment CNN from the official tfjs-examples (trained on movie reviews), and note in README.md what it was trained on and what that means for other kinds of text. Done when: the project runs, and README.md describes the model and its limits.
- 02
Load the model
~1.5hLoad the model with tf.loadLayersModel along with its metadata (the word index, the maximum sequence length and the index used for unknown words). Show a loading state with progress, and a clear error when loading fails. Log the model's input and output shapes. Done when: the model loads, and a test sentence produces a number between 0 and 1.
- 03
Write typed inference functions
~2hWrite typed functions: tokenize(text) that reproduces the training preprocessing (lowercase, remove punctuation, split into words, map words to indexes with the unknown index for new words, and pad or cut to the fixed length), and predict(text): Promise<SentimentResult> returning the score, a label (negative, neutral or positive by thresholds) and the share of known words. Free tensors with tf.tidy or dispose to avoid memory leaks. Done when: clearly positive and negative sentences get the expected labels.
- 04
Build the interface
~2hBuild a text area that analyzes after the user stops typing for a moment, showing the score as a bar, the label and the confidence. When most words are unknown to the model, show a warning that the result is unreliable. Make it accessible (labels, and color not being the only signal). Done when: typing updates the result smoothly, with warnings for unreliable results.
- 05
Keep a history
~1hKeep a list of analyzed texts with their results and times, saved in localStorage, with options to remove items, clear the history, and export it as CSV. Done when: the history survives reloading the page and can be exported.
- 06
Load faster and keep the page smooth
~2hSave the model to IndexedDB after the first download (model.save('indexeddb://...')) and load it from there next time, updating it when the model version changes. Run the model in a Web Worker so typing never stutters during inference. Measure the load time on first and later visits and note it in README.md. Done when: return visits load noticeably faster, and the page stays smooth during analysis.
- 07
Test it
~1.5hWrite Vitest tests for tokenization (punctuation, unknown words, padding and cutting), label thresholds, and the history, and a test of predict with a tiny fake model built with tf.sequential, so tests don't download the real model. Done when: npm test passes.
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack