import { useState, useEffect, useRef } from "react"; const API_BASE = "/api"; const EXAMPLES = [ { label: "Positive", emoji: "⭐", text: "This product completely exceeded my expectations. The build quality is outstanding and it arrived two days early!" }, { label: "Negative", emoji: "💀", text: "Absolute garbage. Broke after one week of use. Customer service was useless and ignored my emails." }, { label: "Mixed", emoji: "😐", text: "Decent product for the price. Nothing special but gets the job done. Shipping was average." }, { label: "Rave", emoji: "🔥", text: "I am obsessed with this! Best purchase I've made all year. My whole family loves it." }, { label: "Rant", emoji: "😤", text: "Very disappointing. The description was misleading and the item looks nothing like the photos." }, ]; const STATS = [ { value: "50K", label: "Training Samples" }, { value: "89.35%", label: "TF-IDF Accuracy" }, { value: "91.70%", label: "BERT Accuracy" }, { value: "4", label: "Failure Categories" }, ]; function ConfidenceBar({ value, color }) { const [width, setWidth] = useState(0); useEffect(() => { const t = setTimeout(() => setWidth(value * 100), 100); return () => clearTimeout(t); }, [value]); return (
); } function ModelCard({ title, subtitle, badge, badgeColor, result, loading, accent, icon }) { const isPos = result?.label === "POSITIVE"; const sentColor = result ? (isPos ? "#34D399" : "#F87171") : accent; return (
{subtitle}
{icon} {title}
{badge}
{loading ? (
{"> processing_tensors..."}
) : result ? (
{isPos ? "😊" : "😞"}
{result.label}
{result.latency_ms}ms inference
Confidence {(result.confidence * 100).toFixed(1)}%
) : (
{"> awaiting_input..."}
)}
); } export default function App() { const [text, setText] = useState(""); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [scrolled, setScrolled] = useState(false); const analyzeRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); const analyze = async (inputText) => { const t = inputText ?? text; if (!t.trim()) return; setLoading(true); setError(null); setResult(null); try { const res = await fetch(`${API_BASE}/analyze`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: t }), }); if (!res.ok) throw new Error(`Server error ${res.status}`); setResult(await res.json()); } catch (e) { setError(e.message); } finally { setLoading(false); } }; const handleExample = (ex) => { setText(ex.text); analyze(ex.text); analyzeRef.current?.scrollIntoView({ behavior: "smooth" }); }; const agree = result && result.tfidf.label === result.bert.label; return (
{/* Global Background Blobs */}
{/* Navbar */} {/* Hero Section (Krysta Wing Style) */}
{/* Terminal Window Mockup */}
BASH — LENS
~ sentiment %
$ init_engine --models=tfidf,distilbert
INFO Fetching weights from registry...
OK Verified cryptographic manifest
OK Models initialized correctly
NOTE System ready for inference
{/* Giant Typography */}

SENTIMENT LENS

{/* Bottom Subheading */}
N
{/* Stats */}
{STATS.map(({ value, label }) => (
e.currentTarget.style.background = "rgba(20, 15, 35, 0.8)"} onMouseLeave={e => e.currentTarget.style.background = "rgba(10, 5, 20, 0.6)"}>
{value}
{label}
))}
{/* Analyze Section */}
System Console

Execute Inference

Input Payload
{text.length > 0 &&
[{text.length}_bytes]
}