Update app.py

app.py

@@ -1,4 +1,3 @@
-
 """
 AI HTML Editor — Flask Server
 Semua pemrosesan (AI call, find/change, fuzzy match) dilakukan di sisi server.
@@ -6,7 +5,7 @@ Job disimpan di memori dengan TTL 1 hari.
 """
 
 from flask import Flask, request, jsonify, Response
-import uuid, time, re, threading, requests
+import uuid, time, re, json, threading, requests
 
 app = Flask(__name__)
 
@@ -49,24 +48,9 @@ def update_job(jid: str, **kwargs):
             JOBS[jid].update(kwargs)
 
 # ─────────────────────────────────────────────
-#  ALGORITMA FIND & CHANGE
+#  ALGORITMA FIND & CHANGE  (ported dari JS)
 # ─────────────────────────────────────────────
 
-def normalize_ai_text(text: str) -> str:
-    """
-    1. Mengubah literal '\n', '\t', '\r' dari AI menjadi karakter whitespace asli.
-    2. Memperbaiki jika AI mengembalikan HTML yang ter-escape secara tidak sengaja.
-    """
-    # Ubah literal escape menjadi karakter sesungguhnya
-    text = text.replace('\\n', '\n').replace('\\t', '\t').replace('\\r', '\r')
-    
-    # Decode HTML Entities
-    return (text.replace('&', '&')
-                .replace('&lt;',  '<')
-                .replace('&gt;',  '>')
-                .replace('&quot;', '"')
-                .replace('&#39;', "'"))
-
 def levenshtein(a: str, b: str) -> int:
     la, lb = len(a), len(b)
     if la == 0: return lb
@@ -88,6 +72,7 @@ def calculate_similarity(s1: str, s2: str) -> float:
     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}
@@ -104,7 +89,7 @@ def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
     except re.error:
         pass
 
-    # Level 2 — sliding window + Levenshtein
+    # Level 2 — sliding window + Levenshtein (hanya jika < 3000 chars)
     if len(search_trimmed) > 3000:
         return {"success": False, "result": source}
 
@@ -135,18 +120,24 @@ def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
 
     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("AI Gagal menggunakan format tag <execution>.")
+        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("AI tidak memberikan tag <find> yang berisi <element> dan <change>.")
+        raise ValueError("Kamu wajib menggunakan tag <find> berisi <element> dan <change>.")
 
     temp_code     = code_base
     success_count = 0
@@ -156,13 +147,16 @@ def apply_find_change(code_base: str, ai_response: str) -> dict:
         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} formatnya salah (kehilangan element/change).")
+            raise ValueError(f"Blok <find> ke-{i+1} tidak memiliki <element> atau <change>.")
 
-        # Normalisasi: Ubah literal \n jadi newline asli & decode entitas HTML
-        old_code = normalize_ai_text(el_match.group(1))
-        new_code = normalize_ai_text(ch_match.group(1))
-        
+        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)
@@ -178,43 +172,33 @@ def apply_find_change(code_base: str, ai_response: str) -> dict:
                 is_fuzzy = True
             else:
                 raise ValueError(
-                    f"Kode pada <element> ke-{i+1} TIDAK DITEMUKAN persis di Codebase.\n"
-                    f"Teks yang kamu kirim:\n{old_code[:100]}..."
+                    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://api.siputzx.my.id/api/ai/gemini-lite"
-VALID_MODELS = {
-    "gemini-3-flash-preview",
-    "gemini-3.1-flash-lite-preview",
-    "gemini-2.5-flash-lite",
-    "gemini-2.5-flash",
-}
-DEFAULT_MODEL = "gemini-2.5-flash"
-
-def call_ai(prompt: str, model: str = DEFAULT_MODEL) -> str:
-    if model not in VALID_MODELS:
-        model = DEFAULT_MODEL
+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, "model": model},
+        json={"prompt": prompt},
         timeout=60,
         headers={"Content-Type": "application/json"},
     )
     resp.raise_for_status()
     data = resp.json()
