Upload 60 files

.gitignore

@@ -1,9 +1,6 @@
+frontend/node_modules/
 __pycache__/
 *.pyc
 .venv/
-venv/
 .env
-.pytest_cache/
-plainrewrite_*.txt
-*.egg-info/
-.dist/
+.DS_Store

Dockerfile

@@ -1,3 +1,13 @@
+# ---- frontend build ----
+FROM node:22-alpine AS frontend
+WORKDIR /web
+ENV NODE_TLS_REJECT_UNAUTHORIZED=0
+COPY frontend/package.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# ---- backend ----
 FROM python:3.12-slim
 
 ENV PYTHONDONTWRITEBYTECODE=1 \
@@ -21,10 +31,11 @@ RUN pip install --upgrade pip && pip install -r requirements.txt \
 
 COPY app ./app
 COPY README.md .
+COPY --from=frontend /web/dist ./frontend/dist
 
 EXPOSE 7860
 
 HEALTHCHECK --interval=20s --timeout=5s --start-period=40s --retries=5 \
-  CMD curl -fsS http://127.0.0.1:7860/ || exit 1
+  CMD curl -fsS http://127.0.0.1:7860/health || exit 1
 
-CMD ["python", "-m", "app.ui"]
+CMD ["python", "app.py"]

README.md

@@ -3,106 +3,76 @@ title: PlainRewrite
 emoji: ✍️
 colorFrom: gray
 colorTo: blue
-sdk: gradio
-sdk_version: 6.20.0
-python_version: '3.12'
-app_file: app.py
+sdk: docker
+app_port: 7860
 pinned: false
 ---
 
 # PlainRewrite
 
-Offline text rewriter using **spaCy + WordNet + deterministic rules**.
-
-> **Hardware tip:** Prefer **CPU basic** (free). This app uses **no LLM and no GPU**. Do **not** use ZeroGPU — there is no `@spaces.GPU` workload here.
-
-## How it works
-
-Classical NLP paraphrase on **any** input (not fixed story regex, not an LLM):
-
-1. **Segment** — split paragraphs / sentences  
-2. **Scrub** — remove/replace stock AI filler phrases from `app/data/`  
-3. **Structure** — length-based clause splits / cautious passive→active when spaCy exists  
-4. **Synonyms** — token-level lexicon (`preferred_swaps` / `elevate_swaps`) + WordNet  
-5. **Tone** — Neutral (balanced), Casual (conversational), Formal (professional), Academic (scholarly lexicon + discourse frames).  
-6. **Similarity assist** (optional) — overlap % vs your reference  
-
-Lexicons are word lists applied dynamically to whatever tokens appear — not hardcoded full-sentence rewrites.
-
-### Rewrite strength
-
-| Strength | Behavior |
-|----------|----------|
-| **Light** | Mostly phrase scrub + preferred swaps |
-| **Normal** | Structure tweaks + moderate WordNet |
-| **Heavy** | More synonym and sentence-structure changes |
-
-## Fix Runtime error on Hugging Face
-
-If the Space shows:
-
-**`No @spaces.GPU function detected during startup`**
-
-your Space is on **ZeroGPU**. Switch hardware:
-
-1. Space **Settings → Hardware → CPU basic** (free)  
-2. Optional variable: `GRADIO_SSR_MODE` = `false`  
-3. **Factory rebuild**
-
-No API secrets are required (no OpenRouter).
-
-## Deploy (Gradio)
-
-1. Create Space → SDK **Gradio** → hardware **CPU basic**  
-2. Upload this project (`app.py`, `app/`, `requirements.txt`, this README)  
-3. Optional: `GRADIO_SSR_MODE` = `false`  
-4. Factory rebuild  
-
-`requirements.txt` installs the `en_core_web_sm` wheel so Gradio Spaces get spaCy (not only regex-fallback). Docker builds also download WordNet at image build time.
-
-If output equals input on an older deploy: **Factory rebuild** after uploading the latest `app/pipeline/` + `app/data/preferred_swaps.json`. Status under the button shows **Changed** / **Similarity**; Space **Logs** show `[plainrewrite] ...` lines (not Gradio’s chat panel).
-
-### Deploy (Docker Space, alternative)
-
-1. Create Space → SDK **Docker** → `app_port: 7860`  
-2. Upload including `Dockerfile`  
-3. Factory rebuild  
+Rewrite text in Neutral, Casual, Formal, or Academic tone.
 
 ## Local run
 
+### 1. Backend deps
+
 ```bash
 pip install -r requirements.txt
 pip install https://github.com/explosion/spacy-models/releases/download/en_core_web_sm-3.8.0/en_core_web_sm-3.8.0-py3-none-any.whl
 python -c "import nltk; nltk.download('wordnet'); nltk.download('omw-1.4')"
-python app.py
 ```
 
