[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_198":199,"_200":201},"routes/_app.x.$handle.$name",{"_100":99,"_38":51,"_109":90,"_33":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_26":-5,"_121":-5,"_122":-5,"_123":31,"_124":125,"_126":127,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":-5,"_59":-5,"_19":60,"_61":-5,"_62":31,"_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":31},"version",48,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","0f2f7314-0628-41ec-a041-5bfb2d05a782","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","526ed692-1037-11f1-8177-42dde27851f2","name","fileType","http","content","export default async function(req: Request): Promise {\n const url = new URL(req.url);\n\n // API endpoint for Gemini-powered enhance\n if (url.pathname === \"/api/enhance\" && req.method === \"POST\") {\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n return new Response(JSON.stringify({ error: \"GEMINI_API_KEY not configured\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const body = await req.json();\n const { imageData, prompt } = body;\n\n const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-pro-image-preview:generateContent?key=${GEMINI_API_KEY}`;\n\n const defaultPrompt = `You are the ESPER machine from the film Blade Runner (1982) — the legendary LAPD photo analysis workstation that can impossibly enhance and resolve detail from photographs far beyond their original resolution.\n\nThis image is a cropped section from a photograph that the operator has zoomed into. Your job is to ENHANCE it — generate a new version of this exact crop with dramatically more detail, as if the ESPER machine is resolving hidden information from the image.\n\nKey behaviors:\n- INVENT plausible, realistic detail that could exist in the scene. If this appears to be a face, resolve skin texture, pores, individual hairs, eye reflections. If an eye, show the reflection of the room or scene in the cornea — this is the ESPER's signature move.\n- If there are reflective surfaces (eyes, glasses, mirrors, windows, polished metal), generate what might be reflected in them — people, rooms, objects, text.\n- Add grain and texture consistent with the scene — fabric weave, wood grain, surface imperfections, dust particles.\n- Maintain the EXACT same composition, framing, color palette, and lighting. This must look like the same image, just with impossibly enhanced resolution.\n- Make it look photorealistic, as if captured by a camera with infinite resolution.\n- The result should feel like that magical Blade Runner moment where Deckard keeps saying \"enhance\" and impossible detail keeps appearing.\n\nReturn only the enhanced image.`;\n\n const geminiBody = {\n contents: [{\n parts: [\n {\n text: prompt || defaultPrompt,\n },\n { inlineData: { mimeType: \"image/jpeg\", data: imageData } },\n ],\n }],\n generationConfig: {\n responseModalities: [\"IMAGE\", \"TEXT\"],\n },\n };\n\n const geminiResp = await fetch(geminiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(geminiBody),\n });\n\n if (!geminiResp.ok) {\n const errText = await geminiResp.text();\n console.error(\"Gemini error:\", errText);\n return new Response(JSON.stringify({ error: \"Gemini API error\", details: errText }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const geminiData = await geminiResp.json();\n let enhancedImage = null;\n if (geminiData.candidates?.[0]?.content?.parts) {\n for (const part of geminiData.candidates[0].content.parts) {\n if (part.inlineData) { enhancedImage = part.inlineData.data; break; }\n }\n }\n\n if (!enhancedImage) {\n return new Response(JSON.stringify({ error: \"No image returned from Gemini\", raw: geminiData }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(JSON.stringify({ image: enhancedImage }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(\"Enhance error:\", err);\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // API endpoint for Gemini-powered voice command interpretation\n if (url.pathname === \"/api/interpret\" && req.method === \"POST\") {\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n return new Response(JSON.stringify({ error: \"GEMINI_API_KEY not configured\" }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const body = await req.json();\n const { transcript } = body;\n\n const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${GEMINI_API_KEY}`;\n\n const systemPrompt = `You are the voice command interpreter for the ESPER machine from Blade Runner — a photo analysis workstation used by the LAPD. The user speaks freeform natural language commands to navigate and analyze a photograph.\n\nYour job is to interpret their speech and return a JSON array of sequential commands to execute. Each command is an object with an \"action\" field and optional parameters.\n\nAvailable actions:\n- { \"action\": \"zoom_in\", \"amount\": 1-5 } — zoom in. amount 1=small, 3=normal, 5=large. Default 1.\n- { \"action\": \"zoom_out\", \"amount\": 1-5 } — zoom out. Default 1.\n- { \"action\": \"pan\", \"direction\": \"left\"|\"right\"|\"up\"|\"down\", \"amount\": 1-5 } — pan the viewport. Default amount 1.\n- { \"action\": \"enhance\" } — AI enhance the current visible region (use when they want more detail, clarity, sharpness, or say \"enhance\")\n- { \"action\": \"reset\" } — reset to original view\n- { \"action\": \"hardcopy\" } — download/print the current image\n- { \"action\": \"hold\" } — stop/freeze/hold position (acknowledge but do nothing)\n- { \"action\": \"noop\", \"message\": \"...\" } — for anything that isn't a command, include a short in-character ESPER system response\n\nRules:\n- A single utterance can map to MULTIPLE commands executed in sequence. E.g. \"pan left and zoom in\" = two commands.\n- If they say something like \"keep going\" or \"more\", repeat the last logical action (zoom or pan). Use zoom_in with amount 1 as default.\n- Interpret creatively but accurately. \"Get closer to that\", \"let me see that better\", \"magnify\" = zoom_in. \"Pull back\", \"show me the whole thing\" = zoom_out or reset. \"What's over there on the right\" = pan right. \"Sharpen that up\", \"can you clean that up\", \"I need more detail\" = enhance. \"Give me a hard copy of that\" = hardcopy.\n- For compound directions like \"up and to the left\" = pan up + pan left.\n- If the amount is implied (\"zoom way in\", \"a little to the left\"), adjust the amount parameter accordingly.\n- Always respond with valid JSON array only. No markdown, no explanation, no code fences.`;\n\n const geminiBody = {\n contents: [{\n parts: [{ text: 'Interpret this voice command for the ESPER machine:\\\\n\\\\n\"' + transcript + '\"' }],\n }],\n systemInstruction: { parts: [{ text: systemPrompt }] },\n generationConfig: { responseMimeType: \"application/json\", temperature: 0.1 },\n };\n\n const geminiResp = await fetch(geminiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(geminiBody),\n });\n\n if (!geminiResp.ok) {\n const errText = await geminiResp.text();\n console.error(\"Gemini interpret error:\", errText);\n return new Response(JSON.stringify({ error: \"Gemini API error\", details: errText }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const geminiData = await geminiResp.json();\n const responseText = geminiData.candidates?.[0]?.content?.parts?.[0]?.text || \"[]\";\n\n let commands;\n try {\n commands = JSON.parse(responseText);\n if (!Array.isArray(commands)) commands = [commands];\n } catch {\n console.error(\"Failed to parse Gemini response:\", responseText);\n commands = [{ action: \"noop\", message: \"COMMAND INTERPRETATION FAILED\" }];\n }\n\n return new Response(JSON.stringify({ commands }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(\"Interpret error:\", err);\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Serve static files\n const CONTENT_TYPES: Record = {\n \".html\": \"text/html\",\n \".css\": \"text/css\",\n \".js\": \"application/javascript\",\n };\n\n // Map paths to files\n let filePath = url.pathname;\n if (filePath === \"/\" || filePath === \"\") {\n filePath = \"/index.html\";\n }\n\n const fileMap: Record = {\n \"/index.html\": \"index.html\",\n \"/styles.css\": \"styles.css\",\n \"/app.js\": \"app.js\",\n };\n\n const mappedFile = fileMap[filePath];\n if (mappedFile) {\n const ext = filePath.substring(filePath.lastIndexOf(\".\"));\n const contentType = CONTENT_TYPES[ext] || \"application/octet-stream\";\n\n // Use import.meta.url to read sibling files\n const fileUrl = new URL(mappedFile, import.meta.url);\n const fileResp = await fetch(fileUrl);\n if (fileResp.ok) {\n const content = await fileResp.text();\n return new Response(content, {\n headers: { \"Content-Type\": contentType },\n });\n }\n }\n\n // Fallback: serve index.html for any unmatched route\n const indexUrl = new URL(\"index.html\", import.meta.url);\n const indexResp = await fetch(indexUrl);\n const indexContent = await indexResp.text();\n return new Response(indexContent, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","export default async function(req: Request): Promise {\n const url = new URL(req.url);\n\n // API endpoint for Gemini-powered enhance\n if (url.pathname === \"/api/enhance\" && req.method === \"POST\") {\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n return new Response(JSON.stringify({ error: \"GEMINI_API_KEY not configured\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const body = await req.json();\n const { imageData, prompt, mode } = body;\n\n const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-pro-image-preview:generateContent?key=${GEMINI_API_KEY}`;\n\n const enhancePrompt = `You are the ESPER machine from the film Blade Runner (1982) — the legendary LAPD photo analysis workstation that can impossibly enhance and resolve detail from photographs far beyond their original resolution.\n\nThis image is a cropped section from a photograph that the operator has zoomed into. Your job is to ENHANCE it — generate a new version of this exact crop with dramatically more detail, as if the ESPER machine is resolving hidden information from the image.\n\nKey behaviors:\n- INVENT plausible, realistic detail that could exist in the scene. If this appears to be a face, resolve skin texture, pores, individual hairs, eye reflections. If an eye, show the reflection of the room or scene in the cornea — this is the ESPER's signature move.\n- If there are reflective surfaces (eyes, glasses, mirrors, windows, polished metal), generate what might be reflected in them — people, rooms, objects, text.\n- Add grain and texture consistent with the scene — fabric weave, wood grain, surface imperfections, dust particles.\n- Maintain the EXACT same composition, framing, color palette, and lighting. This must look like the same image, just with impossibly enhanced resolution.\n- Make it look photorealistic, as if captured by a camera with infinite resolution.\n- The result should feel like that magical Blade Runner moment where Deckard keeps saying \"enhance\" and impossible detail keeps appearing.\n\nReturn only the enhanced image.`;\n\n const outpaintPrompt = `You are the ESPER machine from the film Blade Runner (1982) — the legendary LAPD photo analysis workstation. The operator has zoomed OUT beyond the edges of the original photograph, revealing black empty space around the image.\n\nYour job is to EXPAND the field of view — fill in what exists beyond the edges of the photograph with plausible, realistic content that seamlessly continues the scene.\n\nThe image you receive shows the original photograph surrounded by black areas. Generate a new version where the black areas are filled with a natural continuation of the scene:\n- Study the existing image content carefully: the environment, lighting, perspective, colors, textures, and context.\n- Seamlessly extend the scene outward. If it's an interior, continue the room — walls, furniture, floor, ceiling. If exterior, continue the landscape, sky, buildings, streets.\n- Add realistic detail: people, objects, shadows, reflections that would logically exist just outside the original frame.\n- The transition between original content and generated content must be invisible — no seams, no color shifts, no style changes.\n- Maintain the same photographic quality, grain, and film stock characteristics.\n- Think about what a wider-angle lens would have captured from the same position.\n\nReturn only the expanded image.`;\n\n const selectedPrompt = prompt || (mode === \"outpaint\" ? outpaintPrompt : enhancePrompt);\n\n const geminiBody = {\n contents: [{\n parts: [\n {\n text: selectedPrompt,\n },\n { inlineData: { mimeType: \"image/jpeg\", data: imageData } },\n ],\n }],\n generationConfig: {\n responseModalities: [\"IMAGE\", \"TEXT\"],\n },\n };\n\n const geminiResp = await fetch(geminiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(geminiBody),\n });\n\n if (!geminiResp.ok) {\n const errText = await geminiResp.text();\n console.error(\"Gemini error:\", errText);\n return new Response(JSON.stringify({ error: \"Gemini API error\", details: errText }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const geminiData = await geminiResp.json();\n let enhancedImage = null;\n if (geminiData.candidates?.[0]?.content?.parts) {\n for (const part of geminiData.candidates[0].content.parts) {\n if (part.inlineData) { enhancedImage = part.inlineData.data; break; }\n }\n }\n\n if (!enhancedImage) {\n return new Response(JSON.stringify({ error: \"No image returned from Gemini\", raw: geminiData }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(JSON.stringify({ image: enhancedImage }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(\"Enhance error:\", err);\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // API endpoint for Gemini-powered voice command interpretation\n if (url.pathname === \"/api/interpret\" && req.method === \"POST\") {\n const GEMINI_API_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n if (!GEMINI_API_KEY) {\n return new Response(JSON.stringify({ error: \"GEMINI_API_KEY not configured\" }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const body = await req.json();\n const { transcript } = body;\n\n const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${GEMINI_API_KEY}`;\n\n const systemPrompt = `You are the voice command interpreter for the ESPER machine from Blade Runner — a photo analysis workstation used by the LAPD. The user speaks freeform natural language commands to navigate and analyze a photograph.\n\nYour job is to interpret their speech and return a JSON array of sequential commands to execute. Each command is an object with an \"action\" field and optional parameters.\n\nAvailable actions:\n- { \"action\": \"zoom_in\", \"amount\": 1-5 } — zoom in. amount 1=small, 3=normal, 5=large. Default 1.\n- { \"action\": \"zoom_out\", \"amount\": 1-5 } — zoom out. Default 1.\n- { \"action\": \"pan\", \"direction\": \"left\"|\"right\"|\"up\"|\"down\", \"amount\": 1-5 } — pan the viewport. Default amount 1.\n- { \"action\": \"enhance\" } — AI enhance the current visible region (use when they want more detail, clarity, sharpness, or say \"enhance\")\n- { \"action\": \"reset\" } — reset to original view\n- { \"action\": \"hardcopy\" } — download/print the current image\n- { \"action\": \"hold\" } — stop/freeze/hold position (acknowledge but do nothing)\n- { \"action\": \"noop\", \"message\": \"...\" } — for anything that isn't a command, include a short in-character ESPER system response\n\nRules:\n- A single utterance can map to MULTIPLE commands executed in sequence. E.g. \"pan left and zoom in\" = two commands.\n- If they say something like \"keep going\" or \"more\", repeat the last logical action (zoom or pan). Use zoom_in with amount 1 as default.\n- Interpret creatively but accurately. \"Get closer to that\", \"let me see that better\", \"magnify\" = zoom_in. \"Pull back\", \"show me the whole thing\" = zoom_out or reset. \"What's over there on the right\" = pan right. \"Sharpen that up\", \"can you clean that up\", \"I need more detail\" = enhance. \"Give me a hard copy of that\" = hardcopy.\n- For compound directions like \"up and to the left\" = pan up + pan left.\n- If the amount is implied (\"zoom way in\", \"a little to the left\"), adjust the amount parameter accordingly.\n- Always respond with valid JSON array only. No markdown, no explanation, no code fences.`;\n\n const geminiBody = {\n contents: [{\n parts: [{ text: 'Interpret this voice command for the ESPER machine:\\\\n\\\\n\"' + transcript + '\"' }],\n }],\n systemInstruction: { parts: [{ text: systemPrompt }] },\n generationConfig: { responseMimeType: \"application/json\", temperature: 0.1 },\n };\n\n const geminiResp = await fetch(geminiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(geminiBody),\n });\n\n if (!geminiResp.ok) {\n const errText = await geminiResp.text();\n console.error(\"Gemini interpret error:\", errText);\n return new Response(JSON.stringify({ error: \"Gemini API error\", details: errText }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const geminiData = await geminiResp.json();\n const responseText = geminiData.candidates?.[0]?.content?.parts?.[0]?.text || \"[]\";\n\n let commands;\n try {\n commands = JSON.parse(responseText);\n if (!Array.isArray(commands)) commands = [commands];\n } catch {\n console.error(\"Failed to parse Gemini response:\", responseText);\n commands = [{ action: \"noop\", message: \"COMMAND INTERPRETATION FAILED\" }];\n }\n\n return new Response(JSON.stringify({ commands }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(\"Interpret error:\", err);\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500, headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Serve static files\n const CONTENT_TYPES: Record = {\n \".html\": \"text/html\",\n \".css\": \"text/css\",\n \".js\": \"application/javascript\",\n };\n\n // Map paths to files\n let filePath = url.pathname;\n if (filePath === \"/\" || filePath === \"\") {\n filePath = \"/index.html\";\n }\n\n const fileMap: Record = {\n \"/index.html\": \"index.html\",\n \"/styles.css\": \"styles.css\",\n \"/app.js\": \"app.js\",\n };\n\n const mappedFile = fileMap[filePath];\n if (mappedFile) {\n const ext = filePath.substring(filePath.lastIndexOf(\".\"));\n const contentType = CONTENT_TYPES[ext] || \"application/octet-stream\";\n\n // Use import.meta.url to read sibling files\n const fileUrl = new URL(mappedFile, import.meta.url);\n const fileResp = await fetch(fileUrl);\n if (fileResp.ok) {\n const content = await fileResp.text();\n return new Response(content, {\n headers: { \"Content-Type\": contentType },\n });\n }\n }\n\n // Fallback: serve index.html for any unmatched route\n const indexUrl = new URL(\"index.html\", import.meta.url);\n const indexResp = await fetch(indexUrl);\n const indexContent = await indexResp.text();\n return new Response(indexContent, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","createdAt",["D",1771799254640],"branchVersion","branchId","526d3fa8-1037-11f1-8177-42dde27851f2","id","526d07ea-1037-11f1-8177-42dde27851f2","esper",["D",1771796521729],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","25f41957-737e-448b-bae4-dec9937eed5b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","f5d3fee2-e1c2-4f2b-b60d-716ec388aac8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_19":60,"_105":106,"_107":31},"branch",{"_13":89,"_38":90,"_49":48,"_91":50,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":51,"_98":99},"isOwned",65,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","paulkinlan","handle","displayName","Paul Kinlan","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yWG9oT0R2UTMxam83NXp1d0RRaGJYVTY0aFYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":194,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":-5,"_59":-5,"_19":60,"_61":-5,"_62":31,"_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":195,"_84":196,"_86":197,"_88":31},"tree",[177,178,179,180],"files",[177,178,179,180],"counts",{"_166":143,"_167":66,"_168":66,"_169":170,"_171":172},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_49":158,"_38":159,"_36":160,"_139":-5,"_47":48,"_46":161,"_141":31,"_44":162,"_13":163,"_39":26,"_41":164,"_30":31,"_145":-5,"_33":165},{"_49":151,"_38":152,"_36":153,"_139":-5,"_47":48,"_46":154,"_141":31,"_44":155,"_13":143,"_39":26,"_41":156,"_30":31,"_145":-5,"_33":157},{"_49":147,"_38":34,"_36":37,"_139":-5,"_47":48,"_46":14,"_141":31,"_44":148,"_13":149,"_39":40,"_41":43,"_30":31,"_145":51,"_33":150},{"_49":136,"_38":137,"_36":138,"_139":-5,"_47":48,"_46":140,"_141":31,"_44":142,"_13":143,"_39":26,"_41":144,"_30":31,"_145":-5,"_33":146},"56cba94a-103c-11f1-bf56-42dde27851f2","styles.css","56cbaa58-103c-11f1-bf56-42dde27851f2","parentId",37,"latest",["D",1771798676537],0,"@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n background: #0a0a0f;\n color: #ff6600;\n font-family: 'Share Tech Mono', monospace;\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n}\n\nbody::after {\n content: '';\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);\n pointer-events: none;\n z-index: 9999;\n}\n\nbody::before {\n content: '';\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);\n pointer-events: none;\n z-index: 9998;\n}\n\n#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; }\n\n#top-bar {\n display: flex; justify-content: space-between; align-items: center;\n padding: 8px 16px;\n background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);\n border-bottom: 1px solid #333;\n flex-shrink: 0;\n}\n\n#top-bar h1 {\n font-family: 'Orbitron', sans-serif; font-size: 18px; color: #ff8800;\n text-shadow: 0 0 10px rgba(255,136,0,0.5); letter-spacing: 6px;\n}\n#top-bar .subtitle { font-size: 10px; color: #666; letter-spacing: 3px; }\n.controls { display: flex; gap: 8px; align-items: center; }\n\nbutton {\n font-family: 'Share Tech Mono', monospace; background: #1a1a2e; color: #ff6600;\n border: 1px solid #ff6600; padding: 6px 14px; cursor: pointer;\n font-size: 12px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s;\n}\nbutton:hover { background: #ff6600; color: #0a0a0f; }\nbutton:disabled { opacity: 0.4; cursor: not-allowed; }\nbutton.active { background: #ff6600; color: #0a0a0f; box-shadow: 0 0 10px rgba(255,102,0,0.5); }\n\n#viewport-container {\n flex: 1; position: relative; overflow: hidden; background: #050508;\n display: flex; align-items: center; justify-content: center;\n}\n#viewport { position: absolute; cursor: grab; }\n#viewport:active { cursor: grabbing; }\n#viewport img { display: block; image-rendering: auto; }\n\n#grid-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }\n.grid-line-h, .grid-line-v { position: absolute; background: rgba(255,102,0,0.08); }\n.grid-line-h { height: 1px; width: 100%; }\n.grid-line-v { width: 1px; height: 100%; }\n\n#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; z-index: 20; }\n#crosshair .h-line, #crosshair .v-line { position: absolute; background: rgba(255,102,0,0.3); }\n#crosshair .h-line { width: 60px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }\n#crosshair .v-line { width: 1px; height: 60px; top: 50%; left: 50%; transform: translate(-50%,-50%); }\n#crosshair .corner { position: absolute; width: 12px; height: 12px; border-color: #ff6600; border-style: solid; }\n#crosshair .corner.tl { top: -6px; left: -6px; border-width: 1px 0 0 1px; }\n#crosshair .corner.tr { top: -6px; right: -6px; border-width: 1px 1px 0 0; }\n#crosshair .corner.bl { bottom: -6px; left: -6px; border-width: 0 0 1px 1px; }\n#crosshair .corner.br { bottom: -6px; right: -6px; border-width: 0 1px 1px 0; }\n\n#hud {\n display: flex; justify-content: space-between; align-items: center;\n padding: 8px 16px;\n background: linear-gradient(0deg, #1a1a2e 0%, #0f0f1a 100%);\n border-top: 1px solid #333; flex-shrink: 0; font-size: 11px; gap: 16px;\n}\n#hud .hud-section { display: flex; gap: 16px; align-items: center; }\n.hud-label { color: #555; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; }\n.hud-value { color: #ff8800; font-size: 13px; }\n\n#voice-indicator { display: flex; align-items: center; gap: 6px; }\n#voice-dot { width: 8px; height: 8px; border-radius: 50%; background: #333; transition: background 0.2s; }\n#voice-dot.listening { background: #ff0000; box-shadow: 0 0 8px rgba(255,0,0,0.6); animation: pulse 1s infinite; }\n@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }\n\n#command-log { position: absolute; bottom: 16px; left: 16px; z-index: 30; max-width: 450px; transition: bottom 0.3s ease-out; }\n#voice-overlay.active ~ #command-log { bottom: 110px; }\n.command-entry { padding: 4px 8px; margin-bottom: 2px; font-size: 12px; animation: fadeIn 0.3s ease-out; }\n.command-entry.voice { color: #00ff88; }\n.command-entry.system { color: #ff6600; }\n.command-entry.error { color: #ff3333; }\n@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n#upload-overlay {\n position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n background: rgba(10,10,15,0.95); z-index: 50; gap: 16px;\n}\n#upload-overlay.hidden { display: none; }\n#upload-overlay .upload-icon { font-size: 48px; color: #ff6600; opacity: 0.6; }\n#upload-overlay p { color: #888; font-size: 14px; letter-spacing: 2px; }\n#upload-overlay input[type=\"file\"] { display: none; }\n\n.enhancing #viewport img { animation: enhanceGlow 1.5s ease-in-out; }\n@keyframes enhanceGlow {\n 0% { filter: brightness(1) contrast(1); }\n 30% { filter: brightness(1.3) contrast(1.2) saturate(0.5); }\n 60% { filter: brightness(0.8) contrast(1.5) saturate(1.5); }\n 100% { filter: brightness(1) contrast(1); }\n}\n\n#processing { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 40; display: none; flex-direction: column; align-items: center; gap: 12px; }\n#processing.active { display: flex; }\n#processing .spinner { width: 40px; height: 40px; border: 2px solid #333; border-top-color: #ff6600; border-radius: 50%; animation: spin 0.8s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n#processing .label { color: #ff6600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }\n\n#viewport-container.drag-over { outline: 2px solid #ff6600; outline-offset: -2px; }\n\n/* Voice overlay */\n#voice-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 35; pointer-events: none; transform: translateY(100%); transition: transform 0.3s ease-out; }\n#voice-overlay.active { transform: translateY(0); }\n#voice-overlay-inner { background: linear-gradient(0deg, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.8) 70%, transparent 100%); padding: 24px 20px 12px 20px; }\n\n#voice-waveform { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 24px; margin-bottom: 10px; opacity: 0.4; transition: opacity 0.2s; }\n#voice-overlay.speaking #voice-waveform { opacity: 1; }\n.wave-bar { width: 3px; background: #ff6600; border-radius: 1px; height: 4px; transition: height 0.05s ease-out; }\n\n#voice-live-transcript { text-align: center; font-size: 16px; color: #00ff88; min-height: 24px; letter-spacing: 1px; text-shadow: 0 0 8px rgba(0,255,136,0.4); }\n#voice-live-transcript.interim { color: #00ff8866; font-style: italic; }\n#voice-live-transcript.final { color: #00ff88; font-style: normal; }\n\n#voice-state-label { text-align: center; font-size: 9px; color: #555; letter-spacing: 3px; text-transform: uppercase; margin-top: 6px; }\n#voice-state-label.processing { color: #ff8800; animation: blink 0.6s steps(1) infinite; }\n@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n\n#mic-selector-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; pointer-events: auto; }\n#mic-selector-row label { font-size: 9px; color: #555; letter-spacing: 2px; text-transform: uppercase; }\n#mic-select { font-family: 'Share Tech Mono', monospace; font-size: 11px; background: #0a0a0f; color: #ff8800; border: 1px solid #333; padding: 3px 8px; max-width: 320px; cursor: pointer; outline: none; }\n#mic-select:focus { border-color: #ff6600; }\n#mic-select option { background: #0a0a0f; color: #ff8800; }","label",[137],"af5fe1d8-103d-11f1-a140-42dde27851f2",["D",1771799254640],38,[34],"9925d7ca-103c-11f1-b3ac-42dde27851f2","index.html","9925d892-103c-11f1-b3ac-42dde27851f2",39,["D",1771798787859],"\n\n\n\n\nESPER — Photo Analysis Machine\n\n\n\n

