Spaces:

fhsp93
/

t1

Running

App Files Files Community

fhsp93 commited on Apr 5

Commit

70e5958

verified ·

1 Parent(s): 18f0c9e

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: t1
+emoji: 🐳
+colorFrom: red
+colorTo: green
 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,560 @@
-<!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="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>