[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_279":280,"_281":282},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a0aa9e-8d5a-722e-8769-6b8813ec288b","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction Field({ label, children }: { label: string; children: any }) {\n return {label}{children};\n}\n\nconst inputClass = \"w-full rounded-xl border border-neutral-800 bg-neutral-900 px-4 py-3 text-sm text-white outline-none transition focus:border-neutral-500\";\n\nexport function App() {\n const [mode, setMode] = useState<\"video\" | \"image\">(\"video\");\n const [prompt, setPrompt] = useState(\"Une jeune femme marche naturellement dans une rue urbaine après une pluie légère, lumière réelle de fin d'après-midi, vêtements légèrement humides, mouvement spontané, caméra à hauteur des yeux.\");\n const [aspect, setAspect] = useState(\"9:16\");\n const [duration, setDuration] = useState(5);\n const [lens, setLens] = useState(50);\n const [aperture, setAperture] = useState(2.8);\n const [iso, setIso] = useState(400);\n const [shutter, setShutter] = useState(\"1/120\");\n const [motion, setMotion] = useState(45);\n const [realism, setRealism] = useState(95);\n const [referenceUrl, setReferenceUrl] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [history, setHistory] = useState([]);\n\n async function loadHistory() {\n const r = await fetch(\"/api/generations\");\n const d = await r.json();\n if (d.ok) setHistory(d.generations ?? []);\n }\n useEffect(() => { loadHistory().catch(() => undefined); }, []);\n\n const cameraSummary = useMemo(() => `${lens}mm · f/${aperture} · ISO ${iso} · ${shutter}`, [lens, aperture, iso, shutter]);\n\n async function generate() {\n setBusy(true); setMessage(\"\");\n try {\n const r = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt, mode, aspect, duration, lens, aperture, iso, shutter, motion, realism, reference: Boolean(referenceUrl), referenceUrl: referenceUrl || undefined }),\n });\n const d = await r.json();\n if (!r.ok || !d.ok) throw new Error(d.error || d.result?.status || \"La génération a échoué.\");\n setMessage(d.result?.status === \"needs_api_key\" ? \"Kling n'est pas encore configuré. Ajoute KLING_API_KEY dans les variables d'environnement Val Town.\" : \"Demande envoyée à Kling.\");\n await loadHistory();\n } catch (e) {\n setMessage(e instanceof Error ? e.message : \"Erreur inconnue.\");\n } finally { setBusy(false); }\n }\n\n return (\n

Reality Camera Studio

Créer comme si une vraie caméra était là.

Un pipeline orienté réalité : caméra, lumière, mouvement, matière, continuité temporelle et contrôle anti-artifacts.

Moteur principal · Kling

\n\n

\n {([\"video\", \"image\"] as const).map((item) => )}\n

\n\n

\n \n

setPrompt(e.target.value)} rows={7} className={`${inputClass} resize-y leading-6`} placeholder=\"Décris ce que la caméra doit réellement observer…\" />\n            </Field>\n          </div>\n\n          <div className=\"grid gap-4 border-t border-neutral-900 pt-5 sm:grid-cols-2 lg:grid-cols-3\">\n            <Field label=\"Format\"><select value={aspect} onChange={(e) => setAspect(e.target.value)} className={inputClass}><option>9:16</option><option>16:9</option><option>1:1</option><option>4:3</option></select></Field>\n            {mode === \"video\" && <Field label=\"Durée\"><input type=\"number\" min=\"1\" max=\"20\" value={duration} onChange={(e) => setDuration(Math.max(1, Math.min(20, Number(e.target.value) || 1)))} className={inputClass} /></Field>}\n            <Field label=\"Focale\"><input type=\"number\" min=\"14\" max=\"200\" value={lens} onChange={(e) => setLens(Math.max(14, Math.min(200, Number(e.target.value) || 50)))} className={inputClass} /></Field>\n            <Field label=\"Ouverture\"><input type=\"number\" step=\"0.1\" min=\"1.2\" max=\"22\" value={aperture} onChange={(e) => setAperture(Math.max(1.2, Math.min(22, Number(e.target.value) || 2.8)))} className={inputClass} /></Field>\n            <Field label=\"ISO\"><input type=\"number\" min=\"50\" max=\"12800\" value={iso} onChange={(e) => setIso(Math.max(50, Math.min(12800, Number(e.target.value) || 400)))} className={inputClass} /></Field>\n            <Field label=\"Obturateur\"><select value={shutter} onChange={(e) => setShutter(e.target.value)} className={inputClass}><option>1/50</option><option>1/60</option><option>1/120</option><option>1/250</option><option>1/500</option></select></Field>\n          </div>\n\n          <div className=\"grid gap-4 border-t border-neutral-900 pt-5 sm:grid-cols-2\">\n            <Field label={`Mouvement naturel · ${motion}`}><input type=\"range\" min=\"0\" max=\"100\" value={motion} onChange={(e) => setMotion(Number(e.target.value))} className=\"w-full\" /></Field>\n            <Field label={`Contrôle réalisme · ${realism}`}><input type=\"range\" min=\"70\" max=\"100\" value={realism} onChange={(e) => setRealism(Number(e.target.value))} className=\"w-full\" /></Field>\n          </div>\n\n          <div className=\"mt-5 grid gap-4 sm:grid-cols-[1fr_auto] sm:items-end\">\n            <Field label=\"Image de référence · facultatif\"><input value={referenceUrl} onChange={(e) => setReferenceUrl(e.target.value)} className={inputClass} placeholder=\"URL image publique\" /></Field>\n            <button type=\"button\" onClick={generate} disabled={busy} className=\"min-h-[48px] rounded-xl bg-white px-6 py-3 text-sm font-semibold text-black transition hover:bg-neutral-200 disabled:cursor-wait disabled:opacity-60\">{busy ? \"Préparation…\" : `Générer ${mode === \"video\" ? \"la vidéo\" : \"la photo\"}`}</button>\n          </div>\n          <div aria-live=\"polite\" className=\"mt-4 min-h-5 text-sm text-neutral-400\">{message}</div>\n        </section>\n\n        <aside className=\"space-y-4\">\n          <div className=\"rounded-2xl border border-neutral-900 bg-neutral-950 p-5\">\n            <div className=\"text-xs font-semibold uppercase tracking-[0.2em] text-neutral-500\">Caméra virtuelle</div>\n            <div className=\"mt-4 text-lg font-medium\">{cameraSummary}</div>\n            <div className=\"mt-3 space-y-2 text-sm text-neutral-500\">\n              <div className=\"flex justify-between gap-4\"><span>Réponse</span><span className=\"text-neutral-300\">naturelle</span></div>\n              <div className=\"flex justify-between gap-4\"><span>Mouvement</span><span className=\"text-neutral-300\">physique</span></div>\n              <div className=\"flex justify-between gap-4\"><span>Peau</span><span className=\"text-neutral-300\">texture naturelle</span></div>\n              <div className=\"flex justify-between gap-4\"><span>Continuité</span><span className=\"text-neutral-300\">identité + lumière</span></div>\n            </div>\n          </div>\n\n          <div className=\"rounded-2xl border border-neutral-900 bg-neutral-950 p-5\">\n            <div className=\"flex items-center justify-between\"><div className=\"text-xs font-semibold uppercase tracking-[0.2em] text-neutral-500\">Dernières générations</div><span className=\"text-xs text-neutral-600\">{history.length}</span></div>\n            <div className=\"mt-4 space-y-3\">\n              {history.length === 0 ? <p className=\"text-sm leading-6 text-neutral-600\">Aucune génération enregistrée.</p> : history.slice(0, 8).map((g) => <div key={g.id} className=\"rounded-xl border border-neutral-900 bg-neutral-900/40 p-3\"><div className=\"flex justify-between gap-3 text-[11px] uppercase tracking-wider text-neutral-600\"><span>{g.mode}</span><span>{g.status}</span></div><p className=\"mt-2 line-clamp-2 text-sm text-neutral-300\">{g.prompt}</p></div>)}\n            </div>\n          </div>\n        </aside>\n      </div>\n\n      <footer className=\"flex items-center justify-between border-t border-neutral-900 pt-5 text-xs text-neutral-600\"><span>Reality-first rendering pipeline</span><a href=\"/source\" className=\"hover:text-neutral-300\">view source</a></footer>\n    </div>\n  );\n}\n","createdAt",["D",1789569312922],"branchVersion","branchId","a7613ece-a578-4724-aebc-be9a4598ab48","id","8f282234-7b21-4835-8dfe-b11376415cdd","reality-camera-studio",["D",1789568911615],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Photorealistic image and video generation studio","imageUrl","60cfc669-b7f7-4ed6-aa69-72dac2809e21","pinnedFileId","01a0aa9e-8d5a-722e-8769-8ed17bf83441","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0aa9d-1e4a-71cf-a458-950b0565fe64","tursoName","8f2822347b2148358dfeb11376415cdd","tursoHostname","8f2822347b2148358dfeb11376415cdd-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789655476524],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","juniorsainte","handle","displayName","Junior Sainte","avatar","https://lh3.googleusercontent.com/a/ACg8ocIPymqHBXqXNjY5_9CwfNeROgzXBXPMaAKC5e0aKPa0mI-8HQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":274,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":275,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":276,"_85":277,"_87":278,"_89":25},"tree",[182,189,193,194,195],"files",[182,183,184,185,186,187,188,189,190,191,192,193,194,195],"counts",{"_172":64,"_173":151,"_174":64,"_175":176,"_177":178},"contents",[132,133,134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":167,"_32":168,"_30":169,"_139":-5,"_42":43,"_41":151,"_141":60,"_39":170,"_13":64,"_34":165,"_36":-5,"_24":25,"_146":-5,"_27":171},{"_44":161,"_32":162,"_30":163,"_139":-5,"_42":43,"_41":143,"_141":60,"_39":164,"_13":64,"_34":165,"_36":-5,"_24":25,"_146":-5,"_27":166},{"_44":155,"_32":156,"_30":157,"_139":-5,"_42":43,"_41":151,"_141":60,"_39":158,"_13":64,"_34":20,"_36":159,"_24":25,"_146":-5,"_27":160},{"_44":148,"_32":149,"_30":150,"_139":-5,"_42":43,"_41":151,"_141":60,"_39":152,"_13":64,"_34":20,"_36":153,"_24":25,"_146":-5,"_27":154},{"_44":137,"_32":138,"_30":58,"_139":-5,"_42":43,"_41":140,"_141":60,"_39":142,"_13":143,"_34":144,"_36":145,"_24":25,"_146":-5,"_27":147},"a51ecff7-e0cd-4439-bdf0-aecb9752011e","index.ts","parentId",6,"latest",["D",1789569289800],2,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { compileShot } from \"./lib/engine.ts\";\nimport { submitKlingJob } from \"./lib/kling.ts\";\nimport { createGeneration, listGenerations } from \"./lib/db.ts\";\n\nconst app = new Hono();\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/health\", async (c) => c.json({ ok: true, service: \"reality-camera-studio\", provider: \"kling\", ready: Boolean(Deno.env.get(\"KLING_API_KEY\")) }));\napp.get(\"/api/generations\", async (c) => c.json({ ok: true, generations: await listGenerations() }));\n\napp.post(\"/api/generate\", async (c) => {\n  const body = await c.req.json().catch(() => ({}));\n  const spec = {\n    prompt: typeof body.prompt === \"string\" ? body.prompt : \"\",\n    mode: body.mode === \"video\" ? \"video\" : \"image\",\n    aspect: typeof body.aspect === \"string\" ? body.aspect : \"9:16\",\n    duration: Number.isFinite(Number(body.duration)) ? Math.max(1, Math.min(20, Number(body.duration))) : 5,\n    lens: Number.isFinite(Number(body.lens)) ? Math.max(14, Math.min(200, Number(body.lens))) : 50,\n    aperture: Number.isFinite(Number(body.aperture)) ? Math.max(1.2, Math.min(22, Number(body.aperture))) : 2.8,\n    iso: Number.isFinite(Number(body.iso)) ? Math.max(50, Math.min(12800, Number(body.iso))) : 400,\n    shutter: typeof body.shutter === \"string\" ? body.shutter : \"1/120\",\n    realism: Number.isFinite(Number(body.realism)) ? Math.max(70, Math.min(100, Number(body.realism))) : 95,\n    motion: Number.isFinite(Number(body.motion)) ? Math.max(0, Math.min(100, Number(body.motion))) : 45,\n    reference: Boolean(body.reference),\n  } as const;\n  const plan = compileShot(spec);\n  if (plan.warnings.length) return c.json({ ok: false, error: plan.warnings.join(\" \") }, 400);\n\n  const negativePrompt = \"plastic skin, beauty filter, over-smoothing, fake eyes, deformed hands, extra fingers, duplicated objects, floating objects, texture repetition, temporal flicker, inconsistent shadows, unnatural motion, excessive sharpening, artificial glow, fake depth of field\";\n  const result = await submitKlingJob({\n    prompt: `${plan.scene}. Capture it as a real physical scene. Natural human behavior, real materials, realistic light transport, authentic camera response. ${plan.antiArtificiality.join(\", \")}.`,\n    mode: spec.mode,\n    aspect: spec.aspect,\n    duration: spec.duration,\n    negativePrompt,\n    referenceUrl: typeof body.referenceUrl === \"string\" ? body.referenceUrl : undefined,\n    camera: plan.camera,\n  });\n\n  const id = await createGeneration({\n    mode: spec.mode,\n    prompt: spec.prompt,\n    status: result.status,\n    provider: \"kling\",\n    providerData: result,\n  });\n  return c.json({ ok: result.status !== \"provider_error\", generationId: id, plan, result });\n});\n\napp.post(\"/api/compile\", async (c) => {\n  const body = await c.req.json().catch(() => ({}));\n  const spec = {\n    prompt: typeof body.prompt === \"string\" ? body.prompt : \"\",\n    mode: body.mode === \"video\" ? \"video\" : \"image\",\n    aspect: typeof body.aspect === \"string\" ? body.aspect : \"9:16\",\n    duration: Number.isFinite(Number(body.duration)) ? Math.max(1, Math.min(20, Number(body.duration))) : 5,\n    lens: Number.isFinite(Number(body.lens)) ? Math.max(14, Math.min(200, Number(body.lens))) : 50,\n    aperture: Number.isFinite(Number(body.aperture)) ? Math.max(1.2, Math.min(22, Number(body.aperture))) : 2.8,\n    iso: Number.isFinite(Number(body.iso)) ? Math.max(50, Math.min(12800, Number(body.iso))) : 400,\n    shutter: typeof body.shutter === \"string\" ? body.shutter : \"1/120\",\n    realism: Number.isFinite(Number(body.realism)) ? Math.max(70, Math.min(100, Number(body.realism))) : 95,\n    motion: Number.isFinite(Number(body.motion)) ? Math.max(0, Math.min(100, Number(body.motion))) : 45,\n    reference: Boolean(body.reference),\n  } as const;\n  return c.json(compileShot(spec));\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","label",[138],"376b80e5-7c37-45a8-a51a-e562c9406fbb","README.md","01a0aa9e-8d5a-722e-8769-8ac07fe559cb",1,["D",1789568911615],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[149],"4ff7678a-ba44-4ba0-a0de-8d0c28ac3037","CHANGELOG.md","01a0aa9e-8d5a-722e-8769-8400a3ccb6a2",["D",1789568911615],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[156],"0d7f0a27-f472-4769-b615-5767c5e9edf8","lib","0d81be1e-b2d2-47a2-bd2c-e037885a86a4",["D",1789568957549],"directory",[162],"431780ac-cea1-4b93-b418-bde9b6083a21","frontend","01a0aa9e-8d5a-722e-8769-8338b25a4b76",["D",1789568911615],[168],"pulls","branches","forks","envVars",{"_179":64,"_181":64},"connections",{"_179":64,"_180":64},"count","unfilledCount","emptyCount",{"_44":167,"_32":168,"_30":169,"_139":-5,"_42":43,"_41":151,"_141":60,"_39":271,"_13":64,"_34":165,"_36":-5,"_24":25,"_146":-5,"_197":272,"_27":273},{"_44":267,"_32":262,"_30":257,"_139":169,"_42":43,"_41":151,"_141":60,"_39":268,"_13":64,"_34":165,"_36":-5,"_24":25,"_146":-5,"_197":269,"_27":270},{"_44":263,"_32":33,"_30":31,"_139":257,"_42":43,"_41":14,"_141":25,"_39":264,"_13":151,"_34":35,"_36":38,"_24":25,"_146":-5,"_197":265,"_27":266},{"_44":254,"_32":255,"_30":256,"_139":257,"_42":43,"_41":151,"_141":60,"_39":258,"_13":64,"_34":35,"_36":259,"_24":25,"_146":-5,"_197":260,"_27":261},{"_44":247,"_32":248,"_30":249,"_139":169,"_42":43,"_41":151,"_141":60,"_39":250,"_13":64,"_34":20,"_36":251,"_24":25,"_146":-5,"_197":252,"_27":253},{"_44":240,"_32":241,"_30":242,"_139":169,"_42":43,"_41":151,"_141":60,"_39":243,"_13":64,"_34":35,"_36":244,"_24":25,"_146":-5,"_197":245,"_27":246},{"_44":232,"_32":233,"_30":234,"_139":169,"_42":43,"_41":235,"_141":60,"_39":236,"_13":151,"_34":35,"_36":237,"_24":25,"_146":-5,"_197":238,"_27":239},{"_44":161,"_32":162,"_30":163,"_139":-5,"_42":43,"_41":143,"_141":60,"_39":229,"_13":64,"_34":165,"_36":-5,"_24":25,"_146":-5,"_197":230,"_27":231},{"_44":221,"_32":222,"_30":223,"_139":163,"_42":43,"_41":224,"_141":60,"_39":225,"_13":64,"_34":35,"_36":226,"_24":25,"_146":-5,"_197":227,"_27":228},{"_44":214,"_32":215,"_30":216,"_139":163,"_42":43,"_41":143,"_141":60,"_39":217,"_13":64,"_34":35,"_36":218,"_24":25,"_146":-5,"_197":219,"_27":220},{"_44":206,"_32":207,"_30":208,"_139":163,"_42":43,"_41":209,"_141":60,"_39":210,"_13":64,"_34":35,"_36":211,"_24":25,"_146":-5,"_197":212,"_27":213},{"_44":155,"_32":156,"_30":157,"_139":-5,"_42":43,"_41":151,"_141":60,"_39":203,"_13":64,"_34":20,"_36":159,"_24":25,"_146":-5,"_197":204,"_27":205},{"_44":148,"_32":149,"_30":150,"_139":-5,"_42":43,"_41":151,"_141":60,"_39":200,"_13":64,"_34":20,"_36":153,"_24":25,"_146":-5,"_197":201,"_27":202},{"_44":137,"_32":138,"_30":58,"_139":-5,"_42":43,"_41":140,"_141":60,"_39":196,"_13":143,"_34":144,"_36":145,"_24":25,"_146":-5,"_197":198,"_27":199},["D",1789569289800],"children",[],[138],["D",1789568911615],[],[149],["D",1789568911615],[],[156],"93ca9998-f6e7-4b53-8c4e-8cef02691399","kling.ts","bba50bd6-b1db-11f1-8058-1607ee4eb77e",4,["D",1789569272921],"export interface KlingConfig {\n  baseUrl: string;\n  apiKey?: string;\n  model?: string;\n}\n\nexport function getKlingConfig(): KlingConfig {\n  return {\n    baseUrl: Deno.env.get(\"KLING_API_BASE_URL\") || \"https://api.klingai.com\",\n    apiKey: Deno.env.get(\"KLING_API_KEY\"),\n    model: Deno.env.get(\"KLING_MODEL\") || \"kling-video\",\n  };\n}\n\nexport function klingHeaders(config: KlingConfig) {\n  if (!config.apiKey) return { \"Content-Type\": \"application/json\" };\n  return {\n    \"Content-Type\": \"application/json\",\n    Authorization: `Bearer ${config.apiKey}`,\n  };\n}\n\nexport interface GenerationRequest {\n  prompt: string;\n  mode: \"image\" | \"video\";\n  aspect: string;\n  duration: number;\n  negativePrompt: string;\n  referenceUrl?: string;\n  camera: Record<string, unknown>;\n}\n\nexport async function submitKlingJob(input: GenerationRequest) {\n  const config = getKlingConfig();\n  if (!config.apiKey) {\n    return { configured: false, status: \"needs_api_key\" as const };\n  }\n\n  // Provider-specific paths are intentionally isolated here so a change in\n  // Kling's public API never leaks into the rest of the application.\n  const endpoint = input.mode === \"video\"\n    ? `${config.baseUrl}/v1/videos/generations`\n    : `${config.baseUrl}/v1/images/generations`;\n\n  const payload = {\n    model_name: config.model,\n    prompt: input.prompt,\n    negative_prompt: input.negativePrompt,\n    aspect_ratio: input.aspect,\n    duration: input.mode === \"video\" ? String(input.duration) : undefined,\n    image_url: input.referenceUrl,\n    camera_control: input.camera,\n  };\n\n  const response = await fetch(endpoint, {\n    method: \"POST\",\n    headers: klingHeaders(config),\n    body: JSON.stringify(payload),\n  });\n\n  const text = await response.text();\n  let data: unknown;\n  try { data = JSON.parse(text); } catch { data = { raw: text }; }\n  if (!response.ok) {\n    return { configured: true, status: \"provider_error\" as const, httpStatus: response.status, data };\n  }\n  return { configured: true, status: \"submitted\" as const, data };\n}\n",[],[162,207],"4cbb52d6-f462-45de-9993-d4dd3b8e5b09","engine.ts","ffabd9b4-b1da-11f1-acb3-1607ee4eb77e",["D",1789568957549],"export type MediaMode = \"image\" | \"video\";\n\nexport interface ShotSpec {\n  prompt: string;\n  mode: MediaMode;\n  aspect: string;\n  duration: number;\n  lens: number;\n  aperture: number;\n  iso: number;\n  shutter: string;\n  realism: number;\n  motion: number;\n  reference: boolean;\n}\n\nexport function compileShot(spec: ShotSpec) {\n  const warnings: string[] = [];\n  const prompt = spec.prompt.trim();\n  if (!prompt) warnings.push(\"Décris la scène à capturer.\");\n  if (spec.mode === \"image\" && spec.duration !== 1) warnings.push(\"La durée est ignorée en mode photo.\");\n  return {\n    scene: prompt,\n    camera: {\n      focalLengthMm: spec.lens,\n      aperture: spec.aperture,\n      iso: spec.iso,\n      shutter: spec.shutter,\n      exposureStyle: \"natural\",\n      depthOfField: \"optical\",\n    },\n    physics: {\n      gravity: true,\n      collisions: true,\n      massAndInertia: true,\n      clothHairMotion: true,\n      naturalMotion: spec.motion,\n    },\n    humanRealism: {\n      skinTexture: \"natural\",\n      facialAsymmetry: true,\n      microExpressions: true,\n      blinking: true,\n      breathing: true,\n      gaze: \"natural\",\n      hands: \"tracked\",\n    },\n    temporalConsistency: spec.mode === \"video\" ? \"identity + lighting + geometry locked\" : \"single-frame\",\n    antiArtificiality: [\n      \"no plastic skin\",\n      \"no beauty filter\",\n      \"no fake cinematic glow\",\n      \"no excessive sharpening\",\n      \"no texture repetition\",\n      \"no floating objects\",\n      \"no temporal flicker\",\n    ],\n    colorPipeline: \"camera-like neutral response with highlight rolloff and natural sensor noise\",\n    referenceLocked: spec.reference,\n    qualityGate: {\n      minimumRealism: spec.realism,\n      regenerateOnFailure: true,\n    },\n    warnings,\n  };\n}\n",[],[162,215],"1111520f-1b19-430d-9ac9-a3f800975430","db.ts","c0680146-b1db-11f1-8a39-1607ee4eb77e",5,["D",1789569280899],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nlet initialized = false;\n\nexport async function initDb() {\n  if (initialized) return;\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS generations (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    mode TEXT NOT NULL,\n    prompt TEXT NOT NULL,\n    status TEXT NOT NULL,\n    provider TEXT NOT NULL,\n    provider_data TEXT,\n    created_at TEXT NOT NULL\n  )`);\n  initialized = true;\n}\n\nexport async function createGeneration(row: { mode: string; prompt: string; status: string; provider: string; providerData?: unknown }) {\n  await initDb();\n  await sqlite.execute({\n    sql: `INSERT INTO generations (mode, prompt, status, provider, provider_data, created_at) VALUES (?, ?, ?, ?, ?, ?)` ,\n    args: [row.mode, row.prompt, row.status, row.provider, JSON.stringify(row.providerData ?? null), new Date().toISOString()],\n  });\n  const result = await sqlite.execute(\"SELECT last_insert_rowid() AS id\");\n  return Number(result.rows[0]?.id ?? 0);\n}\n\nexport async function listGenerations(limit = 20) {\n  await initDb();\n  const safeLimit = Math.max(1, Math.min(50, Math.floor(limit)));\n  return (await sqlite.execute({\n    sql: `SELECT id, mode, prompt, status, provider, created_at FROM generations ORDER BY id DESC LIMIT ?`,\n    args: [safeLimit],\n  })).rows;\n}\n",[],[162,222],["D",1789568957549],[190,191,192],[162],"189ac7da-5b18-42ae-b026-626ea08ff98b","root.tsx","01a0aa9e-8d5a-722e-8769-7f13d94bcf43",7,["D",1789569295394],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"fr\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"theme-color\" content=\"#0b0b0b\" />\n          <title>Reality Camera Studio</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"bg-neutral-950 text-neutral-100 antialiased\">\n          <main className=\"min-h-screen\">\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[168,233],"72cf1220-a489-455e-b6af-8bf50522862e","index.tsx","01a0aa9e-8d5a-722e-8769-7a946b79e2aa",["D",1789568911615],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[168,241],"f5e0703d-043f-4135-8d44-563741962820","favicon.svg","01a0aa9e-8d5a-722e-8769-74c8bbd2f75e",["D",1789568911615],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[168,248],"779c793d-2b78-4002-9a2b-2104c7e3c2a6","Counter.tsx","01a0aa9e-8d5a-722e-8769-6cdf38794077","01a0aa9e-8d5a-722e-8769-72eab9780b63",["D",1789568911615],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[168,262,255],"components","8ff66e4d-7fa3-4d39-a2c3-27a403931f87",["D",1789569312922],[],[168,262,33],"f0b92fe6-c937-4aa8-8b29-120ed427adc0",["D",1789568911615],[184,185],[168,262],["D",1789568911615],[183,186,187,188],[168],["D",1789568911615],["D",1789655476524],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":312,"_313":314,"_315":316,"_317":25,"_318":25,"_319":25,"_320":60,"_321":-5,"_322":-7,"_323":-7,"_324":64,"_325":25,"_326":25,"_327":-5,"_328":25,"_329":25,"_330":25,"_331":-5},"ENV",{"_283":284,"_285":286,"_287":91,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]
</article></body></html>

Diff · v8