[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","charliem","name","sana-streaming-starter","path","frontend/App.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/charliem/sana-streaming-starter/code/frontend/App.tsx","extension","id","dfe3b384-8647-4939-b4c4-b1fa912ac415","App.tsx","fileId","019ecd03-ca29-73df-84ec-be72760844b5","parentId","019ecd03-ca29-73df-84ec-caba10e01c25","branchId","7a6d0209-06b1-48e4-a484-5d7f449153e7","branchVersion",3,"latest",true,"createdAt",["D",1781558787524],"version",1,"fileType","script","content","/** @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","deleted",false,"label",[47,24],"frontend","bee92a57-7d79-451e-9f40-6e88d22188eb",["D",1781556038037],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Reactor SANA-Streaming real-time video editor on Val Town","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","019ecd03-ca29-73df-84ec-d1b1dee0bd28","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019a7dac-7b29-752e-aace-a775b62e4065","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_101":102,"_103":104,"_58":-5,"_105":106,"_107":34},"branch",{"_37":32,"_11":89,"_22":30,"_90":48,"_91":-5,"_92":-5,"_93":94,"_95":96,"_97":98,"_99":12,"_100":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","private","forkedProjectId","e675a334-e634-4483-b47d-66b339b9dae4","forkedProjectOrgId","d663a026-6449-42f6-9156-1d4a2d64d38c","projectName","userHandle","displayName","Charlie","avatar","","tier","business","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":66,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":89,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]