Spaces:
Running
Running
| <!-- | |
| PlanoAI — Fake Image Generation AI Frontend (Simulation) | |
| Single-file HTML. All generation is procedural with canvas — no backend calls. | |
| Features: | |
| - Conversational UI focused on images | |
| - Procedural abstract art generator (mimics AI images) | |
| - Style selector (abstract, cosmic, geometric, dreamy) | |
| - Prompt field and history of generated images | |
| - Save image button | |
| - Fake AI persona with typing + progress indicator | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>PlanoAI — Fake Image Generation Simulator</title> | |
| <style> | |
| body{margin:0;font-family:Inter,system-ui,Arial;background:#0e1117;color:#f1f5f9} | |
| .app{max-width:1000px;margin:20px auto;padding:20px} | |
| header{display:flex;align-items:center;gap:14px} | |
| .logo{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,#06b6d4,#9333ea);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} | |
| h1{margin:0;font-size:22px} | |
| .meta{font-size:13px;color:#94a3b8} | |
| .main{margin-top:18px;display:grid;grid-template-columns:300px 1fr;gap:20px} | |
| .sidebar{background:#111827;border-radius:12px;padding:14px;height:75vh;overflow:auto} | |
| label{font-size:13px;color:#94a3b8;margin-top:12px;display:block} | |
| textarea,input,select{width:100%;margin-top:6px;border-radius:8px;padding:8px;border:1px solid rgba(255,255,255,0.1);background:#0f172a;color:inherit} | |
| button{margin-top:10px;padding:10px;border:none;border-radius:8px;background:linear-gradient(90deg,#06b6d4,#9333ea);color:white;cursor:pointer} | |
| .chat{background:#0f172a;border-radius:12px;padding:14px;display:flex;flex-direction:column;height:75vh} | |
| .messages{flex:1;overflow:auto} | |
| .message{margin:10px 0} | |
| .ai{color:#a5b4fc} | |
| .user{color:#fbbf24;text-align:right} | |
| .imgWrap{margin-top:8px} | |
| .imgWrap img{max-width:100%;border-radius:10px} | |
| .composer{display:flex;gap:8px;margin-top:12px} | |
| .composer textarea{flex:1;resize:none} | |
| @media(max-width:820px){.main{grid-template-columns:1fr}.sidebar{height:auto}.chat{height:65vh}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <header> | |
| <div class="logo">PLN</div> | |
| <div> | |
| <h1>PlanoAI <small style="color:#94a3b8;font-weight:500">(Simulated)</small></h1> | |
| <div class="meta">Fake AI for image generation — procedural canvas art, no backend.</div> | |
| <h2> runnning on ZewAI</h2> | |
| </div> | |
| </header> | |
| <div class="main"> | |
| <aside class="sidebar"> | |
| <label>Prompt</label> | |
| <textarea id="prompt" rows="4" placeholder="e.g. A futuristic city under the sea"></textarea> | |
| <label>Style</label> | |
| <select id="style"> | |
| <option value="abstract">Abstract</option> | |
| <option value="cosmic">Cosmic</option> | |
| <option value="geometric">Geometric</option> | |
| <option value="dreamy">Dreamy</option> | |
| </select> | |
| <button id="generate">Generate Image</button> | |
| <button id="clear">Clear History</button> | |
| </aside> | |
| <section class="chat"> | |
| <div class="messages" id="messages"></div> | |
| <div class="composer"> | |
| <textarea id="quickPrompt" placeholder="Quick prompt... press Enter"></textarea> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <script> | |
| const $=id=>document.getElementById(id); | |
| const messages=$('messages'); | |
| function appendMessage(text,who='ai'){ | |
| const div=document.createElement('div'); | |
| div.className='message '+who; | |
| div.innerHTML=text; | |
| messages.appendChild(div); | |
| messages.scrollTop=messages.scrollHeight; | |
| } | |
| function generateImage(prompt,style){ | |
| const canvas=document.createElement('canvas'); | |
| canvas.width=640;canvas.height=360; | |
| const ctx=canvas.getContext('2d'); | |
| // background | |
| ctx.fillStyle='#0e0e16';ctx.fillRect(0,0,canvas.width,canvas.height); | |
| if(style==='abstract'){for(let i=0;i<50;i++){ctx.fillStyle=randomColor();ctx.globalAlpha=Math.random()*0.5;ctx.beginPath();ctx.arc(Math.random()*640,Math.random()*360,20+Math.random()*80,0,Math.PI*2);ctx.fill();}} | |
| if(style==='cosmic'){for(let i=0;i<150;i++){ctx.fillStyle='white';ctx.globalAlpha=Math.random();ctx.fillRect(Math.random()*640,Math.random()*360,2,2);}ctx.globalAlpha=0.3;for(let i=0;i<20;i++){ctx.beginPath();ctx.arc(Math.random()*640,Math.random()*360,30+Math.random()*60,0,Math.PI*2);ctx.fillStyle=randomColor();ctx.fill();}} | |
| if(style==='geometric'){ctx.globalAlpha=0.8;for(let i=0;i<40;i++){ctx.fillStyle=randomColor();ctx.fillRect(Math.random()*640,Math.random()*360,30+Math.random()*80,30+Math.random()*80);}} | |
| if(style==='dreamy'){const g=ctx.createLinearGradient(0,0,640,360);g.addColorStop(0,randomColor());g.addColorStop(1,randomColor());ctx.fillStyle=g;ctx.globalAlpha=0.6;ctx.fillRect(0,0,640,360);for(let i=0;i<20;i++){ctx.beginPath();ctx.arc(Math.random()*640,Math.random()*360,60+Math.random()*120,0,Math.PI*2);ctx.fillStyle=randomColor();ctx.globalAlpha=0.2;ctx.fill();}} | |
| const data=canvas.toDataURL('image/png'); | |
| return data; | |
| } | |
| function randomColor(){return `hsl(${Math.floor(Math.random()*360)} ${50+Math.floor(Math.random()*30)}% ${30+Math.floor(Math.random()*40)}%)`;} | |
| function createImageMessage(prompt,style){ | |
| appendMessage('<em>Processing image for: "'+prompt+'"</em>','ai'); | |
| setTimeout(()=>{ | |
| const data=generateImage(prompt,style); | |
| const html='<div><strong>'+prompt+'</strong><div class="imgWrap"><img src="'+data+'"/></div></div>'; | |
| appendMessage(html,'ai'); | |
| },1200+Math.random()*1500); | |
| } | |
| $('generate').onclick=()=>{ | |
| const p=$('prompt').value.trim(); | |
| const s=$('style').value; | |
| if(!p) return; | |
| appendMessage(p,'user'); | |
| createImageMessage(p,s); | |
| $('prompt').value=''; | |
| }; | |
| $('quickPrompt').addEventListener('keydown',e=>{ | |
| if(e.key==='Enter'&&!e.shiftKey){e.preventDefault(); | |
| const p=e.target.value.trim();if(!p) return; | |
| appendMessage(p,'user'); | |
| createImageMessage(p,$('style').value); | |
| e.target.value=''; | |
| }}); | |
| $('clear').onclick=()=>{messages.innerHTML='';}; | |
| // welcome | |
| setTimeout(()=>{ | |
| appendMessage('Hello — I am <b>PlanoAI</b>. Give me a prompt and I will generate a fake procedural image in your chosen style.','ai'); | |
| },600); | |
| </script> | |
| </body> | |
| </html> | |