Hugging Face's logo

Spaces:
Abdallh16
/
osint
Running

App Files Community
Abdallh16 commited on
Commit
5d944c7
·
verified ·
1 Parent(s): 17b6720

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +640 -481
index.html CHANGED
@@ -3,576 +3,735 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>أداة OSINT متقدمة</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- .search-box {
11
- transition: all 0.3s ease;
 
 
 
 
 
12
  }
13
- .search-box:focus-within {
14
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
 
 
15
  }
16
- .result-card {
17
- transition: all 0.2s ease;
18
  }
19
- .result-card:hover {
20
- transform: translateY(-2px);
21
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
22
  }
23
- .tab-content {
24
- display: none;
25
  }
26
- .tab-content.active {
27
- display: block;
28
- animation: fadeIn 0.3s ease;
29
  }
30
- @keyframes fadeIn {
31
- from { opacity: 0; }
32
- to { opacity: 1; }
33
  }
34
- .loader {
35
- border-top-color: #3b82f6;
36
- animation: spin 1s linear infinite;
37
  }
38
- @keyframes spin {
39
- 0% { transform: rotate(0deg); }
40
- 100% { transform: rotate(360deg); }
41
  }
42
  </style>
43
  </head>
44
- <body class="bg-gray-100 text-gray-900 min-h-screen">
45
- <div class="container mx-auto px-4 py-8">
46
  <!-- Header -->
47
- <header class="text-center mb-12">
48
- <h1 class="text-3xl font-bold text-blue-600 mb-2">
49
- <i class="fas fa-search mr-2"></i> أداة OSINT متقدمة
50
- </h1>
51
- <p class="text-gray-600 max-w-2xl mx-auto">
52
- أداة استخبارات المصادر المفتوحة لجمع المعلومات من الإنترنت
53
- </p>
54
- </header>
55
-
56
- <!-- Search Section -->
57
- <div class="bg-white rounded-xl shadow-md p-6 mb-8">
58
- <div class="search-box flex items-center border border-gray-300 rounded-lg overflow-hidden">
59
- <input
60
- id="search-input"
61
- type="text"
62
- placeholder="أدخل اسم المستخدم، البريد الإلكتروني، رقم الهاتف، أو اسم النطاق..."
63
- class="flex-1 px-4 py-3 focus:outline-none text-gray-700"
64
- >
65
- <button
66
- id="search-btn"
67
- class="bg-blue-600 text-white px-6 py-3 hover:bg-blue-700 transition"
68
- >
69
- <i class="fas fa-search mr-2"></i> بحث
70
- </button>
71
- </div>
72
-
73
- <div class="flex flex-wrap gap-3 mt-4">
74
- <button class="tab-btn active px-4 py-2 bg-blue-100 text-blue-700 rounded-lg" data-tab="all">
75
- <i class="fas fa-globe mr-2"></i> الكل
76
- </button>
77
- <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg" data-tab="username">
78
- <i class="fas fa-user mr-2"></i> اسم المستخدم
79
- </button>
80
- <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg" data-tab="email">
81
- <i class="fas fa-envelope mr-2"></i> البريد الإلكتروني
82
- </button>
83
- <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg" data-tab="phone">
84
- <i class="fas fa-phone mr-2"></i> رقم الهاتف
85
- </button>
86
- <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-lg" data-tab="domain">
87
- <i class="fas fa-globe mr-2"></i> النطاق
88
  </button>
89
  </div>
90
- </div>
91
 
92
- <!-- Results Section -->
93
- <div class="bg-white rounded-xl shadow-md p-6">
94
- <div class="flex justify-between items-center mb-6">
95
- <h2 class="text-xl font-semibold text-gray-800">
96
- <i class="fas fa-list-ul mr-2"></i> النتائج
 
 
97
  </h2>
98
- <div class="flex items-center">
99
- <span class="text-sm text-gray-500 mr-2">ترتيب حسب:</span>
100
- <select class="border border-gray-300 rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
101
- <option>الأكثر صلة</option>
102
- <option>الأحدث</option>
103
- <option>المصدر</option>
104
- </select>
105
- </div>
106
- </div>
107
-
108
- <!-- Loading State -->
109
- <div id="loading" class="hidden flex-col items-center justify-center py-12">
110
- <div class="loader h-12 w-12 rounded-full border-4 border-t-4 border-gray-200"></div>
111
- <p class="mt-4 text-gray-600">جاري البحث وجمع البيانات...</p>
112
- </div>
113
-
114
- <!-- Results Container -->
115
- <div id="results-container">
116
- <!-- All Results Tab -->
117
- <div id="all" class="tab-content active">
118
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
119
- <!-- Sample Results - Will be populated by JS -->
120
  </div>
121
- </div>
122
-
123
- <!-- Username Results Tab -->
124
- <div id="username" class="tab-content">
125
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
126
- <!-- Sample Results - Will be populated by JS -->
 
 
 
 
 
 
 
127
  </div>
128
- </div>
129
-
130
- <!-- Email Results Tab -->
131
- <div id="email" class="tab-content">
132
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
133
- <!-- Sample Results - Will be populated by JS -->
 
 
 
 
 
 
 
134
  </div>
135
- </div>
136
-
137
- <!-- Phone Results Tab -->
138
- <div id="phone" class="tab-content">
139
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
140
- <!-- Sample Results - Will be populated by JS -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  </div>
142
  </div>
143
-
144
- <!-- Domain Results Tab -->
145
- <div id="domain" class="tab-content">
146
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
147
- <!-- Sample Results - Will be populated by JS -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
  </div>
150
  </div>
151
-
152
- <!-- No Results State -->
153
- <div id="no-results" class="hidden flex-col items-center justify-center py-12">
154
- <i class="fas fa-search fa-3x text-gray-300 mb-4"></i>
155
- <h3 class="text-xl font-medium text-gray-500">لا توجد نتائج</h3>
156
- <p class="text-gray-400 mt-2">حاول استخدام كلمات بحث مختلفة أو فلاتر أخرى</p>
157
- </div>
158
- </div>
159
-
160
- <!-- Tools Section -->
161
- <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
162
- <!-- Reverse Image Search -->
163
- <div class="bg-white rounded-xl shadow-md p-6">
164
- <div class="flex items-center mb-4">
165
- <div class="bg-blue-100 p-3 rounded-full mr-3">
166
- <i class="fas fa-image text-blue-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
- <h3 class="font-semibold text-lg">بحث بالصورة</h3>
169
  </div>
