Spaces:

techfreakworm
/

chatterbox-voice-studio

Running

App Files Files Community

techfreakworm commited on 22 days ago

Commit

65949d0

unverified ·

1 Parent(s): c3ddb06

feat(web): editorial-studio visual polish — Fraunces serif, IBM Plex mono, warm dark, ember accents

Browse files

Files changed (12) hide show

web/index.html +6 -0
web/src/components/DeviceBadge.tsx +7 -4
web/src/components/HistoryList.tsx +35 -12
web/src/components/LoadingBanner.tsx +5 -2
web/src/components/ModelPicker.tsx +15 -16
web/src/components/ParamsPanel.tsx +28 -15
web/src/components/TagBar.tsx +3 -2
web/src/components/VoiceComposer.tsx +12 -9
web/src/components/VoiceLibrary.tsx +49 -27
web/src/pages/Studio.tsx +122 -82
web/src/styles/index.css +104 -22
web/tailwind.config.ts +23 -1

web/index.html CHANGED Viewed

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chatterbox Voice Studio</title>
   </head>
   <body>
     <div id="root"></div>

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chatterbox Voice Studio</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,400;9..144,500;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

web/src/components/DeviceBadge.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 export default function DeviceBadge() {
-  const [device, setDevice] = useState<string>("?");
   useEffect(() => {
     fetch("/api/health")
       .then((r) => r.json())
@@ -9,8 +9,11 @@ export default function DeviceBadge() {
       .catch(() => setDevice("offline"));
   }, []);
   return (
-    <span className="text-xs px-2 py-0.5 rounded-md border border-border text-muted-foreground">
-      {device}
-    </span>
   );
 }

 import { useEffect, useState } from "react";
 export default function DeviceBadge() {
+  const [device, setDevice] = useState<string>("…");
   useEffect(() => {
     fetch("/api/health")
       .then((r) => r.json())
       .catch(() => setDevice("offline"));
   }, []);
   return (
+    <div className="flex items-center gap-2">
+      <span className="label-mono">device</span>
+      <span className="font-mono text-[12px] tracking-wider text-foreground">
+        {device}
+      </span>
+    </div>
   );
 }

web/src/components/HistoryList.tsx CHANGED Viewed

@@ -6,6 +6,10 @@ type Props = {
   onRegenerate: (h: HistoryRecord) => void;
 };
 export default function HistoryList({ refreshKey, onRegenerate }: Props) {
   const [items, setItems] = useState<HistoryRecord[]>([]);
   useEffect(() => {
@@ -13,24 +17,43 @@ export default function HistoryList({ refreshKey, onRegenerate }: Props) {
   }, [refreshKey]);
   if (items.length === 0) {
-    return <p className="text-sm text-muted-foreground">No generations yet.</p>;
   }
   return (
-    <ul className="space-y-2">
-      {items.map((h) => {
         const url = URL.createObjectURL(h.audioBlob);
         return (
-          <li key={h.id} className="rounded-md border border-border p-2 space-y-2">
-            <div className="text-sm line-clamp-2">{h.text}</div>
-            <div className="text-xs text-muted-foreground">
-              {h.modelId} · {h.language ?? "—"} · {new Date(h.createdAt).toLocaleTimeString()}
             </div>
-            <audio controls src={url} className="w-full" />
-            <div className="flex justify-end gap-2">
-              <a href={url} download={`${h.id}.wav`} className="text-xs underline">download</a>
-              <button type="button" className="text-xs underline" onClick={() => onRegenerate(h)}>
-                regenerate
               </button>
             </div>
           </li>

   onRegenerate: (h: HistoryRecord) => void;
 };
+function fmtTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
 export default function HistoryList({ refreshKey, onRegenerate }: Props) {
   const [items, setItems] = useState<HistoryRecord[]>([]);
   useEffect(() => {
   }, [refreshKey]);
   if (items.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground italic">
+        Generations will be archived here.
+      </p>
+    );
   }
   return (
+    <ul className="space-y-3">
+      {items.map((h, i) => {
         const url = URL.createObjectURL(h.audioBlob);
         return (
+          <li key={h.id} className="card-paper p-3 space-y-2.5">
+            <div className="flex items-baseline justify-between gap-3">
+              <span className="marker-num">
+                {String(items.length - i).padStart(2, "0")}
+              </span>
+              <span className="label-mono">
+                {h.modelId.replace("chatterbox-", "")} · {h.language ?? "—"} · {fmtTime(h.createdAt)}
+              </span>
             </div>
+            <p className="text-[13px] leading-snug line-clamp-3">{h.text}</p>
+            <audio controls src={url} className="w-full h-9" />
+            <div className="flex justify-end gap-3">
+              <a
+                href={url}
+                download={`${h.id}.wav`}
+                className="label-mono hover:text-foreground transition-colors"
+              >
+                ↓ download
+              </a>
+              <button
+                type="button"
+                className="label-mono hover:text-[hsl(var(--ember))] transition-colors"
+                onClick={() => onRegenerate(h)}
+              >
+                ↻ regenerate
               </button>
             </div>
           </li>

web/src/components/LoadingBanner.tsx CHANGED Viewed

@@ -3,8 +3,11 @@ type Props = { visible: boolean; message: string };
 export default function LoadingBanner({ visible, message }: Props) {
   if (!visible) return null;
   return (
-    <div className="bg-primary/15 text-primary text-sm px-6 py-2 border-b border-primary/30">
-      {message}
     </div>
   );
 }

 export default function LoadingBanner({ visible, message }: Props) {
   if (!visible) return null;
   return (
+    <div className="border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/10 px-8 py-2.5">
+      <div className="flex items-center gap-3">
+        <span className="size-1.5 rounded-full bg-[hsl(var(--ember))] animate-pulse-dot" />
+        <span className="label-mono text-[hsl(var(--ember))]">{message}</span>
+      </div>
     </div>
   );
 }

web/src/components/ModelPicker.tsx CHANGED Viewed

@@ -9,21 +9,20 @@ type Props = {
 export default function ModelPicker({ models, activeId, loading, onPick }: Props) {
   return (
-    <select
-      aria-label="Model"
-      disabled={loading || models.length === 0}
-      value={activeId ?? ""}
-      onChange={(e) => onPick(e.target.value)}
-      className="rounded-md border border-border bg-background px-2 py-1 text-sm"
-    >
-      <option value="" disabled>
-        Choose model…
-      </option>
-      {models.map((m) => (
-        <option key={m.id} value={m.id}>
-          {m.label}
-        </option>
-      ))}
-    </select>
   );
 }

 export default function ModelPicker({ models, activeId, loading, onPick }: Props) {
   return (
+    <div className="flex items-center gap-2">
+      <span className="label-mono">model</span>
+      <select
+        aria-label="Model"
+        disabled={loading || models.length === 0}
+        value={activeId ?? ""}
+        onChange={(e) => onPick(e.target.value)}
+        className="rounded-sm border border-border bg-paper/60 px-2.5 py-1 font-mono text-[12px] tracking-wider focus:outline-none focus:border-[hsl(var(--ember))]/60"
+      >
+        <option value="" disabled>choose…</option>
+        {models.map((m) => (
+          <option key={m.id} value={m.id}>{m.label}</option>
+        ))}
+      </select>
+    </div>
   );
 }

web/src/components/ParamsPanel.tsx CHANGED Viewed

@@ -11,14 +11,20 @@ export default function ParamsPanel({ specs, values, onChange }: Props) {
     onChange({ ...values, [name]: v });
   }
   return (
-    <div className="space-y-4">
       {specs.map((s) => {
         const id = `param-${s.name}`;
-        const current = (values[s.name] ?? s.default) as never;
         if (s.type === "float" || s.type === "int") {
           return (
-            <label key={s.name} htmlFor={id} className="block space-y-1">
-              <span className="text-sm">{s.label}</span>
               <input
                 id={id}
                 aria-label={s.label}
@@ -26,43 +32,50 @@ export default function ParamsPanel({ specs, values, onChange }: Props) {
                 min={s.min}
                 max={s.max}
                 step={s.step ?? 0.01}
-                value={current as number}
                 onChange={(e) => set(s.name, Number(e.target.value))}
-                className="w-full"
               />
-              <span className="text-xs text-muted-foreground">{String(current)}</span>
-            </label>
           );
         }
         if (s.type === "bool") {
           return (
-            <label key={s.name} htmlFor={id} className="flex items-center justify-between text-sm">
-              <span>{s.label}</span>
               <input
                 id={id}
                 aria-label={s.label}
                 type="checkbox"
                 checked={!!current}
                 onChange={(e) => set(s.name, e.target.checked)}
               />
             </label>
           );
         }
         return (
-          <label key={s.name} htmlFor={id} className="block space-y-1">
-            <span className="text-sm">{s.label}</span>
             <select
               id={id}
               aria-label={s.label}
-              value={current as string}
               onChange={(e) => set(s.name, e.target.value)}
-              className="w-full rounded-md border border-border bg-background px-2 py-1"
             >
               {(s.choices ?? []).map((c) => (
                 <option key={c} value={c}>{c}</option>
               ))}
             </select>
-          </label>
         );
       })}
     </div>

     onChange({ ...values, [name]: v });
   }
   return (
+    <div className="space-y-5">
       {specs.map((s) => {
         const id = `param-${s.name}`;
+        const current: unknown = values[s.name] ?? s.default;
         if (s.type === "float" || s.type === "int") {
+          const n = typeof current === "number" ? current : Number(current);
           return (
+            <div key={s.name} className="space-y-1.5">
+              <div className="flex items-baseline justify-between">
+                <label htmlFor={id} className="label-mono">{s.label}</label>
+                <span className="font-mono text-[12px] text-foreground tracking-wider">
+                  {Number.isFinite(n) ? n.toFixed(2) : String(current)}
+                </span>
+              </div>
               <input
                 id={id}
                 aria-label={s.label}
                 min={s.min}
                 max={s.max}
                 step={s.step ?? 0.01}
+                value={Number.isFinite(n) ? n : 0}
                 onChange={(e) => set(s.name, Number(e.target.value))}
+                className="w-full accent-[hsl(var(--ember))]"
               />
+              {s.help && (
+                <p className="text-[11px] text-muted-foreground/80 italic">{s.help}</p>
+              )}
+            </div>
           );
         }
         if (s.type === "bool") {
           return (
+            <label
+              key={s.name}
+              htmlFor={id}
+              className="flex items-center justify-between cursor-pointer"
+            >
+              <span className="label-mono">{s.label}</span>
               <input
                 id={id}
                 aria-label={s.label}
                 type="checkbox"
                 checked={!!current}
                 onChange={(e) => set(s.name, e.target.checked)}
+                className="accent-[hsl(var(--ember))]"
               />
             </label>
           );
         }
         return (
+          <div key={s.name} className="space-y-1.5">
+            <label htmlFor={id} className="label-mono block">{s.label}</label>
             <select
               id={id}
               aria-label={s.label}
+              value={String(current)}
               onChange={(e) => set(s.name, e.target.value)}
+              className="field-input font-mono text-[12px]"
             >
               {(s.choices ?? []).map((c) => (
                 <option key={c} value={c}>{c}</option>
               ))}
             </select>
+          </div>
         );
       })}
     </div>

web/src/components/TagBar.tsx CHANGED Viewed

@@ -25,13 +25,14 @@ export default function TagBar({ tags, targetRef }: Props) {
     el.focus();
   }
   return (
-    <div className="flex flex-wrap gap-1.5">
       {tags.map((t) => (
         <button
           key={t}
           type="button"
           onClick={() => insert(t)}
-          className="text-xs px-2 py-0.5 rounded-md border border-border hover:bg-muted"
         >
           {t}
         </button>

     el.focus();
   }
   return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      <span className="label-mono mr-1">insert</span>
       {tags.map((t) => (
         <button
           key={t}
           type="button"
           onClick={() => insert(t)}
+          className="font-mono text-[11px] px-2 py-0.5 rounded-sm border border-border text-muted-foreground hover:text-[hsl(var(--ember))] hover:border-[hsl(var(--ember))]/50 transition-colors"
         >
           {t}
         </button>

web/src/components/VoiceComposer.tsx CHANGED Viewed

@@ -52,43 +52,46 @@ export default function VoiceComposer({ onSaved }: Props) {
   }
   return (
-    <div className="space-y-2">
       <input
         type="text"
-        placeholder="Voice name (optional)"
         value={name}
         onChange={(e) => setName(e.target.value)}
-        className="w-full rounded-md border border-border bg-background px-2 py-1 text-sm"
       />
       <div className="flex gap-2">
         <button
           type="button"
           onClick={() => fileRef.current?.click()}
-          className="rounded-md border border-border px-3 py-1.5 text-sm"
         >
-          Upload .wav/.mp3
         </button>
         <input ref={fileRef} type="file" accept="audio/*" hidden onChange={onFile} />
         {recState === "recording" ? (
           <button
             type="button"
             onClick={stopRec}
-            className="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm"
           >
             Stop &amp; save
           </button>
         ) : (
           <button
             type="button"
             onClick={startRec}
-            className="rounded-md border border-border px-3 py-1.5 text-sm"
           >
-            Record
           </button>
         )}
       </div>
       {recState === "error" && (
-        <p className="text-xs text-red-500">Microphone permission denied.</p>
       )}
     </div>
   );

   }
   return (
+    <div className="space-y-3">
       <input
         type="text"
+        placeholder="Name this voice"
         value={name}
         onChange={(e) => setName(e.target.value)}
+        className="field-input"
       />
       <div className="flex gap-2">
         <button
           type="button"
           onClick={() => fileRef.current?.click()}
+          className="btn-ghost flex-1"
         >
+          ↑ Upload
         </button>
         <input ref={fileRef} type="file" accept="audio/*" hidden onChange={onFile} />
         {recState === "recording" ? (
           <button
             type="button"
             onClick={stopRec}
+            className="btn-primary flex-1 !py-2 flex items-center justify-center gap-2"
           >
+            <span className="size-1.5 rounded-full bg-current animate-pulse-dot" />
             Stop &amp; save
           </button>
         ) : (
           <button
             type="button"
             onClick={startRec}
+            className="btn-ghost flex-1"
           >
+            ● Record
           </button>
         )}
       </div>
       {recState === "error" && (
+        <p className="text-[11px] text-red-400 font-mono uppercase tracking-wider">
+          microphone permission denied
+        </p>
       )}
     </div>
   );

web/src/components/VoiceLibrary.tsx CHANGED Viewed

@@ -15,46 +15,68 @@ export default function VoiceLibrary({ selectedId, onSelect, refreshKey }: Props
   }, [refreshKey]);
   if (voices.length === 0) {
-    return <p className="text-sm text-muted-foreground">No saved voices yet.</p>;
   }
   return (
     <ul className="space-y-2">
-      {voices.map((v) => (
         <li
           key={v.id}
           className={cn(
-            "flex items-center justify-between rounded-md border border-border p-2",
-            selectedId === v.id && "ring-1 ring-primary",
           )}
         >
-          <button
-            className="flex-1 text-left text-sm"
-            onClick={() => onSelect(v)}
-            type="button"
-          >
-            <div className="font-medium">{v.name}</div>
-            <div className="text-xs text-muted-foreground">
-              {(v.durationMs / 1000).toFixed(1)}s · {v.sampleRate} Hz
-            </div>
-          </button>
-          <div className="flex items-center gap-1">
-            <button
-              type="button"
-              aria-label={v.isFavorite ? "Unfavorite" : "Favorite"}
-              onClick={() => setFavorite(v.id!, !v.isFavorite).then(() => listVoices().then(setVoices))}
-              className="text-xs px-1"
-            >
-              {v.isFavorite ? "★" : "☆"}
-            </button>
             <button
               type="button"
-              aria-label="Delete"
-              onClick={() => deleteVoice(v.id!).then(() => listVoices().then(setVoices))}
-              className="text-xs px-1 text-muted-foreground"
             >
-              ✕
             </button>
           </div>
         </li>
       ))}

   }, [refreshKey]);
   if (voices.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground italic">
+        Voices will appear here once you upload or record one.
+      </p>
+    );
   }
   return (
     <ul className="space-y-2">
+      {voices.map((v, i) => (
         <li
           key={v.id}
           className={cn(
+            "card-paper p-3 transition-colors",
+            selectedId === v.id
+              ? "border-[hsl(var(--ember))]/60 bg-[hsl(var(--ember))]/5"
+              : "hover:border-foreground/30",
           )}
         >
+          <div className="flex items-start gap-3">
+            <span className="marker-num pt-0.5">
+              {String(i + 1).padStart(2, "0")}
+            </span>
             <button
               type="button"
+              className="flex-1 text-left"
+              onClick={() => onSelect(v)}
             >
+              <div className="display-serif text-[18px] leading-tight">{v.name}</div>
+              <div className="label-mono mt-1">
+                {(v.durationMs / 1000).toFixed(1)}s · {v.sampleRate} Hz
+              </div>
             </button>
+            <div className="flex items-center gap-1.5">
+              <button
+                type="button"
+                aria-label={v.isFavorite ? "Unfavorite" : "Favorite"}
+                onClick={() =>
+                  setFavorite(v.id!, !v.isFavorite).then(() =>
+                    listVoices().then(setVoices),
+                  )
+                }
+                className={cn(
+                  "text-base leading-none transition-colors",
+                  v.isFavorite
+                    ? "text-[hsl(var(--ember))]"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {v.isFavorite ? "★" : "☆"}
+              </button>
+              <button
+                type="button"
+                aria-label="Delete"
+                onClick={() =>
+                  deleteVoice(v.id!).then(() => listVoices().then(setVoices))
+                }
+                className="text-xs text-muted-foreground hover:text-red-400 transition-colors"
+              >
+                ✕
+              </button>
+            </div>
           </div>
         </li>
       ))}

web/src/pages/Studio.tsx CHANGED Viewed

@@ -16,6 +16,20 @@ import ParamsPanel from "@/components/ParamsPanel";
 import TagBar from "@/components/TagBar";
 import VoiceComposer from "@/components/VoiceComposer";
 import VoiceLibrary from "@/components/VoiceLibrary";
 export default function Studio() {
   const [models, setModels] = useState<ModelInfo[]>([]);
@@ -117,33 +131,43 @@ export default function Studio() {
   }
   return (
-    <div className="min-h-screen flex flex-col">
-      <header className="border-b border-border px-6 py-3 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <span className="size-2.5 rounded-full bg-primary" />
-          <span className="font-medium">Chatterbox Voice Studio</span>
-        </div>
-        <div className="flex items-center gap-3">
-          <ModelPicker
-            models={models}
-            activeId={activeId}
-            loading={loadingModel || busy}
-            onPick={pickModel}
-          />
-          <DeviceBadge />
         </div>
       </header>
       <LoadingBanner
         visible={loadingModel}
-        message="Loading model… first activation can take 30–60s."
       />
-      {err && <div className="bg-red-500/10 text-red-400 text-sm px-6 py-2">{err}</div>}
-      <main className="flex-1 grid lg:grid-cols-[1fr_420px] gap-6 p-6">
-        <section className="space-y-4">
-          <div className="space-y-2">
-            <h2 className="text-sm font-medium">Reference voice</h2>
             <VoiceComposer onSaved={() => setLibraryKey((k) => k + 1)} />
             <VoiceLibrary
               selectedId={selectedVoice?.id}
@@ -152,88 +176,97 @@ export default function Studio() {
             />
           </div>
-          {active?.languages && active.languages.length > 1 && (
-            <div className="space-y-1">
-              <label htmlFor="lang-select" className="text-sm font-medium">
-                Language
-              </label>
-              <select
-                id="lang-select"
-                value={language ?? ""}
-                onChange={(e) => setLanguage(e.target.value)}
-                className="w-full rounded-md border border-border bg-background px-2 py-1 text-sm"
-              >
-                {active.languages.map((l) => (
-                  <option key={l.code} value={l.code}>
-                    {l.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-          <div className="space-y-2">
-            <label htmlFor="prompt" className="text-sm font-medium">
-              Text
-            </label>
             <textarea
               id="prompt"
               ref={textRef}
               value={text}
               onChange={(e) => setText(e.target.value)}
-              rows={6}
-              className="w-full rounded-md border border-border bg-background p-2 text-sm"
-              placeholder="Type what the voice should say…"
             />
             <div className="flex items-center justify-between">
               <TagBar tags={active?.paralinguistic_tags ?? []} targetRef={textRef} />
-              <span className="text-xs text-muted-foreground">{text.length} chars</span>
             </div>
           </div>
           {active && (
-            <div className="space-y-2">
-              <h2 className="text-sm font-medium">Parameters</h2>
               <ParamsPanel specs={active.params} values={params} onChange={setParams} />
             </div>
           )}
-          <button
-            type="button"
-            onClick={() => onGenerate()}
-            disabled={busy || loadingModel || !text.trim()}
-            className="w-full rounded-md bg-primary text-primary-foreground py-2.5 text-sm font-medium disabled:opacity-50"
-          >
-            {busy ? "Generating…" : "Generate"}
-          </button>
-          {outputUrl && (
-            <div className="space-y-1">
-              <h2 className="text-sm font-medium">Output</h2>
-              <audio controls src={outputUrl} className="w-full" />
-              <a href={outputUrl} download="chatterbox.wav" className="text-xs underline">
-                download
-              </a>
-            </div>
-          )}
-        </section>
-        <aside className="space-y-3">
-          <div className="flex gap-1">
-            <button
-              type="button"
-              onClick={() => setTab("voices")}
-              className={`flex-1 rounded-md px-2 py-1 text-sm ${tab === "voices" ? "bg-muted" : ""}`}
-            >
-              Voices
-            </button>
             <button
               type="button"
-              onClick={() => setTab("history")}
-              className={`flex-1 rounded-md px-2 py-1 text-sm ${tab === "history" ? "bg-muted" : ""}`}
             >
-              History
             </button>
           </div>
           {tab === "voices" ? (
             <VoiceLibrary
@@ -246,6 +279,13 @@ export default function Studio() {
           )}
         </aside>
       </main>
     </div>
   );
 }

 import TagBar from "@/components/TagBar";
 import VoiceComposer from "@/components/VoiceComposer";
 import VoiceLibrary from "@/components/VoiceLibrary";
+import { cn } from "@/lib/utils";
+function SectionHeader({ num, title, hint }: { num: string; title: string; hint?: string }) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-baseline gap-3">
+        <span className="marker-num">{num}</span>
+        <h2 className="display-serif text-[22px] leading-tight">{title}</h2>
+      </div>
+      {hint && <p className="label-mono">{hint}</p>}
+      <div className="rule-dotted mt-2" />
+    </div>
+  );
+}
 export default function Studio() {
   const [models, setModels] = useState<ModelInfo[]>([]);
   }
   return (
+    <div className="min-h-screen relative-z animate-fade-up">
+      {/* Header */}
+      <header className="border-b border-border">
+        <div className="mx-auto max-w-[1280px] px-8 py-5 flex items-end justify-between">
+          <div className="flex items-end gap-4">
+            <span className="display-serif text-[34px] leading-none">Chatterbox</span>
+            <span className="label-mono pb-1">voice studio · v0.1</span>
+          </div>
+          <div className="flex items-center gap-6">
+            <ModelPicker
+              models={models}
+              activeId={activeId}
+              loading={loadingModel || busy}
+              onPick={pickModel}
+            />
+            <DeviceBadge />
+          </div>
         </div>
       </header>
       <LoadingBanner
         visible={loadingModel}
+        message="Loading model — first activation can take 30–60s"
       />
+      {err && (
+        <div className="border-b border-red-900/40 bg-red-950/30 px-8 py-2.5">
+          <span className="label-mono text-red-400">error</span>
+          <span className="ml-3 text-sm text-red-300/90">{err}</span>
+        </div>
+      )}
+      <main className="mx-auto max-w-[1280px] px-8 py-10 grid lg:grid-cols-[minmax(0,1fr)_400px] gap-12">
+        {/* Composer column */}
+        <section className="space-y-12">
+          {/* 01 — Voice */}
+          <div className="space-y-5">
+            <SectionHeader num="01" title="Reference voice" hint="upload, record, or pick from your library" />
             <VoiceComposer onSaved={() => setLibraryKey((k) => k + 1)} />
             <VoiceLibrary
               selectedId={selectedVoice?.id}
             />
           </div>
+          {/* 02 — Script */}
+          <div className="space-y-4">
+            <SectionHeader num="02" title="Script" hint="what should the voice say?" />
+            {active?.languages && active.languages.length > 1 && (
+              <div className="flex items-center gap-3">
+                <label htmlFor="lang-select" className="label-mono">language</label>
+                <select
+                  id="lang-select"
+                  value={language ?? ""}
+                  onChange={(e) => setLanguage(e.target.value)}
+                  className="field-input !w-auto font-mono text-[12px] py-1"
+                >
+                  {active.languages.map((l) => (
+                    <option key={l.code} value={l.code}>{l.label}</option>
+                  ))}
+                </select>
+              </div>
+            )}
             <textarea
               id="prompt"
               ref={textRef}
               value={text}
               onChange={(e) => setText(e.target.value)}
+              rows={7}
+              className="field-input font-display text-[18px] leading-relaxed"
+              placeholder="Once upon a midnight dreary, while I pondered, weak and weary…"
             />
             <div className="flex items-center justify-between">
               <TagBar tags={active?.paralinguistic_tags ?? []} targetRef={textRef} />
+              <span className="label-mono">{text.length} chars</span>
             </div>
           </div>
+          {/* 03 — Parameters */}
           {active && (
+            <div className="space-y-5">
+              <SectionHeader num="03" title="Parameters" hint={active.description} />
               <ParamsPanel specs={active.params} values={params} onChange={setParams} />
             </div>
           )}
+          {/* Generate */}
+          <div className="space-y-4 pt-2">
             <button
               type="button"
+              onClick={() => onGenerate()}
+              disabled={busy || loadingModel || !text.trim()}
+              className="btn-primary w-full flex items-center justify-center gap-3 ember-ring"
             >
+              {busy ? (
+                <>
+                  <span className="size-1.5 rounded-full bg-current animate-pulse-dot" />
+                  Generating
+                </>
+              ) : (
+                <>Generate <span className="opacity-60">→</span></>
+              )}
             </button>
+            {outputUrl && (
+              <div className="card-paper p-4 space-y-3">
+                <div className="flex items-baseline justify-between">
+                  <span className="label-mono">latest output</span>
+                  <a href={outputUrl} download="chatterbox.wav" className="label-mono hover:text-foreground">
+                    ↓ download
+                  </a>
+                </div>
+                <audio controls src={outputUrl} className="w-full h-10" />
+              </div>
+            )}
+          </div>
+        </section>
+        {/* Workspace column */}
+        <aside className="space-y-5 lg:sticky lg:top-8 self-start">
+          <div className="flex border-b border-border">
+            {(["voices", "history"] as const).map((t) => (
+              <button
+                key={t}
+                type="button"
+                onClick={() => setTab(t)}
+                className={cn(
+                  "flex-1 label-mono py-2 transition-colors border-b-2",
+                  tab === t
+                    ? "text-foreground border-[hsl(var(--ember))]"
+                    : "border-transparent hover:text-foreground",
+                )}
+              >
+                {t}
+              </button>
+            ))}
           </div>
           {tab === "voices" ? (
             <VoiceLibrary
           )}
         </aside>
       </main>
+      <footer className="border-t border-border mt-16">
+        <div className="mx-auto max-w-[1280px] px-8 py-6 flex items-center justify-between">
+          <span className="label-mono">chatterbox · resemble ai</span>
+          <span className="label-mono">stateless · browser-persisted</span>
+        </div>
+      </footer>
     </div>
   );
 }

web/src/styles/index.css CHANGED Viewed

@@ -4,31 +4,113 @@
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --border: 240 5.9% 90%;
-    --ring: 240 5% 64.9%;
-    --primary: 250 76% 62%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 268 92% 70%;
-    --accent-foreground: 0 0% 100%;
-    --radius: 0.75rem;
   }
   .dark {
-    --background: 240 10% 4%;
-    --foreground: 0 0% 98%;
-    --muted: 240 4% 12%;
-    --muted-foreground: 240 5% 65%;
-    --border: 240 6% 18%;
-    --ring: 250 76% 62%;
-    --primary: 250 76% 62%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 268 92% 70%;
-    --accent-foreground: 0 0% 100%;
   }
-  body {
     @apply bg-background text-foreground antialiased;
   }
 }

 @layer base {
   :root {
+    /* parchment / warm light (unused but kept for future toggle) */
+    --background: 36 30% 96%;
+    --foreground: 25 30% 12%;
+    --muted: 36 22% 92%;
+    --muted-foreground: 25 15% 35%;
+    --border: 32 18% 82%;
+    --ring: 28 78% 52%;
+    --paper: 36 36% 98%;
+    --ink: 25 32% 10%;
+    --primary: 28 78% 52%;
+    --primary-foreground: 36 36% 98%;
+    --accent: 18 58% 38%;
+    --accent-foreground: 36 36% 98%;
+    --ember: 28 92% 60%;
+    --radius: 0.4rem;
   }
   .dark {
+    /* warm near-black, parchment text, single ember accent */
+    --background: 28 14% 7%;
+    --foreground: 38 28% 92%;
+    --muted: 28 10% 12%;
+    --muted-foreground: 35 14% 64%;
+    --border: 28 10% 18%;
+    --ring: 28 92% 60%;
+    --paper: 28 16% 9%;
+    --ink: 38 28% 92%;
+    --primary: 28 92% 60%;
+    --primary-foreground: 28 14% 7%;
+    --accent: 18 58% 48%;
+    --accent-foreground: 38 28% 92%;
+    --ember: 28 92% 60%;
   }
+  html, body {
     @apply bg-background text-foreground antialiased;
+    font-family: theme("fontFamily.sans");
+    font-feature-settings: "ss01", "cv11";
+  }
+  body {
+    background-image:
+      radial-gradient(ellipse 90% 60% at 100% 0%, hsl(28 70% 30% / 0.10), transparent 60%),
+      radial-gradient(ellipse 80% 50% at 0% 100%, hsl(18 50% 24% / 0.10), transparent 60%);
+    background-attachment: fixed;
+  }
+  /* subtle grain via CSS */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.06;
+    mix-blend-mode: overlay;
+    background-image:
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
+  }
+  ::selection {
+    background: hsl(var(--ember) / 0.35);
+    color: hsl(var(--foreground));
+  }
+}
+@layer components {
+  .label-mono {
+    @apply font-mono text-[10.5px] tracking-widest2 uppercase text-muted-foreground;
+  }
+  .display-serif {
+    font-family: theme("fontFamily.display");
+    font-optical-sizing: auto;
+    font-variation-settings: "opsz" 144;
+    letter-spacing: -0.015em;
+  }
+  .rule-dotted {
+    background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1.4px);
+    background-size: 6px 1px;
+    background-repeat: repeat-x;
+    height: 1px;
+  }
+  .ember-ring:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px hsl(var(--background)), 0 0 0 3px hsl(var(--ember) / 0.7);
+  }
+  .btn-primary {
+    @apply font-mono uppercase tracking-widest2 text-[12px] py-3 px-4 rounded-sm
+      bg-primary text-primary-foreground transition-colors duration-200
+      hover:bg-[hsl(var(--ember))] disabled:opacity-40 disabled:cursor-not-allowed;
+  }
+  .btn-ghost {
+    @apply font-mono uppercase tracking-widest2 text-[11px] py-2 px-3 rounded-sm
+      border border-border text-muted-foreground transition-colors duration-200
+      hover:text-foreground hover:border-foreground/40;
+  }
+  .field-input {
+    @apply w-full rounded-sm border border-border bg-paper/60 px-3 py-2 text-sm
+      placeholder:text-muted-foreground focus:border-[hsl(var(--ember))]/60
+      focus:outline-none transition-colors;
+  }
+  .card-paper {
+    @apply rounded-sm border border-border bg-paper/40 backdrop-blur-[1px];
+  }
+  .marker-num {
+    @apply font-mono text-[11px] text-[hsl(var(--ember))] tracking-widest2;
+  }
+}
+@layer utilities {
+  .relative-z {
+    position: relative;
+    z-index: 1;
   }
 }

web/tailwind.config.ts CHANGED Viewed

@@ -12,6 +12,8 @@ const config: Config = {
         "muted-foreground": "hsl(var(--muted-foreground))",
         border: "hsl(var(--border))",
         ring: "hsl(var(--ring))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
@@ -20,6 +22,7 @@ const config: Config = {
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -27,7 +30,26 @@ const config: Config = {
         sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
-        sans: ["Inter", "ui-sans-serif", "system-ui"],
       },
     },
   },

         "muted-foreground": "hsl(var(--muted-foreground))",
         border: "hsl(var(--border))",
         ring: "hsl(var(--ring))",
+        paper: "hsl(var(--paper))",
+        ink: "hsl(var(--ink))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
+        ember: "hsl(var(--ember))",
       },
       borderRadius: {
         lg: "var(--radius)",
         sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
+        display: ['"Fraunces"', "ui-serif", "Georgia", "serif"],
+        sans: ['"IBM Plex Sans"', "ui-sans-serif", "system-ui"],
+        mono: ['"IBM Plex Mono"', "ui-monospace", "SFMono-Regular", "monospace"],
+      },
+      letterSpacing: {
+        widest2: "0.18em",
+      },
+      keyframes: {
+        "fade-up": {
+          "0%": { opacity: "0", transform: "translateY(6px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        pulse_dot: {
+          "0%,100%": { opacity: "1" },
+          "50%": { opacity: "0.4" },
+        },
+      },
+      animation: {
+        "fade-up": "fade-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both",
+        "pulse-dot": "pulse_dot 1.6s ease-in-out infinite",
       },
     },
   },