<html lang='en'> <head> <meta charset='UTF-8'> <title>AI App Generator</title> <script src='https://cdn.tailwindcss.com'></script> </head> <body class='bg-slate-900 text-white font-sans p-8'>

AI Platform Builder

1. Chat with AI to build. 2. Bind your domain. 3. Delete when done.

<input id='appName' type='text' placeholder='App Name (e.g. calculator)' class='w-full p-3 rounded-lg bg-slate-700 text-white border border-slate-600 focus:ring-2 focus:ring-teal-500 outline-none'>
Chat history will appear here...
<textarea id='prompt' rows='3' placeholder='Tell AI what to build or change...' class='w-full p-3 rounded-lg bg-slate-700 text-white border border-slate-600 focus:ring-2 focus:ring-teal-500 outline-none'></textarea> <button id='sendBtn' onclick='sendChat()' class='w-full bg-blue-500 text-white font-bold py-3 rounded-lg shadow-lg hover:bg-blue-400 transition'>Send & Update App</button>
<button id='deployBtn' disabled onclick='deployApp()' class='w-full bg-teal-500 text-slate-900 font-extrabold py-3 rounded-lg shadow-lg hover:bg-teal-400 transition disabled:opacity-50 disabled:cursor-not-allowed'>Bind Custom Domain</button> <button id='delBtn' disabled onclick='deleteApp()' class='w-full bg-red-600 text-white font-bold py-3 rounded-lg shadow-lg hover:bg-red-500 transition disabled:opacity-50 disabled:cursor-not-allowed'>Delete Worker</button>

Worker Preview

<iframe id='preview' src='about:blank' class='w-full h-full border-none bg-white absolute inset-0'></iframe>
<script> let messages = []; async function sendChat() { const btn = document.getElementById('sendBtn'); const stat = document.getElementById('status'); const appName = document.getElementById('appName').value; const prompt = document.getElementById('prompt').value; const chatDiv = document.getElementById('chatHistory'); if (!appName || !prompt) return alert('Fill out App Name and Prompt!'); if (chatDiv.innerHTML.includes('Chat history will appear')) chatDiv.innerHTML = ''; chatDiv.innerHTML += '
' + prompt + '
'; document.getElementById('prompt').value = ''; chatDiv.scrollTop = chatDiv.scrollHeight; messages.push({ role: 'user', content: prompt }); btn.innerText = 'AI is writing & deploying... (>15s)'; btn.disabled = true; stat.classList.remove('hidden'); stat.innerText = '[PROCESSING] Building Worker...'; try { const res = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ app_name: appName, history: messages }) }); const data = await res.json(); if (data.error) throw new Error(data.error); messages.push({ role: 'assistant', content: data.raw_html }); chatDiv.innerHTML += '
[SUCCESS] App updated and deployed to Edge!
'; chatDiv.scrollTop = chatDiv.scrollHeight; if (data.preview_url) { document.getElementById('preview').src = data.preview_url; document.getElementById('liveLink').href = data.preview_url; document.getElementById('liveLink').classList.remove('hidden'); } document.getElementById('deployBtn').disabled = false; document.getElementById('delBtn').disabled = false; stat.innerText = 'Worker updated!'; } catch(e) { chatDiv.innerHTML += '
[ERROR] ' + e.message + '
'; chatDiv.scrollTop = chatDiv.scrollHeight; stat.innerText = 'Error occurred.'; messages.pop(); } finally { btn.innerText = 'Send & Update App'; btn.disabled = false; } } async function deployApp() { const btn = document.getElementById('deployBtn'); const stat = document.getElementById('status'); const appName = document.getElementById('appName').value; btn.innerText = 'Binding Domain...'; btn.disabled = true; stat.classList.remove('hidden'); stat.innerText = '[PROCESSING] Attaching custom domain...'; try { const res = await fetch('/api/deploy', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ app_name: appName }) }); const data = await res.json(); if (data.error) throw new Error(data.error); stat.innerHTML = '[SUCCESS] Domain Bound! ' + data.live_url + ''; } catch(e) { stat.innerHTML = '[ERROR] ' + e.message; } finally { btn.innerText = 'Bind Custom Domain'; btn.disabled = false; } } async function deleteApp() { const btn = document.getElementById('delBtn'); const stat = document.getElementById('status'); const appName = document.getElementById('appName').value; if (!confirm('Delete Worker ' + appName + '?')) return; btn.innerText = 'Deleting...'; btn.disabled = true; stat.innerText = '[PROCESSING] Deleting Worker...'; try { const res = await fetch('/api/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ app_name: appName }) }); const data = await res.json(); if (data.error) throw new Error(data.error); stat.innerHTML = '[SUCCESS] Worker Deleted!'; document.getElementById('preview').src = 'about:blank'; document.getElementById('liveLink').classList.add('hidden'); document.getElementById('deployBtn').disabled = true; messages = []; document.getElementById('chatHistory').innerHTML = '
Chat history will appear here...
'; } catch(e) { stat.innerHTML = '[ERROR] ' + e.message; } finally { btn.innerText = 'Delete Worker'; btn.disabled = false; } } </script> </body> </html>