Spaces:
Sleeping
Sleeping
| <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"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </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> | |