\n \n \n \n \n\n","019ecd03-ca29-73df-84ec-caba10e01c25",["D",1781558738917],"branchVersion","label",[166,68],"frontend","pulls","branches","forks","envVars",{"_174":40,"_176":40},"connections",{"_174":26,"_175":26},"count","unfilledCount","emptyCount",{"_33":217,"_13":166,"_66":161,"_43":-5,"_35":36,"_163":40,"_185":95,"_37":218,"_39":26,"_69":219,"_159":-5,"_70":24,"_164":-5,"_189":220,"_17":221},{"_33":210,"_13":211,"_66":212,"_43":161,"_35":36,"_163":119,"_185":95,"_37":213,"_39":40,"_69":203,"_159":214,"_70":24,"_164":-5,"_189":215,"_17":216},{"_33":158,"_13":68,"_66":67,"_43":161,"_35":36,"_163":77,"_185":95,"_37":207,"_39":40,"_69":21,"_159":160,"_70":24,"_164":-5,"_189":208,"_17":209},{"_33":199,"_13":200,"_66":201,"_43":161,"_35":36,"_163":40,"_185":95,"_37":202,"_39":26,"_69":203,"_159":204,"_70":24,"_164":-5,"_189":205,"_17":206},{"_33":192,"_13":193,"_66":194,"_43":-5,"_35":36,"_163":40,"_185":95,"_37":195,"_39":26,"_69":21,"_159":196,"_70":24,"_164":-5,"_189":197,"_17":198},{"_33":183,"_13":184,"_66":93,"_43":-5,"_35":36,"_163":40,"_185":95,"_37":186,"_39":26,"_69":187,"_159":188,"_70":24,"_164":-5,"_189":190,"_17":191},"7673745d-b28b-4f00-a942-7b56378f372c","index.ts","latest",["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",[],[184],"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",[],[193],"276b0c8b-85bd-4451-94da-cce0e6270b99","index.tsx","019ecd03-ca29-73df-84ec-c5f40cde3965",["D",1781556038037],"script","/** @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",[],[166,200],["D",1781558738917],[],[166,68],"dfe3b384-8647-4939-b4c4-b1fa912ac415","App.tsx","019ecd03-ca29-73df-84ec-be72760844b5",["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",[],[166,211],"8c8b2fd7-5d11-4547-9b1f-a9427f8f20a6",["D",1781556038037],"directory",[178,179,180],[166],["D",1781556038037],{"_11":12,"_136":132},{"_11":12,"_130":131,"_73":132,"_30":-5,"_133":134,"_135":95},{"_39":119,"_13":16,"_33":36,"_120":83,"_121":-5,"_122":-5,"_123":124,"_125":126,"_127":42,"_128":14,"_129":12},"ctx",{"_52":-5,"_155":259,"_260":261,"_262":263,"_264":24,"_265":24,"_266":24,"_267":95,"_268":-5,"_269":-7,"_270":-7,"_271":26,"_272":24,"_273":24,"_274":-5,"_275":24,"_276":24,"_277":24,"_278":-5},"ENV",{"_230":231,"_232":233,"_234":16,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258},"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 · index.html