Hugging Face's logo

Spaces:
Nickitozi263
/
awesome-ethnicity-analyser
Running

App Files Community
Nickitozi263 commited on
Commit
8bb2297
·
verified ·
1 Parent(s): c7b2cc4

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +529 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Awesome Ethnicity Analyser
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: blue
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: awesome-ethnicity-analyser
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,529 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EthnoScan - Российский этнический анализатор</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
+ .card-hover {
11
+ transition: all 0.3s ease;
12
+ transform: translateY(0);
13
+ }
14
+ .card-hover:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .voice-pulse {
19
+ animation: pulse 2s infinite;
20
+ }
21
+ @keyframes pulse {
22
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
23
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
24
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
25
+ }
26
+ .slide-in {
27
+ animation: slideIn 0.8s ease-out forwards;
28
+ }
29
+ @keyframes slideIn {
30
+ from { opacity: 0; transform: translateY(30px); }
31
+ to { opacity: 1; transform: translateY(0); }
32
+ }
33
+ .progress-bar {
34
+ height: 6px;
35
+ transition: width 0.3s ease-in-out;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gradient-to-br from-gray-50 to-gray-200 min-h-screen">
40
+ <!-- Header -->
41
+ <header class="py-6 bg-indigo-700 text-white shadow-lg">
42
+ <div class="container mx-auto px-4">
43
+ <div class="flex justify-between items-center">
44
+ <div class="flex items-center">
45
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
46
+ <div class="ml-4">
47
+ <h1 class="text-2xl font-bold">EthnoScan</h1>
48
+ <p class="text-indigo-200">Идентификация этно-расовых характеристик</p>
49
+ </div>
50
+ </div>
51
+ <div class="flex items-center">
52
+ <button class="bg-indigo-800 hover:bg-indigo-600 px-4 py-2 rounded-lg transition mr-3">
53
+ <i class="fas fa-history mr-2"></i>История
54
+ </button>
55
+ <button class="bg-indigo-800 hover:bg-indigo-600 px-4 py-2 rounded-lg transition">
56
+ <i class="fas fa-cog mr-2"></i>Настройки
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Main Section -->
64
+ <main class="container mx-auto px-4 py-10">
65
+ <div class="text-center mb-12">
66
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Определение этнической принадлежности</h2>
67
+ <p class="text-gray-600 max-w-3xl mx-auto">Загрузите фотографию и запишите голос для анализа расовых типов, национальностей и субэтносов России. Результаты формируются уникально для каждого пользователя.</p>
68
+ </div>
69
+
70
+ <div class="flex flex-col lg:flex-row gap-8">
71
+ <!-- Input Section -->
72
+ <div class="lg:w-1/2 bg-white rounded-xl shadow-lg p-6">
73
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
74
+ <div>
75
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Фотография</h3>
76
+ <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 flex flex-col items-center justify-center h-64">
77
+ <i class="fas fa-camera text-indigo-500 text-4xl mb-4"></i>
78
+ <p class="text-gray-600 mb-4 text-center">Перетащите сюда фото или</p>
79
+ <label for="photoUpload" class="bg-indigo-600 text-white px-6 py-2 rounded-lg cursor-pointer hover:bg-indigo-700 transition">
80
+ <i class="fas fa-upload mr-2"></i>Выбрать файл
81
+ </label>
82
+ <input type="file" id="photoUpload" accept="image/*" class="hidden">
83
+ </div>
84
+ </div>
85
+ <div>
86
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Голосовая запись</h3>
87
+ <div id="voiceRecorder" class="bg-indigo-50 border-2 border-dashed border-indigo-300 rounded-xl p-6 flex flex-col items-center justify-center h-64">
88
+ <div id="audioVisualizer" class="h-16 mb-6 flex items-end w-full justify-center hidden">
89
+ <div id="bar1" class="w-3 bg-indigo-400 rounded-full mx-1 progress-bar"></div>
90
+ <div id="bar2" class="w-3 bg-indigo-400 rounded-full mx-1 progress-bar"></div>
91
+ <div id="bar3" class="w-3 bg-indigo-400 rounded-full mx-1 progress-bar"></div>
92
+ <div id="bar4" class="w-3 bg-indigo-400 rounded-full mx-1 progress-bar"></div>
93
+ <div id="bar5" class="w-3 bg-indigo-400 rounded-full mx-1 progress-bar"></div>
94
+ </div>
95
+ <button id="recordButton" class="voice-pulse bg-indigo-600 hover:bg-indigo-700 text-white rounded-full w-16 h-16 flex items-center justify-center mb-4">
96
+ <i class="fas fa-microphone text-2xl"></i>
97
+ </button>
98
+ <p class="text-gray-600 text-center" id="recordStatus">Нажмите для записи голоса</p>
99
+ <p class="text-xs text-gray-500 mt-2">Попроизнесите несколько фраз в течение 10 секунд</p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="mb-6">
105
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Дополнительная информация (необязательно)</h3>
106
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
107
+ <div>
108
+ <label class="text-gray-700 mb-1 block">Возраст</label>
109
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2">
110
+ <option>Выберите</option>
111
+ <option>18-25</option>
112
+ <option>26-35</option>
113
+ <option>36-45</option>
114
+ <option>46+</option>
115
+ </select>
116
+ </div>
117
+ <div>
118
+ <label class="text-gray-700 mb-1 block">Пол</label>
119
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2">
120
+ <option>Выберите</option>
121
+ <option>Мужской</option>
122
+ <option>Женский</option>
123
+ </select>
124
+ </div>
125
+ <div>
126
+ <label class="text-gray-700 mb-1 block">Регион</label>
127
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2">
128
+ <option>Выберите</option>
129
+ <option>Центральный</option>
130
+ <option>Северо-Западный</option>
131
+ <option>Южный</option>
132
+ <option>Поволжье</option>
133
+ <option>Урал</option>
134
+ <option>Сибирь</option>
135
+ <option>Дальний Восток</option>
136
+ </select>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="text-center">
142
+ <button id="analyzeButton" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-bold text-lg transition-all transform hover:scale-105 shadow-lg">
143
+ <i class="fas fa-search mr-2"></i> Анализировать данные
144
+ </button>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Results Section -->
149
+ <div class="lg:w-1/2">
150
+ <div class="bg-white rounded-xl shadow-lg p-6">
151
+ <div class="flex justify-between items-center mb-6">
152
+ <h3 class="text-xl font-semibold text-gray-800">Результаты анализа</h3>
153
+ <span id="sessionId" class="text-sm text-gray-500">Сессия: #230917-05</span>
154
+ </div>
155
+
156
+ <div class="flex flex-wrap" id="resultsContainer">
157
+ <div class="w-full mb-6 text-center py-10">
158
+ <div class="text-indigo-400 mx-auto mb-4">
159
+ <i class="fas fa-chart-pie text-6xl"></i>
160
+ </div>
161
+ <h4 class="text-lg font-semibold text-gray-700 mb-2">Ожидание данных</h4>
162
+ <p class="text-gray-600">Загрузите фото и запишите голос, чтобы получить результаты анализа</p>
163
+ </div>
164
+ </div>
165
+
166
+ <div id="progressBar" class="h-2 bg-gray-200 rounded-full overflow-hidden mb-6 hidden">
167
+ <div id="progress" class="h-full bg-indigo-600 w-0"></div>
168
+ </div>
169
+
170
+ <div id="analysisStats" class="hidden">
171
+ <div class="grid grid-cols-4 gap-4 text-center mb-6">
172
+ <div class="bg-gray-100 p-3 rounded-lg">
173
+ <div class="text-indigo-600 font-bold text-2xl">97.8%</div>
174
+ <div class="text-xs text-gray-600">Точность анализа</div>
175
+ </div>
176
+ <div class="bg-gray-100 p-3 rounded-lg">
177
+ <div class="text-indigo-600 font-bold text-2xl">64</div>
178
+ <div class="text-xs text-gray-600">Антроп. маркеров</div>
179
+ </div>
180
+ <div class="bg-gray-100 p-3 rounded-lg">
181
+ <div class="text-indigo-600 font-bold text-2xl">28</div>
182
+ <div class="text-xs text-gray-600">Фонационных черт</div>
183
+ </div>
184
+ <div class="bg-gray-100 p-3 rounded-lg">
185
+ <div class="text-indigo-600 font-bold text-2xl">2.4с</div>
186
+ <div class="text-xs text-gray-600">Время обработки</div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="bg-indigo-50 rounded-lg p-4 mb-6">
191
+ <div class="flex items-center">
192
+ <i class="fas fa-shield-alt text-indigo-500 text-lg mr-3"></i>
193
+ <span class="text-gray-700">Ваши данные обрабатываются локально и никогда не передаются на сервер</span>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="text-center">
198
+ <button onclick="downloadResults()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg mr-3">
199
+ <i class="fas fa-download mr-2"></i>Скачать отчет
200
+ </button>
201
+ <button onclick="resetAnalysis()" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg">
202
+ <i class="fas fa-redo mr-2"></i>Новый анализ
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </main>
210
+
211
+ <!-- Ethnic Map Accordion -->
212
+ <section class="container mx-auto px-4 py-6">
213
+ <div class="bg-white rounded-xl shadow-lg p-6">
214
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Атлас этнических групп России</h3>
215
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
216
+ <div class="border-l-4 border-indigo-500 pl-4 py-2">
217
+ <h4 class="font-bold text-gray-800">Северная группа</h4>
218
+ <p class="text-sm text-gray-600">Ненцы, саамы, ханты, манси, коми, якуты</p>
219
+ </div>
220
+ <div class="border-l-4 border-green-500 pl-4 py-2">
221
+ <h4 class="font-bold text-gray-800">Поволжская группа</h4>
222
+ <p class="text-sm text-gray-600">Татары, чуваши, башкиры, марийцы, мордва</p>
223
+ </div>
224
+ <div class="border-l-4 border-red-500 pl-4 py-2">
225
+ <h4 class="font-bold text-gray-800">Южная группа</h4>
226
+ <p class="text-sm text-gray-600">Чеченцы, ингуши, осетины, кабардинцы</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Footer -->
233
+ <footer class="bg-gray-800 text-gray-300 py-8 mt-12">
234
+ <div class="container mx-auto px-4">
235
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
236
+ <div>
237
+ <h4 class="font-bold text-white mb-4">EthnoScan</h4>
238
+ <p>Современная система идентификации этнической принадлежности на основе передовых технологий.</p>
239
+ </div>
240
+ <div>
241
+ <h4 class="font-bold text-white mb-4">Методология</h4>
242
+ <ul>
243
+ <li class="mb-2"><a href="#" class="hover:text-white transition">Голосовой анализ</a></li>
244
+ <li class="mb-2"><a href="#" class="hover:text-white transition">Антропометрия</a></li>
245
+ <li class="mb-2"><a href="#" class="hover:text-white transition">Этнографическая картография</a></li>
246
+ </ul>
247
+ </div>
248
+ <div>
249
+ <h4 class="font-bold text-white mb-4">Ресурсы</h4>
250
+ <ul>
251
+ <li class="mb-2"><a href="#" class="hover:text-white transition">Научные публикации</a></li>
252
+ <li class="mb-2"><a href="#" class="hover:text-white transition">Базы данных</a></li>
253
+ <li class="mb-2"><a href="#" class="hover:text-white transition">API для разработчиков</a></li>
254
+ </ul>
255
+ </div>
256
+ <div>
257
+ <h4 class="font-bold text-white mb-4">Контакты</h4>
258
+ <div class="mb-2"><i class="fas fa-envelope mr-2"></i>[email protected]</div>
259
+ <div class="mb-2"><i class="fas fa-phone mr-2"></i>+7 (495) 123-45-67</div>
260
+ <div class="flex mt-4 space-x-3">
261
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-vk fa-lg"></i></a>
262
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram fa-lg"></i></a>
263
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube fa-lg"></i></a>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ <div class="border-t border-gray-700 mt-8 pt-6 text-sm text-center">
268
+ © 2023 EthnoScan. Все права защищены. По результатам аналитики проекта Росэтногенезис.
269
+ </div>
270
+ </div>
271
+ </footer>
272
+
273
+ <script>
274
+ // Ethnic groups database
275
+ const ethnicGroups = {
276
+ races: [
277
+ "Североевропейский",
278
+ "Восточноевропейский",
279
+ "Балтийский",
280
+ "Понтийский",
281
+ "Южносибирский",
282
+ "Центральноазиатский",
283
+ "Северосибирский",
284
+ "Амуро-сахалинский"
285
+ ],
286
+ nations: [
287
+ "Карелы", "Весь", "Ногайцы", "Чуванцы", "Удины", "Кумандинцы", "Энцы", "Нагайбаки"
288
+ ],
289
+ anthroTypes: [
290
+ "Ильменский", "Онежский", "Нижнедонской", "Беломоро-карельский",
291
+ "Саянский", "Алтайский", "Тунгусский", "Приамурский",
292
+ "Предуральский", "Прикаспийский", "Кубанский", "Западносибирский",
293
+ "Якутский"
294
+ ],
295
+ subethnos: [
296
+ "Поморы", "Семейские", "Мезенцы", "Устюжане",
297
+ "Бухтарминцы", "Ямщики", "Сибиряки", "Кержаки",
298
+ "Донские казаки", "Кубанские казаки", "Уральские казаки",
299
+ "Терские казаки", "Забайкальские казаки"
300
+ ]
301
+ };
302
+
303
+ // Simulation state
304
+ let isAnalyzing = false;
305
+ let recordInProgress = false;
306
+
307
+ // DOM elements
308
+ const analyzeButton = document.getElementById('analyzeButton');
309
+ const resultsContainer = document.getElementById('resultsContainer');
310
+ const progressBar = document.getElementById('progressBar');
311
+ const progress = document.getElementById('progress');
312
+ const analysisStats = document.getElementById('analysisStats');
313
+ const recordButton = document.getElementById('recordButton');
314
+ const recordStatus = document.getElementById('recordStatus');
315
+ const audioVisualizer = document.getElementById('audioVisualizer');
316
+
317
+ // Audio visualization elements
318
+ const bar1 = document.getElementById('bar1');
319
+ const bar2 = document.getElementById('bar2');
320
+ const bar3 = document.getElementById('bar3');
321
+ const bar4 = document.getElementById('bar4');
322
+ const bar5 = document.getElementById('bar5');
323
+
324
+ // Voice recording simulation
325
+ recordButton.addEventListener('click', () => {
326
+ if (recordInProgress) {
327
+ stopRecording();
328
+ } else {
329
+ startRecording();
330
+ }
331
+ });
332
+
333
+ function startRecording() {
334
+ recordInProgress = true;
335
+ recordButton.classList.add('voice-pulse');
336
+ recordButton.classList.add('bg-red-600');
337
+ recordButton.classList.remove('bg-indigo-600');
338
+ recordStatus.textContent = "Запись... Говорите сейчас!";
339
+ audioVisualizer.classList.remove('hidden');
340
+
341
+ // Simulate audio visualization
342
+ const animateBars = () => {
343
+ if (!recordInProgress) return;
344
+
345
+ const heights = [
346
+ Math.random() * 50 + 10,
347
+ Math.random() * 70 + 20,
348
+ Math.random() * 90 + 30,
349
+ Math.random() * 60 + 15,
350
+ Math.random() * 80 + 25
351
+ ];
352
+
353
+ bar1.style.height = heights[0] + 'px';
354
+ bar2.style.height = heights[1] + 'px';
355
+ bar3.style.height = heights[2] + 'px';
356
+ bar4.style.height = heights[3] + 'px';
357
+ bar5.style.height = heights[4] + 'px';
358
+
359
+ setTimeout(animateBars, 150);
360
+ };
361
+
362
+ animateBars();
363
+
364
+ // Stop recording after 10 seconds
365
+ setTimeout(() => {
366
+ if (recordInProgress) {
367
+ stopRecording();
368
+ }
369
+ }, 10000);
370
+ }
371
+
372
+ function stopRecording() {
373
+ recordInProgress = false;
374
+ recordButton.classList.remove('voice-pulse');
375
+ recordButton.classList.remove('bg-red-600');
376
+ recordButton.classList.add('bg-indigo-600');
377
+ recordStatus.textContent = "Запись завершена! Можно анализировать";
378
+
379
+ // Reset heights
380
+ const resetBars = () => {
381
+ bar1.style.height = '0px';
382
+ bar2.style.height = '0px';
383
+ bar3.style.height = '0px';
384
+ bar4.style.height = '0px';
385
+ bar5.style.height = '0px';
386
+ };
387
+
388
+ setTimeout(resetBars, 300);
389
+ }
390
+
391
+ // Analyze functionality
392
+ analyzeButton.addEventListener('click', () => {
393
+ if (isAnalyzing) return;
394
+
395
+ isAnalyzing = true;
396
+
397
+ // Show progress bar
398
+ progressBar.classList.remove('hidden');
399
+
400
+ // Reset progress width and show analyzing state
401
+ resultsContainer.innerHTML = `
402
+ <div class="w-full mb-6 text-center py-10 slide-in">
403
+ <div class="animate-spin text-indigo-600 mx-auto mb-4">
404
+ <i class="fas fa-cog text-6xl"></i>
405
+ </div>
406
+ <h4 class="text-lg font-semibold text-gray-700 mb-2">Анализ данных</h4>
407
+ <p class="text-gray-600">Обработка фото и голосовых данных...</p>
408
+ </div>
409
+ `;
410
+
411
+ // Animate progress bar
412
+ let width = 0;
413
+ const interval = setInterval(() => {
414
+ width += Math.random() * 20;
415
+ progress.style.width = width + '%';
416
+
417
+ if (width >= 100) {
418
+ clearInterval(interval);
419
+ displayResults();
420
+ }
421
+ }, 500);
422
+ });
423
+
424
+ function displayResults() {
425
+ isAnalyzing = false;
426
+
427
+ // Generate unique results
428
+ const resultData = {
429
+ race: getRandomUniqueItem(ethnicGroups.races),
430
+ nation: getRandomUniqueItem(ethnicGroups.nations),
431
+ anthroType: getRandomUniqueItem(ethnicGroups.anthroTypes),
432
+ subethno: getRandomUniqueItem(ethnicGroups.subethnos)
433
+ };
434
+
435
+ // Build results UI
436
+ resultsContainer.innerHTML = '';
437
+
438
+ // Race
439
+ resultsContainer.innerHTML += `
440
+ <div class="w-full md:w-1/2 lg:w-1/4 mb-6 px-2">
441
+ <div class="card-hover bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl p-5 text-center shadow h-full">
442
+ <div class="bg-white rounded-lg p-3 inline-block mb-4">
443
+ <i class="fas fa-globe-asia text-indigo-600 text-3xl"></i>
444
+ </div>
445
+ <h4 class="font-bold text-gray-800 mb-2">Расовая принадлежность</h4>
446
+ <div class="bg-indigo-100 text-indigo-800 py-2 px-3 rounded-md mb-3 font-mono">${resultData.race}</div>
447
+ <p class="text-gray-600 text-xs">Определено с точностью 94.3%</p>
448
+ </div>
449
+ </div>
450
+ `;
451
+
452
+ // Nation
453
+ resultsContainer.innerHTML += `
454
+ <div class="w-full md:w-1/2 lg:w-1/4 mb-6 px-2">
455
+ <div class="card-hover bg-gradient-to-br from-blue-50 to-teal-50 rounded-xl p-5 text-center shadow h-full">
456
+ <div class="bg-white rounded-lg p-3 inline-block mb-4">
457
+ <i class="fas fa-users text-blue-600 text-3xl"></i>
458
+ </div>
459
+ <h4 class="font-bold text-gray-800 mb-2">Народ/Национальность</h4>
460
+ <div class="bg-blue-100 text-blue-800 py-2 px-3 rounded-md mb-3 font-mono">${resultData.nation}</div>
461
+ <p class="text-gray-600 text-xs">Определено с точностью 88.7%</p>
462
+ </div>
463
+ </div>
464
+ `;
465
+
466
+ // Anthropological type
467
+ resultsContainer.innerHTML += `
468
+ <div class="w-full md:w-1/2 lg:w-1/4 mb-6 px-2">
469
+ <div class="card-hover bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl p-5 text-center shadow h-full">
470
+ <div class="bg-white rounded-lg p-3 inline-block mb-4">
471
+ <i class="fas fa-brain text-amber-600 text-3xl"></i>
472
+ </div>
473
+ <h4 class="font-bold text-gray-800 mb-2">Антропологический тип</h4>
474
+ <div class="bg-amber-100 text-amber-800 py-2 px-3 rounded-md mb-3 font-mono">${resultData.anthroType}</div>
475
+ <p class="text-gray-600 text-xs">Определено с точностью 89.5%</p>
476
+ </div>
477
+ </div>
478
+ `;
479
+
480
+ // Sub-ethnos
481
+ resultsContainer.innerHTML += `
482
+ <div class="w-full md:w-1/2 lg:w-1/4 mb-6 px-2">
483
+ <div class="card-hover bg-gradient-to-br from-emerald-50 to-cyan-50 rounded-xl p-5 text-center shadow h-full">
484
+ <div class="bg-white rounded-lg p-3 inline-block mb-4">
485
+ <i class="fas fa-map-marker-alt text-emerald-600 text-3xl"></i>
486
+ </div>
487
+ <h4 class="font-bold text-gray-800 mb-2">Субэтнос</h4>
488
+ <div class="bg-emerald-100 text-emerald-800 py-2 px-3 rounded-md mb-3 font-mono">${resultData.subethno}</div>
489
+ <p class="text-gray-600 text-xs">Определено с точностью 83.2%</p>
490
+ </div>
491
+ </div>
492
+ `;
493
+
494
+ // Show stats
495
+ analysisStats.classList.remove('hidden');
496
+ }
497
+
498
+ // Generate unique item - simplified simulation
499
+ function getRandomUniqueItem(arr) {
500
+ const now = new Date();
501
+ const minutes = now.getMinutes();
502
+ const seconds = now.getSeconds();
503
+
504
+ const index = (minutes * seconds) % arr.length;
505
+ return arr[index];
506
+ }
507
+
508
+ // Download results simulation
509
+ function downloadResults() {
510
+ alert('Отчет сохранен в формате PDF. Проверьте папку загрузок!');
511
+ }
512
+
513
+ // Reset analysis simulation
514
+ function resetAnalysis() {
515
+ resultsContainer.innerHTML = `
516
+ <div class="w-full mb-6 text-center py-10">
517
+ <div class="text-indigo-400 mx-auto mb-4">
518
+ <i class="fas fa-chart-pie text-6xl"></i>
519
+ </div>
520
+ <h4 class="text-lg font-semibold text-gray-700 mb-2">Ожидание данных</h4>
521
+ <p class="text-gray-600">Загрузите фото и запишите голос, чтобы получить результаты анализа</p>
522
+ </div>
523
+ `;
524
+ analysisStats.classList.add('hidden');
525
+ progressBar.classList.add('hidden');
526
+ }
527
+ </script>
528
+ <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=Nickitozi263/awesome-ethnicity-analyser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
529
+ </html>