Hugging Face's logo

Spaces:
Aleksmorshen
/
Testreact
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +194 -119
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 + Prompt Generator</title>
7
  <style>
8
  body, html {
9
  margin: 0;
@@ -12,14 +12,19 @@
12
  width: 100%;
13
  overflow: hidden;
14
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
15
  }
16
 
17
- /* Стиль для WebView (iframe) */
 
 
 
18
  iframe {
19
- width: 100%;
20
- height: 100%;
21
  border: none;
22
  display: block;
 
23
  }
24
 
25
  /* Плавающая кнопка справа */
@@ -30,23 +35,27 @@
30
  transform: translateY(-50%);
31
  width: 60px;
32
  height: 60px;
33
- background-color: #4CAF50;
34
  color: white;
35
  border-radius: 50%;
36
  border: none;
37
- box-shadow: 0 4px 8px rgba(0,0,0,0.3);
38
  cursor: pointer;
39
  z-index: 1000;
40
  font-size: 24px;
41
  display: flex;
42
  align-items: center;
43
  justify-content: center;
44
- transition: transform 0.2s, background-color 0.2s;
45
  }
46
 
47
  .fab-btn:hover {
48
- transform: translateY(-50%) scale(1.1);
49
- background-color: #45a049;
 
 
 
 
50
  }
51
 
52
  /* Модальное окно (фон) */
@@ -57,23 +66,36 @@
57
  left: 0;
58
  width: 100%;
59
  height: 100%;
60
- background-color: rgba(0, 0, 0, 0.7);
 
61
  z-index: 2000;
62
  justify-content: center;
63
  align-items: center;
 
 
 
 
 
 
64
  }
65
 
66
  /* Контент модального окна */
67
  .modal-content {
68
  background-color: white;
69
  padding: 25px;
70
- border-radius: 12px;
71
  width: 90%;
72
  max-width: 500px;
73
- max-height: 90vh;
74
  overflow-y: auto;
75
- box-shadow: 0 5px 15px rgba(0,0,0,0.3);
76
  position: relative;
 
 
 
 
 
 
77
  }
78
 
79
  .modal-header {
@@ -81,26 +103,38 @@
81
  justify-content: space-between;
82
  align-items: center;
83
  margin-bottom: 20px;
84
- border-bottom: 1px solid #eee;
85
- padding-bottom: 10px;
 
 
 
 
86
  }
87
 
88
  .modal-header h2 {
89
  margin: 0;
90
- font-size: 1.2rem;
91
- color: #333;
92
  }
93
 
94
  .close-btn {
95
- background: none;
96
  border: none;
97
- font-size: 28px;
 
 
 
98
  cursor: pointer;
99
- color: #aaa;
 
 
 
 
100
  }
101
 
102
  .close-btn:hover {
103
- color: #333;
 
104
  }
105
 
106
  /* Форма */
@@ -110,73 +144,110 @@
110
 
111
  .form-group label {
112
  display: block;
113
- margin-bottom: 5px;
114
  font-weight: 600;
115
  font-size: 0.9rem;
116
- color: #555;
117
  }
118
 
119
  .form-group select, .form-group textarea {
120
  width: 100%;
121
- padding: 10px;
122
- border: 1px solid #ccc;
123
- border-radius: 6px;
124
- font-size: 1rem;
125
- box-sizing: border-box; /* Чтобы padding не ломал ширину */
 
 
 
 
 
 
 
 
126
  }
127
 
128
  .form-group textarea {
129
  resize: vertical;
130
- min-height: 60px;
131
  }
132
 
133
  /* Кнопка "Готово" */
134
  .submit-btn {
135
  width: 100%;
136
- padding: 12px;
137
- background-color: #2196F3;
138
  color: white;
139
  border: none;
140
- border-radius: 6px;
141
- font-size: 1rem;
142
  cursor: pointer;
143
- margin-top: 10px;
144
- font-weight: bold;
 
 
 
145
  }
146
 
147
  .submit-btn:hover {
148
- background-color: #0b7dda;
 
 
 
 
 
149
  }
150
 
151
- /* Адаптив для маленьких экранов */
152
  @media (max-width: 600px) {
153
  .modal-content {
154
  width: 95%;
155
- padding: 15px;
 
156
  }
157
  .fab-btn {
158
  width: 50px;
159
  height: 50px;
160
- font-size: 20px;
161
  }
162
  }
163
  </style>
164
  </head>
165
  <body>
166
 
167
- <!-- Webview Сайта -->
168
- <iframe src="https://lmarena.ai/ru?chat-modality=image&mode=direct" allow="clipboard-write"></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
 
170
  <!-- Кнопка вызова генератора -->
171
  <button class="fab-btn" onclick="openModal()" title="Генератор промптов">
172
- 🎨
173
  </button>
174
 
175
  <!-- Модальное окно -->
176
  <div class="modal-overlay" id="promptModal">
