Update app.py

app.py

@@ -223,40 +223,37 @@ css = """
     background-color: #191a1e !important;
     display: flex;
     flex-direction: column;
+    width: 100%;
 }
 
-/* Делаем адаптивный ряд */
+/* Ряды и колонки */
 .gr-row {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     align-items: flex-start;
+    width: 100%;
+    box-sizing: border-box;
 }
 
-/* Левая и правая колонки */
 .gr-column {
     flex: 1 1 auto;
     min-width: 300px;
     display: flex;
     flex-direction: column;
     gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
-/* Предварительно резервируем место для модели */
-.model-container {
-    min-height: 600px; /* Задайте подходящее значение, чтобы при появлении 3D модели и HDR она не сдвигала верстку */
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-/* Уменьшаем контейнеры с картинками */
+/* Уменьшаем размеры изображений */
 .gr-image img {
     max-width: 300px !important;
     max-height: 300px !important;
     object-fit: contain;
 }
 
+/* Кнопка */
 .generate-button {
     background-color: #5271FF !important;
     color: #FFFFFF !important;
@@ -267,13 +264,14 @@ css = """
     border-radius: 0.3em !important;
 }
 
-/* Примеры в отдельном блоке снизу, чтобы не "прыгали" */
-.examples-row {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    gap: 10px;
+/* Примеры сразу под кнопкой Run */
+.gr-examples {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 10px !important;
+    justify-content: flex-start !important;
+    align-items: center !important;
+    /* Так как примеры теперь в том же контейнере, они будут автоматически подстраиваться */
 }
 
 .gr-examples img {
@@ -328,7 +326,13 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 elem_classes="generate-button",
             )
 
-        with gr.Column(elem_id="model_container", elem_classes="model-container"):
+            # Примеры теперь находятся прямо под кнопкой Run
+            examples = gr.Examples(
+                examples=example_files,
+                inputs=input_img,
+            )
+
+        with gr.Column():
             output_3d = LitModel3D(
                 label="3D Model",
                 visible=False,
@@ -364,13 +368,6 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                         outputs=[output_3d],
                     )
 
-    # Примеры вынесены в отдельный блок ниже
-    with gr.Row(elem_id="examples_row", elem_classes="examples-row"):
-        examples = gr.Examples(
-            examples=example_files,
-            inputs=input_img,
-        )
-
     input_img.change(
         requires_bg_remove,
         inputs=[input_img, foreground_ratio],