Spaces:
Running
Running
| <!-- | |
| ZewAI-1.5-PRO — Super-Advanced Fake AI Frontend | |
| Single-file HTML (open in browser). No backend required. | |
| Features: | |
| - Conversational UI with persona/model selector | |
| - Fake "thinking" progress + typing animation | |
| - Mock image generator (procedural canvas art) | |
| - Voice output (SpeechSynthesis) for responses | |
| - Settings, themes, logs, export conversation | |
| - Download as .html button | |
| This is intentionally a front-end simulation only — no real AI calls. | |
| Feel free to edit the canned responses and behavior. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>ZewAI-1.5-PRO — Fake SuperAI</title> | |
| <style> | |
| :root{--bg:#0f1724;--panel:#0b1220;--accent:#7c3aed;--muted:#9aa4b2;--glass: rgba(255,255,255,0.03)} | |
| *{box-sizing:border-box} | |
| html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial} | |
| body{background:linear-gradient(180deg,#071021 0%, #071827 50%, #04101a 100%);color:#e6eef6} | |
| .app{max-width:1100px;margin:28px auto;padding:20px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);box-shadow:0 6px 30px rgba(2,6,23,0.7)} | |
| header{display:flex;gap:18px;align-items:center} | |
| .logo{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px} | |
| h1{margin:0;font-size:20px} | |
| .meta{color:var(--muted);font-size:13px} | |
| .main{display:grid;grid-template-columns:320px 1fr;gap:18px;margin-top:18px} | |
| .sidebar{background:var(--panel);padding:14px;border-radius:12px;height:78vh;overflow:auto} | |
| .controls label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px} | |
| select,input[type=range],.btn{width:100%} | |
| .btn{display:inline-block;padding:10px 12px;border-radius:8px;background:linear-gradient(90deg,var(--accent),#06b6d4);color:white;border:none;cursor:pointer} | |
| .small{font-size:13px;padding:8px} | |
| .chat-panel{background:var(--glass);padding:14px;border-radius:12px;height:78vh;display:flex;flex-direction:column} | |
| .messages{flex:1;overflow:auto;padding-right:6px} | |
| .message{margin:10px 0;display:flex;gap:10px} | |
| .me{justify-content:flex-end} | |
| .bubble{max-width:78%;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 1px 0 rgba(255,255,255,0.02)} | |
| .bubble.me{background:linear-gradient(90deg,#1e293b,#0f1724);color:#cfe8ff} | |
| .status{font-size:12px;color:var(--muted);margin-bottom:6px} | |
| .composer{display:flex;gap:8px;margin-top:10px} | |
| .composer textarea{flex:1;resize:none;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit;min-height:60px} | |
| .toolbar{display:flex;gap:8px;align-items:center} | |
| .fake-image{width:220px;height:120px;border-radius:10px;background:#071827;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px} | |
| .log{font-family:monospace;font-size:12px;color:var(--muted);margin-top:12px;white-space:pre-wrap} | |
| footer{margin-top:12px;display:flex;justify-content:space-between;align-items:center} | |
| .chip{display:inline-flex;gap:8px;align-items:center;padding:8px;border-radius:999px;background:rgba(255,255,255,0.02)} | |
| /* typing caret */ | |
| .typing{display:inline-block;vertical-align:bottom;width:8px;height:12px;background:linear-gradient(180deg,#fff,#fff);margin-left:6px;border-radius:2px;animation:blink 1s steps(2) infinite} | |
| @keyframes blink{50%{opacity:0}} | |
| /* responsive */ | |
| @media (max-width:880px){.main{grid-template-columns:1fr;}.sidebar{order:2;height:240px}.chat-panel{order:1;height:60vh}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app" role="application" aria-label="ZewAI 1.5 PRO simulator"> | |
| <header> | |
| <div class="logo">ZEW</div> | |
| <div> | |
| <h1>ZewAI-1.5-PRO <small style="color:var(--muted);font-weight:600;margin-left:8px">(Simulated)</small></h1> | |
| <div class="meta">Super-advanced fake AI interface — locally simulated behaviors, no network calls.</div> | |
| </div> | |
| </header> | |
| <div class="main"> | |
| <aside class="sidebar" role="region" aria-label="Controls"> | |
| <div class="controls"> | |
| <label>Model Persona</label> | |
| <select id="persona"> | |
| <option value="oracle">Oracle — poetic & mystical</option> | |
| <option value="professor">Professor — technical & precise</option> | |
| <option value="friend">Friend — casual & funny</option> | |
| <option value="ceo">CEO — short & decisive</option> | |
| <option value="mystery">MYSTERY — unpredictable</option> | |
| </select> | |
| <label>Creativity</label> | |
| <input id="creativity" type="range" min="0" max="100" value="40" /> | |
| <label>Response Length</label> | |
| <select id="length"> | |
| <option value="short">Short</option> | |
| <option value="medium" selected>Medium</option> | |
| <option value="long">Long</option> | |
| </select> | |
| <label>Enable Voice Output</label> | |
| <div style="display:flex;gap:8px;margin-top:6px"><button id="voiceToggle" class="btn small">Toggle Voice</button><div id="voiceState" class="chip">Off</div></div> | |
| <hr style="margin:12px 0;border:none;border-top:1px solid rgba(255,255,255,0.03)" /> | |
| <label>Actions</label> | |
| <div style="display:flex;gap:8px;margin-top:6px;flex-wrap:wrap"> | |
| <button id="genImage" class="btn small">Generate Fake Image</button> | |
| <button id="exportHtml" class="btn small">Download .html</button> | |
| <button id="clearChat" class="btn small" style="background:linear-gradient(90deg,#ef4444,#f97316)">Clear Chat</button> | |
| </div> | |
| <hr style="margin:12px 0;border:none;border-top:1px solid rgba(255,255,255,0.03)" /> | |
| <div class="fake-image" id="imagePreview">Procedural Image</div> | |
| <div class="log" id="miniLog">System ready — ZewAI-1.5-PRO (simulation)</div> | |
| </div> | |
| </aside> | |
| <section class="chat-panel" role="main"> | |
| <div class="status">Model: <span id="currentModel">Oracle</span> · Creativity: <span id="currentCreat">40</span> · Length: <span id="currentLen">Medium</span></div> | |
| <div class="messages" id="messages" aria-live="polite"></div> | |
| <div class="composer"> | |
| <textarea id="prompt" placeholder="Type your prompt to ZewAI-1.5-PRO... (try: 'Plan a tiny Mars mission')"></textarea> | |
| <div style="display:flex;flex-direction:column;gap:8px"> | |
| <div class="toolbar"> | |
| <button id="sendBtn" class="btn">Send</button> | |
| <button id="surprise" class="btn small">Surprise Me</button> | |
| </div> | |
| <div style="font-size:12px;color:var(--muted)">Tip: This frontend simulates different personalities and generates playful outputs locally.</div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="chip">ZewAI-1.5-PRO Simulator</div> | |
| <div style="font-size:12px;color:var(--muted)">Built with ❤️ for demo purposes</div> | |
| </footer> | |
| </section> | |
| </div> | |
| </div> | |
| <script> | |
| // ======= Utilities ======== | |
| const $ = id => document.getElementById(id); | |
| const messages = $('messages'); | |
| const persona = $('persona'); | |
| const creativity = $('creativity'); | |
| const lengthSel = $('length'); | |
| const currentModel = $('currentModel'); | |
| const currentCreat = $('currentCreat'); | |
| const currentLen = $('currentLen'); | |
| const promptBox = $('prompt'); | |
| const voiceToggle = $('voiceToggle'); | |
| const voiceState = $('voiceState'); | |
| const miniLog = $('miniLog'); | |
| let voiceEnabled = false; | |
| // canned fragments and behaviors | |
| const FRAGMENTS = { | |
| oracle: [ | |
| "In the quiet between stars, I sense possibilities.", | |
| "The paths fold like paper; choose the crease you call home.", | |
| "I weave small futures from the threads of your question." | |
| ], | |
| professor: [ | |
| "Step 1: Define variables. Step 2: Iterate. Step 3: Test.", | |
| "Based on commonly accepted models, the optimal approach is...", | |
| "Consider edge cases: performance, safety, and reproducibility." | |
| ], | |
| friend: [ | |
| "Haha, interesting — let's make it fun!", | |
| "Okay buddy, here's what I'd do if I were you...", | |
| "Noted. Also: snacks." | |
| ], | |
| ceo: [ | |
| "Short plan: prioritize, delegate, measure.", | |
| "We move fast, ship early, and iterate.", | |
| "Focus on impact and ruthlessly remove distractions." | |
| ], | |
| mystery: [ | |
| "..."] | |
| }; | |
| const adjectives = ["lucid","stellar","radical","gentle","methodical","quirky","bold","subtle"]; | |
| function logMini(text){ miniLog.textContent = text } | |
| // ======= Message helpers ======== | |
| function appendMessage(text, who='ai', meta=''){ | |
| const wrap = document.createElement('div'); | |
| wrap.className = 'message' + (who==='me' ? ' me' : ''); | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'bubble' + (who==='me' ? ' me' : ''); | |
| bubble.innerHTML = text + (meta?`<div style="font-size:11px;color:var(--muted);margin-top:6px">${meta}</div>`:''); | |
| wrap.appendChild(bubble); | |
| messages.appendChild(wrap); | |
| messages.scrollTop = messages.scrollHeight; | |
| } | |
| // typing animation | |
| function typeText(targetEl, fullText, speed=20, onDone=null){ | |
| let i=0; | |
| const node = document.createElement('span'); | |
| targetEl.appendChild(node); | |
| const caret = document.createElement('span'); caret.className='typing'; targetEl.appendChild(caret); | |
| const t = setInterval(()=>{ | |
| node.textContent = fullText.slice(0,i+1); | |
| i++; | |
| if(i>=fullText.length){ clearInterval(t); caret.remove(); if(onDone) onDone(); } | |
| messages.scrollTop = messages.scrollHeight; | |
| }, speed); | |
| } | |
| // generate fake response | |
| function generateFakeResponse(prompt){ | |
| const pers = persona.value; | |
| const creat = Number(creativity.value)/100; | |
| const len = lengthSel.value; // short medium long | |
| // base fragments | |
| const pool = FRAGMENTS[pers] || [].concat(...Object.values(FRAGMENTS)); | |
| const pick = arr => arr[Math.floor(Math.random()*arr.length)]; | |
| const seed = pick(pool); | |
| // craft variation based on creativity and length | |
| let extra = ''; | |
| const adjCount = Math.round(creat*3); | |
| for(let i=0;i<adjCount;i++) extra += ' ' + pick(adjectives); | |
| // echo prompt-derived noun extraction (naive) | |
| const nounMatch = prompt.match(/\b(planet|plan|code|mission|robot|image|song|idea|startup)\b/i); | |
| const noun = nounMatch ? nounMatch[0] : 'concept'; | |
| let body = ''; | |
| if(len==='short') body = `${seed} ${extra}`; | |
| else if(len==='medium') body = `${seed} I analysed your request about "${noun}" and propose: ${pick(['A concise plan','A simple mockup','A list of priorities','A starter prompt'])} — ${pick(['begin with research','prototype quickly','test frequently','keep it small'])}. ${extra}`; | |
| else body = `${seed} Regarding "${noun}", imagine a sequence: 1) ${pick(['define scope','sketch architecture','build MVP','validate with users'])}; 2) ${pick(['iterate','scale','optimize','secure'])}; 3) ${pick(['measure outcomes','document decisions','handoff to team','prepare launch'])}. ${extra} If you want, I can expand any step.`; | |
| // occasional unpredictability for mystery persona | |
| if(pers==='mystery' && Math.random()>0.6) body += ' — the stars disagree.'; | |
| // small delay to simulate thinking | |
| return body; | |
| } | |
| // main send flow | |
| async function sendPrompt(){ | |
| const text = promptBox.value.trim(); | |
| if(!text) return; | |
| appendMessage(escapeHtml(text), 'me'); | |
| promptBox.value = ''; | |
| // show thinking status | |
| const statusId = 'status-'+Date.now(); | |
| appendMessage('<em>Processing your request...</em>', 'ai'); | |
| const lastBubble = messages.querySelectorAll('.bubble'); | |
| const aiBubble = lastBubble[lastBubble.length-1]; | |
| // fake progressive thinking indicator | |
| const thinkingTimes = 1200 + Math.random()*1800 * (1 + (100-Number(creativity.value))/100); | |
| logMini('Analyzing...'); | |
| await new Promise(r=>setTimeout(r, thinkingTimes)); | |
| // replace ai bubble with typed response | |
| aiBubble.innerHTML = ''; | |
| const response = generateFakeResponse(text); | |
| typeText(aiBubble, response, Math.max(8, 28 - Number(creativity.value)/4), ()=>{ | |
| logMini('Response delivered'); | |
| if(voiceEnabled) speak(response); | |
| }); | |
| } | |
| // simple HTML escape | |
| function escapeHtml(s){ return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>') } | |
| // ======= Fake image generator (procedural) ======== | |
| function generateProceduralImage(){ | |
| const canvas = document.createElement('canvas'); canvas.width=640; canvas.height=360; | |
| const ctx = canvas.getContext('2d'); | |
| // background | |
| ctx.fillStyle = '#061022'; ctx.fillRect(0,0,canvas.width,canvas.height); | |
| // random gradient | |
| const g = ctx.createLinearGradient(0,0,canvas.width,canvas.height); | |
| g.addColorStop(0, randomColor()); g.addColorStop(1, randomColor()); ctx.fillStyle=g; ctx.globalAlpha=0.12; ctx.fillRect(0,0,canvas.width,canvas.height); | |
| // draw random circles | |
| for(let i=0;i<30;i++){ | |
| ctx.beginPath(); | |
| const x = Math.random()*canvas.width; const y = Math.random()*canvas.height; const r = 6+Math.random()*90; | |
| ctx.fillStyle = randomColor(); ctx.globalAlpha=0.08 + Math.random()*0.22; ctx.arc(x,y,r,0,Math.PI*2); ctx.fill(); | |
| } | |
| // draw some lines | |
| ctx.globalAlpha=0.9; ctx.lineWidth=1.5; | |
| for(let i=0;i<8;i++){ | |
| ctx.beginPath(); ctx.moveTo(Math.random()*canvas.width, Math.random()*canvas.height); | |
| ctx.bezierCurveTo(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*canvas.width, Math.random()*canvas.height); | |
| ctx.strokeStyle = randomColor(); ctx.stroke(); | |
| } | |
| // starfield | |
| for(let i=0;i<150;i++){ ctx.fillStyle='#fff'; ctx.globalAlpha=Math.random()*0.9; ctx.fillRect(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*2.2, Math.random()*2.2)} | |
| // convert to dataURL and set preview | |
| const data = canvas.toDataURL('image/png'); | |
| $('imagePreview').innerHTML = ''; | |
| const img = document.createElement('img'); img.src=data; img.style.maxWidth='100%'; img.style.borderRadius='8px'; | |
| $('imagePreview').appendChild(img); | |
| // also add chat message with image | |
| appendMessage('<div><strong>Generated image (procedural):</strong><br/><img src="'+data+'" style="max-width:320px;border-radius:10px;margin-top:8px"/></div>', 'ai'); | |
| logMini('Procedural image created'); | |
| } | |
| function randomColor(){ return `hsl(${Math.floor(Math.random()*360)} ${50+Math.floor(Math.random()*40)}% ${30+Math.floor(Math.random()*50)}%)` } | |
| // ======= Voice ======== | |
| function speak(text){ | |
| if(!('speechSynthesis' in window)) return; | |
| const u = new SpeechSynthesisUtterance(text); | |
| const voices = speechSynthesis.getVoices(); | |
| if(voices.length) u.voice = voices.find(v=>/en|default/i.test(v.lang))||voices[0]; | |
| u.rate = 1 - (Number(creativity.value)/300); | |
| speechSynthesis.cancel(); speechSynthesis.speak(u); | |
| } | |
| // ======= Export current file as HTML ======== | |
| function downloadSelf(){ | |
| const html = document.documentElement.outerHTML; | |
| const blob = new Blob([html], {type:'text/html'}); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); a.href = url; a.download = 'ZewAI-1.5-PRO.html'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); | |
| logMini('Downloaded current page as HTML'); | |
| } | |
| // ======= Event wiring ======== | |
| $('sendBtn').addEventListener('click', sendPrompt); | |
| promptBox.addEventListener('keydown', e=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendPrompt(); } }); | |
| persona.addEventListener('change', ()=>{ currentModel.textContent = persona.options[persona.selectedIndex].text; }); | |
| creativity.addEventListener('input', ()=>{ currentCreat.textContent = creativity.value }); | |
| lengthSel.addEventListener('change', ()=>{ currentLen.textContent = lengthSel.value.charAt(0).toUpperCase() + lengthSel.value.slice(1) }); | |
| $('genImage').addEventListener('click', generateProceduralImage); | |
| $('exportHtml').addEventListener('click', downloadSelf); | |
| $('clearChat').addEventListener('click', ()=>{ messages.innerHTML=''; logMini('Chat cleared'); }); | |
| $('surprise').addEventListener('click', ()=>{ promptBox.value = ['Tell me a crazy startup idea','Plan a tiny Mars mission','Write a short sci‑fi scene','Make a 3-step robot plan'].sort(()=>0.5-Math.random())[0]; }); | |
| voiceToggle.addEventListener('click', ()=>{ voiceEnabled = !voiceEnabled; voiceState.textContent = voiceEnabled ? 'On' : 'Off'; voiceState.style.background=''; logMini('Voice ' + (voiceEnabled?'enabled':'disabled')) }); | |
| // friendly welcome | |
| setTimeout(()=>{ | |
| appendMessage('Hello — I am ZewAI-1.5-PRO (simulated). Ask me anything. Try the "Generate Fake Image" button or select different personas and creativity levels to see different behaviors.'); | |
| }, 800); | |
| // expose some functions for debugging in console | |
| window._zew = {generateProceduralImage, generateFakeResponse}; | |
| </script> | |
| </body> | |
| </html> | |