Spaces:

Soltane777
/

webProjet2

Sleeping

App Files Files Community

Soltane777 commited on Apr 29, 2025

Commit

fc03084

verified ·

1 Parent(s): 7cdf1d4

Upload 4 files

Browse files

Files changed (3) hide show

frontend/index.html +124 -186
frontend/script.js +660 -731
frontend/style.css +455 -275

frontend/index.html CHANGED Viewed

@@ -1,25 +1,25 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Web Application</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="/static/style.css">
 </head>
-<body class="bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen transition-colors duration-200">
-    <div class="max-w-6xl mx-auto mt-6 p-6">
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transition-colors duration-200">
-            <div class="bg-gradient-to-r from-purple-600 to-indigo-600 p-6 relative">
-                <h1 class="text-3xl font-bold text-center text-white">AI Web Application</h1>
-                <p class="text-center text-purple-100 mt-2">Integrated interface for AI services</p>
-                <!-- Theme Toggle Button -->
-                <div class="absolute right-6 top-6">
-                    <button id="theme-toggle" class="p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors" onclick="toggleTheme()">
                         <!-- 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">
@@ -27,191 +27,129 @@
                         </svg>
                     </button>
                 </div>
-            </div>
-            <!-- Tabs Navigation -->
-            <div class="flex border-b overflow-x-auto dark:border-gray-700 transition-colors duration-200">
-                <button id="tab-upload" class="tab-button active px-6 py-4 font-medium text-purple-600 dark:text-purple-400 border-b-2 border-purple-600 dark:border-purple-400 whitespace-nowrap transition-colors duration-200">
-                    Document Analysis
-                </button>
-                <button id="tab-text" class="tab-button px-6 py-4 font-medium text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 whitespace-nowrap transition-colors duration-200">
-                    Text Processing
-                </button>
-                <button id="tab-qa" class="tab-button px-6 py-4 font-medium text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 whitespace-nowrap transition-colors duration-200">
-                    Q&A
-                </button>
-                <button id="tab-code" class="tab-button px-6 py-4 font-medium text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 whitespace-nowrap transition-colors duration-200">
-                    Code Generation
-                </button>
-            </div>
-            <!-- Tab Content -->
-            <div class="p-6">
-                <!-- Upload Document Section -->
-                <div id="content-upload" class="tab-content">
-                    <div class="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-xl transition-colors duration-200">
-                        <h2 class="text-2xl font-semibold text-purple-800 dark:text-purple-300 mb-4 transition-colors duration-200">Document & Image Analysis</h2>
-                        <p class="text-gray-600 dark:text-gray-300 mb-4 transition-colors duration-200">Upload a text file or image for analysis</p>
-                        <div class="flex flex-col items-center justify-center border-2 border-dashed border-purple-300 dark:border-purple-700 rounded-lg p-8 mb-4 bg-white dark:bg-gray-700 transition-colors duration-200">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-purple-400 dark:text-purple-300 mb-3 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                             </svg>
-                            <label for="fileInput" class="cursor-pointer bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
-                                Choose File
-                            </label>
-                            <input type="file" id="fileInput" class="hidden">
-                            <p id="fileName" class="mt-2 text-sm text-gray-500 dark:text-gray-300 transition-colors duration-200">No file chosen</p>
                         </div>
-                        <div class="flex flex-wrap gap-3 justify-center">
-                            <button onclick="uploadFile('extract_text')" class="px-5 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
-                                Extract Text
-                            </button>
-                            <button onclick="uploadFile('image_caption')" class="px-5 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
-                                Analyze Image
-                            </button>
                         </div>
                     </div>
                 </div>
-                <!-- Text Processing Section -->
-                <div id="content-text" class="tab-content hidden">
-                    <div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-xl transition-colors duration-200">
-                        <h2 class="text-2xl font-semibold text-blue-800 dark:text-blue-300 mb-4 transition-colors duration-200">Text Processing</h2>
-                        <p class="text-gray-600 dark:text-gray-300 mb-4 transition-colors duration-200">Enter text you want to summarize or translate</p>
-                        <div class="mb-4">
-                            <textarea id="textInput" class="w-full p-4 border border-blue-300 dark:border-blue-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-colors duration-200" rows="6" placeholder="Enter text here..."></textarea>
-                        </div>
-                        <!-- Language Selection for Translation -->
-                        <div id="translationOptions" class="mb-4 p-4 bg-white dark:bg-gray-700 rounded-lg border border-blue-200 dark:border-blue-800 hidden transition-colors duration-200">
-                            <h3 class="text-lg font-medium text-blue-700 dark:text-blue-300 mb-3 transition-colors duration-200">Translation Options</h3>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div>
-                                    <label for="sourceLanguage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-200">From Language:</label>
-                                    <select id="sourceLanguage" class="w-full p-2 border border-blue-300 dark:border-blue-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200">
-                                        <option value="ar">Arabic</option>
-                                        <option value="en" selected>English</option>
-                                        <option value="fr">French</option>
-                                        <option value="es">Spanish</option>
-                                        <option value="zh">Chinese</option>
-                                    </select>
-                                </div>
-                                <div>
-                                    <label for="targetLanguage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-200">To Language:</label>
-                                    <select id="targetLanguage" class="w-full p-2 border border-blue-300 dark:border-blue-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200">
-                                        <option value="ar" selected>Arabic</option>
-                                        <option value="en">English</option>
-                                        <option value="fr">French</option>
-                                        <option value="es">Spanish</option>
-                                        <option value="zh">Chinese</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex flex-wrap gap-3 justify-center">
-                            <button onclick="processText('summarize')" class="px-5 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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 Text
-                            </button>
-                            <button id="translateBtn" class="px-5 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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 Text
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Q&A Section -->
-                <div id="content-qa" class="tab-content hidden">
-                    <div class="bg-amber-50 dark:bg-amber-900/20 p-6 rounded-xl transition-colors duration-200">
-                        <h2 class="text-2xl font-semibold text-amber-800 dark:text-amber-300 mb-4 transition-colors duration-200">Questions & Answers</h2>
-                        <p class="text-gray-600 dark:text-gray-300 mb-4 transition-colors duration-200">Enter reference text and your question to get an answer</p>
-                        <div class="mb-4">
-                            <label for="contextInput" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-200">Reference Text:</label>
-                            <textarea id="contextInput" class="w-full p-4 border border-amber-300 dark:border-amber-700 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-colors duration-200" rows="4" placeholder="Enter reference text here..."></textarea>
-                        </div>
-                        <div class="mb-4">
-                            <label for="questionInput" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-200">Question:</label>
-                            <input type="text" id="questionInput" class="w-full p-4 border border-amber-300 dark:border-amber-700 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-colors duration-200" placeholder="Enter your question here...">
-                        </div>
-                        <div class="flex justify-center">
-                            <button onclick="askQuestion()" class="px-5 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
-                                Get Answer
-                            </button>
-                        </div>
                     </div>
                 </div>
-                <!-- Code Generation Section -->
-                <div id="content-code" class="tab-content hidden">
-                    <div class="bg-teal-50 dark:bg-teal-900/20 p-6 rounded-xl transition-colors duration-200">
-                        <h2 class="text-2xl font-semibold text-teal-800 dark:text-teal-300 mb-4 transition-colors duration-200">Code Generation</h2>
-                        <p class="text-gray-600 dark:text-gray-300 mb-4 transition-colors duration-200">Enter a description of the code you want to generate</p>
-                        <div class="mb-4">
-                            <textarea id="codeInput" class="w-full p-4 border border-teal-300 dark:border-teal-700 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-colors duration-200" rows="6" placeholder="Example: Write code to create a chart for sales data..."></textarea>
-                        </div>
-                        <div class="flex justify-center">
-                            <button onclick="generateCode()" class="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition flex items-center">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
-                                Generate Code
-                            </button>
-                        </div>
-                    </div>
                 </div>
