|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Maverick-Chat 🇩🇪</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.chat-user { background-color: #e0f2fe; border-left: 4px solid #38bdf8; } |
|
|
.chat-ai { background-color: #f0fdf4; border-left: 4px solid #34d399; } |
|
|
.chat-error { background-color: #fee2e2; border-left: 4px solid #ef4444; } |
|
|
.textarea-flex { resize: vertical; min-height: 60px; max-height: 400px; transition: height 0.2s; } |
|
|
.typing-indicator span { |
|
|
animation: bounce 1.5s infinite ease-in-out; |
|
|
display: inline-block; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; } |
|
|
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; } |
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen font-sans"> |
|
|
|
|
|
<div class="max-w-4xl mx-auto py-10 px-4"> |
|
|
<header class="text-center mb-6"> |
|
|
<div class="flex items-center justify-center gap-2"> |
|
|
<h1 class="text-4xl font-bold text-blue-600">⚡ Maverick-Chat</h1> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center gap-1"> |
|
|
<span class="relative flex h-2 w-2"> |
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> |
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span> |
|
|
</span> |
|
|
Llama-4 17B |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mt-2">KI-Chat mit Llama-4 Maverick 17B (Deutsch)</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white shadow-xl rounded-xl overflow-hidden"> |
|
|
<div id="chat-history" class="h-[500px] overflow-auto p-4 space-y-3"> |
|
|
<div class="chat-ai p-3 rounded"> |
|
|
<strong class="flex items-center gap-1"> |
|
|
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center">🤖</span> |
|
|
Maverick: |
|
|
</strong> |
|
|
Willkommen beim Maverick-Chat! Ich bin ein fortschrittliches KI-Modell basierend auf Llama-4 Maverick 17B. Wie kann ich Ihnen helfen? |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="typing-indicator" class="hidden px-4 pb-2"> |
|
|
<div class="chat-ai p-3 rounded"> |
|
|
<strong class="flex items-center gap-1"> |
|
|
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center">🤖</span> |
|
|
Maverick: |
|
|
</strong> |
|
|
<span class="typing-indicator"><span>.</span><span>.</span><span>.</span></span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form id="chat-form" class="p-3 bg-gray-50 border-t flex items-end gap-2"> |
|
|
<div class="relative flex-1"> |
|
|
<textarea id="input" placeholder="Nachricht eingeben..." |
|
|
class="textarea-flex w-full border rounded-lg p-3 pr-10 focus:ring-2 focus:ring-blue-300 focus:border-blue-500" |
|
|
oninput="adjustHeight(this)"></textarea> |
|
|
<button type="button" id="clear-input" class="absolute right-2 bottom-3 text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg transition-colors flex items-center justify-center w-12 h-12"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
<button type="button" id="clear-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 p-3 rounded-lg transition-colors flex items-center justify-center w-12 h-12"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 text-center text-sm text-gray-500 flex items-center justify-center gap-2"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<p>Hinweis: Antworten können einige Sekunden dauern. Bitte haben Sie Geduld.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function adjustHeight(el) { |
|
|
el.style.height = "auto"; |
|
|
el.style.height = (el.scrollHeight) + "px"; |
|
|
console.log("adjustHeight triggered:", el.scrollHeight); |
|
|
} |
|
|
|
|
|
async function queryLlamaMaverick(prompt) { |
|
|
const API_URL = "https://openfree-llama-4-maverick-17b-research.hf.space/api/predict"; |
|
|
console.log("Querying API with prompt:", prompt); |
|
|
|
|
|
try { |
|
|
const response = await fetch(API_URL, { |
|
|
method: "POST", |
|
|
headers: { "Content-Type": "application/json" }, |
|
|
body: JSON.stringify({ data: [prompt] }), |
|
|
}); |
|
|
console.log("API response status:", response.status); |
|
|
|
|
|
if (!response.ok) throw new Error(`API request failed with status ${response.status}`); |
|
|
|
|
|
const result = await response.json(); |
|
|
console.log("API response JSON:", result); |
|
|
|
|
|
if (result.data && result.data.length > 0) return result.data[0]; |
|
|
else throw new Error("Unexpected API response format"); |
|
|
|
|
|
} catch (error) { |
|
|
console.error("API Error:", error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
|
|
|
async function sendMessage(message) { |
|
|
const chatHistory = document.getElementById('chat-history'); |
|
|
const typingIndicator = document.getElementById('typing-indicator'); |
|
|
const submitBtn = document.querySelector('#chat-form button[type="submit"]'); |
|
|
|
|
|
console.log("Sending message:", message); |
|
|
submitBtn.disabled = true; |
|
|
submitBtn.classList.add('opacity-50'); |
|
|
|
|
|
chatHistory.innerHTML += `<div class="chat-user p-3 rounded"> |
|
|
<strong class="flex items-center gap-1"> |
|
|
<span class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center">👤</span> |
|
|
Du: |
|
|
</strong> |
|
|
${message} |
|
|
</div>`; |
|
|
|
|
|
typingIndicator.classList.remove('hidden'); |
|
|
chatHistory.scrollTop = chatHistory.scrollHeight; |
|
|
|
|
|
try { |
|
|
const response = await queryLlamaMaverick(message); |
|
|
typingIndicator.classList.add('hidden'); |
|
|
chatHistory.innerHTML += `<div class="chat-ai p-3 rounded"> |
|
|
<strong class="flex items-center gap-1"> |
|
|
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center">🤖</span> |
|
|
Maverick: |
|
|
</strong> |
|
|
${response || "Ich konnte keine Antwort generieren."} |
|
|
</div>`; |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Send Error:", error); |
|
|
typingIndicator.classList.add('hidden'); |
|
|
chatHistory.innerHTML += `<div class="chat-error p-3 rounded"> |
|
|
<strong class="flex items-center gap-1"> |
|
|
<span class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">⚠️</span> |
|
|
Fehler: |
|
|
</strong> |
|
|
Entschuldigung, es gab ein Problem bei der Verbindung zum KI-Modell. |
|
|
<div class="text-xs mt-1 text-red-600">${error.message || 'Unbekannter Fehler'}</div> |
|
|
</div>`; |
|
|
} finally { |
|
|
submitBtn.disabled = false; |
|
|
submitBtn.classList.remove('opacity-50'); |
|
|
chatHistory.scrollTop = chatHistory.scrollHeight; |
|
|
} |
|
|
} |
|
|
|
|
|
window.addEventListener('DOMContentLoaded', () => { |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const inputEl = document.getElementById('input'); |
|
|
const clearInputBtn = document.getElementById('clear-input'); |
|
|
const clearBtn = document.getElementById('clear-btn'); |
|
|
|
|
|
chatForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const message = inputEl.value.trim(); |
|
|
console.log("Form submitted. Message:", message); |
|
|
if (message) { |
|
|
sendMessage(message); |
|
|
inputEl.value = ''; |
|
|
adjustHeight(inputEl); |
|
|
} |
|
|
}); |
|
|
|
|
|
clearInputBtn.addEventListener('click', () => { |
|
|
console.log("Input cleared"); |
|
|
inputEl.value = ''; |
|
|
adjustHeight(inputEl); |
|
|
inputEl.focus(); |
|
|
}); |
|
|
|
|
|
clearBtn.addEventListener('click', () => { |
|
|
console.log("Chat cleared by user"); |
|
|
if (confirm('Möchten Sie den gesamten Chatverlauf wirklich löschen?')) { |
|
|
document.getElementById('chat-history').innerHTML = `<div class="chat-ai p-3 rounded"> |
|
|
<strong class="flex items-center gap-1"> |
|
|
<span class="bg-green-500 text-white rounded-full w-6 h-6 flex items-center justify-center">🤖</span> |
|
|
Maverick: |
|
|
</strong> |
|
|
Willkommen beim Maverick-Chat! Ich bin ein fortschrittliches KI-Modell basierend auf Llama-4 Maverick 17B. Wie kann ich Ihnen helfen? |
|
|
</div>`; |
|
|
} |
|
|
}); |
|
|
|
|
|
inputEl.addEventListener('keydown', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
console.log("Enter pressed. Submitting form."); |
|
|
chatForm.dispatchEvent(new Event('submit')); |
|
|
} |
|
|
}); |
|
|
|
|
|
inputEl.focus(); |
|
|
console.log("Chat initialized"); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=h4sch/m-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
|
