Spaces:

Zakomako4567
/

ZewAI-1.5-PRO

Running

App Files Files Community

Zakomako4567 commited on 12 days ago

Commit

5d30679

verified ·

1 Parent(s): ebcac4e

Update index.html

Browse files

Files changed (1) hide show

index.html +345 -17

index.html CHANGED Viewed

@@ -1,19 +1,347 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!--
+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.
+-->
 <!doctype html>
+<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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') }
+    // ======= 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>