-                <!-- Output Section (Common for all tabs) -->
-                <div class="mt-6">
-                    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-xl transition-colors duration-200">
-                        <div class="flex justify-between items-center mb-2">
-                            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 transition-colors duration-200">Results</h3>
-                            <button id="copyOutput" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex items-center transition-colors duration-200">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a  stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                 </svg>
-                                Copy
-                            </button>
-                        </div>
-                        <div class="relative">
-                            <div id="output" class="p-4 bg-white dark:bg-gray-800 border dark:border-gray-600 rounded-lg h-60 overflow-auto text-gray-800 dark:text-gray-200 transition-colors duration-200"></div>
-                            <div id="loader" class="hidden absolute inset-0 flex items-center justify-center bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 rounded-lg transition-colors duration-200">
-                                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-200"></div>
-                            </div>
                         </div>
-                    </div>
                 </div>
             </div>
         </div>
-        <footer class="mt-6 text-center text-gray-500 dark:text-gray-400 text-sm transition-colors duration-200">
-            <p>Developed by Rezaiguia Soltane © 2025</p>
-        </footer>
     </div>
-    <script src="/static/script.js"></script>
-    <script src="/static/theme-fix.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<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="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">
                         </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="script.js"></script>
 </body>
 </html>

frontend/script.js CHANGED Viewed

@@ -1,762 +1,691 @@
-// Tab switching functionality
 document.addEventListener("DOMContentLoaded", () => {
-    // Initialize theme
-    initTheme()
-    // Tab switching
-    const tabButtons = document.querySelectorAll(".tab-button")
-    const tabContents = document.querySelectorAll(".tab-content")
-    tabButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        // Remove active class from all buttons and hide all contents
-        tabButtons.forEach((btn) => btn.classList.remove("active"))
-        tabContents.forEach((content) => content.classList.add("hidden"))
-        // Add active class to clicked button and show corresponding content
-        button.classList.add("active")
-        const contentId = "content-" + button.id.split("-")[1]
-        document.getElementById(contentId).classList.remove("hidden")
-        // Save active tab to localStorage
-        localStorage.setItem("activeTab", button.id)
-      })
-    })
-    // Restore active tab from localStorage
-    const activeTab = localStorage.getItem("activeTab")
-    if (activeTab) {
-      document.getElementById(activeTab)?.click()
-    }
-    // File input handling
-    const fileInput = document.getElementById("fileInput")
-    const fileName = document.getElementById("fileName")
-    fileInput.addEventListener("change", () => {
-      if (fileInput.files.length > 0) {
-        fileName.textContent = fileInput.files[0].name
       } else {
-        fileName.textContent = "No file chosen"
       }
     })
