Val Town Code SearchReturn to Val Town

246        <link
247          rel="icon"
248          type="image/x-icon"
249          sizes="any"
250          href="https://doubleobelisk.s3.us-east-1.amazonaws.com/petition.ico"
514        <link
515          rel="icon"
516          type="image/x-icon"
517          sizes="any"
518          href="https://doubleobelisk.s3.us-east-1.amazonaws.com/petition.ico"
552          <link
553            rel="icon"
554            type="image/x-icon"
555            sizes="any"
556            href="https://doubleobelisk.s3.us-east-1.amazonaws.com/petition.ico"
636          <link
637            rel="icon"
638            type="image/x-icon"
639            sizes="any"
640            href="https://doubleobelisk.s3.us-east-1.amazonaws.com/petition.ico"
956          <link
957            rel="icon"
958            type="image/x-icon"
959            sizes="any"
960            href="https://doubleobelisk.s3.us-east-1.amazonaws.com/petition.ico"

6You 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.
7
8You will be given an image of the problem and a user's context. You MUST analyze BOTH to form your response.
9
10**Core Instructions:**
11
121.  **Safety First:** Always start with critical safety warnings.
132.  **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.
143.  **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.
154.  **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 [].
47
48* **USER CONTEXT:** "This PVC pipe under my bathroom sink is dripping from the connection nut."
49* **USER IMAGE:** (An image showing a P-trap with a leak at a slip nut).
50
51* **YOUR JSON OUTPUT (Example for a single step):**
127<title>DIY-AI - Home Repair Assistant</title>
128<style>
129@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:root{--accent-color:#4299e1;--danger-color:#e53e3e;--warning-color:#dd6b20;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0;background-color:#f4f7f9;color:#333a40;font-size:16px;}.main-content{padding:20px 30px;max-width:900px;margin:0 auto;}.view.active-view{display:block;}.view>h1{font-size:2.2em;color:#2d3748;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:15px;text-align:center;}.card{background-color:#fff;border-radius:8px;padding:25px;margin-bottom:25px;box-shadow:0 4px 12px rgba(0,0,0,.07);border:1px solid #e2e8f0}.card h2,.card h3{color:#2d3748;margin-top:0;border-bottom:1px solid #edf2f7;padding-bottom:10px;margin-bottom:15px}button,.button{padding:10px 18px;border:none;border-radius:5px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.button-primary{background-color:var(--accent-color);color:#fff}.button-primary:hover{background-color:#2b6cb0}.button-primary:disabled{background-color:#a0aec0;cursor:not-allowed}.button-primary .spinner{display:none;width:16px;height:16px;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}.button-primary.loading .spinner{display:inline-block}label{display:block;margin-bottom:8px;font-weight:600;color:#4a5568}input[type=file],textarea{width:calc(100% - 22px);padding:10px;margin-bottom:15px;border:1px solid #cbd5e0;border-radius:4px;font-size:1rem;box-sizing:border-box}textarea{min-height:120px;resize:vertical}#status-container{margin-top:20px;}.status-entry.error{background-color:#fff5f5;color:var(--danger-color);border-left:4px solid var(--danger-color);font-weight:700;padding:15px;border-radius:4px;}.wizard-pane{display:none}.wizard-pane.active{display:block;animation:fadeIn .4s ease-out}#image-preview-container{margin-top:15px;margin-bottom:15px;text-align:center;}#image-preview-container img{max-width:100%;max-height:300px;border-radius:6px;border:1px solid #ccc;}
130.repair-guide-container h2{font-size:1.6em;color:#2d3748;border-bottom:2px solid var(--accent-color);padding-bottom:10px;margin-top:30px;margin-bottom:20px}.repair-guide-container h3{font-size:1.2em;color:#4a5568;margin-bottom:10px}.repair-guide-container ul{padding-left:25px;line-height:1.7}.repair-guide-container li{margin-bottom:10px}.safety-card{background-color:#fffbe6;border-left:5px solid var(--warning-color);padding:20px;margin-bottom:25px;}.safety-card h2{color:var(--warning-color);border:none;}.safety-card ul{list-style-type:"⚠️ ";padding-left:20px;}
131.step-card{display:grid;grid-template-columns:1fr;gap:25px;margin-bottom:25px;} @media(min-width: 768px){.step-card{grid-template-columns:1fr 1fr;}}
162                <h2>1. Upload a Photo of the Problem</h2>
163                <p>A clear, well-lit photo helps get the most accurate advice.</p>
164                <input type="file" id="dj-image-file" accept="image/jpeg,image/png,image/gif,image/webp">
165                <div id="image-preview-container"></div>
166            </div>
167            <div class="card">
177        </div>
178    \`;
179    document.getElementById('dj-image-file').addEventListener('change', handleImageUpload);
180    document.getElementById('dj-submit-btn').addEventListener('click', handleProblemSubmission);
181}
287
288
289function handleImageUpload() {
290    const fileInput = document.getElementById('dj-image-file');
291    const previewContainer = document.getElementById('image-preview-container');
292    const file = fileInput.files[0];
293    if (!file) {
296        return;
297    };
298    if (!file.type.startsWith('image/') || file.size > 10 * 1024 * 1024) { 
299        alert('Please select an image file (JPG, PNG, etc.) under 10MB.');
300        fileInput.value = '';
301        return;
313    const userContextInput = document.getElementById('dj-user-context');
314    if (!currentAnalysisSession.imgBase64) {
315        alert("Please upload an image of the problem.");
316        return;
317    }
331        const formData = new FormData();
332        formData.append('userContext', currentAnalysisSession.userContext);
333        formData.append('imageBase64', currentAnalysisSession.imgBase64);
334
335        const res = await fetch(window.location.pathname + '?format=json', { method: 'POST', body: formData });
408      const formData = await req.formData();
409      const userContext = formData.get("userContext") as string;
410      const imageBase64 = formData.get("imageBase64") as string;
411
412      if (!userContext?.trim() || !imageBase64?.trim()) {
413        return jsonResponse({ error: "Missing required fields: 'userContext' or 'imageBase64'." }, 400);
414      }
415
418          type: "text",
419          text:
420            `Here is the user's description of the problem: "${userContext}". Please analyze this context along with the provided image to generate a DIY repair guide with step-by-step visual annotations.`,
421        },
422        {
423          type: "image_url",
424          image_url: {
425            url: imageBase64,
426            detail: "high",
427          },