170
- <p class="text-gray-600 mb-4 text-sm">ابحث عن الصور المشابهة أو المصادر التي تظهر فيها الصورة</p>
171
- <div class="flex flex-col space-y-3">
172
- <button class="image-search-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-sm flex items-center">
173
- <i class="fas fa-upload mr-2"></i> رفع صورة
174
- </button>
175
- <input type="file" id="image-upload" class="hidden" accept="image/*">
176
- <input type="text" placeholder="أو أدخل رابط الصورة" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
177
  </div>
178
  </div>
 
 
179
 
180
- <!-- Metadata Analyzer -->
181
- <div class="bg-white rounded-xl shadow-md p-6">
182
- <div class="flex items-center mb-4">
183
- <div class="bg-green-100 p-3 rounded-full mr-3">
184
- <i class="fas fa-file-alt text-green-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  </div>
186
- <h3 class="font-semibold text-lg">تحليل البيانات الوصفية</h3>
187
  </div>
188
- <p class="text-gray-600 mb-4 text-sm">استخرج البيانات الوصفية من الملفات مثل الصور، PDF، وغيرها</p>
189
- <div class="flex flex-col space-y-3">
190
- <button class="metadata-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-sm flex items-center">
191
- <i class="fas fa-upload mr-2"></i> رفع ملف
192
- </button>
193
- <input type="file" id="file-upload" class="hidden">
194
- </div>
195
- </div>
196
-
197
- <!-- IP Lookup -->
198
- <div class="bg-white rounded-xl shadow-md p-6">
199
- <div class="flex items-center mb-4">
200
- <div class="bg-purple-100 p-3 rounded-full mr-3">
201
- <i class="fas fa-network-wired text-purple-600 text-xl"></i>
202
  </div>
203
- <h3 class="font-semibold text-lg">بحث عن IP</h3>
204
  </div>
205
- <p class="text-gray-600 mb-4 text-sm">احصل على معلومات الموقع الجغرافي والمزود لعنوان IP</p>
206
- <div class="flex space-x-2">
207
- <input type="text" placeholder="أدخل عنوان IP" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
208
- <button class="ip-search-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-sm">
209
- <i class="fas fa-search"></i>
210
- </button>
 
 
 
 
 
 
 
 
 
211
  </div>
212
- </div>
213
-
214
- <!-- Social Media Check -->
215
- <div class="bg-white rounded-xl shadow-md p-6">
216
- <div class="flex items-center mb-4">
217
- <div class="bg-red-100 p-3 rounded-full mr-3">
218
- <i class="fas fa-share-alt text-red-600 text-xl"></i>
 
 
 
 
 
 
 
219
  </div>
220
- <h3 class="font-semibold text-lg">فحص وسائل التواصل</h3>
221
  </div>
222
- <p class="text-gray-600 mb-4 text-sm">تحقق من وجود اسم المستخدم على منصات التواصل المختلفة</p>
223
- <div class="flex space-x-2">
224
- <input type="text" placeholder="اسم المستخدم" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
225
- <button class="social-check-btn bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg text-sm">
226
- <i class="fas fa-search"></i>
227
- </button>
 
 
 
 
 
 
 
 
 
228
  </div>
229
  </div>
 
 
 
 
 
 
 
 
 
230
  </div>
231
-
232
- <!-- Footer -->
233
- <footer class="mt-12 text-center text-gray-500 text-sm">
234
- <p>أداة OSINT متقدمة - تم تصميمها لأغراض بحثية وأمنية فقط</p>
235
- <p class="mt-1">استخدم هذه الأداة بمسؤولية وضمن الأطر القانونية والأخلاقية</p>
236
- </footer>
237
  </div>
238
 
239
  <script>
