Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modern Chat UI with Accordion</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| }, | |
| accent: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .typing-indicator { | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #64748b; | |
| margin-right: 4px; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.3s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.6s; | |
| margin-right: 0; | |
| } | |
| .message-bubble { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .message-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| width: 0; | |
| height: 0; | |
| border: 10px solid transparent; | |
| } | |
| .user-message:after { | |
| right: -10px; | |
| border-left-color: #0ea5e9; | |
| border-right: 0; | |
| border-bottom: 0; | |
| } | |
| .bot-message:after { | |
| left: -10px; | |
| border-right-color: #f1f5f9; | |
| border-left: 0; | |
| border-bottom: 0; | |
| } | |
| .markdown-body pre { | |
| background-color: #1e293b; | |
| padding: 12px; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| margin: 8px 0; | |
| } | |
| .markdown-body code { | |
| background-color: #1e293b; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| font-family: 'Courier New', Courier, monospace; | |
| } | |
| .markdown-body a { | |
| color: #0ea5e9; | |
| text-decoration: underline; | |
| } | |
| .markdown-body blockquote { | |
| border-left: 4px solid #64748b; | |
| padding-left: 12px; | |
| margin-left: 0; | |
| color: #64748b; | |
| } | |
| .markdown-body table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| margin: 12px 0; | |
| } | |
| .markdown-body th, .markdown-body td { | |
| border: 1px solid #cbd5e1; | |
| padding: 8px; | |
| } | |
| .markdown-body th { | |
| background-color: #f1f5f9; | |
| } | |
| .tool-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .tool-loading { | |
| background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| .chat-container { | |
| height: calc(100vh - 80px); | |
| } | |
| .messages-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: #cbd5e1 #f1f5f9; | |
| } | |
| .messages-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .messages-container::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| } | |
| .messages-container::-webkit-scrollbar-thumb { | |
| background-color: #cbd5e1; | |
| border-radius: 20px; | |
| } | |
| .input-box { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| } | |
| .input-box:focus-within { | |
| box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3); | |
| } | |
| .send-button { | |
| transition: all 0.3s ease; | |
| } | |
| .send-button:hover { | |
| transform: translateY(-1px); | |
| } | |
| .send-button:active { | |
| transform: translateY(1px); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion-content.open { | |
| max-height: 1000px; /* Adjust based on your content */ | |
| } | |
| .accordion-header { | |
| cursor: pointer; | |
| transition: background-color 0.2s ease; | |
| } | |
| .accordion-header:hover { | |
| background-color: #f8fafc; | |
| } | |
| .rotate-180 { | |
| transform: rotate(180deg); | |
| } | |
| .transition-transform { | |
| transition: transform 0.2s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-white border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-gray-800">ChatGPT</h1> | |
| <p class="text-sm text-gray-500">Modern chat interface</p> | |
| </div> | |
| <div class="p-4"> | |
| <button class="w-full bg-primary-600 hover:bg-primary-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Chat | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-2"> | |
| <div class="space-y-1"> | |
| <div class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-500"></i> | |
| <span class="truncate">Getting started with AI</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-500"></i> | |
| <span class="truncate">Marketing strategy</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-500"></i> | |
| <span class="truncate">Code review</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-500"></i> | |
| <span class="truncate">Content ideas</span> | |
| </div> | |
| <div class="p-2 rounded-lg hover:bg-gray-100 cursor-pointer flex items-center"> | |
| <i class="fas fa-comment-alt mr-2 text-gray-500"></i> | |
| <span class="truncate">Product feedback</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Free Plan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chat Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Chat Header --> | |
| <div class="bg-white border-b border-gray-200 p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-800">Getting started with AI</h2> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-share-alt text-gray-500"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-ellipsis-h text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages Container --> | |
| <div class="flex-1 overflow-y-auto messages-container p-4 bg-gray-50"> | |
| <div class="max-w-3xl mx-auto space-y-6"> | |
| <!-- Welcome Message --> | |
| <div class="fade-in"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-white p-4 rounded-xl rounded-tl-none shadow-sm bot-message"> | |
| <h3 class="font-bold text-gray-800 mb-2">Welcome to ChatGPT!</h3> | |
| <div class="markdown-body text-gray-700"> | |
| <p>I'm an AI assistant here to help you with any questions you might have. Here are some things I can help with:</p> | |
| <ul class="list-disc pl-5 mt-2"> | |
| <li>Answering questions on various topics</li> | |
| <li>Generating creative content</li> | |
| <li>Analyzing and summarizing documents</li> | |
| <li>Providing coding assistance</li> | |
| <li>And much more!</li> | |
| </ul> | |
| <p class="mt-2">What would you like to know today?</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex items-center space-x-2"> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-thumbs-up"></i> | |
| </button> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-thumbs-down"></i> | |
| </button> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="fade-in"> | |
| <div class="flex items-start justify-end space-x-3"> | |
| <div class="flex-1 max-w-xl"> | |
| <div class="bg-primary-600 text-white p-4 rounded-xl rounded-tr-none shadow-sm user-message"> | |
| <p>How can I get started with machine learning?</p> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex items-center justify-end space-x-2"> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Message with Tools --> | |
| <div class="fade-in"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <!-- Accordion for Reasoning Section --> | |
| <div class="bg-white rounded-xl shadow-sm mb-3 overflow-hidden"> | |
| <div | |
| class="accordion-header p-4 flex items-center justify-between" | |
| onclick="toggleAccordion(this, 'reasoning-accordion')" | |
| > | |
| <div class="flex items-center text-sm font-medium text-gray-700"> | |
| <i class="fas fa-brain mr-2 text-primary-500"></i> | |
| <span>Reasoning Process</span> | |
| </div> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> | |
| </div> | |
| <div id="reasoning-accordion" class="accordion-content"> | |
| <div class="px-4 pb-4 markdown-body text-gray-700"> | |
| <p>To answer this question, I'll break it down into key steps for getting started with machine learning:</p> | |
| <ol class="list-decimal pl-5"> | |
| <li>Learn the fundamentals of programming and mathematics</li> | |
| <li>Understand basic ML concepts</li> | |
| <li>Choose a programming language (Python recommended)</li> | |
| <li>Work on small projects</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accordion for Tool Card --> | |
| <div class="bg-white rounded-xl shadow-sm mb-3 overflow-hidden"> | |
| <div | |
| class="accordion-header p-4 flex items-center justify-between" | |
| onclick="toggleAccordion(this, 'tool-accordion')" | |
| > | |
| <div class="flex items-center text-sm font-medium text-gray-700"> | |
| <i class="fas fa-cog mr-2 text-primary-500"></i> | |
| <span>Tool Execution</span> | |
| </div> | |
| <i class="fas fa-chevron-down text-gray-500 transition-transform"></i> | |
| </div> | |
| <div id="tool-accordion" class="accordion-content"> | |
| <div class="px-4 pb-4"> | |
| <div class="tool-card bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-4 h-4 rounded-full bg-primary-600 animate-pulse"></div> | |
| <span class="text-sm text-gray-700">Finding the best online courses...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Response --> | |
| <div class="bg-white p-4 rounded-xl rounded-tl-none shadow-sm bot-message"> | |
| <div class="markdown-body text-gray-700"> | |
| <h3>Getting Started with Machine Learning</h3> | |
| <p>Here's a step-by-step guide to begin your machine learning journey:</p> | |
| <h4>1. Learn the Prerequisites</h4> | |
| <ul> | |
| <li><strong>Programming:</strong> Python is the most popular language for ML</li> | |
| <li><strong>Mathematics:</strong> Focus on linear algebra, calculus, and statistics</li> | |
| </ul> | |
| <h4>2. Understand ML Fundamentals</h4> | |
| <p>Key concepts to learn:</p> | |
| <pre><code class="language-python"># Example of a simple linear regression in Python | |
| from sklearn.linear_model import LinearRegression | |
| model = LinearRegression() | |
| model.fit(X_train, y_train) | |
| predictions = model.predict(X_test)</code></pre> | |
| <h4>3. Recommended Resources</h4> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Resource</th> | |
| <th>Type</th> | |
| <th>Difficulty</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Andrew Ng's ML Course</td> | |
| <td>Online Course</td> | |
| <td>Beginner</td> | |
| </tr> | |
| <tr> | |
| <td>Hands-On ML with Scikit-Learn</td> | |
| <td>Book</td> | |
| <td>Intermediate</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h4>4. Practical Projects</h4> | |
| <p>Start with simple projects like:</p> | |
| <ul> | |
| <li>Predicting house prices</li> | |
| <li>Image classification with MNIST</li> | |
| <li>Sentiment analysis on tweets</li> | |
| </ul> | |
| <blockquote> | |
| Remember: Machine learning is a marathon, not a sprint. Take your time to understand the concepts thoroughly. | |
| </blockquote> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex items-center space-x-2"> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-thumbs-up"></i> | |
| </button> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-thumbs-down"></i> | |
| </button> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Typing Indicator --> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-white p-3 rounded-xl rounded-tl-none shadow-sm"> | |
| <div class="typing-indicator"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white border-t border-gray-200 p-4"> | |
| <div class="max-w-3xl mx-auto"> | |
| <form class="relative"> | |
| <div class="input-box flex items-center border border-gray-300 rounded-lg overflow-hidden bg-white"> | |
| <textarea | |
| class="flex-1 py-3 px-4 focus:outline-none resize-none" | |
| placeholder="Message ChatGPT..." | |
| rows="1" | |
| style="min-height: 44px; max-height: 200px;" | |
| ></textarea> | |
| <button | |
| type="submit" | |
| class="send-button bg-primary-600 text-white p-2 m-1 rounded-lg hover:bg-primary-700" | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-2 text-center"> | |
| ChatGPT can make mistakes. Consider checking important information. | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Accordion functionality | |
| function toggleAccordion(header, contentId) { | |
| const content = document.getElementById(contentId); | |
| const icon = header.querySelector('i.fa-chevron-down'); | |
| content.classList.toggle('open'); | |
| icon.classList.toggle('rotate-180'); | |
| } | |
| // Auto-close accordions when streaming starts | |
| function closeAllAccordions() { | |
| document.querySelectorAll('.accordion-content').forEach(content => { | |
| content.classList.remove('open'); | |
| }); | |
| document.querySelectorAll('.accordion-header i.fa-chevron-down').forEach(icon => { | |
| icon.classList.remove('rotate-180'); | |
| }); | |
| } | |
| // Simulate dynamic behavior | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Auto-resize textarea | |
| const textarea = document.querySelector('textarea'); | |
| textarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Simulate typing effect and auto-close accordions when streaming starts | |
| setTimeout(() => { | |
| closeAllAccordions(); | |
| const typingIndicator = document.querySelector('.typing-indicator').parentElement.parentElement; | |
| typingIndicator.classList.add('hidden'); | |
| const newMessage = document.createElement('div'); | |
| newMessage.className = 'fade-in'; | |
| newMessage.innerHTML = ` | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-white p-4 rounded-xl rounded-tl-none shadow-sm bot-message"> | |
| <div class="markdown-body text-gray-700"> | |
| <p>Would you like me to recommend specific projects based on your current skill level? I can tailor suggestions to help you progress effectively.</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 flex items-center space-x-2"> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-thumbs-up"></i> | |
| </button> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-thumbs-down"></i> | |
| </button> | |
| <button class="hover:text-primary-600"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| typingIndicator.parentElement.appendChild(newMessage); | |
| // Scroll to bottom | |
| const messagesContainer = document.querySelector('.messages-container'); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }, 2000); | |
| }); | |
| </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=7dix/chat-frontend" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |