Hugging Face's logo

Spaces:
Aleksmorshen
/
Testreact
Running

App Files Community
1
Aleksmorshen commited on
Commit
fea9ee3
·
verified ·
1 Parent(s): a5c0e53

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +247 -267
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LMArena WebView + Генератор Промптов</title>
7
  <style>
8
  body, html {
9
  margin: 0;
@@ -15,19 +15,24 @@
15
  background-color: #f0f0f0;
16
  }
17
 
18
- /*
19
- Стили для WebView.
20
- Важно: z-index iframe должен быть ниже, чем у модального окна.
21
- */
 
 
 
 
 
 
22
  iframe {
23
- width: 100vw;
24
- height: 100vh;
25
  border: none;
26
  display: block;
27
- background: #fff;
28
  }
29
 
30
- /* Плавающая кнопка справа */
31
  .fab-btn {
32
  position: fixed;
33
  right: 20px;
@@ -35,30 +40,30 @@
35
  transform: translateY(-50%);
36
  width: 60px;
37
  height: 60px;
38
- background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
39
  color: white;
40
  border-radius: 50%;
41
  border: none;
42
- box-shadow: 0 6px 16px rgba(0,0,0,0.3);
43
  cursor: pointer;
44
- z-index: 1000;
45
- font-size: 24px;
46
  display: flex;
47
  align-items: center;
48
  justify-content: center;
49
- transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
50
  }
51
 
52
  .fab-btn:hover {
53
- transform: translateY(-50%) scale(1.15);
54
- box-shadow: 0 10px 20px rgba(0,0,0,0.4);
55
  }
56
-
57
  .fab-btn:active {
58
  transform: translateY(-50%) scale(0.95);
59
  }
60
 
61
- /* Модальное окно (фон) */
62
  .modal-overlay {
63
  display: none;
64
  position: fixed;
@@ -67,79 +72,74 @@
67
  width: 100%;
68
  height: 100%;
69
  background-color: rgba(0, 0, 0, 0.6);
70
- backdrop-filter: blur(4px); /* Эффект размытия фона */
71
- z-index: 2000;
72
  justify-content: center;
73
  align-items: center;
74
- animation: fadeIn 0.3s ease;
75
- }
76
-
77
- @keyframes fadeIn {
78
- from { opacity: 0; }
79
- to { opacity: 1; }
80
  }
81
 
82
- /* Контент модального окна */
83
  .modal-content {
84
- background-color: white;
85
- padding: 25px;
86
  border-radius: 16px;
87
  width: 90%;
88
- max-width: 500px;
89
- max-height: 85vh;
90
  overflow-y: auto;
91
- box-shadow: 0 15px 30px rgba(0,0,0,0.2);
92
- position: relative;
93
- animation: slideUp 0.3s ease;
 
94
  }
95
 
96
- @keyframes slideUp {
97
- from { transform: translateY(20px); opacity: 0; }
98
- to { transform: translateY(0); opacity: 1; }
99
  }
100
 
101
  .modal-header {
 
 
 
102
  display: flex;
103
  justify-content: space-between;
104
  align-items: center;
105
- margin-bottom: 20px;
106
- border-bottom: 1px solid #f0f0f0;
107
- padding-bottom: 15px;
108
- position: sticky;
109
- top: 0;
110
- background: white;
111
- z-index: 10;
112
  }
113
 
114
  .modal-header h2 {
115
  margin: 0;
116
- font-size: 1.4rem;
117
- color: #2c3e50;
118
  }
119
 
120
  .close-btn {
121
- background: #f1f1f1;
122
  border: none;
123
- width: 32px;
124
- height: 32px;
125
- border-radius: 50%;
126
- font-size: 20px;
127
  cursor: pointer;
128
- color: #555;
129
- display: flex;
130
- align-items: center;
131
- justify-content: center;
132
- transition: background 0.2s;
133
  }
134
 
135
  .close-btn:hover {
136
- background: #e0e0e0;
137
- color: #000;
 
 
 
 
 
 
 
 
 
 
138
  }
139
 
140
- /* Форма */
141
  .form-group {
142
  margin-bottom: 15px;
 
143
  }
144
 
145
  .form-group label {
@@ -150,241 +150,220 @@
150
  color: #444;
151
  }
152
 
153
- .form-group select, .form-group textarea {
154
  width: 100%;
155
- padding: 12px;
156
  border: 1px solid #ddd;
157
  border-radius: 8px;
158
  font-size: 0.95rem;
159
  box-sizing: border-box;
160
- background-color: #fafafa;
161
  transition: border-color 0.2s;
162
  }
163
 
164
  .form-group select:focus, .form-group textarea:focus {
165
  outline: none;
166
- border-color: #2196F3;
167
- background-color: #fff;
168
  }
169
 
170
  .form-group textarea {
171
  resize: vertical;
172
  min-height: 80px;
 
173
  }
174
 
175
- /* Кнопка "Готово" */
176
  .submit-btn {
177
  width: 100%;
178
  padding: 14px;
179
- background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
180
  color: white;
181
  border: none;
182
  border-radius: 8px;
183
  font-size: 1.1rem;
184
- cursor: pointer;
185
- margin-top: 15px;
186
  font-weight: 600;
187
- letter-spacing: 0.5px;
188
- box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3);
189
- transition: transform 0.2s, box-shadow 0.2s;
190
  }
191
 
192
  .submit-btn:hover {
193
- transform: translateY(-2px);
194
- box-shadow: 0 6px 15px rgba(33, 150, 243, 0.4);
195
- }
196
-
197
- .submit-btn:active {
198
- transform: translateY(0);
199
  }
200
 
201
- /* Адаптив */
202
- @media (max-width: 600px) {
203
- .modal-content {
204
- width: 95%;
205
- padding: 20px;
206
- max-height: 90vh;
207
- }
208
- .fab-btn {
209
- width: 50px;
210
- height: 50px;
211
- right: 15px;
212
- }
213
  }
214
  </style>
215
  </head>
216
  <body>
217
 
218
- <!--
219
- Обновленный Webview с правами доступа.
220
-
221
- sandbox:
222
- - allow-forms: разрешает отправку форм (вход).
223
- - allow-scripts: разрешает JS.
224
- - allow-same-origin: разрешает куки и сессии (критично для авторизации).
225
- - allow-popups: разрешает сайту открывать окна (лицензии, ссылки).
226
- - allow-popups-to-escape-sandbox: КЛЮЧЕВОЙ ПАРАМЕТР для Google Login, разрешает окну входа открываться полноценно.
227
- - allow-modals: разрешает внутренние модалки сайта.
228
-
229
- allow:
230
- - clipboard-write/read: для работы кнопок копирования на самом сайте.
231
- - microphone: если захотите голосовой ввод.
232
- -->
233
- <iframe
234
- id="app-frame"
235
- src="https://lmarena.ai/ru?chat-modality=image&mode=direct"
236
- sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-modals allow-presentation allow-downloads allow-orientation-lock"
237
- allow="clipboard-write; clipboard-read; microphone; camera; fullscreen; autoplay; display-capture; payment"
238
- referrerpolicy="no-referrer-when-downgrade"
239
- ></iframe>
240
-
241
- <!-- Кнопка вызова генератора -->
242
- <button class="fab-btn" onclick="openModal()" title="Генератор промптов">
243
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
244
  </button>
245
 
246
  <!-- Модальное окно -->
247
  <div class="modal-overlay" id="promptModal">
248
  <div class="modal-content">
249
  <div class="modal-header">
250
- <h2>Параметры Фото</h2>
251
  <button class="close-btn" onclick="closeModal()">&times;</button>
252
  </div>
253
 
254
- <form id="promptForm">
255
- <!-- Пол -->
256
- <div class="form-group">
257
- <label>Пол</label>
258
- <select id="gender">
259
- <option value="Male">Мужчина</option>
260
- <option value="Female">Женщина</option>
261
- </select>
262
- </div>
263
-
264
- <!-- Возраст -->
265
- <div class="form-group">
266
- <label>Возраст</label>
267
- <select id="age">
268
- <option value="Newborn (0-1 year)">Младенец (0-1)</option>
269
- <option value="Toddler (1-3 years)">Малыш (1-3)</option>
270
- <option value="Child (4-12 years)">Ребенок (4-12)</option>
271
- <option value="Teenager (13-19 years)">Подросток (13-19)</option>
272
- <option value="Young Adult (20-29 years)">Молодой (20-29)</option>
273
- <option value="Adult (30-39 years)">Взрослый (30-39)</option>
274
- <option value="Middle-aged (40-55 years)">Средних лет (40-55)</option>
275
- <option value="Senior (56-69 years)">Пожилой (56-69)</option>
276
- <option value="Elderly (70+ years)">Старый (70+)</option>
277
- </select>
278
- </div>
279
-
280
- <!-- Национальность -->
281
- <div class="form-group">
282
- <label>Национальность</label>
283
- <select id="nationality">
284
- <option value="European">Европейская</option>
285
- <option value="Slavic">Славянская</option>
286
- <option value="Asian">Азиатская</option>
287
- <option value="African">Африканская</option>
288
- <option value="Latino">Латиноамериканская</option>
289
- <option value="Middle Eastern">Ближневосточная</option>
290
- <option value="Indian">Индийская</option>
291
- <option value="Nordic">Скандинавская</option>
292
- <option value="Native American">Коренные американцы</option>
293
- <option value="Mixed race">Смешанная</option>
294
- </select>
295
- </div>
296
-
297
- <!-- Цвет волос -->
298
- <div class="form-group">
299
- <label>Цвет волос</label>
300
- <select id="hairColor">
301
- <option value="Blonde">Блонд</option>
302
- <option value="Dark Brown">Темно-каштановые</option>
303
- <option value="Black">Черные</option>
304
- <option value="Red">Рыжие</option>
305
- <option value="Grey">Седые</option>
306
- <option value="Platinum White">Платиновый блонд</option>
307
- <option value="Pink">Розовые (окрашенные)</option>
308
- <option value="Blue">Синие (окрашенные)</option>
309
- <option value="Bald">Лысый</option>
310
- </select>
311
- </div>
312
-
313
- <!-- Цвет глаз -->
314
- <div class="form-group">
315
- <label>Цвет глаз</label>
316
- <select id="eyeColor">
317
- <option value="Blue">Голубые</option>
318
- <option value="Green">Зеленые</option>
319
- <option value="Brown">Карие</option>
320
- <option value="Grey">Серые</option>
321
- <option value="Hazel">Ореховые</option>
322
- <option value="Amber">Янтарные</option>
323
- <option value="Heterochromia">Гетерохромия (разные)</option>
324
- </select>
325
- </div>
326
-
327
- <!-- Прическа -->
328
- <div class="form-group">
329
- <label>Прическа</label>
330
- <select id="hairstyle">
331
- <option value="Long straight hair">Длинные прямые</option>
332
- <option value="Short neat cut">Короткая аккуратная стрижка</option>
333
- <option value="Bob cut">Каре</option>
334
- <option value="Curly voluminous hair">Объемные кудри</option>
335
- <option value="Wavy hair">Волнистые</option>
336
- <option value="Ponytail">Хвост</option>
337
- <option value="Messy bun">Небрежный пучок</option>
338
- <option value="Bald/Shaved head">Под машинку / налысо</option>
339
- <option value="Dreadlocks">Дреды</option>
340
- <option value="Braids">Косички</option>
341
- </select>
342
- </div>
343
-
344
- <!-- Фигура -->
345
- <div class="form-group">
346
- <label>Фигура</label>
347
- <select id="bodyType">
348
- <option value="Slim fit">Стройная</option>
349
- <option value="Athletic muscular">Атлетичная/Мускулистая</option>
350
- <option value="Average body">Обычная</option>
351
- <option value="Curvy hourglass">Песочные часы (Curvy)</option>
352
- <option value="Plus-size">Плюс-сайз</option>
353
- <option value="Skinny">Очень худая</option>
354
- <option value="Broad shouldered">Широкоплечая</option>
355
- </select>
356
- </div>
357
-
358
- <!-- Стиль фото -->
359
- <div class="form-group">
360
- <label>Стиль фотографии</label>
361
- <select id="style">
362
- <option value="Professional Studio Lighting, 85mm lens">Студийный портрет (Pro)</option>
363
- <option value="Candid Street Photography, natural light">Уличная фотография (Естественная)</option>
364
- <option value="Cinematic movie scene, dramatic lighting, bokeh">Кинематографичный (как в кино)</option>
365
- <option value="Cyberpunk, neon lights, night city">Киберпанк (Неон)</option>
366
- <option value="Black and white artistic portrait">Чёрно-белое Арт</option>
367
- <option value="Vogue Fashion Editorial">Фэшн (Журнальный стиль)</option>
368
- <option value="Vintage 90s Polaroid style">Винтаж (Полароид 90-х)</option>
369
- <option value="Fantasy ethereal style">Фэнтези (Эфирный)</option>
370
- <option value="Corporate business headshot">Деловой бизнес-портрет</option>
371
- <option value="Macro photography, extreme close-up">Макро (Крупный план)</option>
372
- </select>
373
- </div>
374
-
375
- <!-- Доп пожелания -->
376
- <div class="form-group">
377
- <label>Дополнительно (одежда, локация)</label>
378
- <textarea id="additional" placeholder="Например: в красном вечернем платье, на фоне гор, идет дождь..."></textarea>
379
- </div>
380
-
381
- <button type="button" class="submit-btn" onclick="generateAndCopy()">СКОПИРОВАТЬ ПРОМПТ</button>
382
- </form>
383
  </div>
