Hugging Face's logo

Spaces:
Aleksmorshen
/
Testreact
Running

App Files Community
1
Aleksmorshen commited on
Commit
d86b75d
·
verified ·
1 Parent(s): 2c0f4b6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +94 -32
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>Synkris Look 6</title>
7
  <style>
8
  :root {
9
  --bg: #000000;
@@ -232,6 +232,7 @@ select option {
232
 
233
  <!-- === MODEL PHOTOGRAPHY MODE === -->
234
  <div id="modelMode" class="form-mode active">
 
235
  <div class="form-group">
236
  <label for="gender">Пол</label>
237
  <select id="gender" onchange="autoAdjustDefaults()">
@@ -248,6 +249,7 @@ select option {
248
  <option value="30-40 years old">30-40 лет</option>
249
  </select>
250
  </div>
 
251
  <div class="form-group">
252
  <label for="nationality">Внешность/Этнос</label>
253
  <select id="nationality">
@@ -267,6 +269,7 @@ select option {
267
  <option value="Skinny model look">Модельная худоба</option>
268
  </select>
269
  </div>
 
270
  <div class="form-group">
271
  <label for="hairColor">Цвет волос</label>
272
  <select id="hairColor">
@@ -286,6 +289,7 @@ select option {
286
  <option value="Fade cut">Фейд (Мужской)</option>
287
  </select>
288
  </div>
 
289
  <div class="form-group">
290
  <label for="emotion">Эмоция/Выражение лица</label>
291
  <select id="emotion">
@@ -296,17 +300,39 @@ select option {
296
  <option value="Mysterious gaze">Загадочный взгляд</option>
297
  </select>
298
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
299
  <div class="form-group">
300
  <label for="light">Свет</label>
301
  <select id="light">
302
- <option value="volumetric lighting">Объемный студийный</option>
303
  <option value="cinematic lighting">Кинематографичный</option>
304
  <option value="natural morning light">Естественный утренний</option>
305
  <option value="dramatic side light">Драматичный боковой</option>
306
  <option value="neon lights">Неоновый</option>
307
  </select>
308
  </div>
309
- <div class="form-group full-width">
 
310
  <label for="style">Эстетика</label>
311
  <select id="style">
312
  <option value="Raw Candid Photography">Живое фото (Raw)</option>
@@ -317,9 +343,20 @@ select option {
317
  <option value="Vintage Analog Film">Пленка (Vintage)</option>
318
  </select>
319
  </div>
 
 
 
 
 
 
 
 
 
 
 
320
  <div class="form-group full-width">
321
- <label for="model_details">Детали (Одежда, Действие, Локация)</label>
322
- <textarea id="model_details" placeholder="Например: в черном кожаном плаще, идет по дождливой улице Токио, смотрит в камеру"></textarea>
323
  </div>
324
  </div>
325
 
@@ -327,7 +364,7 @@ select option {
327
  <div id="objectMode" class="form-mode">
328
  <div class="form-group full-width">
329
  <label for="object_name">Название/Описание предмета</label>
330
- <input type="text" id="object_name" placeholder="Например: флакон духов, кроссовки, часы">
331
  </div>
332
  <div class="form-group">
333
  <label for="object_style">Стилистика съемки</label>
@@ -338,6 +375,25 @@ select option {
338
  <option value="Levitation shot">Левитация (в воздухе)</option>
339
  <option value="Creative flat lay">Креативная раскладка (Flat lay)</option>
340
  </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
341
  </div>
342
  <div class="form-group">
343
  <label for="object_background">Тип фона</label>
@@ -347,12 +403,12 @@ select option {
347
  <option value="on a marble surface">Мрамор</option>
348
  <option value="on a concrete texture">Бетон</option>
349
  <option value="on a silk/linen fabric">Ткань (шелк/лен)</option>
350
- <option value="on a natural surface (moss, sand, water)">Природный (мох, песок, вода)</option>
351
  </select>
352
  </div>
353
  <div class="form-group full-width">
354
- <label for="object_details">Дополнительные детали</label>
355
- <textarea id="object_details" placeholder="Например: капли воды на флаконе, рядом лежат кофейные зерна"></textarea>
356
  </div>
357
  <div class="form-group full-width">
358
  <label class="checkbox-label">Креативность</label>
@@ -410,26 +466,36 @@ async function processAndOpen() {
410
  const originalText = btn.innerHTML;
411
  let fullPrompt = '';
412
 
 
 
 
413
  if (currentMode === 'model') {
414
- const gender = document.getElementById('gender').value;
 
415
  const age = document.getElementById('age').value;
416
  const nationality = document.getElementById('nationality').value;
 
417
  const bodyType = document.getElementById('bodyType').value;
418
  const hairColor = document.getElementById('hairColor').value;
419
  const hairstyle = document.getElementById('hairstyle').value;
420
  const emotion = document.getElementById('emotion').value;
421
- const light = document.getElementById('light').value;
422
- const style = document.getElementById('style').value;
423
  const details = document.getElementById('model_details').value || "in a casual stylish outfit, standing confidently";
424
-
425
- fullPrompt = `Full body shot, wide angle view, visible shoes and legs. A photorealistic ${style} of a ${age} ${nationality} ${gender}.
426
- Appearance: ${bodyType} physique, ${hairColor} ${hairstyle}, ${emotion}, realistic skin texture with pores and natural imperfections.
427
- Context: ${details}.
428
- Technical: 8k resolution, raw photo, unedited look, fujifilm xt4, sharp focus, ${light}, hyper-detailed, alive, non-artificial, masterpiece.`;
 
 
 
 
429
 
430
  } else { // Object mode
431
  const objectName = document.getElementById('object_name').value || "a product";
432
  const objectStyle = document.getElementById('object_style').value;
 
 
433
  const isCreative = document.getElementById('creative_mode').checked;
434
  const objectDetails = document.getElementById('object_details').value || "clean and elegant";
435
 
@@ -440,26 +506,21 @@ Technical: 8k resolution, raw photo, unedited look, fujifilm xt4, sharp focus, $
440
  background = document.getElementById('object_background').value;
441
  }
442
 
443
- fullPrompt = `Professional product photography, ${objectStyle}.
444
- Subject: A hyper-detailed shot of ${objectName}.
445
- Context: ${background}. With additional details: ${objectDetails}.
446
- Technical: 8k resolution, commercial studio quality, sharp focus, perfect lighting, ultra-realistic, masterpiece.`;
 
447
  }
448
 
449
-
450
- const data = {
451
- prompt: fullPrompt.replace(/\s+/g, ' ').trim(),
452
- negative_prompt: "cropped, watermark, text, 3d render, cartoon, anime, plastic look, doll, artificial, blurry, distorted, malformed, ugly",
453
- aspect_ratio: "9:16"
454
- };
455
-
456
- const jsonString = JSON.stringify(data, null, 2);
457
 
458
  try {
459
- await navigator.clipboard.writeText(jsonString);
460
  btn.style.backgroundColor = "#fff";
461
  btn.style.color = "#000";
462
- btn.innerHTML = "SYSTEM READY. LAUNCHING... 🚀";
463
 
464
  setTimeout(() => {
465
  window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank');
@@ -471,7 +532,8 @@ Technical: 8k resolution, commercial studio quality, sharp focus, perfect lighti
471
  }, 800);
472
  } catch (err) {
473
  console.error('Failed to copy: ', err);
474
- alert("Не удалось скопировать. Пожалуйста, скопируйте вручную.");
 
475
  }
476
  }
477
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Synkris Look 7</title>
7
  <style>
8
  :root {
9
  --bg: #000000;
 
232
 
233
  <!-- === MODEL PHOTOGRAPHY MODE === -->
234
  <div id="modelMode" class="form-mode active">
235
+ <!-- Row 1 -->
236
  <div class="form-group">
237
  <label for="gender">Пол</label>
238
  <select id="gender" onchange="autoAdjustDefaults()">
 
249
  <option value="30-40 years old">30-40 лет</option>
250
  </select>
251
  </div>
252
+ <!-- Row 2 -->
253
  <div class="form-group">
254
  <label for="nationality">Внешность/Этнос</label>
255
  <select id="nationality">
 
269
  <option value="Skinny model look">Модельная худоба</option>
270
  </select>
271
  </div>
272
+ <!-- Row 3 -->
273
  <div class="form-group">
274
  <label for="hairColor">Цвет волос</label>
275
  <select id="hairColor">
 
289
  <option value="Fade cut">Фейд (Мужской)</option>
290
  </select>
291
  </div>
292
+ <!-- Row 4 -->
293
  <div class="form-group">
294
  <label for="emotion">Эмоция/Выражение лица</label>
295
  <select id="emotion">
 
300
  <option value="Mysterious gaze">Загадочный взгляд</option>
301
  </select>
302
  </div>
303
+ <div class="form-group">
304
+ <label for="pose">Поза</label>
305
+ <select id="pose">
306
+ <option value="standing confidently">Стоит уверенно</option>
307
+ <option value="walking towards camera">Идет на камеру</option>
308
+ <option value="sitting relaxed">Сидит расслабленно</option>
309
+ <option value="leaning against a wall">Оперевшись о стену</option>
310
+ <option value="dynamic action pose">Динамичная поза</option>
311
+ </select>
312
+ </div>
313
+ <!-- NEW ROW 5 - COMPOSITION -->
314
+ <div class="form-group">
315
+ <label for="shotType">Ракурс/План</label>
316
+ <select id="shotType">
317
+ <option value="Full body shot">В полный рост</option>
318
+ <option value="Medium shot, waist up">По пояс</option>
319
+ <option value="Cowboy shot, mid-thigh up">"Ковбойский" план</option>
320
+ <option value="Portrait shot">Портрет</option>
321
+ <option value="Close-up">Крупный план</option>
322
+ </select>
323
+ </div>
324
  <div class="form-group">
325
  <label for="light">Свет</label>
326
  <select id="light">
327
+ <option value="volumetric studio lighting">Объемный студийный</option>
328
  <option value="cinematic lighting">Кинематографичный</option>
329
  <option value="natural morning light">Естественный утренний</option>
330
  <option value="dramatic side light">Драматичный боковой</option>
331
  <option value="neon lights">Неоновый</option>
332
  </select>
333
  </div>
334
+ <!-- NEW ROW 6 - TECHNICAL STYLE -->
335
+ <div class="form-group">
336
  <label for="style">Эстетика</label>
337
  <select id="style">
338
  <option value="Raw Candid Photography">Живое фото (Raw)</option>
 
343
  <option value="Vintage Analog Film">Пленка (Vintage)</option>
344
  </select>
345
  </div>
346
+ <div class="form-group">
347
+ <label for="camera">Камера/Объектив</label>
348
+ <select id="camera">
349
+ <option value="Fujifilm XT4, 56mm F1.2 lens">Fuji 56mm (Портрет)</option>
350
+ <option value="Sony A7III, 35mm F1.4 lens">Sony 35mm (Универсал)</option>
351
+ <option value="Canon EOS R5, 85mm F1.2 lens">Canon 85mm (Боке)</option>
352
+ <option value="Leica M11, Summilux 50mm">Leica 50mm (Стрит)</option>
353
+ <option value="shot on 35mm film, Kodak Portra 400">Пленка Kodak Portra</option>
354
+ </select>
355
+ </div>
356
+
357
  <div class="form-group full-width">
358
+ <label for="model_details">Сцена (Одежда, Действие, Локация)</label>
359
+ <textarea id="model_details" placeholder="Пример: в черном кожаном плаще и грубых ботинках, идет по дождливой улице ночного Токио, смотрит в камеру"></textarea>
360
  </div>
361
  </div>
362
 
 
364
  <div id="objectMode" class="form-mode">
365
  <div class="form-group full-width">
366
  <label for="object_name">Название/Описание предмета</label>
367
+ <input type="text" id="object_name" placeholder="Например: флакон духов 'Noir', кроссовки 'CyberRun', часы 'Classic Timepiece'">
368
  </div>
369
  <div class="form-group">
370
  <label for="object_style">Стилистика съемки</label>
 
375
  <option value="Levitation shot">Левитация (в воздухе)</option>
376
  <option value="Creative flat lay">Креативная раскладка (Flat lay)</option>
377
  </select>
378
+ </div>
379
+ <div class="form-group">
380
+ <label for="object_lighting">Освещение</label>
381
+ <select id="object_lighting">
382
+ <option value="soft, diffused studio light">Мягкий студийный свет</option>
383
+ <option value="hard direct sunlight with dramatic shadows">Жесткий солнечный с тенями</option>
384
+ <option value="backlit with a beautiful glow">Контровой свет (с сиянием)</option>
385
+ <option value="moody, low-key lighting">Мрачное, низкий ключ</option>
386
+ <option value="vibrant neon and colored gels">Цветной/неоновый свет</option>
387
+ </select>
388
+ </div>
389
+ <div class="form-group">
390
+ <label for="object_composition">Композиция</label>
391
+ <select id="object_composition">
392
+ <option value="centered composition">Центральная</option>
393
+ <option value="dynamic diagonal angle">Динамичная диагональная</option>
394
+ <option value="rule of thirds">По правилу третей</option>
395
+ <option value="symmetrical composition">Симметричная</option>
396
+ </select>
397
  </div>
398
  <div class="form-group">
399
  <label for="object_background">Тип фона</label>
 
403
  <option value="on a marble surface">Мрамор</option>
404
  <option value="on a concrete texture">Бетон</option>
405
  <option value="on a silk/linen fabric">Ткань (шелк/лен)</option>
406
+ <option value="in a natural environment (moss, sand, water)">Природное окружение (мох, песок)</option>
407
  </select>
408
  </div>
409
  <div class="form-group full-width">
410
+ <label for="object_details">Дополнительные детали окружения</label>
411
+ <textarea id="object_details" placeholder="Пример: капли воды на флаконе, рядом лежат кофейные зерна и палочка корицы"></textarea>
412
  </div>
413
  <div class="form-group full-width">
414
  <label class="checkbox-label">Креативность</label>
 
466
  const originalText = btn.innerHTML;
467
  let fullPrompt = '';
468
 
469
+ // Этот негативный промпт можно вставлять в соответствующее поле на сайте, если оно есть
470
+ const negative_prompt = "cropped, watermark, text, 3d render, cartoon, anime, plastic look, doll, artificial, blurry, distorted, malformed, ugly, disfigured, amputation, ugly, gross, disgusting";
471
+
472
  if (currentMode === 'model') {
473
+ const style = document.getElementById('style').value;
474
+ const shotType = document.getElementById('shotType').value;
475
  const age = document.getElementById('age').value;
476
  const nationality = document.getElementById('nationality').value;
477
+ const gender = document.getElementById('gender').value;
478
  const bodyType = document.getElementById('bodyType').value;
479
  const hairColor = document.getElementById('hairColor').value;
480
  const hairstyle = document.getElementById('hairstyle').value;
481
  const emotion = document.getElementById('emotion').value;
482
+ const pose = document.getElementById('pose').value;
 
483
  const details = document.getElementById('model_details').value || "in a casual stylish outfit, standing confidently";
484
+ const light = document.getElementById('light').value;
485
+ const camera = document.getElementById('camera').value;
486
+
487
+ fullPrompt = `style:: ${style}.
488
+ composition:: ${shotType}.
489
+ subject:: A photorealistic portrait of a ${age} ${nationality} ${gender}.
490
+ model_details:: physique is ${bodyType}, ${hairColor} ${hairstyle}, face expression is ${emotion}, pose is ${pose}.
491
+ scene:: ${details}.
492
+ technical:: professional photography, ${light}, shot on ${camera}, 8k, sharp focus, hyper-detailed, realistic skin texture with pores, masterpiece.`;
493
 
494
  } else { // Object mode
495
  const objectName = document.getElementById('object_name').value || "a product";
496
  const objectStyle = document.getElementById('object_style').value;
497
+ const objectLighting = document.getElementById('object_lighting').value;
498
+ const objectComposition = document.getElementById('object_composition').value;
499
  const isCreative = document.getElementById('creative_mode').checked;
500
  const objectDetails = document.getElementById('object_details').value || "clean and elegant";
501
 
 
506
  background = document.getElementById('object_background').value;
507
  }
508
 
509
+ fullPrompt = `style:: Professional product photography, ${objectStyle}.
510
+ subject:: A hyper-detailed shot of ${objectName}.
511
+ scene:: Placed ${background}. The scene includes additional elements: ${objectDetails}.
512
+ composition:: ${objectComposition}.
513
+ technical:: commercial studio quality, ${objectLighting}, 8k resolution, sharp focus, ultra-realistic, masterpiece.`;
514
  }
515
 
516
+ // Убираем лишние пробелы и переносы строк, делая промпт чище
517
+ const cleanPrompt = fullPrompt.replace(/\s+/g, ' ').trim();
 
 
 
 
 
 
518
 
519
  try {
520
+ await navigator.clipboard.writeText(cleanPrompt);
521
  btn.style.backgroundColor = "#fff";
522
  btn.style.color = "#000";
523
+ btn.innerHTML = "ПРОМПТ СКОПИРОВАН. ЗАПУСК... 🚀";
524
 
525
  setTimeout(() => {
526
  window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank');
 
532
  }, 800);
533
  } catch (err) {
534
  console.error('Failed to copy: ', err);
535
+ alert("Не удалось скопировать. Промпт в консоли разработчика.");
536
+ console.log("Ваш промпт:\n", cleanPrompt);
537
  }
538
  }
539