177
  <div class="modal-content">
178
  <div class="modal-header">
179
- <h2>Параметры Модели</h2>
180
  <button class="close-btn" onclick="closeModal()">&times;</button>
181
  </div>
182
 
@@ -194,15 +265,15 @@
194
  <div class="form-group">
195
  <label>Возраст</label>
196
  <select id="age">
197
- <option value="Baby (0-2 years)">Младенец (0-2)</option>
198
- <option value="Child (3-12 years)">Ребенок (3-12)</option>
 
199
  <option value="Teenager (13-19 years)">Подросток (13-19)</option>
200
  <option value="Young Adult (20-29 years)">Молодой (20-29)</option>
201
  <option value="Adult (30-39 years)">Взрослый (30-39)</option>
202
- <option value="Middle-aged (40-49 years)">Средних лет (40-49)</option>
203
- <option value="Senior (50-59 years)">Пожилой (50-59)</option>
204
- <option value="Elderly (60-69 years)">Старый (60-69)</option>
205
- <option value="Very Old (70+ years)">Глубокая старость (70+)</option>
206
  </select>
207
  </div>
208
 
@@ -210,14 +281,15 @@
210
  <div class="form-group">
211
  <label>Национальность</label>
212
  <select id="nationality">
213
- <option value="European/Caucasian">Европейская</option>
214
- <option value="African/Black">Африканская</option>
215
  <option value="Asian">Азиатская</option>
216
- <option value="Latino/Hispanic">Латиноамериканская</option>
217
- <option value="Indian">Индийская</option>
218
  <option value="Middle Eastern">Ближневосточная</option>
219
- <option value="Slavic">Славянская</option>
220
  <option value="Nordic">Скандинавская</option>
 
221
  <option value="Mixed race">Смешанная</option>
222
  </select>
223
  </div>
@@ -227,13 +299,13 @@
227
  <label>Цвет волос</label>
228
  <select id="hairColor">
229
  <option value="Blonde">Блонд</option>
230
- <option value="Brunette">Брюнет</option>
231
  <option value="Black">Черные</option>
232
  <option value="Red">Рыжие</option>
233
  <option value="Grey">Седые</option>
234
- <option value="White">Белые</option>
235
- <option value="Dyed Blue">Крашеные (Синий)</option>
236
- <option value="Dyed Pink">Крашеные (Розовый)</option>
237
  <option value="Bald">Лысый</option>
238
  </select>
239
  </div>
@@ -245,9 +317,10 @@
245
  <option value="Blue">Голубые</option>
246
  <option value="Green">Зеленые</option>
247
  <option value="Brown">Карие</option>
248
- <option value="Hazel">Ореховые</option>
249
  <option value="Grey">Серые</option>
250
- <option value="Heterochromia">Разные глаза (Гетерохромия)</option>
 
 
251
  </select>
252
  </div>
253
 
@@ -255,16 +328,16 @@
255
  <div class="form-group">
256
  <label>Прическа</label>
257
  <select id="hairstyle">
258
- <option value="Long straight">Длинные прямые</option>
259
- <option value="Short cut">Короткая стрижка</option>
260
  <option value="Bob cut">Каре</option>
261
- <option value="Curly">Кудрявые</option>
262
- <option value="Wavy">Волнистые</option>
263
  <option value="Ponytail">Хвост</option>
264
- <option value="Bun">Пучок</option>
265
- <option value="Buzz cut">Ежик (под машинку)</option>
266
  <option value="Dreadlocks">Дреды</option>
267
- <option value="Messy">Растрепанные</option>
268
  </select>
269
  </div>
270
 
@@ -272,13 +345,13 @@
272
  <div class="form-group">
273
  <label>Фигура</label>
274
  <select id="bodyType">
275
- <option value="Slim">Стройная/Худая</option>
276
- <option value="Athletic">Атлетичная/Спортивная</option>
277
- <option value="Muscular">Мускулистая</option>
278
- <option value="Curvy">С формами (Curvy)</option>
279
- <option value="Average">Обычная</option>
280
  <option value="Plus-size">Плюс-сайз</option>
281
  <option value="Skinny">Очень худая</option>
 
282
  </select>
283
  </div>
284
 
@@ -286,32 +359,32 @@
286
  <div class="form-group">
287
  <label>Стиль фотографии</label>
288
  <select id="style">
289
- <option value="Professional Studio Portrait, high key lighting">Студийный портрет (проф)</option>
290
- <option value="Creative Artistic, colorful lighting">Творческий/Арт</option>
291
- <option value="Cinematic, movie still, dramatic lighting">Кинематографичный</option>
292
- <option value="Street Photography, natural light">Уличная фотография</option>
293
- <option value="Cyberpunk, neon lights">Киберпанк (Неон)</option>
294
- <option value="Black and White, high contrast">Чёрно-белое</option>
295
- <option value="Fashion Editorial">Фэшн (Журнальный)</option>
296
- <option value="Vintage Polaroid">Винтаж (Полароид)</option>
297
- <option value="Fantasy, ethereal">Фэнтези</option>
298
- <option value="Corporate Headshot">Деловой портрет</option>
299
  </select>