-    if isinstance(data, dict):
-        answer = data.get("data") or data.get("result") or data.get("answer") or data.get("response")
-        if answer:
-            if isinstance(answer, dict):
-                answer = answer.get("answer") or answer.get("text") or str(answer)
-            return str(answer)
-    raise RuntimeError(f"Format respons API tidak dikenali: {str(data)[:200]}")
+    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).
@@ -223,13 +207,14 @@ Codebase saat ini:
 {code_base}
 ```
 
-ATURAN WAJIB PENGGUNAAN BLOK <find>:
-1. <element> HARUS berisi teks/kode yang IDENTIK PERSIS dengan Codebase (termasuk spasi, tab, dan baris kosong). JANGAN perbaiki indentasi di dalam <element>!
-2. JANGAN memasukkan potongan kode yang terlalu panjang. Ambil sependek mungkin (1-4 baris) asalkan UNIK.
-3. <change> berisi kode baru yang akan menggantikan <element> tersebut.
-4. Balas HANYA dengan format <execution> seperti contoh. DILARANG menulis ulang seluruh codebase di luar tag.
+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 YANG BENAR:
+CONTOH JAWABAN:
 <execution>
 <responding>Saya telah mengganti teks H1 dan warna tombol.</responding>
 <find>
@@ -242,29 +227,25 @@ CONTOH JAWABAN YANG BENAR:
 </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,
-                model: str = DEFAULT_MODEL):
-    """Rekursif self-healing AI."""
+                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. Mohon salin sebagian kecil kode secara manual ke dalam chat jika ingin diubah.",
+            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[PENTING! ERROR PADA JAWABANMU SEBELUMNYA]:\n{error_feedback}\n\n"
-                       "INSTRUKSI PERBAIKAN:\n"
-                       "1. Kesalahan ini terjadi karena teks di <element> beda spasi/karakter dengan codebase.\n"
-                       "2. SOLUSI: Ambil potongan kode yang LEBIH PENDEK (1-2 baris saja) yang unik.\n"
-                       "3. Jangan mengubah spasi dan indentasi sedikitpun saat menyalin ke <element>!")
+            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, model=model)
+        ai_text = call_ai(prompt)
         result  = apply_find_change(code_base, ai_text)
 
         update_job(jid,
@@ -274,24 +255,27 @@ def run_ai_loop(jid: str, user_instruction: str, code_base: str,
         )
 
     except Exception as exc:
-        # Self-healing: retry dengan mengirimkan error ke AI
+        # Self-healing: retry
         threading.Thread(
             target=run_ai_loop,
             args=(jid, user_instruction, code_base, loop + 1, str(exc), max_loops),
-            kwargs={"model": model},
             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", "")
-    model       = body.get("model", DEFAULT_MODEL)
 
     if not instruction:
         return jsonify({"error": "instruction wajib diisi"}), 400
@@ -302,14 +286,15 @@ def api_chat():
     threading.Thread(
         target=run_ai_loop,
         args=(jid, instruction, code_base),
-        kwargs={"model": model},
         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
@@ -326,14 +311,17 @@ def api_job_status(jid):
 
     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)
 # ─────────────────────────────────────────────
@@ -358,34 +346,18 @@ HTML = r"""<!DOCTYPE html>
     <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 shadow-md z-10">
-            <div class="flex justify-between items-center px-4 pt-3 pb-2">
-                <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="clearChat" title="Hapus riwayat chat" class="bg-indigo-500 hover:bg-red-500 p-2 rounded text-sm transition font-medium shadow">
-                        <i class="fa-solid fa-trash-can"></i>
-                    </button>
-                    <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>
-            </div>
-            <div class="px-4 pb-2 flex items-center gap-2">
-                <i class="fa-solid fa-robot text-indigo-300 text-xs"></i>
-                <span class="text-indigo-200 text-xs">Model:</span>
-                <select x-model="selectedModel" @change="saveModel"
-                        class="flex-1 bg-indigo-700 text-white text-xs rounded px-2 py-1 outline-none border border-indigo-400 cursor-pointer">
-                    <option value="gemini-3-flash-preview">Gemini 3 Flash Preview</option>
-                    <option value="gemini-3.1-flash-lite-preview">Gemini 3.1 Flash Lite Preview</option>
-                    <option value="gemini-2.5-flash-lite">Gemini 2.5 Flash Lite</option>
-                    <option value="gemini-2.5-flash">Gemini 2.5 Flash</option>
-                </select>
+        <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>
 
@@ -526,17 +498,10 @@ HTML = r"""<!DOCTYPE html>
 
     <script>
     document.addEventListener('alpine:init', () => {
-        const LS_CODE = 'aiEditor_codeBase';
-        const LS_CHAT = 'aiEditor_chatHistory';
-        const LS_MODEL = 'aiEditor_model';
-        const DEFAULT_CODE = `<!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>`;
-        const DEFAULT_CHAT = [{role:'ai', content:'Halo! Saya AI Editor (Server-Side). Minta saya mengubah bagian mana saja di halaman ini!'}];
-
         Alpine.data('aiEditor', () => ({
             tab: 'chat',
-            codeBase: localStorage.getItem(LS_CODE) || DEFAULT_CODE,
-            chatHistory: (() => { try { return JSON.parse(localStorage.getItem(LS_CHAT)) || DEFAULT_CHAT; } catch { return DEFAULT_CHAT; } })(),
-            selectedModel: localStorage.getItem(LS_MODEL) || 'gemini-2.5-flash',
+            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,
@@ -546,13 +511,7 @@ HTML = r"""<!DOCTYPE html>
 
             init() {
                 this.$watch('tab', val => { if (val === 'preview') this.updatePreview(); });
-                this.$watch('codeBase', val => {
-                    localStorage.setItem(LS_CODE, val);
-                    if (this.tab === 'preview') this.updatePreview();
-                });
-                this.$watch('chatHistory', val => {
-                    try { localStorage.setItem(LS_CHAT, JSON.stringify(val)); } catch {}
-                });
+                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
@@ -562,18 +521,6 @@ HTML = r"""<!DOCTYPE html>
                 });
             },
 
-            saveModel() {
-                localStorage.setItem(LS_MODEL, this.selectedModel);
-                this.showToast('Model: ' + this.selectedModel);
-            },
-
-            clearChat() {
-                if (!confirm('Hapus semua riwayat chat?')) return;
-                this.chatHistory = [{role:'ai', content:'Halo! Saya AI Editor (Server-Side). Minta saya mengubah bagian mana saja di halaman ini!'}];
-                localStorage.removeItem(LS_CHAT);
-                this.showToast('Riwayat chat dihapus!');
-            },
-
             showToast(msg) {
                 this.toastMsg = msg;
                 setTimeout(() => this.toastMsg = '', 3000);
@@ -623,14 +570,13 @@ HTML = r"""<!DOCTYPE html>
                 const errorCatcherScript = `<script>
 (function(){
     var _all=[],_t=null;
-    function _isTailwind(m){return/tailwind|cdn\\.tailwindcss/i.test(m);}
     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){if(m==='Script error.'||m==='Script error')return true;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{d='[Runtime Error] '+m;if(s)d+='\\n  File: '+s;if(l)d+='\\n  Line: '+l+(c?', Col: '+c:'');}_report(d);return true;};
+    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(' ');if(_isTailwind(m))return;_report('[console.warn] '+m);_ow.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;};
 })();
@@ -669,7 +615,7 @@ HTML = r"""<!DOCTYPE html>
                     const res  = await fetch('/api/chat', {
                         method: 'POST',
                         headers: {'Content-Type': 'application/json'},
-                        body: JSON.stringify({instruction, code_base: this.codeBase, model: this.selectedModel}),
+                        body: JSON.stringify({instruction, code_base: this.codeBase}),
                     });
                     const data = await res.json();
                     if (!res.ok) throw new Error(data.error || 'Server error');
@@ -728,5 +674,6 @@ HTML = r"""<!DOCTYPE html>
 def index():
     return Response(HTML, mimetype="text/html")
 
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)