-    // Copy output button
-    const copyButton = document.getElementById("copyOutput")
-    copyButton.addEventListener("click", () => {
-      const output = document.getElementById("output")
-      navigator.clipboard
-        .writeText(output.textContent)
-        .then(() => {
-          showNotification("Results copied successfully!")
-        })
-        .catch((err) => {
-          console.error("Failed to copy text: ", err)
-          showNotification("Failed to copy text: " + err.message, "error")
-        })
-    })
-    // Translation options toggle
-    const translateBtn = document.getElementById("translateBtn")
-    const translationOptions = document.getElementById("translationOptions")
-    translateBtn.addEventListener("click", () => {
-      // Toggle translation options visibility
-      if (translationOptions.classList.contains("hidden")) {
-        translationOptions.classList.remove("hidden")
-      } else {
-        // If options are already visible, perform translation
-        translateText()
-      }
-    })
-    // Theme toggle
-    const themeToggle = document.getElementById("theme-toggle")
-    themeToggle.addEventListener("click", toggleTheme)
-    // Add download results button
-    const outputContainer = document.querySelector(".bg-gray-100.dark\\:bg-gray-700.p-4.rounded-xl")
-    const downloadButton = document.createElement("button")
-    downloadButton.id = "downloadOutput"
-    downloadButton.className =
-      "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex items-center ml-4 transition-colors duration-200"
-    downloadButton.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-      </svg>
-      Download
-    `
-    downloadButton.addEventListener("click", downloadResults)
-    // Add the download button next to the copy button
-    const resultHeader = outputContainer.querySelector(".flex.justify-between.items-center.mb-2")
-    resultHeader.appendChild(downloadButton)
-    // Initialize history panel
-    initHistoryPanel()
-    // Make sure theme toggle is properly initialized
-    const themeToggleBtn = document.getElementById("theme-toggle")
-    if (themeToggleBtn) {
-      themeToggleBtn.addEventListener("click", toggleTheme)
-      console.log("Theme toggle button initialized")
-    } else {
-      console.error("Theme toggle button not found")
-    }
-    // Initialize theme immediately
-    initTheme()
-    console.log("Theme initialized:", document.documentElement.classList.contains("dark") ? "dark" : "light")
   })
-  // Theme functions
-  function initTheme() {
-    // Check if user preference exists in localStorage
-    const savedTheme = localStorage.getItem("theme")
-    if (savedTheme === "dark" || (!savedTheme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-      // Set dark mode
-      document.documentElement.classList.add("dark")
-      document.getElementById("sun-icon")?.classList.remove("hidden")
-      document.getElementById("moon-icon")?.classList.add("hidden")
-    } else {
-      // Set light mode
-      document.documentElement.classList.remove("dark")
-      document.getElementById("sun-icon")?.classList.add("hidden")
-      document.getElementById("moon-icon")?.classList.remove("hidden")
-    }
   }
-  function toggleTheme() {
-    // Toggle the dark class on the html element
-    document.documentElement.classList.toggle("dark")
-    // Update the icons
-    const sunIcon = document.getElementById("sun-icon")
-    const moonIcon = document.getElementById("moon-icon")
-    if (sunIcon && moonIcon) {
-      if (document.documentElement.classList.contains("dark")) {
-        // Dark mode is active
-        sunIcon.classList.remove("hidden")
-        moonIcon.classList.add("hidden")
-        localStorage.setItem("theme", "dark")
-        showNotification("Dark mode activated")
-      } else {
-        // Light mode is active
-        sunIcon.classList.add("hidden")
-        moonIcon.classList.remove("hidden")
-        localStorage.setItem("theme", "light")
-        showNotification("Light mode activated")
-      }
-    }
-  }
-  // Show notification function
-  function showNotification(message, type = "success") {
-    // Create notification element
-    const notification = document.createElement("div")
-    // Set class based on notification type
-    if (type === "success") {
-      notification.className =
-        "notification fixed top-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-md dark:bg-green-900 dark:text-green-100 dark:border-green-400"
-    } else if (type === "error") {
-      notification.className =
-        "notification fixed top-4 right-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-md dark:bg-red-900 dark:text-red-100 dark:border-red-400"
-    } else if (type === "warning") {
-      notification.className =
-        "notification fixed top-4 right-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-md dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-400"
-    } else if (type === "info") {
-      notification.className =
-        "notification fixed top-4 right-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded shadow-md dark:bg-blue-900 dark:text-blue-100 dark:border-blue-400"
-    }
-    notification.innerHTML = message
-    // Add to document
-    document.body.appendChild(notification)
-    // Remove after 3 seconds
-    setTimeout(() => {
-      notification.style.opacity = "0"
-      notification.style.transform = "translateY(-20px)"
-      notification.style.transition = "opacity 0.5s, transform 0.5s"
-      setTimeout(() => {
-        notification.remove()
-      }, 500)
-    }, 3000)
-  }
-  // Show/hide loader
-  function toggleLoader(show) {
-    const loader = document.getElementById("loader")
-    if (show) {
-      loader.classList.remove("hidden")
     } else {
-      loader.classList.add("hidden")
     }
-  }
-  // Download results function
-  function downloadResults() {
-    const output = document.getElementById("output")
-    const content = output.textContent || output.innerText
-    if (!content || content.trim() === "") {
-      showNotification("No content to download", "warning")
-      return
-    }
-    // Create a blob with the content
-    const blob = new Blob([content], { type: "text/plain" })
-    const url = URL.createObjectURL(blob)
-    // Create a temporary link and trigger download
-    const a = document.createElement("a")
-    a.href = url
-    a.download = "ai-results-" + new Date().toISOString().slice(0, 10) + ".txt"
-    document.body.appendChild(a)
-    a.click()
-    // Clean up
-    setTimeout(() => {
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    }, 100)
-    showNotification("Results downloaded successfully!")
-    // Add to history
-    addToHistory("Downloaded results", content.substring(0, 50) + (content.length > 50 ? "..." : ""))
-  }
-  // History management
-  function initHistoryPanel() {
-    // Create history panel
-    const historyPanel = document.createElement("div")
-    historyPanel.id = "historyPanel"
-    historyPanel.className =
-      "fixed right-0 top-0 h-full w-80 bg-white dark:bg-gray-800 shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto"
-    // Add history header
-    historyPanel.innerHTML = `
-      <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>
-    `
-    document.body.appendChild(historyPanel)
-    // Add history button to the header
-    const header = document.querySelector(".bg-gradient-to-r.from-purple-600.to-indigo-600.p-6.relative")
-    const historyButton = document.createElement("button")
-    historyButton.id = "historyButton"
-    historyButton.className = "absolute left-6 top-6 p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
-    historyButton.innerHTML = `
-      <svg 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
       </svg>
     `
-    header.appendChild(historyButton)
-    // Add event listeners
-    document.getElementById("historyButton").addEventListener("click", toggleHistoryPanel)
-    document.getElementById("closeHistory").addEventListener("click", toggleHistoryPanel)
-    // Load history from localStorage
-    loadHistory()
-  }
-  function toggleHistoryPanel() {
-    const historyPanel = document.getElementById("historyPanel")
-    if (historyPanel.classList.contains("translate-x-full")) {
-      historyPanel.classList.remove("translate-x-full")
-    } else {
-      historyPanel.classList.add("translate-x-full")
     }
   }
-  function addToHistory(action, details) {
-    // Get existing history or initialize empty array
-    const history = JSON.parse(localStorage.getItem("aiAppHistory") || "[]")
-    // Add new item
-    history.unshift({
-      action,
-      details,
-      timestamp: new Date().toISOString(),
-    })
-    // Keep only the last 20 items
-    if (history.length > 20) {
-      history.pop()
-    }
-    // Save back to localStorage
-    localStorage.setItem("aiAppHistory", JSON.stringify(history))
-    // Update UI if history panel exists
-    loadHistory()
   }
-  function loadHistory() {
-    const historyItemsContainer = document.getElementById("historyItems")
-    if (!historyItemsContainer) return
-    // Clear existing items
-    historyItemsContainer.innerHTML = ""
-    // Get history from localStorage
-    const history = JSON.parse(localStorage.getItem("aiAppHistory") || "[]")
-    if (history.length === 0) {
-      historyItemsContainer.innerHTML = `<p class="text-gray-500 dark:text-gray-400 text-center">No history yet</p>`
-      return
-    }
-    // Add each history item
-    history.forEach((item, index) => {
-      const historyItem = document.createElement("div")
-      historyItem.className = "bg-gray-100 dark:bg-gray-700 p-3 rounded-lg"
-      const date = new Date(item.timestamp)
-      const formattedDate = date.toLocaleDateString() + " " + date.toLocaleTimeString()
-      historyItem.innerHTML = `
-        <div class="flex justify-between items-start">
-          <h4 class="font-medium text-gray-800 dark:text-gray-200">${item.action}</h4>
-          <span class="text-xs text-gray-500 dark:text-gray-400">${formattedDate}</span>
-        </div>
-        <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">${item.details}</p>
-      `
-      historyItemsContainer.appendChild(historyItem)
-    })
   }
-  // Format the output based on the type of result
-  function formatOutput(data, type) {
-    const outputElement = document.getElementById("output")
-    outputElement.innerHTML = "" // Clear previous content
-    // Create a container for formatted output
-    const container = document.createElement("div")
-    container.className = "formatted-output"
-    switch (type) {
-      case "translation":
-        // Get language names
-        const sourceLang = getLanguageName(document.getElementById("sourceLanguage").value)
-        const targetLang = getLanguageName(document.getElementById("targetLanguage").value)
-        // Create translation result elements
-        const header = document.createElement("div")
-        header.className = "result-header"
-        header.innerHTML = `<h3>Translation Result</h3>`
-        const originalBox = document.createElement("div")
-        originalBox.className = "text-box original"
-        originalBox.innerHTML = `
-          <div class="text-box-header">${sourceLang}</div>
-          <div class="text-content">${document.getElementById("textInput").value}</div>
-        `
-        const translatedBox = document.createElement("div")
-        translatedBox.className = "text-box translated"
-        // Add text-to-speech button for translated text
-        const translatedText = data.translation || data.result || data.text || JSON.stringify(data)
-        translatedBox.innerHTML = `
-          <div class="text-box-header flex justify-between items-center">
-            <span>${targetLang}</span>
-            <button class="text-to-speech-btn p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600" title="Listen to text">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
-              </svg>
-            </button>
-          </div>
-          <div class="text-content">${translatedText}</div>
-        `
-        container.appendChild(header)
-        container.appendChild(originalBox)
-        container.appendChild(translatedBox)
-        // Add event listener for text-to-speech
-        setTimeout(() => {
-          const ttsBtn = container.querySelector(".text-to-speech-btn")
-          if (ttsBtn) {
-            ttsBtn.addEventListener("click", () => {
-              speakText(translatedText, document.getElementById("targetLanguage").value)
-            })
-          }
-        }, 0)
-        // Add to history
-        addToHistory("Translation", `${sourceLang} to ${targetLang}`)
-        break
-      case "summarize":
-        const summaryHeader = document.createElement("div")
-        summaryHeader.className = "result-header"
-        summaryHeader.innerHTML = `<h3>Summary</h3>`
-        const summaryContent = document.createElement("div")
-        summaryContent.className = "text-box summary"
-        summaryContent.innerHTML = `
-          <div class="text-content">${data.summary || data.result || data.text || JSON.stringify(data)}</div>
-        `
-        container.appendChild(summaryHeader)
-        container.appendChild(summaryContent)
-        // Add to history
-        addToHistory("Summarization", "Text summarized")
-        break
-      case "qa":
-        const qaHeader = document.createElement("div")
-        qaHeader.className = "result-header"
-        qaHeader.innerHTML = `<h3>Answer</h3>`
-        const questionBox = document.createElement("div")
-        questionBox.className = "text-box question"
-        questionBox.innerHTML = `
-          <div class="text-box-header">Question</div>
-          <div class="text-content">${document.getElementById("questionInput").value}</div>
-        `
-        const answerBox = document.createElement("div")
-        answerBox.className = "text-box answer"
-        answerBox.innerHTML = `
-          <div class="text-box-header">Answer</div>
-          <div class="text-content">${data.answer || data.result || JSON.stringify(data)}</div>
-        `
-        container.appendChild(qaHeader)
-        container.appendChild(questionBox)
-        container.appendChild(answerBox)
-        // Add to history
-        addToHistory("Question Answered", document.getElementById("questionInput").value)
-        break
-      case "code":
-        const codeHeader = document.createElement("div")
-        codeHeader.className = "result-header"
-        codeHeader.innerHTML = `<h3>Generated Code</h3>`
-        const codeBox = document.createElement("div")
-        codeBox.className = "text-box code"
-        // Format code with syntax highlighting if possible
-        const codeContent = document.createElement("pre")
-        codeContent.className = "code-content"
-        codeContent.textContent = data.code || data.result || JSON.stringify(data, null, 2)
-        codeBox.appendChild(codeContent)
-        container.appendChild(codeHeader)
-        container.appendChild(codeBox)
-        // Add to history
-        addToHistory("Code Generation", document.getElementById("codeInput").value.substring(0, 50) + "...")
-        break
-      case "extract_text":
-        const extractHeader = document.createElement("div")
-        extractHeader.className = "result-header"
-        extractHeader.innerHTML = `<h3>Extracted Text</h3>`
-        const extractBox = document.createElement("div")
-        extractBox.className = "text-box extracted"
-        extractBox.innerHTML = `
-          <div class="text-content">${data.text || data.result || JSON.stringify(data)}</div>
-        `
-        container.appendChild(extractHeader)
-        container.appendChild(extractBox)
-        // Add to history
-        addToHistory("Text Extraction", "Extracted from file")
-        break
-      case "image_caption":
-        const captionHeader = document.createElement("div")
-        captionHeader.className = "result-header"
-        captionHeader.innerHTML = `<h3>Image Analysis</h3>`
-        const captionBox = document.createElement("div")
-        captionBox.className = "text-box caption"
-        captionBox.innerHTML = `
-          <div class="text-content">${data.caption || data.result || JSON.stringify(data)}</div>
-        `
-        container.appendChild(captionHeader)
-        container.appendChild(captionBox)
-        // Add to history
-        addToHistory("Image Analysis", "Image analyzed")
-        break
-      default:
-        // Fallback to JSON display for unknown types
-        container.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`
-    }
-    outputElement.appendChild(container)
   }
