Technical Specification: Private Browser-Based AI Sentiment Analyzer

Overview

A 100% client-side, browser-based application that performs natural language processing (NLP) to detect the emotional sentiment of input text. By utilizing Transformers.js, the tool runs machine learning inference locally, ensuring maximum data privacy for the user.

Core Features

• Real-time Sentiment Analysis: Processes text input and immediately classifies it as Positive, Negative, or Neutral.
• Client-Side Privacy: Zero server-side communication. All processing happens within the browser's main thread or Web Workers.
• Performance Metrics: Display confidence scores (0-100%) for the detected sentiment.
• Large Text Support: Efficient handling of longer blocks of text using chunking or model-appropriate truncation.
• Clean Input Interface: A focus-driven, distraction-free writing environment.

UI/UX Design

• Theme: Pure Light Mode. Use high-contrast grays, white backgrounds, and soft, professional brand-blue accents (#2563eb). No dark mode toggles.
• Layout:
  • Header: Descriptive title (no branding).
  • Main Area: Large, responsive textarea with a character counter.
  • Action Bar: "Analyze Text" button with a loading spinner.
  • Results Section: Dynamic cards appearing below the input, showing the Primary Sentiment (Large bold text), Confidence Score (Progress bar), and a short explanation of the result.
• Typography: Clean, sans-serif fonts (e.g., Inter or system-ui) for readability.
• Animations: Subtle fade-ins for results cards; smooth transition on button click to processing state; progress bar pulse animations while computing.

Technical Implementation

• Architecture: Single-file architecture (HTML, CSS, JS combined).
• Frameworks: Vanilla JavaScript only. Use CDN links for Transformers.js (https://cdn.jsdelivr.net/npm/@xenova/transformers).
• Data Handling: No persistent storage. The app state (current input and latest result) is handled entirely in-memory using standard JS objects.
• Loading Strategy: Initializing the model takes a few seconds. The UI must provide a clear, non-intrusive progress bar during the model's first-load phase.
• Responsive Constraints: Stack the input and results vertically on mobile devices; side-by-side or stacked on tablets and desktops depending on content length.

Developer Constraints Compliance

• No LocalStorage/SessionStorage: The code must strictly avoid calls to localStorage or sessionStorage due to the null-origin sandbox environment.
• Single-File Pattern: All CSS in <style> blocks and JS in <script> blocks within the one HTML file.
• No External Links: All external documentation or library links must have target="_blank" and rel="noopener noreferrer".
• No Popups: If user feedback or errors occur, use a custom-built, fixed-position overlay div instead of alert().
• Dependencies: Use only stable CDNs. Avoid build tools like Webpack or Vite.