Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 20 days ago

Commit

3cfc13d

verified ·

1 Parent(s): 2eb9d12

Update index.html

Browse files

Files changed (1) hide show

index.html +34 -55

index.html CHANGED Viewed

@@ -32,7 +32,7 @@ body {
 .container {
     background-color: var(--card-bg);
     width: 100%;
-    max-width: 750px; /* Немного увеличена ширина */
     padding: 35px;
     border-radius: 20px;
     border: 1px solid #222;
@@ -58,7 +58,6 @@ p.subtitle {
     letter-spacing: 0.5px;
 }
-/* Стилизация селекторов режимов */
 .mode-selector {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -114,12 +113,11 @@ label, .checkbox-label {
     letter-spacing: 0.8px;
 }
-label i { /* Иконки для заголовков */
     margin-right: 6px;
     font-size: 0.9em;
 }
 select, textarea, input[type="text"] {
     padding: 12px 14px;
     border: 1px solid var(--border);
@@ -203,7 +201,6 @@ select option {
     margin-right: 10px;
 }
-/* Стили для вложенного селектора в детском режиме */
 .sub-mode-selector {
     display: flex;
     justify-content: center;
@@ -238,8 +235,6 @@ select option {
     display: contents;
 }
-/* Responsive Design */
 @media (max-width: 600px) {
     .form-grid {
         grid-template-columns: 1fr;
@@ -254,11 +249,10 @@ select option {
         font-size: 1.8rem;
     }
     .mode-selector {
-        grid-template-columns: 1fr; /* Кнопки режимов в столбик на мобильных */
         gap: 5px;
     }
 }
 </style>
 </head>
 <body>
@@ -276,9 +270,7 @@ select option {
     <form id="promptForm">
         <div class="form-grid">
-            <!-- === MODEL PHOTOGRAPHY MODE === -->
             <div id="modelMode" class="form-mode">
-                <!-- Row 1 -->
                 <div class="form-group">
                     <label for="gender">Пол</label>
                     <select id="gender" onchange="autoAdjustDefaults()">
@@ -295,7 +287,6 @@ select option {
                         <option value="30-40 years old">30-40 лет</option>
                     </select>
                 </div>
-                <!-- Row 2 -->
                 <div class="form-group">
                     <label for="nationality">Внешность/Этнос</label>
                     <select id="nationality">
@@ -315,7 +306,6 @@ select option {
                         <option value="Skinny model look">Модельная худоба</option>
                     </select>
                 </div>
-                <!-- Row 3 -->
                 <div class="form-group">
                     <label for="hairColor">Цвет волос</label>
                     <select id="hairColor">
@@ -335,7 +325,6 @@ select option {
                         <option value="Fade cut">Фейд (Мужской)</option>
                     </select>
                 </div>
-                <!-- Row 4 -->
                 <div class="form-group">
                     <label for="emotion">Эмоция/Выражение лица</label>
                     <select id="emotion">
@@ -353,10 +342,9 @@ select option {
                         <option value="walking towards camera">Идет на камеру</option>
                         <option value="sitting relaxed">Сидит расслабленно</option>
                         <option value="leaning against a wall">Оперевшись о стену</option>
-                        <option value="dynamic action pose" selected>Динамичная поза</option> <!-- ИЗМЕНЕНО -->
                     </select>
                 </div>
-                <!-- Row 5 - COMPOSITION -->
                 <div class="form-group">
                     <label for="shotType">Ракурс/План</label>
                     <select id="shotType">
@@ -377,7 +365,6 @@ select option {
                         <option value="neon lights">Неоновый</option>
                     </select>
                 </div>
-                <!-- Row 6 - TECHNICAL STYLE -->
                 <div class="form-group">
                     <label for="style">Эстетика</label>
                     <select id="style">
@@ -399,8 +386,6 @@ select option {
                         <option value="shot on 35mm film, Kodak Portra 400">Пленка Kodak Portra</option>
                     </select>
                 </div>
-                <!-- Row 7 - LOCATION -->
                 <div class="form-group full-width">
                     <label for="location">Локация</label>
                     <select id="location">
@@ -416,21 +401,18 @@ select option {
                         <option value="inside a futuristic, sci-fi corridor with glowing lines">Фантастика (коридор)</option>
                     </select>
                 </div>
                 <div class="form-group full-width">
-                    <label for="model_details">Одежда и Детали</label>
-                    <textarea id="model_details" placeholder="Пример: в черном кожаном плаще и грубых ботинках, смотрит в камеру"></textarea>
                 </div>
             </div>
-            <!-- === CHILDREN PHOTOGRAPHY MODE === -->
             <div id="childrenMode" class="form-mode">
                 <div class="full-width sub-mode-selector">
                     <button id="newbornBtn" type="button" class="sub-mode-btn" onclick="switchChildrenSubMode('newborn')">Новорождённые</button>
                     <button id="olderChildrenBtn" type="button" class="sub-mode-btn" onclick="switchChildrenSubMode('older')">Дети и подростки</button>
                 </div>
-                <!-- Newborn Sub-Mode -->
                 <div id="newbornSubMode" class="sub-form-mode">
                     <div class="form-group">
                         <label>Пол</label>
@@ -471,12 +453,11 @@ select option {
                         </select>
                     </div>
                      <div class="form-group full-width">
-                        <label for="newborn_details">Одежда и Детали</label>
-                        <textarea id="newborn_details" placeholder="Пример: в милой вязаной шапочке с ушками"></textarea>
                     </div>
                 </div>
-                <!-- Older Children Sub-Mode -->
                  <div id="olderChildrenSubMode" class="sub-form-mode">
                     <div class="form-group">
                         <label for="child_gender">Пол</label>
@@ -524,12 +505,11 @@ select option {
                         </select>
                     </div>
                      <div class="form-group full-width">
-                        <label for="child_details">Одежда и Детали</label>
-                        <textarea id="child_details" placeholder="Пример: в джинсовом комбинезоне и яркой футболке"></textarea>
                     </div>
                 </div>
-                <!-- Common settings for all children -->
                  <div class="form-group">
                     <label for="child_shotType">Ракурс/План</label>
                     <select id="child_shotType">
@@ -570,7 +550,6 @@ select option {
                 </div>
             </div>
-            <!-- === OBJECT PHOTOGRAPHY MODE === -->
             <div id="objectMode" class="form-mode">
                 <div class="form-group full-width">
                     <label for="object_name">Название/Описание предмета</label>
@@ -618,7 +597,7 @@ select option {
                 </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>
@@ -663,7 +642,6 @@ function switchChildrenSubMode(subMode) {
     document.getElementById('olderChildrenBtn').classList.toggle('active', subMode === 'older');
 }
 function autoAdjustDefaults() {
     if (currentMode !== 'model') return;
     const gender = document.getElementById('gender').value;
@@ -684,14 +662,11 @@ function toggleCreativeMode() {
     document.getElementById('object_background').disabled = isCreative;
 }
 async function processAndOpen() {
     const btn = document.querySelector('.action-btn');
     const originalText = btn.innerHTML;
     let fullPrompt = '';
-    const negative_prompt = "cropped, watermark, text, 3d render, cartoon, anime, plastic look, doll, artificial, blurry, distorted, malformed, ugly, disfigured, amputation, ugly, gross, disgusting, nsfw";
     if (currentMode === 'model') {
         const style = document.getElementById('style').value;
         const shotType = document.getElementById('shotType').value;
@@ -703,19 +678,19 @@ async function processAndOpen() {
         const hairstyle = document.getElementById('hairstyle').value;
         const emotion = document.getElementById('emotion').value;
         const pose = document.getElementById('pose').value;
-        const details = document.getElementById('model_details').value || "in a casual stylish outfit";
         const location = document.getElementById('location').value;
         const light = document.getElementById('light').value;
         const camera = document.getElementById('camera').value;
-        const scene = `${details}, ${location}`;
         fullPrompt = `style:: ${style}.
 composition:: ${shotType}.
-subject:: A photorealistic portrait of a ${age} ${nationality} ${gender}.
-model_details:: physique is ${bodyType}, ${hairColor} ${hairstyle}, face expression is ${emotion}, pose is ${pose}.
-scene:: ${scene}.
-technical:: professional photography, ${light}, shot on ${camera}, 8k, sharp focus, hyper-detailed, realistic skin texture with pores, masterpiece.`;
     } else if (currentMode === 'children') {
         const style = document.getElementById('child_style').value;
@@ -723,40 +698,43 @@ technical:: professional photography, ${light}, shot on ${camera}, 8k, sharp foc
         const location = document.getElementById('child_location').value;
         const light = document.getElementById('child_light').value;
         let subject = '';
-        let scene_details = '';
         if(currentChildrenSubMode === 'newborn') {
             const age = document.getElementById('newborn_age').value;
             const ethnicity = document.getElementById('newborn_ethnicity').value;
             const emotion = document.getElementById('newborn_emotion').value;
             const pose = document.getElementById('newborn_pose').value;
-            const details = document.getElementById('newborn_details').value || "wearing cute and simple clothes";
             subject = `A beautiful, photorealistic portrait of a ${age} ${ethnicity} baby. Face expression is ${emotion}.`;
-            scene_details = `The baby is ${pose}. The baby is ${details}.`;
-        } else { // 'older' sub-mode
             const age = document.getElementById('child_age').value;
             const gender = document.getElementById('child_gender').value;
             const ethnicity = document.getElementById('child_ethnicity').value;
             const emotion = document.getElementById('child_emotion').value;
             const pose = document.getElementById('child_pose').value;
-            const details = document.getElementById('child_details').value || "in stylish casual clothes";
             subject = `A beautiful, photorealistic portrait of a ${age} ${ethnicity} ${gender}. Face expression is ${emotion}.`;
-            scene_details = `The child is ${pose}. The child is ${details}.`;
         }
         fullPrompt = `style:: ${style}.
 composition:: ${shotType}.
 subject:: ${subject}
-scene:: ${scene_details} The scene is ${location}.
-technical:: professional photography, ${light}, shot on Fujifilm XT4, 56mm F1.2 lens, 8k, sharp focus, hyper-detailed, realistic skin texture, masterpiece.`;
-    } else { // Object mode
         const objectName = document.getElementById('object_name').value || "a product";
         const objectStyle = document.getElementById('object_style').value;
         const objectLighting = document.getElementById('object_lighting').value;
         const objectComposition = document.getElementById('object_composition').value;
         const isCreative = document.getElementById('creative_mode').checked;
-        const objectDetails = document.getElementById('object_details').value || "clean and elegant";
         let background = '';
         if (isCreative) {
@@ -767,9 +745,10 @@ technical:: professional photography, ${light}, shot on Fujifilm XT4, 56mm F1.2
         fullPrompt = `style:: Professional product photography, ${objectStyle}.
 subject:: A hyper-detailed shot of ${objectName}.
-scene:: Placed ${background}. The scene includes additional elements: ${objectDetails}.
 composition:: ${objectComposition}.
-technical:: commercial studio quality, ${objectLighting}, 8k resolution, sharp focus, ultra-realistic, masterpiece.`;
     }
     const cleanPrompt = fullPrompt.replace(/\s+/g, ' ').replace(/\n/g, ' ').trim();

 .container {
     background-color: var(--card-bg);
     width: 100%;
+    max-width: 750px;
     padding: 35px;
     border-radius: 20px;
     border: 1px solid #222;
     letter-spacing: 0.5px;
 }
 .mode-selector {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     letter-spacing: 0.8px;
 }
+label i {
     margin-right: 6px;
     font-size: 0.9em;
 }
 select, textarea, input[type="text"] {
     padding: 12px 14px;
     border: 1px solid var(--border);
     margin-right: 10px;
 }
 .sub-mode-selector {
     display: flex;
     justify-content: center;
     display: contents;
 }
 @media (max-width: 600px) {
     .form-grid {
         grid-template-columns: 1fr;
         font-size: 1.8rem;
     }
     .mode-selector {
+        grid-template-columns: 1fr;
         gap: 5px;
     }
 }
 </style>
 </head>
 <body>
     <form id="promptForm">
         <div class="form-grid">
             <div id="modelMode" class="form-mode">
                 <div class="form-group">
                     <label for="gender">Пол</label>
                     <select id="gender" onchange="autoAdjustDefaults()">
                         <option value="30-40 years old">30-40 лет</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <label for="nationality">Внешность/Этнос</label>
                     <select id="nationality">
                         <option value="Skinny model look">Модельная худоба</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <label for="hairColor">Цвет волос</label>
                     <select id="hairColor">
                         <option value="Fade cut">Фейд (Мужской)</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <label for="emotion">Эмоция/Выражение лица</label>
                     <select id="emotion">
                         <option value="walking towards camera">Идет на камеру</option>
                         <option value="sitting relaxed">Сидит расслабленно</option>
                         <option value="leaning against a wall">Оперевшись о стену</option>
+                        <option value="dynamic action pose" selected>Динамичная поза</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <label for="shotType">Ракурс/План</label>
                     <select id="shotType">
                         <option value="neon lights">Неоновый</option>
                     </select>
                 </div>
                 <div class="form-group">
                     <label for="style">Эстетика</label>
                     <select id="style">
                         <option value="shot on 35mm film, Kodak Portra 400">Пленка Kodak Portra</option>
                     </select>
                 </div>
                 <div class="form-group full-width">
                     <label for="location">Локация</label>
                     <select id="location">
                         <option value="inside a futuristic, sci-fi corridor with glowing lines">Фантастика (коридор)</option>
                     </select>
                 </div>
                 <div class="form-group full-width">
+                    <label for="model_details">Одежда и Детали (Опишите ткань и фасон!)</label>
+                    <textarea id="model_details" placeholder="Укажите ткань и детали. Пример: в черном кожаном плаще с грубой текстурой, заметные швы, массивная металлическая фурнитура, шелковый шарф"></textarea>
                 </div>
             </div>
             <div id="childrenMode" class="form-mode">
                 <div class="full-width sub-mode-selector">
                     <button id="newbornBtn" type="button" class="sub-mode-btn" onclick="switchChildrenSubMode('newborn')">Новорождённые</button>
                     <button id="olderChildrenBtn" type="button" class="sub-mode-btn" onclick="switchChildrenSubMode('older')">Дети и подростки</button>
                 </div>
                 <div id="newbornSubMode" class="sub-form-mode">
                     <div class="form-group">
                         <label>Пол</label>
                         </select>
                     </div>
                      <div class="form-group full-width">
+                        <label for="newborn_details">Одежда и Детали (Ткань, вязка)</label>
+                        <textarea id="newborn_details" placeholder="Пример: в вязаной шапочке крупной вязки (шерсть мериноса), хлопковая пеленка с текстурой муслина"></textarea>
                     </div>
                 </div>
                  <div id="olderChildrenSubMode" class="sub-form-mode">
                     <div class="form-group">
                         <label for="child_gender">Пол</label>
                         </select>
                     </div>
                      <div class="form-group full-width">
+                        <label for="child_details">Одежда и Детали (Опишите материалы!)</label>
+                        <textarea id="child_details" placeholder="Пример: джинсовый комбинезон с потертостями и металлическими пуговицами, вельветовая рубашка в рубчик"></textarea>
                     </div>
                 </div>
                  <div class="form-group">
                     <label for="child_shotType">Ракурс/План</label>
                     <select id="child_shotType">
                 </div>
             </div>
             <div id="objectMode" class="form-mode">
                 <div class="form-group full-width">
                     <label for="object_name">Название/Описание предмета</label>
                 </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>
     document.getElementById('olderChildrenBtn').classList.toggle('active', subMode === 'older');
 }
 function autoAdjustDefaults() {
     if (currentMode !== 'model') return;
     const gender = document.getElementById('gender').value;
     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 style = document.getElementById('style').value;
         const shotType = document.getElementById('shotType').value;
         const hairstyle = document.getElementById('hairstyle').value;
         const emotion = document.getElementById('emotion').value;
         const pose = document.getElementById('pose').value;
+        const details = document.getElementById('model_details').value || "high-end fashion garments";
         const location = document.getElementById('location').value;
         const light = document.getElementById('light').value;
         const camera = document.getElementById('camera').value;
         fullPrompt = `style:: ${style}.
 composition:: ${shotType}.
+subject:: Photorealistic portrait of a ${age} ${nationality} ${gender}.
+model_characteristics:: physique ${bodyType}, ${hairColor} ${hairstyle}, expression ${emotion}, pose ${pose}.
+clothing_focus:: The subject is wearing ${details}.
+texture_&_material_fidelity:: Render clothing with extreme macro precision. Focus on fabric weave, thread count, visible stitching seams, material weight, realistic folds, tactile surface imperfections, and light interaction with the fabric (sheen, matte, transparency). Every thread and fiber must be sharp and visible.
+scene_environment:: ${location}.
+technical:: professional photography, ${light}, shot on ${camera}, 8k, sharp focus, hyper-detailed, realistic skin texture with pores, raw photo, uncompressed, macro fabric details.`;
     } else if (currentMode === 'children') {
         const style = document.getElementById('child_style').value;
         const location = document.getElementById('child_location').value;
         const light = document.getElementById('child_light').value;
         let subject = '';
+        let pose_info = '';
+        let clothing_details = '';
         if(currentChildrenSubMode === 'newborn') {
             const age = document.getElementById('newborn_age').value;
             const 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";
             subject = `A beautiful, photorealistic portrait of a ${age} ${ethnicity} baby. Face expression is ${emotion}.`;
+            pose_info = `The baby is ${pose}.`;
+        } else {
             const age = document.getElementById('child_age').value;
             const gender = document.getElementById('child_gender').value;
             const 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";
             subject = `A beautiful, photorealistic portrait of a ${age} ${ethnicity} ${gender}. Face expression is ${emotion}.`;
+            pose_info = `The child is ${pose}.`;
         }
         fullPrompt = `style:: ${style}.
 composition:: ${shotType}.
 subject:: ${subject}
+clothing_focus:: The child is wearing ${clothing_details}.
+texture_&_material_fidelity:: Extreme attention to textile details. Render the exact texture of knitted wool, denim, cotton, or lace. Show individual threads, fabric fuzz, stitching patterns, and realistic material draping. 100% texture fidelity.
+scene_activity:: ${pose_info} The location is ${location}.
+technical:: professional photography, ${light}, shot on Fujifilm XT4, 56mm F1.2 lens, 8k, sharp focus, hyper-detailed, realistic skin texture, tactile fabric textures, masterpiece.`;
+    } else {
         const objectName = document.getElementById('object_name').value || "a product";
         const objectStyle = document.getElementById('object_style').value;
         const objectLighting = document.getElementById('object_lighting').value;
         const objectComposition = document.getElementById('object_composition').value;
         const isCreative = document.getElementById('creative_mode').checked;
+        const objectDetails = document.getElementById('object_details').value || "rich textures";
         let background = '';
         if (isCreative) {
         fullPrompt = `style:: Professional product photography, ${objectStyle}.
 subject:: A hyper-detailed shot of ${objectName}.
+material_focus:: Render materials with 100% physical accuracy. Focus on surface imperfections, microscopic scratches, dust particles, realistic refractions, material grain (leather, metal, glass, plastic), and tactile finish.
+scene_context:: Placed ${background}. Additional details: ${objectDetails}.
 composition:: ${objectComposition}.
+technical:: commercial studio quality, ${objectLighting}, 8k resolution, sharp focus, ultra-realistic, macro details, ray-traced reflections, masterpiece.`;
     }
     const cleanPrompt = fullPrompt.replace(/\s+/g, ' ').replace(/\n/g, ' ').trim();