ESPER

PHOTO ANALYSIS — LAPD ISSUE

\n \n \n \n \n

\n\n

◎

LOAD PHOTOGRAPH FOR ANALYSIS

\n \n

or drag & drop

\n \n

\n\n

Enhancing...

\n\n

—

VOICE INACTIVE

\n MIC:\n \n —\n

\n\n

Zoom

1.00x

Position

0, 0

Sector

—

\n VOICE OFF\n

Transcript

—

\n\n\n\n",[152],"9cca31fe-103d-11f1-ab2c-42dde27851f2","app.js","9095a6a8-103c-11f1-b2c5-42dde27851f2",47,["D",1771799223459],6,"// ===== STATE =====\nconst state = {\n imageLoaded: false, zoom: 1, panX: 0, panY: 0,\n imageWidth: 0, imageHeight: 0,\n listening: false, recognition: null,\n isDragging: false, dragStartX: 0, dragStartY: 0, panStartX: 0, panStartY: 0,\n animating: false, enhancing: false,\n};\n\nconst MIN_ZOOM = 0.1, MAX_ZOOM = 200, ZOOM_STEP = 1.4, PAN_STEP_FACTOR = 0.15;\nconst $ = (s) => document.querySelector(s);\nconst viewport = $('#viewport'), mainImage = $('#main-image');\nconst container = $('#viewport-container'), uploadOverlay = $('#upload-overlay');\nconst fileInput = $('#file-input'), commandLog = $('#command-log'), processing = $('#processing');\nconst voiceOverlay = $('#voice-overlay'), voiceLiveTranscript = $('#voice-live-transcript');\nconst voiceStateLabel = $('#voice-state-label'), micSelect = $('#mic-select');\nconst micLevelEl = $('#mic-level'), waveBars = document.querySelectorAll('.wave-bar');\n\nfunction sleep(ms) { return new Promise(r => setTimeout(r, ms)); }\n\n// ===== IMAGE LOADING =====\nfunction loadImage(src) {\n return new Promise((resolve) => {\n mainImage.onload = () => {\n state.imageWidth = mainImage.naturalWidth;\n state.imageHeight = mainImage.naturalHeight;\n state.imageLoaded = true; state.zoom = 1; state.panX = 0; state.panY = 0;\n uploadOverlay.classList.add('hidden');\n $('#btn-enhance').disabled = false; $('#btn-reset').disabled = false;\n updateTransform(); updateHUD();\n logCommand('system', 'PHOTOGRAPH LOADED — ' + state.imageWidth + 'x' + state.imageHeight);\n resolve();\n };\n mainImage.src = src;\n });\n}\n\n$('#btn-upload').onclick = () => fileInput.click();\n$('#btn-upload-inner').onclick = () => fileInput.click();\nfileInput.onchange = (e) => {\n const file = e.target.files[0]; if (!file) return;\n const reader = new FileReader();\n reader.onload = (ev) => loadImage(ev.target.result);\n reader.readAsDataURL(file);\n};\n\ncontainer.ondragover = (e) => { e.preventDefault(); container.classList.add('drag-over'); };\ncontainer.ondragleave = () => container.classList.remove('drag-over');\ncontainer.ondrop = (e) => {\n e.preventDefault(); container.classList.remove('drag-over');\n const file = e.dataTransfer.files[0];\n if (file && file.type.startsWith('image/')) {\n const reader = new FileReader();\n reader.onload = (ev) => loadImage(ev.target.result);\n reader.readAsDataURL(file);\n }\n};\n\n// ===== VIEWPORT TRANSFORM =====\nfunction updateTransform() {\n const cw = container.clientWidth, ch = container.clientHeight;\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n const displayW = state.imageWidth * fitScale * state.zoom;\n const displayH = state.imageHeight * fitScale * state.zoom;\n mainImage.style.width = displayW + 'px'; mainImage.style.height = displayH + 'px';\n viewport.style.left = ((cw - displayW) / 2 + state.panX) + 'px';\n viewport.style.top = ((ch - displayH) / 2 + state.panY) + 'px';\n}\n\nfunction updateHUD() {\n $('#hud-zoom').textContent = state.zoom.toFixed(2) + 'x';\n $('#hud-pos').textContent = Math.round(state.panX) + ', ' + Math.round(state.panY);\n const cols = 'ABCDEFGHIJ';\n const fitScale = Math.min(container.clientWidth / state.imageWidth, container.clientHeight / state.imageHeight);\n const imgDispW = state.imageWidth * fitScale * state.zoom;\n const imgDispH = state.imageHeight * fitScale * state.zoom;\n const imgLeft = (container.clientWidth - imgDispW) / 2;\n const imgTop = (container.clientHeight - imgDispH) / 2;\n const relX = ((container.clientWidth / 2 - state.panX) - imgLeft) / imgDispW;\n const relY = ((container.clientHeight / 2 - state.panY) - imgTop) / imgDispH;\n const col = Math.max(0, Math.min(9, Math.floor(relX * 10)));\n const row = Math.max(0, Math.min(9, Math.floor(relY * 10)));\n $('#hud-sector').textContent = (state.imageLoaded ? cols[col] + '-' + (row + 1) : '—');\n}\n\n// ===== PAN & ZOOM =====\nfunction animateTo(props, duration = 400) {\n if (state.animating) return;\n state.animating = true;\n const start = { zoom: state.zoom, panX: state.panX, panY: state.panY };\n const target = { ...start, ...props };\n const startTime = performance.now();\n function frame(now) {\n const t = Math.min(1, (now - startTime) / duration);\n const ease = t < 0.5 ? 2*t*t : -1 + (4-2*t)*t;\n state.zoom = start.zoom + (target.zoom - start.zoom) * ease;\n state.panX = start.panX + (target.panX - start.panX) * ease;\n state.panY = start.panY + (target.panY - start.panY) * ease;\n updateTransform(); updateHUD();\n if (t < 1) requestAnimationFrame(frame); else state.animating = false;\n }\n requestAnimationFrame(frame);\n}\n\nfunction zoomIn(amount = 1) {\n if (!state.imageLoaded) return;\n let z = state.zoom;\n for (let i = 0; i < amount; i++) z *= ZOOM_STEP;\n z = Math.min(MAX_ZOOM, z);\n animateTo({ zoom: z });\n logCommand('system', 'ZOOM IN — ' + z.toFixed(2) + 'x');\n}\nfunction zoomOut(amount = 1) {\n if (!state.imageLoaded) return;\n let z = state.zoom;\n for (let i = 0; i < amount; i++) z /= ZOOM_STEP;\n z = Math.max(MIN_ZOOM, z);\n animateTo({ zoom: z });\n logCommand('system', 'ZOOM OUT — ' + z.toFixed(2) + 'x');\n}\nfunction panDirection(dir, amount = 1) {\n if (!state.imageLoaded) return;\n const step = Math.max(container.clientWidth, container.clientHeight) * PAN_STEP_FACTOR * amount;\n const moves = { left: [step,0], right: [-step,0], up: [0,step], down: [0,-step] };\n const [dx,dy] = moves[dir] || [0,0];\n animateTo({ panX: state.panX + dx, panY: state.panY + dy });\n logCommand('system', 'PAN ' + dir.toUpperCase() + (amount > 1 ? ' x' + amount : ''));\n}\nfunction resetView() { if (!state.imageLoaded) return; animateTo({ zoom: 1, panX: 0, panY: 0 }, 600); logCommand('system', 'VIEW RESET'); }\n\n// ===== SECTOR NAVIGATION =====\n// Sectors are a 10x10 grid: columns A-J, rows 1-10\n// e.g., \"A-1\" is top-left, \"J-10\" is bottom-right, \"E-5\" is center\nfunction parseSector(sectorStr) {\n const match = sectorStr.toUpperCase().match(/^([A-J])-?(\\d{1,2})$/);\n if (!match) return null;\n const col = match[1].charCodeAt(0) - 65; // 0-9\n const row = parseInt(match[2]) - 1; // 0-9\n if (row < 0 || row > 9) return null;\n return { col, row };\n}\n\nfunction moveToSector(sectorStr, zoomLevel) {\n if (!state.imageLoaded) return;\n const sector = parseSector(sectorStr);\n if (!sector) {\n logCommand('error', 'INVALID SECTOR: ' + sectorStr);\n return;\n }\n const cw = container.clientWidth, ch = container.clientHeight;\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n\n // Target zoom: if specified use it, otherwise zoom to show roughly that sector cell\n const targetZoom = zoomLevel || Math.max(2, state.zoom);\n\n // Center of the sector cell in image coordinates (0-1 normalized)\n const cellCenterX = (sector.col + 0.5) / 10;\n const cellCenterY = (sector.row + 0.5) / 10;\n\n // Convert to pixel offset: we need panX/panY such that this point is centered on screen\n // Image center on screen (with no pan) is at (cw/2, ch/2)\n // The point in the displayed image is at: imgLeft + cellCenterX * imgDispW\n // imgLeft = (cw - imgDispW) / 2, imgDispW = imageWidth * fitScale * zoom\n // We want: imgLeft + cellCenterX * imgDispW + panX = cw/2\n // panX = cw/2 - imgLeft - cellCenterX * imgDispW\n // panX = cw/2 - (cw - imgDispW)/2 - cellCenterX * imgDispW\n // panX = imgDispW/2 - cellCenterX * imgDispW\n // panX = imgDispW * (0.5 - cellCenterX)\n const imgDispW = state.imageWidth * fitScale * targetZoom;\n const imgDispH = state.imageHeight * fitScale * targetZoom;\n const panX = imgDispW * (0.5 - cellCenterX);\n const panY = imgDispH * (0.5 - cellCenterY);\n\n animateTo({ zoom: targetZoom, panX, panY }, 800);\n const cols = 'ABCDEFGHIJ';\n logCommand('system', 'MOVING TO SECTOR ' + cols[sector.col] + '-' + (sector.row + 1) + ' — ' + targetZoom.toFixed(1) + 'x');\n}\n\n$('#btn-reset').onclick = resetView;\n\ncontainer.onmousedown = (e) => {\n if (!state.imageLoaded || e.target.tagName === 'BUTTON') return;\n state.isDragging = true; state.dragStartX = e.clientX; state.dragStartY = e.clientY;\n state.panStartX = state.panX; state.panStartY = state.panY;\n};\nwindow.onmousemove = (e) => {\n if (!state.isDragging) return;\n state.panX = state.panStartX + (e.clientX - state.dragStartX);\n state.panY = state.panStartY + (e.clientY - state.dragStartY);\n updateTransform(); updateHUD();\n};\nwindow.onmouseup = () => { state.isDragging = false; };\n\ncontainer.onwheel = (e) => { e.preventDefault(); if (!state.imageLoaded) return; e.deltaY < 0 ? zoomIn() : zoomOut(); };\n\nwindow.onkeydown = (e) => {\n if (!state.imageLoaded) return;\n switch(e.key) {\n case '+': case '=': zoomIn(); break;\n case '-': zoomOut(); break;\n case 'ArrowLeft': panDirection('left'); break;\n case 'ArrowRight': panDirection('right'); break;\n case 'ArrowUp': panDirection('up'); break;\n case 'ArrowDown': panDirection('down'); break;\n case 'r': case 'R': resetView(); break;\n case 'e': case 'E': enhance(); break;\n }\n};\n\n// ===== ENHANCE =====\n// Calculate the visible viewport region and determine if we need outpainting\nfunction getViewportInfo() {\n const cw = container.clientWidth, ch = container.clientHeight;\n const fitScale = Math.min(cw / state.imageWidth, ch / state.imageHeight);\n const scale = fitScale * state.zoom;\n const imgDispW = state.imageWidth * scale, imgDispH = state.imageHeight * scale;\n const imgScreenX = (cw - imgDispW) / 2 + state.panX;\n const imgScreenY = (ch - imgDispH) / 2 + state.panY;\n\n // The full viewport in image-source coordinates (can extend beyond image bounds)\n const viewLeft = -imgScreenX / scale;\n const viewTop = -imgScreenY / scale;\n const viewRight = (cw - imgScreenX) / scale;\n const viewBottom = (ch - imgScreenY) / scale;\n\n // The portion of the image that's actually visible (clamped to image bounds)\n const srcX = Math.max(0, viewLeft);\n const srcY = Math.max(0, viewTop);\n const srcRight = Math.min(state.imageWidth, viewRight);\n const srcBottom = Math.min(state.imageHeight, viewBottom);\n const srcW = Math.max(1, srcRight - srcX);\n const srcH = Math.max(1, srcBottom - srcY);\n\n // Check if the viewport extends beyond the image (need outpainting)\n const needsOutpaint = viewLeft < -1 || viewTop < -1 ||\n viewRight > state.imageWidth + 1 || viewBottom > state.imageHeight + 1;\n\n // How much of the viewport is outside the image (as ratio)\n const viewW = viewRight - viewLeft;\n const viewH = viewBottom - viewTop;\n const imgArea = srcW * srcH;\n const viewArea = viewW * viewH;\n const outpaintRatio = viewArea > 0 ? 1 - (imgArea / viewArea) : 0;\n\n return {\n // Clamped source crop (within image)\n srcX, srcY, srcW, srcH,\n // Full viewport in image coords (may extend beyond)\n viewLeft, viewTop, viewRight, viewBottom, viewW, viewH,\n // Screen info\n imgScreenX, imgScreenY, imgDispW, imgDispH, scale,\n cw, ch,\n // Outpaint info\n needsOutpaint, outpaintRatio,\n };\n}\n\nasync function enhance() {\n if (!state.imageLoaded || state.enhancing) return;\n state.enhancing = true; processing.classList.add('active'); container.classList.add('enhancing');\n const sector = $('#hud-sector').textContent;\n const info = getViewportInfo();\n\n const mode = info.needsOutpaint ? 'outpaint' : 'enhance';\n logCommand('system', (mode === 'outpaint' ? 'EXPANDING FIELD OF VIEW' : 'ENHANCING') +\n ' — SECTOR ' + sector + ' — ' + state.zoom.toFixed(1) + 'x MAGNIFICATION...');\n\n try {\n const canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');\n const maxDim = 1024;\n\n if (mode === 'outpaint') {\n // For outpainting: render the full viewport including empty areas\n // The canvas represents what's on screen — image in the middle, empty around it\n const aspectRatio = info.cw / info.ch;\n if (aspectRatio >= 1) {\n canvas.width = maxDim;\n canvas.height = Math.round(maxDim / aspectRatio);\n } else {\n canvas.height = maxDim;\n canvas.width = Math.round(maxDim * aspectRatio);\n }\n\n // Fill with black (the empty area around the image)\n ctx.fillStyle = '#000';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Draw the image portion at the correct position within the canvas\n // Map image screen position to canvas coordinates\n const scaleToCanvas = canvas.width / info.cw;\n const imgCanvasX = info.imgScreenX * scaleToCanvas;\n const imgCanvasY = info.imgScreenY * scaleToCanvas;\n const imgCanvasW = info.imgDispW * scaleToCanvas;\n const imgCanvasH = info.imgDispH * scaleToCanvas;\n ctx.drawImage(mainImage, imgCanvasX, imgCanvasY, imgCanvasW, imgCanvasH);\n\n console.log('[ESPER Enhance] OUTPAINT mode — viewport extends beyond image by',\n Math.round(info.outpaintRatio * 100) + '%', '| canvas:', canvas.width + 'x' + canvas.height);\n } else {\n // For enhance: crop to visible image area only\n const aspectRatio = info.srcW / info.srcH;\n if (aspectRatio >= 1) {\n canvas.width = Math.min(maxDim, Math.round(info.srcW));\n canvas.height = Math.round(canvas.width / aspectRatio);\n } else {\n canvas.height = Math.min(maxDim, Math.round(info.srcH));\n canvas.width = Math.round(canvas.height * aspectRatio);\n }\n ctx.drawImage(mainImage, info.srcX, info.srcY, info.srcW, info.srcH, 0, 0, canvas.width, canvas.height);\n\n console.log('[ESPER Enhance] ENHANCE mode — crop:', Math.round(info.srcX) + ',' + Math.round(info.srcY),\n Math.round(info.srcW) + 'x' + Math.round(info.srcH), '→ canvas:', canvas.width + 'x' + canvas.height);\n }\n\n const base64 = canvas.toDataURL('image/jpeg', 0.85).split(',')[1];\n\n const resp = await fetch('/api/enhance', {\n method: 'POST', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ imageData: base64, mode }),\n });\n const data = await resp.json();\n if (data.error) { logCommand('error', (mode === 'outpaint' ? 'OUTPAINT' : 'ENHANCE') + ' FAILED: ' + data.error); }\n else if (data.image) {\n const enhancedImg = new Image();\n enhancedImg.onload = () => {\n if (mode === 'outpaint') {\n // For outpainting: expand the image canvas to include the new generated area\n // Calculate the new image bounds (union of original image + viewport)\n const newLeft = Math.min(0, info.viewLeft);\n const newTop = Math.min(0, info.viewTop);\n const newRight = Math.max(state.imageWidth, info.viewRight);\n const newBottom = Math.max(state.imageHeight, info.viewBottom);\n const newW = Math.round(newRight - newLeft);\n const newH = Math.round(newBottom - newTop);\n\n const fc = document.createElement('canvas');\n fc.width = newW; fc.height = newH;\n const fctx = fc.getContext('2d');\n\n // Draw the enhanced/outpainted result filling the entire new canvas\n fctx.drawImage(enhancedImg, 0, 0, newW, newH);\n\n // Draw the original image on top at its correct offset (so we keep existing detail)\n const offsetX = Math.round(-newLeft);\n const offsetY = Math.round(-newTop);\n fctx.drawImage(mainImage, offsetX, offsetY);\n\n // Update image and state\n mainImage.src = fc.toDataURL('image/jpeg', 0.92);\n\n // Adjust pan to account for the image origin shifting\n const originShiftX = newLeft * info.scale;\n const originShiftY = newTop * info.scale;\n state.panX -= originShiftX;\n state.panY -= originShiftY;\n\n // Wait for the new image to load, then update dimensions\n mainImage.onload = () => {\n state.imageWidth = newW;\n state.imageHeight = newH;\n updateTransform(); updateHUD();\n };\n\n logCommand('system', 'FIELD OF VIEW EXPANDED — ' + newW + 'x' + newH);\n } else {\n // For enhance: composite back into the original image\n const fc = document.createElement('canvas'); fc.width = state.imageWidth; fc.height = state.imageHeight;\n const fctx = fc.getContext('2d');\n fctx.drawImage(mainImage, 0, 0);\n fctx.drawImage(enhancedImg, info.srcX, info.srcY, info.srcW, info.srcH);\n mainImage.src = fc.toDataURL('image/jpeg', 0.92);\n logCommand('system', 'ENHANCEMENT COMPLETE — SECTOR ' + sector);\n }\n };\n enhancedImg.src = 'data:image/png;base64,' + data.image;\n }\n } catch (err) { logCommand('error', 'ENHANCE ERROR: ' + err.message); }\n finally { state.enhancing = false; processing.classList.remove('active'); setTimeout(() => container.classList.remove('enhancing'), 1500); }\n}\n\n$('#btn-enhance').onclick = enhance;\n\n// ===== VOICE CONTROL =====\n// Audio monitoring (getUserMedia) — for visual level feedback AND to feed SpeechRecognition\nlet micStream = null;\nlet micTrack = null; // The MediaStreamTrack to pass to recognition.start()\nlet audioCtx = null;\nlet analyser = null;\nlet levelRAF = null;\n\nfunction setVoiceState(s) {\n console.log('[ESPER Voice] State:', s);\n voiceOverlay.classList.remove('speaking');\n voiceStateLabel.classList.remove('processing');\n switch(s) {\n case 'inactive':\n voiceOverlay.classList.remove('active');\n voiceStateLabel.textContent = 'VOICE INACTIVE';\n voiceLiveTranscript.textContent = '—'; voiceLiveTranscript.className = '';\n break;\n case 'listening':\n voiceOverlay.classList.add('active');\n voiceStateLabel.textContent = 'LISTENING — SPEAK A COMMAND';\n break;\n case 'speaking':\n voiceOverlay.classList.add('active', 'speaking');\n voiceStateLabel.textContent = 'RECEIVING AUDIO';\n break;\n case 'processing':\n voiceOverlay.classList.add('active'); voiceOverlay.classList.remove('speaking');\n voiceStateLabel.textContent = 'INTERPRETING COMMAND...';\n voiceStateLabel.classList.add('processing');\n break;\n }\n}\n\n// Enumerate mics (needs permission first)\nasync function enumerateMics() {\n try {\n const tempStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n tempStream.getTracks().forEach(t => t.stop());\n const devices = await navigator.mediaDevices.enumerateDevices();\n const inputs = devices.filter(d => d.kind === 'audioinput');\n console.log('[ESPER Mic] Found', inputs.length, 'devices');\n micSelect.innerHTML = '';\n inputs.forEach((d, i) => {\n const opt = document.createElement('option');\n opt.value = d.deviceId;\n opt.textContent = d.label || ('Microphone ' + (i + 1));\n micSelect.appendChild(opt);\n });\n const saved = localStorage.getItem('esper-mic-id');\n if (saved) micSelect.value = saved;\n } catch (err) {\n console.error('[ESPER Mic] Enumerate failed:', err);\n logCommand('error', 'MIC ACCESS DENIED');\n }\n}\n\n// Start audio level monitoring (visual only)\nasync function startLevelMonitor() {\n stopLevelMonitor();\n const deviceId = micSelect.value;\n const constraints = deviceId ? { audio: { deviceId: { exact: deviceId } } } : { audio: true };\n try {\n micStream = await navigator.mediaDevices.getUserMedia(constraints);\n micTrack = micStream.getAudioTracks()[0];\n console.log('[ESPER Mic] Acquired track:', micTrack.label, '| id:', micTrack.id);\n logCommand('system', 'MIC: ' + (micTrack.label || 'Default'));\n localStorage.setItem('esper-mic-id', micSelect.value);\n\n audioCtx = new AudioContext();\n const source = audioCtx.createMediaStreamSource(new MediaStream([micTrack]));\n analyser = audioCtx.createAnalyser();\n analyser.fftSize = 256; analyser.smoothingTimeConstant = 0.6;\n source.connect(analyser);\n\n const bufLen = analyser.frequencyBinCount;\n const data = new Uint8Array(bufLen);\n const numBars = waveBars.length;\n let peak = 0;\n\n function tick() {\n levelRAF = requestAnimationFrame(tick);\n analyser.getByteFrequencyData(data);\n const bandSize = Math.floor(bufLen / numBars);\n let maxLvl = 0;\n for (let i = 0; i < numBars; i++) {\n let sum = 0;\n for (let j = 0; j < bandSize; j++) sum += data[i * bandSize + j];\n const avg = sum / bandSize;\n if (avg > maxLvl) maxLvl = avg;\n waveBars[i].style.height = Math.max(3, (avg / 255) * 24) + 'px';\n }\n peak = peak * 0.9 + maxLvl * 0.1;\n if (peak > 2) { micLevelEl.style.color = peak > 100 ? '#00ff88' : '#ff8800'; micLevelEl.textContent = Math.round(peak); }\n else { micLevelEl.style.color = '#ff3333'; micLevelEl.textContent = 'SILENT'; }\n }\n tick();\n } catch(err) { console.error('[ESPER Mic] Monitor failed:', err); }\n}\n\nfunction stopLevelMonitor() {\n if (levelRAF) { cancelAnimationFrame(levelRAF); levelRAF = null; }\n if (micStream) { micStream.getTracks().forEach(t => t.stop()); micStream = null; }\n micTrack = null;\n if (audioCtx) { try { audioCtx.close(); } catch(e) {} audioCtx = null; analyser = null; }\n waveBars.forEach(b => { b.style.height = '4px'; });\n micLevelEl.textContent = '—'; micLevelEl.style.color = '#555';\n}\n\n// SpeechRecognition — completely independent from getUserMedia\nfunction initRecognition() {\n const SR = window.SpeechRecognition || window.webkitSpeechRecognition;\n if (!SR) { logCommand('error', 'SPEECH RECOGNITION NOT AVAILABLE'); return; }\n\n console.log('[ESPER Voice] Creating SpeechRecognition');\n const rec = new SR();\n rec.continuous = true;\n rec.interimResults = true;\n rec.lang = 'en-US';\n state.recognition = rec;\n\n rec.onstart = () => { console.log('[ESPER Voice] onstart'); setVoiceState('listening'); };\n rec.onaudiostart = () => { console.log('[ESPER Voice] onaudiostart'); };\n rec.onspeechstart = () => { console.log('[ESPER Voice] onspeechstart'); setVoiceState('speaking'); };\n rec.onspeechend = () => { console.log('[ESPER Voice] onspeechend'); if (state.listening) setVoiceState('listening'); };\n\n rec.onresult = (event) => {\n let finalText = '', interim = '';\n for (let i = event.resultIndex; i < event.results.length; i++) {\n const t = event.results[i][0].transcript.trim();\n const c = event.results[i][0].confidence;\n if (event.results[i].isFinal) {\n finalText = t;\n console.log('[ESPER Voice] FINAL:', t, '(' + (c*100).toFixed(1) + '%)');\n } else {\n interim = t;\n }\n }\n if (interim) {\n voiceLiveTranscript.textContent = interim;\n voiceLiveTranscript.className = 'interim';\n $('#hud-transcript').textContent = interim;\n setVoiceState('speaking');\n }\n if (finalText) {\n voiceLiveTranscript.textContent = '\"' + finalText + '\"';\n voiceLiveTranscript.className = 'final';\n $('#hud-transcript').textContent = finalText;\n logCommand('voice', '▶ ' + finalText);\n processVoiceCommand(finalText);\n }\n };\n\n rec.onerror = (event) => {\n console.warn('[ESPER Voice] onerror:', event.error);\n // no-speech is normal — Chrome fires it after ~5s silence. We just restart.\n if (event.error === 'no-speech' || event.error === 'aborted') return;\n logCommand('error', 'VOICE ERROR: ' + event.error);\n };\n\n rec.onend = () => {\n console.log('[ESPER Voice] onend — listening:', state.listening);\n if (state.listening) {\n // Auto-restart: Chrome stops after no-speech or after getting a result\n // Pass the micTrack again so it keeps using the selected device\n setVoiceState('listening');\n setTimeout(() => {\n if (state.listening && state.recognition) {\n try {\n if (micTrack && micTrack.readyState === 'live') {\n state.recognition.start(micTrack);\n } else {\n state.recognition.start();\n }\n console.log('[ESPER Voice] Restarted');\n }\n catch(e) {\n console.warn('[ESPER Voice] Restart failed, retrying...', e.message);\n setTimeout(() => {\n if (state.listening) try {\n if (micTrack && micTrack.readyState === 'live') state.recognition.start(micTrack);\n else state.recognition.start();\n } catch(e2) {}\n }, 500);\n }\n }\n }, 200);\n } else {\n setVoiceState('inactive');\n }\n };\n}\n\n// Mic select change\nmicSelect.onchange = async () => {\n console.log('[ESPER Mic] Selected:', micSelect.options[micSelect.selectedIndex].textContent);\n localStorage.setItem('esper-mic-id', micSelect.value);\n if (state.listening) {\n logCommand('system', 'SWITCHING MICROPHONE...');\n // Stop recognition, get new mic track, restart with it\n if (state.recognition) try { state.recognition.stop(); } catch(e) {}\n state.listening = false;\n await sleep(200);\n await startLevelMonitor(); // acquires new micTrack\n state.listening = true;\n try {\n if (micTrack) state.recognition.start(micTrack);\n else state.recognition.start();\n console.log('[ESPER Voice] Restarted with new mic');\n } catch(e) { console.error('[ESPER Voice] Restart with new mic failed:', e); }\n }\n};\n\nif (navigator.mediaDevices?.addEventListener) {\n navigator.mediaDevices.addEventListener('devicechange', () => { console.log('[ESPER Mic] Device change'); enumerateMics(); });\n}\n\n// Toggle voice on/off\nasync function toggleVoice() {\n if (state.listening) {\n // STOP\n state.listening = false;\n if (state.recognition) try { state.recognition.stop(); } catch(e) {}\n stopLevelMonitor();\n $('#voice-dot').classList.remove('listening');\n $('#voice-status').textContent = 'VOICE OFF';\n $('#btn-voice').classList.remove('active');\n setVoiceState('inactive');\n logCommand('system', 'VOICE CONTROL DEACTIVATED');\n } else {\n // START\n if (!state.recognition) initRecognition();\n if (!state.recognition) return;\n\n // Enumerate mics on first use\n if (micSelect.options.length <= 1) await enumerateMics();\n\n // Start audio level monitor (visual only)\n await startLevelMonitor();\n\n // Start speech recognition — pass the mic track so Chrome uses the right device\n state.listening = true;\n try {\n if (micTrack) {\n console.log('[ESPER Voice] Starting recognition with track:', micTrack.label);\n state.recognition.start(micTrack);\n } else {\n console.log('[ESPER Voice] Starting recognition with default mic');\n state.recognition.start();\n }\n } catch(e) {\n console.error('[ESPER Voice] Start failed:', e);\n logCommand('error', 'VOICE START FAILED: ' + e.message);\n state.listening = false; stopLevelMonitor(); return;\n }\n\n $('#voice-dot').classList.add('listening');\n $('#voice-status').textContent = 'LISTENING';\n $('#btn-voice').classList.add('active');\n logCommand('system', 'VOICE CONTROL ACTIVATED — AWAITING COMMANDS');\n console.log('[ESPER Voice] Activated');\n }\n}\n\n$('#btn-voice').onclick = toggleVoice;\n\n// ===== VOICE COMMAND PROCESSING =====\nasync function processVoiceCommand(text) {\n setVoiceState('processing');\n console.log('[ESPER Voice] → Gemini:', text);\n try {\n const resp = await fetch('/api/interpret', {\n method: 'POST', headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ transcript: text }),\n });\n const data = await resp.json();\n console.log('[ESPER Voice] ← Gemini:', JSON.stringify(data));\n if (data.error) {\n logCommand('error', 'INTERPRET FAILED: ' + data.error);\n setVoiceState(state.listening ? 'listening' : 'inactive'); return;\n }\n const commands = data.commands || [];\n if (commands.length === 0) {\n logCommand('system', 'NO ACTIONABLE COMMAND');\n setVoiceState(state.listening ? 'listening' : 'inactive'); return;\n }\n const summary = commands.map(c => {\n if (c.action === 'pan') return 'PAN ' + (c.direction||'').toUpperCase() + (c.amount > 1 ? ' x'+c.amount : '');\n if (c.action === 'zoom_in') return 'ZOOM IN' + (c.amount > 1 ? ' x'+c.amount : '');\n if (c.action === 'zoom_out') return 'ZOOM OUT' + (c.amount > 1 ? ' x'+c.amount : '');\n if (c.action === 'move_to_sector') return 'MOVE → SECTOR ' + (c.sector||'').toUpperCase();\n if (c.action === 'zoom_sector') return 'ZOOM → SECTOR ' + (c.sector||'').toUpperCase() + (c.zoom ? ' @' + c.zoom + 'x' : '');\n if (c.action === 'noop') return c.message || 'OK';\n return c.action.toUpperCase();\n }).join(' → ');\n voiceLiveTranscript.textContent = '⚡ ' + summary;\n voiceLiveTranscript.className = 'final';\n logCommand('system', '⚡ ' + summary);\n\n for (let i = 0; i < commands.length; i++) {\n if (i > 0) await sleep(300);\n await executeCommand(commands[i]);\n }\n await sleep(500);\n setVoiceState(state.listening ? 'listening' : 'inactive');\n } catch (err) {\n logCommand('error', 'ERROR: ' + err.message);\n setVoiceState(state.listening ? 'listening' : 'inactive');\n }\n}\n\nasync function executeCommand(cmd) {\n const amt = cmd.amount || 1;\n switch (cmd.action) {\n case 'zoom_in': zoomIn(amt); break;\n case 'zoom_out': zoomOut(amt); break;\n case 'pan': if (cmd.direction) panDirection(cmd.direction, amt); break;\n case 'enhance': await enhance(); break;\n case 'move_to_sector':\n if (cmd.sector) moveToSector(cmd.sector, cmd.zoom);\n break;\n case 'zoom_sector':\n // Move to sector and zoom in\n if (cmd.sector) moveToSector(cmd.sector, cmd.zoom || 5);\n break;\n case 'reset': resetView(); break;\n case 'hardcopy':\n logCommand('system', 'HARDCOPY OUTPUT INITIATED');\n const a = document.createElement('a'); a.href = mainImage.src; a.download = 'esper-output.jpg'; a.click();\n break;\n case 'hold': logCommand('system', 'HOLDING POSITION'); break;\n case 'noop': if (cmd.message) logCommand('system', cmd.message); break;\n default: logCommand('system', 'UNKNOWN: ' + cmd.action);\n }\n}\n\n// ===== COMMAND LOG =====\nfunction logCommand(type, text) {\n const entry = document.createElement('div');\n entry.className = 'command-entry ' + type;\n entry.textContent = '[' + new Date().toLocaleTimeString('en-US', { hour12: false }) + '] ' + text;\n commandLog.appendChild(entry);\n while (commandLog.children.length > 8) commandLog.removeChild(commandLog.firstChild);\n setTimeout(() => {\n if (entry.parentNode) { entry.style.transition = 'opacity 2s'; entry.style.opacity = '0'; setTimeout(() => entry.remove(), 2000); }\n }, 8000);\n}\n\n// ===== GRID =====\nfunction drawGrid() {\n const ov = $('#grid-overlay'); ov.innerHTML = '';\n const cw = container.clientWidth, ch = container.clientHeight, sp = 80;\n for (let y = sp; y < ch; y += sp) { const l = document.createElement('div'); l.className = 'grid-line-h'; l.style.top = y+'px'; ov.appendChild(l); }\n for (let x = sp; x < cw; x += sp) { const l = document.createElement('div'); l.className = 'grid-line-v'; l.style.left = x+'px'; ov.appendChild(l); }\n}\n\n// ===== INIT =====\nwindow.onresize = () => { drawGrid(); if (state.imageLoaded) { updateTransform(); updateHUD(); } };\ndrawGrid();\nlogCommand('system', 'ESPER MACHINE ONLINE');\nlogCommand('system', 'LAPD FILE ACCESS — AUTHENTICATED');\nlogCommand('system', 'AWAITING PHOTOGRAPH INPUT...');",[159],"pulls","branches","forks","envVars",{"_173":175,"_176":143},"connections",{"_173":143,"_174":143},"count","unfilledCount",2,"emptyCount",{"_49":158,"_38":159,"_36":160,"_139":-5,"_47":48,"_46":161,"_141":31,"_44":191,"_13":163,"_39":26,"_41":164,"_30":31,"_145":-5,"_182":192,"_33":193},{"_49":151,"_38":152,"_36":153,"_139":-5,"_47":48,"_46":154,"_141":31,"_44":188,"_13":143,"_39":26,"_41":156,"_30":31,"_145":-5,"_182":189,"_33":190},{"_49":147,"_38":34,"_36":37,"_139":-5,"_47":48,"_46":14,"_141":31,"_44":185,"_13":149,"_39":40,"_41":43,"_30":31,"_145":51,"_182":186,"_33":187},{"_49":136,"_38":137,"_36":138,"_139":-5,"_47":48,"_46":140,"_141":31,"_44":181,"_13":143,"_39":26,"_41":144,"_30":31,"_145":-5,"_182":183,"_33":184},["D",1771798676537],"children",[],[137],["D",1771799254640],[],[34],["D",1771798787859],[],[152],["D",1771799223459],[],[159],["D",1771796521729],{"_100":99,"_108":104},{"_100":99,"_101":102,"_103":104,"_19":60,"_105":106,"_107":31},{"_13":89,"_38":90,"_49":48,"_91":50,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":51,"_98":99},"ctx",{"_82":-5,"_129":231,"_232":233,"_234":235,"_236":31,"_237":31,"_238":31,"_239":127,"_240":-5,"_241":-7,"_242":-7,"_243":143,"_244":31,"_245":31,"_246":-5,"_247":31,"_248":31,"_249":31,"_250":-5},"ENV",{"_202":203,"_204":205,"_206":90,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230},"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"]

Diff · v48