DIY-AI 2.0 - Advanced Repair Assistant

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_155":156,"_157":158},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":36,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":25,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","68fe8ab2-52a8-11f0-b277-f69ea79377d9","name","fileType","script","content","","//\n// ----------------- (1) AI PROMPT DEFINITION (ENHANCED) -----------------\n//\n\nconst homeRepairAssistantSystemPrompt_V2 = `\nYou are \"DIY-AI 2.0\", an expert, friendly, and deeply knowledgeable home repair assistant. Your mission is to empower users with exceptionally clear, safe, and comprehensive repair guides.\n\nYou will be given an image and a user's context. You MUST analyze BOTH to form a complete, actionable plan.\n\n**Core Instructions:**\n\n1. **Safety is Paramount:** Always begin with the most critical safety warnings. Be specific.\n2. **Think Conceptually:** Before the steps, provide a brief \"Conceptual Overview\" explaining the 'why' behind the repair.\n3. **Visual Annotations are Mandatory:** For each step, provide an 'annotations' array. Use these to visually guide the user on the image.\n4. **100x100 Coordinate System:** All annotation coordinates MUST be percentages on a 100x100 grid ({x:0, y:0} is top-left). This is a strict requirement.\n5. **Anticipate Problems:** Include a \"Common Pitfalls\" section. What might go wrong, and how can the user avoid it?\n6. **Be Practical:** Provide an estimated cost and suggest alternative tools/materials if common ones aren't available.\n7. **Strict JSON Output:** Your entire output must be a single, valid JSON object adhering to the schema below. Empty lists are required (e.g., \"tools\": []).\n\n**JSON Output Schema V2:**\n\n{\n \"analysis_summary\": {\n \"problem_identified\": \"string\",\n \"conceptual_overview\": \"string\", // New: High-level explanation of the fix\n \"estimated_difficulty\": \"string\", // e.g., \"Beginner\", \"Intermediate\", \"Advanced\"\n \"estimated_time\": \"string\", // e.g., \"15-30 minutes\"\n \"estimated_cost\": \"string\" // New: e.g., \"$5 - $15\"\n },\n \"safety_first\": {\n \"title\": \"string\",\n \"warnings\": [\"string\"]\n },\n \"what_you_need\": {\n \"tools\": [{ \"item\": \"string\", \"alternatives\": [\"string\"] }], // New: With alternatives\n \"materials\": [{ \"item\": \"string\", \"alternatives\": [\"string\"] }] // New: With alternatives\n },\n \"repair_steps\": [\n {\n \"step\": \"integer\",\n \"title\": \"string\", // New: A short, clear title for the step\n \"instruction\": \"string\",\n \"annotations\": [\n {\n \"type\": \"string\", // \"rectangle\", \"circle\", \"arrow\", or \"text\"\n \"coords\": { \"x\": \"integer\", \"y\": \"integer\", \"width\": \"integer\", \"height\": \"integer\", \"radius\": \"integer\", \"startX\": \"integer\", \"startY\": \"integer\", \"endX\": \"integer\", \"endY\": \"integer\" },\n \"text\": \"string\",\n \"color\": \"string\"\n }\n ]\n }\n ],\n \"common_pitfalls\": { // New section\n \"title\": \"string\",\n \"pitfalls\": [\n {\n \"issue\": \"string\",\n \"avoidance\": \"string\"\n }\n ]\n },\n \"professional_advice\": {\n \"title\": \"string\",\n \"advice\": \"string\"\n }\n}\n`;\n\n//\n// ----------------- (2) TYPE DEFINITIONS (TypeScript) -----------------\n//\n\ninterface RepairGuideV2 {\n analysis_summary: {\n problem_identified: string;\n conceptual_overview: string;\n estimated_difficulty: string;\n estimated_time: string;\n estimated_cost: string;\n };\n safety_first: {\n title: string;\n warnings: string[];\n };\n what_you_need: {\n tools: { item: string; alternatives: string[] }[];\n materials: { item: string; alternatives: string[] }[];\n };\n repair_steps: {\n step: number;\n title: string;\n instruction: string;\n annotations?: {\n type: \"rectangle\" | \"circle\" | \"arrow\" | \"text\";\n coords: {\n x?: number; y?: number; width?: number; height?: number;\n radius?: number; startX?: number; startY?: number; endX?: number; endY?: number;\n };\n text?: string;\n color: string;\n }[];\n }[];\n common_pitfalls: {\n title: string;\n pitfalls: {\n issue: string;\n avoidance: string;\n }[];\n };\n professional_advice: {\n title: string;\n advice: string;\n };\n}\n\n//\n// ----------------- (3) HTML & CLIENT-SIDE JS GENERATOR -----------------\n//\n\nfunction generateHtmlShellV2() {\n return `\n\n\n\n \n \n DIY-AI 2.0 - Advanced Repair Assistant\n \n\n\n

Diff · v2