108 lines
4.3 KiB
HTML
108 lines
4.3 KiB
HTML
|
|
<!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> |