Update app.py

app.py

@@ -216,23 +216,16 @@ css = """
     margin: 0 !important;
     padding: 0 !important;
     border: none !important;
-    width: 100% !important;
-    min-height: 100%;
 }
 
 /* Контейнер приложения */
 .gradio-container, .gr-app {
     background-color: #191a1e !important;
+    display: flex;
+    flex-direction: column;
 }
 
-/* Уменьшаем контейнеры с картинками */
-.gr-image img {
-    max-width: 300px !important;
-    max-height: 300px !important;
-    object-fit: contain;
-}
-
-/* Адаптивная верстка */
+/* Делаем адаптивный ряд */
 .gr-row {
     display: flex;
     flex-wrap: wrap;
@@ -240,6 +233,7 @@ css = """
     align-items: flex-start;
 }
 
+/* Левая и правая колонки */
 .gr-column {
     flex: 1 1 auto;
     min-width: 300px;
@@ -248,6 +242,21 @@ css = """
     gap: 10px;
 }
 
+/* Предварительно резервируем место для модели */
+.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;
@@ -258,13 +267,13 @@ css = """
     border-radius: 0.3em !important;
 }
 
-/* Примеры внизу адаптивно */
-.gr-examples {
-    display: flex !important;
-    flex-wrap: wrap !important;
-    gap: 10px !important;
-    justify-content: flex-start !important;
-    align-items: center !important;
+/* Примеры в отдельном блоке снизу, чтобы не "прыгали" */
+.examples-row {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 10px;
 }
 
 .gr-examples img {
@@ -319,7 +328,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 elem_classes="generate-button",
             )
 
-        with gr.Column():
+        with gr.Column(elem_id="model_container", elem_classes="model-container"):
             output_3d = LitModel3D(
                 label="3D Model",
                 visible=False,
@@ -355,10 +364,12 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                         outputs=[output_3d],
                     )
 
-    examples = gr.Examples(
-        examples=example_files,
-        inputs=input_img,
-    )
+    # Примеры вынесены в отдельный блок ниже
+    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,