Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BLUOM tech AI Agent</title> | |
| <style> | |
| body { font-family: monospace; background: #0b0b0b; color: #00ff66; padding: 20px; max-width: 700px; margin: auto; } | |
| #chat-container { border: 1px solid #00ff66; height: 400px; overflow-y: scroll; padding: 15px; background: #000; margin-bottom: 10px; border-radius: 4px; } | |
| .message { margin-bottom: 12px; line-height: 1.4; } | |
| .user { color: #ffffff; } | |
| .assistant { color: #00ff66; } | |
| input, button { width: 100%; padding: 12px; background: #111; color: #00ff66; border: 1px solid #00ff66; margin-bottom: 8px; box-sizing: border-box; font-family: monospace; } | |
| button { background: #00ff66; color: #000; font-weight: bold; cursor: pointer; } | |
| button:disabled { background: #222; color: #555; border-color: #333; cursor: not-allowed; } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>BLUOMtech Browser-Powered Agent</h2> | |
| <p id="status">Status: Loading browser AI engine...</p> | |
| <div id="chat-container"></div> | |
| <input type="text" id="user-input" placeholder="Type a message..." disabled> | |
| <button id="send-btn" onclick="sendQuery()" disabled>Initializing...</button> | |
| <script type="module"> | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0'; | |
| const chatContainer = document.getElementById('chat-container'); | |
| const inputField = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const statusText = document.getElementById('status'); | |
| let generator = null; | |
| let chatHistory = "System: You are an AI assistant for BLUOM tech.\n"; | |
| function appendMessage(sender, text, className) { | |
| chatContainer.innerHTML += `<div class="message ${className}"><b>${sender}:</b> ${text}</div>`; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| async function initAI() { | |
| try { | |
| // Uses a lightweight model that runs via WebGPU/WASM right in the browser | |
| generator = await pipeline('text-generation', 'Xenova/Qwen1.5-0.5B-Chat', { | |
| device: 'webgpu' | |
| }); | |
| statusText.innerText = "Status: Online (Running via Browser WebGPU)"; | |
| inputField.disabled = false; | |
| sendBtn.disabled = false; | |
| sendBtn.innerText = "Send"; | |
| } catch (err) { | |
| statusText.innerText = "Status: WebGPU not available, falling back or error."; | |
| console.error(err); | |
| } | |
| } | |
| window.sendQuery = async function() { | |
| const text = inputField.value.trim(); | |
| if (!text || !generator) return; | |
| appendMessage("USER", text, "user"); | |
| inputField.value = ""; | |
| sendBtn.disabled = true; | |
| sendBtn.innerText = "Thinking..."; | |
| chatHistory += `USER: ${text}\nASSISTANT:`; | |
| try { | |
| const output = await generator(chatHistory, { max_new_tokens: 150, temperature: 0.3 }); | |
| const responseText = output[0].generated_text.replace(chatHistory, "").trim(); | |
| appendMessage("ASSISTANT", responseText, "assistant"); | |
| chatHistory += ` ${responseText}\n`; | |
| } catch (e) { | |
| appendMessage("SYSTEM", "Error generating response.", "user"); | |
| } | |
| sendBtn.disabled = false; | |
| sendBtn.innerText = "Send"; | |
| } | |
| initAI(); | |
| </script> | |
| </body> | |
| </html> |