\n \n \n \n \n\n",[18,90],"dfe3b384-8647-4939-b4c4-b1fa912ac415",["D",1781558787524],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n SanaStreamingCameraView,\n SanaStreamingMainVideoView,\n SanaStreamingProvider,\n useSanaStreaming,\n useSanaStreamingCommandError,\n useSanaStreamingGenerationReset,\n useSanaStreamingState,\n} from \"https://esm.sh/@reactor-models/sana-streaming@0.1.8?deps=react@18.2.0,react-dom@18.2.0\";\n\n// ---- Val Town UI tokens (valtown-ui skill) ----------------------------------\nconst CARD = \"flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4\";\nconst BTN = \"inline-flex items-center justify-center h-9 px-4 rounded-lg text-sm font-bold transition disabled:opacity-40\";\nconst BTN_PRIMARY = `${BTN} bg-sky-400 text-sky-950 border border-sky-400 hover:brightness-95`;\nconst BTN_DEFAULT = `${BTN} bg-slate-100 text-slate-800 hover:bg-slate-200`;\nconst BTN_DANGER = `${BTN} bg-rose-200 text-rose-900 hover:brightness-95`;\nconst BTN_GREEN = `${BTN} bg-emerald-400 text-emerald-950 hover:brightness-95`;\nconst FIELD = \"rounded-lg border border-slate-200 bg-white text-sm outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-400/30 placeholder:text-slate-400\";\n\n// ---- JWT resolver -----------------------------------------------------------\n// The provider calls this on every Reactor API request, so it must be a\n// resolver, not a static string. /api/reactor/token returns the JWT with a\n// Cache-Control header, so the browser caches it until it actually expires.\nasync function fetchToken(): Promise {\n const r = await fetch(\"/api/reactor/token\");\n if (!r.ok) {\n const body = (await r.json().catch(() => ({}))) as { error?: string };\n throw new Error(body.error ?? `Token fetch failed: ${r.status}`);\n }\n const { jwt } = (await r.json()) as { jwt: string };\n return jwt;\n}\n\n// ---- Reduced model state ----------------------------------------------------\n// The model is the source of truth: only `state` messages mutate this.\ninterface SanaState {\n running: boolean;\n started: boolean;\n paused: boolean;\n currentChunk: number;\n currentPrompt: string | null;\n seed: number;\n}\nconst DEFAULT_STATE: SanaState = {\n running: false,\n started: false,\n paused: false,\n currentChunk: 0,\n currentPrompt: null,\n seed: 0,\n};\n\nconst PRESETS = [\n \"turn my shirt bright red\",\n \"make it a Renaissance oil painting\",\n \"add a wizard hat on my head\",\n \"snowy forest in the background\",\n \"black-and-white film noir\",\n];\n\nexport function App() {\n return (\n \n \n \n );\n}\n\nconst BANNER_TTL_MS = 6000;\n\nfunction Workspace() {\n const sana = useSanaStreaming();\n const { status } = sana;\n const ready = status === \"ready\";\n\n const [state, setState] = useState(DEFAULT_STATE);\n const [seedDraft, setSeedDraft] = useState(\"0\");\n const [cmdError, setCmdError] = useState(null);\n const [stageCleared, setStageCleared] = useState(false);\n const bannerTimer = useRef | null>(null);\n\n // Only the typed `state` snapshot feeds the reducer.\n useSanaStreamingState((msg) => {\n setState((s) => {\n const next: SanaState = {\n running: msg.running,\n started: msg.started,\n paused: msg.paused,\n currentChunk: msg.current_chunk,\n currentPrompt: (msg.current_prompt as string | null) ?? null,\n seed: msg.seed,\n };\n const changed = (Object.keys(next) as (keyof SanaState)[]).some((k) => next[k] !== s[k]);\n return changed ? next : s;\n });\n });\n\n useSanaStreamingCommandError((msg) => {\n if (bannerTimer.current) clearTimeout(bannerTimer.current);\n setCmdError(msg.reason);\n bannerTimer.current = setTimeout(() => setCmdError(null), BANNER_TTL_MS);\n });\n\n useSanaStreamingGenerationReset(() => setStageCleared(true));\n useEffect(() => {\n if (state.running) setStageCleared(false);\n }, [state.running]);\n\n // Reset local state on full disconnect so a reconnect starts clean.\n useEffect(() => {\n if (status === \"disconnected\") {\n setState(DEFAULT_STATE);\n setCmdError(null);\n setStageCleared(false);\n }\n }, [status]);\n\n useEffect(() => () => bannerTimer.current && clearTimeout(bannerTimer.current), []);\n\n // Both inputs feed the `camera` track; the deployed 0.1.x model defaults to\n // the file path, so send set_mode(\"live\") before start.\n async function startGeneration() {\n await sana.setMode({ mode: \"live\" });\n await sana.start();\n }\n\n const showCamera = status !== \"disconnected\";\n\n return (\n