384
  </div>
385
 
386
  <script>
387
- // Открытие/Закрытие
388
  function openModal() {
389
  document.getElementById('promptModal').style.display = 'flex';
390
  }
@@ -400,7 +379,6 @@
400
  }
401
  }
402
 
403
- // Генерация
404
  async function generateAndCopy() {
405
  const gender = document.getElementById('gender').value;
406
  const age = document.getElementById('age').value;
@@ -412,13 +390,11 @@
412
  const style = document.getElementById('style').value;
413
  const additional = document.getElementById('additional').value;
414
 
415
- // Собираем промпт
416
- // Вставляем данные прямо в структуру, понятную AI
417
  const promptData = {
418
- "request_type": "Generate Photorealistic Image",
419
  "character": {
420
  "gender": gender,
421
- "age": age,
422
  "ethnicity": nationality,
423
  "features": {
424
  "hair": `${hairColor}, ${hairstyle}`,
@@ -427,15 +403,27 @@
427
  }
428
  },
429
  "style": style,
430
- "details": "8k resolution, raw photo, hyperrealistic, highly detailed texture, sharp focus",
431
- "custom_requirements": additional ? additional : "None"
432
  };
433
 
434
  const jsonString = JSON.stringify(promptData, null, 2);
435
 
436
  try {
437
- // Пытаемся использовать Clipboard API
438
- await navigator.clipboard.writeText(jsonString);
 
 
 
 
 
 
 
 
 
 
 
 
439
  // Визуальное подтверждение на кнопке
440
  const btn = document.querySelector('.submit-btn');
441
  const originalText = btn.innerText;
@@ -443,22 +431,14 @@
443
  btn.style.background = "#4CAF50";
444
 
445
  setTimeout(() => {
446
- btn.innerText = originalText;
447
- btn.style.background = "linear-gradient(135deg, #2196F3 0%, #1976D2 100%)";
448
  closeModal();
 
 
449
  }, 1000);
450
 
451
  } catch (err) {
452
- console.error('Ошибка буфера обмена:', err);
453
- // Фоллбэк метод
454
- const textArea = document.createElement("textarea");
455
- textArea.value = jsonString;
456
- document.body.appendChild(textArea);
457
- textArea.select();
458
- document.execCommand("Copy");
459
- textArea.remove();
460
- alert("Промпт скопирован!");
461
- closeModal();
462
  }
463
  }
