File size: 5,362 Bytes
4206589 a8fcb70 4206589 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H-bot Model Manager & Chat</title>
<style>
body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; padding: 20px; margin: 0; }
.container { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; }
.card { background: #1e293b; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
h1, h2 { color: #38bdf8; margin-top: 0; }
button { background: #38bdf8; color: #0f172a; border: none; padding: 10px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; }
button:hover { background: #0ea5e9; }
/* Chat Box Styles */
.chat-box { background: #0f172a; border: 1px solid #334155; height: 300px; border-radius: 8px; padding: 15px; overflow-y: auto; margin-bottom: 15px; }
.message { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; max-width: 80%; }
.message.user { background: #38bdf8; color: #0f172a; margin-left: auto; text-align: right; }
.message.bot { background: #334155; color: #e2e8f0; margin-right: auto; }
.input-group { display: flex; gap: 10px; }
.input-group input { flex: 1; background: #0f172a; border: 1px solid #334155; color: white; padding: 12px; border-radius: 6px; outline: none; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #334155; }
</style>
</head>
<body>
<div class="container">
<!-- Dashboard Header -->
<div class="card">
<h1>🦊 H-bot Unified Studio</h1>
<p>Connected Architecture status: <span id="backend-status" style="color: #ef4444; font-weight:bold;">Checking Engine...</span></p>
<button onclick="checkBackendLink()">🔄 Check Connection</button>
</div>
<!-- Chat Playground Box -->
<div class="card">
<h2>Llama 3.2 Live Chat Engine</h2>
<div class="chat-box" id="chat-window">
<div class="message bot">System active. Type a prompt below to run text directly through the Python-Rust pipeline.</div>
</div>
<div class="input-group">
<input type="text" id="user-input" placeholder="Ask Llama 3.2 micro Fox anything..." onkeypress="handleKeyPress(event)">
<button onclick="sendMessage()">Send Message</button>
</div>
</div>
</div>
<script>
const BACKEND_URL = "http://127.0.0.1:8000";
// Check if Python and Rust are working together on page load
async function checkBackendLink() {
const statusLabel = document.getElementById("backend-status");
try {
const response = await fetch(`${BACKEND_URL}/`);
const data = await response.json();
statusLabel.innerText = data.status_message;
statusLabel.style.color = data.rust_loaded ? "#16a34a" : "#eab308";
} catch (error) {
statusLabel.innerText = "Offline - Run main.py script";
statusLabel.style.color = #ef4444;
}
}
// Bridge function: Sends string data across the HTTP connection
async function sendMessage() {
const inputField = document.getElementById("user-input");
const chatWindow = document.getElementById("chat-window");
const messageText = inputField.value.trim();
if (!messageText) return;
// Append User message to UI
chatWindow.innerHTML += `<div class="message user">${messageText}</div>`;
inputField.value = "";
chatWindow.scrollTop = chatWindow.scrollHeight;
// Create temporary bot loading element
const loadingId = "load-" + Date.now();
chatWindow.innerHTML += `<div class="message bot" id="${loadingId}"><i>Processing weights via Rust...</i></div>`;
chatWindow.scrollTop = chatWindow.scrollHeight;
try {
// Post command across the network bridge directly to Python
const response = await fetch(`${BACKEND_URL}/api/chat`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt: messageText })
});
const data = await response.json();
// Replace loader with the true computation output
document.getElementById(loadingId).innerHTML = data.response;
} catch (error) {
document.getElementById(loadingId).innerHTML = `<span style="color: #ef4444;">Bridge error. Failed to reach compiled binary.</span>`;
}
chatWindow.scrollTop = chatWindow.scrollHeight;
}
function handleKeyPress(e) {
if (e.key === "Enter") sendMessage();
}
// Run check immediately when the browser displays the layout
window.onload = checkBackendLink;
</script>
<!-- Inside index.html -->
<script src="app.js"></script>
</body>
</html>
|