Update gpt/index.html

2026-05-10 17:11:40 +02:00
parent 75ae5caf82
commit d868576b65
1 changed files with 157 additions and 12 deletions
@@ -1,19 +1,164 @@
 <!DOCTYPE html>
-<html lang="nl">
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Ben GPT</title>
-</head>
-<body>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>Neural Terminal</title>
+
+<style>
+  body {
+    margin: 0;
+    background: #050805;
+    color: #33ff66;
+    font-family: monospace;
+    overflow: hidden;
+  }
+
+  .screen {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    padding: 8px;
+    border-bottom: 1px solid #1a3320;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .output {
+    flex: 1;
+    padding: 10px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+  }
+
+  .inputBar {
+    border-top: 1px solid #1a3320;
+    padding: 10px;
+    display: flex;
+  }
+
+  input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #33ff66;
+    font-family: monospace;
+  }
+
+  .system { color: #1a8033; }
+  .error { color: #ff3333; }
+  .user { color: #33ff66; }
+</style>
+</head>
+
+<body>
+<div class="screen">
+
+  <div class="header">
+    <span>NEURAL TERMINAL v1.0</span>
+    <span id="status">AI: OFFLINE</span>
+    <span id="date"></span>
+  </div>
+
+  <div id="out" class="output"></div>
+
+  <div class="inputBar">
+    <span>>></span>
+    <input id="cmd" autocomplete="off" />
+  </div>

-<div>
-    <table>
-        <tr>
-            <td>hier komt mijn chat bot</td>
-            <td>het is nog onder constructie</td>
-        </tr>
-    </table>
 </div>

+<script>
+const AI = {
+  enabled: false,
+  endpoint: "http://localhost:11434/api/chat",
+  model: "llama2",
+  apiType: "ollama"
+};
+
+const out = document.getElementById("out");
+const cmd = document.getElementById("cmd");
+
+document.getElementById("date").textContent =
+  new Date().toLocaleString();
+
+function log(text, cls="system") {
+  const div = document.createElement("div");
+  div.className = cls;
+  div.textContent = text;
+  out.appendChild(div);
+  out.scrollTop = out.scrollHeight;
+}
+
+async function askAI(prompt) {
+  if (!AI.enabled) {
+    log("AI OFFLINE", "error");
+    return;
+  }
+
+  const res = await fetch(AI.endpoint, {
+    method: "POST",
+    headers: {"Content-Type":"application/json"},
+    body: JSON.stringify({
+      model: AI.model,
+      messages: [{role:"user", content: prompt}],
+      stream: false
+    })
+  });
+
+  const data = await res.json();
+  const text =
+    data.message?.content ||
+    data.choices?.[0]?.message?.content ||
+    "no response";
+
+  log(text, "system");
+}
+
+cmd.addEventListener("keydown", async (e) => {
+  if (e.key !== "Enter") return;
+
+  const val = cmd.value.trim();
+  cmd.value = "";
+
+  if (!val) return;
+
+  log("> " + val, "user");
+
+  switch(val.toLowerCase()) {
+    case "clear":
+      out.innerHTML = "";
+      break;
+
+    case "status":
+      log("AI: " + (AI.enabled ? "ONLINE" : "OFFLINE"));
+      break;
+
+    case "help":
+      log("commands: help, clear, status, date, about");
+      break;
+
+    case "date":
+      log(new Date().toString());
+      break;
+
+    case "about":
+      log("Neural Terminal single-file build");
+      break;
+
+    default:
+      await askAI(val);
+  }
+});
+
+cmd.focus();
+</script>
+
 </body>
 </html>