240
  document.addEventListener('DOMContentLoaded', function() {
241
- // Tab Switching
242
- const tabBtns = document.querySelectorAll('.tab-btn');
243
- const tabContents = document.querySelectorAll('.tab-content');
 
 
 
 
 
 
 
 
 
 
 
 
244
 
245
- tabBtns.forEach(btn => {
246
- btn.addEventListener('click', function() {
247
- // Remove active class from all buttons and contents
248
- tabBtns.forEach(b => b.classList.remove('active'));
249
- tabContents.forEach(c => c.classList.remove('active'));
250
-
251
- // Add active class to clicked button
252
- this.classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
253
 
254
- // Show corresponding content
255
- const tabId = this.getAttribute('data-tab');
256
- document.getElementById(tabId).classList.add('active');
257
- });
258
- });
259
 
260
- // Search Functionality
261
- const searchBtn = document.getElementById('search-btn');
262
- const searchInput = document.getElementById('search-input');
263
- const loading = document.getElementById('loading');
264
- const noResults = document.getElementById('no-results');
 
 
 
 
 
 
 
 
 
265
 
266
- searchBtn.addEventListener('click', performSearch);
267
- searchInput.addEventListener('keypress', function(e) {
268
- if (e.key === 'Enter') performSearch();
269
- });
 
 
 
 
 
 
 
 
 
270
 
271
- function performSearch() {
272
- const query = searchInput.value.trim();
273
- if (!query) return;
274
-
275
- // Show loading state
276
- loading.classList.remove('hidden');
277
- noResults.classList.add('hidden');
278
-
279
- // Hide all results initially
280
- document.querySelectorAll('.tab-content .grid').forEach(grid => {
281
- grid.innerHTML = '';
282
- });
283
 
284
- // Simulate API call with timeout
285
- setTimeout(() => {
286
- // Hide loading
287
- loading.classList.add('hidden');
288
-
289
- // Generate mock results based on query type
290
- const isEmail = query.includes('@');
291
- const isPhone = /[\d\+]{8,}/.test(query);
292
- const isDomain = query.includes('.') && !isEmail;
293
-
294
- let activeTab = 'all';
295
-
296
- if (isEmail) {
297
- activeTab = 'email';
298
- generateEmailResults(query);
299
- } else if (isPhone) {
300
- activeTab = 'phone';
301
- generatePhoneResults(query);
302
- } else if (isDomain) {
303
- activeTab = 'domain';
304
- generateDomainResults(query);
305
- } else {
306
- activeTab = 'username';
307
- generateUsernameResults(query);
308
  }
309
 
310
- // Also generate results for "all" tab
311
- generateAllResults(query);
312
-
313
- // Activate the relevant tab
314
- tabBtns.forEach(b => b.classList.remove('active'));
315
- tabContents.forEach(c => c.classList.remove('active'));
316
-
317
- document.querySelector(`.tab-btn[data-tab="${activeTab}"]`).classList.add('active');
318
- document.getElementById(activeTab).classList.add('active');
319
-
320
- }, 1500);
321
- }
322
-
323
- // Mock Data Generation Functions
324
- function generateAllResults(query) {
325
- const allGrid = document.querySelector('#all .grid');
326
- allGrid.innerHTML = '';
327
-
328
- // Add some sample results from different categories
329
- allGrid.appendChild(createResultCard({
330
- title: `نتائج عن "${query}"`,
331
- source: "محرك البحث",
332
- description: `عرض النتائج العامة للبحث عن "${query}" عبر مصادر مختلفة`,
333
- icon: "fa-globe",
334
- color: "blue",
335
- link: "#"
336
- }));
337
-
338
- allGrid.appendChild(createResultCard({
339
- title: `ملفات تعريف وسائل التواصل`,
340
- source: "منصات التواصل الاجتماعي",
341
- description: `ملفات تعريف محتملة لـ "${query}" على فيسبوك، تويتر، إنستغرام`,
342
- icon: "fa-user-tag",
343
- color: "purple",
344
- link: "#"
345
- }));
346
 
347
- allGrid.appendChild(createResultCard({
348
- title: `نتائج مرتبطة بالنطاق`,
349
- source: "Whois",
350
- description: `سجلات النطاق المرتبطة بـ "${query}"`,
351
- icon: "fa-globe",
352
- color: "green",
353
- link: "#"
354
- }));
355
  }
356
 
357
- function generateUsernameResults(username) {
358
- const usernameGrid = document.querySelector('#username .grid');
359
- usernameGrid.innerHTML = '';
360
-
361
- const socialPlatforms = [
362
- { name: "تويتر", icon: "fa-twitter", color: "blue" },
363
- { name: "فيسبوك", icon: "fa-facebook", color: "blue" },
364
- { name: "إنستغرام", icon: "fa-instagram", color: "pink" },
365
- { name: "لينكدإن", icon: "fa-linkedin", color: "blue" },
366
- { name: "جيت هاب", icon: "fa-github", color: "gray" },
367
- { name: "ريديت", icon: "fa-reddit", color: "orange" }
368
- ];
369
-
370
- socialPlatforms.forEach(platform => {
371
- usernameGrid.appendChild(createResultCard({
372
- title: `${username} على ${platform.name}`,
373
- source: platform.name,
374
- description: `تحقق من وجود ${username} على ${platform.name}`,
375
- icon: platform.icon,
376
- color: platform.color,
377
- link: "#"
378
- }));
379
- });
380
  }
381
 
382
- function generateEmailResults(email) {
383
- const emailGrid = document.querySelector('#email .grid');
384
- emailGrid.innerHTML = '';
385
-
386
- const breaches = [
387
- { name: "LinkedIn 2012", date: "2012", records: "165 مليون" },
388
- { name: "Adobe 2013", date: "2013", records: "153 مليون" },
389
- { name: "MySpace 2016", date: "2016", records: "360 مليون" }
390
- ];
391
 
392
- // Check if email appears in any breaches
393
- breaches.forEach(breach => {
394
- emailGrid.appendChild(createResultCard({
395
- title: `تم العثور على ${email} في خرق ${breach.name}`,
396
- source: "Have I Been Pwned",
397
- description: `ظهر هذا البريد في خرق ${breach.name} عام ${breach.date} (${breach.records} سجل)`,
398
- icon: "fa-shield-alt",
399
- color: "red",
400
- link: "#"
401
- }));
402
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
403
 
404
- // Add domain info
405
- const domain = email.split('@')[1];
406
- emailGrid.appendChild(createResultCard({
407
- title: `معلومات النطاق ${domain}`,
408
- source: "Whois",
409
- description: `سجلات النطاق ومعلومات التسجيل لـ ${domain}`,
410
- icon: "fa-globe",
411
- color: "green",
412
- link: "#"
413
- }));
414
- }
415
-
416
- function generatePhoneResults(phone) {
417
- const phoneGrid = document.querySelector('#phone .grid');
418
- phoneGrid.innerHTML = '';
419
 
420
- // Add carrier lookup
421
- phoneGrid.appendChild(createResultCard({
422
- title: `معلومات عن الرقم ${phone}`,
423
- source: "Carrier Lookup",
424
- description: `مزود الخدمة: STC، المنطقة: الرياض، السعودية`,
425
- icon: "fa-phone-alt",
426
- color: "green",
427
- link: "#"
428
- }));
429
 
430
- // Add social media search
431
- phoneGrid.appendChild(createResultCard({
432
- title: `بحث عن ${phone} على وسائل التواصل`,
433
- source: "Social Media",
434
- description: `تحقق من وجود هذا الرقم على واتساب، تيليجرام، وغيرها`,
435
- icon: "fa-share-alt",
436
- color: "blue",
437
- link: "#"
438
- }));
439
  }
440
 
441
- function generateDomainResults(domain) {
442
- const domainGrid = document.querySelector('#domain .grid');
443
- domainGrid.innerHTML = '';
444
-
445
- // Add WHOIS info
446
- domainGrid.appendChild(createResultCard({
447
- title: `سجلات WHOIS لـ ${domain}`,
448
- source: "Whois",
449
- description: `معلومات التسجيل والنطاق لـ ${domain}`,
450
- icon: "fa-globe",
451
- color: "green",
452
- link: "#"
453
- }));
454
 
455
- // Add DNS records
456
- domainGrid.appendChild(createResultCard({
457
- title: `سجلات DNS لـ ${domain}`,
458
- source: "DNS Lookup",
459
- description: `سجلات A، MX، TXT، وغيرها لـ ${domain}`,
460
- icon: "fa-server",
461
- color: "blue",
462
- link: "#"
463
- }));
464
 
465
- // Add subdomains
466
- domainGrid.appendChild(createResultCard({
467
- title: `النطاقات الفرعية لـ ${domain}`,
468
- source: "Subdomain Finder",
469
- description: `قائمة النطاقات الفرعية المعروفة لـ ${domain}`,
470
- icon: "fa-sitemap",
471
- color: "purple",
472
- link: "#"
473
- }));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
474
  }
475
 
476
- // Helper function to create result cards
477
- function createResultCard(data) {
478
- const card = document.createElement('div');
479
- card.className = 'result-card bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md';
480
 
481
- const colors = {
482
- blue: 'text-blue-600',
483
- red: 'text-red-600',
484
- green: 'text-green-600',
485
- purple: 'text-purple-600',
486
- pink: 'text-pink-600',
487
- gray: 'text-gray-600',
488
- orange: 'text-orange-600'
489
- };
490
 
491
- card.innerHTML = `
492
- <div class="p-5">
493
- <div class="flex items-start mb-3">
494
- <div class="${colors[data.color] || 'text-blue-600'} mr-3 text-xl">
495
- <i class="fab ${data.icon}"></i>
496
- </div>
497
- <div>
498
- <h3 class="font-semibold text-gray-800">${data.title}</h3>
499
- <span class="text-xs text-gray-500">${data.source}</span>
500
- </div>
501
- </div>
502
- <p class="text-gray-600 text-sm mb-4">${data.description}</p>
503
- </div>
504
- <div class="bg-gray-50 px-5 py-3 flex justify-between items-center">
505
- <a href="${data.link}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
506
- <i class="fas fa-external-link-alt mr-1"></i> عرض التفاصيل
507
- </a>
508
- <button class="text-gray-400 hover:text-gray-600">
509
- <i class="fas fa-ellipsis-h"></i>
510
- </button>
511
- </div>
512
- `;
513
 
514
- return card;
 
 
 
 
 
 
 
 
 
 
515
  }
516
 
517
- // Image Search Functionality
518
- const imageSearchBtn = document.querySelector('.image-search-btn');
519
- const imageUpload = document.getElementById('image-upload');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
520
 
521
- imageSearchBtn.addEventListener('click', function() {
522
- imageUpload.click();
 
523
  });
524
 
525
- imageUpload.addEventListener('change', function(e) {
526
- if (e.target.files.length > 0) {
527
- alert(`تم اختيار صورة للبحث العكسي: ${e.target.files[0].name}`);
528
- // Here you would normally upload the image to your backend or a service like TinEye
529
  }
530
  });
531
 
532
- // Metadata Analyzer
533
- const metadataBtn = document.querySelector('.metadata-btn');
534
- const fileUpload = document.getElementById('file-upload');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535
 
536
- metadataBtn.addEventListener('click', function() {
537
- fileUpload.click();
 
538
  });
539
 
540
- fileUpload.addEventListener('change', function(e) {
541
- if (e.target.files.length > 0) {
542
- alert(`تم اختيار ملف لتحليل البيانات الوصفية: ${e.target.files[0].name}`);
543
- // Here you would extract metadata from the file
544
- }
545
  });
546
 
547
- // IP Lookup
548
- const ipSearchBtn = document.querySelector('.ip-search-btn');
549
-
550
- ipSearchBtn.addEventListener('click', function() {
551
- const ipInput = this.previousElementSibling;
552
- const ip = ipInput.value.trim();
553
-
554
- if (ip) {
555
- alert(`سيتم البحث عن معلومات IP لـ: ${ip}`);
556
- // Here you would call an IP lookup API
557
- } else {
558
- alert('الرجاء إدخال عنوان IP صحيح');
559
- }
560
  });
561
 
562
- // Social Media Check
563
- const socialCheckBtn = document.querySelector('.social-check-btn');
564
 
565
- socialCheckBtn.addEventListener('click', function() {
566
- const usernameInput = this.previousElementSibling;
567
- const username = usernameInput.value.trim();
568
-
569
- if (username) {
570
- alert(`سيتم فحص اسم المستخدم ${username} على وسائل التواصل`);
571
- // Here you would check social media platforms for the username
572
- } else {
573
- alert('الرجاء إدخال اسم مستخدم');
574
- }
 
 
575
  });
 
 
 
 
 
576
  });
577
  </script>
578
  <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=Abdallh16/osint" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>دمج نماذج الذكاء الاصطناعي</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .typing-indicator::after {
15
+ content: '...';
16
+ animation: typing 1.5s infinite;
17
  }
18
+ @keyframes typing {
19
+ 0% { content: '.'; }
20
+ 33% { content: '..'; }
21
+ 66% { content: '...'; }
22
  }
23
+ .message-animation {
24
+ animation: messageAppear 0.3s ease-out;
25
  }
26
+ @keyframes messageAppear {
27
+ from { transform: translateY(10px); opacity: 0; }
28
+ to { transform: translateY(0); opacity: 1; }
29
  }
30
+ #chat-container {
31
+ height: calc(100vh - 250px);
32
  }