464
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LMArena Pro Wrapper</title>
7
  <style>
8
  body, html {
9
  margin: 0;
 
15
  background-color: #f0f0f0;
16
  }
17
 
18
+ /* Контейнер для iframe */
19
+ .iframe-container {
20
+ width: 100%;
21
+ height: 100%;
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ z-index: 1;
26
+ }
27
+
28
  iframe {
29
+ width: 100%;
30
+ height: 100%;
31
  border: none;
32
  display: block;
 
33
  }
34
 
35
+ /* Плавающая кнопка */
36
  .fab-btn {
37
  position: fixed;
38
  right: 20px;
 
40
  transform: translateY(-50%);
41
  width: 60px;
42
  height: 60px;
43
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
44
  color: white;
45
  border-radius: 50%;
46
  border: none;
47
+ box-shadow: 0 4px 15px rgba(0,0,0,0.3);
48
  cursor: pointer;
49
+ z-index: 9999; /* Поверх iframe */
50
+ font-size: 28px;
51
  display: flex;
52
  align-items: center;
53
  justify-content: center;
54
+ transition: transform 0.2s, box-shadow 0.2s;
55
  }
56
 
57
  .fab-btn:hover {
58
+ transform: translateY(-50%) scale(1.1);
59
+ box-shadow: 0 6px 20px rgba(0,0,0,0.4);
60
  }
61
+
62
  .fab-btn:active {
63
  transform: translateY(-50%) scale(0.95);
64
  }
65
 
66
+ /* Модальное окно */
67
  .modal-overlay {
68
  display: none;
69
  position: fixed;
 
72
  width: 100%;
73
  height: 100%;
74
  background-color: rgba(0, 0, 0, 0.6);
75
+ backdrop-filter: blur(3px);
76
+ z-index: 10000;
77
  justify-content: center;
78
  align-items: center;
 
 
 
 
 
 
79
  }
80
 
 
81
  .modal-content {
82
+ background-color: #fff;
83
+ padding: 0;
84
  border-radius: 16px;
85
  width: 90%;
86
+ max-width: 550px;
87
+ max-height: 90vh;
88
  overflow-y: auto;
89
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
90
+ display: flex;
91
+ flex-direction: column;
92
+ animation: fadeIn 0.3s ease-out;
93
  }
94
 
95
+ @keyframes fadeIn {
96
+ from { opacity: 0; transform: translateY(20px); }
97
+ to { opacity: 1; transform: translateY(0); }
98
  }
99
 
100
  .modal-header {
101
+ padding: 20px 25px;
102
+ background-color: #f8f9fa;
103
+ border-bottom: 1px solid #e9ecef;
104
  display: flex;
105
  justify-content: space-between;
106
  align-items: center;
107
+ border-radius: 16px 16px 0 0;
 
 
 
 
 
 
108
  }
109
 
110
  .modal-header h2 {
111
  margin: 0;
112
+ font-size: 1.25rem;
113
+ color: #333;
114
  }
115
 
116
  .close-btn {
117
+ background: none;
118
  border: none;
119
+ font-size: 24px;
 
 
 
120
  cursor: pointer;
121
+ color: #666;
122
+ transition: color 0.2s;
 
 
 
123
  }
124
 
