final edit sys-promt and markdown image
This commit is contained in:
@@ -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>
|
||||
@@ -5,7 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ .Title }}</title>
|
||||
<meta name="description" content="{{ .Params.description }}">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" href="/common.css">
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@@ -13,7 +14,8 @@
|
||||
<div class="hamburger" onclick="toggleHamburger()">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<a href="#" class="logo">🏗 Ground Zero Lab</a>
|
||||
<!-- <a href="#" class="logo-full">🏗 Ground Zero Lab</a> -->
|
||||
<a href="#" class="logo">🏗 GZ Lab</a>
|
||||
|
||||
<div class="nav-right">
|
||||
<ul class="nav-links" id="navLinks">
|
||||
@@ -105,7 +107,8 @@
|
||||
<div class="demo-section">
|
||||
<p class="text">{{ .Params.demo_text }}</p>
|
||||
<div class="demo-buttons">
|
||||
<button onclick="startDemoChat()" >🚧 {{ .Params.demo_btn1 }}</button>
|
||||
<!-- <button onclick="startDemoChat()" >🚧 {{ .Params.demo_btn1 }}</button> -->
|
||||
<a href="/{{ .Lang }}/chat/" class="demo-button">{{ .Params.demo_btn1 }}</a>
|
||||
<a href="#" class="demo-button">🚧 {{ .Params.demo_btn2 }}</a>
|
||||
<a href="#" class="demo-button">🚧 {{ .Params.demo_btn3 }}</a>
|
||||
</div>
|
||||
@@ -138,6 +141,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/script.js"></script>
|
||||
<script src="/common.js" defer></script>
|
||||
<script src="/index.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user