\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","label",[168,68],"frontend","pulls","branches","forks","envVars",{"_176":40,"_178":40},"connections",{"_176":26,"_177":26},"count","unfilledCount","emptyCount",{"_33":218,"_13":168,"_66":160,"_43":-5,"_35":36,"_161":40,"_162":97,"_37":219,"_39":26,"_69":220,"_164":-5,"_71":24,"_166":-5,"_190":221,"_17":222},{"_33":159,"_13":68,"_66":67,"_43":160,"_35":36,"_161":78,"_162":97,"_37":215,"_39":40,"_69":70,"_164":165,"_71":24,"_166":-5,"_190":216,"_17":217},{"_33":207,"_13":208,"_66":209,"_43":160,"_35":36,"_161":210,"_162":97,"_37":211,"_39":40,"_69":21,"_164":212,"_71":24,"_166":-5,"_190":213,"_17":214},{"_33":200,"_13":201,"_66":202,"_43":160,"_35":36,"_161":40,"_162":97,"_37":203,"_39":26,"_69":70,"_164":204,"_71":24,"_166":-5,"_190":205,"_17":206},{"_33":193,"_13":194,"_66":195,"_43":-5,"_35":36,"_161":40,"_162":97,"_37":196,"_39":26,"_69":21,"_164":197,"_71":24,"_166":-5,"_190":198,"_17":199},{"_33":185,"_13":186,"_66":95,"_43":-5,"_35":36,"_161":40,"_162":97,"_37":187,"_39":26,"_69":188,"_164":189,"_71":24,"_166":-5,"_190":191,"_17":192},"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",[],[186],"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",[],[194],"276b0c8b-85bd-4451-94da-cce0e6270b99","index.tsx","019ecd03-ca29-73df-84ec-c5f40cde3965",["D",1781556038037],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No #root element found\");\ncreateRoot(root).render();\n",[],[168,201],"db425ea3-962e-4b65-a9f5-0a576dd998a0","index.html","019ecd03-ca29-73df-84ec-c36148eecc41",2,["D",1781558738917],"\n\n \n \n \n SANA-Streaming · Val Town\n \n \n \n \n \n \n \n \n

\n \n \n \n \n\n",[],[168,208],["D",1781558787524],[],[168,68],"8c8b2fd7-5d11-4547-9b1f-a9427f8f20a6",["D",1781556038037],"directory",[180,181,182],[168],["D",1781556038037],{"_11":12,"_137":133},{"_11":12,"_131":132,"_74":133,"_30":-5,"_134":135,"_136":97},{"_39":78,"_13":16,"_33":36,"_121":85,"_122":-5,"_123":-5,"_124":125,"_126":127,"_128":42,"_129":14,"_130":12},"ctx",{"_52":-5,"_156":260,"_261":262,"_263":264,"_265":24,"_266":24,"_267":24,"_268":97,"_269":-5,"_270":-7,"_271":-7,"_272":26,"_273":24,"_274":24,"_275":-5,"_276":24,"_277":24,"_278":24,"_279":-5},"ENV",{"_231":232,"_233":234,"_235":16,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259},"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 · App.tsx