Create app.py

app.py

@@ -0,0 +1,678 @@
+"""
+AI HTML Editor — Flask Server
+Semua pemrosesan (AI call, find/change, fuzzy match) dilakukan di sisi server.
+Job disimpan di memori dengan TTL 1 hari.
+"""
+
+from flask import Flask, request, jsonify, Response
+import uuid, time, re, json, threading, requests
+
+app = Flask(__name__)
+
+# ─────────────────────────────────────────────
+#  JOB STORE  (in-memory, TTL = 1 hari)
+# ─────────────────────────────────────────────
+JOBS: dict[str, dict] = {}
+JOB_TTL = 86_400          # 1 hari dalam detik
+_lock = threading.Lock()
+
+def _purge_expired():
+    """Hapus job yang sudah expired."""
+    now = time.time()
+    with _lock:
+        expired = [jid for jid, j in JOBS.items() if now - j["created_at"] > JOB_TTL]
+        for jid in expired:
+            del JOBS[jid]
+
+def new_job(payload: dict) -> str:
+    _purge_expired()
+    jid = str(uuid.uuid4())
+    with _lock:
+        JOBS[jid] = {
+            "status": "pending",    # pending | running | done | error
+            "created_at": time.time(),
+            "payload": payload,
+            "result": None,
+            "error": None,
+        }
+    return jid
+
+def get_job(jid: str) -> dict | None:
+    _purge_expired()
+    with _lock:
+        return JOBS.get(jid)
+
+def update_job(jid: str, **kwargs):
+    with _lock:
+        if jid in JOBS:
+            JOBS[jid].update(kwargs)
+
+# ─────────────────────────────────────────────
+#  ALGORITMA FIND & CHANGE  (ported dari JS)
+# ─────────────────────────────────────────────
+
+def levenshtein(a: str, b: str) -> int:
+    la, lb = len(a), len(b)
+    if la == 0: return lb
+    if lb == 0: return la
+    matrix = [list(range(la + 1))] + [[i] + [0] * la for i in range(1, lb + 1)]
+    for i in range(1, lb + 1):
+        for j in range(1, la + 1):
+            if b[i-1] == a[j-1]:
+                matrix[i][j] = matrix[i-1][j-1]
+            else:
+                matrix[i][j] = 1 + min(matrix[i-1][j-1], matrix[i][j-1], matrix[i-1][j])
+    return matrix[lb][la]
+
+def calculate_similarity(s1: str, s2: str) -> float:
+    longer  = s1 if len(s1) >= len(s2) else s2
+    shorter = s1 if len(s1) <  len(s2) else s2
+    if len(longer) == 0:
+        return 1.0
+    return (len(longer) - levenshtein(longer, shorter)) / len(longer)
+
+def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
+    """Sama persis dengan fuzzyReplace() di JS."""
+    search_trimmed = search.strip()
+    if not search_trimmed:
+        return {"success": False, "result": source}
+
+    # Level 1 — whitespace-agnostic regex
+    def escape_re(s):
+        return re.escape(s)
+
+    flex = re.sub(r'\s+', r'\\s+', escape_re(search_trimmed))
+    try:
+        m = re.search(flex, source)
+        if m:
+            return {"success": True, "result": source[:m.start()] + replacement.strip() + source[m.end():]}
+    except re.error:
+        pass
+
+    # Level 2 — sliding window + Levenshtein (hanya jika < 3000 chars)
+    if len(search_trimmed) > 3000:
+        return {"success": False, "result": source}
+
+    source_lines = source.split('\n')
+    search_lines = [l.strip() for l in search_trimmed.split('\n') if l.strip()]
+    if not search_lines:
+        return {"success": False, "result": source}
+
+    search_str = ''.join(search_lines)
+    best = {"index": -1, "score": 0.0, "length": 0}
+    n = len(search_lines)
+
+    for window_size in [max(1, n-1), n, n+1]:
+        for i in range(len(source_lines)):
+            if i + window_size > len(source_lines):
+                continue
+            window_lines = source_lines[i:i+window_size]
+            window_str   = ''.join(l.strip() for l in window_lines)
+            if abs(len(window_str) - len(search_str)) > len(search_str) * 0.5:
+                continue
+            score = calculate_similarity(window_str, search_str)
+            if score > best["score"]:
+                best = {"index": i, "score": score, "length": window_size}
+
+    if best["score"] > 0.70:
+        result_lines = source_lines[:best["index"]] + [replacement] + source_lines[best["index"] + best["length"]:]
+        return {"success": True, "result": '\n'.join(result_lines)}
+
+    return {"success": False, "result": source}
+
+
+def apply_find_change(code_base: str, ai_response: str) -> dict:
+    """
+    Parse respons AI dan terapkan semua blok <find>/<element>/<change>.
+    Return dict: {success, code, message, action_label}
+    """
+    exec_match = re.search(r'<execution>([\s\S]*?)</execution>', ai_response, re.IGNORECASE)
+    if not exec_match:
+        raise ValueError("Gunakan format tag <execution>.")
+
+    exec_content = exec_match.group(1)
+
+    respond_match = re.search(r'<responding>([\s\S]*?)</responding>', exec_content, re.IGNORECASE)
+    respond_text  = respond_match.group(1).strip() if respond_match else "Kode berhasil diperbarui."
+
+    find_blocks = re.findall(r'<find>([\s\S]*?)</find>', exec_content, re.IGNORECASE)
+    if not find_blocks:
+        raise ValueError("Kamu wajib menggunakan tag <find> berisi <element> dan <change>.")
+
+    temp_code     = code_base
+    success_count = 0
+    is_fuzzy      = False
+
+    for i, block in enumerate(find_blocks):
+        el_match  = re.search(r'<element>([\s\S]*?)</element>', block, re.IGNORECASE)
+        ch_match  = re.search(r'<change>([\s\S]*?)</change>',   block, re.IGNORECASE)
+        if not el_match or not ch_match:
+            raise ValueError(f"Blok <find> ke-{i+1} tidak memiliki <element> atau <change>.")
+
+        old_code         = el_match.group(1)
+        old_code_trimmed = old_code.strip()
+        new_code = (ch_match.group(1)
+                    .replace('&amp;', '&')
+                    .replace('&lt;',  '<')
+                    .replace('&gt;',  '>')
+                    .replace('&quot;', '"')
+                    .replace('&#39;', "'"))
+
+        if old_code in temp_code:
+            temp_code = temp_code.replace(old_code, new_code, 1)
+            success_count += 1
+        elif old_code_trimmed and old_code_trimmed in temp_code:
+            temp_code = temp_code.replace(old_code_trimmed, new_code.strip(), 1)
+            success_count += 1
+        else:
+            res = fuzzy_replace(temp_code, old_code, new_code)
+            if res["success"]:
+                temp_code  = res["result"]
+                success_count += 1
+                is_fuzzy = True
+            else:
+                raise ValueError(
+                    f"Isi dari <element> pada <find> ke-{i+1}:\n{old_code}\n\n"
+                    "TIDAK DITEMUKAN di codebase meskipun fitur Similarity Fallback sudah aktif. "
+                    "Salin teks dengan lebih teliti!"
+                )
+
+    action_label = f"Diperbarui ({success_count} bagian){' ✨ Auto-Fix' if is_fuzzy else ''}"
+    return {"code": temp_code, "message": respond_text, "action_label": action_label}
+
+
+# ─────────────────────────────────────────────
+#  AI CALL
+# ─────────────────────────────────────────────
+GEMINI_API = "https://puruboy-api.vercel.app/api/ai/gemini-v2"
+
+def call_ai(prompt: str) -> str:
+    resp = requests.post(
+        GEMINI_API,
+        json={"prompt": prompt},
+        timeout=60,
+        headers={"Content-Type": "application/json"},
+    )
+    resp.raise_for_status()
+    data = resp.json()
+    if not data.get("success"):
+        raise RuntimeError("Gagal terhubung ke API / Server Error.")
+    return data["result"]["answer"]
+
+
+def build_system_prompt(code_base: str) -> str:
+    return f"""Kamu adalah AI HTML Editor. Tugasmu HANYA mengubah bagian tertentu dari kode (Partial Update).
+Codebase saat ini:
+```html
+{code_base}
+```
+
+ATURAN WAJIB:
+1. Gunakan blok <find> untuk setiap perubahan.
+2. <element> HARUS berisi teks/kode lama yang IDENTIK PERSIS dengan Codebase.
+3. <change> berisi kode baru penggantinya.
+4. Boleh memakai banyak blok <find> sekaligus.
+5. Balas HANYA dengan format <execution> seperti contoh di bawah. DILARANG KERAS menulis ulang seluruh kode!
+
+CONTOH JAWABAN:
+<execution>
+<responding>Saya telah mengganti teks H1 dan warna tombol.</responding>
+<find>
+<element>
+  <h1>Halo Dunia!</h1>
+</element>
+<change>
+  <h1>Dunia Baru!</h1>
+</change>
+</find>
+</execution>"""
+
+
+def run_ai_loop(jid: str, user_instruction: str, code_base: str,
+                loop: int = 0, error_feedback: str = None, max_loops: int = 10):
+    """Rekursif di thread terpisah — sama dengan runAILoop() JS."""
+    if loop >= max_loops:
+        update_job(jid,
+            status="error",
+            error="Gagal merubah kode setelah 10x loop perbaikan. AI terus menerus gagal mencocokkan kode dengan Codebase. Coba beri instruksi yang lebih jelas.",
+            loop_count=loop,
+        )
+        return
+
+    try:
+        prompt = build_system_prompt(code_base) + f"\n\nInstruksi User: {user_instruction}"
+        if error_feedback:
+            prompt += (f"\n\n[ERROR PADA JAWABANMU SEBELUMNYA]:\n{error_feedback}\n"
+                       "Perbaiki pencarian teksmu. Jika kau kesulitan, setidaknya salin elemen persis seperti aslinya.")
+
+        ai_text = call_ai(prompt)
+        result  = apply_find_change(code_base, ai_text)
+
+        update_job(jid,
+            status="done",
+            result=result,
+            loop_count=loop,
+        )
+
+    except Exception as exc:
+        # Self-healing: retry
+        threading.Thread(
+            target=run_ai_loop,
+            args=(jid, user_instruction, code_base, loop + 1, str(exc), max_loops),
+            daemon=True,
+        ).start()
+
+
+# ─────────────────────────────────────────────
+#  ROUTES
+# ─────────────────────────────────────────────
+
+@app.route("/api/chat", methods=["POST"])
+def api_chat():
+    """
+    Body: { instruction: str, code_base: str }
+    Return: { job_id: str }
+    """
+    body = request.get_json(silent=True) or {}
+    instruction = body.get("instruction", "").strip()
+    code_base   = body.get("code_base", "")
+
+    if not instruction:
+        return jsonify({"error": "instruction wajib diisi"}), 400
+
+    jid = new_job({"instruction": instruction})
+    update_job(jid, status="running", loop_count=0)
+
+    threading.Thread(
+        target=run_ai_loop,
+        args=(jid, instruction, code_base),
+        daemon=True,
+    ).start()
+
+    return jsonify({"job_id": jid}), 202
+
+
+@app.route("/api/job/<jid>", methods=["GET"])
+def api_job_status(jid):
+    """Poll status job."""
+    job = get_job(jid)
+    if not job:
+        return jsonify({"error": "Job tidak ditemukan atau sudah expired (> 1 hari)"}), 404
+
+    resp = {
+        "job_id":     jid,
+        "status":     job["status"],
+        "loop_count": job.get("loop_count", 0),
+    }
+    if job["status"] == "done":
+        resp["result"] = job["result"]
+    if job["status"] == "error":
+        resp["error"] = job["error"]
+
+    return jsonify(resp)
+
+
+@app.route("/api/job/<jid>", methods=["DELETE"])
+def api_delete_job(jid):
+    """Hapus job secara manual."""
+    with _lock:
+        if jid in JOBS:
+            del JOBS[jid]
+            return jsonify({"deleted": True})
+    return jsonify({"error": "Job tidak ditemukan"}), 404
+
+
+# ─────────────────────────────────────────────
+#  UI  (embedded HTML)
+# ─────────────────────────────────────────────
+HTML = r"""<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>AI HTML Editor</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
+        iframe { border: none; width: 100%; height: 100%; }
+    </style>
+</head>
+<body class="bg-gray-100 flex justify-center h-[100dvh] overflow-hidden text-gray-800">
+
+    <div x-data="aiEditor()" class="w-full max-w-md h-full bg-white shadow-2xl relative flex flex-col">
+        
+        <!-- Header -->
+        <header class="flex-shrink-0 bg-indigo-600 text-white p-4 flex justify-between items-center shadow-md z-10">
+            <h1 class="text-lg font-bold flex items-center gap-2">
+                <i class="fa-solid fa-wand-magic-sparkles"></i> AI Editor
+            </h1>
+            <div class="flex gap-2">
+                <button @click="downloadCode" class="bg-indigo-500 hover:bg-indigo-400 p-2 rounded text-sm transition font-medium shadow">
+                    <i class="fa-solid fa-file-download"></i> Simpan
+                </button>
+                <label class="cursor-pointer bg-indigo-500 hover:bg-indigo-400 p-2 rounded text-sm transition font-medium shadow">
+                    <i class="fa-solid fa-file-upload"></i> Upload
+                    <input type="file" accept=".html" class="hidden" @change="uploadFile">
+                </label>
+            </div>
+        </header>
+
+        <!-- Main -->
+        <main class="flex-1 min-h-0 relative bg-gray-50 flex flex-col overflow-hidden">
+            
+            <!-- CHAT PAGE -->
+            <div x-show="tab === 'chat'" class="h-full flex flex-col" x-transition.opacity>
+                <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-container">
+                    <template x-for="(msg, index) in chatHistory" :key="index">
+                        <div class="flex flex-col" :class="msg.role === 'user' ? 'items-end' : 'items-start'">
+                            <span class="text-[10px] text-gray-400 mb-1 font-semibold uppercase tracking-wider"
+                                  x-text="msg.role === 'user' ? 'Kamu' : 'AI'"></span>
+                            <div class="max-w-[85%] p-3 rounded-2xl shadow-sm text-sm"
+                                 :class="msg.role === 'user' ? 'bg-indigo-600 text-white rounded-tr-none'
+                                         : (msg.isErrorPrompt ? 'bg-red-50 text-red-800 border border-red-200 rounded-tr-none'
+                                         : 'bg-white text-gray-800 border border-gray-200 rounded-tl-none')">
+                                <p class="whitespace-pre-wrap leading-relaxed" x-text="msg.content"></p>
+                                <template x-if="msg.action">
+                                    <div class="mt-2 pt-2 border-t border-gray-100/30 flex items-center gap-1">
+                                        <span class="text-[10px] px-2 py-0.5 rounded-full font-bold flex items-center gap-1 bg-emerald-100 text-emerald-700">
+                                            <i class="fa-solid fa-pen-to-square"></i>
+                                            <span x-text="msg.action"></span>
+                                        </span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </template>
+
+                    <!-- Loading -->
+                    <div x-show="isProcessing" class="flex items-start">
+                        <div class="bg-white border border-gray-200 p-3 rounded-2xl rounded-tl-none shadow-sm flex items-center gap-2">
+                            <i class="fa-solid fa-circle-notch fa-spin text-indigo-600"></i>
+                            <span class="text-sm text-gray-600">
+                                AI sedang bekerja...
+                                <span x-show="loopCount > 0" class="text-xs font-bold text-red-500 ml-1">
+                                    (Self-Healing: <span x-text="loopCount"></span>/10)
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Chat Input -->
+                <div class="flex-shrink-0 bg-white border-t p-3 flex gap-2 items-center z-10 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+                    <input type="text" x-model="userInput" @keydown.enter="sendPrompt" :disabled="isProcessing"
+                           placeholder="Minta AI ubah kode..."
+                           class="flex-1 bg-gray-100 text-sm rounded-full px-4 py-2.5 outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 transition">
+                    <button @click="sendPrompt" :disabled="isProcessing || !userInput.trim()"
+                            class="bg-indigo-600 text-white h-10 w-10 rounded-full flex justify-center items-center shadow-md disabled:bg-gray-400 transition transform active:scale-95">
+                        <i class="fa-solid fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- CODE PAGE -->
+            <div x-show="tab === 'code'" class="h-full flex flex-col" x-transition.opacity style="display:none">
+                <div class="flex-shrink-0 bg-[#2d2d2d] text-gray-300 text-xs px-4 py-2 flex justify-between items-center border-b border-black">
+                    <span class="font-mono flex items-center gap-2"><i class="fa-brands fa-html5 text-orange-500 text-sm"></i> index.html</span>
+                    <button @click="copyCode" class="hover:text-white transition flex items-center gap-1">
+                        <i class="fa-regular fa-copy"></i> Salin
+                    </button>
+                </div>
+                <textarea x-model="codeBase" spellcheck="false"
+                          class="flex-1 w-full h-full min-h-0 bg-[#1e1e1e] text-[#d4d4d4] font-mono p-4 text-sm outline-none resize-none leading-relaxed"
+                          placeholder="<!-- Tulis atau tempel kode HTML di sini -->"></textarea>
+            </div>
+
+            <!-- PREVIEW PAGE -->
+            <div x-show="tab === 'preview'" class="h-full flex flex-col bg-white" x-transition.opacity style="display:none">
+                <div class="flex-shrink-0 bg-gray-200 text-gray-700 text-xs px-4 py-2 flex justify-between items-center border-b border-gray-300">
+                    <span class="font-semibold flex items-center gap-2"><i class="fa-solid fa-eye text-indigo-500"></i> Hasil Render</span>
+                    <button @click="updatePreview" class="hover:text-indigo-600 transition flex items-center gap-1">
+                        <i class="fa-solid fa-rotate-right"></i> Refresh
+                    </button>
+                </div>
+                <div class="flex-1 min-h-0 w-full relative">
+                    <iframe id="preview-frame" class="absolute inset-0 w-full h-full"></iframe>
+                </div>
+            </div>
+
+        </main>
+
+        <!-- Bottom Nav -->
+        <nav class="flex-shrink-0 bg-white border-t flex justify-between text-gray-500 text-xs pb-[env(safe-area-inset-bottom)] shadow-[0_-4px_10px_rgba(0,0,0,0.05)] z-20 px-2">
+            <button @click="tab='chat'" class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
+                    :class="tab==='chat' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
+                <i class="fa-solid fa-message text-lg"></i> Chat
+            </button>
+            <button @click="tab='code'" class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
+                    :class="tab==='code' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
+                <i class="fa-solid fa-code text-lg"></i> Code
+            </button>
+            <button @click="tab='preview'" class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
+                    :class="tab==='preview' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
+                <i class="fa-solid fa-play text-lg"></i> Preview
+            </button>
+        </nav>
+
+        <!-- Toast -->
+        <div x-show="toastMsg" x-transition.duration.300ms
+             class="absolute top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full text-sm shadow-xl z-50 whitespace-nowrap">
+            <i class="fa-solid fa-circle-check text-green-400 mr-1"></i>
+            <span x-text="toastMsg"></span>
+        </div>
+
+        <!-- Error Modal -->
+        <div x-show="previewError" class="absolute inset-0 bg-black/60 z-50 flex justify-center items-end p-0"
+             x-transition.opacity style="display:none">
+            <div class="bg-white rounded-t-2xl w-full max-w-md shadow-2xl flex flex-col" style="max-height:80dvh">
+                <div class="flex-shrink-0 flex items-center justify-between gap-3 px-5 pt-5 pb-3 border-b border-gray-100">
+                    <div class="flex items-center gap-3 text-red-600">
+                        <div class="bg-red-100 p-2 rounded-full"><i class="fa-solid fa-triangle-exclamation text-lg"></i></div>
+                        <h2 class="font-bold text-base">Error Terdeteksi!</h2>
+                    </div>
+                    <button @click="previewError=null" class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
+                </div>
+                <div class="flex-1 overflow-y-auto px-5 py-3 min-h-0">
+                    <p class="text-xs text-gray-500 mb-2">Log error lengkap dari preview:</p>
+                    <div class="bg-gray-950 p-3 rounded-xl text-xs font-mono text-green-400 whitespace-pre-wrap border border-gray-800 leading-relaxed">
+                        <span x-text="previewError"></span>
+                    </div>
+                </div>
+                <div class="flex-shrink-0 px-5 py-4 border-t border-gray-100 bg-white flex flex-col gap-2">
+                    <p class="text-xs text-gray-500 text-center">Kirim error ini ke AI agar diperbaiki otomatis?</p>
+                    <div class="flex gap-2">
+                        <button @click="previewError=null" class="flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-xl text-sm font-semibold hover:bg-gray-200 transition">Abaikan</button>
+                        <button @click="sendErrorToAI" class="flex-1 bg-indigo-600 text-white py-2.5 rounded-xl text-sm font-semibold hover:bg-indigo-700 shadow-md flex items-center justify-center gap-2 transition">
+                            <i class="fa-solid fa-robot"></i> Send ke AI
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('aiEditor', () => ({
+            tab: 'chat',
+            codeBase: `<!DOCTYPE html>\n<html>\n<head>\n  <title>Halo Dunia</title>\n</head>\n<body>\n  <h1>Halo Dunia!</h1>\n  <button onclick="showAlert()">Klik Saya</button>\n  <script>\n    function showAlert() {\n      alert('Halo!');\n    }\n  <\/script>\n</body>\n</html>`,
+            chatHistory: [{role:'ai', content:'Halo! Saya AI Editor (Server-Side). Minta saya mengubah bagian mana saja di halaman ini!'}],
+            userInput: '',
+            isProcessing: false,
+            loopCount: 0,
+            toastMsg: '',
+            previewError: null,
+            _pollTimer: null,
+
+            init() {
+                this.$watch('tab', val => { if (val === 'preview') this.updatePreview(); });
+                this.$watch('codeBase', () => { if (this.tab === 'preview') this.updatePreview(); });
+                window.addEventListener('message', event => {
+                    if (event.data && event.data.type === 'PREVIEW_ERROR') {
+                        this.previewError = this.previewError
+                            ? this.previewError + '\n\n' + event.data.error
+                            : event.data.error;
+                    }
+                });
+            },
+
+            showToast(msg) {
+                this.toastMsg = msg;
+                setTimeout(() => this.toastMsg = '', 3000);
+            },
+
+            scrollToBottom() {
+                setTimeout(() => {
+                    const c = document.getElementById('chat-container');
+                    if (c) c.scrollTop = c.scrollHeight;
+                }, 100);
+            },
+
+            uploadFile(event) {
+                const file = event.target.files[0];
+                if (!file) return;
+                const reader = new FileReader();
+                reader.onload = e => {
+                    this.codeBase = e.target.result;
+                    this.showToast('File berhasil diunggah!');
+                    this.tab = 'code';
+                };
+                reader.readAsText(file);
+                event.target.value = '';
+            },
+
+            copyCode() {
+                navigator.clipboard.writeText(this.codeBase);
+                this.showToast('Kode berhasil disalin!');
+            },
+
+            downloadCode() {
+                try {
+                    const blob = new Blob([this.codeBase], {type:'text/html'});
+                    const url  = URL.createObjectURL(blob);
+                    const a    = document.createElement('a');
+                    a.href = url; a.download = 'index.html';
+                    document.body.appendChild(a); a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                    this.showToast('File berhasil diunduh!');
+                } catch { this.showToast('Gagal mengunduh file'); }
+            },
+
+            updatePreview() {
+                const iframe = document.getElementById('preview-frame');
+                if (!iframe) return;
+                const errorCatcherScript = `<script>
+(function(){
+    var _all=[],_t=null;
+    function _report(d){_all.push(d);clearTimeout(_t);_t=setTimeout(function(){if(_all.length)window.parent.postMessage({type:'PREVIEW_ERROR',error:_all.join('\\n\\n---\\n\\n')},'*');},200);}
+    function _fmt(e){if(!e)return'';var o=e.name?e.name+': '+e.message:String(e);if(e.stack){o+='\\n  Stack:\\n  '+e.stack.split('\\n').slice(0,5).join('\\n  ');}return o;}
+    window.onerror=function(m,s,l,c,e){var d;if(e){d='[Runtime Error]\\n'+_fmt(e);if(s)d+='\\n  File: '+s;if(l)d+='\\n  Line: '+l+(c?', Col: '+c:'');}else if(m==='Script error.'||m==='Script error'){d='[Cross-Origin Script Error]\\n  Browser menyembunyikan detail.\\n  File: '+(s||'unknown');}else{d='[Runtime Error] '+m;if(s)d+='\\n  File: '+s;if(l)d+='\\n  Line: '+l+(c?', Col: '+c:'');}_report(d);return true;};
+    window.addEventListener('unhandledrejection',function(e){var r=e.reason,d='[Unhandled Promise Rejection]\\n';if(r instanceof Error){d+=_fmt(r);}else{d+=String(r);}_report(d);});
+    var _oe=console.error.bind(console),_ow=console.warn.bind(console);
+    console.error=function(){var m=Array.from(arguments).map(function(a){return a instanceof Error?_fmt(a):(typeof a==='object'?JSON.stringify(a,null,2):String(a));}).join(' ');_report('[console.error] '+m);_oe.apply(console,arguments);};
+    console.warn=function(){var m=Array.from(arguments).map(function(a){return typeof a==='object'?JSON.stringify(a):String(a);}).join(' ');_report('[console.warn] '+m);_ow.apply(console,arguments);};
+    var _of=window.fetch;window.fetch=function(url,opts){return _of.apply(this,arguments).then(function(r){if(!r.ok)_report('[Fetch Error] '+(opts&&opts.method||'GET')+' '+url+'\\n  Status: '+r.status+' '+r.statusText);return r;}).catch(function(err){_report('[Fetch Failed] '+url+'\\n  '+_fmt(err));throw err;});};
+    var _oc=document.createElement.bind(document);document.createElement=function(tag){var el=_oc(tag);if(tag.toLowerCase()==='script')el.addEventListener('error',function(){_report('[Script Load Error] Gagal memuat: '+(el.src||'unknown'));});return el;};
+})();
+<\/script>`;
+                let html = this.codeBase;
+                this.previewError = null;
+                html = html.includes('<head>')
+                    ? html.replace('<head>', '<head>' + errorCatcherScript)
+                    : errorCatcherScript + html;
+                iframe.srcdoc = html;
+            },
+
+            sendErrorToAI() {
+                const msg = `Perbaiki error berikut yang terdeteksi saat preview:\n\n${this.previewError}\n\nAnalisa penyebabnya berdasarkan error di atas, lalu perbaiki kode menggunakan format <find>.`;
+                this.previewError = null;
+                this.tab = 'chat';
+                this.chatHistory.push({role:'user', content: msg, isErrorPrompt: true});
+                this.scrollToBottom();
+                this._submitToServer(msg);
+            },
+
+            async sendPrompt() {
+                if (!this.userInput.trim() || this.isProcessing) return;
+                const prompt = this.userInput;
+                this.userInput = '';
+                this.chatHistory.push({role:'user', content: prompt});
+                this.scrollToBottom();
+                this._submitToServer(prompt);
+            },
+
+            /* ── Server-side job flow ── */
+            async _submitToServer(instruction) {
+                this.isProcessing = true;
+                this.loopCount    = 0;
+                try {
+                    const res  = await fetch('/api/chat', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({instruction, code_base: this.codeBase}),
+                    });
+                    const data = await res.json();
+                    if (!res.ok) throw new Error(data.error || 'Server error');
+                    this._pollJob(data.job_id);
+                } catch (err) {
+                    this.isProcessing = false;
+                    this.chatHistory.push({role:'ai', content: '❌ ' + err.message});
+                    this.scrollToBottom();
+                }
+            },
+
+            _pollJob(jobId, interval = 1500) {
+                clearTimeout(this._pollTimer);
+                this._pollTimer = setTimeout(async () => {
+                    try {
+                        const res  = await fetch(`/api/job/${jobId}`);
+                        const data = await res.json();
+
+                        this.loopCount = data.loop_count || 0;
+
+                        if (data.status === 'running' || data.status === 'pending') {
+                            this._pollJob(jobId, interval);
+                            return;
+                        }
+
+                        if (data.status === 'done') {
+                            this.codeBase = data.result.code;
+                            this.chatHistory.push({
+                                role: 'ai',
+                                content: data.result.message,
+                                action:  data.result.action_label,
+                            });
+                        } else {
+                            this.chatHistory.push({
+                                role: 'ai',
+                                content: '❌ ' + (data.error || 'Terjadi kesalahan pada server.'),
+                            });
+                        }
+                    } catch {
+                        this.chatHistory.push({role:'ai', content:'❌ Gagal membaca status job dari server.'});
+                    } finally {
+                        this.isProcessing = false;
+                        this.scrollToBottom();
+                    }
+                }, interval);
+            },
+
+        }));
+    });
+    </script>
+</body>
+</html>"""
+
+@app.route("/")
+def index():
+    return Response(HTML, mimetype="text/html")
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=5000)