-  // Text-to-speech function
-  function speakText(text, langCode) {
-    if (!text) return
-    // Stop any ongoing speech
-    window.speechSynthesis.cancel()
-    // Create utterance
-    const utterance = new SpeechSynthesisUtterance(text)
-    // Map language codes to BCP 47 language tags
-    const langMap = {
-      ar: "ar-SA",
-      en: "en-US",
-      fr: "fr-FR",
-      es: "es-ES",
-      zh: "zh-CN",
-    }
-    // Set language
-    utterance.lang = langMap[langCode] || "en-US"
-    // Get available voices
-    const voices = window.speechSynthesis.getVoices()
-    // Try to find a voice for the selected language
-    const voice = voices.find((v) => v.lang.startsWith(langMap[langCode]?.split("-")[0] || "en"))
-    if (voice) {
-      utterance.voice = voice
-    }
-    // Speak
-    window.speechSynthesis.speak(utterance)
-    // Show notification
-    showNotification("Playing audio...", "info")
-  }
-  // Helper function to get language name from code
-  function getLanguageName(code) {
-    const languages = {
-      ar: "Arabic",
-      en: "English",
-      fr: "French",
-      es: "Spanish",
-      zh: "Chinese",
-    }
-    return languages[code] || code
   }
-  // API Functions
-  async function uploadFile(endpoint) {
-    const fileInput = document.getElementById("fileInput")
-    const file = fileInput.files[0]
-    if (!file) {
-      showNotification("Please select a file first.", "warning")
-      return
-    }
-    toggleLoader(true)
-    const formData = new FormData()
-    formData.append("file", file)
-    try {
-      const response = await fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {
-        method: "POST",
-        body: formData,
-      })
-      if (!response.ok) {
-        throw new Error(`Server responded with status: ${response.status}`)
       }
-      const data = await response.json()
-      formatOutput(data, endpoint)
-    } catch (error) {
-      console.error("Error:", error)
-      document.getElementById("output").innerHTML =
-        `<div class="error-message">Error: ${error.message || "Failed to fetch data"}</div>`
-      showNotification("Error processing file: " + (error.message || "Unknown error"), "error")
-    } finally {
-      toggleLoader(false)
-    }
-  }
-  async function processText(endpoint) {
-    // If endpoint is translate, we now handle it separately
-    if (endpoint === "translate") {
-      // Show translation options if they're hidden
-      if (document.getElementById("translationOptions").classList.contains("hidden")) {
-        document.getElementById("translationOptions").classList.remove("hidden")
         return
       }
-      return translateText()
-    }
-    const text = document.getElementById("textInput").value
-    if (!text) {
-      showNotification("Please enter text first.", "warning")
-      return
-    }
-    toggleLoader(true)
-    const formData = new FormData()
-    formData.append("text", text)
-    try {
-      const response = await fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {
-        method: "POST",
-        body: formData,
-      })
-      if (!response.ok) {
-        throw new Error(`Server responded with status: ${response.status}`)
       }
-      const data = await response.json()
-      formatOutput(data, endpoint)
-    } catch (error) {
-      console.error("Error:", error)
-      document.getElementById("output").innerHTML =
-        `<div class="error-message">Error: ${error.message || "Failed to fetch data"}</div>`
-      showNotification("Error processing text: " + (error.message || "Unknown error"), "error")
-    } finally {
-      toggleLoader(false)
-    }
-  }
-  async function translateText() {
-    const text = document.getElementById("textInput").value
-    const sourceLanguage = document.getElementById("sourceLanguage").value
-    const targetLanguage = document.getElementById("targetLanguage").value
-    if (!text) {
-      showNotification("Please enter text to translate.", "warning")
       return
-    }
-    toggleLoader(true)
-    const formData = new FormData()
-    formData.append("text", text)
-    formData.append("source_lang", sourceLanguage)
-    formData.append("target_lang", targetLanguage)
-    try {
-      const response = await fetch("https://soltane777-textgeneration.hf.space/translate", {
-        method: "POST",
-        body: formData,
-      })
-      if (!response.ok) {
-        throw new Error(`Server responded with status: ${response.status}`)
-      }
-      const data = await response.json()
-      formatOutput(data, "translation")
-    } catch (error) {
-      console.error("Error:", error)
-      document.getElementById("output").innerHTML =
-        `<div class="error-message">Error: ${error.message || "Failed to fetch translation data"}</div>`
-      showNotification("Error translating text: " + (error.message || "Unknown error"), "error")
-    } finally {
-      toggleLoader(false)
-    }
   }
-  async function askQuestion() {
-    const context = document.getElementById("contextInput").value
-    const question = document.getElementById("questionInput").value
-    if (!context || !question) {
-      showNotification("Please enter both reference text and question.", "warning")
-      return
-    }
-    toggleLoader(true)
-    try {
-      const response = await fetch("https://soltane777-textgeneration.hf.space/qa/", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ context: context, question: question }),
       })
-      if (!response.ok) {
-        throw new Error(`Server responded with status: ${response.status}`)
-      }
-      const data = await response.json()
-      formatOutput(data, "qa")
-    } catch (error) {
-      console.error("Error:", error)
-      document.getElementById("output").innerHTML =
-        `<div class="error-message">Error: ${error.message || "Failed to fetch data"}</div>`
-      showNotification("Error getting answer: " + (error.message || "Unknown error"), "error")
-    } finally {
-      toggleLoader(false)
-    }
-  }
-  async function generateCode() {
-    const prompt = document.getElementById("codeInput").value
-    if (!prompt) {
-      showNotification("Please enter a description for the code.", "warning")
-      return
-    }
-    toggleLoader(true)
-    const formData = new FormData()
-    formData.append("prompt", prompt)
-    try {
-      const response = await fetch("https://soltane777-textgeneration.hf.space/generate_code/", {
-        method: "POST",
-        body: formData,
       })
       if (!response.ok) {
         throw new Error(`Server responded with status: ${response.status}`)
       }
-      const data = await response.json()
-      formatOutput(data, "code")
-    } catch (error) {
       console.error("Error:", error)
-      document.getElementById("output").innerHTML =
-        `<div class="error-message">Error: ${error.message || "Failed to fetch data"}</div>`
-      showNotification("Error generating code: " + (error.message || "Unknown error"), "error")
-    } finally {
-      toggleLoader(false)
-    }
   }
