kAIxu Magic
Creative AI Suite
Key: Checking...
IDE

Drop an image to begin

or click Upload to browse your files

'; document.getElementById('ui-preview-label').textContent = 'Error — check your key'; broadcastLog('[Magic] UI gen error: ' + e.message, 'error'); } finally { btn.disabled = false; btn.innerHTML = 'Generate'; lucide.createIcons(); } } async function refineUI() { if (!lastUICode) return; var instruction = window.prompt('What do you want to change or improve?'); if (!instruction || !instruction.trim()) return; document.getElementById('refine-btn').disabled = true; document.getElementById('refine-btn').textContent = 'Refining...'; try { var sys = 'You are kAIxu UI Generator. You receive an existing HTML page and a refinement instruction. Return ONLY the complete updated page. No markdown, no explanation — just the full HTML.'; var code = await gwChat([ { role: 'system', content: sys }, { role: 'user', content: 'Current HTML:\n' + lastUICode.substring(0, 14000) + '\n\nInstruction: ' + instruction } ], { model: 'kAIxU', max_tokens: 16000, temperature: 0.3 }); var html = code.trim(); var dtIdx = html.search(/ 0) html = html.substring(dtIdx); var closeIdx = html.lastIndexOf(''); if (closeIdx !== -1) html = html.substring(0, closeIdx + 7); lastUICode = html; document.getElementById('ui-preview').srcdoc = html; document.getElementById('ui-code-output').value = html; } catch(e) { alert('Refine failed: ' + e.message); } finally { document.getElementById('refine-btn').disabled = false; document.getElementById('refine-btn').innerHTML = ' Refine'; lucide.createIcons(); } } function copyUICode() { if (!lastUICode) return; navigator.clipboard.writeText(lastUICode).then(function() { broadcastLog('[Magic] Code copied', 'success'); }); } function openInNewTab() { if (!lastUICode) return; var blob = new Blob([lastUICode], { type: 'text/html' }); window.open(URL.createObjectURL(blob), '_blank'); } // PROMPT FORGE var forgeTarget = 'code'; function setForgeTarget(btn, target) { forgeTarget = target; document.querySelectorAll('.forge-target').forEach(function(b) { b.className = 'forge-target tag cursor-pointer'; }); btn.className = 'forge-target tag green cursor-pointer'; } var targetDescriptions = { image: 'text-to-image AI (Midjourney/DALL-E/Stable Diffusion) — include subject, style, lighting, camera angle, mood, color palette, quality modifiers like "8K, photorealistic, cinematic"', code: 'code/UI generation AI — include tech stack preferences, visual style, specific features, layout requirements, and interaction patterns', chat: 'conversational AI assistant — clear task context, desired persona/tone, constraints, output format and length, and examples if helpful', video: 'text-to-video AI (Sora/Runway style) — include scene description, camera movement (pan/zoom/cut), motion details, atmosphere, duration, visual style', marketing: 'marketing copywriter AI — target audience, platform/channel, brand voice, USP, emotional hook, desired action, and tone (urgent/playful/professional)' }; async function forgePrompt() { var raw = document.getElementById('forge-input').value.trim(); if (!raw) { alert('Enter your raw idea first.'); return; } var btn = event.currentTarget; btn.disabled = true; btn.textContent = 'Forging...'; try { var refined = await gwChat([{ role: 'user', content: 'You are an expert prompt engineer. Transform this raw idea into a highly optimised, detailed prompt specifically designed for ' + (targetDescriptions[forgeTarget] || 'an AI') + '.\n\nRaw idea: "' + raw + '"\n\nOutput ONLY the refined prompt — no intro sentence, no quotes around it, no "here is your prompt". Just the prompt itself, starting immediately.' }], { temperature: 0.65, max_tokens: 1024 }); document.getElementById('forge-output').textContent = refined; document.getElementById('forge-output-wrap').classList.remove('hidden'); } catch(e) { alert('Forge failed: ' + e.message); } finally { btn.disabled = false; btn.innerHTML = ' Forge Prompt'; lucide.createIcons(); } } function copyForged() { navigator.clipboard.writeText(document.getElementById('forge-output').textContent); } function sendToUIGen() { document.getElementById('ui-prompt').value = document.getElementById('forge-output').textContent; setMode('ui'); } function loadStarter(el) { document.getElementById('forge-input').value = el.dataset.prompt; } function scrollToStarters() { document.getElementById('prompt-starters').scrollIntoView({ behavior: 'smooth' }); } // EXPORT function exportOutput() { if (currentMode === 'image' && imgState.history.length) { var a = document.createElement('a'); a.href = imgState.history[imgState.idx]; a.download = 'kaixu-magic-' + Date.now() + '.png'; a.click(); } else if (currentMode === 'ui' && lastUICode) { var blob = new Blob([lastUICode], { type: 'text/html' }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'kaixu-ui-' + Date.now() + '.html'; a.click(); setTimeout(function() { URL.revokeObjectURL(a.href); }, 2000); } } // INIT function init() { lucide.createIcons(); checkKeyStatus(); setMode('image'); // Spin animation for gen button loading state if (!document.getElementById('km-spin-style')) { var s = document.createElement('style'); s.id = 'km-spin-style'; s.textContent = '@keyframes spin { to { transform: rotate(360deg); } }'; document.head.appendChild(s); } // Drag-drop document.addEventListener('dragover', function(e) { e.preventDefault(); }); document.addEventListener('drop', function(e) { e.preventDefault(); var file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { var reader = new FileReader(); reader.onload = function(ev) { imgState.original = ev.target.result; imgState.history = [ev.target.result]; imgState.idx = 0; imgState.zoom = 1; setMode('image'); renderImage(); }; reader.readAsDataURL(file); } }); // Keyboard shortcuts document.addEventListener('keydown', function(e) { if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) { e.preventDefault(); imgUndo(); } if ((e.metaKey || e.ctrlKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) { e.preventDefault(); imgRedo(); } }); broadcastLog('[Magic] App initialized', 'info'); } window.addEventListener('load', init);