33
+ .model-card {
34
+ transition: all 0.3s ease;
 
35
  }
36
+ .model-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
39
  }
40
+ .api-key-input {
41
+ transition: all 0.3s ease;
 
42
  }
43
+ .api-key-input:focus {
44
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
 
45
  }
46
  </style>
47
  </head>
48
+ <body class="bg-gray-50 text-gray-800">
49
+ <div class="container mx-auto max-w-6xl p-4">
50
  <!-- Header -->
51
+ <header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl p-6 shadow-lg mb-6">
52
+ <div class="flex flex-col md:flex-row items-center justify-between">
53
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
54
+ <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center">
55
+ <i class="fas fa-brain text-2xl"></i>
56
+ </div>
57
+ <div>
58
+ <h1 class="text-2xl font-bold">دمج نماذج الذكاء الاصطناعي</h1>
59
+ <p class="text-sm opacity-90">منصة متكاملة لدمج وتكامل نماذج الذكاء الاصطناعي</p>
60
+ </div>
61
+ </div>
62
+ <button id="settings-btn" class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full flex items-center space-x-2 transition">
63
+ <i class="fas fa-key"></i>
64
+ <span>إدارة مفاتيح API</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  </button>
66
  </div>
67
+ </header>
68
 
69
+ <!-- Main Content -->
70
+ <div class="flex flex-col lg:flex-row gap-6">
71
+ <!-- Models Sidebar -->
72
+ <div class="w-full lg:w-1/3 bg-white rounded-xl shadow-md p-4">
73
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
74
+ <i class="fas fa-project-diagram mr-2"></i>
75
+ النماذج المتاحة
76
  </h2>
77
+
78
+ <div class="space-y-3">
79
+ <!-- OpenAI GPT -->
80
+ <div class="model-card bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer" data-model="openai">
81
+ <div class="flex items-center space-x-3">
82
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
83
+ <i class="fab fa-openai text-blue-600"></i>
84
+ </div>
85
+ <div class="flex-1">
86
+ <h3 class="font-medium">OpenAI GPT</h3>
87
+ <p class="text-xs text-gray-500">نموذج لغة متقدم</p>
88
+ </div>
89
+ <div class="w-5 h-5 rounded-full bg-green-400" id="openai-status"></div>
90
+ </div>
 
 
 
 
 
 
 
 
91
  </div>
92
+
93
+ <!-- Google Gemini -->
94
+ <div class="model-card bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer" data-model="gemini">
95
+ <div class="flex items-center space-x-3">
96
+ <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
97
+ <i class="fab fa-google text-red-600"></i>
98
+ </div>
99
+ <div class="flex-1">
100
+ <h3 class="font-medium">Google Gemini</h3>
101
+ <p class="text-xs text-gray-500">نموذج متعدد الوسائط</p>
102
+ </div>
103
+ <div class="w-5 h-5 rounded-full bg-gray-300" id="gemini-status"></div>
104
+ </div>
105
  </div>