-  // Initialize speech synthesis voices
-  if ("speechSynthesis" in window) {
-    // Load voices
-    speechSynthesis.onvoiceschanged = () => {
-      speechSynthesis.getVoices()
-    }
   }

 document.addEventListener("DOMContentLoaded", () => {
+  // Auto-resize textarea
+  const textarea = document.getElementById("user-input")
+  textarea.addEventListener("input", autoResizeTextarea)
+  // Feature button selection
+  const featureButtons = document.querySelectorAll(".feature-btn")
+  const featureOptions = document.getElementById("feature-options")
+  const fileUploadLabel = document.getElementById("file-upload-label")
+  featureButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      // Remove active class from all buttons
+      featureButtons.forEach((btn) => btn.classList.remove("active"))
+      // Add active class to clicked button
+      button.classList.add("active")
+      // Show/hide file upload button based on feature
+      const feature = button.dataset.feature
+      if (feature === "document" || feature === "image") {
+        fileUploadLabel.classList.remove("hidden")
       } else {
+        fileUploadLabel.classList.add("hidden")
       }
+      // Update feature options
+      updateFeatureOptions(feature)
+      // Save active feature to localStorage
+      localStorage.setItem("activeFeature", feature)
     })
   })
+  // Restore active feature from localStorage
+  const activeFeature = localStorage.getItem("activeFeature") || "chat"
+  document.querySelector(`.feature-btn[data-feature="${activeFeature}"]`)?.click()
+  // File input handling
+  const fileInput = document.getElementById("file-upload")
+  fileInput.addEventListener("change", handleFileSelection)
+  // Chat form submission
+  const chatForm = document.getElementById("chat-form")
+  chatForm.addEventListener("submit", handleChatSubmit)
+  // History panel toggle
+  const historyButton = document.createElement("button")
+  historyButton.id = "historyButton"
+  historyButton.className = "absolute left-4 top-4 p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors"
+  historyButton.innerHTML = `
+    <svg 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  `
+  document.querySelector("header .container").appendChild(historyButton)
+  historyButton.addEventListener("click", toggleHistoryPanel)
+  document.getElementById("closeHistory").addEventListener("click", toggleHistoryPanel)
+  // Theme toggle functionality
+  const themeToggle = document.getElementById("theme-toggle")
+  const sunIcon = document.getElementById("sun-icon")
+  const moonIcon = document.getElementById("moon-icon")
+  // Check for saved theme preference or use system preference
+  const savedTheme = localStorage.getItem("theme")
+  const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+  if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
+    document.documentElement.classList.add("dark")
+    sunIcon.classList.remove("hidden")
+    moonIcon.classList.add("hidden")
   }
+  // Toggle theme when button is clicked
+  themeToggle.addEventListener("click", () => {
+    const isDark = document.documentElement.classList.toggle("dark")
+    // Toggle icons
+    if (isDark) {
+      sunIcon.classList.remove("hidden")
+      moonIcon.classList.add("hidden")
+      localStorage.setItem("theme", "dark")
     } else {
+      sunIcon.classList.add("hidden")
+      moonIcon.classList.remove("hidden")
+      localStorage.setItem("theme", "light")
     }
+    // Show notification
+    showNotification(`Switched to ${isDark ? "dark" : "light"} mode`, "info")
+  })
+  // Load history from localStorage
+  loadHistory()
+})
+// Auto-resize textarea
+function autoResizeTextarea() {
+  this.style.height = "auto"
+  this.style.height = this.scrollHeight + "px"
+}
+// Update feature options based on selected feature
+function updateFeatureOptions(feature) {
+  const optionsContainer = document.getElementById("feature-options")
+  // Clear previous options
+  optionsContainer.innerHTML = ""
+  switch (feature) {
+    case "chat":
+      // No special options for chat
+      optionsContainer.classList.add("hidden")
+      break
+    case "translate":
+      optionsContainer.classList.remove("hidden")
+      optionsContainer.innerHTML = `
+        <div class="language-selector">
+          <div>
+            <label for="sourceLanguage" class="block text-sm font-medium text-gray-700 mb-1">From:</label>
+            <select id="sourceLanguage" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900">
+              <option value="ar">Arabic</option>
+              <option value="en" selected>English</option>
+              <option value="fr">French</option>
+              <option value="es">Spanish</option>
+              <option value="zh">Chinese</option>
+            </select>
+          </div>
+          <div>
+            <label for="targetLanguage" class="block text-sm font-medium text-gray-700 mb-1">To:</label>
+            <select id="targetLanguage" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900">
+              <option value="ar" selected>Arabic</option>
+              <option value="en">English</option>
+              <option value="fr">French</option>
+              <option value="es">Spanish</option>
+              <option value="zh">Chinese</option>
+            </select>
+          </div>
         </div>
+      `
+      break
+    case "qa":
+      optionsContainer.classList.remove("hidden")
+      optionsContainer.innerHTML = `
+        <div class="mb-2">
+          <label for="contextInput" class="block text-sm font-medium text-gray-700 mb-1">Reference Text:</label>
+          <textarea id="contextInput" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900 resize-none" rows="2" placeholder="Enter reference text here..."></textarea>
+        </div>
+      `
+      // Auto-resize for the new textarea
+      document.getElementById("contextInput").addEventListener("input", autoResizeTextarea)
+      break
+    default:
+      optionsContainer.classList.add("hidden")
+      break
+  }
+}
+// Handle file selection
+function handleFileSelection() {
+  const fileInput = document.getElementById("file-upload")
+  const userInput = document.getElementById("user-input")
+  if (fileInput.files.length > 0) {
+    const file = fileInput.files[0]
+    // Create file preview element
+    const filePreview = document.createElement("div")
+    filePreview.className = "file-preview"
+    filePreview.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" 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>
+      <span class="file-preview-name">${file.name}</span>
+      <span class="file-preview-remove" onclick="removeFile()">×</span>
     `
+    // Add file preview after textarea
+    const inputContainer = userInput.parentElement
+    // Remove any existing file preview
+    const existingPreview = inputContainer.querySelector(".file-preview")
+    if (existingPreview) {
+      existingPreview.remove()
     }
+    inputContainer.appendChild(filePreview)
+    // Update placeholder text
+    userInput.placeholder = "Add a message about this file..."
   }
+}
+// Remove selected file
+const removeFile = () => {
+  const fileInput = document.getElementById("file-upload")
+  const userInput = document.getElementById("user-input")
+  const filePreview = document.querySelector(".file-preview")
+  // Reset file input
+  fileInput.value = ""
+  // Remove file preview
+  if (filePreview) {
+    filePreview.remove()
   }
+  // Reset placeholder
+  userInput.placeholder = "Type your message..."
+}
+window.removeFile = removeFile
+// Handle chat form submission
+function handleChatSubmit(e) {
+  e.preventDefault()
+  const userInput = document.getElementById("user-input")
+  const fileInput = document.getElementById("file-upload")
+  const activeFeature = document.querySelector(".feature-btn.active").dataset.feature
+  // Get user message
+  const userMessage = userInput.value.trim()
+  // Check if there's a message or file
+  if (!userMessage && fileInput.files.length === 0) {
+    showNotification("Please enter a message or select a file", "warning")
+    return
   }
+  // Add user message to chat
+  if (userMessage) {
+    addMessageToChat("user", userMessage)
   }
+  // Process based on active feature
+  processRequest(activeFeature, userMessage, fileInput.files[0])
+  // Clear input and file
+  userInput.value = ""
+  userInput.style.height = "auto"
+  if (fileInput.files.length > 0) {
+    removeFile()
   }
+  // Scroll to bottom
+  scrollToBottom()
+}
+// Process request based on feature
+function processRequest(feature, message, file) {
+  // Show loading indicator
+  showLoadingIndicator()
+  // Determine which API endpoint to use
+  let endpoint
+  const formData = new FormData()
+  switch (feature) {
+    case "summarize":
+      endpoint = "summarize"
+      formData.append("text", message)
+      break
+    case "translate":
+      endpoint = "translate"
+      formData.append("text", message)
+      formData.append("source_lang", document.getElementById("sourceLanguage").value)
+      formData.append("target_lang", document.getElementById("targetLanguage").value)
+      break
+    case "qa":
+      endpoint = "qa/"
+      // Use fetch with JSON instead of FormData for QA
+      const context = document.getElementById("contextInput").value.trim()
+      if (!context) {
+        hideLoadingIndicator()
+        showNotification("Please enter reference text", "warning")
+        return
       }
+      // We'll handle this differently below
+      break
+    case "code":
+      endpoint = "generate_code/"
+      formData.append("prompt", message)
+      break
+    case "document":
+      if (!file) {
+        hideLoadingIndicator()
+        showNotification("Please select a document file", "warning")
         return
       }
+      endpoint = "extract_text"
+      formData.append("file", file)
+      break
+    case "image":
+      if (!file) {
+        hideLoadingIndicator()
+        showNotification("Please select an image file", "warning")
+        return
       }
+      endpoint = "image_caption"
+      formData.append("file", file)
+      break
+    default:
+      // For regular chat, we'll simulate a response
+      setTimeout(() => {
+        const responses = [
+          "I'm here to help! What would you like to know?",
+          "That's an interesting question. Let me think about it...",
+          "I can assist with summarizing text, translating languages, answering questions, generating code, and analyzing documents and images. What would you like me to help you with?",
+          "I understand. Is there anything specific you'd like me to explain further?",
+          "I'm your AI assistant. I'm designed to be helpful, harmless, and honest.",
+        ]
+        const randomResponse = responses[Math.floor(Math.random() * responses.length)]
+        addMessageToChat("assistant", randomResponse)
+        hideLoadingIndicator()
+        scrollToBottom()
+        // Add to history
+        addToHistory("Chat", message.substring(0, 30) + (message.length > 30 ? "..." : ""))
+      }, 1000)
       return
   }
+  // Special handling for QA
+  if (feature === "qa") {
+    const context = document.getElementById("contextInput").value.trim()
+    const question = message
+    fetch("https://soltane777-textgeneration.hf.space/qa/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ context: context, question: question }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Server responded with status: ${response.status}`)
+        }
+        return response.json()
       })
