Hugging Face's logo

Spaces:
fsalmansour
/
store
Running

App Files Community
fsalmansour commited on
Commit
b0d4cb8
·
verified ·
1 Parent(s): e76b019

اجعله افضل شيء يمكنك ان تفعله - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +544 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Store
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: store
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,544 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Store AI – السوق الذكي</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ /* Dark mode toggle */
12
+ .dark { background-color:#111827; color:#e5e7eb; }
13
+ .dark .bg-white, .dark .bg-gray-50 { background-color:#1f2937 !important; }
14
+ /* Command-K panel */
15
+ #commandK {
16
+ transition:opacity .2s, visibility .2s;
17
+ backdrop-filter:blur(4px);
18
+ }
19
+ /* Scrollbar */
20
+ ::-webkit-scrollbar { width:8px; height:8px; }
21
+ ::-webkit-scrollbar-track { background:#1f2937; border-radius:10px; }
22
+ ::-webkit-scrollbar-thumb { background:#4b5563; border-radius:10px; }
23
+ ::-webkit-scrollbar-thumb:hover { background:#6b7280; }
24
+ /* pulse */
25
+ .pulse { animation:pulse 1.5s ease-in-out infinite; }
26
+ /* Modal */
27
+ .modal-enter { opacity:0; transform:scale(.95); }
28
+ .modal-enter-active { opacity:1; transform:scale(1); transition:opacity .2s, transform .2s; }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
32
+ <!-- Command-K Panel -->
33
+ <div id="commandK" class="fixed inset-0 z-50 bg-black/60 hidden items-center justify-center">
34
+ <div class="bg-white dark:bg-gray-800 rounded-2xl w-full max-w-xl mx-4">
35
+ <div class="flex items-center border-b border-gray-200 dark:border-gray-600 p-4">
36
+ <i class="fas fa-search text-gray-400"></i>
37
+ <input id="commandInput" placeholder="ابحث أو اكتب أمرًا (مثلاً: add netflix 3m)..." class="w-full bg-transparent focus:outline-none px-2 text-base">
38
+ <kbd class="text-xs text-gray-400">ESC</kbd>
39
+ </div>
40
+ <ul id="commandResults" class="max-h-80 overflow-y-auto p-2"></ul>
41
+ </div>
42
+ </div>
43
+
44
+ <div class="min-h-screen flex flex-col">
45
+ <!-- Header -->
46
+ <header class="bg-white dark:bg-gray-800 shadow-sm">
47
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
48
+ <div class="flex items-center space-x-2">
49
+ <i class="fas fa-robot text-indigo-500 text-2xl"></i>
50
+ <h1 class="font-bold text-lg">Store AI</h1>
51
+ </div>
52
+
53
+ <!-- Search bar -->
54
+ <button id="openCommandK" class="flex-1 max-w-lg mx-4 hidden md:flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-2 text-sm text-gray-500">
55
+ <i class="fas fa-search mr-2"></i>
56
+ <span>ابحث أو اكتب أمرًا...</span>
57
+ <kbd class="ml-auto text-xs bg-gray-200 dark:bg-gray-600 px-2 rounded">⌘K</kbd>
58
+ </button>
59
+
60
+ <!-- Theme toggle -->
61
+ <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
62
+ <i id="themeIcon" class="fas fa-sun text-yellow-500"></i>
63
+ </button>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Main Content -->
68
+ <main class="flex-grow container mx-auto px-4 py-8">
69
+ <div class="flex justify-between items-center mb-6">
70
+ <h2 class="text-2xl font-bold">لوحة التحكّم الذكية</h2>
71
+ <button id="addModelBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center transition">
72
+ <i class="fas fa-plus mr-2"></i> أضف نموذجاً
73
+ </button>
74
+ </div>
75
+
76
+ <!-- KPI Cards -->
77
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
78
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
79
+ <div class="flex items-center space-x-2"><i class="fas fa-dollar-sign text-green-500"></i>
80
+ <p class="text-sm font-medium text-gray-500">المبيعات اليوم</p></div>
81
+ <p class="text-2xl font-bold">$1,247</p>
82
+ </div>
83
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
84
+ <div class="flex items-center space-x-2"><i class="fas fa-exclamation-triangle text-red-500"></i>
85
+ <p class="text-sm font-medium text-gray-500">أخطاء الطلبات</p></div>
86
+ <p class="text-2xl font-bold">3</p>
87
+ <button class="mt-1 text-xs bg-red-100 text-red-600 px-2 rounded">Fix Now</button>
88
+ </div>
89
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
90
+ <div class="flex items-center space-x-2"><i class="fas fa-heartbeat text-blue-500"></i>
91
+ <p class="text-sm font-medium text-gray-500">صحّة المتجر</p></div>
92
+ <p class="text-2xl font-bold">94%</p>
93
+ </div>
94
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
95
+ <div class="flex items-center space-x-2"><i class="fas fa-tachometer-alt text-purple-500"></i>
96
+ <p class="text-sm font-medium text-gray-500">LCP / FPS</p></div>
97
+ <p class="text-2xl font-bold">1.2s / 58</p>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- What-If Section -->
102
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-4 mb-6 shadow">
103
+ <h3 class="font-semibold mb-3">What-If Simulator</h3>
104
+ <div class="flex items-center space-x-2">
105
+ <label class="text-sm">خصم</label>
106
+ <input id="discountRange" type="range" min="0" max="50" value="10" class="w-32">
107
+ <span id="discountVal" class="font-bold text-indigo-500">10%</span>
108
+ </div>
109
+ <p class="text-sm mt-2">الربح المتوقع: <span id="profitPred" class="font-bold text-green-500">+$2.1k</span></p>
110
+ </div>
111
+
112
+ <!-- Stats Cards -->
113
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
114
+ <div class="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-500">
115
+ <div class="flex justify-between items-start">
116
+ <div>
117
+ <p class="text-gray-500">Total Models</p>
118
+ <h3 class="text-2xl font-bold mt-1">5</h3>
119
+ </div>
120
+ <div class="bg-indigo-100 p-3 rounded-full">
121
+ <i class="fas fa-cube text-indigo-600"></i>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
126
+ <div class="flex justify-between items-start">
127
+ <div>
128
+ <p class="text-gray-500">Active Models</p>
129
+ <h3 class="text-2xl font-bold mt-1">3</h3>
130
+ </div>
131
+ <div class="bg-green-100 p-3 rounded-full">
132
+ <i class="fas fa-check-circle text-green-600"></i>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
137
+ <div class="flex justify-between items-start">
138
+ <div>
139
+ <p class="text-gray-500">Available Providers</p>
140
+ <h3 class="text-2xl font-bold mt-1">4</h3>
141
+ </div>
142
+ <div class="bg-blue-100 p-3 rounded-full">
143
+ <i class="fas fa-server text-blue-600"></i>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Conversion Funnel -->
150
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
151
+ <div class="bg-white rounded-lg shadow p-6">
152
+ <div class="flex justify-between items-center mb-4">
153
+ <h3 class="text-lg font-semibold">Conversion Funnel</h3>
154
+ <button class="text-indigo-600 text-sm font-medium">Show Fixes</button>
155
+ </div>
156
+ <div class="space-y-4">
157
+ <div class="flex items-center justify-between">
158
+ <span class="text-sm font-medium">Visitors</span>
159
+ <span class="text-sm font-bold">100% (2,450)</span>
160
+ </div>
161
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
162
+ <div class="h-full bg-blue-500" style="width: 100%"></div>
163
+ </div>
164
+
165
+ <div class="flex items-center justify-between">
166
+ <span class="text-sm font-medium">Added to Cart</span>
167
+ <span class="text-sm font-bold">32% (784)</span>
168
+ </div>
169
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
170
+ <div class="h-full bg-blue-400" style="width: 32%"></div>
171
+ </div>
172
+
173
+ <div class="flex items-center justify-between">
174
+ <span class="text-sm font-medium">Checkout Started</span>
175
+ <span class="text-sm font-bold">18% (441)</span>
176
+ </div>
177
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
178
+ <div class="h-full bg-blue-300" style="width: 18%"></div>
179
+ </div>
180
+
181
+ <div class="flex items-center justify-between">
182
+ <span class="text-sm font-medium">Purchases</span>
183
+ <span class="text-sm font-bold">12% (294)</span>
184
+ </div>
185
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
186
+ <div class="h-full bg-blue-200" style="width: 12%"></div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Models Table -->
192
+ <div class="bg-white rounded-lg shadow overflow-hidden">
193
+ <div class="overflow-x-auto">
194
+ <table class="min-w-full divide-y divide-gray-200">
195
+ <thead class="bg-gray-50">
196
+ <tr>
197
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
198
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Provider</th>
199
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
200
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
201
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
202
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
203
+ </tr>
204
+ </thead>
205
+ <tbody class="bg-white divide-y divide-gray-200" id="modelsTableBody">
206
+ <!-- Models will be dynamically inserted here -->
207
+ </tbody>
208
+ </table>
209
+ </div>
210
+ </div>
211
+ </main>
212
+
213
+ <!-- Footer -->
214
+ <footer class="bg-white border-t py-4">
215
+ <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
216
+ <p>© 2023 Store AI. All rights reserved.</p>
217
+ </div>
218
+ </footer>
219
+ </div>
220
+
221
+ <!-- Quick Actions Floating Bar -->
222
+ <div class="fixed bottom-4 right-4 bg-white shadow-lg rounded-full p-2 flex items-center space-x-2 z-40">
223
+ <button class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 transition">
224
+ <i class="fas fa-sync-alt"></i>
225
+ </button>
226
+ <button class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center hover:bg-blue-200 transition">
227
+ <i class="fas fa-image"></i>
228
+ </button>
229
+ <button class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center hover:bg-green-200 transition">
230
+ <i class="fas fa-bullhorn"></i>
231
+ </button>
232
+ <button class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center hover:bg-purple-200 transition">
233
+ <i class="fas fa-magic"></i>
234
+ </button>
235
+ </div>
236
+
237
+ <!-- Add Model Modal -->
238
+ <div id="addModelModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
239
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full modal-enter">
240
+ <div class="p-6">
241
+ <div class="flex justify-between items-center mb-4">
242
+ <h3 class="text-xl font-bold">Add New Model</h3>
243
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
244
+ <i class="fas fa-times"></i>
245
+ </button>
246
+ </div>
247
+ <form id="modelForm" class="space-y-4">
248
+ <div>
249
+ <label for="modelName" class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
250
+ <input type="text" id="modelName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
251
+ </div>
252
+ <div>
253
+ <label for="modelTag" class="block text-sm font-medium text-gray-700 mb-1">Model Tag/Image</label>
254
+ <input type="text" id="modelTag" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. deepseek-coder" required>
255
+ </div>
256
+ <div>
257
+ <label for="modelProvider" class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
258
+ <select id="modelProvider" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
259
+ <option value="">Select Provider</option>
260
+ <option value="ollama">Ollama</option>
261
+ <option value="fireworks">Fireworks</option>
262
+ <option value="nebius">Nebius</option>
263
+ <option value="openai">OpenAI</option>
264
+ </select>
265
+ </div>
266
+ <div>
267
+ <label for="modelSize" class="block text-sm font-medium text-gray-700 mb-1">Model Size (optional)</label>
268
+ <input type="text" id="modelSize" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. 6.7B">
269
+ </div>
270
+ <div class="flex justify-end space-x-3 pt-4">
271
+ <button type="button" id="cancelModalBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">Cancel</button>
272
+ <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">Add Model</button>
273
+ </div>
274
+ </form>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Confirmation Modal -->
280
+ <div id="confirmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
281
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
282
+ <div class="p-6">
283
+ <div class="flex justify-between items-center mb-4">
284
+ <h3 class="text-xl font-bold">Confirm Action</h3>
285
+ <button id="closeConfirmModalBtn" class="text-gray-500 hover:text-gray-700">
286
+ <i class="fas fa-times"></i>
287
+ </button>
288
+ </div>
289
+ <p id="confirmMessage" class="mb-6">Are you sure you want to delete this model?</p>
290
+ <div class="flex justify-end space-x-3">
291
+ <button id="cancelConfirmBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">Cancel</button>
292
+ <button id="confirmActionBtn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition">Confirm</button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <script>
299
+ const models = [
300
+ { id:'1', name:'DeepSeek 6B', tag:'deepseek-coder', provider:'Ollama', size:'6.7B', status:'active', statusText:'✅ موجود' },
301
+ { id:'2', name:'Mistral 7B', tag:'mistral', provider:'Fireworks', size:'7B', status:'inactive', statusText:'⬇️ غير مُحمّل' },
302
+ { id:'3', name:'Llama 2 13B', tag:'llama2-13b', provider:'Ollama', size:'13B', status:'active', statusText:'✅ موجود' },
303
+ { id:'4', name:'SDXL 1.0', tag:'sdxl', provider:'Stability AI', size:'5.1GB', status:'downloading', statusText:'⏳ جاري التحميل...' },
304
+ { id:'5', name:'GPT-4', tag:'gpt-4', provider:'OpenAI', size:'N/A', status:'active', statusText:'✅ موجود' }
305
+ ];
306
+
307
+ // DOM elements
308
+ const modelsTableBody = document.getElementById('modelsTableBody');
309
+ const addModelBtn = document.getElementById('addModelBtn');
310
+ const addModelModal = document.getElementById('addModelModal');
311
+ const closeModalBtn = document.getElementById('closeModalBtn');
312
+ const cancelModalBtn = document.getElementById('cancelModalBtn');
313
+ const modelForm = document.getElementById('modelForm');
314
+ const confirmModal = document.getElementById('confirmModal');
315
+ const closeConfirmModalBtn = document.getElementById('closeConfirmModalBtn');
316
+ const cancelConfirmBtn = document.getElementById('cancelConfirmBtn');
317
+ const confirmActionBtn = document.getElementById('confirmActionBtn');
318
+ const confirmMessage = document.getElementById('confirmMessage');
319
+
320
+ // Variables for modal state
321
+ let currentAction = null;
322
+ let currentModelId = null;
323
+
324
+ // Render models table
325
+ function renderModels() {
326
+ modelsTableBody.innerHTML = '';
327
+
328
+ models.forEach(model => {
329
+ const row = document.createElement('tr');
330
+ row.className = 'hover:bg-gray-50';
331
+ row.innerHTML = `
332
+ <td class="px-6 py-4 whitespace-nowrap">
333
+ <div class="flex items-center">
334
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
335
+ <i class="fas fa-cube text-indigo-600"></i>
336
+ </div>
337
+ <div class="ml-4">
338
+ <div class="text-sm font-medium text-gray-900">${model.name}</div>
339
+ <div class="text-sm text-gray-500">${model.tag}</div>
340
+ </div>
341
+ </div>
342
+ </td>
343
+ <td class="px-6 py-4 whitespace-nowrap">
344
+ <div class="text-sm text-gray-900">${model.provider}</div>
345
+ </td>
346
+ <td class="px-6 py-4 whitespace-nowrap">
347
+ <div class="text-sm text-gray-900">${model.size}</div>
348
+ </td>
349
+ <td class="px-6 py-4 whitespace-nowrap">
350
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
351
+ ${model.status === 'active' ? 'bg-green-100 text-green-800' :
352
+ model.status === 'downloading' ? 'bg-blue-100 text-blue-800 pulse-animation' :
353
+ 'bg-yellow-100 text-yellow-800'}">
354
+ ${model.statusText}
355
+ </span>
356
+ </td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
358
+ <div class="flex space-x-2">
359
+ <button onclick="editModel('${model.id}')" class="text-indigo-600 hover:text-indigo-900">
360
+ <i class="fas fa-edit"></i>
361
+ </button>
362
+ <button onclick="deleteModel('${model.id}')" class="text-red-600 hover:text-red-900">
363
+ <i class="fas fa-trash"></i>
364
+ </button>
365
+ ${model.status === 'inactive' ?
366
+ `<button onclick="pullModel('${model.id}')" class="text-blue-600 hover:text-blue-900">
367
+ <i class="fas fa-download"></i> Pull
368
+ </button>` : ''}
369
+ </div>
370
+ </td>
371
+ `;
372
+ modelsTableBody.appendChild(row);
373
+ });
374
+ }
375
+
376
+ // Show add model modal
377
+ function showAddModelModal() {
378
+ addModelModal.classList.remove('hidden');
379
+ document.body.style.overflow = 'hidden';
380
+ }
381
+
382
+ // Hide add model modal
383
+ function hideAddModelModal() {
384
+ addModelModal.classList.add('hidden');
385
+ document.body.style.overflow = 'auto';
386
+ modelForm.reset();
387
+ }
388
+
389
+ // Show confirmation modal
390
+ function showConfirmModal(message, action, modelId) {
391
+ confirmMessage.textContent = message;
392
+ currentAction = action;
393
+ currentModelId = modelId;
394
+ confirmModal.classList.remove('hidden');
395
+ document.body.style.overflow = 'hidden';
396
+ }
397
+
398
+ // Hide confirmation modal
399
+ function hideConfirmModal() {
400
+ confirmModal.classList.add('hidden');
401
+ document.body.style.overflow = 'auto';
402
+ currentAction = null;
403
+ currentModelId = null;
404
+ }
405
+
406
+ // Edit model
407
+ function editModel(modelId) {
408
+ const model = models.find(m => m.id === modelId);
409
+ if (model) {
410
+ document.getElementById('modelName').value = model.name;
411
+ document.getElementById('modelTag').value = model.tag;
412
+ document.getElementById('modelProvider').value = model.provider.toLowerCase();
413
+ document.getElementById('modelSize').value = model.size;
414
+
415
+ // Change form title and button text
416
+ document.querySelector('#addModelModal h3').textContent = 'Edit Model';
417
+ document.querySelector('#modelForm button[type="submit"]').textContent = 'Update Model';
418
+
419
+ // Set current model ID
420
+ currentModelId = modelId;
421
+
422
+ showAddModelModal();
423
+ }
424
+ }
425
+
426
+ // Delete model
427
+ function deleteModel(modelId) {
428
+ const model = models.find(m => m.id === modelId);
429
+ if (model) {
430
+ showConfirmModal(`Are you sure you want to delete "${model.name}"? This action cannot be undone.`, 'delete', modelId);
431
+ }
432
+ }
433
+
434
+ // Pull model
435
+ function pullModel(modelId) {
436
+ const model = models.find(m => m.id === modelId);
437
+ if (model) {
438
+ showConfirmModal(`Do you want to download and install "${model.name}" (${model.size}) from ${model.provider}?`, 'pull', modelId);
439
+ }
440
+ }
441
+
442
+ // Handle form submission
443
+ function handleFormSubmit(e) {
444
+ e.preventDefault();
445
+
446
+ const name = document.getElementById('modelName').value;
447
+ const tag = document.getElementById('modelTag').value;
448
+ const provider = document.getElementById('modelProvider').value;
449
+ const size = document.getElementById('modelSize').value;
450
+
451
+ if (currentModelId) {
452
+ // Update existing model
453
+ const modelIndex = models.findIndex(m => m.id === currentModelId);
454
+ if (modelIndex !== -1) {
455
+ models[modelIndex] = {
456
+ ...models[modelIndex],
457
+ name,
458
+ tag,
459
+ provider: provider.charAt(0).toUpperCase() + provider.slice(1),
460
+ size
461
+ };
462
+ }
463
+ } else {
464
+ // Add new model
465
+ const newModel = {
466
+ id: (models.length + 1).toString(),
467
+ name,
468
+ tag,
469
+ provider: provider.charAt(0).toUpperCase() + provider.slice(1),
470
+ size,
471
+ status: provider === 'ollama' ? 'inactive' : 'active',
472
+ statusText: provider === 'ollama' ? '⬇️ غير مُحمّل' : '✅ موجود'
473
+ };
474
+ models.push(newModel);
475
+ }
476
+
477
+ renderModels();
478
+ hideAddModelModal();
479
+ currentModelId = null;
480
+
481
+ // Reset form title and button text
482
+ document.querySelector('#addModelModal h3').textContent = 'Add New Model';
483
+ document.querySelector('#modelForm button[type="submit"]').textContent = 'Add Model';
484
+ }
485
+
486
+ // Handle confirm action
487
+ function handleConfirmAction() {
488
+ if (currentAction === 'delete') {
489
+ // Delete model
490
+ const modelIndex = models.findIndex(m => m.id === currentModelId);
491
+ if (modelIndex !== -1) {
492
+ models.splice(modelIndex, 1);
493
+ renderModels();
494
+ }
495
+ } else if (currentAction === 'pull') {
496
+ // Pull model - simulate API call
497
+ const model = models.find(m => m.id === currentModelId);
498
+ if (model) {
499
+ // Update status to downloading
500
+ model.status = 'downloading';
501
+ model.statusText = '⏳ جاري التحميل...';
502
+ renderModels();
503
+
504
+ // Simulate download completion after 3 seconds
505
+ setTimeout(() => {
506
+ model.status = 'active';
507
+ model.statusText = '✅ موجود';
508
+ renderModels();
509
+
510
+ // Show success notification
511
+ alert(`Model "${model.name}" has been successfully downloaded and installed.`);
512
+ }, 3000);
513
+ }
514
+ }
515
+
516
+ hideConfirmModal();
517
+ }
518
+
519
+ // Event listeners
520
+ addModelBtn.addEventListener('click', showAddModelModal);
521
+ closeModalBtn.addEventListener('click', hideAddModelModal);
522
+ cancelModalBtn.addEventListener('click', hideAddModelModal);
523
+ modelForm.addEventListener('submit', handleFormSubmit);
524
+ closeConfirmModalBtn.addEventListener('click', hideConfirmModal);
525
+ cancelConfirmBtn.addEventListener('click', hideConfirmModal);
526
+ confirmActionBtn.addEventListener('click', handleConfirmAction);
527
+
528
+ // Click outside modal to close
529
+ window.addEventListener('click', (e) => {
530
+ if (e.target === addModelModal) {
531
+ hideAddModelModal();
532
+ }
533
+ if (e.target === confirmModal) {
534
+ hideConfirmModal();
535
+ }
536
+ });
537
+
538
+ // Initialize the page
539
+ document.addEventListener('DOMContentLoaded', () => {
540
+ renderModels();
541
+ });
542
+ </script>
543
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fsalmansour/store" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
544
+ </html>