Spaces:

VishekKumar1
/

quantum-chat-ai

Running

App Files Files Community

VishekKumar1 commited on Jan 27

Commit

42e4d80

verified ·

1 Parent(s): 97fb55b

Mujhe chat GPT ki tarah ek app banakar do jo ki superfast Ho chat gpt se bhi jyada advance

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +167 -19
script.js +129 -0
style.css +179 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quantum Chat Ai
-emoji: 👁
-colorFrom: yellow
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ⚡️ Quantum Chat AI 🚀
+colorFrom: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,167 @@
-<!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>Quantum Chat AI - Beyond GPT</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- Navigation -->
+    <nav class="fixed top-0 w-full bg-gray-800/90 backdrop-blur-lg border-b border-gray-700 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center space-x-3">
+                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full animate-pulse"></div>
+                    <h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        Quantum Chat AI
+                    </h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-700 transition-colors">
+                        <i data-feather="sun" class="w-5 h-5"></i>
+                    </button>
+                    <button id="settingsBtn" class="p-2 rounded-lg hover:bg-gray-700 transition-colors">
+                        <i data-feather="settings" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="pt-16 min-h-screen flex flex-col">
+        <!-- Chat Container -->
+        <div class="flex-1 flex flex-col max-w-4xl mx-auto w-full px-4 py-6">
+            <!-- Welcome Screen -->
+            <div id="welcomeScreen" class="flex-1 flex flex-col items-center justify-center text-center">
+                <div class="mb-8">
+                    <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full animate-pulse"></div>
+                    <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                        Quantum Chat AI
+                    </h2>
+                    <p class="text-gray-400 text-lg">The future of AI conversation is here</p>
+                </div>
+                <!-- Quick Actions -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl">
+                    <button class="quick-action-btn" data-prompt="Explain quantum computing">
+                        <i data-feather="cpu" class="w-8 h-8 mb-2 text-blue-400"></i>
+                        <span>Quantum Computing</span>
+                    </button>
+                    <button class="quick-action-btn" data-prompt="Create a poem about stars">
+                        <i data-feather="star" class="w-8 h-8 mb-2 text-purple-400"></i>
+                        <span>Creative Writing</span>
+                    </button>
+                    <button class="quick-action-btn" data-prompt="Solve complex equations">
+                        <i data-feather="calculator" class="w-8 h-8 mb-2 text-green-400"></i>
+                        <span>Mathematics</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Chat Messages -->
+            <div id="chatContainer" class="hidden flex-1 overflow-y-auto mb-6 space-y-4">
+                <!-- Messages will be dynamically added here -->
+            </div>
+            <!-- Input Area -->
+            <div class="relative">
+                <div class="flex items-end space-x-3">
+                    <div class="flex-1 relative">
+                        <textarea
+                            id="messageInput"
+                            class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 pr-12 resize-none focus:outline-none focus:border-blue-500 transition-colors"
+                            placeholder="Ask me anything..."
+                            rows="1"
+                        ></textarea>
+                        <button id="attachBtn" class="absolute right-3 top-3 text-gray-400 hover:text-white transition-colors">
+                            <i data-feather="paperclip" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <button id="sendBtn" class="bg-gradient-to-r from-blue-500 to-purple-600 p-3 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all transform hover:scale-105">
+                        <i data-feather="send" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <!-- Suggestions -->
+                <div id="suggestions" class="flex flex-wrap gap-2 mt-3">
+                    <span class="suggestion-chip" data-suggestion="What's the meaning of life?">What's the meaning of life?</span>
+                    <span class="suggestion-chip" data-suggestion="Tell me a joke">Tell me a joke</span>
+                    <span class="suggestion-chip" data-suggestion="How to build an app?">How to build an app?</span>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-xl font-bold">Settings</h3>
+                    <button id="closeSettings" class="text-gray-400 hover:text-white">
+                        <i data-feather="x" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium mb-2">AI Model</label>
+                        <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:outline-none focus:border-blue-500">
+                            <option>Quantum AI v3.0</option>
+                            <option>Neural Net Plus</option>
+                            <option>Deep Thinker</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium mb-2">Response Speed</label>
+                        <input type="range" min="1" max="10" value="8" class="w-full">
+                        <div class="flex justify-between text-xs text-gray-400 mt-1">
+                            <span>Slow</span>
+                            <span>Fast</span>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" checked class="rounded">
+                            <span>Enable Smart Suggestions</span>
+                        </label>
+                    </div>
+                    <div>
+                        <label class="flex items-center space-x-3">
+                            <input type="checkbox" checked class="rounded">
+                            <span>Voice Input</span>
+                        </label>
+                    </div>
+                </div>
+                <button class="w-full mt-6 bg-gradient-to-r from-blue-500 to-purple-600 py-2 rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all">
+                    Save Settings
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Loading Overlay -->
+    <div id="loadingOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-40">
+        <div class="flex items-center justify-center min-h-screen">
+            <div class="text-center">
+                <div class="w-16 h-16 mx-auto mb-4 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                <p class="text-lg">Quantum AI is thinking...</p>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,129 @@

