\n \n \n \n \n\n",[],[112,87],"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",[],[112,93],["D",1781556038037],[229,230,231],[112],["D",1781556038037],{"_11":12,"_179":175},{"_11":12,"_173":174,"_80":175,"_25":-5,"_176":177,"_178":139},{"_35":123,"_13":16,"_29":32,"_163":128,"_164":-5,"_165":-5,"_166":167,"_168":169,"_170":38,"_171":14,"_172":12},"ctx",{"_48":-5,"_198":296,"_297":298,"_299":300,"_301":24,"_302":24,"_303":24,"_304":139,"_305":-5,"_306":-7,"_307":-7,"_308":20,"_309":24,"_310":24,"_311":-5,"_312":24,"_313":24,"_314":24,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":16,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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