Spaces:

asd1asd1
/

deepchat-explorer

Running

App Files Files Community

asd1asd1 commited on Oct 23, 2025

Commit

0bbae40

verified ·

1 Parent(s): 303d1cf

es muy basica debe ser mas potente trata de igual y mejorar a grok

Browse files

Files changed (1) hide show

index.html +285 -50

index.html CHANGED Viewed

@@ -1,51 +1,126 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepChat Explorer</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-gray-100">
     <custom-navbar></custom-navbar>
     <div class="container mx-auto px-4 py-8">
-        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
-            <!-- Chat header -->
-            <div class="bg-indigo-600 px-6 py-4 flex items-center">
-                <i data-feather="message-square" class="text-white mr-2"></i>
-                <h1 class="text-xl font-bold text-white">DeepChat Explorer</h1>
             </div>
-            <!-- Chat container -->
-            <div class="h-96 overflow-y-auto p-4" id="chat-container">
-                <!-- Messages will appear here -->
-                <div class="text-center text-gray-500 py-10">
-                    <i data-feather="send" class="w-12 h-12 mx-auto mb-4"></i>
-                    <p>Start chatting with your local AI researcher</p>
                 </div>
             </div>
-            <!-- Input area -->
-            <div class="border-t border-gray-200 p-4 bg-gray-50">
-                <form id="chat-form" class="flex gap-2">
-                    <input
-                        type="text"
-                        id="message-input"
-                        placeholder="Ask something to research..."
-                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-                        autocomplete="off"
-                    >
-                    <button
-                        type="submit"
-                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    >
-                        <i data-feather="send" class="inline"></i>
-                    </button>
-                </form>
             </div>
         </div>
     </div>
@@ -58,39 +133,199 @@
     <script>
         feather.replace();
-        // 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 = '';
-                // Simulate AI response (in a real app, this would call your backend)
                 setTimeout(() => {
-                    addMessage("I'm researching: " + message, 'ai');
-                    addMessage("Found 3 relevant sources about this topic. Would you like me to summarize them?", 'ai');
-                }, 1000);
             }
         });
-        function addMessage(text, sender) {
-            const container = document.getElementById('chat-container');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
-            messageDiv.innerHTML = `
-                <div class="${sender === 'user' ? 'bg-indigo-100' : 'bg-gray-200'} rounded-lg py-2 px-4 max-w-xs md:max-w-md">
-                    <p>${text}</p>
                 </div>
             `;
-            container.appendChild(messageDiv);
-            container.scrollTop = container.scrollHeight;
         }
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepChat Explorer - 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">
+        <!-- Advanced Chat Interface -->
+        <div class="max-w-6xl mx-auto bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden border border-gray-700">
+            <!-- Enhanced Chat Header -->
+            <div class="bg-gradient-to-r from-purple-600 via-blue-600 to-indigo-600 px-6 py-4 flex items-center justify-between">
+                <div class="flex items-center">
+                    <i data-feather="zap" class="text-white mr-3 w-6 h-6"></i>
+                    <h1 class="text-2xl font-bold text-white">DeepChat Explorer Pro</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center text-sm text-white/80">
+                        <div class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></div>
+                        <span>Online</span>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all">
+                            <i data-feather="settings" class="w-4 h-4 text-white"></i>
+                        </button>
+                        <button class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all">
+                            <i data-feather="maximize" class="w-4 h-4 text-white"></i>
+                        </button>
+                    </div>
+                </div>
             </div>
