Spaces:

7dix
/

chat-frontend

Running

App Files Files Community

7dix commited on Apr 25, 2025

Commit

db196e6

verified ·

1 Parent(s): 537cab8

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: chat-frontend
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 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,629 @@
-<!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>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>

prompts.txt ADDED Viewed

File without changes