Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 22 days ago

Commit

2c0f4b6

verified ·

1 Parent(s): 2e145cf

Update index.html

Browse files

Files changed (1) hide show

index.html +320 -219

index.html CHANGED Viewed

@@ -1,27 +1,21 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Synkris Look 5</title>
 <style>
 :root {
---bg: #000000;
---card-bg: #0a0a0a;
---primary: #ccff00;
---primary-hover: #b3e600;
---text: #ffffff;
---text-secondary: #a1a1a1;
---border: #333333;
---input-bg: #111111;
 }
-code
-Code
-download
-content_copy
-expand_less
 body {
     font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     background-color: var(--bg);
@@ -30,14 +24,14 @@ body {
     padding: 20px;
     display: flex;
     justify-content: center;
-    align-items: center;
     min-height: 100vh;
 }
 .container {
     background-color: var(--card-bg);
     width: 100%;
-    max-width: 600px;
     padding: 35px;
     border-radius: 20px;
     border: 1px solid #222;
@@ -63,6 +57,36 @@ p.subtitle {
     letter-spacing: 0.5px;
 }
 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -78,7 +102,7 @@ p.subtitle {
     flex-direction: column;
 }
-label {
     font-weight: 500;
     margin-bottom: 8px;
     font-size: 0.85rem;
@@ -87,7 +111,7 @@ label {
     letter-spacing: 0.5px;
 }
-select, textarea, input {
     padding: 12px 14px;
     border: 1px solid var(--border);
     border-radius: 8px;
@@ -96,9 +120,11 @@ select, textarea, input {
     color: var(--text);
     transition: all 0.3s ease;
     outline: none;
 }
-select:focus, textarea:focus {
     border-color: var(--primary);
     box-shadow: 0 0 10px rgba(204, 255, 0, 0.2);
 }
@@ -148,7 +174,29 @@ select option {
     color: #fff;
 }
-@media (max-width: 500px) {
     .form-grid {
         grid-template-columns: 1fr;
     }
@@ -158,227 +206,280 @@ select option {
     .container {
         padding: 20px;
     }
 }
 </style>
 </head>
 <body>
 <div class="container">
-<h1>Synkris Look 5</h1>
-<p class="subtitle">PROMPT GENERATOR & LAUNCHER</p>
-code
-Code
-download
-content_copy
-expand_less
-<form id="promptForm">
-    <div class="form-grid">
-        <div class="form-group">
-            <label for="gender">Пол</label>
-            <select id="gender" onchange="autoAdjustDefaults()">
-                <option value="Woman">Женщина</option>
-                <option value="Man">Мужчина</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="age">Возраст</label>
-            <select id="age">
-                <option value="18 years old">18 лет</option>
-                <option value="20-25 years old" selected>20-25 лет</option>
-                <option value="25-30 years old">25-30 лет</option>
-                <option value="30-40 years old">30-40 лет</option>
-                <option value="40-50 years old">40-50 лет</option>
-                <option value="50-60 years old">50-60 лет</option>
-                <option value="60+ years old">60+ лет</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="nationality">Внешность/Этнос</label>
-            <select id="nationality">
-                <option value="Eastern European">Восточная Европа</option>
-                <option value="Northern European">Скандинавская</option>
-                <option value="Southern European">Южно-европейская</option>
-                <option value="Asian">Азиатская</option>
-                <option value="Latin American">Латиноамериканская</option>
-                <option value="African">Африканская</option>
-                <option value="Indian">Индийская</option>
-                <option value="Middle Eastern">Ближневосточная</option>
-                <option value="Mixed Race">Смешанная</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="bodyType">Телосложение</label>
-            <select id="bodyType">
-                <option value="Fit and slim">Стройное/Подтянутое</option>
-                <option value="Hourglass figure">Песочные часы</option>
-                <option value="Athletic">Спортивное</option>
-                <option value="Muscular">Мускулистое</option>
-                <option value="Curvy">Пышное (Curvy)</option>
-                <option value="Skinny model look">Модельная худоба</option>
-                <option value="Average realistic">Обычное</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="hairColor">Цвет волос</label>
-            <select id="hairColor">
-                <option value="Brunette">Брюнет</option>
-                <option value="Blonde">Блонд</option>
-                <option value="Black">Черные</option>
-                <option value="Redhead">Рыжие</option>
-                <option value="Platinum Blonde">Платиновые</option>
-                <option value="Grey">Седые</option>
-                <option value="Pastel Pink">Розовые</option>
-                <option value="Bald">Лысый</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="hairstyle">Стрижка</label>
-            <select id="hairstyle">
-                <option value="Long loose wavy hair">Длинные волны</option>
-                <option value="Straight long hair">Длинные прямые</option>
-                <option value="Messy bun">Небрежный пучок</option>
-                <option value="Ponytail">Хвост</option>
-                <option value="Bob cut">Каре</option>
-                <option value="Short pixie">Пикси (Короткая)</option>
-                <option value="Buzz cut">Ежик</option>
-                <option value="Fade cut">Фейд (Мужской)</option>
-                <option value="Slicked back">Зачесанные назад</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="eyeColor">Глаза</label>
-            <select id="eyeColor">
-                <option value="Brown">Карие</option>
-                <option value="Blue">Голубые</option>
-                <option value="Green">Зеленые</option>
-                <option value="Hazel">Ореховые</option>
-                <option value="Grey">Серые</option>
-            </select>
-        </div>
-        <div class="form-group">
-            <label for="style">Эстетика</label>
-            <select id="style">
-                <option value="Raw Candid Photography">Живое фото (Raw)</option>
-                <option value="Cinematic Movie Still">Кадр из фильма</option>
-                <option value="Fashion Editorial">Модный журнал</option>
-                <option value="Street Style">Уличный стиль</option>
-                <option value="Dark Moody Atmosphere">Мрачная атмосфера</option>
-                <option value="Neon Cyberpunk">Неон / Киберпанк</option>
-                <option value="Vintage Analog Film">Пленка (Vintage)</option>
-                <option value="Professional Studio">Студийный свет</option>
-            </select>
         </div>
-        <div class="form-group full-width">
-            <label for="additional">Детали (Одежда, Локация, Действие)</label>
-            <textarea id="additional" placeholder="Например: в черном кожаном плаще, идет по дождливой улице, смотрит в камеру"></textarea>
         </div>
-    </div>
-    <div class="btn-container">
-        <button type="button" class="action-btn" onclick="processAndOpen()">
-            <span>Launch Synkris AI</span>
-            <span style="font-size: 1.2em">⚡</span>
-        </button>
-    </div>
-</form>
 </div>
 <script>
-function autoAdjustDefaults() {
-const gender = document.getElementById('gender').value;
-const hairstyle = document.getElementById('hairstyle');
-const bodyType = document.getElementById('bodyType');
-if (gender === 'Man') {
-hairstyle.value = 'Fade cut';
-bodyType.value = 'Athletic';
-if (!hairstyle.value) hairstyle.value = 'Short cut';
-} else {
-hairstyle.value = 'Long loose wavy hair';
-bodyType.value = 'Fit and slim';
-}
 }
-async function processAndOpen() {
-const btn = document.querySelector('.action-btn');
-const originalText = btn.innerHTML;
-const gender = document.getElementById('gender').value;
-const age = document.getElementById('age').value;
-const nationality = document.getElementById('nationality').value;
-const bodyType = document.getElementById('bodyType').value;
-const hairColor = document.getElementById('hairColor').value;
-const hairstyle = document.getElementById('hairstyle').value;
-const eyeColor = document.getElementById('eyeColor').value;
-const style = document.getElementById('style').value;
-const additional = document.getElementById('additional').value || "casual stylish outfit, standing confidently";
-const fullPrompt = `Full body shot, wide angle view, visible shoes and legs. A photorealistic ${style} of a ${age} ${nationality} ${gender}.
-Appearance: ${bodyType} physique, ${hairColor} ${hairstyle}, detailed ${eyeColor} eyes, realistic skin texture with pores and natural imperfections.
-Action/Context: ${additional}.
-Technical: 8k resolution, raw photo, unedited look, fujifilm xt4, sharp focus, volumetric lighting, hyper-detailed, alive, non-artificial, masterpiece.`;
-const data = {
-prompt: fullPrompt,
-negative_prompt: "cropped, portrait, close up, watermark, text, 3d render, cartoon, anime, smooth skin, plastic look, doll, artificial, blurry, distorted hands, extra fingers",
-aspect_ratio: "9:16"
-};
-const jsonString = JSON.stringify(data, null, 2);
-let copied = false;
-try {
-if (navigator.clipboard && navigator.clipboard.writeText) {
-await navigator.clipboard.writeText(jsonString);
-copied = true;
-} else {
-throw new Error("Clipboard API unavailable");
-}
-} catch (err) {
-const textArea = document.createElement("textarea");
-textArea.value = jsonString;
-textArea.style.position = "fixed";
-document.body.appendChild(textArea);
-textArea.focus();
-textArea.select();
-try {
-document.execCommand('copy');
-copied = true;
-} catch (e) {
-alert("Manual copy required.");
 }
-document.body.removeChild(textArea);
 }
-if (copied) {
-btn.style.backgroundColor = "#fff";
-btn.style.color = "#000";
-btn.innerHTML = "SYSTEM READY. LAUNCHING... 🚀";
-setTimeout(() => {
-window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank');
-setTimeout(() => {
-btn.style.backgroundColor = "";
-btn.style.color = "";
-btn.innerHTML = originalText;
-}, 1000);
-}, 800);
-}
 }
-document.addEventListener('DOMContentLoaded', autoAdjustDefaults);
 </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="ru">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Synkris Look 6</title>
 <style>
 :root {
+    --bg: #000000;
+    --card-bg: #0a0a0a;
+    --primary: #ccff00;
+    --primary-hover: #b3e600;
+    --text: #ffffff;
+    --text-secondary: #a1a1a1;
+    --border: #333333;
+    --input-bg: #111111;
 }
 body {
     font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     background-color: var(--bg);
     padding: 20px;
     display: flex;
     justify-content: center;
+    align-items: flex-start;
     min-height: 100vh;
 }
 .container {
     background-color: var(--card-bg);
     width: 100%;
+    max-width: 700px;
     padding: 35px;
     border-radius: 20px;
     border: 1px solid #222;
     letter-spacing: 0.5px;
 }
+.mode-selector {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+    background-color: var(--input-bg);
+    border-radius: 12px;
+    padding: 5px;
+    border: 1px solid var(--border);
+}
+.mode-btn {
+    flex: 1;
+    padding: 10px 15px;
+    background-color: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+}
+.mode-btn.active {
+    background-color: var(--primary);
+    color: #000;
+    box-shadow: 0 0 10px rgba(204, 255, 0, 0.3);
+}
 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     flex-direction: column;
 }
+label, .checkbox-label {
     font-weight: 500;
     margin-bottom: 8px;
     font-size: 0.85rem;
     letter-spacing: 0.5px;
 }
+select, textarea, input[type="text"] {
     padding: 12px 14px;
     border: 1px solid var(--border);
     border-radius: 8px;
     color: var(--text);
     transition: all 0.3s ease;
     outline: none;
+    width: 100%;
+    box-sizing: border-box;
 }
+select:focus, textarea:focus, input[type="text"]:focus {
     border-color: var(--primary);
     box-shadow: 0 0 10px rgba(204, 255, 0, 0.2);
 }
     color: #fff;
 }
+.form-mode {
+    display: none;
+}
+.form-mode.active {
+    display: contents;
+}
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    background-color: var(--input-bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 14px;
+}
+.checkbox-container input {
+    margin-right: 10px;
+}
+/* Responsive Design */
+@media (max-width: 600px) {
     .form-grid {
         grid-template-columns: 1fr;
     }
     .container {
         padding: 20px;
     }
+    h1 {
+        font-size: 1.8rem;
+    }
+    .mode-btn {
+        font-size: 0.8rem;
+    }
 }
 </style>
 </head>
 <body>
 <div class="container">
+    <h1>Synkris Look</h1>
+    <p class="subtitle">PROMPT GENERATOR & LAUNCHER</p>
+    <div class="mode-selector">
+        <button id="modeModelBtn" class="mode-btn active" onclick="switchMode('model')">Фото на модели</button>
+        <button id="modeObjectBtn" class="mode-btn" onclick="switchMode('object')">Предметное фото</button>
+    </div>
+    <form id="promptForm">
+        <div class="form-grid">
+            <!-- === MODEL PHOTOGRAPHY MODE === -->
+            <div id="modelMode" class="form-mode active">
+                <div class="form-group">
+                    <label for="gender">Пол</label>
+                    <select id="gender" onchange="autoAdjustDefaults()">
+                        <option value="Woman">Женщина</option>
+                        <option value="Man">Мужчина</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="age">Возраст</label>
+                    <select id="age">
+                        <option value="18 years old">18 лет</option>
+                        <option value="20-25 years old" selected>20-25 лет</option>
+                        <option value="25-30 years old">25-30 лет</option>
+                        <option value="30-40 years old">30-40 лет</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="nationality">Внешность/Этнос</label>
+                    <select id="nationality">
+                        <option value="Eastern European">Восточная Европа</option>
+                        <option value="Northern European">Скандинавская</option>
+                        <option value="Asian">Азиатская</option>
+                        <option value="Latin American">Латиноамериканская</option>
+                        <option value="Mixed Race">Смешанная</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="bodyType">Телосложение</label>
+                    <select id="bodyType">
+                        <option value="Fit and slim">Стройное/Подтянутое</option>
+                        <option value="Athletic">Спортивное</option>
+                        <option value="Curvy">Пышное (Curvy)</option>
+                        <option value="Skinny model look">Модельная худоба</option>
+                    </select>
+                </div>
+                 <div class="form-group">
+                    <label for="hairColor">Цвет волос</label>
+                    <select id="hairColor">
+                        <option value="Brunette">Брюнет</option>
+                        <option value="Blonde">Блонд</option>
+                        <option value="Black">Черные</option>
+                        <option value="Redhead">Рыжие</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="hairstyle">Стрижка</label>
+                    <select id="hairstyle">
+                        <option value="Long loose wavy hair">Длинные волны</option>
+                        <option value="Straight long hair">Длинные прямые</option>
+                        <option value="Messy bun">Небрежный пучок</option>
+                        <option value="Bob cut">Каре</option>
+                        <option value="Fade cut">Фейд (Мужской)</option>
+                    </select>
+                </div>
+                 <div class="form-group">
+                    <label for="emotion">Эмоция/Выражение лица</label>
+                    <select id="emotion">
+                        <option value="Confident look">Уверенный взгляд</option>
+                        <option value="Smiling gently">Легкая улыбка</option>
+                        <option value="Serious and thoughtful">Серьезное и вдумчивое</option>
+                        <option value="Playful wink">Игривое подмигивание</option>
+                        <option value="Mysterious gaze">Загадочный взгляд</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="light">Свет</label>
+                    <select id="light">
+                        <option value="volumetric lighting">Объемный студийный</option>
+                        <option value="cinematic lighting">Кинематографичный</option>
+                        <option value="natural morning light">Естественный утренний</option>
+                        <option value="dramatic side light">Драматичный боковой</option>
+                        <option value="neon lights">Неоновый</option>
+                    </select>
+                </div>
+                <div class="form-group full-width">
+                    <label for="style">Эстетика</label>
+                    <select id="style">
+                        <option value="Raw Candid Photography">Живое фото (Raw)</option>
+                        <option value="Cinematic Movie Still">Кадр из фильма</option>
+                        <option value="Fashion Editorial">Модный журнал</option>
+                        <option value="Street Style Photo">Уличный стиль</option>
+                        <option value="Dark Moody Atmosphere">Мрачная атмосфера</option>
+                        <option value="Vintage Analog Film">Пленка (Vintage)</option>
+                    </select>
+                </div>
+                <div class="form-group full-width">
+                    <label for="model_details">Детали (Одежда, Действие, Локация)</label>
+                    <textarea id="model_details" placeholder="Например: в черном кожаном плаще, идет по дождливой улице Токио, смотрит в камеру"></textarea>
+                </div>
+            </div>
+            <!-- === OBJECT PHOTOGRAPHY MODE === -->
+            <div id="objectMode" class="form-mode">
+                <div class="form-group full-width">
+                    <label for="object_name">Название/Описание предмета</label>
+                    <input type="text" id="object_name" placeholder="Например: флакон духов, кроссовки, часы">
+                </div>
+                <div class="form-group">
+                    <label for="object_style">Стилистика съемки</label>
+                    <select id="object_style">
+                        <option value="Minimalism on a cyclorama">Минимализм на циклораме</option>
+                        <option value="Lifestyle, in context">Лайфстайл (в контексте)</option>
+                        <option value="Detailed macro shot">Макросъемка деталей</option>
+                        <option value="Levitation shot">Левитация (в воздухе)</option>
+                        <option value="Creative flat lay">Креативная раскладка (Flat lay)</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="object_background">Тип фона</label>
+                    <select id="object_background">
+                        <option value="clean studio background (white/grey)">Однотонный студийный</option>
+                        <option value="on a wooden surface">Деревянная поверхность</option>
+                        <option value="on a marble surface">Мрамор</option>
+                        <option value="on a concrete texture">Бетон</option>
+                        <option value="on a silk/linen fabric">Ткань (шелк/лен)</option>
+                        <option value="on a natural surface (moss, sand, water)">Природный (мох, песок, вода)</option>
+                    </select>
+                </div>
+                 <div class="form-group full-width">
+                    <label for="object_details">Дополнительные детали</label>
+                    <textarea id="object_details" placeholder="Например: капли воды на флаконе, рядом лежат кофейные зерна"></textarea>
+                </div>
+                 <div class="form-group full-width">
+                     <label class="checkbox-label">Креативность</label>
+                     <div class="checkbox-container">
+                        <input type="checkbox" id="creative_mode" onchange="toggleCreativeMode()">
+                        <label for="creative_mode" style="color: var(--text); text-transform: none; letter-spacing: 0;">Креативный фон от ИИ (игнорирует "Тип фона")</label>
+                    </div>
+                </div>
+            </div>
         </div>
+        <div class="btn-container">
+            <button type="button" class="action-btn" onclick="processAndOpen()">
+                <span>Launch Synkris AI</span>
+                <span style="font-size: 1.2em">⚡</span>
+            </button>
         </div>
+    </form>
 </div>
 <script>
+let currentMode = 'model';
+function switchMode(mode) {
+    currentMode = mode;
+    document.getElementById('modelMode').classList.toggle('active', mode === 'model');
+    document.getElementById('objectMode').classList.toggle('active', mode === 'object');
+    document.getElementById('modeModelBtn').classList.toggle('active', mode === 'model');
+    document.getElementById('modeObjectBtn').classList.toggle('active', mode === 'object');
 }
+function autoAdjustDefaults() {
+    if (currentMode !== 'model') return;
+    const gender = document.getElementById('gender').value;
+    const hairstyle = document.getElementById('hairstyle');
+    const bodyType = document.getElementById('bodyType');
+    if (gender === 'Man') {
+        hairstyle.value = 'Fade cut';
+        bodyType.value = 'Athletic';
+    } else {
+        hairstyle.value = 'Long loose wavy hair';
+        bodyType.value = 'Fit and slim';
+    }
 }
+function toggleCreativeMode() {
+    const isCreative = document.getElementById('creative_mode').checked;
+    document.getElementById('object_background').disabled = isCreative;
 }
+async function processAndOpen() {
+    const btn = document.querySelector('.action-btn');
+    const originalText = btn.innerHTML;
+    let fullPrompt = '';
+    if (currentMode === 'model') {
+        const gender = document.getElementById('gender').value;
+        const age = document.getElementById('age').value;
+        const nationality = document.getElementById('nationality').value;
+        const bodyType = document.getElementById('bodyType').value;
+        const hairColor = document.getElementById('hairColor').value;
+        const hairstyle = document.getElementById('hairstyle').value;
+        const emotion = document.getElementById('emotion').value;
+        const light = document.getElementById('light').value;
+        const style = document.getElementById('style').value;
+        const details = document.getElementById('model_details').value || "in a casual stylish outfit, standing confidently";
+        fullPrompt = `Full body shot, wide angle view, visible shoes and legs. A photorealistic ${style} of a ${age} ${nationality} ${gender}.
+Appearance: ${bodyType} physique, ${hairColor} ${hairstyle}, ${emotion}, realistic skin texture with pores and natural imperfections.
+Context: ${details}.
+Technical: 8k resolution, raw photo, unedited look, fujifilm xt4, sharp focus, ${light}, hyper-detailed, alive, non-artificial, masterpiece.`;
+    } else { // Object mode
+        const objectName = document.getElementById('object_name').value || "a product";
+        const objectStyle = document.getElementById('object_style').value;
+        const isCreative = document.getElementById('creative_mode').checked;
+        const objectDetails = document.getElementById('object_details').value || "clean and elegant";
+        let background = '';
+        if (isCreative) {
+            background = "on a creative, surreal, and artistic background generated by AI to complement the product's essence";
+        } else {
+            background = document.getElementById('object_background').value;
+        }
+        fullPrompt = `Professional product photography, ${objectStyle}.
+Subject: A hyper-detailed shot of ${objectName}.
+Context: ${background}. With additional details: ${objectDetails}.
+Technical: 8k resolution, commercial studio quality, sharp focus, perfect lighting, ultra-realistic, masterpiece.`;
+    }
+    const data = {
+        prompt: fullPrompt.replace(/\s+/g, ' ').trim(),
+        negative_prompt: "cropped, watermark, text, 3d render, cartoon, anime, plastic look, doll, artificial, blurry, distorted, malformed, ugly",
+        aspect_ratio: "9:16"
+    };
+    const jsonString = JSON.stringify(data, null, 2);
+    try {
+        await navigator.clipboard.writeText(jsonString);
+        btn.style.backgroundColor = "#fff";
+        btn.style.color = "#000";
+        btn.innerHTML = "SYSTEM READY. LAUNCHING... 🚀";
+        setTimeout(() => {
+            window.open('https://lmarena.ai/ru?chat-modality=image&mode=direct', '_blank');
+            setTimeout(() => {
+                btn.style.backgroundColor = "";
+                btn.style.color = "";
+                btn.innerHTML = originalText;
+            }, 1000);
+        }, 800);
+    } catch (err) {
+        console.error('Failed to copy: ', err);
+        alert("Не удалось скопировать. Пожалуйста, скопируйте вручную.");
+    }
 }
+document.addEventListener('DOMContentLoaded', () => {
+    switchMode('model');
+    autoAdjustDefaults();
+});
 </script>
 </body>
+</html>