+            <!-- Advanced Chat Container -->
+            <div class="h-[500px] overflow-y-auto p-6 bg-gradient-to-b from-gray-900/80 to-gray-800/80" id="chat-container">
+                <!-- Welcome Message -->
+                <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="brain" class="w-8 h-8 text-white"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-white mb-2">Welcome to DeepChat Explorer Pro</h2>
+                    <p class="text-gray-300">I'm your advanced AI research assistant. I can help you with:</p>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 max-w-2xl mx-auto">
+                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
+                            <i data-feather="search" class="w-6 h-6 text-blue-400 mb-2"></i>
+                            <h3 class="font-semibold text-white">Deep Research</h3>
+                            <p class="text-sm text-gray-300">Multi-source analysis with citations</p>
+                        </div>
+                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
+                            <i data-feather="trending-up" class="w-6 h-6 text-green-400 mb-2"></i>
+                            <h3 class="font-semibold text-white">Real-time Data</h3>
+                            <p class="text-sm text-gray-300">Latest information and trends</p>
+                        </div>
+                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
+                            <i data-feather="code" class="w-6 h-6 text-purple-400 mb-2"></i>
+                            <h3 class="font-semibold text-white">Code Generation</h3>
+                            <p class="text-sm text-gray-300">Programming assistance</p>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <!-- Enhanced Input Area -->
+            <div class="border-t border-gray-700 p-6 bg-gray-800/80">
+                <div class="flex flex-col space-y-4">
+                    <!-- Quick Actions -->
+                    <div class="flex flex-wrap gap-2 justify-center">
+                        <button class="quick-action-btn" data-action="research">
+                            <i data-feather="search" class="w-4 h-4"></i>
+                            Research Topic
+                        </button>
+                        <button class="quick-action-btn" data-action="summarize">
+                            <i data-feather="file-text" class="w-4 h-4"></i>
+                            Summarize
+                        </button>
+                        <button class="quick-action-btn" data-action="code">
+                            <i data-feather="code" class="w-4 h-4"></i>
+                            Write Code
+                        </button>
+                        <button class="quick-action-btn" data-action="analyze">
+                            <i data-feather="bar-chart" class="w-4 h-4"></i>
+                            Analyze Data
+                        </button>
+                    </div>
+                    <!-- Advanced Input Form -->
+                    <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 research, code, analyze, and more!"
+                                class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400 pr-12"
+                                autocomplete="off"
+                            >
+                            <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
+                                <i data-feather="mic" class="w-5 h-5"></i>
+                            </button>
+                        </div>
+                        <button
+                            type="submit"
+                            class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl 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-800 transition-all duration-200 flex items-center space-x-2"
+                        >
+                            <i data-feather="send" class="w-4 h-4"></i>
+                            <span>Send</span>
+                        </button>
+                    </form>
+                    <!-- Model Status -->
+                    <div class="text-center text-sm text-gray-400">
+                        <div class="inline-flex items-center space-x-2 bg-gray-900/50 px-3 py-1 rounded-full">
+                            <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                            <span>DeepChat Pro v2.0 • Real-time Processing • Multi-modal Support</span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
     <script>
         feather.replace();
+        // Enhanced Chat Functionality
+        const chatForm = document.getElementById('chat-form');
+        const messageInput = document.getElementById('message-input');
+        const chatContainer = document.getElementById('chat-container');
+        // Quick action buttons
+        document.querySelectorAll('.quick-action-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const action = this.getAttribute('data-action');
+                const prompts = {
+                    research: "Research the latest developments in artificial intelligence and provide a comprehensive analysis with sources.",
+                    summarize: "Please summarize the key points from this research paper or article.",
+                    code: "Write a Python function to analyze and visualize data trends.",
+                    analyze: "Analyze the current market trends and provide insights with data visualization."
+                };
+                messageInput.value = prompts[action];
+                messageInput.focus();
+            });
+        });
+        chatForm.addEventListener('submit', function(e) {
             e.preventDefault();
+            const message = messageInput.value.trim();
             if (message) {
                 addMessage(message, 'user');
+                messageInput.value = '';
+                // Show typing indicator
+                showTypingIndicator();
+                // Simulate advanced AI response with multiple message types
                 setTimeout(() => {
+                    removeTypingIndicator();
+                    // Advanced response with multiple message types
+                    const responses = generateAdvancedResponse(message);
+                    responses.forEach((response, index) => {
+                        setTimeout(() => {
+                            addMessage(response.text, 'ai', response.type);
+                        }, index * 800);
+                    });
+                }, 2000);
             }
         });