125
  .close-btn:hover {
126
+ color: #d32f2f;
127
+ }
128
+
129
+ .modal-body {
130
+ padding: 25px;
131
+ }
132
+
133
+ /* Элементы формы */
134
+ .form-row {
135
+ display: flex;
136
+ gap: 15px;
137
+ margin-bottom: 15px;
138
  }
139
 
 
140
  .form-group {
141
  margin-bottom: 15px;
142
+ flex: 1;
143
  }
144
 
145
  .form-group label {
 
150
  color: #444;
151
  }
152
 
153
+ .form-group select, .form-group textarea, .form-group input {
154
  width: 100%;
155
+ padding: 10px 12px;
156
  border: 1px solid #ddd;
157
  border-radius: 8px;
158
  font-size: 0.95rem;
159
  box-sizing: border-box;
160
+ background-color: #fff;
161
  transition: border-color 0.2s;
162
  }
163
 
164
  .form-group select:focus, .form-group textarea:focus {
165
  outline: none;
166
+ border-color: #667eea;
167
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
168
  }
169
 
170
  .form-group textarea {
171
  resize: vertical;
172
  min-height: 80px;
173
+ font-family: inherit;
174
  }
175
 
 
176
  .submit-btn {
177
  width: 100%;
178
  padding: 14px;
179
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
180
  color: white;
181
  border: none;
182
  border-radius: 8px;
183
  font-size: 1.1rem;
 
 
184
  font-weight: 600;
185
+ cursor: pointer;
186
+ transition: opacity 0.2s;
187
+ margin-top: 10px;
188
  }
189
 
190
  .submit-btn:hover {
191
+ opacity: 0.9;
 
 
 
 
 
192
  }
193
 
194
+ /* Кастомный скроллбар */
195
+ .modal-content::-webkit-scrollbar {
196
+ width: 8px;
197
+ }
198
+ .modal-content::-webkit-scrollbar-track {
199
+ background: #f1f1f1;
200
+ }
201
+ .modal-content::-webkit-scrollbar-thumb {
202
+ background: #ccc;
203
+ border-radius: 4px;
 
 
204
  }
205
  </style>
206
  </head>
207
  <body>
208
 
209
+ <div class="iframe-container">
210
+ <!--
211
+ Атрибуты sandbox и allow критически важны для работы авторизации и скриптов.
212
+ allow-popups-to-escape-sandbox позволяет открывать окна Google Auth.
213
+ -->
214
+ <iframe
215
+ src="https://lmarena.ai/ru?chat-modality=image&mode=direct"
216
+ sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-downloads allow-top-navigation-by-user-activation"
217
+ allow="clipboard-write; clipboard-read; camera; microphone; geolocation; display-capture; autoplay; fullscreen"
218
+ title="LMArena">
219
+ </iframe>
220
+ </div>
221
+
222
+ <!-- Кнопка вызова -->
223
+ <button class="fab-btn" onclick="openModal()" title="Сгенерировать Промпт">
224
+ 🤖
 
 
 
 
 
 
 
 
 
 
225
  </button>
226
 
227
  <!-- Модальное окно -->
228
  <div class="modal-overlay" id="promptModal">
229
  <div class="modal-content">
230
  <div class="modal-header">
231
+ <h2>Генератор Промпта</h2>
232
  <button class="close-btn" onclick="closeModal()">&times;</button>
233
  </div>
234
 