-Or:
+### 2. Frontend build
 
 ```bash
-python -m app.ui
+cd frontend
+npm install
+npm run build
+cd ..
+```
+
+### 3. Start app
+
+```bash
+python app.py
 ```
 
 Open http://127.0.0.1:7860
 
-### API only
+### Frontend dev (hot reload)
+
+Terminal A:
 
 ```bash
 uvicorn app.main:app --host 0.0.0.0 --port 8000
 ```
 
+Terminal B:
+
+```bash
+cd frontend
+npm run dev
+```
+
+Open http://127.0.0.1:5173 (proxies API to port 8000).
+
+## API
+
 - `GET /health`
 - `POST /v1/rewrite`
 - `POST /v1/similarity`
 
-### Docker (local)
+## Docker
 
 ```bash
 docker compose up --build
 ```
 
+## Deploy (Hugging Face)
+
+Use a **Docker** Space (`app_port: 7860`), not Gradio SDK. Prefer **CPU basic**.
+
 ## Notes
 
-- **No OpenRouter / no generative LLM** (no GPT, Llama, T5, PEGASUS, etc.).  
-- If spaCy model is missing, the app still runs with **regex + WordNet + rules** fallback.  
-- This is a classical paraphraser — it does **not** guarantee low AI-detector scores. Edit important text by hand.
+- Core rewrite engine is classical NLP (spaCy + WordNet + rules) — unchanged by the React UI.
+- Edit important text by hand before publishing.

app.py

@@ -1,19 +1,13 @@
-"""Hugging Face Spaces / local entrypoint for PlainRewrite Gradio UI."""
+"""Application entrypoint — serves React UI + rewrite API."""
 
 from __future__ import annotations
 
-from app.ui import APP_CSS, demo
+import os
+
+import uvicorn
+
 
 if __name__ == "__main__":
-    try:
-        demo.queue(default_concurrency_limit=2).launch(
-            server_name="0.0.0.0",
-            server_port=7860,
-            ssr_mode=False,
-            css=APP_CSS,
-        )
-    except TypeError:
-        demo.queue(default_concurrency_limit=2).launch(
-            server_name="0.0.0.0",
-            server_port=7860,
-        )
+    host = os.environ.get("HOST", "0.0.0.0")
+    port = int(os.environ.get("PORT", "7860") or "7860")
+    uvicorn.run("app.main:app", host=host, port=port, reload=False)

app/main.py

@@ -1,4 +1,4 @@
-"""FastAPI service wrapping the non-LLM rewrite engine."""
+"""FastAPI app — API + React static UI."""
 
 from __future__ import annotations
 
@@ -10,6 +10,9 @@ if str(ROOT) not in sys.path:
     sys.path.insert(0, str(ROOT))
 
 from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 
 from app.bootstrap import ensure_resources
@@ -20,7 +23,17 @@ from app.pipeline.tones import normalize_tone
 
 ensure_resources()
 
-app = FastAPI(title=APP_TITLE, version="1.0.0")
+STATIC_DIR = ROOT / "frontend" / "dist"
+
+app = FastAPI(title=APP_TITLE, version="2.0.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 
 class RewriteRequest(BaseModel):
@@ -42,7 +55,7 @@ def health():
     return {
         "status": "ok",
         "app": APP_TITLE,
-        "llm": False,
+        "ui": "react",
         "engines": engines,
     }
 
@@ -67,7 +80,8 @@ def api_rewrite(body: RewriteRequest):
             "seconds": result.seconds,
             "tone": result.tone,
             "strength": result.strength,
-            "llm": False,
+            "changed": result.changed,
+            "notes": result.notes,
         },
     }
 
@@ -82,3 +96,28 @@ def api_similarity(body: SimilarityRequest):
         "flags": sim.flags,
         "highlighted_html": sim.highlighted_html,
     }
+
+
+def _register_frontend() -> None:
+    if not STATIC_DIR.is_dir():
+        return
+
+    assets = STATIC_DIR / "assets"
+    if assets.is_dir():
+        app.mount("/assets", StaticFiles(directory=str(assets)), name="assets")
+
+    index = STATIC_DIR / "index.html"
+
+    @app.get("/")
+    def serve_index():
+        return FileResponse(index)
+
+    @app.get("/favicon.ico")
+    def favicon():
+        ico = STATIC_DIR / "favicon.ico"
+        if ico.is_file():
+            return FileResponse(ico)
+        raise HTTPException(status_code=404)
+
+
+_register_frontend()

app/ui.py

@@ -1,227 +1,20 @@
-"""PlainRewrite — non-LLM rewrite app (spaCy + WordNet + rules). No OpenRouter / no generative LLM."""
+"""Deprecated Gradio UI — use React frontend + `python app.py` / uvicorn instead."""
 
 from __future__ import annotations
 
-import os
-import sys
-import tempfile
-from pathlib import Path
+import warnings
 