+// Global variables
+let isDarkMode = true;
+let currentChat = [];
+let isTyping = false;
+// DOM elements
+const messageInput = document.getElementById('messageInput');
+const sendBtn = document.getElementById('sendBtn');
+const chatContainer = document.getElementById('chatContainer');
+const welcomeScreen = document.getElementById('welcomeScreen');
+const themeToggle = document.getElementById('themeToggle');
+const settingsBtn = document.getElementById('settingsBtn');
+const settingsModal = document.getElementById('settingsModal');
+const closeSettings = document.getElementById('closeSettings');
+const loadingOverlay = document.getElementById('loadingOverlay');
+const suggestions = document.getElementById('suggestions');
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    initializeApp();
+});
+function initializeApp() {
+    setupEventListeners();
+    setupAutoResize();
+    setupQuickActions();
+    setupSuggestionChips();
+    // Auto-focus input
+    messageInput.focus();
+}
+// Event listeners
+function setupEventListeners() {
+    sendBtn.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    themeToggle.addEventListener('click', toggleTheme);
+    settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));
+    closeSettings.addEventListener('click', () => settingsModal.classList.add('hidden'));
+    // Handle suggestion clicks
+    document.querySelectorAll('.suggestion-chip').forEach(chip => {
+        chip.addEventListener('click', () => {
+            messageInput.value = chip.dataset.suggestion;
+            messageInput.focus();
+        });
+    });
+}
+// Auto-resize textarea
+function setupAutoResize() {
+    messageInput.addEventListener('input', () => {
+        messageInput.style.height = 'auto';
+        messageInput.style.height = Math.min(messageInput.scrollHeight, 120) + 'px';
+    });
+}
+// Quick actions
+function setupQuickActions() {
+    document.querySelectorAll('.quick-action-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const prompt = btn.dataset.prompt;
+            messageInput.value = prompt;
+            sendMessage();
+        });
+    });
+}
+// Suggestion chips
+function setupSuggestionChips() {
+    const suggestionTexts = [
+        "What's the meaning of life?",
+        "Tell me a joke",
+        "How to build an app?",
+        "Explain quantum physics",
+        "Write a haiku",
+        "Solve x² + 5x + 6 = 0",
+        "Best programming language?",
+        "Tell me a fun fact"
+    ];
+    // Update suggestions periodically
+    setInterval(() => {
+        const chips = suggestions.querySelectorAll('.suggestion-chip');
+        chips.forEach((chip, index) => {
+            const randomIndex = Math.floor(Math.random() * suggestionTexts.length);
+            chip.textContent = suggestionTexts[randomIndex];
+            chip.dataset.suggestion = suggestionTexts[randomIndex];
+        });
+    }, 10000);
+}
+// Send message
+async function sendMessage() {
+    const message = messageInput.value.trim();
+    if (!message || isTyping) return;
+    // Hide welcome screen
+    welcomeScreen.classList.add('hidden');
+    chatContainer.classList.remove('hidden');
+    // Add user message
+    addMessage(message, 'user');
+    messageInput.value = '';
+    messageInput.style.height = 'auto';
+    // Show typing indicator
+    showTypingIndicator();
+    // Simulate AI response
+    await simulateAIResponse(message);
+}
+// Add message to chat
+function addMessage(content, sender) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'} message-enter`;
+    const messageContent = document.createElement('div');
+    messageContent.className = sender === 'user' ? 'user-message' : 'ai-message';
+    // Check if content is code
+    if (content.includes('

style.css CHANGED Viewed

@@ -1,28 +1,188 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles and animations */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+* {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+/* Message animations */
+.message-enter {
+    animation: messageEnter 0.3s ease-out;
+}
+@keyframes messageEnter {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+/* Typing indicator */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    background: #374151;
+    border-radius: 1rem;
+    width: fit-content;
+}
+.typing-indicator span {
+    height: 8px;
+    width: 8px;
+    background-color: #9ca3af;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 2px;
+    animation: typing 1.4s infinite ease-in-out both;
+}
+.typing-indicator span:nth-child(1) {
+    animation-delay: -0.32s;
+}
+.typing-indicator span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+@keyframes typing {
+    0%, 80%, 100% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+/* Quick action buttons */
+.quick-action-btn {
+    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
+    border: 1px solid #6b7280;
+    border-radius: 1rem;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: white;
+}
+.quick-action-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    border-color: #3b82f6;
+}
+/* Suggestion chips */
+.suggestion-chip {
+    background: #374151;
+    border: 1px solid #4b5563;
+    border-radius: 9999px;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.suggestion-chip:hover {
+    background: #4b5563;
+    border-color: #3b82f6;
+}
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+/* Pulse animation for AI avatar */
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: .5;
+    }
 }
+/* Message bubbles */
+.user-message {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    border-radius: 1rem 1rem 0 1rem;
+    padding: 1rem;
+    max-width: 80%;
+    word-wrap: break-word;
 }
+.ai-message {
+    background: #374151;
+    border-radius: 1rem 1rem 1rem 0;
+    padding: 1rem;
+    max-width: 80%;
+    word-wrap: break-word;
 }
+/* Code blocks */
+.code-block {
+    background: #1f2937;
+    border: 1px solid #374151;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    overflow-x: auto;
 }
+.code-block code {
+    color: #f3f4f6;
+    font-family: 'Fira Code', 'Courier New', monospace;
+}
+/* Image previews */
+.image-preview {
+    max-width: 300px;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    .user-message, .ai-message {
+        max-width: 90%;
+    }
+    .quick-action-btn {
+        padding: 1rem;
+    }
+}