Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepChat Pro - Advanced AI Research Assistant</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Enhanced Header --> | |
| <div class="text-center mb-8"> | |
| <div class="inline-flex items-center bg-gradient-to-r from-purple-600 to-blue-600 px-6 py-3 rounded-full mb-4"> | |
| <i data-feather="zap" class="text-yellow-300 mr-2"></i> | |
| <span class="text-white font-semibold">PRO VERSION</span> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent"> | |
| DeepChat Pro | |
| </h1> | |
| <p class="text-gray-300 text-lg max-w-2xl mx-auto"> | |
| Advanced AI research assistant with real-time web search, multi-source analysis, and intelligent reasoning | |
| </p> | |
| </div> | |
| <!-- Main Chat Interface --> | |
| <div class="max-w-6xl mx-auto bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-2xl border border-gray-700 overflow-hidden"> | |
| <!-- Enhanced Chat Header --> | |
| <div class="bg-gradient-to-r from-purple-600 to-blue-600 px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="brain" class="text-white mr-3 text-xl"></i> | |
| <div> | |
| <h1 class="text-xl font-bold text-white">DeepChat Pro</h1> | |
| <div class="flex items-center text-blue-100 text-sm"> | |
| <div class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></div> | |
| <span>Online - Ready for complex research</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="p-2 text-white/80 hover:text-white transition-colors" title="Web Search"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="p-2 text-white/80 hover:text-white transition-colors" title="Attach Files"> | |
| <i data-feather="paperclip"></i> | |
| </button> | |
| <button class="p-2 text-white/80 hover:text-white transition-colors" title="Settings"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Advanced Chat Container --> | |
| <div class="h-96 overflow-y-auto p-6 bg-gradient-to-b from-gray-900/50 to-gray-800/30" id="chat-container"> | |
| <!-- Welcome Message with Capabilities --> | |
| <div class="text-center py-8"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full mb-4"> | |
| <i data-feather="zap" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">Welcome to DeepChat Pro</h3> | |
| <p class="text-gray-300 mb-6">I can help you with advanced research, data analysis, and complex problem-solving</p> | |
| <!-- Capabilities Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto"> | |
| <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600"> | |
| <i data-feather="search" class="text-blue-400 mb-2"></i> | |
| <h4 class="text-white font-medium mb-1">Real-time Search</h4> | |
| <p class="text-gray-400 text-sm">Access latest information from multiple sources</p> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600"> | |
| <i data-feather="bar-chart-2" class="text-green-400 mb-2"></i> | |
| <h4 class="text-white font-medium mb-1">Data Analysis</h4> | |
| <p class="text-gray-400 text-sm">Process and analyze complex datasets</p> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600"> | |
| <i data-feather="code" class="text-purple-400 mb-2"></i> | |
| <h4 class="text-white font-medium mb-1">Code Generation</h4> | |
| <p class="text-gray-400 text-sm">Create and debug programming solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Input Area --> | |
| <div class="border-t border-gray-700 p-6 bg-gray-900/30"> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-white transition-colors rounded-lg hover:bg-gray-700/50" title="Web Search"> | |
| <i data-feather="globe" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-white transition-colors rounded-lg hover:bg-gray-700/50" title="Upload Files"> | |
| <i data-feather="upload" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-white transition-colors rounded-lg hover:bg-gray-700/50" title="Code Mode"> | |
| <i data-feather="terminal" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <form id="chat-form" class="flex gap-3"> | |
| <div class="flex-1 relative"> | |
| <input | |
| type="text" | |
| id="message-input" | |
| placeholder="Ask me anything... I can search the web, analyze data, write code, or help with research" | |
| class="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400" | |
| autocomplete="off" | |
| > | |
| <div class="absolute right-3 top-3 text-gray-400"> | |
| <i data-feather="mic" class="w-4 h-4 cursor-pointer hover:text-white"></i> | |
| </div> | |
| </div> | |
| <button | |
| type="submit" | |
| class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-200 flex items-center" | |
| > | |
| <i data-feather="send" class="mr-2"></i> | |
| Send | |
| </button> | |
| </form> | |
| <!-- Quick Action Buttons --> | |
| <div class="flex flex-wrap gap-2 mt-3"> | |
| <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors"> | |
| Research latest AI trends | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors"> | |
| Analyze market data | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors"> | |
| Write Python code | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors"> | |
| Explain complex topic | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="max-w-6xl mx-auto mt-12 px-4"> | |
| <h2 class="text-2xl font-bold text-white text-center mb-8">Advanced Capabilities</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <i data-feather="database" class="text-blue-400 text-2xl mb-4"></i> | |
| <h3 class="text-white font-semibold mb-2">Multi-source Research</h3> | |
| <p class="text-gray-300 text-sm">Access and cross-reference information from academic papers, news, and databases</p> | |
| </div> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <i data-feather="trending-up" class="text-green-400 text-2xl mb-4"></i> | |
| <h3 class="text-white font-semibold mb-2">Real-time Analysis</h3> | |
| <p class="text-gray-300 text-sm">Process live data streams and provide up-to-the-minute insights</p> | |
| </div> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <i data-feather="code" class="text-purple-400 text-2xl mb-4"></i> | |
| <h3 class="text-white font-semibold mb-2">Code Intelligence</h3> | |
| <p class="text-gray-300 text-sm">Write, debug, and optimize code across multiple programming languages</p> | |
| </div> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <i data-feather="file-text" class="text-yellow-400 text-2xl mb-4"></i> | |
| <h3 class="text-white font-semibold mb-2">Document Processing</h3> | |
| <p class="text-gray-300 text-sm">Analyze and summarize documents, PDFs, and complex reports</p> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Enhanced Chat Functionality | |
| document.getElementById('chat-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const input = document.getElementById('message-input'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| addMessage(message, 'user'); | |
| input.value = ''; | |
| // Show typing indicator | |
| showTypingIndicator(); | |
| // Simulate advanced AI response with multiple capabilities | |
| setTimeout(() => { | |
| hideTypingIndicator(); | |
| // Enhanced response simulation | |
| const responses = [ | |
| { | |
| type: 'analysis', | |
| content: `I'm analyzing your query about "${message}" across multiple data sources...`, | |
| icon: 'search' | |
| }, | |
| { | |
| type: 'insight', | |
| content: `Based on current research trends and real-time data, here are the key findings:`, | |
| icon: 'trending-up' | |
| }, | |
| { | |
| type: 'sources', | |
| content: `I've referenced 12+ sources including academic papers, recent news articles, and industry reports.`, | |
| icon: 'database' | |
| }, | |
| { | |
| type: 'recommendation', | |
| content: `Would you like me to dive deeper into any specific aspect or provide code examples?`, | |
| icon: 'code' | |
| } | |
| ]; | |
| responses.forEach((response, index) => { | |
| setTimeout(() => { | |
| addEnhancedMessage(response.content, 'ai', response.type, response.icon); | |
| }, index * 800); | |
| }); | |
| }, 2000); | |
| } | |
| }); | |
| function showTypingIndicator() { | |
| const container = document.getElementById('chat-container'); | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.id = 'typing-indicator'; | |
| typingDiv.className = 'flex justify-start mb-4'; | |
| typingDiv.innerHTML = ` | |
| <div class="bg-gray-700 rounded-lg py-2 px-4 max-w-xs"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce"></div> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div> | |
| <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div> | |
| <span class="text-gray-300 ml-2">DeepChat Pro is thinking...</span> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(typingDiv); | |
| container.scrollTop = container.scrollHeight; | |
| } | |
| function hideTypingIndicator() { | |
| const indicator = document.getElementById('typing-indicator'); | |
| if (indicator) { | |
| indicator.remove(); | |
| } | |
| } | |
| function addEnhancedMessage(text, sender, messageType = 'default', icon = 'message-circle') { | |
| const container = document.getElementById('chat-container'); | |
| const messageDiv = document.createElement('div'); | |
| let typeClass = 'bg-gray-700 border-l-4'; | |
| let iconColor = 'text-blue-400'; | |
| switch(messageType) { | |
| case 'analysis': | |
| typeClass += ' border-blue-500'; | |
| iconColor = 'text-blue-400'; | |
| break; | |
| case 'insight': | |
| typeClass += ' border-green-500'; | |
| iconColor = 'text-green-400'; | |
| break; | |
| case 'sources': | |
| typeClass += ' border-purple-500'; | |
| iconColor = 'text-purple-400'; | |
| break; | |
| case 'recommendation': | |
| typeClass += ' border-yellow-500'; | |
| iconColor = 'text-yellow-400'; | |
| break; | |
| default: | |
| typeClass += ' border-gray-500'; | |
| } | |
| messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`; | |
| if (sender === 'user') { | |
| messageDiv.innerHTML = ` | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg py-3 px-4 max-w-xs md:max-w-md shadow-lg"> | |
| <p class="text-white">${text}</p> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="${typeClass} rounded-lg py-3 px-4 max-w-xs md:max-w-md shadow-lg"> | |
| <div class="flex items-start mb-2"> | |
| <i data-feather="${icon}" class="${iconColor} mr-2 mt-1"></i> | |
| <p class="text-white">${text}</p> | |
| </div> | |
| <div class="flex justify-between items-center mt-2 text-xs text-gray-400"> | |
| <span>${new Date().toLocaleTimeString()}</span> | |
| <div class="flex space-x-2"> | |
| <button class="hover:text-blue-400 transition-colors" title="Copy"> | |
| <i data-feather="copy" class="w-3 h-3"></i> | |
| </button> | |
| <button class="hover:text-green-400 transition-colors" title="Save"> | |
| <i data-feather="bookmark" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| container.appendChild(messageDiv); | |
| container.scrollTop = container.scrollHeight; | |
| feather.replace(); | |
| } | |
| function addMessage(text, sender) { | |
| addEnhancedMessage(text, sender); | |
| } | |
| // Quick action buttons functionality | |
| document.querySelectorAll('.quick-action').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.getElementById('message-input').value = this.textContent; | |
| document.getElementById('chat-form').dispatchEvent(new Event('submit')); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |