Initial implementation of the chat application with MariaDB and ArangoDB integration, including Docker setup and web interface.

2026-01-06 15:26:14 +01:00
parent f0e2fd294b
commit b3f6ecb1bc
13 changed files with 296 additions and 0 deletions
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -0,0 +1,2 @@
+FROM nginx:alpine
+COPY . /usr/share/nginx/html
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Projekt-LLM Chat</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="chat-container">
+  <input id="project" placeholder="Projektname">
+  <div id="messages"></div>
+  <input id="message" placeholder="Schreibe eine Nachricht">
+  <button onclick="sendMessage()">Senden</button>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
--- a/web/scripts.js
+++ b/web/scripts.js
@@ -0,0 +1,12 @@
+async function sendMessage() {
+    const project = document.getElementById('project').value;
+    const message = document.getElementById('message').value;
+    const res = await fetch('http://localhost:5000/chat', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({project, message})
+    });
+    const data = await res.json();
+    const messagesDiv = document.getElementById('messages');
+    messagesDiv.innerHTML += `<p><b>Du:</b> ${message}</p><p><b>LLM:</b> ${data.reply}</p>`;
+}
--- a/web/style.css
+++ b/web/style.css
@@ -0,0 +1,4 @@
+#chat-container { width: 500px; margin: auto; }
+#messages { border: 1px solid #ccc; height: 400px; overflow-y: scroll; padding: 5px; margin-bottom: 5px; }
+input { width: 80%; margin-bottom: 5px; }
+button { width: 18%; }