106
+
107
+ <!-- Anthropic Claude -->
108
+ <div class="model-card bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer" data-model="claude">
109
+ <div class="flex items-center space-x-3">
110
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
111
+ <i class="fas fa-robot text-purple-600"></i>
112
+ </div>
113
+ <div class="flex-1">
114
+ <h3 class="font-medium">Anthropic Claude</h3>
115
+ <p class="text-xs text-gray-500">نموذج آمن ومسؤول</p>
116
+ </div>
117
+ <div class="w-5 h-5 rounded-full bg-gray-300" id="claude-status"></div>
118
+ </div>
119
  </div>
120
+
121
+ <!-- Meta Llama -->
122
+ <div class="model-card bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer" data-model="llama">
123
+ <div class="flex items-center space-x-3">
124
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
125
+ <i class="fab fa-meta text-orange-600"></i>
126
+ </div>
127
+ <div class="flex-1">
128
+ <h3 class="font-medium">Meta Llama</h3>
129
+ <p class="text-xs text-gray-500">نموذج مفتوح المصدر</p>
130
+ </div>
131
+ <div class="w-5 h-5 rounded-full bg-gray-300" id="llama-status"></div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Stability AI -->
136
+ <div class="model-card bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer" data-model="stability">
137
+ <div class="flex items-center space-x-3">
138
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
139
+ <i class="fas fa-image text-green-600"></i>
140
+ </div>
141
+ <div class="flex-1">
142
+ <h3 class="font-medium">Stability AI</h3>
143
+ <p class="text-xs text-gray-500">توليد الصور</p>
144
+ </div>
145
+ <div class="w-5 h-5 rounded-full bg-gray-300" id="stability-status"></div>
146
+ </div>
147
  </div>
148
  </div>
149
+
150
+ <!-- Model Combination -->
151
+ <div class="mt-6">
152
+ <h2 class="text-lg font-semibold mb-3 flex items-center">
153
+ <i class="fas fa-code-branch mr-2"></i>
154
+ دمج النماذج
155
+ </h2>
156
+
157
+ <div class="bg-indigo-50 rounded-lg p-4">
158
+ <div class="flex flex-wrap gap-2 mb-3" id="selected-models">
159
+ <!-- Selected models will appear here -->
160
+ <span class="text-sm text-gray-500">اختر نماذج من القائمة أعلاه</span>
161
+ </div>
162
+
163
+ <div class="flex items-center space-x-2">
164
+ <select id="combination-strategy" class="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
165
+ <option value="sequential">تسلسلي (واحد تلو الآخر)</option>
166
+ <option value="parallel">متوازي (جميع النماذج معًا)</option>
167
+ <option value="vote">تصويت (أفضل إجابة)</option>
168
+ </select>
169
+
170
+ <button id="combine-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center">
171
+ <i class="fas fa-link mr-2"></i>
172
+ دمج
173
+ </button>
174
+ </div>
175
  </div>
176
  </div>
177
  </div>
178
+
179
+ <!-- Chat Area -->
180
+ <div class="flex-1 flex flex-col">
181
+ <div id="chat-container" class="bg-white rounded-xl shadow-md p-4 flex-1 overflow-y-auto mb-4">
182
+ <!-- Welcome Message -->
183
+ <div class="flex items-start space-x-3">
184
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mt-1">
185
+ <i class="fas fa-robot text-indigo-600"></i>
186
+ </div>
187
+ <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg message-animation">
188
+ <p class="text-sm">مرحباً! أنا منصة دمج نماذج الذكاء الاصطناعي. يمكنك اختيار نماذج متعددة ودمجها للحصول على أفضل النتائج.</p>
189
+ <p class="text-xs text-indigo-400 mt-1">الآن</p>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Sample Messages -->
194
+ <div class="flex justify-end mt-4">
195
+ <div class="bg-indigo-600 text-white rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg message-animation">
196
+ <p class="text-sm">ما الفرق بين GPT-4 و Gemini Pro؟</p>
197
+ <p class="text-xs text-indigo-200 mt-1">الآن</p>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="flex items-start space-x-3 mt-4">
202
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mt-1">
203
+ <i class="fas fa-robot text-indigo-600"></i>
204
+ </div>
205
+ <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg message-animation">
206
+ <div class="flex items-center space-x-2 mb-1">
207
+ <span class="text-xs font-medium bg-indigo-100 text-indigo-800 px-2 py-1 rounded">GPT-4</span>
208
+ <span class="text-xs font-medium bg-red-100 text-red-800 px-2 py-1 rounded">Gemini</span>
209
+ </div>
210
+ <p class="text-sm">GPT-4 من OpenAI متخصص في فهم النصوص الطويلة، بينما Gemini من Google يتميز بقدرته على معالجة النصوص والصور معًا.</p>
211
+ <p class="text-xs text-indigo-400 mt-1">الآن</p>
212
+ </div>
213
  </div>
 
214
  </div>
215
+
216
+ <!-- Input Area -->
217
+ <div class="bg-white rounded-xl shadow-lg p-4">
218
+ <div class="flex items-center space-x-2">
219
+ <button class="p-2 text-gray-500 hover:text-indigo-600">
220
+ <i class="fas fa-paperclip"></i>
221
+ </button>
222
+ <div class="flex-1 relative">
223
+ <input
224
+ id="user-input"
225
+ type="text"
226
+ placeholder="اكتب رسالتك هنا..."
227
+ class="w-full bg-gray-100 rounded-full py-3 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500"
228
+ >
229
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600">
230
+ <i class="far fa-smile"></i>
231
+ </button>
232
+ </div>
233
+ <button id="send-btn" class="p-3 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">
234
+ <i class="fas fa-paper-plane"></i>
235
+ </button>
236
+ </div>
237
+ <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
238
+ <div class="flex space-x-2">
239
+ <button class="hover:text-indigo-600">
240
+ <i class="fas fa-microphone"></i>
241
+ </button>
242
+ <button class="hover:text-indigo-600">
243
+ <i class="fas fa-image"></i>
244
+ </button>
245
+ </div>
246
+ <div id="active-models" class="flex space-x-1">
247
+ <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs">GPT-4</span>
248
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">Gemini</span>
249
+ </div>
250
+ </div>
251
  </div>
252
  </div>
253
+ </div>
254
+ </div>
255
 
