Spaces:
Running
Running
File size: 3,747 Bytes
95adb49 08807c5 95adb49 08807c5 95adb49 | 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 | <!DOCTYPE html>
<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> |