Spaces:

h4sch
/

m-chat

Running

App Files Files Community

h4sch commited on Apr 14

Commit

db8c575

verified ·

1 Parent(s): 5ca45d6

Add 1 files

Browse files

Files changed (1) hide show

index.html +215 -309

index.html CHANGED Viewed

@@ -1,338 +1,244 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Maverick-Chat XL 🇩🇪</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-message-user {
-            background-color: #f0f7ff;
-            border-left: 4px solid #3b82f6;
-        }
-        .chat-message-ai {
-            background-color: #f8fafc;
-            border-left: 4px solid #10b981;
-        }
-        .typing-indicator::after {
-            content: '...';
-            animation: typing 1.5s infinite;
-        }
-        @keyframes typing {
-            0% { content: '.'; }
-            33% { content: '..'; }
-            66% { content: '...'; }
-        }
-        .gradient-bg {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        }
-        /* Enhanced Textarea Styling */
-        .xl-textarea {
-            resize: vertical;
-            min-height: 120px; /* Start with larger initial height */
-            max-height: 400px;
-            overflow-y: auto;
-            transition: height 0.2s;
-            line-height: 1.6;
-            padding: 12px;
-            font-size: 16px;
-        }
-        /* Custom scrollbar - more visible */
-        .xl-textarea::-webkit-scrollbar {
-            width: 14px;
-        }
-        .xl-textarea::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-            border: 3px solid white;
-        }
-        .xl-textarea::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-            border: 3px solid white;
-        }
-        .xl-textarea::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-        /* Paragraph visibility */
-        .xl-textarea {
-            white-space: pre-wrap;
-        }
-        /* Character counter */
-        .char-counter {
-            background: rgba(255,255,255,0.9);
-            padding: 2px 8px;
-            border-radius: 12px;
-            font-weight: bold;
-        }
-        .char-counter.warning {
-            color: #f59e0b;
-        }
-        .char-counter.error {
-            color: #ef4444;
         }
     </style>
 </head>
-<body class="gradient-bg min-h-screen">
-    <div class="container mx-auto px-4 py-8 max-w-5xl">
-        <!-- Header -->
-        <header class="mb-8 text-center">
-            <h1 class="text-4xl font-bold text-gray-800 mb-2">
-                <i class="fas fa-bolt text-yellow-500 mr-2"></i> Maverick-Chat XL
-            </h1>
-            <p class="text-lg text-gray-600">Erweiterter KI-Chat mit 15.000+ Zeichen Kapazität</p>
-        </header>
-        <!-- Main Chat Interface -->
-        <div class="bg-white rounded-xl shadow-xl overflow-hidden border-2 border-gray-300">
-            <!-- Chat History -->
-            <div id="chat-history" class="p-6 h-[500px] overflow-y-auto space-y-4">
-                <div class="chat-message-ai p-4 rounded-lg">
-                    <div class="font-bold text-green-600 mb-2 text-lg">
-                        <i class="fas fa-brain mr-2"></i>Maverick XL
-                    </div>
-                    <p class="text-gray-800">Willkommen beim Maverick-Chat XL! Ich bin die erweiterte Version mit Unterstützung für lange Texte (bis zu 15.000 Zeichen). Sie können jetzt ausführliche Dokumente, Code oder lange Fragen eingeben.</p>
-                    <div class="mt-3 p-3 bg-green-50 rounded border border-green-200">
-                        <p class="text-sm text-green-800"><i class="fas fa-info-circle mr-2"></i> Tipp: Nutzen Sie die großen Eingabefelder und den sichtbaren Scrollbalken für bessere Navigation in langen Texten.</p>
-                    </div>
-                </div>
-            </div>
-            <!-- Input Area -->
-            <div class="border-t-2 border-gray-300 p-4 bg-gray-50">
-                <form id="chat-form" class="flex space-x-3 items-end">
-                    <div class="flex-1 relative">
-                        <textarea
-                            id="user-input"
-                            placeholder="Geben Sie hier Ihren ausführlichen Text ein (bis zu 15.000 Zeichen)..."
-                            class="xl-textarea w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"
-                            rows="5"
-                            oninput="autoGrow(this)"
-                        ></textarea>
-                        <div class="absolute bottom-3 right-3">
-                            <span id="char-count" class="char-counter">0/15.000</span>
-                        </div>
-                    </div>
-                    <div class="flex flex-col space-y-2">
-                        <button
-                            type="submit"
-                            class="h-14 px-5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors shadow-md"
-                            title="Nachricht senden"
-                        >
-                            <i class="fas fa-paper-plane text-lg"></i>
-                        </button>
-                        <button
-                            type="button"
-                            id="clear-chat"
-                            class="h-14 px-5 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors shadow-md"
-                            title="Chat zurücksetzen"
-                        >
-                            <i class="fas fa-eraser text-lg"></i>
-                        </button>
-                    </div>
-                </form>
             </div>
         </div>
