Spaces:
Sleeping
Sleeping
| <html lang="en" dir="ltr" class=""> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Chat Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="static/style.css"> | |
| </head> | |
| <body class="bg-gray-100 font-sans min-h-screen"> | |
| <div class="app-container"> | |
| <div class="app-content"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-purple-600 to-indigo-600 p-4 shadow-md rounded-t-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-white">AI Assistant</h1> | |
| <!-- Theme Toggle Button --> | |
| <button id="theme-toggle" class="p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors"> | |
| <!-- Sun icon (for dark mode) --> | |
| <svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707-.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /> | |
| </svg> | |
| <!-- Moon icon (for light mode) --> | |
| <svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 overflow-hidden flex flex-col bg-white"> | |
| <!-- Chat Messages Container --> | |
| <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-white"> | |
| <!-- Welcome Message --> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-purple-600 rounded-full p-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-3 bg-white rounded-lg p-4 shadow-sm max-w-3xl border border-gray-100"> | |
| <p class="text-gray-800">Welcome! I'm your AI assistant. I can help you with:</p> | |
| <ul class="mt-2 list-disc list-inside text-gray-700"> | |
| <li>Summarizing text</li> | |
| <li>Translating between languages</li> | |
| <li>Answering questions</li> | |
| <li>Generating code</li> | |
| <li>Analyzing documents and images</li> | |
| </ul> | |
| <p class="mt-2 text-gray-800">How can I assist you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature Selection Bar --> | |
| <div class="bg-white border-t border-gray-100 p-3"> | |
| <div class="flex overflow-x-auto space-x-2 pb-2 feature-buttons"> | |
| <button class="feature-btn active" data-feature="chat"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> | |
| </svg> | |
| Chat | |
| </button> | |
| <button class="feature-btn" data-feature="summarize"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> | |
| </svg> | |
| Summarize | |
| </button> | |
| <button class="feature-btn" data-feature="translate"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" /> | |
| </svg> | |
| Translate | |
| </button> | |
| <button class="feature-btn" data-feature="qa"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| Q&A | |
| </button> | |
| <button class="feature-btn" data-feature="code"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> | |
| </svg> | |
| Code | |
| </button> | |
| <button class="feature-btn" data-feature="document"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| Document | |
| </button> | |
| <button class="feature-btn" data-feature="image"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Feature-specific Options (initially hidden) --> | |
| <div id="feature-options" class="bg-white border-t border-gray-100 p-3 hidden"> | |
| <!-- Content will be dynamically inserted based on selected feature --> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white border-t border-gray-100 p-4 rounded-b-lg"> | |
| <form id="chat-form" class="flex items-end gap-2"> | |
| <div class="flex-1 relative"> | |
| <textarea id="user-input" rows="1" class="w-full p-3 pr-10 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900 resize-none" placeholder="Type your message..."></textarea> | |
| <!-- File Upload Button (initially hidden) --> | |
| <label id="file-upload-label" for="file-upload" class="absolute right-3 bottom-3 cursor-pointer hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 hover:text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /> | |
| </svg> | |
| </label> | |
| <input id="file-upload" type="file" class="hidden"> | |
| </div> | |
| <button type="submit" class="p-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" /> | |
| </svg> | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- History Panel (hidden by default) --> | |
| <div id="historyPanel" class="fixed right-0 top-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto"> | |
| <div class="p-4 bg-purple-600 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold">History</h3> | |
| <button id="closeHistory" class="text-white hover:text-purple-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="historyItems" class="p-4 space-y-3"></div> | |
| </div> | |
| <!-- Notification Container --> | |
| <div id="notification-container" class="fixed top-4 right-4 z-50"></div> | |
| <script src="static/script.js"></script> | |
| </body> | |
| </html> | |