Spaces:
Running
Running
File size: 8,813 Bytes
42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 1fd6575 92b7f10 1fd6575 92b7f10 1fd6575 92b7f10 1fd6575 92b7f10 1fd6575 92b7f10 42e4d80 92b7f10 1fd6575 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 92b7f10 42e4d80 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | <!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">
Desi AI Assistant
</h1>
</div>
<div class="flex items-center space-x-4">
<a href="/history.html" class="p-2 rounded-lg hover:bg-gray-700 transition-colors">
<i data-feather="clock" class="w-5 h-5"></i>
</a>
<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">
Desi AI Assistant
</h2>
<p class="text-gray-400 text-lg">Simple, direct, human replies in your language</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="मजाक सुनाओ">
<i data-feather="smile" class="w-8 h-8 mb-2 text-yellow-400"></i>
<span>मजाक सुनाओ</span>
</button>
<button class="quick-action-btn" data-prompt="क्या हाल है?">
<i data-feather="message-circle" class="w-8 h-8 mb-2 text-green-400"></i>
<span>बातचीत</span>
</button>
<button class="quick-action-btn" data-prompt="कहानी सुनाओ">
<i data-feather="feather" class="w-8 h-8 mb-2 text-purple-400"></i>
<span>कहानी सुनाओ</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="क्या हाल है?">क्या हाल है?</span>
<span class="suggestion-chip" data-suggestion="मजाक सुनाओ">मजाक सुनाओ</span>
<span class="suggestion-chip" data-suggestion="मौसम कैसा है?">मौसम कैसा है?</span>
<span class="suggestion-chip" data-suggestion="कहानी सुनाओ">कहानी सुनाओ</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">Language</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>Auto (Hindi/English)</option>
<option>Hindi Only</option>
<option>English Only</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-2">Reply Style</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>Simple & Direct</option>
<option>Descriptive</option>
<option>Casual Friendly</option>
</select>
</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>Hindi Voice</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">
सेटिंग सेव करो
</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> |