300
  </div>
301
 
302
  <!-- Доп пожелания -->
303
  <div class="form-group">
304
- <label>Дополнительные пожелания (напр. одежда, фон)</label>
305
- <textarea id="additional" placeholder="Например: в деловом костюме, на фоне ночного города..."></textarea>
306
  </div>
307
 
308
- <button type="button" class="submit-btn" onclick="generateAndCopy()">ГОТОВО</button>
309
  </form>
310
  </div>
311
  </div>
312
 
313
  <script>
314
- // Функции открытия и закрытия модального окна
315
  function openModal() {
316
  document.getElementById('promptModal').style.display = 'flex';
317
  }
@@ -320,7 +393,6 @@
320
  document.getElementById('promptModal').style.display = 'none';
321
  }
322
 
323
- // Закрытие по клику вне окна
324
  window.onclick = function(event) {
325
  const modal = document.getElementById('promptModal');
326
  if (event.target == modal) {
@@ -328,9 +400,8 @@
328
  }
329
  }
330
 
331
- // Основная логика генерации
332
  async function generateAndCopy() {
333
- // Сбор данных из формы
334
  const gender = document.getElementById('gender').value;
335
  const age = document.getElementById('age').value;
336
  const nationality = document.getElementById('nationality').value;
@@ -339,50 +410,54 @@
339
  const hairstyle = document.getElementById('hairstyle').value;
340
  const bodyType = document.getElementById('bodyType').value;
341
  const style = document.getElementById('style').value;
342
- // Перевод пользовательского ввода (упрощенный, так как ввод на русском, но промпт нужен на английском)
343
- // В идеале здесь нужен API переводчик, но мы просто добавим текст как есть,
344
- // так как современные модели понимают смешанный контекст или транслитерацию.
345
- // Но лучше всего пометить это как "custom_notes".
346
  const additional = document.getElementById('additional').value;
347
 
348
- // Формирование JSON объекта
349
- const promptObject = {
350
- "photo_request": {
351
- "subject": {
352
- "gender": gender,
353
- "age_category": age,
354
- "ethnicity": nationality,
355
- "appearance": {
356
- "hair_color": hairColor,
357
- "eye_color": eyeColor,
358
- "hairstyle": hairstyle,
359
- "body_type": bodyType
360
- }
361
- },
362
- "photography_style": style,
363
- "technical_settings": "8k resolution, photorealistic, highly detailed, professional photography, depth of field",
364
- "additional_notes": additional ? additional : "None"
365
- }
366
  };
367
 
368
- // Преобразование в строку
369
- const jsonString = JSON.stringify(promptObject, null, 2);
370
 
371
- // Копирование в буфер обмена
372
  try {
 
373
  await navigator.clipboard.writeText(jsonString);
374
- alert("JSON промпт скопирован в буфер обмена!");
375
- closeModal();
 
 
 
 
 
 
 
 
 
 
376
  } catch (err) {
377
- console.error('Ошибка копирования: ', err);
378
- // Фоллбэк для старых браузеров или если нет https
379
  const textArea = document.createElement("textarea");
380
  textArea.value = jsonString;
381
  document.body.appendChild(textArea);
382
  textArea.select();
383
  document.execCommand("Copy");
384
  textArea.remove();
385
- alert("JSON промпт скопирован в буфер обмена!");
386
  closeModal();
387
  }
388
  }
 
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;
 
12
  width: 100%;
13
  overflow: hidden;
14
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
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
  /* Плавающая кнопка справа */
 
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
  /* Модальное окно (фон) */
 
66
  left: 0;
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 {
 
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
  /* Форма */
 
144
 
145
  .form-group label {
146
  display: block;
147
+ margin-bottom: 6px;
148
  font-weight: 600;
149
  font-size: 0.9rem;
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
 
 
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
 
 
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>
 
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>
 
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
 
 
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
 
 
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
 
 
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
  }
 
393
  document.getElementById('promptModal').style.display = 'none';
394
  }
395
 
 
396
  window.onclick = function(event) {
397
  const modal = document.getElementById('promptModal');
398
  if (event.target == modal) {
 
400
  }
401
  }
402
 
403
+ // Генерация
404
  async function generateAndCopy() {
 
405
  const gender = document.getElementById('gender').value;
406
  const age = document.getElementById('age').value;
407
  const nationality = document.getElementById('nationality').value;
 
410
  const hairstyle = document.getElementById('hairstyle').value;
411
  const bodyType = document.getElementById('bodyType').value;
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}`,
425
+ "eyes": eyeColor,
426
+ "body": bodyType
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;
442
+ btn.innerText = "СКОПИРОВАНО! ✅";
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
  }