| | <!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 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> |
| |
|
| | |
| | <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"> |
| | |
| | <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> |
| |
|
| | |
| | <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> |
