Spaces:

fhsp93
/

t1

Running

File size: 29,023 Bytes

70e5958

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gemini Nano Chat Interface</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>
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .typing-indicator span {
            animation: pulse 1.5s infinite;
        }
        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }
        .chat-container {
            height: calc(100vh - 160px);
        }
        .message-transition {
            transition: all 0.3s ease;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 100%);
        }
        .markdown-style p {
            margin-bottom: 1em;
        }
        .markdown-style ul, .markdown-style ol {
            margin-left: 1.5em;
            margin-bottom: 1em;
        }
        .markdown-style li {
            margin-bottom: 0.5em;
        }
        .markdown-style code {
            background-color: #f3f4f6;
            padding: 0.2em 0.4em;
            border-radius: 0.25em;
            font-family: monospace;
        }
        .markdown-style pre {
            background-color: #f3f4f6;
            padding: 1em;
            border-radius: 0.5em;
            overflow-x: auto;
            margin-bottom: 1em;
        }
        .markdown-style blockquote {
            border-left: 4px solid #e5e7eb;
            padding-left: 1em;
            margin-left: 0;
            color: #6b7280;
            margin-bottom: 1em;
        }
        .token-counter {
            position: absolute;
            right: 1rem;
            bottom: -1.5rem;
            font-size: 0.75rem;
            color: #6b7280;
        }
        .token-limit {
            color: #ef4444;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex flex-col h-screen">
        <!-- Header -->
        <header class="gradient-bg text-white p-4 shadow-md">
            <div class="container mx-auto flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
                        <i class="fas fa-robot text-2xl text-blue-600"></i>
                    </div>
                    <h1 class="text-2xl font-bold">Gemini Nano</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="clear-chat" class="p-2 rounded-full hover:bg-white/20 transition" title="Clear conversation">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-white/20 transition" title="Settings">
                        <i class="fas fa-cog"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-white/20 transition" title="History">
                        <i class="fas fa-history"></i>
                    </button>
                </div>
            </div>
        </header>

        <!-- Chat Container -->
        <div class="chat-container container mx-auto p-4 overflow-y-auto flex-1">
            <div class="max-w-3xl mx-auto space-y-4" id="chat-messages">
                <!-- Welcome message -->
                <div class="flex justify-start">
                    <div class="bg-white rounded-2xl p-4 shadow-sm max-w-[80%] message-transition">
                        <div class="flex items-center mb-2">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
                                <i class="fas fa-robot text-blue-600"></i>
                            </div>
                            <span class="font-semibold">Gemini Nano</span>
                        </div>
                        <div class="markdown-style">
                            <p>Hello! I'm Gemini Nano, your built-in AI assistant with extended context memory (up to 128K tokens). I can help with:</p>
                            <ul>
                                <li>Detailed technical explanations</li>
                                <li>Creative writing and brainstorming</li>
                                <li>Code generation and debugging</li>
                                <li>Research and information synthesis</li>
                                <li>And much more with my extended capabilities</li>
                            </ul>
                            <p>What would you like to explore today? You can ask complex, multi-part questions and I'll maintain context throughout our conversation.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div class="bg-white border-t border-gray-200 p-4 shadow-lg">
            <div class="container mx-auto max-w-3xl relative">
                <form id="chat-form" class="flex space-x-2">
                    <div class="flex-1 relative">
                        <textarea 
                            id="user-input" 
                            placeholder="Message Gemini Nano..." 
                            class="w-full p-4 pr-12 rounded-2xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                            rows="1"
                            autocomplete="off"
                            spellcheck="true"
                        ></textarea>
                        <div id="token-counter" class="token-counter">0/128000 tokens</div>
                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex space-x-1">
                            <button type="button" class="p-2 text-gray-500 hover:text-blue-600" title="Attach file">
                                <i class="fas fa-paperclip"></i>
                            </button>
                            <button type="button" class="p-2 text-gray-500 hover:text-blue-600" title="Voice input">
                                <i class="fas fa-microphone"></i>
                            </button>
                        </div>
                    </div>
                    <button 
                        type="submit" 
                        id="send-button"
                        class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center transition disabled:opacity-50"
                        disabled
                    >
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
                <div class="mt-2 text-xs text-gray-500 text-center">
                    Gemini Nano may display inaccurate info, including about people, so double-check its responses.
                    <span class="block">Current context window: 128K tokens | Max response length: 32K tokens</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatForm = document.getElementById('chat-form');
            const userInput = document.getElementById('user-input');
            const chatMessages = document.getElementById('chat-messages');
            const sendButton = document.getElementById('send-button');
            const clearChatButton = document.getElementById('clear-chat');
            const tokenCounter = document.getElementById('token-counter');
            
            // Conversation context (simulating 128K token memory)
            let conversationContext = [];
            const MAX_CONTEXT_TOKENS = 128000;
            const MAX_RESPONSE_TOKENS = 32000;
            let currentTokenCount = 0;
            
            // Auto-resize textarea
            userInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
                updateTokenCounter(this.value);
            });
            
            function updateTokenCounter(text) {
                // Simple token estimation (4 chars ≈ 1 token)
                const estimatedTokens = Math.ceil(text.length / 4);
                currentTokenCount = estimatedTokens;
                
                tokenCounter.textContent = `${estimatedTokens}/128000 tokens`;
                tokenCounter.className = estimatedTokens > MAX_CONTEXT_TOKENS ? 
                    'token-counter token-limit' : 'token-counter';
                
                sendButton.disabled = text.trim() === '' || estimatedTokens > MAX_CONTEXT_TOKENS;
            }
            
            // Sample knowledge base for extended responses
            const knowledgeBase = {
                // Technical topics
                "javascript": {
                    title: "JavaScript",
                    content: `<p>JavaScript is a versatile programming language used for web development. Key features include:</p>
                    <ul>
                        <li><strong>Event-driven programming:</strong> Handles user interactions and browser events</li>
                        <li><strong>First-class functions:</strong> Functions are treated as objects</li>
                        <li><strong>Prototypal inheritance:</strong> Objects inherit directly from other objects</li>
                        <li><strong>Asynchronous programming:</strong> Promises, async/await for non-blocking operations</li>
                    </ul>
                    <p>Modern JavaScript (ES6+) introduced:</p>
                    <ul>
                        <li>let/const declarations</li>
                        <li>Arrow functions</li>
                        <li>Classes</li>
                        <li>Modules</li>
                        <li>Destructuring</li>
                    </ul>`
                },
                "python": {
                    title: "Python",
                    content: `<p>Python is a high-level, interpreted programming language known for its readability. Key aspects:</p>
                    <ul>
                        <li><strong>Duck typing:</strong> Objects are determined by their methods/properties</li>
                        <li><strong>Indentation:</strong> Uses whitespace for block delimitation</li>
                        <li><strong>Dynamic typing:</strong> Variables don't need type declarations</li>
                        <li><strong>Batteries included:</strong> Extensive standard library</li>
                    </ul>
                    <p>Popular Python frameworks:</p>
                    <ul>
                        <li>Django (web development)</li>
                        <li>Flask (micro web framework)</li>
                        <li>NumPy/SciPy (scientific computing)</li>
                        <li>Pandas (data analysis)</li>
                        <li>TensorFlow/PyTorch (machine learning)</li>
                    </ul>`
                },
                // Creative topics
                "creative writing": {
                    title: "Creative Writing",
                    content: `<p>Creative writing techniques to enhance your storytelling:</p>
                    <ol>
                        <li><strong>Show, don't tell:</strong> Use vivid descriptions instead of direct statements</li>
                        <li><strong>Character development:</strong> Create complex characters with flaws and motivations</li>
                        <li><strong>Plot structure:</strong> Consider the three-act structure or hero's journey</li>
                        <li><strong>Dialogue:</strong> Make it natural and reveal character traits</li>
                        <li><strong>Setting:</strong> Use all five senses to describe environments</li>
                    </ol>
                    <p>Writing prompts to get started:</p>
                    <ul>
                        <li>A character discovers a hidden room in their home that wasn't there yesterday</li>
                        <li>Write a story that begins with "The last thing I expected to find in the freezer was..."</li>
                        <li>Create a dialogue between two people where one is lying but doesn't know the other can tell</li>
                    </ul>`
                },
                // General knowledge
                "history": {
                    title: "World History",
                    content: `<p>Key periods in world history:</p>
                    <ol>
                        <li><strong>Ancient Civilizations</strong> (3000 BCE - 500 CE): Mesopotamia, Egypt, Greece, Rome</li>
                        <li><strong>Middle Ages</strong> (500 - 1500): Feudalism, Crusades, Black Death</li>
                        <li><strong>Renaissance</strong> (14th - 17th century): Revival of art and learning</li>
                        <li><strong>Industrial Revolution</strong> (1760 - 1840): Shift to manufacturing</li>
                        <li><strong>Modern Era</strong> (20th century - present): World Wars, technology boom</li>
                    </ol>
                    <p>Important historical figures:</p>
                    <ul>
                        <li>Alexander the Great (military leader)</li>
                        <li>Leonardo da Vinci (Renaissance polymath)</li>
                        <li>Marie Curie (scientist)</li>
                        <li>Mahatma Gandhi (civil rights leader)</li>
                        <li>Winston Churchill (wartime leader)</li>
                    </ul>`
                }
            };
            
            // Extended response templates
            const extendedResponses = {
                technical: (topic) => {
                    if (knowledgeBase[topic.toLowerCase()]) {
                        const item = knowledgeBase[topic.toLowerCase()];
                        return `<h3>${item.title}</h3>${item.content}
                        <p>Would you like me to go deeper into any specific aspect of ${item.title}?</p>`;
                    }
                    return `While I have extensive knowledge about ${topic}, could you specify which aspect you're interested in? I can provide detailed information on:
                    <ul>
                        <li>Core concepts and fundamentals</li>
                        <li>Advanced techniques and best practices</li>
                        <li>Historical development and evolution</li>
                        <li>Current trends and future directions</li>
                        <li>Practical applications and case studies</li>
                    </ul>`;
                },
                creative: (prompt) => {
                    return `<p>Here's an extended creative response to "${prompt}":</p>
                    <blockquote>
                        The city slept beneath a blanket of stars, unaware of the cosmic events unfolding just beyond human perception. 
                        In the quiet between heartbeats, the universe whispered secrets to those who dared to listen...
                    </blockquote>
                    <p>This opening establishes:</p>
                    <ol>
                        <li>A sense of mystery and scale</li>
                        <li>Contrast between the mundane and extraordinary</li>
                        <li>Potential for cosmic or supernatural elements</li>
                        <li>An invitation to explore deeper meaning</li>
                    </ol>
                    <p>Would you like me to continue this narrative or explore different creative directions?</p>`;
                },
                analytical: (question) => {
                    return `<p>Let me analyze "${question}" from multiple perspectives:</p>
                    <h4>1. Historical Context</h4>
                    <p>This question relates to developments that began in the early 20th century when...</p>
                    
                    <h4>2. Current State</h4>
                    <p>As of 2023, the situation has evolved to include...</p>
                    
                    <h4>3. Future Projections</h4>
                    <p>Experts predict several potential outcomes:</p>
                    <ul>
                        <li>Optimistic scenario: 45% probability</li>
                        <li>Moderate scenario: 35% probability</li>
                        <li>Pessimistic scenario: 20% probability</li>
                    </ul>
                    
                    <h4>4. Critical Factors</h4>
                    <p>The resolution depends largely on:</p>
                    <ol>
                        <li>Technological advancements</li>
                        <li>Policy decisions</li>
                        <li>Public acceptance</li>
                        <li>Economic conditions</li>
                    </ol>
                    
                    <p>Would you like me to focus on any particular aspect of this analysis?</p>`;
                }
            };
            
            // Clear chat handler
            clearChatButton.addEventListener('click', function() {
                if (confirm('Are you sure you want to clear the conversation? This will reset the context memory.')) {
                    chatMessages.innerHTML = `
                        <div class="flex justify-start">
                            <div class="bg-white rounded-2xl p-4 shadow-sm max-w-[80%] message-transition">
                                <div class="flex items-center mb-2">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-robot text-blue-600"></i>
                                    </div>
                                    <span class="font-semibold">Gemini Nano</span>
                                </div>
                                <div class="markdown-style">
                                    <p>Hello! I'm Gemini Nano, your built-in AI assistant with extended context memory (up to 128K tokens). What would you like to explore today?</p>
                                </div>
                            </div>
                        </div>
                    `;
                    conversationContext = [];
                    currentTokenCount = 0;
                    updateTokenCounter('');
                }
            });
            
            chatForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const message = userInput.value.trim();
                
                if (message && currentTokenCount <= MAX_CONTEXT_TOKENS) {
                    // Add user message to chat and context
                    addMessage(message, 'user');
                    conversationContext.push({role: 'user', content: message});
                    userInput.value = '';
                    updateTokenCounter('');
                    
                    // Show typing indicator
                    showTypingIndicator();
                    
                    // Simulate processing delay based on message complexity
                    const processingTime = Math.min(2000 + Math.random() * 3000, 
                        Math.max(1000, message.length / 10));
                    
                    setTimeout(() => {
                        // Remove typing indicator
                        removeTypingIndicator();
                        
                        // Generate response based on context
                        const response = generateExtendedResponse(message);
                        
                        // Add to chat and context
                        addMessage(response, 'bot', true);
                        conversationContext.push({role: 'assistant', content: response});
                        
                        // Simulate token usage
                        currentTokenCount += Math.ceil(response.length / 4);
                        updateTokenCounter('');
                        
                        // Scroll to bottom
                        scrollToBottom();
                    }, processingTime);
                }
            });
            
            function addMessage(text, sender, isMarkdown = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `flex justify-${sender === 'user' ? 'end' : 'start'} message-transition`;
                
                const bubbleDiv = document.createElement('div');
                bubbleDiv.className = `rounded-2xl p-4 shadow-sm max-w-[80%] ${
                    sender === 'user' ? 'bg-blue-600 text-white' : 'bg-white text-gray-800'
                }`;
                
                if (sender === 'bot') {
                    const headerDiv = document.createElement('div');
                    headerDiv.className = 'flex items-center mb-2';
                    headerDiv.innerHTML = `
                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
                            <i class="fas fa-robot text-blue-600"></i>
                        </div>
                        <span class="font-semibold">Gemini Nano</span>
                    `;
                    bubbleDiv.appendChild(headerDiv);
                }
                
                const contentDiv = document.createElement('div');
                if (isMarkdown) {
                    contentDiv.className = 'markdown-style';
                    contentDiv.innerHTML = text; // Note: In real app, sanitize this!
                } else {
                    contentDiv.textContent = text;
                }
                bubbleDiv.appendChild(contentDiv);
                
                messageDiv.appendChild(bubbleDiv);
                chatMessages.appendChild(messageDiv);
                
                scrollToBottom();
            }
            
            function showTypingIndicator() {
                const typingDiv = document.createElement('div');
                typingDiv.className = 'flex justify-start';
                typingDiv.id = 'typing-indicator';
                
                const bubbleDiv = document.createElement('div');
                bubbleDiv.className = 'bg-white rounded-2xl p-4 shadow-sm max-w-[80%]';
                
                const headerDiv = document.createElement('div');
                headerDiv.className = 'flex items-center mb-2';
                headerDiv.innerHTML = `
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
                        <i class="fas fa-robot text-blue-600"></i>
                    </div>
                    <span class="font-semibold">Gemini Nano</span>
                `;
                bubbleDiv.appendChild(headerDiv);
                
                const typingContent = document.createElement('div');
                typingContent.className = 'typing-indicator flex space-x-1';
                typingContent.innerHTML = `
                    <span class="inline-block w-2 h-2 bg-gray-400 rounded-full"></span>
                    <span class="inline-block w-2 h-2 bg-gray-400 rounded-full"></span>
                    <span class="inline-block w-2 h-2 bg-gray-400 rounded-full"></span>
                `;
                bubbleDiv.appendChild(typingContent);
                
                typingDiv.appendChild(bubbleDiv);
                chatMessages.appendChild(typingDiv);
                
                scrollToBottom();
            }
            
            function removeTypingIndicator() {
                const typingIndicator = document.getElementById('typing-indicator');
                if (typingIndicator) {
                    typingIndicator.remove();
                }
            }
            
            function generateExtendedResponse(message) {
                // Analyze message for response type
                const lowerMsg = message.toLowerCase();
                
                // Check for technical topics
                const techTopics = ['javascript', 'python', 'code', 'programming', 'algorithm', 'react', 'database'];
                if (techTopics.some(topic => lowerMsg.includes(topic))) {
                    const topic = techTopics.find(t => lowerMsg.includes(t)) || 'technology';
                    return extendedResponses.technical(topic);
                }
                
                // Check for creative requests
                if (lowerMsg.includes('write') || lowerMsg.includes('story') || 
                    lowerMsg.includes('poem') || lowerMsg.includes('creative')) {
                    return extendedResponses.creative(message);
                }
                
                // Check for analytical questions
                if (lowerMsg.includes('analyze') || lowerMsg.includes('compare') || 
                    lowerMsg.startsWith('why') || lowerMsg.startsWith('how')) {
                    return extendedResponses.analytical(message);
                }
                
                // Default extended response
                return `<p>Thank you for your question. I'll provide a comprehensive response:</p>
                <h3>Overview</h3>
                <p>${message} relates to a broad field of study that encompasses multiple disciplines. At its core, this topic addresses fundamental questions about...</p>
                
                <h3>Key Concepts</h3>
                <ol>
                    <li><strong>Concept A:</strong> Explanation of the first important concept</li>
                    <li><strong>Concept B:</strong> Description of the second key element</li>
                    <li><strong>Concept C:</strong> Analysis of the third critical component</li>
                </ol>
                
                <h3>Current Understanding</h3>
                <p>As of 2023, the scientific/technical/artistic community has reached consensus on several aspects:</p>
                <ul>
                    <li>Established fact 1 with supporting evidence</li>
                    <li>Established fact 2 with relevant studies</li>
                    <li>Ongoing debate about controversial aspect</li>
                </ul>
                
                <h3>Practical Applications</h3>
                <p>This knowledge is applied in various real-world scenarios:</p>
                <ul>
                    <li>Industry application 1</li>
                    <li>Everyday use case 2</li>
                    <li>Cutting-edge implementation 3</li>
                </ul>
                
                <h3>Further Exploration</h3>
                <p>To deepen your understanding, consider these directions:</p>
                <ol>
                    <li>Read foundational papers by Author X and Researcher Y</li>
                    <li>Experiment with practical exercises</li>
                    <li>Explore related concepts Z and W</li>
                </ol>
                
                <p>Would you like me to elaborate on any specific part of this response?</p>`;
            }
            
            function scrollToBottom() {
                const container = document.querySelector('.chat-container');
                container.scrollTop = container.scrollHeight;
            }
            
            // Allow pressing Enter to submit (but Shift+Enter for new line)
            userInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    chatForm.dispatchEvent(new Event('submit'));
                }
            });
            
            // Initial setup
            updateTokenCounter('');
        });
    </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=fhsp93/t1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>