+      .then((data) => {
+        const answer = data.answer || "Sorry, I couldn't find an answer to that question."
+        addMessageToChat("assistant", answer)
+        addToHistory("Question Answered", question.substring(0, 30) + (question.length > 30 ? "..." : ""))
       })
+      .catch((error) => {
+        console.error("Error:", error)
+        addMessageToChat("assistant", `Error: ${error.message || "Failed to get an answer"}`)
+        showNotification("Error getting answer: " + (error.message || "Unknown error"), "error")
+      })
+      .finally(() => {
+        hideLoadingIndicator()
+        scrollToBottom()
+      })
+    return
+  }
+  // Process other requests
+  fetch(`https://soltane777-textgeneration.hf.space/${endpoint}`, {
+    method: "POST",
+    body: formData,
+  })
+    .then((response) => {
       if (!response.ok) {
         throw new Error(`Server responded with status: ${response.status}`)
       }
+      return response.json()
+    })
+    .then((data) => {
+      let result
+      switch (feature) {
+        case "summarize":
+          result = data.summary || "Sorry, I couldn't summarize that text."
+          addToHistory("Summarization", "Text summarized")
+          break
+        case "translate":
+          const sourceLang = getLanguageName(document.getElementById("sourceLanguage").value)
+          const targetLang = getLanguageName(document.getElementById("targetLanguage").value)
+          result = data.translation || "Sorry, I couldn't translate that text."
+          addToHistory("Translation", `${sourceLang} to ${targetLang}`)
+          break
+        case "code":
+          result = formatCodeResponse(data)
+          addToHistory("Code Generation", message.substring(0, 30) + (message.length > 30 ? "..." : ""))
+          break
+        case "document":
+          result = data.text || "Sorry, I couldn't extract text from that document."
+          addToHistory("Text Extraction", "Extracted from file")
+          break
+        case "image":
+          result = data.caption || "Sorry, I couldn't analyze that image."
+          addToHistory("Image Analysis", "Image analyzed")
+          break
+        default:
+          result = JSON.stringify(data)
+      }
+      addMessageToChat("assistant", result)
+    })
+    .catch((error) => {
       console.error("Error:", error)
+      addMessageToChat("assistant", `Error: ${error.message || "Failed to process request"}`)
+      showNotification("Error: " + (error.message || "Unknown error"), "error")
+    })
+    .finally(() => {
+      hideLoadingIndicator()
+      scrollToBottom()
+    })
+}
+// Format code response
+function formatCodeResponse(data) {
+  if (!data.code && !data[0]) {
+    return "Sorry, I couldn't generate code for that prompt."
   }
+  const code = data.code || data[0].generated_text || JSON.stringify(data)
+  // Format as code block
+  return "\`\`\`\n" + code + "\n\`\`\`"
+}
+// Add message to chat
+function addMessageToChat(sender, message) {
+  const chatMessages = document.getElementById("chat-messages")
+  const messageDiv = document.createElement("div")
+  if (sender === "user") {
+    messageDiv.className = "flex justify-end mb-4"
+    messageDiv.innerHTML = `
+      <div class="max-w-3xl user-message p-4 shadow-sm">
+        <p class="text-gray-800 whitespace-pre-wrap">${formatMessage(message)}</p>
+      </div>
+    `
+  } else {
+    messageDiv.className = "flex items-start mb-4"
+    messageDiv.innerHTML = `
+      <div class="flex-shrink-0 bg-purple-600 rounded-full p-2 mr-3">
+        <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="max-w-3xl assistant-message p-4 shadow-sm">
+        <div class="text-gray-800 whitespace-pre-wrap">${formatMessage(message)}</div>
+        <div class="message-actions">
+          <button class="message-action-btn copy-btn" onclick="copyToClipboard(this)">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            Copy
+          </button>
+        </div>
+      </div>
+    `
+  }
+  chatMessages.appendChild(messageDiv)
+}
+// Format message with code blocks and links
+function formatMessage(message) {
+  // Replace code blocks
+  message = message.replace(/\`\`\`([\s\S]*?)\`\`\`/g, (match, code) => {
+    return `<pre class="code-content">${escapeHtml(code)}</pre>`
+  })
+  // Replace inline code
+  message = message.replace(/`([^`]+)`/g, (match, code) => {
+    return `<code class="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">${escapeHtml(code)}</code>`
+  })
+  // Replace URLs with links
+  message = message.replace(/(https?:\/\/[^\s]+)/g, (url) => {
+    return `<a href="${url}" target="_blank" class="text-purple-600 hover:underline">${url}</a>`
+  })
+  return message
+}
+// Escape HTML
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;")
+}
+// Copy to clipboard
+window.copyToClipboard = (button) => {
+  const messageDiv = button.closest(".assistant-message")
+  const textContent = messageDiv.querySelector(".whitespace-pre-wrap").innerText
+  navigator.clipboard
+    .writeText(textContent)
+    .then(() => {
+      // Change button text temporarily
+      const originalText = button.innerHTML
+      button.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+        Copied!
+      `
+      setTimeout(() => {
+        button.innerHTML = originalText
+      }, 2000)
+      showNotification("Text copied to clipboard!")
+    })
+    .catch((err) => {
+      console.error("Failed to copy text: ", err)
+      showNotification("Failed to copy text: " + err.message, "error")
+    })
+}
+// Show loading indicator
+function showLoadingIndicator() {
+  const chatMessages = document.getElementById("chat-messages")
+  // Create loading message
+  const loadingDiv = document.createElement("div")
+  loadingDiv.id = "loading-indicator"
+  loadingDiv.className = "flex items-start mb-4"
+  loadingDiv.innerHTML = `
+    <div class="flex-shrink-0 bg-purple-600 rounded-full p-2 mr-3">
+      <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="max-w-3xl assistant-message p-4 shadow-sm flex items-center">
+      <div class="spinner mr-3"></div>
+      <p class="text-gray-600">Thinking...</p>
+    </div>
+  `
+  chatMessages.appendChild(loadingDiv)
+  scrollToBottom()
+}
+// Hide loading indicator
+function hideLoadingIndicator() {
+  const loadingIndicator = document.getElementById("loading-indicator")
+  if (loadingIndicator) {
+    loadingIndicator.remove()
+  }
+}
+// Scroll to bottom of chat
+function scrollToBottom() {
+  const chatMessages = document.getElementById("chat-messages")
+  chatMessages.scrollTop = chatMessages.scrollHeight
+}
+// Show notification
+function showNotification(message, type = "success") {
+  const container = document.getElementById("notification-container")
+  // Create notification element
+  const notification = document.createElement("div")
+  // Set class based on notification type
+  if (type === "success") {
+    notification.className =
+      "notification mb-2 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-md"
+  } else if (type === "error") {
+    notification.className = "notification mb-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-md"
+  } else if (type === "warning") {
+    notification.className =
+      "notification mb-2 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-md"
+  } else if (type === "info") {
+    notification.className =
+      "notification mb-2 bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded shadow-md"
+  }
+  notification.innerHTML = message
+  // Add to container
+  container.appendChild(notification)
+  // Remove after 3 seconds
+  setTimeout(() => {
+    notification.style.opacity = "0"
+    notification.style.transform = "translateY(-20px)"
+    notification.style.transition = "opacity 0.5s, transform 0.5s"
+    setTimeout(() => {
+      notification.remove()
+    }, 500)
+  }, 3000)
+}
+// History panel functions
+function toggleHistoryPanel() {
+  const historyPanel = document.getElementById("historyPanel")
+  if (historyPanel.classList.contains("translate-x-full")) {
+    historyPanel.classList.remove("translate-x-full")
+  } else {
+    historyPanel.classList.add("translate-x-full")
+  }
+}
+function addToHistory(action, details) {
+  // Get existing history or initialize empty array
+  const history = JSON.parse(localStorage.getItem("aiAppHistory") || "[]")
+  // Add new item
+  history.unshift({
+    action,
+    details,
+    timestamp: new Date().toISOString(),
+  })
+  // Keep only the last 20 items
+  if (history.length > 20) {
+    history.pop()
+  }
+  // Save back to localStorage
+  localStorage.setItem("aiAppHistory", JSON.stringify(history))
+  // Update UI if history panel exists
+  loadHistory()
+}
+function loadHistory() {
+  const historyItemsContainer = document.getElementById("historyItems")
+  if (!historyItemsContainer) return
+  // Clear existing items
+  historyItemsContainer.innerHTML = ""
+  // Get history from localStorage
+  const history = JSON.parse(localStorage.getItem("aiAppHistory") || "[]")
+  if (history.length === 0) {
+    historyItemsContainer.innerHTML = `<p class="text-gray-500 text-center">No history yet</p>`
+    return
+  }
+  // Add each history item
+  history.forEach((item) => {
+    const historyItem = document.createElement("div")
+    historyItem.className = "bg-gray-100 p-3 rounded-lg"
+    const date = new Date(item.timestamp)
+    const formattedDate = date.toLocaleDateString() + " " + date.toLocaleTimeString()
+    historyItem.innerHTML = `
+      <div class="flex justify-between items-start">
+        <h4 class="font-medium text-gray-800">${item.action}</h4>
+        <span class="text-xs text-gray-500">${formattedDate}</span>
+      </div>
+      <p class="text-sm text-gray-600 mt-1">${item.details}</p>
+    `
+    historyItemsContainer.appendChild(historyItem)
+  })
+}
+// Helper function to get language name from code
+function getLanguageName(code) {
+  const languages = {
+    ar: "Arabic",
+    en: "English",
+    fr: "French",
+    es: "Spanish",
+    zh: "Chinese",
   }
+  return languages[code] || code
+}

frontend/style.css CHANGED Viewed

@@ -1,286 +1,466 @@
-/* Add these styles to ensure dark mode works properly */
-:root {
-    color-scheme: light;
-  }
-  html.dark {
-    color-scheme: dark;
-  }
-  /* Make sure transitions are smooth */
-  html {
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
-  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
-  body {
-    font-family: "Poppins", Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-  }
-  /* Ensure dark mode styles are applied */
-  html.dark body {
-    background-color: #1a202c;
-    color: #f7fafc;
-  }
-  .tab-button.active {
-    color: #7c3aed;
-    border-bottom: 2px solid #7c3aed;
-  }
-  html.dark .tab-button.active {
-    color: #a78bfa;
-    border-bottom: 2px solid #a78bfa;
-  }
-  .tab-button:not(.active) {
-    border-bottom: 2px solid transparent;
-  }
-  #output {
-    font-family: "Poppins", Arial, sans-serif;
-  }
-  /* Custom scrollbar */
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  ::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
-  html.dark ::-webkit-scrollbar-track {
-    background: #374151;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: #c4b5fd;
-    border-radius: 10px;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: #a78bfa;
-  }
-  /* Animation for notifications */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  .notification {
-    animation: fadeIn 0.3s ease-out forwards;
-  }
-  /* Language selection styles */
-  #translationOptions {
-    transition: all 0.3s ease;
-  }
-  #translationOptions.hidden {
-    display: none;
-  }
-  select {
-    appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 0.7rem center;
-    background-size: 1em;
-    padding-right: 2.5rem;
-  }
-  /* Formatted output styles */
-  .formatted-output {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    width: 100%;
-  }
-  .result-header {
-    margin-bottom: 8px;
-  }
-  .result-header h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: #4b5563;
-    margin: 0;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #e5e7eb;
-  }
-  html.dark .result-header h3 {
-    color: #e5e7eb;
-    border-bottom: 1px solid #4b5563;
-  }
-  .text-box {
-    background-color: white;
-    border-radius: 8px;
-    border: 1px solid #e5e7eb;
-    overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  }
-  html.dark .text-box {
-    background-color: #1f2937;
-    border: 1px solid #374151;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  }
   .text-box-header {
-    background-color: #f9fafb;
-    padding: 8px 12px;
-    font-weight: 500;
-    color: #4b5563;
-    border-bottom: 1px solid #e5e7eb;
-    font-size: 14px;
-  }
-  html.dark .text-box-header {
-    background-color: #374151;
-    color: #e5e7eb;
-    border-bottom: 1px solid #4b5563;
   }
   .text-content {
-    padding: 12px 16px;
-    line-height: 1.6;
-    color: #1f2937;
-  }
-  html.dark .text-content {
-    color: #f3f4f6;
-  }
-  .original .text-box-header {
-    background-color: #eff6ff;
-    color: #1e40af;
-  }
-  html.dark .original .text-box-header {
-    background-color: #1e3a8a;
-    color: #93c5fd;
-  }
-  .translated .text-box-header {
-    background-color: #f0fdf4;
-    color: #166534;
-  }
-  html.dark .translated .text-box-header {
-    background-color: #14532d;
-    color: #86efac;
-  }
-  .question .text-box-header {
-    background-color: #fff7ed;
-    color: #9a3412;
-  }
-  html.dark .question .text-box-header {
-    background-color: #7c2d12;
-    color: #fdba74;
-  }
-  .answer .text-box-header {
-    background-color: #ecfdf5;
-    color: #065f46;
-  }
-  html.dark .answer .text-box-header {
-    background-color: #064e3b;
-    color: #6ee7b7;
-  }
-  .code-content {
-    padding: 12px 16px;
-    font-family: monospace;
-    white-space: pre-wrap;
-    background-color: #f8fafc;
-    color: #334155;
-    line-height: 1.5;
     font-size: 14px;
-    overflow-x: auto;
-  }
-  html.dark .code-content {
-    background-color: #0f172a;
-    color: #e2e8f0;
-  }
-  .error-message {
-    color: #b91c1c;
-    padding: 12px;
-    background-color: #fee2e2;
-    border-radius: 6px;
-    font-weight: 500;
-  }
-  html.dark .error-message {
-    color: #fca5a5;
-    background-color: #7f1d1d;
   }
-  /* Responsive adjustments */
-  @media (max-width: 640px) {
-    .text-box-header {
-      padding: 6px 10px;
-      font-size: 13px;
-    }
-    .text-content {
-      padding: 10px 12px;
-      font-size: 14px;
-    }
-  }
-  /* Theme toggle button animation */
-  #theme-toggle {
-    cursor: pointer;
-    transition: transform 0.2s ease, background-color 0.2s ease;
-  }
-  #theme-toggle:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  #theme-toggle:active {
-    transform: scale(0.9);
   }
-  /* History panel styles */
-  #historyPanel {
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
   }
-  html.dark #historyPanel {
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
   }
-  /* Text-to-speech button styles */
-  .text-to-speech-btn {
-    transition: all 0.2s ease;
   }
-  .text-to-speech-btn:hover svg {
-    color: #7c3aed;
   }
-  html.dark .text-to-speech-btn:hover svg {
-    color: #a78bfa;
   }

+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+body {
+  font-family: "Poppins", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f5f7fa;
+  transition: background-color 0.3s ease;
+}
+/* Dark mode styles */
+html.dark body {
+  background-color: #111827;
+  color: #f3f4f6;
+}
+html.dark .app-content {
+  border-left: 1px solid #374151;
+  border-right: 1px solid #374151;
+}
+html.dark main,
+html.dark #chat-messages,
+html.dark .feature-btn:not(.active),
+html.dark .user-message,
+html.dark textarea,
+html.dark select {
+  background-color: #1f2937;
+  color: #f3f4f6;
+}
+html.dark .feature-btn:not(.active) {
+  border-color: #374151;
+  color: #d1d5db;
+}
+html.dark .feature-btn:hover:not(.active) {
+  background-color: #374151;
+}
+html.dark .assistant-message {
+  background-color: #1f2937;
+  border-color: #374151;
+  border-left: 3px solid #7c3aed;
+}
+html.dark .user-message {
+  border-color: #374151;
+}
+html.dark .border-gray-100,
+html.dark .border-gray-200,
+html.dark .border-gray-300 {
+  border-color: #374151;
+}
+html.dark .text-gray-700,
+html.dark .text-gray-800,
+html.dark .text-gray-900 {
+  color: #e5e7eb;
+}
+html.dark .text-gray-500,
+html.dark .text-gray-600 {
+  color: #9ca3af;
+}
+html.dark .bg-white {
+  background-color: #1f2937;
+}
+html.dark .bg-gray-100 {
+  background-color: #374151;
+}
+html.dark .code-content {
+  background-color: #111827;
+  border-color: #374151;
+  color: #e5e7eb;
+}
+html.dark .message-action-btn {
+  background-color: #374151;
+  color: #9ca3af;
+  border-color: #4b5563;
+}
+html.dark .message-action-btn:hover {
+  background-color: #4b5563;
+  color: #e5e7eb;
+}
+html.dark #historyPanel {
+  background-color: #1f2937;
+}
+html.dark #historyItems .bg-gray-100 {
+  background-color: #374151;
+  border-color: #4b5563;
+}
+html.dark .file-preview {
+  background-color: #374151;
+  border-color: #4b5563;
+}
+/* App container with borders */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 20px;
+}
+.app-content {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border-left: 1px solid #e5e7eb;
+  border-right: 1px solid #e5e7eb;
+}
+/* Feature buttons styling */
+.feature-buttons {
+  -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
+  scrollbar-width: none; /* Hide scrollbar in Firefox */
+}
+.feature-buttons::-webkit-scrollbar {
+  display: none; /* Hide scrollbar in Chrome, Safari and Opera */
+}
+.feature-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #4b5563;
+  background-color: #f9fafb;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  border: 1px solid #f0f0f0;
+}
+.feature-btn:hover {
+  background-color: #f3f4f6;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+.feature-btn.active {
+  color: #ffffff;
+  background-color: #7c3aed;
+  border: 1px solid #7c3aed;
+}
+/* Chat message styling */
+.user-message {
+  background-color: #f9fafb;
+  border-radius: 0.75rem 0.75rem 0 0.75rem;
+  border: 1px solid #f0f0f0;
+}
+.assistant-message {
+  background-color: #ffffff;
+  border-radius: 0.75rem 0.75rem 0.75rem 0;
+  border-left: 3px solid #7c3aed;
+  border-top: 1px solid #f0f0f0;
+  border-right: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+/* Auto-resize textarea */
+textarea {
+  overflow-y: hidden;
+  min-height: 44px;
+  max-height: 200px;
+  background-color: #ffffff;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+::-webkit-scrollbar-thumb {
+  background: #c4b5fd;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #a78bfa;
+}
+/* Animation for notifications */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.notification {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+/* Language selection styles */
+.language-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem center;
+  background-size: 1em;
+  padding-right: 2.5rem;
+  background-color: #ffffff;
+}
+/* Formatted output styles */
+.formatted-output {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+.result-header {
+  margin-bottom: 8px;
+}
+.result-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #4b5563;
+  margin: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.text-box {
+  background-color: white;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+.text-box-header {
+  background-color: #f9fafb;
+  padding: 8px 12px;
+  font-weight: 500;
+  color: #4b5563;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text-content {
+  padding: 12px 16px;
+  line-height: 1.6;
+  color: #1f2937;
+  background-color: #ffffff;
+}
+.code-content {
+  padding: 12px 16px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  background-color: #f9fafb;
+  color: #334155;
+  line-height: 1.5;
+  font-size: 14px;
+  overflow-x: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+.error-message {
+  color: #b91c1c;
+  padding: 12px;
+  background-color: #fee2e2;
+  border-radius: 6px;
+  font-weight: 500;
+}
+/* File upload preview */
+.file-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+  margin-top: 0.5rem;
+  border: 1px solid #f0f0f0;
+}
+.file-preview-name {
+  font-size: 0.875rem;
+  color: #4b5563;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-preview-remove {
+  color: #ef4444;
+  cursor: pointer;
+}
+/* Loading spinner */
+.spinner {
+  border: 3px solid rgba(124, 58, 237, 0.3);
+  border-radius: 50%;
+  border-top: 3px solid #7c3aed;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* Message actions */
+.message-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.message-action-btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  background-color: #f9fafb;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease;
+  border: 1px solid #f0f0f0;
+}
+.message-action-btn:hover {
+  background-color: #f3f4f6;
+  color: #4b5563;
+}
+/* History panel */
+#historyPanel {
+  background-color: #ffffff;
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
+}
+#historyItems .bg-gray-100 {
+  background-color: #f9fafb;
+  border: 1px solid #f0f0f0;
+}
+/* Theme toggle animation */
+#theme-toggle {
+  transition: transform 0.3s ease;
+}
+#theme-toggle:hover {
+  transform: rotate(15deg);
+}
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .app-container {
+    padding: 15px;
+  }
+}
+@media (max-width: 768px) {
+  .app-container {
+    padding: 10px;
+  }
+  .feature-btn {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.8rem;
+  }
+}
+@media (max-width: 640px) {
+  .app-container {
+    padding: 5px;
+  }
+  .feature-btn {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+  }
   .text-box-header {
+    padding: 6px 10px;
+    font-size: 13px;
   }
   .text-content {
+    padding: 10px 12px;
     font-size: 14px;
   }
+  /* Make sure the chat form is properly sized on mobile */
+  #chat-form {
+    flex-direction: column;
+    gap: 10px;
   }
+  #chat-form button {
+    align-self: flex-end;
   }
+}
+/* Fix for very small screens */
+@media (max-width: 380px) {
+  .app-container {
+    padding: 0;
   }
+  .app-content {
+    border-radius: 0;
   }
+  .feature-btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7rem;
   }
+  .feature-btn svg {
+    width: 16px;
+    height: 16px;
   }
+}