235
+ <div class="modal-body">
236
+ <form id="promptForm">
237
+ <div class="form-row">
238
+ <div class="form-group">
239
+ <label>Пол</label>
240
+ <select id="gender">
241
+ <option value="Male">Мужчина</option>
242
+ <option value="Female">Женщина</option>
243
+ </select>
244
+ </div>
245
+ <div class="form-group">
246
+ <label>Возраст (0-70+)</label>
247
+ <select id="age">
248
+ <option value="Newborn (0-1 year)">Младенец (0-1)</option>
249
+ <option value="Toddler (1-3 years)">Малыш (1-3)</option>
250
+ <option value="Child (4-12 years)">Ребенок (4-12)</option>
251
+ <option value="Teenager (13-19 years)">Подросток (13-19)</option>
252
+ <option value="Young Adult (20-29 years)">20-29 лет</option>
253
+ <option value="Adult (30-39 years)">30-39 лет</option>
254
+ <option value="Middle-aged (40-49 years)">40-49 лет</option>
255
+ <option value="Mature (50-59 years)">50-59 лет</option>
256
+ <option value="Elderly (60-69 years)">60-69 лет</option>
257
+ <option value="Senior (70+ years)">70+ лет</option>
258
+ </select>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="form-group">
263
+ <label>Национальность</label>
264
+ <select id="nationality">
265
+ <option value="European">Европейская</option>
266
+ <option value="Slavic">Славянская (Русская/Восточная Европа)</option>
267
+ <option value="Asian">Азиатская (Китай/Япония/Корея)</option>
268
+ <option value="African American">Афроамериканская</option>
269
+ <option value="African">Африканская</option>
270
+ <option value="Latino/Hispanic">Латиноамериканская</option>
271
+ <option value="Indian">Индийская</option>
272
+ <option value="Middle Eastern">Ближневосточная (Арабская/Персидская)</option>
273
+ <option value="Nordic">Скандинавская</option>
274
+ <option value="Native American">Коренной американец</option>
275
+ <option value="Mixed Race">Смешанная</option>
276
+ </select>
277
+ </div>
278
+
279
+ <div class="form-row">
280
+ <div class="form-group">
281
+ <label>Цвет волос</label>
282
+ <select id="hairColor">
283
+ <option value="Brown">Каштановые</option>
284
+ <option value="Blonde">Блонд</option>
285
+ <option value="Black">Черные</option>
286
+ <option value="Red">Рыжие</option>
287
+ <option value="Grey">Седые</option>
288
+ <option value="Platinum White">Платиновые</option>
289
+ <option value="Dyed Pink">Розовые</option>
290
+ <option value="Dyed Blue">Синие</option>
291
+ <option value="Bald">Лысый</option>
292
+ </select>
293
+ </div>
294
+ <div class="form-group">
295
+ <label>Цвет глаз</label>
296
+ <select id="eyeColor">
297
+ <option value="Brown">Карие</option>
298
+ <option value="Blue">Голубые</option>
299
+ <option value="Green">Зеленые</option>
300
+ <option value="Grey">Серые</option>
301
+ <option value="Hazel">Ореховые</option>
302
+ <option value="Amber">Янтарные</option>
303
+ <option value="Heterochromia">Гетерохромия (Разные)</option>
304
+ </select>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="form-row">
309
+ <div class="form-group">
310
+ <label>Прическа</label>
311
+ <select id="hairstyle">
312
+ <option value="Long straight hair">Длинные прямые</option>
313
+ <option value="Long wavy hair">Длинные волнистые</option>
314
+ <option value="Short bob cut">Короткое каре</option>
315
+ <option value="Pixie cut">Пикси (Очень короткие)</option>
316
+ <option value="Messy bun">Небрежный пучок</option>
317
+ <option value="Ponytail">Хвост</option>
318
+ <option value="Crew cut">Ежик (Муж)</option>
319
+ <option value="Undercut">Андеркат (Муж)</option>
320
+ <option value="Slicked back">Зачесанные назад</option>
321
+ <option value="Curly afro">Афро кудри</option>
322
+ <option value="Dreadlocks">Дреды</option>
323
+ </select>
324
+ </div>
325
+ <div class="form-group">
326
+ <label>Фигура</label>
327
+ <select id="bodyType">
328
+ <option value="Slim">Стройная</option>
329
+ <option value="Athletic">Спортивная/Атлетичная</option>
330
+ <option value="Average">Средняя/Обычная</option>
331
+ <option value="Muscular">Мускулистая</option>
332
+ <option value="Curvy">Пышная (Curvy)</option>
333
+ <option value="Plus Size">Полная (Plus Size)</option>
334
+ <option value="Skinny">Худощавая</option>
335
+ </select>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="form-group">
340
+ <label>Стиль фотографии</label>
341
+ <select id="style">
342
+ <option value="Professional Studio Portrait">Студийный портрет (Проф)</option>
343
+ <option value="Candid Street Photography">Уличное фото (Естественное)</option>
344
+ <option value="Cinematic Lighting">Кинематографичный свет</option>
345
+ <option value="Creative Artistic High Fashion">Творческий Арт / Фэшн</option>
346
+ <option value="Cyberpunk Neon">Киберпанк / Неон</option>
347
+ <option value="Vintage Film Grain 90s">Винтаж / Пленка 90-х</option>
348
+ <option value="Black and White Noir">Чёрно-белый Нуар</option>
349
+ <option value="Business Corporate Headshot">Деловой портрет</option>
350
+ <option value="Fantasy Ethereal">Фэнтези / Сказочный</option>
351
+ <option value="Polaroid Snapshot">Полароид</option>
352
+ </select>
353
+ </div>
354
+
355
+ <div class="form-group">
356
+ <label>Дополнительные пожелания</label>
357
+ <textarea id="additional" placeholder="Одежда, место действия, эмоции (напр: в красном платье, улыбается, на фоне гор)"></textarea>
358
+ </div>
359
+
360
+ <button type="button" class="submit-btn" onclick="generateAndCopy()">СКОПИРОВАТЬ JSON</button>
361
+ </form>
362
+ </div>
 