+        function showTypingIndicator() {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'mb-4 flex justify-start';
+            typingDiv.id = 'typing-indicator';
+            typingDiv.innerHTML = `
+                <div class="bg-gray-700 rounded-lg py-3 px-4 max-w-xs">
+                    <div class="flex space-x-1">
+                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
+                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                    </div>
                 </div>
             `;
+            chatContainer.appendChild(typingDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        function removeTypingIndicator() {
+            const indicator = document.getElementById('typing-indicator');
+            if (indicator) indicator.remove();
+        }
+        function addMessage(text, sender, type = 'text') {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in`;
+            let messageContent = '';
+            if (sender === 'user') {
+                messageContent = `
+                    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl py-3 px-4 max-w-lg shadow-lg">
+                        <p class="text-sm">${text}</p>
+                    </div>
+                `;
+            } else {
+                switch(type) {
+                    case 'code':
+                        messageContent = `
+                            <div class="bg-gray-900 border border-gray-700 rounded-2xl p-4 max-w-2xl shadow-lg">
+                                <div class="flex items-center justify-between mb-2">
+                                    <div class="flex items-center space-x-2">
+                                        <i data-feather="code" class="w-4 h-4 text-green-400"></i>
+                                        <span class="text-sm font-medium text-green-400">CODE GENERATED</span>
+                                    </div>
+                                    <button class="text-gray-400 hover:text-white">
+                                        <i data-feather="copy" class="w-4 h-4"></i>
+                                    </button>
+                                </div>
+                                <pre class="text-sm text-gray-200 overflow-x-auto"><code>${text}</code></pre>
+                            </div>
+                        `;
+                        break;
+                    case 'analysis':
+                        messageContent = `
+                            <div class="bg-gray-900 border border-gray-700 rounded-2xl p-4 max-w-2xl shadow-lg">
+                                <div class="flex items-center space-x-2 mb-2">
+                                    <i data-feather="bar-chart" class="w-4 h-4 text-blue-400"></i>
+                                    <span class="text-sm font-medium text-blue-400">DATA ANALYSIS</span>
+                                </div>
+                                <div class="text-sm text-gray-200">${text}</div>
+                                <div class="mt-3 p-3 bg-gray-800 rounded-lg">
+                                    <div class="flex justify-between text-xs text-gray-400">
+                                        <span>Confidence: 92%</span>
+                                        <span>Sources: 5 verified</span>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                        break;
+                    default:
+                        messageContent = `
+                            <div class="bg-gray-700 rounded-2xl py-3 px-4 max-w-2xl shadow-lg">
+                                <p class="text-sm text-gray-100">${text}</p>
+                                <div class="mt-2 flex items-center space-x-4 text-xs text-gray-400">
+                                    <span>✓ Verified Sources</span>
+                                    <span>•</span>
+                                    <span>Real-time Data</span>
+                                </div>
+                            </div>
+                        `;
+                }
+            }
+            messageDiv.innerHTML = messageContent;
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            // Re-initialize feather icons for new content
+            feather.replace();
         }
+        function generateAdvancedResponse(userMessage) {
+            const lowerMessage = userMessage.toLowerCase();
+            const responses = [];
+            // Research-related responses
+            if (lowerMessage.includes('research') || lowerMessage.includes('analyze') || lowerMessage.includes('study')) {
+                responses.push({
+                    text: "🔍 I'm conducting a comprehensive research analysis on your topic...",
+                    type: 'text'
+                });
+                responses.push({
+                    text: "📊 I've gathered data from 12+ sources including academic papers, news articles, and real-time databases.",
+                    type: 'text'
+                });
+                responses.push({
+                    text: "**Key Findings:**\n• Recent studies show significant advancements\n• Market trends indicate 35% growth potential\n• Emerging technologies are disrupting traditional approaches\n\n**Sources Verified:**\n✓ IEEE Research Papers\n✓ Google Scholar\n✓ Industry Reports",
+                    type: 'analysis'
+                });
+            }
+            // Code-related responses
+            else if (lowerMessage.includes('code') || lowerMessage.includes('program') || lowerMessage.includes('function')) {
+                responses.push({
+                    text: "```python\nimport pandas as pd\nimport matplotlib.pyplot as plt\nimport numpy as np\n\ndef analyze_trends(data):\n    \"\"\"Advanced data analysis function\"\"\"\n    df = pd.DataFrame(data)\n    trends = df.rolling(window=7).mean()\n    \n    plt.figure(figsize=(12, 6))\n    plt.plot(df.index, df.values, alpha=0.5, label='Original')\n    plt.plot(trends.index, trends.values, label='7-day Trend', linewidth=2)\n    plt.legend()\n    plt.title('Advanced Trend Analysis')\n    plt.show()\n    \n    return trends\n```",
+                    type: 'code'
+                });
+                responses.push({
+                    text: "This Python function provides real-time trend analysis with visualization. Would you like me to explain any specific part or modify it for your use case?",
+                    type: 'text'
+                });
+            }
+            // Default advanced response
+            else {
+                responses.push({
+                    text: "🤖 I understand you're asking about: " + userMessage,
+                    type: 'text'
+                });
+                responses.push({
+                    text: "I'm processing this through multiple AI models to provide you with the most accurate and up-to-date information.",
+                    type: 'text'
+                });
+                responses.push({
+                    text: "**Comprehensive Analysis Complete:**\n• Cross-referenced with current databases\n• Verified against multiple sources\n• Real-time data integration applied\n• Confidence level: 94%",
+                    type: 'analysis'
+                });
+                responses.push({
+                    text: "Would you like me to dive deeper into any specific aspect or provide additional resources?",
+                    type: 'text'
+                });
+            }
+            return responses;
+        }
+        // Auto-focus input
+        messageInput.focus();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
+</html>