Update app.py

app.py

@@ -579,7 +579,7 @@ select, textarea, input[type="text"] {
     box-sizing: border-box;
 }
 
-select:disabled, textarea:disabled, input[type="text"]:disabled {
+select:disabled, textarea:disabled, input[type="text"]:disabled, input[type="checkbox"]:disabled + label {
     background-color: #222;
     opacity: 0.5;
     cursor: not-allowed;
@@ -721,6 +721,47 @@ select option {
     border-color: var(--primary);
     box-shadow: 0 0 10px rgba(204, 255, 0, 0.3);
 }
+.aspect-ratio-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+.aspect-ratio-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    text-align: center;
+    height: 90px;
+}
+.aspect-ratio-btn .preview {
+    background: #333;
+    border-radius: 3px;
+    transition: background-color 0.3s ease;
+}
+.aspect-ratio-btn:hover {
+    border-color: var(--primary);
+    color: var(--text);
+}
+.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;
+}
 
 @media (max-width: 600px) {
     .form-grid {
@@ -900,13 +941,40 @@ select option {
                     </div>
                 </div>
                 <div class="form-group full-width">
-                     <label class="checkbox-label">Детали одежды</label>
-                     <div class="checkbox-container">
+                    <label>Соотношение сторон</label>
+                    <div id="aspectRatioSelectorModel" class="aspect-ratio-grid">
+                        <button type="button" class="aspect-ratio-btn active" data-value="--ar 9:16">
+                            <div class="preview" style="width: 27px; height: 48px;"></div>
+                            <span>9:16</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 1:1">
+                            <div class="preview" style="width: 40px; height: 40px;"></div>
+                            <span>1:1</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 3:4">
+                            <div class="preview" style="width: 36px; height: 48px;"></div>
+                            <span>3:4</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 16:9">
+                            <div class="preview" style="width: 64px; height: 36px;"></div>
+                            <span>16:9</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="form-group full-width">
+                     <label class="checkbox-label">Детали и Вариации</label>
+                     <div class="checkbox-container" style="margin-bottom: 10px;">
                         <input type="checkbox" id="clothing_details_checkbox">
                         <label for="clothing_details_checkbox" style="color: var(--text); text-transform: none; letter-spacing: 0;">
                             Сгенерировать коллаж с увеличенными деталями (ткань, фурнитура)
                         </label>
                     </div>
+                    <div class="checkbox-container">
+                        <input type="checkbox" id="multiple_variants_checkbox">
+                        <label for="multiple_variants_checkbox" style="color: var(--text); text-transform: none; letter-spacing: 0;">
+                            Разные варианты/цвета (несколько моделей в кадре)
+                        </label>
+                    </div>
                 </div>
                 <div class="form-group full-width">
                     <label for="model_details">Одежда и Детали (Опишите ткань и фасон!)</label>
@@ -1062,13 +1130,40 @@ select option {
                     </select>
                 </div>
                 <div class="form-group full-width">
-                     <label class="checkbox-label">Детали одежды</label>
-                     <div class="checkbox-container">
+                    <label>Соотношение сторон</label>
+                    <div id="aspectRatioSelectorChildren" class="aspect-ratio-grid">
+                        <button type="button" class="aspect-ratio-btn active" data-value="--ar 9:16">
+                            <div class="preview" style="width: 27px; height: 48px;"></div>
+                            <span>9:16</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 1:1">
+                            <div class="preview" style="width: 40px; height: 40px;"></div>
+                            <span>1:1</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 3:4">
+                            <div class="preview" style="width: 36px; height: 48px;"></div>
+                            <span>3:4</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 16:9">
+                            <div class="preview" style="width: 64px; height: 36px;"></div>
+                            <span>16:9</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="form-group full-width">
+                     <label class="checkbox-label">Детали и Вариации</label>
+                     <div class="checkbox-container" style="margin-bottom: 10px;">
                         <input type="checkbox" id="child_clothing_details_checkbox">
                         <label for="child_clothing_details_checkbox" style="color: var(--text); text-transform: none; letter-spacing: 0;">
                             Сгенерировать коллаж с увеличенными деталями (ткань, фурнитура)
                         </label>
                     </div>
+                    <div class="checkbox-container">
+                        <input type="checkbox" id="child_multiple_variants_checkbox">
+                        <label for="child_multiple_variants_checkbox" style="color: var(--text); text-transform: none; letter-spacing: 0;">
+                            Разные варианты/цвета (несколько моделей в кадре)
+                        </label>
+                    </div>
                 </div>
             </div>
 
@@ -1120,6 +1215,27 @@ select option {
                  <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>Соотношение сторон</label>
+                    <div id="aspectRatioSelectorObject" class="aspect-ratio-grid">
+                        <button type="button" class="aspect-ratio-btn active" data-value="--ar 9:16">
+                            <div class="preview" style="width: 27px; height: 48px;"></div>
+                            <span>9:16</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 1:1">
+                            <div class="preview" style="width: 40px; height: 40px;"></div>
+                            <span>1:1</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 3:4">
+                            <div class="preview" style="width: 36px; height: 48px;"></div>
+                            <span>3:4</span>
+                        </button>
+                        <button type="button" class="aspect-ratio-btn" data-value="--ar 16:9">
+                            <div class="preview" style="width: 64px; height: 36px;"></div>
+                            <span>16:9</span>
+                        </button>
+                    </div>
                 </div>
                  <div class="form-group full-width">
                      <label class="checkbox-label">Детали товара</label>
@@ -1224,14 +1340,16 @@ function autoAdjustDefaults() {
 
 function toggleMyModelMode() {
     const isMyModel = document.getElementById('my_model_checkbox').checked;
-    const fieldsToToggle = ['gender', 'age', 'nationality', 'hairColor', 'hairstyle', 'emotion', 'clothing_details_checkbox'];
+    const fieldsToToggle = ['gender', 'age', 'nationality', 'hairColor', 'hairstyle', 'emotion', 'clothing_details_checkbox', 'multiple_variants_checkbox'];
     
     fieldsToToggle.forEach(fieldId => {
         const element = document.getElementById(fieldId);
         if (element) {
             element.disabled = isMyModel;
-            if (fieldId === 'clothing_details_checkbox' && isMyModel) {
+            if (element.type === 'checkbox' && isMyModel) {
                  element.checked = false;
+                 const event = new Event('change');
+                 element.dispatchEvent(event);
             }
         }
     });
@@ -1243,30 +1361,63 @@ function toggleCreativeMode() {
 }
 
 function setupClickableSelectors() {
-    const selectors = ['styleSelector', 'locationSelector', 'childLocationSelector'];
-    selectors.forEach(selectorId => {
-        const container = document.getElementById(selectorId);
+    const selectorGroups = document.querySelectorAll('.style-grid, .aspect-ratio-grid');
+    selectorGroups.forEach(container => {
         if (!container) return;
-        const buttons = container.querySelectorAll('.style-btn');
+        const buttons = container.querySelectorAll('.style-btn, .aspect-ratio-btn');
 
         buttons.forEach(btn => {
             btn.addEventListener('click', () => {
-                buttons.forEach(innerBtn => innerBtn.classList.remove('active'));
+                container.querySelectorAll('.style-btn, .aspect-ratio-btn').forEach(innerBtn => innerBtn.classList.remove('active'));
                 btn.classList.add('active');
             });
         });
     });
 }
 
+function setupCheckboxLogic(variantsId, collageId) {
+    const variantsCheckbox = document.getElementById(variantsId);
+    const collageCheckbox = document.getElementById(collageId);
+    if (!variantsCheckbox || !collageCheckbox) return;
+
+    variantsCheckbox.addEventListener('change', () => {
+        if (variantsCheckbox.checked) {
+            collageCheckbox.checked = false;
+            collageCheckbox.disabled = true;
+        } else {
+            collageCheckbox.disabled = false;
+        }
+    });
+
+    collageCheckbox.addEventListener('change', () => {
+        if (collageCheckbox.checked) {
+            variantsCheckbox.checked = false;
+            variantsCheckbox.disabled = true;
+        } else {
+            variantsCheckbox.disabled = false;
+        }
+    });
+}
+
 
 async function processAndOpen() {
     const btn = document.querySelector('.action-btn');
     const originalText = btn.innerHTML;
     let fullPrompt = '';
     
+    let aspectRatio = '';
+    if (currentMode === 'model') {
+        aspectRatio = document.querySelector('#aspectRatioSelectorModel .aspect-ratio-btn.active').dataset.value;
+    } else if (currentMode === 'children') {
+        aspectRatio = document.querySelector('#aspectRatioSelectorChildren .aspect-ratio-btn.active').dataset.value;
+    } else {
+        aspectRatio = document.querySelector('#aspectRatioSelectorObject .aspect-ratio-btn.active').dataset.value;
+    }
+    
     if (currentMode === 'model') {
         const isMyModel = document.getElementById('my_model_checkbox').checked;
         const generateDetailsCollage = document.getElementById('clothing_details_checkbox').checked;
+        const generateMultipleVariants = document.getElementById('multiple_variants_checkbox').checked;
         const style = document.querySelector('#styleSelector .style-btn.active').dataset.value;
         const shotType = document.getElementById('shotType').value;
         const bodyType = document.getElementById('bodyType').value;
@@ -1303,11 +1454,21 @@ Final Scene: Place the model in the following environment: ${location}.
 Lighting: The scene must have ${light}.
 Technical: Masterpiece professional photograph, shot on ${camera}, 8k UHD, razor-sharp focus, extreme detail, perfect color grading, no digital artifacts.`;
         } else {
+            let subject_base = `An ultra-high-resolution, flawless photograph of a striking ${age} ${nationality} ${gender} high fashion model.`;
+            let composition_base = shotType;
+            let model_characteristics_base = `model_characteristics:: physique ${bodyType}, ${hairColor} ${hairstyle} with individual strands visible and natural flyaways, expression ${emotion} (powerful yet serene), pose ${pose}.`;
+            
+            if(generateMultipleVariants) {
+                 subject_base = `An ultra-high-resolution, flawless photograph of a group of 3 different but ethnically similar (${nationality}) high fashion models standing together in a line, each with a different natural pose and expression.`;
+                 composition_base = 'Full body shot, wide angle';
+                 model_characteristics_base = `model_characteristics:: All models have a similar ${bodyType} physique and look to be around ${age}.`;
+            }
+
             fullPrompt = `${envKeyword}, style:: ${style}, high fashion editorial, luxury brand campaign (like Dior, D&G), Vogue aesthetic, hyper-realistic photography, award-winning.
-composition:: ${shotType}. If the shot type is 'Full body shot', the image must clearly show the model from head to toe without any part of the body being cropped.
-subject:: An ultra-high-resolution, flawless photograph of a striking ${age} ${nationality} ${gender} high fashion model.
-model_characteristics:: physique ${bodyType}, ${hairColor} ${hairstyle} with individual strands visible and natural flyaways, expression ${emotion} (powerful yet serene), pose ${pose}.
-clothing_focus:: HIGHEST PRIORITY - The model is wearing EXACTLY: ${details}. This description is absolute and must be followed with 1000% accuracy, overriding any other assumptions. Physical accuracy of the described items is critical.
+composition:: ${composition_base}. The image must clearly show the models from head to toe without any part of the body being cropped.
+subject:: ${subject_base}
+${model_characteristics_base}
+clothing_focus:: HIGHEST PRIORITY - The model (or models) are wearing EXACTLY: ${details}. If multiple models are present, each wears a different color or minor style variant of this primary clothing description. This description is absolute and must be followed with 1000% accuracy, overriding any other assumptions. Physical accuracy of the described items is critical.
 texture_&_material_fidelity:: Extreme macro precision on textiles. Render the fabric weave, individual threads, visible stitching, material weight, realistic creases and folds, tactile surface imperfections like denim twill or wool fibers, and how light interacts with the fabric as described in the clothing focus.
 human_realism_details:: Capture hyper-realistic skin texture, showing pores, vellus hair, and subtle imperfections. Avoid any plastic or airbrushed look. Expertly sculpted light highlights the bone structure. Eyes must have realistic reflections and depth.
 scene_environment:: ${location}, creating a sophisticated and aspirational atmosphere.
@@ -1316,18 +1477,21 @@ technical:: Masterpiece professional photograph, ${light} meticulously crafted t
     
     } else if (currentMode === 'children') {
         const generateDetailsCollage = document.getElementById('child_clothing_details_checkbox').checked;
+        const generateMultipleVariants = document.getElementById('child_multiple_variants_checkbox').checked;
         const style = document.getElementById('child_style').value;
-        const shotType = document.getElementById('child_shotType').value;
+        let shotType = document.getElementById('child_shotType').value;
         const location = document.querySelector('#childLocationSelector .style-btn.active').dataset.value;
         const light = document.getElementById('child_light').value;
         let subject = '';
         let pose_info = '';
         let clothing_details = '';
         let main_image_description = '';
+        
+        let age, ethnicity;
 
         if(currentChildrenSubMode === 'newborn') {
-            const age = document.getElementById('newborn_age').value;
-            const ethnicity = document.getElementById('newborn_ethnicity').value;
+            age = document.getElementById('newborn_age').value;
+            ethnicity = document.getElementById('newborn_ethnicity').value;
             const emotion = document.getElementById('newborn_emotion').value;
             const pose = document.getElementById('newborn_pose').value;
             clothing_details = document.getElementById('newborn_details').value || "soft knitted fabric";
@@ -1335,9 +1499,9 @@ technical:: Masterpiece professional photograph, ${light} meticulously crafted t
             pose_info = `The baby is ${pose}.`;
             main_image_description = `A ${shotType} of a cute ${age} ${ethnicity} baby, ${emotion}. The baby is ${pose}, wearing EXACTLY: ${clothing_details}.`
         } else {
-            const age = document.getElementById('child_age').value;
+            age = document.getElementById('child_age').value;
             const gender = document.getElementById('child_gender').value;
-            const ethnicity = document.getElementById('child_ethnicity').value;
+            ethnicity = document.getElementById('child_ethnicity').value;
             const emotion = document.getElementById('child_emotion').value;
             const pose = document.getElementById('child_pose').value;
             clothing_details = document.getElementById('child_details').value || "detailed textured casual clothes";
@@ -1355,6 +1519,20 @@ detail_shot_2_description:: An extreme close-up of a key hardware detail from th
 detail_shot_3_description:: A close-up shot showcasing the quality of the craftsmanship, focusing on the stitching and seams of the garment described above.
 environment_and_lighting:: The main image environment is ${location}. The lighting is ${light}.
 technical:: Each individual image in this collage is an 8k UHD masterpiece, shot on Fujifilm XT4, 56mm F1.2 lens, with perfect ${light}, and razor-sharp focus.`;
+        } else if (generateMultipleVariants) {
+            shotType = 'Full body shot, wide angle'; 
+             subject = `An ultra-photorealistic portrait of 3 different children of similar age (${age}) and ethnicity (${ethnicity}). They are playing and laughing together.`;
+             pose_info = `The children are interacting naturally together in various playful poses.`;
+
+             fullPrompt = `${envKeyword}, style:: ${style}, luxury children's fashion campaign, cinematic storytelling, enchanting, ultra-photorealistic.
+composition:: ${shotType}. The final image must show all children from head to toe, without cropping feet or head.
+subject:: ${subject} The photograph must look like a cover shot for a high-end children's fashion magazine.
+clothing_focus:: CRITICAL INSTRUCTION - The children are wearing EXACTLY: ${clothing_details}. Each child wears a different color variant of this outfit. This description must be rendered with 1000% fidelity. This is the most important instruction.
+texture_&_material_fidelity:: Macro-level detail on clothing textures as described above. Focus on the weave of cotton, the softness of wool fibers, the texture of denim. Show realistic wrinkles and creases from movement. Absolute texture fidelity to the description is crucial.
+human_realism_details:: Capture the pure, innocent beauty of the children. Hyper-realistic, dewy skin with a natural glow and visible texture, not airbrushed. The light should have a painterly, almost magical quality. Eyes must be expressive, with realistic reflections and depth. Individual hair strands should be visible.
+scene_activity:: ${pose_info} The location is ${location}, creating a whimsical and high-end narrative.
+technical:: Masterpiece photograph, ${light} creating a magical and soft atmosphere, shot on Fujifilm XT4, 56mm F1.2 lens, 8k, tack sharp focus, impeccable detail, perfect color grading, looks like a real captured moment of wonder from a luxury campaign.`;
+
         } else {
             fullPrompt = `${envKeyword}, style:: ${style}, luxury children's fashion campaign, cinematic storytelling, enchanting, ultra-photorealistic.
 composition:: ${shotType}. If 'Full body shot' is selected, the final image must show the child from head to toe, without cropping feet or head.
@@ -1401,6 +1579,7 @@ technical:: Advertisement-grade photograph, ${objectLighting} designed to accent
         }
     }
 
+    fullPrompt = `${fullPrompt} ${aspectRatio}`;
     const cleanPrompt = fullPrompt.replace(/\\s+/g, ' ').replace(/\\n/g, ' ').trim();
 
     try {
@@ -1428,6 +1607,8 @@ document.addEventListener('DOMContentLoaded', () => {
     switchChildrenSubMode('newborn');
     autoAdjustDefaults();
     setupClickableSelectors();
+    setupCheckboxLogic('multiple_variants_checkbox', 'clothing_details_checkbox');
+    setupCheckboxLogic('child_multiple_variants_checkbox', 'child_clothing_details_checkbox');
 });
 </script>