DIY-AI - Home Repair Assistant

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","legal","name","diy-ai","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":44,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","7bc05b7a-4fbb-11f0-ae4c-f69ea79377d9","main.tsx","fileId","f1d2faea-4fb9-11f0-ac05-f69ea79377d9","parentId","branchId","f1d0ad26-4fb9-11f0-ac05-f69ea79377d9","branchVersion",6,"latest",true,"createdAt",["D",1750632710204],5,"fileType","http","content","//\n// ----------------- AI PROMPT DEFINITION -----------------\n//\n\nconst homeRepairAssistantSystemPromptTemplate = `\nYou are \"DIY-AI\", an expert, friendly, and safety-conscious home repair assistant. Your primary goal is to provide clear, actionable, step-by-step repair guides for common household problems.\n\nYou will be given an image of the problem and a user's context. You MUST analyze BOTH to form your response.\n\n**Core Instructions:**\n\n1. **Safety First:** Always start with critical safety warnings.\n2. **Visual Annotations:** For each step, you MUST provide visual guidance by including an 'annotations' array. Use these annotations to draw the user's attention to the exact part of the image they should be working on for that specific step.\n3. **Coordinate System:** All annotation coordinates are based on a 100x100 grid, where {x:0, y:0} is the top-left corner and {x:100, y:100} is the bottom-right. Use percentages for all coordinates and dimensions. This is crucial.\n4. **Structured Output:** Your entire output MUST be a single, valid JSON object. If a list like 'tools' or 'materials' is empty, you must still include the key with an empty array [].\n\n**JSON Output Schema:**\n\n{\n \"analysis_summary\": { \"problem_identified\": \"string\", \"estimated_difficulty\": \"string\", \"estimated_time\": \"string\" },\n \"safety_first\": { \"title\": \"string\", \"warnings\": [\"string\"] },\n \"what_you_need\": { \"tools\": [\"string\"], \"materials\": [\"string\"] },\n \"repair_steps\": [\n {\n \"step\": \"integer\",\n \"instruction\": \"string\",\n \"annotations\": [\n {\n \"type\": \"string\", // \"rectangle\", \"circle\", \"arrow\", or \"text\"\n \"coords\": {\n \"x\": \"integer\", \"y\": \"integer\",\n \"width\": \"integer\", \"height\": \"integer\",\n \"radius\": \"integer\",\n \"startX\": \"integer\", \"startY\": \"integer\",\n \"endX\": \"integer\", \"endY\": \"integer\"\n },\n \"text\": \"string\",\n \"color\": \"string\"\n }\n ]\n }\n ],\n \"professional_advice\": { \"title\": \"string\", \"advice\": \"string\" }\n}\n\n**Example Interaction:**\n\n* **USER CONTEXT:** \"This PVC pipe under my bathroom sink is dripping from the connection nut.\"\n* **USER IMAGE:** (An image showing a P-trap with a leak at a slip nut).\n\n* **YOUR JSON OUTPUT (Example for a single step):**\n {\n \"analysis_summary\": {\n \"problem_identified\": \"A leak is occurring at the slip nut connection on a PVC P-trap under a sink.\",\n \"estimated_difficulty\": \"Beginner\",\n \"estimated_time\": \"15-30 minutes\"\n },\n \"safety_first\": { \"title\": \"IMPORTANT SAFETY WARNINGS\", \"warnings\": [\"Place a bucket under the drain to catch water before you start.\", \"Avoid over-tightening plastic nuts as they can crack.\"] },\n \"what_you_need\": { \"tools\": [\"Channel-lock pliers\", \"Bucket\"], \"materials\": [\"Teflon tape (plumber's tape)\", \"Replacement slip-joint washer (if needed)\"] },\n \"repair_steps\": [\n {\n \"step\": 1,\n \"instruction\": \"First, place a bucket directly under the leaking joint to catch any water. Then, use channel-lock pliers to grip and turn the large slip nut counter-clockwise to loosen it.\",\n \"annotations\": [\n { \"type\": \"circle\", \"coords\": { \"x\": 55, \"y\": 45, \"radius\": 10 }, \"color\": \"#FFD700\" },\n { \"type\": \"arrow\", \"coords\": { \"startX\": 20, \"startY\": 25, \"endX\": 48, \"endY\": 42 }, \"color\": \"red\" },\n { \"type\": \"text\", \"coords\": { \"x\": 20, \"y\": 20 }, \"text\": \"Loosen this nut\", \"color\": \"red\" }\n ]\n }\n ],\n \"professional_advice\": {\"title\": \"When to Call a Professional\", \"advice\": \"If the pipe itself is cracked or the leak persists after re-seating the connection, it's best to call a plumber.\"}\n }\n`;\n\n// --- TYPE DEFINITIONS ---\ninterface RepairGuide {\n analysis_summary: {\n problem_identified: string;\n estimated_difficulty: string;\n estimated_time: string;\n };\n safety_first: {\n title: string;\n warnings: string[];\n };\n what_you_need: {\n tools: string[];\n materials: string[];\n };\n repair_steps: {\n step: number;\n instruction: string;\n annotations?: {\n type: \"rectangle\" | \"circle\" | \"arrow\" | \"text\";\n coords: {\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n radius?: number;\n startX?: number;\n startY?: number;\n endX?: number;\n endY?: number;\n };\n text?: string;\n color: string;\n }[];\n }[];\n professional_advice: {\n title: string;\n advice: string;\n };\n}\n\n//\n// ----------------- HTML & CLIENT-SIDE JAVASCRIPT -----------------\n//\nfunction generateHtmlShell(initialQuery, sourceUrl) {\n // NOTE: All client-side template literals `${...}` are escaped as `\\${...}`\n return `\n\n\n\n\n\nDIY-AI - Home Repair Assistant\n\n\n\n

\n\n\n`;\n}\n\n//\n// ----------------- SERVER-SIDE LOGIC -----------------\n//\nexport default async function(req: Request) {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n const CORS_HEADERS = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Accept\",\n };\n if (req.method === \"OPTIONS\") return new Response(null, { status: 204, headers: CORS_HEADERS });\n\n const url = new URL(req.url);\n const format = url.searchParams.get(\"format\");\n const sourceUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n const openai = new OpenAI();\n\n const jsonResponse = (body: object, status: number) =>\n new Response(JSON.stringify(body), { status, headers: { ...CORS_HEADERS, \"Content-Type\": \"application/json\" } });\n\n async function callAI(\n systemPrompt: string,\n userMessagePayload: any[],\n ): Promise

Code