-        <!-- Features Section -->
-        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div class="bg-white p-5 rounded-xl shadow-lg border-2 border-blue-200">
-                <div class="text-blue-600 mb-3 text-2xl">
-                    <i class="fas fa-expand"></i>
-                </div>
-                <h3 class="font-bold text-lg mb-2">Große Texteingabe</h3>
-                <p class="text-gray-600">Bis zu 15.000 Zeichen Kapazität mit automatischer Höhenanpassung und sichtbarem Scrollbalken.</p>
-            </div>
-            <div class="bg-white p-5 rounded-xl shadow-lg border-2 border-green-200">
-                <div class="text-green-600 mb-3 text-2xl">
-                    <i class="fas fa-paragraph"></i>
-                </div>
-                <h3 class="font-bold text-lg mb-2">Klare Absätze</h3>
-                <p class="text-gray-600">Optimierte Darstellung von Absätzen und Zeilenumbrüchen für bessere Lesbarkeit.</p>
-            </div>
-            <div class="bg-white p-5 rounded-xl shadow-lg border-2 border-yellow-200">
-                <div class="text-yellow-600 mb-3 text-2xl">
-                    <i class="fas fa-sliders-h"></i>
-                </div>
-                <h3 class="font-bold text-lg mb-2">Anpassbare Größe</h3>
-                <p class="text-gray-600">Manuelles Resizing des Eingabefeldes durch Ziehen der unteren Ecke.</p>
             </div>
         </div>
-        <!-- Model Info -->
-        <div class="mt-8 bg-white rounded-xl shadow-xl overflow-hidden border-2 border-gray-300">
-            <div class="px-5 py-4 bg-gray-100 border-b-2 border-gray-300">
-                <div class="flex items-center">
-                    <i class="fas fa-server text-purple-600 mr-3 text-xl"></i>
-                    <span class="font-bold text-lg">Erweiterte Modellinformationen</span>
-                </div>
-            </div>
-            <div class="p-5">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
-                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
-                        <p class="text-sm text-gray-500 mb-1">Modellname</p>
-                        <p class="font-bold text-lg">Llama 4 Maverick XL</p>
-                    </div>
-                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
-                        <p class="text-sm text-gray-500 mb-1">Max. Zeichen</p>
-                        <p class="font-bold text-lg">15.000+</p>
-                    </div>
-                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
-                        <p class="text-sm text-gray-500 mb-1">Kontextlänge</p>
-                        <p class="font-bold text-lg">8k Tokens</p>
-                    </div>
-                </div>
-                <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
-                    <p class="text-blue-800"><i class="fas fa-lightbulb mr-2"></i> Dieses erweiterte Modell ist speziell für lange Dokumente, Code und ausführliche Analysen optimiert.</p>
-                </div>
             </div>
-        </div>
     </div>
-    <script>
-        // Enhanced auto-grow function with character limit
-        function autoGrow(element) {
-            // Reset height to get correct scrollHeight
-            element.style.height = 'auto';
-            // Set new height (with buffer to prevent scrollbar flickering)
-            element.style.height = (element.scrollHeight + 4) + 'px';
-            const currentLength = element.value.length;
-            const maxLength = 15000;
-            const charCounter = document.getElementById('char-count');
-            // Update character count
-            charCounter.textContent = `${currentLength}/${maxLength}`;
-            // Visual feedback based on length
-            if (currentLength > maxLength * 0.9) {
-                charCounter.className = 'char-counter error';
-            } else if (currentLength > maxLength * 0.7) {
-                charCounter.className = 'char-counter warning';
-            } else {
-                charCounter.className = 'char-counter';
-            }
-            // Limit to maxLength characters
-            if (currentLength > maxLength) {
-                element.value = element.value.substring(0, maxLength);
-                charCounter.textContent = `${maxLength}/${maxLength}`;
-            }
         }
-        // Handle Shift+Enter for new line, Enter to submit
-        document.getElementById('user-input').addEventListener('keydown', function(e) {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                document.getElementById('chat-form').dispatchEvent(new Event('submit'));
-            }
-        });
-        // Chat functionality
-        document.getElementById('chat-form').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const input = document.getElementById('user-input');
-            const message = input.value.trim();
-            if (message) {
-                // Add user message
-                addMessage(message, 'user');
-                input.value = '';
-                // Reset textarea height
-                input.style.height = 'auto';
-                document.getElementById('char-count').textContent = '0/15000';
-                document.getElementById('char-count').className = 'char-counter';
-                // Show typing indicator
-                const typingIndicator = document.createElement('div');
-                typingIndicator.className = 'chat-message-ai p-4 rounded-lg';
-                typingIndicator.innerHTML = `
-                    <div class="font-bold text-green-600 mb-2 text-lg">
-                        <i class="fas fa-brain mr-2"></i>Maverick XL
-                    </div>
-                    <p class="typing-indicator text-gray-800">Analysiere Ihre ausführliche Anfrage...</p>
-                `;
-                document.getElementById('chat-history').appendChild(typingIndicator);
-                typingIndicator.scrollIntoView({ behavior: 'smooth' });
-                // Simulate AI response after delay
-                setTimeout(() => {
-                    // Remove typing indicator
-                    typingIndicator.remove();
-                    // Add AI response
-                    const responses = [
-                        `Ich habe Ihre ausführliche Eingabe mit ${message.length} Zeichen analysiert. Das XL-Modell ist perfekt für solche detaillierten Anfragen geeignet. Hier ist meine ausführliche Antwort:\n\nLlama 4 Maverick XL ist speziell für die Verarbeitung langer Texte optimiert. Mit 17 Milliarden Parametern und einer erweiterten Kontextlänge von 8k Tokens kann ich komplexe Zusammenhänge in langen Dokumenten verstehen und verarbeiten.\n\nDie Architektur verwendet erweiterte Attention-Mechanismen, die besonders effizient mit langen Sequenzen umgehen können. Dies ermöglicht tiefgehende Analysen von:\n- Technischen Dokumenten\n- Langen Code-Ausschnitten\n- Ausführlichen Forschungsfragen\n- Mehrseitigen Texten`,
-                        `Vielen Dank für Ihre detaillierte Anfrage. Bei ${message.length} Zeichen nutzen Sie bereits die erweiterten Fähigkeiten dieses Modells. Hier sind einige Beobachtungen zu Ihrem Text:\n\n1. Absatzstruktur: ${(message.match(/\n\s*\n/g) || []).length + 1} klare Absätze erkannt\n2. Code-Blöcke: ${(message.match(/```/g) || []).length / 2 || 0} Code-Abschnitte identifiziert\n3. Schlüsselwörter: ${message.split(/\s+/).length} Wörter analysiert\n\nMeine erweiterte Kontextverarbeitung ermöglicht es, alle diese Elemente in Beziehung zueinander zu setzen.`,
-                        `Ihre lange Eingabe zeigt, dass Sie das volle Potenzial dieses XL-Modells nutzen möchten. Als Maverick XL kann ich:\n\n• Bis zu 15.000 Zeichen Eingabe verarbeiten\n• Komplexe Dokumente mit vielen Absätzen analysieren\n• Lange Code-Blöcke verstehen und kommentieren\n• Ausführliche, zusammenhängende Antworten generieren\n\nDiese erweiterten Fähigkeiten machen mich ideal für:\n- Technische Dokumentation\n- Forschungsarbeiten\n- Code-Reviews\n- Lange Korrespondenz`
-                    ];
-                    addMessage(responses[Math.floor(Math.random() * responses.length)], 'ai');
-                }, 2000 + Math.random() * 2000); // Longer delay for "processing" long texts
-            }
-        });
-        // Clear chat
-        document.getElementById('clear-chat').addEventListener('click', function() {
-            if (confirm('Möchten Sie den gesamten Chatverlauf wirklich zurücksetzen?')) {
-                document.getElementById('chat-history').innerHTML = `
-                    <div class="chat-message-ai p-4 rounded-lg">
-                        <div class="font-bold text-green-600 mb-2 text-lg">
-                            <i class="fas fa-brain mr-2"></i>Maverick XL
-                        </div>
-                        <p class="text-gray-800">Willkommen beim Maverick-Chat XL! Ich bin die erweiterte Version mit Unterstützung für lange Texte (bis zu 15.000 Zeichen). Sie können jetzt ausführliche Dokumente, Code oder lange Fragen eingeben.</p>
-                        <div class="mt-3 p-3 bg-green-50 rounded border border-green-200">
-                            <p class="text-sm text-green-800"><i class="fas fa-info-circle mr-2"></i> Tipp: Nutzen Sie die großen Eingabefelder und den sichtbaren Scrollbalken für bessere Navigation in langen Texten.</p>
-                        </div>
-                    </div>
-                `;
-            }
-        });
-        // Helper function to add messages with better paragraph handling
-        function addMessage(text, sender) {
-            const chatHistory = document.getElementById('chat-history');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `chat-message-${sender} p-4 rounded-lg`;
-            // Format paragraphs and preserve whitespace
-            const formattedText = text
-                .replace(/\n{3,}/g, '\n\n') // Normalize multiple newlines
-                .replace(/\n\n/g, '</p><p class="mt-4">') // Double newline -> paragraph
-                .replace(/\n/g, '<br>') // Single newline -> line break
-                // Format code blocks
-                .replace(/```(\w*)([\s\S]*?)```/g,
-                    '<pre class="bg-gray-100 p-3 rounded my-3 overflow-x-auto border border-gray-300"><code>$2</code></pre>');
-            if (sender === 'user') {
-                messageDiv.innerHTML = `
-                    <div class="font-bold text-blue-600 mb-2 text-lg">
-                        <i class="fas fa-user mr-2"></i>Sie
-                    </div>
-                    <p class="text-gray-800">${formattedText}</p>
-                    <div class="mt-2 text-xs text-gray-500">
-                        ${text.length} Zeichen, ${text.split(/\s+/).length} Wörter
-                    </div>
-                `;
-            } else {
-                messageDiv.innerHTML = `
-                    <div class="font-bold text-green-600 mb-2 text-lg">
-                        <i class="fas fa-brain mr-2"></i>Maverick XL
-                    </div>
-                    <div class="text-gray-800">${formattedText}</div>
-                `;
-            }
-            chatHistory.appendChild(messageDiv);
-            messageDiv.scrollIntoView({ behavior: 'smooth' });
-        }
-    </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>

 <!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>
+// Textarea height adjustment
+function adjustHeight(el) {
+    el.style.height = "auto";
+    el.style.height = (el.scrollHeight) + "px";
+}
+// API call to Hugging Face Space
+async function queryLlamaMaverick(prompt) {
+    const API_URL = "https://openfree-llama-4-maverick-17b-research.hf.space/api/predict";
+    try {
+        const response = await fetch(API_URL, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                data: [prompt]
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
         }
+        const result = await response.json();
+        // The response structure might need adjustment based on the actual API response
+        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;
+    }
+}
+// Send message function
+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"]');
+    // Disable submit button during request
+    submitBtn.disabled = true;
+    submitBtn.classList.add('opacity-50');
+    // Add user message
+    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>`;
+    // Show typing indicator
+    typingIndicator.classList.remove('hidden');
+    chatHistory.scrollTop = chatHistory.scrollHeight;
+    try {
+        // Call the API
+        const response = await queryLlamaMaverick(message);
+        // Hide typing indicator and show response
+        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("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. Bitte versuchen Sie es in einigen Minuten erneut.
+            <div class="text-xs mt-1 text-red-600">${error.message || 'Unbekannter Fehler'}</div>
+        </div>`;
+    } finally {
+        // Re-enable submit button
+        submitBtn.disabled = false;
+        submitBtn.classList.remove('opacity-50');
+        chatHistory.scrollTop = chatHistory.scrollHeight;
+    }
+}
+// Event listeners
+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');
+    // Form submission
+    chatForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const message = inputEl.value.trim();
+        if (message) {
+            sendMessage(message);
+            inputEl.value = '';
+            adjustHeight(inputEl);
+        }
+    });
+    // Clear input button
+    clearInputBtn.addEventListener('click', () => {
+        inputEl.value = '';
+        adjustHeight(inputEl);
+        inputEl.focus();
+    });
+    // Clear chat button
+    clearBtn.addEventListener('click', () => {
+        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>`;
+        }
+    });
+    // Allow Shift+Enter for new lines, Enter to submit
+    inputEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            chatForm.dispatchEvent(new Event('submit'));
+        }
+    });
+    // Focus input on page load
+    inputEl.focus();
+});
+</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>