256
+ <!-- API Keys Modal -->
257
+ <div id="api-keys-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
258
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md">
259
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
260
+ <h3 class="text-lg font-semibold">إدارة مفاتيح API</h3>
261
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
262
+ <i class="fas fa-times"></i>
263
+ </button>
264
+ </div>
265
+
266
+ <div class="p-4 space-y-4">
267
+ <!-- OpenAI API Key -->
268
+ <div>
269
+ <label class="block text-sm font-medium text-gray-700 mb-1">OpenAI API Key</label>
270
+ <div class="relative">
271
+ <input
272
+ id="openai-key"
273
+ type="password"
274
+ placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxx"
275
+ class="api-key-input w-full bg-gray-50 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
276
+ >
277
+ <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600 toggle-password">
278
+ <i class="far fa-eye"></i>
279
+ </button>
280
  </div>
 
281
  </div>
282
+
283
+ <!-- Google API Key -->
284
+ <div>
285
+ <label class="block text-sm font-medium text-gray-700 mb-1">Google API Key</label>
286
+ <div class="relative">
287
+ <input
288
+ id="google-key"
289
+ type="password"
290
+ placeholder="xxxxxxxxxxxxxxxxxxxxxxxx"
291
+ class="api-key-input w-full bg-gray-50 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
292
+ >
293
+ <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600 toggle-password">
294
+ <i class="far fa-eye"></i>
295
+ </button>
296
  </div>
 
297
  </div>
298
+
299
+ <!-- Anthropic API Key -->
300
+ <div>
301
+ <label class="block text-sm font-medium text-gray-700 mb-1">Anthropic API Key</label>
302
+ <div class="relative">
303
+ <input
304
+ id="anthropic-key"
305
+ type="password"
306
+ placeholder="sk-ant-xxxxxxxxxxxxxxxxxxxxxxxx"
307
+ class="api-key-input w-full bg-gray-50 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
308
+ >
309
+ <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600 toggle-password">
310
+ <i class="far fa-eye"></i>
311
+ </button>
312
+ </div>
313
  </div>
314
+
315
+ <!-- Meta API Key -->
316
+ <div>
317
+ <label class="block text-sm font-medium text-gray-700 mb-1">Meta API Key</label>
318
+ <div class="relative">
319
+ <input
320
+ id="meta-key"
321
+ type="password"
322
+ placeholder="xxxxxxxxxxxxxxxxxxxxxxxx"
323
+ class="api-key-input w-full bg-gray-50 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
324
+ >
325
+ <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600 toggle-password">
326
+ <i class="far fa-eye"></i>
327
+ </button>
328
  </div>
 
329
  </div>
330
+
331
+ <!-- Stability API Key -->
332
+ <div>
333
+ <label class="block text-sm font-medium text-gray-700 mb-1">Stability API Key</label>
334
+ <div class="relative">
335
+ <input
336
+ id="stability-key"
337
+ type="password"
338
+ placeholder="xxxxxxxxxxxxxxxxxxxxxxxx"
339
+ class="api-key-input w-full bg-gray-50 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
340
+ >
341
+ <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-indigo-600 toggle-password">
342
+ <i class="far fa-eye"></i>
343
+ </button>
344
+ </div>
345
  </div>
346
  </div>
347
+
348
+ <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
349
+ <button id="cancel-keys" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition">
350
+ إلغاء
351
+ </button>
352
+ <button id="save-keys" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
353
+ حفظ المفاتيح
354
+ </button>
355
+ </div>
356
  </div>
 
 
 
 
 
 
357
  </div>
358
 
359
  <script>
