chat implementiert

2026-03-01 20:21:35 +00:00
parent 277bdc78d1
commit fe3a25fa3a
13 changed files with 360 additions and 29 deletions
--- a/layouts/_default/chat.html
+++ b/layouts/_default/chat.html
@@ -0,0 +1,108 @@
+
+<!DOCTYPE html>
+<html lang="{{ .Lang }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo Chat | {{ .Title }}</title>
+    <link rel="stylesheet" href="{{ "style.css" | relURL }}">
+
+</head>
+<body>
+    <header>
+        <nav class="container">
+            <a href="/" class="logo">🏗 Ground Zero Lab</a>
+            
+            <div class="nav-right">
+                <div class="theme-header-btn">
+                   <button class="lang-btn" id="langBtn">
+                        {{ .Params.flag  }}
+                    </button>
+                    <div class="lang-dropdown" id="langDropdown">
+                        {{ range .Site.Languages }}
+                        <a href="#" class="theme-option" data-lang="{{ .Lang }}">
+                            {{ if eq .Lang "de" }}🇩🇪 Deutsch{{ end }}
+                            {{ if eq .Lang "en" }}🇬🇧 English{{ end }}
+                            {{ if eq .Lang "fr" }}🇫🇷 Français{{ end }}
+                            {{ if eq .Lang "es" }}🇪🇸 Español{{ end }}
+                            {{ if eq .Lang "ru" }}🇷🇺 Русский{{ end }}
+                        </a>
+                        {{ end }}
+                    </div>
+                </div>
+
+                <div class="theme-header-btn">
+                    <button class="theme-btn" id="themeBtn" title="Design wählen">
+                        <span class="theme-icon-active">🌓</span>
+                    </button>
+                    <div class="theme-dropdown" id="themeDropdown">
+                        <button class="theme-option" data-theme="setlight">☀️ Hell</button>
+                        <button class="theme-option" data-theme="setdark">🌙 Dunkel</button>
+                        <button class="theme-option" data-theme="setauto">🌓 Auto</button>
+                    </div>
+                </div>
+
+            </div>
+        </nav>
+    </header>
+
+    <main class="chat-container">
+        <div id="chat-messages">
+            <div class="message ai-message">{{ .Params.welcome_message  }}</div>
+        </div>
+        
+        <div class="chat-input-area">
+            <input type="text" id="user-input" placeholder="{{ .Params.placeholder }}" onkeypress="if(event.key === 'Enter') sendMessage()">
+            <button class="send-btn" onclick="sendMessage()">{{ .Params.sent_btn  }} </button>
+        </div>
+    </main>
+
+    <script>
+        const chatMessages = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+
+        async function sendMessage() {
+            const text = userInput.value.trim();
+            if (!text) return;
+
+            // User Nachricht anzeigen
+            appendMessage('user', text);
+            userInput.value = '';
+
+            try {
+                // Hier sprechen wir deinen Nginx /api/ Proxy an
+                const response = await fetch('/api/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        // Der Token wird vom Nginx Server-seitig gesetzt, 
+                        // oder du sendest ihn hier mit, falls Nginx ihn nicht fix setzt.
+                    },
+                    body: JSON.stringify({
+                        "model": "arcee-ai/trinity-large-preview:free",
+                        "messages": [{"role": "user", "content": text}],
+                        "stream": false // Erstmal ohne Streaming für einfachere Logik
+                    })
+                });
+
+                const data = await response.json();
+                const aiText = data.choices[0].message.content;
+                appendMessage('ai', aiText);
+
+            } catch (err) {
+                appendMessage('ai', 'Fehler: Verbindung zum Server fehlgeschlagen.');
+                console.error(err);
+            }
+        }
+
+        function appendMessage(role, text) {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `message ${role}-message`;
+            msgDiv.innerText = text;
+            chatMessages.appendChild(msgDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+    </script>
+     <script src="/script.js"></script>
+</body>
+</html>