Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Supreme GPT | Universal</title> | |
| <style> | |
| :root { --purple: #b026ff; --bg: #050505; } | |
| body { margin: 0; background: var(--bg); color: #f0f0f0; font-family: 'Inter', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } | |
| #app { width: 95%; max-width: 700px; height: 85vh; background: #111; border-radius: 20px; display: flex; flex-direction: column; border: 1px solid rgba(176, 38, 255, 0.3); position: relative; box-shadow: 0 0 40px rgba(0,0,0,0.8); } | |
| #status { font-size: 0.7rem; color: var(--purple); padding: 12px; text-align: center; background: #000; border-bottom: 1px solid #222; font-family: monospace; letter-spacing: 1px; } | |
| #chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } | |
| .msg { padding: 12px 16px; border-radius: 12px; max-width: 85%; font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; } | |
| .user { align-self: flex-end; background: rgba(176, 38, 255, 0.1); border: 1px solid var(--purple); } | |
| .bot { align-self: flex-start; background: #1a1a1a; border-left: 3px solid var(--purple); white-space: pre-wrap; } | |
| #input-row { display: flex; padding: 20px; background: #080808; border-top: 1px solid #222; gap: 10px; } | |
| input { flex: 1; background: #151515; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; outline: none; } | |
| button { background: var(--purple); border: none; color: #fff; padding: 0 25px; border-radius: 8px; cursor: pointer; font-weight: bold; } | |
| button:disabled { opacity: 0.3; } | |
| progress { width: 100%; height: 3px; appearance: none; position: absolute; top: 0; border: none; } | |
| progress::-webkit-progress-value { background: var(--purple); } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <progress id="load-progress" value="0" max="100"></progress> | |
| <div id="status">INITIATING STREAM ENGINE...</div> | |
| <div id="chat"></div> | |
| <div id="input-row"> | |
| <input type="text" id="user-input" placeholder="Transmit thought..." disabled> | |
| <button id="send-btn" disabled>SEND</button> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); | |
| const status = document.getElementById('status'); | |
| const chat = document.getElementById('chat'); | |
| const input = document.getElementById('user-input'); | |
| const btn = document.getElementById('send-btn'); | |
| const prog = document.getElementById('load-progress'); | |
| // This hidden instruction forces the AI to behave dynamically | |
| const systemPrompt = "You are Supreme GPT. Be highly dynamic: give extremely short, direct answers for simple questions. Only provide detailed, long answers when the complexity of the user's prompt strictly requires it."; | |
| let generator = null; | |
| async function init() { | |
| if (isMobile) { | |
| status.innerText = "SUPREME CORE: ONLINE (MOBILE)"; | |
| unlock(); | |
| } else { | |
| status.innerText = "LINKING PC NEURAL CORE..."; | |
| prog.style.display = 'block'; | |
| try { | |
| const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0'); | |
| env.allowLocalModels = false; | |
| generator = await pipeline('text-generation', 'onnx-community/Qwen2.5-0.5B-Instruct', { | |
| dtype: 'q4', | |
| device: 'webgpu', | |
| progress_callback: (data) => { | |
| if (data.status === 'progress') { | |
| prog.value = data.progress; | |
| status.innerText = `DOWNLOADING NEURAL WEIGHTS: ${Math.round(data.progress)}%`; | |
| } else if (data.status === 'ready') { | |
| status.innerText = "SUPREME CORE: ONLINE (PC)"; | |
| unlock(); | |
| } | |
| } | |
| }); | |
| status.innerText = "SUPREME CORE: ONLINE (PC)"; | |
| unlock(); | |
| } catch (err) { | |
| status.innerText = "SUPREME CORE: ONLINE (CLOUD FALLBACK)"; | |
| unlock(); | |
| } | |
| } | |
| } | |
| function unlock() { | |
| input.disabled = false; | |
| btn.disabled = false; | |
| prog.style.display = 'none'; | |
| } | |
| async function talk() { | |
| const val = input.value.trim(); | |
| if (!val || btn.disabled) return; | |
| addMsg(val, 'user'); | |
| input.value = ''; | |
| input.disabled = true; | |
| btn.disabled = true; | |
| const botMsgDiv = document.createElement('div'); | |
| botMsgDiv.className = 'msg bot'; | |
| chat.appendChild(botMsgDiv); | |
| chat.scrollTop = chat.scrollHeight; | |
| try { | |
| if (isMobile || !generator) { | |
| status.innerText = "STREAMING FROM CLOUD..."; | |
| // True Zero Token Method: Using an open API proxy to completely bypass | |
| // mobile Safari CORS/Auth blocks that Hugging Face enforces. | |
| const response = await fetch("https://text.pollinations.ai/openai/v1/chat/completions", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ | |
| messages: [ | |
| { role: "system", content: systemPrompt }, | |
| { role: "user", content: val } | |
| ], | |
| temperature: 0.7 | |
| }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP ${response.status} - Network Blocked.`); | |
| } | |
| const data = await response.json(); | |
| botMsgDiv.innerText = data.choices[0].message.content.trim(); | |
| } else { | |
| status.innerText = "GENERATING LOCALLY (MAY TAKE A MOMENT)..."; | |
| // Injecting the system prompt into the local WebGPU model | |
| const out = await generator([ | |
| { role: "system", content: systemPrompt }, | |
| { role: "user", content: val } | |
| ], { max_new_tokens: 500 }); | |
| if (Array.isArray(out) && Array.isArray(out[0].generated_text)) { | |
| const msgs = out[0].generated_text; | |
| botMsgDiv.innerText = msgs[msgs.length - 1].content; | |
| } else if (Array.isArray(out) && out[0].generated_text) { | |
| botMsgDiv.innerText = out[0].generated_text; | |
| } else { | |
| botMsgDiv.innerText = "CORE SYNTAX ERROR."; | |
| } | |
| } | |
| } catch (err) { | |
| console.error("Transmission Error:", err); | |
| botMsgDiv.innerText = `CORE STUTTER: ${err.message}`; | |
| } | |
| status.innerText = "READY"; | |
| input.disabled = false; | |
| btn.disabled = false; | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| function addMsg(text, type) { | |
| const div = document.createElement('div'); | |
| div.className = `msg ${type}`; | |
| div.innerText = text; | |
| chat.appendChild(div); | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| btn.onclick = talk; | |
| input.onkeypress = (e) => { if (e.key === 'Enter') talk(); }; | |
| init(); | |
| </script> | |
| </body> | |
| </html> |