-ROOT = Path(__file__).resolve().parent.parent
-if str(ROOT) not in sys.path:
-    sys.path.insert(0, str(ROOT))
-
-from app.bootstrap import ensure_resources
-
-ensure_resources()
-
-import gradio as gr
-
-from app.config import APP_TITLE, HOST, MAX_CHARS, PORT
-from app.pipeline.tones import TONE_OPTIONS, normalize_tone
-from app.pipeline.orchestrator import rewrite_text, similarity_check
-
-
-APP_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Fraunces:wght@600;700&display=swap');
-
-.gradio-container {
-  max-width: 1080px !important;
-  font-family: "DM Sans", system-ui, sans-serif !important;
-  background:
-    radial-gradient(900px 400px at 0% 0%, #e4eef5 0%, transparent 55%),
-    linear-gradient(180deg, #f6f8fa 0%, #eef2f5 100%) !important;
-}
-.main-title {
-  font-family: "Fraunces", Georgia, serif !important;
-  font-size: 2.2rem !important;
-  margin: 0.2rem 0 !important;
-  color: #1a2b36 !important;
-}
-.subtitle { color: #5a6b75; max-width: 40rem; line-height: 1.45; }
-.badge {
-  display: inline-block; border: 1px solid #c9d6de; background: #f7fafb;
-  padding: 0.25rem 0.65rem; font-size: 0.78rem; color: #5a6b75; margin-right: 0.35rem;
-}
-#go-btn { background: #1f5c6b !important; border: none !important; font-weight: 600 !important; }
-.prose-note { color: #5a6b75; font-size: 0.9rem; margin-top: 0.6rem; }
-"""
-
-STRENGTH_MAP = {"Light": 0, "Normal": 1, "Heavy": 2}
-
-
-def do_rewrite(text: str, tone: str, strength_label: str, preserve_length: bool):
-    text = (text or "").strip()
-    if not text:
-        raise gr.Error("Paste some text first.")
-    if len(text) > MAX_CHARS:
-        raise gr.Error(f"Text too long ({len(text):,} chars). Max is {MAX_CHARS:,}.")
-
-    result = rewrite_text(
-        text,
-        tone=normalize_tone(tone),
-        strength=STRENGTH_MAP.get(strength_label, 1),
-        preserve_length=preserve_length,
-    )
-    from difflib import SequenceMatcher
-
-    sim = SequenceMatcher(None, text.lower(), result.text.lower()).ratio()
-    status = (
-        f"**Engine:** `{result.engine}` (no LLM) · "
-        f"**Tone:** {result.tone} · **Strength:** {strength_label} · "
-        f"**Words:** {result.input_words:,} → {result.output_words:,} · "
-        f"**Changed:** {'yes' if result.changed else 'no'} · "
-        f"**Similarity:** {sim:.0%} · "
-        f"**Time:** {result.seconds}s"
-    )
-    if result.notes:
-        status += f"\n\n_{result.notes}_"
-    if not result.changed:
-        status += (
-            "\n\n_Output matched input. Try **Heavy** strength, or paste text with "
-            "formal words (utilize, facilitate, robust…) or AI-style openers._"
-        )
-    path = _download(result.text)
-    return result.text, status, path, text
-
-
-def do_similarity(rewrite: str, reference: str):
-    if not (rewrite or "").strip() or not (reference or "").strip():
-        raise gr.Error("Need both rewrite and reference text.")
-    sim = similarity_check(rewrite, reference)
-    summary = (
-        f"**Overlap:** {sim.overlap_pct}% · **Level:** {sim.level} · "
-        f"**Longest match:** {sim.longest_match_words} words"
-    )
-    if sim.flags:
-        summary += "\n\n**Flagged phrases:** " + "; ".join(f"`{f}`" for f in sim.flags[:6])
-    summary += (
-        "\n\n_This measures overlap with your reference only — "
-        "not AI-detector scores or web plagiarism._"
-    )
-    return summary, sim.highlighted_html
-
-
-def _download(text: str) -> str | None:
-    if not text.strip():
-        return None
-    fd, path = tempfile.mkstemp(prefix="plainrewrite_", suffix=".txt")
-    os.close(fd)
-    Path(path).write_text(text, encoding="utf-8")
-    return path
-
-
-def build_ui() -> gr.Blocks:
-    gradio_major = int(gr.__version__.split(".")[0])
-
-    with gr.Blocks(title=APP_TITLE) as demo:
-        gr.HTML(f"<style>{APP_CSS}</style>")
-        gr.HTML(
-            f"""
-            <div class="main-title">{APP_TITLE}</div>
-            <p class="subtitle">
-              Offline rewrite with <strong>spaCy + WordNet + rules</strong>.
-              No OpenRouter. No generative LLM.
-            </p>
-            <div>
-              <span class="badge">non-LLM</span>
-              <span class="badge">Docker-ready</span>
-              <span class="badge">similarity assist</span>
-            </div>
-            """
-        )
-
-        with gr.Row():
-            with gr.Column(scale=5):
-                inp = gr.Textbox(
-                    label="Input text",
-                    lines=16,
-                    placeholder="Paste text to rewrite…",
-                )
-            with gr.Column(scale=3):
-                tone = gr.Radio(
-                    list(TONE_OPTIONS),
-                    value="Neutral",
-                    label="Tone",
-                    info="Neutral = balanced · Casual = conversational · Formal = professional · Academic = scholarly",
-                )
-                strength = gr.Radio(
-                    ["Light", "Normal", "Heavy"],
-                    value="Normal",
-                    label="Rewrite strength",
-                    info="Heavy = more phrase and structure changes.",
-                )
-                preserve = gr.Checkbox(
-                    value=True,
-                    label="Match original length (don't expand)",
-                )
-                btn = gr.Button("Rewrite", variant="primary", elem_id="go-btn")
-                status = gr.Markdown("Ready.")
-
-        out_kwargs: dict = {"label": "Rewritten text", "lines": 16}
-        if gradio_major >= 6:
-            out_kwargs["buttons"] = ["copy"]
-        else:
-            out_kwargs["show_copy_button"] = True
-        out = gr.Textbox(**out_kwargs)
-        download = gr.File(label="Download .txt")
-        original_store = gr.State("")
-
-        with gr.Accordion("Similarity assist (optional)", open=False):
-            gr.Markdown(
-                "Compare rewrite to your original input (or paste another reference)."
-            )
-            ref = gr.Textbox(
-                label="Reference text",
-                lines=8,
-                placeholder="Defaults to your input after Rewrite; or paste sources here.",
-            )
-            sim_btn = gr.Button("Run similarity check")
-            sim_md = gr.Markdown()
-            sim_html = gr.HTML()
-
-        gr.HTML(
-            """
-            <p class="prose-note">
-              PlainRewrite changes wording and structure with classical NLP only.
-              It is not an LLM humanizer and does not guarantee AI-detector scores.
-              Edit important text by hand after rewriting.
-            </p>
-            """
-        )
-
-        def _on_rewrite(text, tone_v, strength_v, preserve_v):
-            rewritten, st, path, original = do_rewrite(
-                text, tone_v, strength_v, preserve_v
-            )
-            return rewritten, st, path, original, original
-
-        btn.click(
-            _on_rewrite,
-            inputs=[inp, tone, strength, preserve],
-            outputs=[out, status, download, original_store, ref],
-        )
-        sim_btn.click(
-            do_similarity,
-            inputs=[out, ref],
-            outputs=[sim_md, sim_html],
-        )
-
-    return demo
+warnings.warn(
+    "app.ui (Gradio) is deprecated. Run `python app.py` to serve the React UI + API.",
+    DeprecationWarning,
+    stacklevel=2,
+)
 
+if __name__ == "__main__":
+    import os
 
-demo = build_ui()
+    import uvicorn
 
-if __name__ == "__main__":
-    launch_kwargs = {
-        "server_name": HOST,
-        "server_port": PORT,
-    }
-    try:
-        demo.queue(default_concurrency_limit=2).launch(
-            **launch_kwargs,
-            ssr_mode=False,
-            css=APP_CSS,
-        )
-    except TypeError:
-        demo.queue(default_concurrency_limit=2).launch(**launch_kwargs)
+    host = os.environ.get("HOST", "0.0.0.0")
+    port = int(os.environ.get("PORT", "7860") or "7860")
+    uvicorn.run("app.main:app", host=host, port=port, reload=False)

frontend/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.local

frontend/dist/assets/index.css

@@ -0,0 +1,327 @@
+:root {
+  --ink: #14262f;
+  --ink-soft: #3d5561;
+  --muted: #6a7f8a;
+  --paper: #f3f6f8;
+  --panel: rgba(255, 255, 255, 0.72);
+  --line: rgba(20, 38, 47, 0.12);
+  --accent: #1f6f7a;
+  --accent-deep: #15545c;
+  --accent-glow: rgba(31, 111, 122, 0.18);
+  --ok: #2a7a5c;
+  --danger: #a33b3b;
+  --radius: 18px;
+  --font-display: "Fraunces", Georgia, serif;
+  --font-body: "Sora", system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-body);
+  background:
+    radial-gradient(1000px 520px at 8% -10%, #d7ecef 0%, transparent 55%),
+    radial-gradient(900px 480px at 100% 0%, #e7eef3 0%, transparent 50%),
+    linear-gradient(180deg, #f7fafb 0%, #eef3f5 48%, #e8eef1 100%);
+}
+
+button,
+textarea {
+  font: inherit;
+}
+
+.app {
+  width: min(1180px, calc(100% - 2rem));
+  margin: 0 auto;
+  padding: 1.75rem 0 3rem;
+  animation: rise 0.55s ease both;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  margin-bottom: 1.5rem;
+}
+
+.brand h1 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(2.2rem, 4vw, 3.1rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  color: var(--ink);
+}
+
+.brand p {
+  margin: 0;
+  max-width: 34rem;
+  color: var(--ink-soft);
+  font-size: 1.02rem;
+  line-height: 1.5;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 1.1rem;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .workspace {
+    grid-template-columns: 1fr;
+  }
+}
+
+.editors {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.9rem;
+}
+
+@media (max-width: 720px) {
+  .editors {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  min-height: 420px;
+}
+
+.pane-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.pane-head h2 {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.pane textarea {
+  flex: 1;
+  width: 100%;
+  min-height: 380px;
+  resize: vertical;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 1rem 1.05rem;
+  background: var(--panel);
+  backdrop-filter: blur(10px);
+  color: var(--ink);
+  line-height: 1.55;
+  outline: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.25s ease;
+}
+
+.pane textarea:focus {
+  border-color: rgba(31, 111, 122, 0.45);
+  box-shadow: 0 0 0 4px var(--accent-glow);
+}
+
+.pane textarea::placeholder {
+  color: #8aa0ab;
+}
+
+.controls {
+  position: sticky;
+  top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.15rem;
+  padding: 1.15rem 1.2rem 1.25rem;
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) + 4px);
+  background:
+    linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(243, 249, 250, 0.75));
+  backdrop-filter: blur(12px);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.field label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.chip {
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--ink-soft);
+  border-radius: 999px;
+  padding: 0.42rem 0.8rem;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.15s ease;
+}
+
+.chip:hover {
+  transform: translateY(-1px);
+  border-color: rgba(31, 111, 122, 0.35);
+}
+
+.chip.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle input {
+  width: 1.05rem;
+  height: 1.05rem;
+  accent-color: var(--accent);
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.btn {
+  border: none;
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    transform 0.15s ease,
+    opacity 0.2s ease;
+}
+
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, #24828e 0%, var(--accent-deep) 100%);
+  color: #fff;
+  box-shadow: 0 10px 24px rgba(21, 84, 92, 0.22);
+}
+
+.btn-primary:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  background: transparent;
+  border: 1px solid var(--line);
+  color: var(--ink-soft);
+}
+
+.btn-ghost:not(:disabled):hover {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.meta {
+  min-height: 1.3rem;
+  font-size: 0.88rem;
+  color: var(--muted);
+}
+
+.meta.error {
+  color: var(--danger);
+}
+
+.meta.loading {
+  animation: pulse 1.1s ease infinite;
+}
+
+.icon-btn {
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.75);
+  color: var(--ink-soft);
+  border-radius: 10px;
+  padding: 0.35rem 0.65rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.footer-note {
+  margin-top: 1.4rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+}

frontend/dist/assets/index.js

@@ -0,0 +1,276 @@
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+const { createElement: h } = React;
+
+const TONES = ["Neutral", "Casual", "Formal", "Academic"];
+const STRENGTHS = ["Light", "Normal", "Heavy"];
+const STRENGTH_MAP = { Light: 0, Normal: 1, Heavy: 2 };
+const MAX_CHARS = 50000;
+
+async function rewriteText(payload) {
+  const res = await fetch("/v1/rewrite", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    let detail = "Rewrite failed.";
+    try {
+      const data = await res.json();
+      detail = data.detail || detail;
+    } catch {
+      /* ignore */
+    }
+    throw new Error(typeof detail === "string" ? detail : "Rewrite failed.");
+  }
+  return res.json();
+}
+
+function Chip({ active, label, onClick }) {
+  return h(
+    "button",
+    {
+      type: "button",
+      className: `chip${active ? " active" : ""}`,
+      onClick,
+    },
+    label,
+  );
+}
+
+function App() {
+  const [input, setInput] = useState("");
+  const [output, setOutput] = useState("");
+  const [tone, setTone] = useState("Neutral");
+  const [strength, setStrength] = useState("Normal");
+  const [preserveLength, setPreserveLength] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [meta, setMeta] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return undefined;
+    const t = window.setTimeout(() => setCopied(false), 1600);
+    return () => window.clearTimeout(t);
+  }, [copied]);
+
+  async function onRewrite() {
+    const text = input.trim();
+    if (!text) {
+      setError("Paste some text first.");
+      return;
+    }
+    if (text.length > MAX_CHARS) {
+      setError(`Text is too long (${text.length.toLocaleString()} chars).`);
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    setMeta("Rewriting…");
+    try {
+      const result = await rewriteText({
+        text,
+        tone,
+        strength: STRENGTH_MAP[strength],
+        preserve_length: preserveLength,
+      });
+      setOutput(result.rewrite);
+      setMeta(
+        `${result.meta.input_words.toLocaleString()} → ${result.meta.output_words.toLocaleString()} words · ${result.meta.seconds}s · ${result.meta.tone}`,
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Rewrite failed.");
+      setMeta("");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onCopy() {
+    if (!output.trim()) return;
+    try {
+      await navigator.clipboard.writeText(output);
+      setCopied(true);
+    } catch {
+      setError("Could not copy to clipboard.");
+    }
+  }
+
+  function onDownload() {
+    if (!output.trim()) return;
+    const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "plainrewrite.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return h(
+    "div",
+    { className: "app" },
+    h(
+      "header",
+      { className: "brand" },
+      h("h1", null, "PlainRewrite"),
+      h(
+        "p",
+        null,
+        "Rewrite any text in your voice — balanced, casual, formal, or academic.",
+      ),
+    ),
+    h(
+      "div",
+      { className: "workspace" },
+      h(
+        "section",
+        { className: "editors" },
+        h(
+          "div",
+          { className: "pane" },
+          h("div", { className: "pane-head" }, h("h2", null, "Original")),
+          h("textarea", {
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            placeholder: "Paste your text…",
+            spellCheck: true,
+          }),
+        ),
+        h(
+          "div",
+          { className: "pane" },
+          h(
+            "div",
+            { className: "pane-head" },
+            h("h2", null, "Rewrite"),
+            h(
+              "div",
+              { style: { display: "flex", gap: "0.4rem" } },
+              h(
+                "button",
+                {
+                  type: "button",
+                  className: "icon-btn",
+                  onClick: onCopy,
+                  disabled: !output.trim(),
+                },
+                copied ? "Copied" : "Copy",
+              ),
+              h(
+                "button",
+                {
+                  type: "button",
+                  className: "icon-btn",
+                  onClick: onDownload,
+                  disabled: !output.trim(),
+                },
+                "Download",
+              ),
+            ),
+          ),
+          h("textarea", {
+            value: output,
+            onChange: (e) => setOutput(e.target.value),
+            placeholder: "Your rewrite will appear here…",
+            spellCheck: true,
+          }),
+        ),
+      ),
+      h(
+        "aside",
+        { className: "controls" },
+        h(
+          "div",
+          { className: "field" },
+          h("label", null, "Tone"),
+          h(
+            "div",
+            { className: "chips" },
+            ...TONES.map((t) =>
+              h(Chip, {
+                key: t,
+                label: t,
+                active: tone === t,
+                onClick: () => setTone(t),
+              }),
+            ),
+          ),
+        ),
+        h(
+          "div",
+          { className: "field" },
+          h("label", null, "Strength"),
+          h(
+            "div",
+            { className: "chips" },
+            ...STRENGTHS.map((s) =>
+              h(Chip, {
+                key: s,
+                label: s,
+                active: strength === s,
+                onClick: () => setStrength(s),
+              }),
+            ),
+          ),
+        ),
+        h(
+          "label",
+          { className: "toggle" },
+          h("input", {
+            type: "checkbox",
+            checked: preserveLength,
+            onChange: (e) => setPreserveLength(e.target.checked),
+          }),
+          " Match original length",
+        ),
+        h(
+          "div",
+          { className: "actions" },
+          h(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-primary",
+              onClick: onRewrite,
+              disabled: loading,
+            },
+            loading ? "Rewriting…" : "Rewrite",
+          ),
+          h(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-ghost",
+              onClick: () => {
+                setInput("");
+                setOutput("");
+                setMeta("");
+                setError("");
+              },
+              disabled: loading,
+            },
+            "Clear",
+          ),
+        ),
+        h(
+          "div",
+          {
+            className: `meta${error ? " error" : ""}${loading ? " loading" : ""}`,
+          },
+          error || meta || "Ready when you are.",
+        ),
+      ),
+    ),
+    h(
+      "p",
+      { className: "footer-note" },
+      "Edit important text before you publish it.",
+    ),
+  );
+}
+
+createRoot(document.getElementById("root")).render(h(App));

frontend/dist/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PlainRewrite</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Sora:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/assets/index.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@19.1.0",
+          "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
+          "react-dom/client": "https://esm.sh/react-dom@19.1.0/client"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/assets/index.js"></script>
+  </body>
+</html>

frontend/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PlainRewrite</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Sora:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "plainrewrite-ui",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0"
+  }
+}

frontend/src/App.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useState } from "react";
+import {
+  rewriteText,
+  STRENGTH_MAP,
+  STRENGTHS,
+  TONES,
+  type StrengthLabel,
+  type Tone,
+} from "./api";
+
+const MAX_CHARS = 50000;
+
+export default function App() {
+  const [input, setInput] = useState("");
+  const [output, setOutput] = useState("");
+  const [tone, setTone] = useState<Tone>("Neutral");
+  const [strength, setStrength] = useState<StrengthLabel>("Normal");
+  const [preserveLength, setPreserveLength] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [meta, setMeta] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const t = window.setTimeout(() => setCopied(false), 1600);
+    return () => window.clearTimeout(t);
+  }, [copied]);
+
+  async function onRewrite() {
+    const text = input.trim();
+    if (!text) {
+      setError("Paste some text first.");
+      return;
+    }
+    if (text.length > MAX_CHARS) {
+      setError(`Text is too long (${text.length.toLocaleString()} chars).`);
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    setMeta("Rewriting…");
+    try {
+      const result = await rewriteText({
+        text,
+        tone,
+        strength: STRENGTH_MAP[strength],
+        preserve_length: preserveLength,
+      });
+      setOutput(result.rewrite);
+      setMeta(
+        `${result.meta.input_words.toLocaleString()} → ${result.meta.output_words.toLocaleString()} words · ${result.meta.seconds}s · ${result.meta.tone}`,
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Rewrite failed.");
+      setMeta("");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onCopy() {
+    if (!output.trim()) return;
+    try {
+      await navigator.clipboard.writeText(output);
+      setCopied(true);
+    } catch {
+      setError("Could not copy to clipboard.");
+    }
+  }
+
+  function onDownload() {
+    if (!output.trim()) return;
+    const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "plainrewrite.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="app">
+      <header className="brand">
+        <h1>PlainRewrite</h1>
+        <p>
+          Rewrite any text in your voice — balanced, casual, formal, or
+          academic.
+        </p>
+      </header>
+
+      <div className="workspace">
+        <section className="editors">
+          <div className="pane">
+            <div className="pane-head">
+              <h2>Original</h2>
+            </div>
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Paste your text…"
+              spellCheck
+            />
+          </div>
+
+          <div className="pane">
+            <div className="pane-head">
+              <h2>Rewrite</h2>
+              <div style={{ display: "flex", gap: "0.4rem" }}>
+                <button
+                  type="button"
+                  className="icon-btn"
+                  onClick={onCopy}
+                  disabled={!output.trim()}
+                >
+                  {copied ? "Copied" : "Copy"}
+                </button>
+                <button
+                  type="button"
+                  className="icon-btn"
+                  onClick={onDownload}
+                  disabled={!output.trim()}
+                >
+                  Download
+                </button>
+              </div>
+            </div>
+            <textarea
+              value={output}
+              onChange={(e) => setOutput(e.target.value)}
+              placeholder="Your rewrite will appear here…"
+              spellCheck
+            />
+          </div>
+        </section>
+
+        <aside className="controls">
+          <div className="field">
+            <label>Tone</label>
+            <div className="chips">
+              {TONES.map((t) => (
+                <button
+                  key={t}
+                  type="button"
+                  className={`chip${tone === t ? " active" : ""}`}
+                  onClick={() => setTone(t)}
+                >
+                  {t}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="field">
+            <label>Strength</label>
+            <div className="chips">
+              {STRENGTHS.map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  className={`chip${strength === s ? " active" : ""}`}
+                  onClick={() => setStrength(s)}
+                >
+                  {s}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <label className="toggle">
+            <input
+              type="checkbox"
+              checked={preserveLength}
+              onChange={(e) => setPreserveLength(e.target.checked)}
+            />
+            Match original length
+          </label>
+
+          <div className="actions">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={onRewrite}
+              disabled={loading}
+            >
+              {loading ? "Rewriting…" : "Rewrite"}
+            </button>
+            <button
+              type="button"
+              className="btn btn-ghost"
+              onClick={() => {
+                setInput("");
+                setOutput("");
+                setMeta("");
+                setError("");
+              }}
+              disabled={loading}
+            >
+              Clear
+            </button>
+          </div>
+
+          <div
+            className={`meta${error ? " error" : ""}${loading ? " loading" : ""}`}
+          >
+            {error || meta || "Ready when you are."}
+          </div>
+        </aside>
+      </div>
+
+      <p className="footer-note">Edit important text before you publish it.</p>
+    </div>
+  );
+}

frontend/src/api.ts

@@ -0,0 +1,48 @@
+export type Tone = "Neutral" | "Casual" | "Formal" | "Academic";
+export type StrengthLabel = "Light" | "Normal" | "Heavy";
+
+export const TONES: Tone[] = ["Neutral", "Casual", "Formal", "Academic"];
+export const STRENGTHS: StrengthLabel[] = ["Light", "Normal", "Heavy"];
+
+export const STRENGTH_MAP: Record<StrengthLabel, number> = {
+  Light: 0,
+  Normal: 1,
+  Heavy: 2,
+};
+
+export type RewriteMeta = {
+  input_words: number;
+  output_words: number;
+  seconds: number;
+  tone: string;
+  strength: number;
+};
+
+export type RewriteResponse = {
+  rewrite: string;
+  meta: RewriteMeta;
+};
+
+export async function rewriteText(payload: {
+  text: string;
+  tone: Tone;
+  strength: number;
+  preserve_length: boolean;
+}): Promise<RewriteResponse> {
+  const res = await fetch("/v1/rewrite", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    let detail = "Rewrite failed.";
+    try {
+      const data = await res.json();
+      detail = data.detail || detail;
+    } catch {
+      /* ignore */
+    }
+    throw new Error(typeof detail === "string" ? detail : "Rewrite failed.");
+  }
+  return res.json();
+}

frontend/src/index.css

@@ -0,0 +1,327 @@
+:root {
+  --ink: #14262f;
+  --ink-soft: #3d5561;
+  --muted: #6a7f8a;
+  --paper: #f3f6f8;
+  --panel: rgba(255, 255, 255, 0.72);
+  --line: rgba(20, 38, 47, 0.12);
+  --accent: #1f6f7a;
+  --accent-deep: #15545c;
+  --accent-glow: rgba(31, 111, 122, 0.18);
+  --ok: #2a7a5c;
+  --danger: #a33b3b;
+  --radius: 18px;
+  --font-display: "Fraunces", Georgia, serif;
+  --font-body: "Sora", system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-body);
+  background:
+    radial-gradient(1000px 520px at 8% -10%, #d7ecef 0%, transparent 55%),
+    radial-gradient(900px 480px at 100% 0%, #e7eef3 0%, transparent 50%),
+    linear-gradient(180deg, #f7fafb 0%, #eef3f5 48%, #e8eef1 100%);
+}
+
+button,
+textarea {
+  font: inherit;
+}
+
+.app {
+  width: min(1180px, calc(100% - 2rem));
+  margin: 0 auto;
+  padding: 1.75rem 0 3rem;
+  animation: rise 0.55s ease both;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  margin-bottom: 1.5rem;
+}
+
+.brand h1 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(2.2rem, 4vw, 3.1rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  color: var(--ink);
+}
+
+.brand p {
+  margin: 0;
+  max-width: 34rem;
+  color: var(--ink-soft);
+  font-size: 1.02rem;
+  line-height: 1.5;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 1.1rem;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .workspace {
+    grid-template-columns: 1fr;
+  }
+}
+
+.editors {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.9rem;
+}
+
+@media (max-width: 720px) {
+  .editors {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  min-height: 420px;
+}
+
+.pane-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.pane-head h2 {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.pane textarea {
+  flex: 1;
+  width: 100%;
+  min-height: 380px;
+  resize: vertical;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 1rem 1.05rem;
+  background: var(--panel);
+  backdrop-filter: blur(10px);
+  color: var(--ink);
+  line-height: 1.55;
+  outline: none;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.25s ease;
+}
+
+.pane textarea:focus {
+  border-color: rgba(31, 111, 122, 0.45);
+  box-shadow: 0 0 0 4px var(--accent-glow);
+}
+
+.pane textarea::placeholder {
+  color: #8aa0ab;
+}
+
+.controls {
+  position: sticky;
+  top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.15rem;
+  padding: 1.15rem 1.2rem 1.25rem;
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) + 4px);
+  background:
+    linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(243, 249, 250, 0.75));
+  backdrop-filter: blur(12px);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.field label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.chip {
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--ink-soft);
+  border-radius: 999px;
+  padding: 0.42rem 0.8rem;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.15s ease;
+}
+
+.chip:hover {
+  transform: translateY(-1px);
+  border-color: rgba(31, 111, 122, 0.35);
+}
+
+.chip.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle input {
+  width: 1.05rem;
+  height: 1.05rem;
+  accent-color: var(--accent);
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.btn {
+  border: none;
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    transform 0.15s ease,
+    opacity 0.2s ease;
+}
+
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, #24828e 0%, var(--accent-deep) 100%);
+  color: #fff;
+  box-shadow: 0 10px 24px rgba(21, 84, 92, 0.22);
+}
+
+.btn-primary:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  background: transparent;
+  border: 1px solid var(--line);
+  color: var(--ink-soft);
+}
+
+.btn-ghost:not(:disabled):hover {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.meta {
+  min-height: 1.3rem;
+  font-size: 0.88rem;
+  color: var(--muted);
+}
+
+.meta.error {
+  color: var(--danger);
+}
+
+.meta.loading {
+  animation: pulse 1.1s ease infinite;
+}
+
+.icon-btn {
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.75);
+  color: var(--ink-soft);
+  border-radius: 10px;
+  padding: 0.35rem 0.65rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.footer-note {
+  margin-top: 1.4rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/v1": "http://127.0.0.1:8000",
+      "/health": "http://127.0.0.1:8000",
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+});

requirements.txt

@@ -1,4 +1,3 @@
-gradio>=4.44.0
 fastapi>=0.115.0
 uvicorn[standard]>=0.30.0
 spacy>=3.7.0,<3.9.0