Spaces:
Running
Running
File size: 6,470 Bytes
1c6683b 5af3120 1c6683b 5af3120 1c6683b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!--
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
-->
<!doctype html>
<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>
|