Spaces:
Sleeping
Sleeping
File size: 18,547 Bytes
ef07114 200c447 ef07114 200c447 a6e1cc4 7d9be47 ef07114 4d561f9 200c447 4d561f9 200c447 4d561f9 a6e1cc4 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 a6e1cc4 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 4d561f9 200c447 a6e1cc4 200c447 4d561f9 200c447 a6e1cc4 7d9be47 7890d97 ef07114 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 |
<!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">
<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>
|