Update app.py

app.py

@@ -570,7 +570,7 @@ label {
     letter-spacing: 0.8px;
 }
 
-select, textarea {
+input[type="text"], select, textarea {
     padding: 12px 14px;
     border: 1px solid var(--border);
     border-radius: 8px;
@@ -583,7 +583,7 @@ select, textarea {
     box-sizing: border-box;
 }
 
-select:focus, textarea:focus {
+select:focus, textarea:focus, input[type="text"]:focus {
     border-color: var(--primary);
     box-shadow: 0 0 10px rgba(204, 255, 0, 0.2);
 }
@@ -674,6 +674,36 @@ textarea {
 .aspect-ratio-btn.active { background-color: var(--primary); color: #000; border-color: var(--primary); box-shadow: 0 0 10px rgba(204, 255, 0, 0.3); }
 .aspect-ratio-btn.active .preview { background: #000; }
 
+.options-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background-color: var(--input-bg);
+    padding: 15px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+.option-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.option-item input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    accent-color: var(--primary);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.option-item label {
+    margin-bottom: 0;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: 0;
+}
+
 @media (max-width: 600px) {
     .form-grid, .style-grid { grid-template-columns: 1fr; }
     .full-width { grid-column: span 1; }
@@ -859,6 +889,27 @@ textarea {
                     <textarea id="object_additional_prompt" placeholder="Например: добавить инфографику 'new collection', левитация предмета"></textarea>
                 </div>
             </div>
+            
+            <div class="form-group full-width">
+                <label>Детали и Вариации</label>
+                <div class="options-grid">
+                    <div class="option-item">
+                        <input type="checkbox" id="detail_collage">
+                        <label for="detail_collage">Коллаж с увеличенными деталями (ткань, фурнитура)</label>
+                    </div>
+                    <div class="option-item">
+                        <input type="checkbox" id="text_overlay_check" onchange="toggleTextOverlayInput(this.checked)">
+                        <label for="text_overlay_check">Наложение текста</label>
+                    </div>
+                    <div id="text_overlay_input_container" style="display: none; margin-top: 10px; padding-left: 30px;">
+                         <input type="text" id="text_overlay_input" placeholder="Текст через запятую, например: New Collection, 100% Cotton">
+                    </div>
+                    <div class="option-item">
+                        <input type="checkbox" id="color_variants">
+                        <label for="color_variants">Разные варианты/цвета (коллаж)</label>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="btn-container">
@@ -874,68 +925,71 @@ textarea {
 let currentMode = 'model';
 const envKeyword = {{ keyword|tojson|safe }};
 
-const flagshipStyles = {
-  'studio': 'Студия (профи)',
-  'street': 'Стрит-стайл',
-  'lookbook': 'Лукбук (минимализм)',
-  'minimalism': 'Экстрим минимализм',
-  'selfie': 'Селфи (гиперреализм)',
-  'creative': 'Креативная съемка',
-  'new_year': 'Новый Год',
-  'retro': 'Ретро (35мм пленка)',
-  'boho': 'Бохо (золотой час)',
-  'gothic': 'Готика',
-  'editorial': 'Эдиториал (глянец)',
-  'film_noir': 'Фильм-нуар (Ч/Б)',
-  'cottagecore': 'Коттеджкор',
-  'royalcore': 'Роскошь (дворец)',
-  'solarpunk': 'Соларпанк',
-  'skater': 'Скейтер',
-  'baroque': 'Барокко',
-  'japandi': 'Джапанди',
-  'coastal': 'Прибрежный стиль',
-  'cyberpunk': 'Киберпанк',
-  'fantasy': 'Фэнтези',
-  '90s_grunge': 'Гранж 90-х',
-  'techwear': 'Techwear',
-  'avant_garde': 'Авангард',
-  'home_casual': 'Домашний уют',
-  'social_media_candid': 'Инстаграм-фото',
-  'backstage': 'Бэкстейдж',
-  'road_trip': 'Роуд-трип',
-  'rainy_day': 'Дождливый день',
-  'night_flash': 'Ночь (вспышка)',
-  'golden_hour_picnic': 'Пикник (золотой час)'
+const styleNames = {
+  'studio': 'Студия (профи)', 'street': 'Стрит-стайл', 'lookbook': 'Лукбук (минимализм)', 'minimalism': 'Экстрим минимализм',
+  'selfie': 'Селфи (гиперреализм)', 'creative': 'Креативная съемка', 'new_year': 'Новый Год', 'retro': 'Ретро (35мм пленка)',
+  'boho': 'Бохо (золотой час)', 'gothic': 'Готика', 'editorial': 'Эдиториал (глянец)', 'film_noir': 'Фильм-нуар (Ч/Б)',
+  'cottagecore': 'Коттеджкор', 'royalcore': 'Роскошь (дворец)', 'solarpunk': 'Соларпанк', 'skater': 'Скейтер',
+  'baroque': 'Барокко', 'japandi': 'Джапанди', 'coastal': 'Прибрежный стиль', 'cyberpunk': 'Киберпанк',
+  'fantasy': 'Фэнтези', '90s_grunge': 'Гранж 90-х', 'techwear': 'Techwear', 'avant_garde': 'Авангард',
+  'home_casual': 'Домашний уют', 'social_media_candid': 'Инстаграм-фото', 'backstage': 'Бэкстейдж', 'road_trip': 'Роуд-трип',
+  'rainy_day': 'Дождливый день', 'night_flash': 'Ночь (вспышка)', 'golden_hour_picnic': 'Пикник (золотой час)'
+};
+
+const objectStyleNames = {
+    'studio': 'Студия (профи)', 'minimalism': 'Минимализм', 'nature': 'На природе', 'luxe': 'Лакшери', 'dark': 'Мрачный стиль'
+};
+
+const stylePrompts = {
+  'studio': 'профессиональная студийная фотография с динамичным, сложным освещением на бесшовном, текстурированном фоне (не просто белом).',
+  'street': 'динамичная стрит-стайл фотография в оживленной, аутентичной городской среде (например, Токио, Нью-Йорк). Кадр живой и полный движения.',
+  'lookbook': 'чистый, минималистичный стиль лукбука, на текстурированном нейтральном фоне, таком как бетон, лен или мягкий серый. Фокус на силуэте одежды.',
+  'minimalism': 'фото в стиле экстремального минимализма, с акцентом на форму и негативное пространство. Архитектурный, чистый фон с интересными тенями.',
+  'selfie': 'гиперреалистичный стиль селфи, как будто снято на флагманский смартфон. Естественная, интимная перспектива.',
+  'creative': 'ультра-креативная, авангардная концептуальная съемка, подобранная под суть продукта. Используйте неожиданный реквизит, драматическое освещение и образное, сюрреалистическое окружение.',
+  'new_year': 'праздничная новогодняя тема с огнями боке, конфетти и торжественной атмосферой.',
+  'retro': 'ретро-стиль, снятый с эмуляцией 35-мм пленки. Зернистая текстура, винтажная цветокоррекция и ностальгическое настроение.',
+  'boho': 'стиль бохо-шик, снятый в золотой час в естественной, деревенской обстановке, например, в поле или на пляже.',
+  'gothic': 'мрачный и атмосферный готический стиль. Снято в драматической, исторической архитектуре с освещением в стиле кьяроскуро.',
+  'editorial': 'глянцевый журнальный эдиториал на ярком, разноцветном фоне. Включите отражающие поверхности или зеркала, чтобы показать продукт с разных ракурсов.',
+  'film_noir': 'классический стиль фильм-нуар. Высококонтрастное черно-белое изображение, драматические тени и таинственное, кинематографическое настроение.',
+  'cottagecore': 'романтизированная эстетика коттеджкор. Снято в загородной местности с деревенским, идиллическим и естественным ощущением. Подумайте о полевых цветах и винтажном реквизите.',
+  'royalcore': 'роскошная эстетика роялкор. Снято в роскошном, дворцовом интерьере с деталями в стиле барокко, богатыми тканями и царственной атмосферой.',
+  'solarpunk': 'оптимистичный стиль соларпанк, сочетающий природу с футуристическими технологиями в яркой, устойчивой среде.',
+  'skater': 'аутентичный скейтерский стиль, снятый в городском скейтпарке или на улице. Широкоугольный объектив, динамичные позы.',
+  'baroque': 'драматический художественный стиль барокко. Богатые детали, глубокие цвета и интенсивная игра света и тени, напоминающая классическую живопись.',
+  'japandi': 'безмятежная обстановка в стиле джапанди, смесь японского деревенского минимализма и скандинавской функциональности. Нейтральные тона, натуральные материалы, такие как светлое дерево и бамбук, чистые линии.',
+  'coastal': 'легкий и расслабленный прибрежный стиль. Снято на пляже или в светлом приморском доме. Естественный свет, мягкие цвета.',
+  'cyberpunk': 'залитая неоном обстановка в стиле киберпанк. Футуристические городские пейзажи, светящиеся вывески и высокотехнологичное, антиутопическое настроение.',
+  'fantasy': 'эпическая фэнтезийная обстановка. Заколдованные леса, древние руины или мифические пейзажи.',
+  '90s_grunge': 'эстетика гранжа 90-х. Сырой, неотполированный вид, снятый в городской или промышленной среде с мрачным, бунтарским настроением.',
+  'techwear': 'элегантный стиль techwear. Футуристическая, городская среда с акцентом на функциональную, современную одежду. Чистые линии, часто ночью.',
+  'avant_garde': 'экспериментальная, авангардная фотография. Нестандартная композиция, абстрактные элементы и акцент на художественном выражении.',
+  'home_casual': 'уютная и непринужденная домашняя обстановка. Мягкое, естественное освещение, расслабленные позы и комфортное, обжитое ощущение.',
+  'social_media_candid': 'непринужденное фото в стиле Instagram. Выглядит спонтанно и аутентично, часто с элементом лайфстайла.',
+  'backstage': 'атмосфера за кулисами модного показа. Суетливая энергия, случайные моменты, видно профессиональное осветительное оборудование.',
+  'road_trip': 'атмосфера приключенческого автопутешествия. Снято в винтажном автомобиле или на фоне живописной, открытой дороги.',
+  'rainy_day': 'мрачная эстетика дождливого дня. Отражения на мокром асфальте, зонты и уютная или драматическая атмосфера.',
+  'night_flash': 'энергичный ночной снимок с использованием прямой вспышки. Создает резкие тени, насыщенные цвета и сырое, тусовочное ощущение.',
+  'golden_hour_picnic': 'идиллический пикник в золотой час. Теплое, мягкое освещение, расслабленная атмосфера в парке или поле.'
 };
 
-const objectStyles = {
-    'studio': 'Студия (профи)',
-    'minimalism': 'Минимализм',
-    'nature': 'На природе',
-    'luxe': 'Лакшери',
-    'dark': 'Мрачный стиль'
+const objectStylePrompts = {
+    'studio': 'профессиональная студийная предметная фотография с динамическим освещением на бесшовном, текстурированном фоне.',
+    'minimalism': 'экстремальный минимализм, фокусирующийся на форме продукта на чистом, архитектурном фоне с мягкими тенями.',
+    'nature': 'продукт, представленный в естественной среде, которая его дополняет (например, на мхе, камне или среди листьев).',
+    'luxe': 'роскошная, элитная обстановка с богатыми текстурами, такими как мрамор, шелк или темное дерево. Роскошное и изысканное настроение.',
+    'dark': 'мрачная и атмосфер��ая предметная фотография. Драматическое, низкоключевое освещение, которое подчеркивает ключевые особенности продукта на темном фоне.'
 };
 
 const femaleBodyTypes = {
-  'standard': 'Стандартное',
-  'very_slim': 'Очень стройное (модель)',
-  'slim': 'Стройное (натуральное)',
-  'slim_busty': 'Стройное с пышной грудью',
-  'athletic': 'Атлетичное',
-  'petite': 'Миниатюрное',
-  'hourglass': 'Песочные часы',
-  'fit_curvy': 'Спортивное (curvy)',
-  'bombshell': 'Гипер-curvy',
-  'curvy': 'Мягкое (curvy)',
-  'full_figured': 'Плюс-сайз'
+  'standard': 'Стандартное', 'very_slim': 'Очень стройное (модель)', 'slim': 'Стройное (натуральное)', 'slim_busty': 'Стройное с пышной грудью',
+  'athletic': 'Атлетичное', 'petite': 'Миниатюрное', 'hourglass': 'Песочные часы', 'fit_curvy': 'Спортивное (curvy)',
+  'bombshell': 'Гипер-curvy', 'curvy': 'Мягкое (curvy)', 'full_figured': 'Плюс-сайз'
 };
 
 const maleBodyTypes = {
-    'athletic': 'Атлетичное',
-    'lean and toned': 'Поджарое',
-    'muscular build': 'Мускулистое',
-    'broad build': 'Крупное',
-    'slim build': 'Худощавое'
+    'athletic': 'Атлетичное', 'lean and toned': 'Поджарое', 'muscular build': 'Мускулистое', 'broad build': 'Крупное', 'slim build': 'Худощавое'
 };
 
 function switchMode(mode) {
@@ -962,7 +1016,7 @@ function populateBodyTypes() {
     }
 }
 
-function populateStyles(containerId, styles) {
+function populateStyles(containerId, styles, styleNames) {
     const container = document.getElementById(containerId);
     container.innerHTML = '';
     let isFirst = true;
@@ -975,7 +1029,7 @@ function populateStyles(containerId, styles) {
             isFirst = false;
         }
         btn.dataset.value = key;
-        btn.textContent = styles[key];
+        btn.textContent = styleNames[key];
         container.appendChild(btn);
     }
 }
@@ -983,14 +1037,19 @@ function populateStyles(containerId, styles) {
 function setupClickableSelectors() {
     document.querySelectorAll('.style-grid, .aspect-ratio-grid').forEach(container => {
         container.addEventListener('click', (e) => {
-            if (e.target.matches('.style-btn, .aspect-ratio-btn')) {
+            const button = e.target.closest('.style-btn, .aspect-ratio-btn');
+            if (button) {
                 container.querySelectorAll('.style-btn, .aspect-ratio-btn').forEach(innerBtn => innerBtn.classList.remove('active'));
-                e.target.classList.add('active');
+                button.classList.add('active');
             }
         });
     });
 }
 
+function toggleTextOverlayInput(isChecked) {
+    document.getElementById('text_overlay_input_container').style.display = isChecked ? 'block' : 'none';
+}
+
 function getPrompt() {
     let prompt = `**MANDATORY: IMAGE OUTPUT ONLY. ABSOLUTELY NO TEXT.**
 **STRICT DIRECTIVE: YOU ARE AN OPTICAL CLONING AND TEXTURE TRANSFER ENGINE.**
@@ -1003,9 +1062,12 @@ function getPrompt() {
 `;
     let aspectRatio = '';
     let additionalPrompt = '';
+    let styleKey = '';
+    let stylePrompt = '';
 
     if (currentMode === 'model') {
-        const style = document.querySelector('#styleSelector .style-btn.active').dataset.value;
+        styleKey = document.querySelector('#styleSelector .style-btn.active').dataset.value;
+        stylePrompt = stylePrompts[styleKey];
         const gender = document.getElementById('gender').value;
         const age = document.getElementById('age').value;
         const nationality = document.getElementById('nationality').value;
@@ -1016,13 +1078,14 @@ function getPrompt() {
         additionalPrompt = document.getElementById('additional_prompt').value;
         aspectRatio = document.querySelector('#aspectRatioSelectorModel .aspect-ratio-btn.active').dataset.value;
 
-        prompt += `\n**STYLE & MOOD:** High-quality professional fashion photography, style: ${style}.`;
+        prompt += `\n**STYLE & MOOD:** High-quality professional fashion photography, ${stylePrompt}`;
         prompt += `\n\n**MODEL(S) SPECIFICATIONS:**\nmodel: ${age} ${gender}, ${nationality} appearance, standard average build. ${bodyType} body type.`;
         prompt += `\n\n**CLOTHING:** The model is wearing: ${clothingDetails}.`;
         prompt += `\n\n**POSE & COMPOSITION:**\n- Perspective: ${shotType}\n- Camera Angle: Straight-on\n- Pose: ${pose}`;
 
     } else if (currentMode === 'children') {
-        const style = document.querySelector('#childStyleSelector .style-btn.active').dataset.value;
+        styleKey = document.querySelector('#childStyleSelector .style-btn.active').dataset.value;
+        stylePrompt = stylePrompts[styleKey];
         const gender = document.getElementById('child_gender').value;
         const age = document.getElementById('child_age').value;
         const nationality = document.getElementById('child_nationality').value;
@@ -1032,26 +1095,48 @@ function getPrompt() {
         additionalPrompt = document.getElementById('child_additional_prompt').value;
         aspectRatio = document.querySelector('#aspectRatioSelectorChildren .aspect-ratio-btn.active').dataset.value;
         
-        prompt += `\n**STYLE & MOOD:** High-quality professional fashion photography, style: ${style}.`;
+        prompt += `\n**STYLE & MOOD:** High-quality professional fashion photography, ${stylePrompt}`;
         prompt += `\n\n**MODEL(S) SPECIFICATIONS:**\nmodel: ${age} ${gender}, ${nationality} appearance, standard infant/child physique.`;
         prompt += `\n\n**CLOTHING:** The child is wearing: ${clothingDetails}.`;
         prompt += `\n\n**POSE & COMPOSITION:**\n- Perspective: ${shotType}\n- Camera Angle: Straight-on\n- Pose: ${pose}`;
         
-    } else { // objectMode
+    } else {
         prompt = `**MANDATORY: IMAGE OUTPUT ONLY. ABSOLUTELY NO TEXT.**\n**PRODUCT PHOTOGRAPHY ENGINE.**\nPreserve the exact texture, color, and silhouette of the provided garment images with 20,000,000% fidelity.\n`;
-        const style = document.querySelector('#objectStyleSelector .style-btn.active').dataset.value;
+        styleKey = document.querySelector('#objectStyleSelector .style-btn.active').dataset.value;
+        stylePrompt = objectStylePrompts[styleKey];
         const objectName = document.getElementById('object_name').value || "the product";
         additionalPrompt = document.getElementById('object_additional_prompt').value;
         aspectRatio = document.querySelector('#aspectRatioSelectorObject .aspect-ratio-btn.active').dataset.value;
 
-        prompt += `\n**SCENE CONFIGURATION:**\n- Mode: Flat lay / Hanging shoot\n- Style: Professional studio product photography, style: ${style}.`;
-        prompt += `\n- Background: Clean minimalist studio background.\n- Product: ${objectName}`;
+        prompt += `\n**SCENE CONFIGURATION:**\n- Mode: Flat lay / Hanging shoot\n- Style: ${stylePrompt}`;
+        prompt += `\n- Product: ${objectName}`;
     }
 
     if (additionalPrompt) {
         prompt += `\n\n**ADDITIONAL ARTISTIC DIRECTIVES:** ${additionalPrompt}`;
     }
 
+    let finalDirectives = [];
+    
+    if (document.getElementById('detail_collage').checked) {
+        finalDirectives.push('**OUTPUT FORMAT: E-COMMERCE COLLAGE.** Создайте основное изображение, показывающее полный наряд, и 2-3 меньших, круглых вставных изображения, сфокусированных на гипердетализированных крупных планах текстуры ткани, молний, пуговиц и швов. Общая композиция должна быть чистой и профессиональной для маркетплейса.');
+    }
+
+    if (document.getElementById('color_variants').checked) {
+        finalDirectives.push('**OUTPUT FORMAT: MULTI-VARIANT COLLAGE.** Сгенерируйте коллаж, отображающий один и тот же предмет в нескольких разных цветах или вариантах. Это можно сделать, показав несколько моделей бок о бок в одном кадре или создав чистую сеточную композицию из разных снимков продукта.');
+    }
+    
+    if (document.getElementById('text_overlay_check').checked) {
+        const textToOverlay = document.getElementById('text_overlay_input').value;
+        if (textToOverlay) {
+            finalDirectives.push(`**GRAPHIC OVERLAY:** Наложите следующие ключевые слова на изображение стильным, современным шрифтом с дополняющими иконками или минималистичными графическими элементами: "${textToOverlay}". Текст должен быть хорошо интегрирован в композицию и эстетически приятен.`);
+        }
+    }
+    
+    if(finalDirectives.length > 0){
+         prompt += `\n\n**FINAL OUTPUT DIRECTIVES:**\n- ${finalDirectives.join('\n- ')}`;
+    }
+
     return `${envKeyword}, ${prompt} ${aspectRatio}`;
 }
 
@@ -1084,9 +1169,9 @@ async function processAndOpen() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    populateStyles('styleSelector', flagshipStyles);
-    populateStyles('childStyleSelector', flagshipStyles);
-    populateStyles('objectStyleSelector', objectStyles);
+    populateStyles('styleSelector', stylePrompts, styleNames);
+    populateStyles('childStyleSelector', stylePrompts, styleNames);
+    populateStyles('objectStyleSelector', objectStylePrompts, objectStyleNames);
     populateBodyTypes();
     setupClickableSelectors();
     switchMode('model');