360
  document.addEventListener('DOMContentLoaded', function() {
361
+ // DOM Elements
362
+ const chatContainer = document.getElementById('chat-container');
363
+ const userInput = document.getElementById('user-input');
364
+ const sendBtn = document.getElementById('send-btn');
365
+ const modelCards = document.querySelectorAll('.model-card');
366
+ const selectedModelsContainer = document.getElementById('selected-models');
367
+ const combineBtn = document.getElementById('combine-btn');
368
+ const combinationStrategy = document.getElementById('combination-strategy');
369
+ const activeModelsContainer = document.getElementById('active-models');
370
+ const settingsBtn = document.getElementById('settings-btn');
371
+ const apiKeysModal = document.getElementById('api-keys-modal');
372
+ const closeModal = document.getElementById('close-modal');
373
+ const cancelKeys = document.getElementById('cancel-keys');
374
+ const saveKeys = document.getElementById('save-keys');
375
+ const togglePasswordBtns = document.querySelectorAll('.toggle-password');
376
 
377
+ // State
378
+ let selectedModels = [];
379
+ let activeModels = [];
380
+ let apiKeys = {
381
+ openai: '',
382
+ google: '',
383
+ anthropic: '',
384
+ meta: '',
385
+ stability: ''
386
+ };
387
+
388
+ // Load saved API keys from localStorage
389
+ function loadApiKeys() {
390
+ const savedKeys = localStorage.getItem('ai_api_keys');
391
+ if (savedKeys) {
392
+ apiKeys = JSON.parse(savedKeys);
393
+ document.getElementById('openai-key').value = apiKeys.openai;
394
+ document.getElementById('google-key').value = apiKeys.google;
395
+ document.getElementById('anthropic-key').value = apiKeys.anthropic;
396
+ document.getElementById('meta-key').value = apiKeys.meta;
397
+ document.getElementById('stability-key').value = apiKeys.stability;
398
 
399
+ // Update status indicators
400
+ updateModelStatus();
401
+ }
402
+ }
 
403
 
404
+ // Save API keys to localStorage
405
+ function saveApiKeys() {
406
+ apiKeys = {
407
+ openai: document.getElementById('openai-key').value.trim(),
408
+ google: document.getElementById('google-key').value.trim(),
409
+ anthropic: document.getElementById('anthropic-key').value.trim(),
410
+ meta: document.getElementById('meta-key').value.trim(),
411
+ stability: document.getElementById('stability-key').value.trim()
412
+ };
413
+
414
+ localStorage.setItem('ai_api_keys', JSON.stringify(apiKeys));
415
+ updateModelStatus();
416
+ apiKeysModal.classList.add('hidden');
417
+ }
418
 
419
+ // Update model status indicators
420
+ function updateModelStatus() {
421
+ document.getElementById('openai-status').className = apiKeys.openai ?
422
+ 'w-5 h-5 rounded-full bg-green-400' : 'w-5 h-5 rounded-full bg-gray-300';
423
+ document.getElementById('gemini-status').className = apiKeys.google ?
424
+ 'w-5 h-5 rounded-full bg-green-400' : 'w-5 h-5 rounded-full bg-gray-300';
425
+ document.getElementById('claude-status').className = apiKeys.anthropic ?
426
+ 'w-5 h-5 rounded-full bg-green-400' : 'w-5 h-5 rounded-full bg-gray-300';
427
+ document.getElementById('llama-status').className = apiKeys.meta ?
428
+ 'w-5 h-5 rounded-full bg-green-400' : 'w-5 h-5 rounded-full bg-gray-300';
429
+ document.getElementById('stability-status').className = apiKeys.stability ?
430
+ 'w-5 h-5 rounded-full bg-green-400' : 'w-5 h-5 rounded-full bg-gray-300';
431
+ }
432
 
433
+ // Add a new message to the chat
434
+ function addMessage(text, isUser, models = []) {
435
+ const messageDiv = document.createElement('div');
436
+ messageDiv.className = `flex ${isUser ? 'justify-end' : 'items-start space-x-3'} mt-4 message-animation`;
 
 
 
 
 
 
 
 
437
 
438
+ if (!isUser) {
439
+ let modelsHtml = '';
440
+ if (models.length > 0) {
441
+ const modelColors = {
442
+ 'openai': 'bg-blue-100 text-blue-800',
443
+ 'gemini': 'bg-red-100 text-red-800',
444
+ 'claude': 'bg-purple-100 text-purple-800',
445
+ 'llama': 'bg-orange-100 text-orange-800',
446
+ 'stability': 'bg-green-100 text-green-800'
447
+ };
448
+
449
+ modelsHtml = `<div class="flex items-center space-x-2 mb-1">` +
450
+ models.map(model =>
451
+ `<span class="text-xs font-medium ${modelColors[model]} px-2 py-1 rounded">${
452
+ model === 'openai' ? 'GPT-4' :
453
+ model === 'gemini' ? 'Gemini' :
454
+ model === 'claude' ? 'Claude' :
455
+ model === 'llama' ? 'Llama' :
456
+ 'Stability'
457
+ }</span>`
458
+ ).join('') +
459
+ `</div>`;
 
 
460
  }
461
 
462
+ messageDiv.innerHTML = `
463
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mt-1">
464
+ <i class="fas fa-robot text-indigo-600"></i>
465
+ </div>
466
+ <div class="bg-indigo-50 rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg">
467
+ ${modelsHtml}
468
+ <p class="text-sm">${text}</p>
469
+ <p class="text-xs text-indigo-400 mt-1">الآن</p>
470
+ </div>
471
+ `;
472
+ } else {
473
+ messageDiv.innerHTML = `
474
+ <div class="bg-indigo-600 text-white rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg">
475
+ <p class="text-sm">${text}</p>
476
+ <p class="text-xs text-indigo-200 mt-1">الآن</p>
477
+ </div>
478
+ `;
479
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
480
 
481
+ chatContainer.appendChild(messageDiv);
482
+ scrollToBottom();
 
 
 
 
 
 
483
  }
484
 
485
+ // Scroll to bottom of chat
486
+ function scrollToBottom() {
487
+ chatContainer.scrollTop = chatContainer.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
488
  }
489
 
490
+ // Simulate API call to AI models
491
+ async function callAIModel(model, prompt) {
492
+ // In a real app, you would make actual API calls here
493
+ // This is just a simulation
 
 
 
 
 
494
 
495
+ const responses = {
496
+ openai: [
497
+ "GPT-4: هذا النموذج متخصص في فهم النصوص المعقدة وتوليد ردود مفصلة.",
498
+ "GPT-4: بناءً على سؤالك، يمكنني تقديم تحليل متعمق للموضوع.",
499
+ "GPT-4: لدي معرفة واسعة حتى عام 2023 وأستطيع مساعدتك في مختلف المواضيع."
500
+ ],
501
+ gemini: [
502
+ "Gemini: أنا نموذج متعدد الوسائط يمكنني معالجة النصوص والصور معًا.",
503
+ "Gemini: يمكنني تقديم إجابات سريعة ودقيقة بناءً على أحدث المعلومات.",
504
+ "Gemini: تم تصميمي ليكون تفاعليًا وسهل الاستخدام مع قدرات متقدمة."
505
+ ],
506
+ claude: [
507
+ "Claude: أهتم بالسلامة والأخلاق في الذكاء الاصطناعي وأقدم إجابات متوازنة.",
508
+ "Claude: يمكنني مساعدتك في تحليل المشكلات المعقدة بطريقة منهجية.",
509
+ "Claude: تصميمي يركز على الحد من التحيزات وتقديم معلومات دقيقة."
510
+ ],
511
+ llama: [
512
+ "Llama: أنا نموذج مفتوح المصدر يمكن تخصيصه حسب احتياجاتك.",
513
+ "Llama: أقدم إجابات متوازنة مع إمكانية تشغيل محليًا على أجهزة قوية.",
514
+ "Llama: مجتمع المطورين يساهم باستمرار في تحسين أدائي وقدراتي."
515
+ ],
516
+ stability: [
517
+ "Stability: أنا متخصص في توليد الصور بناءً على أوصاف نصية.",
518
+ "Stability: يمكنني إنشاء صور فنية أو واقعية حسب طلبك.",
519
+ "Stability: أدواتي تتيح لك التحكم الكامل في مظهر الصورة النهائية."
520
+ ]
521
+ };
522
 
523
+ // Simulate API delay
524
+ await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
 
 
 
 
 
 
 
 
 
 
 
 
 
525
 
526
+ // Check if API key is available
527
+ if (!apiKeys[model]) {
528
+ throw new Error(`مفتاح API لـ ${model} غير متوفر`);
529
+ }
 
 
 
 
 
530
 
531
+ // Return a random response for the model
532
+ const possibleResponses = responses[model];
533
+ return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
 
 
 
 
 
 
534
  }
535
 
536
+ // Handle combining models
537
+ async function combineModels(prompt) {
538
+ if (selectedModels.length === 0) {
539
+ addMessage("الرجاء اختيار نماذج لدمجها أولاً", false);
540
+ return;
541
+ }
 
 
 
 
 
 
 
542
 
543
+ const strategy = combinationStrategy.value;
544
+ let responses = [];
 
 
 
 
 
 
 
545
 
546
+ try {
547
+ if (strategy === 'sequential') {
548
+ // Call models one after another
549
+ for (const model of selectedModels) {
550
+ const response = await callAIModel(model, prompt);
551
+ responses.push({ model, response });
552
+ addMessage(response, false, [model]);
553
+ }
554
+ } else if (strategy === 'parallel') {
555
+ // Call all models at the same time
556
+ const promises = selectedModels.map(model => callAIModel(model, prompt));
557
+ const results = await Promise.all(promises);
558
+
559
+ responses = selectedModels.map((model, index) => ({
560
+ model,
561
+ response: results[index]
562
+ }));
563
+
564
+ // Show combined response
565
+ const combinedResponse = responses.map(r =>
566
+ `${r.model === 'openai' ? 'GPT-4' :
567
+ r.model === 'gemini' ? 'Gemini' :
568
+ r.model === 'claude' ? 'Claude' :
569
+ r.model === 'llama' ? 'Llama' :
570
+ 'Stability'}: ${r.response.split(':')[1]}`
571
+ ).join('\n\n');
572
+
573
+ addMessage(combinedResponse, false, selectedModels);
574
+ } else if (strategy === 'vote') {
575
+ // Call all models and pick the best response (simulated)
576
+ const promises = selectedModels.map(model => callAIModel(model, prompt));
577
+ const results = await Promise.all(promises);
578
+
579
+ responses = selectedModels.map((model, index) => ({
580
+ model,
581
+ response: results[index]
582
+ }));
583
+
584
+ // Pick the longest response as "best" (simplified)
585
+ const bestResponse = results.reduce((longest, current) =>
586
+ current.length > longest.length ? current : longest
587
+ );
588
+
589
+ addMessage(bestResponse, false, selectedModels);
590
+ }
591
+
592
+ // Set these models as active for future messages
593
+ activeModels = [...selectedModels];
594
+ updateActiveModelsDisplay();
595
+
596
+ } catch (error) {
597
+ addMessage(`خطأ: ${error.message}`, false);
598
+ }
599
  }
600
 
601
+ // Update the active models display
602
+ function updateActiveModelsDisplay() {
603
+ activeModelsContainer.innerHTML = '';
 
604
 
605
+ if (activeModels.length === 0) {
606
+ activeModelsContainer.innerHTML = '<span class="text-gray-500">لا توجد نماذج نشطة</span>';
607
+ return;
608
+ }
 
 
 
 
 
609
 
610
+ const modelColors = {
611
+ 'openai': 'bg-blue-100 text-blue-800',
612
+ 'gemini': 'bg-red-100 text-red-800',
613
+ 'claude': 'bg-purple-100 text-purple-800',
614
+ 'llama': 'bg-orange-100 text-orange-800',
615
+ 'stability': 'bg-green-100 text-green-800'
616
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
617
 
618
+ activeModels.forEach(model => {
619
+ const span = document.createElement('span');
620
+ span.className = `${modelColors[model]} px-2 py-1 rounded text-xs`;
621
+ span.textContent =
622
+ model === 'openai' ? 'GPT-4' :
623
+ model === 'gemini' ? 'Gemini' :
624
+ model === 'claude' ? 'Claude' :
625
+ model === 'llama' ? 'Llama' :
626
+ 'Stability';
627
+ activeModelsContainer.appendChild(span);
628
+ });
629
  }
630
 
631
+ // Event Listeners
632
+ modelCards.forEach(card => {
633
+ card.addEventListener('click', function() {
634
+ const model = this.getAttribute('data-model');
635
+
636
+ // Check if API key is available
637
+ if (!apiKeys[model === 'gemini' ? 'google' : model === 'llama' ? 'meta' : model]) {
638
+ alert(`الرجاء إضافة مفتاح API لـ ${model} أولاً`);
639
+ apiKeysModal.classList.remove('hidden');
640
+ return;
641
+ }
642
+
643
+ // Toggle model selection
644
+ const index = selectedModels.indexOf(model);
645
+ if (index === -1) {
646
+ selectedModels.push(model);
647
+ this.classList.add('border-indigo-500', 'ring-2', 'ring-indigo-200');
648
+ } else {
649
+ selectedModels.splice(index, 1);
650
+ this.classList.remove('border-indigo-500', 'ring-2', 'ring-indigo-200');
651
+ }
652
+
653
+ // Update selected models display
654
+ if (selectedModels.length === 0) {
655
+ selectedModelsContainer.innerHTML = '<span class="text-sm text-gray-500">اختر نماذج من القائمة أعلاه</span>';
656
+ } else {
657
+ selectedModelsContainer.innerHTML = selectedModels.map(m =>
658
+ `<span class="text-xs font-medium bg-indigo-100 text-indigo-800 px-2 py-1 rounded">${
659
+ m === 'openai' ? 'GPT-4' :
660
+ m === 'gemini' ? 'Gemini' :
661
+ m === 'claude' ? 'Claude' :
662
+ m === 'llama' ? 'Llama' :
663
+ 'Stability'
664
+ }</span>`
665
+ ).join('');
666
+ }
667
+ });
668
+ });
669
 
670
+ combineBtn.addEventListener('click', function() {
671
+ const prompt = "كيف يمكن دمج هذه النماذج معًا؟";
672
+ combineModels(prompt);
673
  });
674
 
675
+ sendBtn.addEventListener('click', sendMessage);
676
+ userInput.addEventListener('keypress', function(e) {
677
+ if (e.key === 'Enter') {
678
+ sendMessage();
679
  }
680
  });
681
 
682
+ function sendMessage() {
683
+ const message = userInput.value.trim();
684
+ if (message === '') return;
685
+
686
+ // Add user message
687
+ addMessage(message, true);
688
+ userInput.value = '';
689
+
690
+ // If no active models, use the selected ones
691
+ const modelsToUse = activeModels.length > 0 ? activeModels : selectedModels;
692
+
693
+ if (modelsToUse.length === 0) {
694
+ addMessage("الرجاء اختيار نماذج لاستخدامها أولاً", false);
695
+ return;
696
+ }
697
+
698
+ // Call the active models
699
+ combineModels(message);
700
+ }
701
 
702
+ // Modal controls
703
+ settingsBtn.addEventListener('click', function() {
704
+ apiKeysModal.classList.remove('hidden');
705
  });
706
 
707
+ closeModal.addEventListener('click', function() {
708
+ apiKeysModal.classList.add('hidden');
 
 
 
709
  });
710
 
711
+ cancelKeys.addEventListener('click', function() {
712
+ apiKeysModal.classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
713
  });
714
 
715
+ saveKeys.addEventListener('click', saveApiKeys);
 
716
 
717
+ // Toggle password visibility
718
+ togglePasswordBtns.forEach(btn => {
719
+ btn.addEventListener('click', function() {
720
+ const input = this.parentElement.querySelector('input');
721
+ if (input.type === 'password') {
722
+ input.type = 'text';
723
+ this.innerHTML = '<i class="far fa-eye-slash"></i>';
724
+ } else {
725
+ input.type = 'password';
726
+ this.innerHTML = '<i class="far fa-eye"></i>';
727
+ }
728
+ });
729
  });
730
+
731
+ // Initialize
732
+ loadApiKeys();
733
+ updateActiveModelsDisplay();
734
+ scrollToBottom();
735
  });
736
  </script>
737
  <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=Abdallh16/osint" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>