363
  </div>
364
  </div>
365
 
366
  <script>
 
367
  function openModal() {
368
  document.getElementById('promptModal').style.display = 'flex';
369
  }
 
379
  }
380
  }
381
 
 
382
  async function generateAndCopy() {
383
  const gender = document.getElementById('gender').value;
384
  const age = document.getElementById('age').value;
 
390
  const style = document.getElementById('style').value;
391
  const additional = document.getElementById('additional').value;
392
 
393
+ // Формируем чистый промпт на основе JSON
 
394
  const promptData = {
 
395
  "character": {
396
  "gender": gender,
397
+ "age_group": age,
398
  "ethnicity": nationality,
399
  "features": {
400
  "hair": `${hairColor}, ${hairstyle}`,
 
403
  }
404
  },
405
  "style": style,
406
+ "details": additional ? additional : "No specific details provided",
407
+ "quality": "8k, photorealistic, masterpiece, high details"
408
  };
409
 
410
  const jsonString = JSON.stringify(promptData, null, 2);
411
 
412
  try {
413
+ if (navigator.clipboard && navigator.clipboard.writeText) {
414
+ await navigator.clipboard.writeText(jsonString);
415
+ } else {
416
+ // Fallback для некоторых версий WebView
417
+ const textarea = document.createElement("textarea");
418
+ textarea.value = jsonString;
419
+ textarea.style.position = "fixed";
420
+ document.body.appendChild(textarea);
421
+ textarea.focus();
422
+ textarea.select();
423
+ document.execCommand("copy");
424
+ document.body.removeChild(textarea);
425
+ }
426
+
427
  // Визуальное подтверждение на кнопке
428
  const btn = document.querySelector('.submit-btn');
429
  const originalText = btn.innerText;
 
431
  btn.style.background = "#4CAF50";
432
 
433
  setTimeout(() => {
 
 
434
  closeModal();
435
+ btn.innerText = originalText;
436
+ btn.style.background = "";
437
  }, 1000);
438
 
439
  } catch (err) {
440
+ console.error('Ошибка:', err);
441
+ alert("Не удалось скопировать. Проверьте разрешения браузера.");
 
 
 
 
 
 
 
 
442
  }
443
  }
444
  </script>