\n \n

\n sana.connect()}\n onDisconnect={() => sana.disconnect()}\n />\n {cmdError && (\n

\n {cmdError}\n

\n )}\n\n {!state.started ? (\n

\n Seed\n

\n setSeedDraft(e.target.value)}\n disabled={!ready}\n className={`${FIELD} w-full px-3 py-1.5 disabled:opacity-50`}\n />\n \n

\n \n

\n Connect, allow camera access, then Start. Type a prompt below to steer the edit.\n

\n ) : (\n sana.pause()}\n onResume={() => sana.resume()}\n onReset={() => sana.reset()}\n />\n )}\n\n sana.setPrompt({ prompt: p })}\n />\n

\n );\n}\n\nfunction Header() {\n return (\n

\n SANA-Streaming · real-time video editing\n

Reactor video-to-video · on Val Town

\n view source\n

\n );\n}\n\nfunction StatusBadge(\n { status, lastError, onConnect, onDisconnect }: {\n status: string;\n lastError?: string;\n onConnect: () => void;\n onDisconnect: () => void;\n },\n) {\n const dot = status === \"ready\"\n ? \"bg-emerald-400\"\n : status === \"disconnected\"\n ? \"bg-slate-400\"\n : \"bg-amber-400\";\n return (\n

\n Connection\n

\n \n {status}\n

\n {lastError &&

{lastError}

}\n {status === \"disconnected\"\n ? \n : }\n

\n );\n}\n\nfunction Playback(\n { ready, paused, chunk, onPause, onResume, onReset }: {\n ready: boolean;\n paused: boolean;\n chunk: number;\n onPause: () => void;\n onResume: () => void;\n onReset: () => void;\n },\n) {\n return (\n

\n {paused ? \"Paused\" : \"Streaming\"}\n chunk {chunk}\n

\n {paused\n ? \n : }\n \n

\n );\n}\n\nfunction Prompt(\n { ready, currentPrompt, onApply }: {\n ready: boolean;\n currentPrompt: string | null;\n onApply: (prompt: string) => void;\n },\n) {\n const [draft, setDraft] = useState(\"\");\n return (\n

\n Edit prompt · applies next chunk (~1s)\n setDraft(e.target.value)}\n placeholder=\"Describe the change — what changes, and what stays.\"\n rows={3}\n className={`${FIELD} w-full resize-none px-3 py-2`}\n />\n \n

\n {PRESETS.map((p) => (\n {\n setDraft(p);\n if (ready) onApply(p);\n }}\n disabled={!ready}\n className=\"rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs text-slate-700 hover:bg-slate-100 disabled:opacity-40\"\n >\n {p}\n \n ))}\n

\n Active: {currentPrompt ?? \"— (near-reconstruction)\"}\n

\n );\n}\n\nfunction Stage(\n { showCamera, cleared, state }: { showCamera: boolean; cleared: boolean; state: SanaState },\n) {\n return (\n

\n {/* Edited output from the model */}\n {!cleared && (\n \n )}\n {/* Webcam self-view (auto-acquires camera + auto-publishes when ready) */}\n {showCamera && (\n

\n \n you\n

\n )}\n

\n {state.running ? `editing · chunk ${state.currentChunk}` : state.started ? \"paused\" : \"idle\"}\n

\n );\n}\n",[18,95],"pulls","branches","forks","envVars",{"_91":42,"_215":42},"connections",{"_91":26,"_214":26},"unfilledCount","emptyCount",{"_35":185,"_13":18,"_75":109,"_45":-5,"_37":38,"_188":42,"_195":24,"_39":246,"_41":26,"_78":110,"_186":-5,"_80":30,"_189":-5,"_227":247,"_17":248},{"_35":203,"_13":95,"_75":94,"_45":109,"_37":38,"_188":92,"_195":24,"_39":243,"_41":42,"_78":79,"_186":205,"_80":30,"_189":-5,"_227":244,"_17":245},{"_35":199,"_13":90,"_75":89,"_45":109,"_37":38,"_188":98,"_195":24,"_39":240,"_41":42,"_78":21,"_186":201,"_80":30,"_189":-5,"_227":241,"_17":242},{"_35":194,"_13":77,"_75":76,"_45":109,"_37":38,"_188":42,"_195":24,"_39":237,"_41":26,"_78":79,"_186":197,"_80":30,"_189":-5,"_227":238,"_17":239},{"_35":230,"_13":231,"_75":232,"_45":-5,"_37":38,"_188":42,"_195":24,"_39":233,"_41":26,"_78":21,"_186":234,"_80":30,"_189":-5,"_227":235,"_17":236},{"_35":222,"_13":223,"_75":122,"_45":-5,"_37":38,"_188":42,"_195":24,"_39":224,"_41":26,"_78":225,"_186":226,"_80":30,"_189":-5,"_227":228,"_17":229},"7673745d-b28b-4f00-a942-7b56378f372c","index.ts",["D",1781556038037],"http","import { parseVal, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// How long we ask Reactor to make the JWT valid for. The server caps this at\n// its configured maximum (currently 6h), so asking for more is harmless.\nconst TOKEN_LIFETIME_SECONDS = 6 * 60 * 60;\n// Safety margin so an in-flight request doesn't race the real expiry.\nconst CACHE_SKEW_SECONDS = 60;\n\n// Serve the SPA shell.\napp.get(\"/\", async (c) => c.html(await readFile(\"/frontend/index.html\")));\n\n// Serve all /frontend files under /public (serveFile transpiles .tsx -> JS).\napp.get(\"/public/**/*\", (c) => serveFile(c.req.path.replace(\"/public\", \"/frontend\")));\n\n// View-source link target.\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Mint a short-lived Reactor JWT server-side. The browser only ever sees this\n// JWT, never the REACTOR_API_KEY. GET (not POST) so the browser HTTP cache can\n// reuse it for its lifetime; `private` keeps shared caches from storing it.\napp.get(\"/api/reactor/token\", async (c) => {\n const apiKey = Deno.env.get(\"REACTOR_API_KEY\");\n if (!apiKey) return c.json({ error: \"REACTOR_API_KEY is not set on the server\" }, 500);\n\n const res = await fetch(\"https://api.reactor.inc/tokens\", {\n method: \"POST\",\n headers: { \"Reactor-API-Key\": apiKey, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ expires_after: TOKEN_LIFETIME_SECONDS }),\n });\n if (!res.ok) return c.json({ error: `Reactor /tokens returned ${res.status}` }, 502);\n\n const { jwt, expires_at } = (await res.json()) as { jwt: string; expires_at: number };\n const nowSeconds = Math.floor(Date.now() / 1000);\n const maxAge = Math.max(0, expires_at - nowSeconds - CACHE_SKEW_SECONDS);\n return c.json({ jwt }, { headers: { \"Cache-Control\": `private, max-age=${maxAge}` } });\n});\n\n// Surface full stack traces instead of \"Internal Server Error\".\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[223],"d453dd50-2105-4117-8f70-b5b8092bfd01","README.md","019ecd03-ca29-73df-84ec-cdf75109f0a0",["D",1781556038037],"# SANA-Streaming on Val Town\n\nA Val Town port of Reactor's [SANA-Streaming example](https://github.com/reactor-team/js-sdk/tree/main/examples/sana-streaming) — their real-time video **editing** model. Point your webcam at it, type an edit instruction, and watch yourself transformed frame-by-frame. Re-prompt mid-stream and the new edit lands at the next chunk boundary (~1s).\n\nThe original is a Next.js 15 + React 19 app. This port keeps the same architecture but runs on Val Town's Deno runtime: a Hono server serves a client-side React SPA and mints the Reactor JWT; the browser connects **directly** to `api.reactor.inc` over WebRTC, so Val Town never proxies realtime media.\n\n## Architecture\n\n```mermaid\nflowchart LR\n B[\"Browser (React SPA)
webcam → camera track
main_video → edited output\"]\n V[\"Val Town (Hono)
/ serves SPA
/api/reactor/token mints JWT\"]\n R[\"api.reactor.inc
SANA-Streaming model\"]\n\n B -- \"GET /api/reactor/token\" --> V\n V -- \"POST /tokens (Reactor-API-Key)\" --> R\n R -- \"{ jwt }\" --> V\n V -- \"{ jwt }\" --> B\n B == \"WebRTC: publish camera / receive main_video (JWT auth)\" ==> R\n```\n\nThe `REACTOR_API_KEY` stays on the server. The browser only ever receives a short-lived JWT, cached by its HTTP cache until expiry.\n\n## Files\n\n| Path | What it is |\n| --- | --- |\n| `index.ts` | Hono server: serves the SPA, mints the JWT (`/api/reactor/token`), `/source` redirect |\n| `frontend/index.html` | SPA shell — Twind (runtime Tailwind) + the React entry |\n| `frontend/index.tsx` | React root |\n| `frontend/App.tsx` | Provider + connection, seed, start/pause/resume/reset, live re-prompt, webcam self-view, edited output |\n\n## Setup\n\nOne env var, the Reactor production key (`rk_...`):\n\n👉 Add REACTOR_API_KEY here: https://www.val.town/x/dcm31/sana-streaming/environment-variables?key=REACTOR_API_KEY\n\n## How to use\n\n1. Open the app, click **Connect** (disconnected → connecting → waiting → ready).\n2. Allow camera access when prompted.\n3. (Optional) set a **seed** for reproducibility, then **Start**.\n4. Type an **edit prompt** (or tap a preset) — it's an editing instruction, not a scene description. Change it any time; it applies ~1 chunk later.\n5. **Pause / Resume / Reset** once running.\n\n## What's faithful vs. simplified\n\nFaithful to the reference app: the server-side JWT mint (browser never sees the key), the model-as-source-of-truth reducer fed only by the typed `state` message, status-gated commands, the `set_mode(\"live\")` → `start` flow, mid-stream re-prompting, and the typed-SDK surface (`useSanaStreaming`, `useSanaStreamingState`, `SanaStreamingMainVideoView`).\n\nSimplified for a single-file Val Town SPA:\n\n- **Webcam only.** Uses the declarative ``, which auto-acquires the webcam and auto-publishes the `camera` track. The reference app's second input source (streaming a **video clip** into `camera` via `captureStream()`, with the split source/edited stage) and its manual `contentHint = \"detail\"` publish are not ported.\n- **No Snap-Clip recording** (the reference's `@reactor-team/js-sdk` clip recorder).\n- **Tailwind via Twind** at runtime instead of Tailwind v4 + `@reactor-team/ui` design tokens.\n\nAll three are straightforward to add on top — the SDK exports the same hooks the reference uses.\n\n## Notes\n\n- React is pinned to 18.2.0 everywhere (the SDK's peer dep is `react >=18`) so the browser loads exactly one React instance from esm.sh.\n- Val Town can't accept incoming WebSockets, but that's fine here — the browser's realtime connection is to Reactor, not to Val Town.\n",[],[231],["D",1781556038037],[],[18,77],["D",1781558738917],[],[18,90],["D",1781558787524],[],[18,95],["D",1781556038037],[217,218,219],[18],["D",1781556038037],{"_11":12,"_163":159},{"_11":12,"_157":158,"_83":159,"_31":-5,"_160":161,"_162":24},{"_41":92,"_13":16,"_35":38,"_147":112,"_148":-5,"_149":-5,"_150":151,"_152":153,"_154":44,"_155":14,"_156":12},"ctx",{"_54":-5,"_182":286,"_287":288,"_289":290,"_291":30,"_292":30,"_293":30,"_294":24,"_295":-5,"_296":-7,"_297":-7,"_298":26,"_299":30,"_300":30,"_301":-5,"_302":30,"_303":30,"_304":30,"_305":-5},"ENV",{"_257":258,"_259":260,"_261":16,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend