Spaces:

h4sch
/

m-chat

Running

App Files Files Community

h4sch commited on Apr 14

Commit

5ca45d6

verified ·

1 Parent(s): bfb254a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +338 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: M Chat
-emoji: ⚡
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: m-chat
+emoji: 🐳
+colorFrom: green
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,338 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</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 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>