Spaces:
Running
Running
| <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> |