Spaces:

strecon
/

gemini-chat

Running

App Files Files Community

strecon commited on May 4, 2025

Commit

57b84eb

verified ·

1 Parent(s): 9c10ce6

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +313 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: gemini-chat
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 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,313 @@
-<!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>JP Gemini Chat</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>
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Chat bubble animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message {
+            animation: fadeIn 0.3s ease-out;
+        }
+        /* Loading dots */
+        @keyframes blink {
+            0% { opacity: 0.2; }
+            20% { opacity: 1; }
+            100% { opacity: 0.2; }
+        }
+        .loading-dots span {
+            animation-name: blink;
+            animation-duration: 1.4s;
+            animation-iteration-count: infinite;
+            animation-fill-mode: both;
+        }
+        .loading-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .loading-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans antialiased">
+    <div class="flex flex-col h-screen">
+        <!-- Header -->
+        <header class="bg-indigo-600 text-white shadow-md">
+            <div class="container mx-auto px-4 py-4 flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-robot text-2xl"></i>
+                    <h1 class="text-xl font-bold">JP Gemini Chat</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="clearChat" class="flex items-center space-x-1 bg-indigo-700 hover:bg-indigo-800 px-3 py-1 rounded-md transition">
+                        <i class="fas fa-trash-alt"></i>
+                        <span>Clear</span>
+                    </button>
+                    <button id="toggleTheme" class="flex items-center space-x-1 bg-indigo-700 hover:bg-indigo-800 px-3 py-1 rounded-md transition">
+                        <i class="fas fa-moon"></i>
+                        <span>Dark</span>
+                    </button>
+                </div>
+            </div>
+        </header>
+        <!-- Chat container -->
+        <div class="flex-1 overflow-hidden container mx-auto px-4 py-4 flex flex-col">
+            <div id="chatContainer" class="flex-1 overflow-y-auto mb-4 space-y-4 p-2 rounded-lg bg-white shadow-inner">
+                <!-- Welcome message -->
+                <div class="message flex">
+                    <div class="flex-shrink-0 mr-3">
+                        <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                    </div>
+                    <div class="bg-indigo-100 rounded-lg p-3 max-w-3xl">
+                        <p class="text-gray-800">Hello! I'm JP Gemini. How can I assist you today?</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Input area -->
+            <div class="bg-white rounded-lg shadow-lg p-4">
+                <div class="flex items-center space-x-2">
+                    <textarea id="userInput"
+                              class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+                              rows="2"
+                              placeholder="Type your message here..."></textarea>
+                    <button id="sendButton"
+                            class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg px-4 py-2 transition flex items-center justify-center h-12 w-12">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+                <div class="mt-2 flex items-center justify-between text-sm text-gray-500">
+                    <div>
+                        <span id="charCount">0</span>/1000
+                    </div>
+                    <div class="flex space-x-2">
+                        <button id="voiceInput" class="hover:text-indigo-600 transition">
+                            <i class="fas fa-microphone"></i>
+                        </button>
+                        <button id="attachFile" class="hover:text-indigo-600 transition">
+                            <i class="fas fa-paperclip"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chatContainer');
+            const userInput = document.getElementById('userInput');
+            const sendButton = document.getElementById('sendButton');
+            const clearChat = document.getElementById('clearChat');
+            const toggleTheme = document.getElementById('toggleTheme');
+            const charCount = document.getElementById('charCount');
+            const voiceInput = document.getElementById('voiceInput');
+            const attachFile = document.getElementById('attachFile');
+            let isDarkMode = false;
+            // Character counter
+            userInput.addEventListener('input', function() {
+                const count = this.value.length;
+                charCount.textContent = count;
+                if (count > 1000) {
+                    charCount.classList.add('text-red-500');
+                } else {
+                    charCount.classList.remove('text-red-500');
+                }
+            });
+            // Send message on Enter (Shift+Enter for new line)
+            userInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            // Send message on button click
+            sendButton.addEventListener('click', sendMessage);
+            // Clear chat
+            clearChat.addEventListener('click', function() {
+                chatContainer.innerHTML = `
+                    <div class="message flex">
+                        <div class="flex-shrink-0 mr-3">
+                            <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white">
+                                <i class="fas fa-robot"></i>
+                            </div>
+                        </div>
+                        <div class="bg-indigo-100 rounded-lg p-3 max-w-3xl">
+                            <p class="text-gray-800">Hello! I'm JP Gemini. How can I assist you today?</p>
+                        </div>
+                    </div>
+                `;
+            });
+            // Toggle theme
+            toggleTheme.addEventListener('click', function() {
+                isDarkMode = !isDarkMode;
+                if (isDarkMode) {
+                    document.body.classList.add('bg-gray-900');
+                    document.body.classList.remove('bg-gray-100');
+                    chatContainer.classList.add('bg-gray-800');
+                    chatContainer.classList.remove('bg-white');
+                    document.querySelector('.bg-white').classList.add('bg-gray-700', 'text-white');
+                    document.querySelector('.bg-white').classList.remove('bg-white');
+                    toggleTheme.innerHTML = '<i class="fas fa-sun"></i><span>Light</span>';
+                } else {
+                    document.body.classList.add('bg-gray-100');
+                    document.body.classList.remove('bg-gray-900');
+                    chatContainer.classList.add('bg-white');
+                    chatContainer.classList.remove('bg-gray-800');
+                    document.querySelector('.bg-gray-700').classList.add('bg-white');
+                    document.querySelector('.bg-gray-700').classList.remove('bg-gray-700', 'text-white');
+                    toggleTheme.innerHTML = '<i class="fas fa-moon"></i><span>Dark</span>';
+                }
+            });
+            // Voice input (placeholder)
+            voiceInput.addEventListener('click', function() {
+                alert('Voice input feature would be implemented here');
+            });
+            // Attach file (placeholder)
+            attachFile.addEventListener('click', function() {
+                alert('File attachment feature would be implemented here');
+            });
+            function sendMessage() {
+                const message = userInput.value.trim();
+                if (message === '') return;
+                // Add user message to chat
+                addMessageToChat(message, 'user');
+                userInput.value = '';
+                charCount.textContent = '0';
+                // Show loading indicator
+                const loadingId = showLoadingIndicator();
+                // Simulate API response after delay
+                setTimeout(() => {
+                    // Remove loading indicator
+                    removeLoadingIndicator(loadingId);
+                    // Add bot response
+                    const responses = [
+                        "I understand your question. Let me think about that...",
+                        "That's an interesting point. Here's what I think...",
+                        "Thanks for your message. Here's my response...",
+                        "I've analyzed your input and here's my perspective..."
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    addMessageToChat(randomResponse, 'bot');
+                }, 1500);
+            }
+            function addMessageToChat(message, sender) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'message flex';
+                if (sender === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="flex-1 flex justify-end">
+                            <div class="flex flex-row-reverse items-start max-w-3xl">
+                                <div class="flex-shrink-0 ml-3">
+                                    <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
+                                        <i class="fas fa-user text-gray-600"></i>
+                                    </div>
+                                </div>
+                                <div class="bg-indigo-500 text-white rounded-lg p-3">
+                                    <p>${message}</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mr-3">
+                                <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white">
+                                    <i class="fas fa-robot"></i>
+                                </div>
+                            </div>
+                            <div class="bg-indigo-100 rounded-lg p-3 max-w-3xl">
+                                <p class="text-gray-800">${message}</p>
+                            </div>
+                        </div>
+                    `;
+                }
+                chatContainer.appendChild(messageDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            function showLoadingIndicator() {
+                const loadingId = 'loading-' + Date.now();
+                const loadingDiv = document.createElement('div');
+                loadingDiv.id = loadingId;
+                loadingDiv.className = 'message flex';
+                loadingDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0 mr-3">
+                            <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white">
+                                <i class="fas fa-robot"></i>
+                            </div>
+                        </div>
+                        <div class="bg-indigo-100 rounded-lg p-3 max-w-3xl">
+                            <div class="loading-dots flex space-x-1">
+                                <span class="inline-block w-2 h-2 rounded-full bg-gray-600"></span>
+                                <span class="inline-block w-2 h-2 rounded-full bg-gray-600"></span>
+                                <span class="inline-block w-2 h-2 rounded-full bg-gray-600"></span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                chatContainer.appendChild(loadingDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+                return loadingId;
+            }
+            function removeLoadingIndicator(id) {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.remove();
+                }
+            }
+        });
+    </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=strecon/gemini-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes