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