apieper/webpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final edit sys-promt and markdown image

Browse Source
This commit is contained in:
Andreas Pieper
2026-03-04 19:29:58 +00:00
parent fe3a25fa3a
commit 0923de4259
15 changed files with 1060 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
layouts/_default/chat.html
View File

@@ -5,13 +5,23 @@
<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 }}">
<link rel="stylesheet" href="/common.css">
<link rel="stylesheet" href="/chat.css">
<!-- <link rel="stylesheet" href="{{ "style.css" | relURL }}"> -->
</head>
<body>
<header>
<nav class="container">
<a href="/" class="logo">🏗 Ground Zero Lab</a>
<div class="hamburger" onclick="toggleViewMenu()">
<span></span><span></span><span></span>
</div>
<ul class="nav-links" id="navLinks">
<li><a href="javascript:void(0)" onclick="setView('article-only')">📄 Artikel</a></li>
<li><a href="javascript:void(0)" onclick="setView('split')"> 📄/💬 </a></li>
<li><a href="javascript:void(0)" onclick="setView('chat-only')">💬 Chat</a></li>
</ul>
<a href="/" class="logo">🏗 GZ Lab</a>
<div class="nav-right">
<div class="theme-header-btn">
@@ -46,63 +56,34 @@
</nav>
</header>
<main class="chat-container">
<div id="chat-messages">
<div class="message ai-message">{{ .Params.welcome_message }}</div>
</div>
<main class="chat-main view-split" id="chatMain">
<aside class="chat-article" id="resizableArticle">
<div class="article-content">
<!-- <h2>{{ .Params.article_title }}</h2> -->
{{ .Content }} </div>
</aside>
<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 class="resizer" id="dragMe"></div>
<div class="chat-container">
<div id="chat-messages">
<div id="system-prompt-container" class="message system-config">
<strong>⚙️ System-Promt</strong>
<p><small>Definiere hier die Rolle der KI, bevor du den Chat startest:</small></p>
<textarea id="system-prompt-input" class="system-textarea">{{ .Params.systempromt }}</textarea>
</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()">➤</button>
</div>
</div>
</main>
<script>
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
<script src="/common.js" defer></script>
<script src="/chat.js" defer></script>
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>