Spaces:

Agasthya0
/

colabmind-coder-qlora

Runtime error

App Files Files Community

Agasthya0 commited on Aug 15

Commit

4f11662

verified ·

1 Parent(s): cf574d1

Update index.html

Browse files

Files changed (1) hide show

index.html +240 -560

index.html CHANGED Viewed

@@ -1,572 +1,252 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Code Assistant</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background-color: #f9fafb;
-            min-height: 100vh;
-            padding: 2rem 1rem;
-            line-height: 1.6;
-        }
-        .container {
-            max-width: 64rem;
-            margin: 0 auto;
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        .header h1 {
-            font-size: 2.5rem;
-            font-weight: bold;
-            color: #1f2937;
-            margin-bottom: 0.5rem;
-        }
-        .header p {
-            color: #6b7280;
-            font-size: 1.1rem;
-        }
-        .card {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-        }
-        .form-group {
-            margin-bottom: 1rem;
-        }
-        .form-label {
-            display: block;
-            font-size: 0.875rem;
-            font-weight: 500;
-            color: #374151;
-            margin-bottom: 0.5rem;
-        }
-        .textarea {
-            width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #d1d5db;
-            border-radius: 0.375rem;
-            font-size: 1rem;
-            resize: vertical;
-            min-height: 100px;
-            font-family: inherit;
-        }
-        .textarea:focus {
-            outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-        }
-        .button-group {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-            margin-top: 1rem;
-        }
-        .btn {
-            padding: 0.75rem 1rem;
-            border: none;
-            border-radius: 0.375rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            font-size: 0.875rem;
-        }
-        .btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .btn-primary {
-            background-color: #3b82f6;
-            color: white;
-            flex: 1;
-        }
-        .btn-primary:hover:not(:disabled) {
-            background-color: #2563eb;
-        }
-        .btn-secondary {
-            background-color: #f97316;
-            color: white;
-        }
-        .btn-secondary:hover:not(:disabled) {
-            background-color: #ea580c;
-        }
-        .btn-gray {
-            background-color: #6b7280;
-            color: white;
-        }
-        .btn-gray:hover:not(:disabled) {
-            background-color: #4b5563;
-        }
-        .btn-light {
-            background-color: #f3f4f6;
-            color: #374151;
-            padding: 0.5rem 0.75rem;
-            font-size: 0.8rem;
-        }
-        .btn-light:hover:not(:disabled) {
-            background-color: #e5e7eb;
-        }
-        .output-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-        .output-title {
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: #1f2937;
-        }
-        .button-controls {
-            display: flex;
-            gap: 0.5rem;
-        }
-        .code-container {
-            background-color: #1f2937;
-            border-radius: 0.5rem;
-            padding: 1rem;
-            overflow-x: auto;
-        }
-        .code-output {
-            color: #e5e7eb;
-            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            font-size: 0.875rem;
-            line-height: 1.5;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-        .modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.5);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            padding: 1rem;
-            z-index: 1000;
-        }
-        .modal.show {
-            display: flex;
-        }
-        .modal-content {
-            background: white;
-            border-radius: 0.5rem;
-            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
-            max-width: 32rem;
-            width: 100%;
-            max-height: 24rem;
-            overflow: hidden;
-            animation: modalSlideIn 0.3s ease-out;
-        }
-        @keyframes modalSlideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-            border-bottom: 1px solid #e5e7eb;
-        }
-        .modal-title {
-            font-size: 1.125rem;
-            font-weight: 600;
-            color: #1f2937;
-        }
-        .modal-close {
-            background: none;
-            border: none;
-            color: #9ca3af;
-            cursor: pointer;
-            padding: 0.25rem;
-            border-radius: 0.25rem;
-        }
-        .modal-close:hover {
-            color: #6b7280;
-            background-color: #f3f4f6;
-        }
-        .modal-body {
-            padding: 1rem;
-            overflow-y: auto;
-            max-height: 20rem;
-        }
-        .toast {
-            position: fixed;
-            top: 1rem;
-            right: 1rem;
-            padding: 0.75rem 1rem;
-            border-radius: 0.375rem;
-            color: white;
-            font-weight: 500;
-            transform: translateX(100%);
-            transition: transform 0.3s ease;
-            z-index: 1100;
-        }
-        .toast.show {
-            transform: translateX(0);
-        }
-        .toast.success {
-            background-color: #10b981;
-        }
-        .toast.error {
-            background-color: #ef4444;
-        }
-        .toast.warning {
-            background-color: #f59e0b;
-        }
-        .loading {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-        .spinner {
-            width: 1rem;
-            height: 1rem;
-            border: 2px solid transparent;
-            border-top: 2px solid currentColor;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        @media (max-width: 640px) {
-            .button-group {
-                flex-direction: column;
-            }
-            .btn-primary {
-                flex: none;
-            }
-            .output-header {
-                flex-direction: column;
-                gap: 1rem;
-                align-items: flex-start;
-            }
-            .button-controls {
-                align-self: stretch;
-                justify-content: space-between;
-            }
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <h1>AI Code Assistant</h1>
-            <p>Generate, explain, and manage your code with AI assistance</p>
-        </div>
-        <!-- Input Section -->
-        <div class="card">
-            <div class="form-group">
-                <label for="prompt" class="form-label">
-                    Enter your coding question or prompt:
-                </label>
-                <textarea
-                    id="prompt"
-                    class="textarea"
-                    placeholder="e.g., Create a Python function to calculate fibonacci numbers..."
-                ></textarea>
-            </div>
-            <!-- Action Buttons -->
-            <div class="button-group">
-                <button id="generateBtn" class="btn btn-primary">
-                    <span>⚡</span>
-                    Generate Code
-                </button>
-                <button id="explainBtn" class="btn btn-secondary">
-                    <span>❓</span>
-                    Explain Code
-                </button>
-                <button id="clearBtn" class="btn btn-gray">
-                    <span>🗑️</span>
-                    Clear
-                </button>
-            </div>
-        </div>
-        <!-- Output Section -->
-        <div class="card">
-            <div class="output-header">
-                <h2 class="output-title">Generated Code</h2>
-                <div class="button-controls">
-                    <button id="copyBtn" class="btn btn-light">
-                        <span>📋</span>
-                        Copy Code
-                    </button>
-                    <button id="downloadBtn" class="btn btn-light">
-                        <span>💾</span>
-                        Download
-                    </button>
-                </div>
-            </div>
-            <div class="code-container">
-                <pre id="codeOutput" class="code-output">// Your generated code will appear here...</pre>
-            </div>
-        </div>
     </div>
-    <!-- Explanation Modal -->
-    <div id="explanationModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 class="modal-title">Code Explanation</h3>
-                <button id="closeModal" class="modal-close">
-                    <span>✕</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div id="explanationContent">
-                    <!-- Explanation content will be inserted here -->
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Toast Notification -->
-    <div id="toast" class="toast">
-        <span id="toastMessage">Code copied to clipboard!</span>
     </div>
-    <script>
-    const promptTextarea = document.getElementById('prompt');
-    const generateBtn = document.getElementById('generateBtn');
-    const explainBtn = document.getElementById('explainBtn');
-    const clearBtn = document.getElementById('clearBtn');
-    const copyBtn = document.getElementById('copyBtn');
-    const downloadBtn = document.getElementById('downloadBtn');
-    const codeOutput = document.getElementById('codeOutput');
-    const explanationModal = document.getElementById('explanationModal');
-    const explanationContent = document.getElementById('explanationContent');
-    const closeModal = document.getElementById('closeModal');
-    const toast = document.getElementById('toast');
-    const toastMessage = document.getElementById('toastMessage');
-    let currentCode = '';
-    // Backend API URL (your HF Space)
-    const API_URL = "https://Agasthya0-colabmind-coder-qlora.hf.space/run/predict";
-    // Generate Code
-    generateBtn.addEventListener('click', async () => {
-        const prompt = promptTextarea.value.trim();
-        if (!prompt) {
-            showToast('Please enter a prompt first!', 'error');
-            return;
-        }
-      await fetch("/run/predict", {
-  method: "POST",
-  headers: {"Content-Type": "application/json"},
-  body: JSON.stringify({ data: [prompt, max_tokens, temperature, top_p] })
-});
-        setLoading(generateBtn, true);
-        codeOutput.textContent = "⏳ Generating code...";
-        try {
-            const res = await fetch(API_URL, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ data: [prompt] })
-            });
-            const result = await res.json();
-            currentCode = result?.data?.[0] || "⚠️ No output from backend.";
-            codeOutput.textContent = currentCode;
-            showToast('Code generated successfully!', 'success');
-        } catch (err) {
-            console.error(err);
-            showToast('Backend error: Could not generate code.', 'error');
-            codeOutput.textContent = "// Error generating code";
-        } finally {
-            setLoading(generateBtn, false);
-        }
-    });
-    // Explain Code
-    explainBtn.addEventListener('click', async () => {
-        if (!currentCode) {
-            showToast('No code to explain. Generate code first!', 'error');
-            return;
-        }
-        await fetch("/run/explain", {
-  method: "POST",
-  headers: {"Content-Type": "application/json"},
-  body: JSON.stringify({ data: [code_text, max_tokens, temperature, top_p] })
-});
-        setLoading(explainBtn, true);
-        explanationContent.textContent = "⏳ Explaining code...";
-        try {
-            const res = await fetch(API_URL, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ data: [`Explain this code:\n\n${currentCode}`] })
-            });
-            const result = await res.json();
-            explanationContent.textContent = result?.data?.[0] || "⚠️ No explanation returned.";
-            explanationModal.classList.add('show');
-        } catch (err) {
-            console.error(err);
-            explanationContent.textContent = "❌ Error explaining code.";
-        } finally {
-            setLoading(explainBtn, false);
-        }
-    });
-    // Clear
-    clearBtn.addEventListener('click', () => {
-        promptTextarea.value = '';
-        currentCode = '';
-        codeOutput.textContent = '// Your generated code will appear here...';
-        showToast('Cleared successfully!', 'success');
-    });
-    // Copy Code
-    copyBtn.addEventListener('click', async () => {
-        if (!currentCode) {
-            showToast('No code to copy!', 'error');
-            return;
-        }
-        await navigator.clipboard.writeText(currentCode);
-        showToast('Code copied to clipboard!', 'success');
-    });
-    // Download Code
-    downloadBtn.addEventListener('click', () => {
-        if (!currentCode) {
-            showToast('No code to download!', 'error');
-            return;
-        }
-        const blob = new Blob([currentCode], { type: 'text/plain' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'generated_code.py';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    });
-    // Modal
-    closeModal.addEventListener('click', () => {
-        explanationModal.classList.remove('show');
-    });
-    explanationModal.addEventListener('click', (e) => {
-        if (e.target === explanationModal) {
-            explanationModal.classList.remove('show');
-        }
-    });
-    // Utils
-    function setLoading(button, isLoading) {
-        if (isLoading) {
-            button.disabled = true;
-            button.setAttribute('data-original', button.innerHTML);
-            button.innerHTML = `<div class="spinner"></div> Loading...`;
-        } else {
-            button.disabled = false;
-            button.innerHTML = button.getAttribute('data-original');
-        }
     }
-    function showToast(message, type = 'success') {
-        toastMessage.textContent = message;
-        toast.className = `toast ${type} show`;
-        setTimeout(() => toast.classList.remove('show'), 3000);
     }
-</script>
-<footer>
-  <h2><b>Developed by Eshwar Gajula. </b></h2>
-</footer>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>ColabMind Coder — ML & Python Code Generator</title>
+  <link rel="stylesheet" href="/static/style.css" />
+  <style>
+    /* Minimal inline CSS to ensure the page looks fine if /static/style.css missing */
+    body { font-family: Inter, system-ui, Arial; background:#f7fafc; color:#0f172a; margin:0; }
+    .container { max-width:1000px; margin:32px auto; padding:20px; background:white; box-shadow:0 6px 20px rgba(2,6,23,0.08); border-radius:12px; }
+    h1{margin:0 0 12px 0;font-size:1.6rem}
+    textarea#prompt{width:100%;min-height:120px;padding:12px;border-radius:8px;border:1px solid #e6edf3;resize:vertical;font-family:monospace}
+    .btn-row{display:flex;gap:8px;margin:12px 0}
+    button{padding:10px 14px;border-radius:8px;border:0;background:#2563eb;color:white;cursor:pointer}
+    button.secondary{background:#ff8a00}
+    button.ghost{background:#e6edf3;color:#0f172a}
+    pre#codeOutput{background:#0b1220;color:#dbeafe;padding:12px;border-radius:8px;overflow:auto;min-height:220px}
+    .small{font-size:0.9rem;color:#475569}
+    .toast{position:fixed;right:18px;bottom:18px;padding:10px 14px;border-radius:8px;background:#111827;color:white;opacity:0;transition:opacity .25s}
+    .toast.show{opacity:0.95}
+    /* modal */
+    .modal{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6)}
+    .modal.show{display:flex}
+    .modal-card{background:white;padding:16px;border-radius:8px;max-width:900px;width:95%;max-height:80vh;overflow:auto}
+  </style>
 </head>
 <body>
+  <div class="container">
+    <h1>ColabMind Coder — ML & Python Code Generator</h1>
+    <p class="small">Type a prompt (task or question) and press Generate. Use Explain to get inline explanations.</p>
+    <label for="prompt">Prompt</label>
+    <textarea id="prompt" placeholder="e.g., Write a PyTorch training loop for binary classification on tabular data with DataLoader and evaluation."></textarea>
+    <div class="btn-row">
+      <button id="generateBtn" data-original="Generate Code">Generate Code</button>
+      <button id="explainBtn" class="secondary" data-original="Explain Code">Explain Code</button>
+      <button id="clearBtn" class="ghost" data-original="Clear">Clear</button>
+      <div style="flex:1"></div>
+      <div style="display:flex;gap:8px">
+        <button id="copyBtn" class="ghost" data-original="Copy">Copy</button>
+        <button id="downloadBtn" class="ghost" data-original="Download">Download</button>
+      </div>
     </div>
+    <label for="codeOutput">Generated Code</label>
+    <pre id="codeOutput" aria-label="Generated Code">// Generated code appears here</pre>
+    <div style="margin-top:12px; display:flex; gap:12px; align-items:center;">
+      <div class="small">History:</div>
+      <select id="historySelect"></select>
+      <button id="loadHistory" class="ghost">Load</button>
+      <button id="clearHistory" class="ghost">Clear History</button>
+      <div style="flex:1"></div>
+      <div class="small" id="statusText"></div>
     </div>
+  </div>
+  <!-- explanation modal -->
+  <div id="explanationModal" class="modal" role="dialog" aria-modal="true">
+    <div class="modal-card">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <h3>Explanation</h3>
+        <button id="closeModal" class="ghost">Close</button>
+      </div>
+      <pre id="explanationContent" style="white-space:pre-wrap;background:#f8fafc;padding:12px;border-radius:6px"></pre>
+    </div>
+  </div>
+  <div id="toast" class="toast"><span id="toastMessage"></span></div>
+  <script>
+  // ============ Config ============
+  // Relative endpoints work when frontend and backend are in same Space repo.
+  const PREDICT_URL = "/run/predict";
+  const EXPLAIN_URL  = "/run/explain";
+  // History stored in sessionStorage (client-side) + server-side persistence handled by backend.
+  function loadLocalHistory(){
+    try{
+      const raw = sessionStorage.getItem('colabmind_history');
+      return raw ? JSON.parse(raw) : [];
+    }catch(e){ return []; }
+  }
+  function saveLocalHistory(hist){
+    try{ sessionStorage.setItem('colabmind_history', JSON.stringify(hist)); }catch(e){}
+  }
+  // DOM
+  const promptEl = document.getElementById('prompt');
+  const generateBtn = document.getElementById('generateBtn');
+  const explainBtn = document.getElementById('explainBtn');
+  const clearBtn = document.getElementById('clearBtn');
+  const copyBtn = document.getElementById('copyBtn');
+  const downloadBtn = document.getElementById('downloadBtn');
+  const codeOutput = document.getElementById('codeOutput');
+  const toast = document.getElementById('toast');
+  const toastMessage = document.getElementById('toastMessage');
+  const explanationModal = document.getElementById('explanationModal');
+  const explanationContent = document.getElementById('explanationContent');
+  const closeModal = document.getElementById('closeModal');
+  const historySelect = document.getElementById('historySelect');
+  const loadHistoryBtn = document.getElementById('loadHistory');
+  const clearHistoryBtn = document.getElementById('clearHistory');
+  const statusText = document.getElementById('statusText');
+  let history = loadLocalHistory();
+  refreshHistoryUI();
+  // ============ helpers ============
+  function showToast(msg, kind='info'){
+    toastMessage.textContent = msg;
+    toast.className = 'toast show';
+    setTimeout(()=> toast.classList.remove('show'), 3000);
+  }
+  function setLoading(btn, on=true){
+    if(on){
+      btn.disabled = true;
+      btn.dataset.orig = btn.innerHTML;
+      btn.innerHTML = '⏳ Loading...';
+    } else {
+      btn.disabled = false;
+      if(btn.dataset.orig) btn.innerHTML = btn.dataset.orig;
     }
+  }
+  // update history dropdown UI
+  function refreshHistoryUI(){
+    historySelect.innerHTML = '';
+    for(let i=0;i<history.length;i++){
+      const opt = document.createElement('option');
+      opt.value = i;
+      const p = history[i].prompt.replace(/\n/g,' ').slice(0,120);
+      opt.textContent = `[${i}] ${history[i].time} — ${p}`;
+      historySelect.appendChild(opt);
     }
+  }
+  // append new history entry, keep newest first
+  function pushHistory(prompt, code){
+    const entry = { time: new Date().toLocaleString(), prompt: prompt, code: code };
+    history.unshift(entry);
+    if(history.length>200) history.pop();
+    saveLocalHistory(history);
+    refreshHistoryUI();
+    // notify backend to append persistent history (best-effort)
+    fetch('/run/history_append', {
+      method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({prompt:prompt, code:code})
+    }).catch(()=>{/* ignore errors */});
+  }
+  // ============ API helpers ============
+  async function apiPredict(prompt, max_tokens=512, temperature=0.2, top_p=0.9){
+    const body = { data: [prompt, max_tokens, temperature, top_p] };
+    const res = await fetch(PREDICT_URL, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
+    if(!res.ok) throw new Error('Server error: '+res.status);
+    const j = await res.json();
+    return j?.data?.[0] ?? null;
+  }
+  async function apiExplain(code, max_tokens=512, temperature=0.2, top_p=0.9){
+    const body = { data: [code, max_tokens, temperature, top_p] };
+    const res = await fetch(EXPLAIN_URL, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
+    if(!res.ok) throw new Error('Server error: '+res.status);
+    const j = await res.json();
+    return j?.data?.[0] ?? null;
+  }
+  // ============ UI events ============
+  generateBtn.addEventListener('click', async ()=>{
+    const prompt = promptEl.value.trim();
+    if(!prompt){ showToast('Enter a prompt first','error'); return; }
+    setLoading(generateBtn,true);
+    codeOutput.textContent = '// Generating…';
+    try{
+      const out = await apiPredict(prompt, 512, 0.2, 0.9);
+      codeOutput.textContent = out;
+      pushHistory(prompt, out);
+      showToast('Code generated');
+    }catch(err){
+      console.error(err);
+      codeOutput.textContent = '// Error generating code — check console';
+      showToast('Generation failed','error');
+    }finally{ setLoading(generateBtn,false); }
+  });
+  explainBtn.addEventListener('click', async ()=>{
+    const code = codeOutput.textContent || '';
+    if(!code){ showToast('No code to explain','error'); return; }
+    setLoading(explainBtn,true);
+    explanationContent.textContent = 'Explaining…';
+    try{
+      const out = await apiExplain(code, 512, 0.2, 0.9);
+      explanationContent.textContent = out;
+      explanationModal.classList.add('show');
+    }catch(err){
+      console.error(err);
+      explanationContent.textContent = 'Error explaining code';
+    }finally{ setLoading(explainBtn,false); }
+  });
+  clearBtn.addEventListener('click', ()=>{
+    promptEl.value=''; codeOutput.textContent='// Generated code will appear here';
+    showToast('Cleared');
+  });
+  copyBtn.addEventListener('click', async ()=>{
+    const code = codeOutput.textContent || '';
+    if(!code){ showToast('No code to copy','error'); return; }
+    try{ await navigator.clipboard.writeText(code); showToast('Copied to clipboard'); }catch(e){ showToast('Copy failed','error'); }
+  });
+  downloadBtn.addEventListener('click', ()=>{
+    const code = codeOutput.textContent || '';
+    if(!code){ showToast('No code to download','error'); return; }
+    const blob = new Blob([code], {type:'text/plain'}); const url = URL.createObjectURL(blob);
+    const a = document.createElement('a'); a.href=url; a.download='generated_code.py'; document.body.appendChild(a); a.click(); a.remove();
+    URL.revokeObjectURL(url);
+    showToast('Download started');
+  });
+  loadHistoryBtn.addEventListener('click', ()=>{
+    const idx = historySelect.value;
+    if(idx===''|| idx==null){ showToast('Pick a history item','error'); return; }
+    const entry = history[Number(idx)];
+    if(!entry){ showToast('Invalid index','error'); return; }
+    promptEl.value = entry.prompt;
+    codeOutput.textContent = entry.code;
+    showToast('Loaded from history');
+  });
+  clearHistoryBtn.addEventListener('click', ()=>{
+    if(!confirm('Clear local history?')) return;
+    history = []; saveLocalHistory(history); refreshHistoryUI();
+    fetch('/run/history_clear', {method:'POST'}).catch(()=>{/* ignore server errors */});
+    showToast('History cleared');
+  });
+  // modal close
+  closeModal.addEventListener('click', ()=> explanationModal.classList.remove('show'));
+  explanationModal.addEventListener('click', (e)=> { if(e.target===explanationModal) explanationModal.classList.remove('show'); });
+  // health ping (optional)
+  async function pingStatus(){
+    try{
+      const r = await fetch('/health'); if(r.ok){ const j = await r.json(); statusText.textContent = `status: ${j.status}`; }else{ statusText.textContent='status:down'; }
+    }catch(e){ statusText.textContent='status:down'; }
+  }
+  pingStatus();
+  </script>
 </body>
+</html>