Spaces:

Ricky01anjay
/

Ai-HTML-Editor

Paused

App Files Files Community

Ricky01anjay commited on Apr 4

Commit

a153b34

verified ·

1 Parent(s): ca58e57

Update app.py

Browse files

Files changed (1) hide show

app.py +86 -27

app.py CHANGED Viewed

@@ -184,20 +184,33 @@ def apply_find_change(code_base: str, ai_response: str) -> dict:
 # ─────────────────────────────────────────────
 #  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:
@@ -229,7 +242,8 @@ CONTOH JAWABAN:
 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,
@@ -245,7 +259,7 @@ def run_ai_loop(jid: str, user_instruction: str, code_base: str,
             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,
@@ -259,6 +273,7 @@ def run_ai_loop(jid: str, user_instruction: str, code_base: str,
         threading.Thread(
             target=run_ai_loop,
             args=(jid, user_instruction, code_base, loop + 1, str(exc), max_loops),
             daemon=True,
         ).start()
@@ -276,6 +291,7 @@ def api_chat():
     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
@@ -286,6 +302,7 @@ def api_chat():
     threading.Thread(
         target=run_ai_loop,
         args=(jid, instruction, code_base),
         daemon=True,
     ).start()
@@ -346,18 +363,34 @@ 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 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>
@@ -498,10 +531,17 @@ HTML = r"""<!DOCTYPE html>
     <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,
@@ -511,7 +551,13 @@ HTML = r"""<!DOCTYPE html>
             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
@@ -521,6 +567,18 @@ HTML = r"""<!DOCTYPE html>
                 });
             },
             showToast(msg) {
                 this.toastMsg = msg;
                 setTimeout(() => this.toastMsg = '', 3000);
@@ -570,13 +628,14 @@ HTML = r"""<!DOCTYPE html>
                 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;};
 })();
@@ -615,7 +674,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}),
                     });
                     const data = await res.json();
                     if (!res.ok) throw new Error(data.error || 'Server error');

 # ─────────────────────────────────────────────
 #  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
     resp = requests.post(
         GEMINI_API,
+        json={"prompt": prompt, "model": model},
         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]}")
 def build_system_prompt(code_base: str) -> str:
 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 di thread terpisah — sama dengan runAILoop() JS."""
     if loop >= max_loops:
         update_job(jid,
             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)
         result  = apply_find_change(code_base, ai_text)
         update_job(jid,
         threading.Thread(
             target=run_ai_loop,
             args=(jid, user_instruction, code_base, loop + 1, str(exc), max_loops),
+            kwargs={"model": model},
             daemon=True,
         ).start()
     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
     threading.Thread(
         target=run_ai_loop,
         args=(jid, instruction, code_base),
+        kwargs={"model": model},
         daemon=True,
     ).start()
     <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>
             </div>
         </header>
     <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',
             userInput: '',
             isProcessing: false,
             loopCount: 0,
             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 {}
+                });
                 window.addEventListener('message', event => {
                     if (event.data && event.data.type === 'PREVIEW_ERROR') {
                         this.previewError = this.previewError
                 });
             },
+            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);
                 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.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);};
     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;};
 })();
                     const res  = await fetch('/api/chat', {
                         method: 'POST',
                         headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({instruction, code_base: this.codeBase, model: this.selectedModel}),
                     });
                     const data = await res.json();
                     if (!res.ok) throw new Error(data.error || 'Server error');