Update app.py

app.py

@@ -150,26 +150,36 @@ input[type="text"], textarea {
     margin-right: auto;
 }
 """
-
 with gr.Blocks(theme=CustomTheme(), css=css) as demo:
     with gr.Column(elem_id="main-container"):
         # Заголовок
         gr.Markdown("**Upload and Process Your Image**", elem_classes="prompt-text")
 
-        # Блок загрузки изображения и настроек
-        with gr.Row(elem_id="upload-and-settings"):
-            # Левый блок с загрузкой изображения
-            with gr.Column(scale=3, elem_id="image-upload-container"):
-                input_image = gr.Image(
-                    label="Upload Image",
-                    image_mode="RGBA",
-                    sources="upload",
-                    type="pil",
-                    elem_id="content_image",
-                    width=500,  # Увеличена ширина входного изображения
-                )
-            # Правый блок с настройками
-            with gr.Column(scale=2, elem_id="settings-container"):
+        # Блок загрузки и обработанного изображения
+        with gr.Row(elem_id="image-row"):
+            # Загрузка изображения
+            input_image = gr.Image(
+                label="Upload Image",
+                image_mode="RGBA",
+                sources="upload",
+                type="pil",
+                elem_id="content_image",
+                width=400,
+                height=300,  # Унификация высоты
+            )
+            # Обработанное изображение
+            processed_image = gr.Image(
+                label="Processed Image",
+                interactive=False,
+                elem_id="processed_image",
+                width=400,
+                height=300,  # Унификация высоты
+            )
+
+        # Блок настроек и кнопки
+        with gr.Row(elem_id="settings-and-generate"):
+            # Настройки
+            with gr.Column(scale=1, elem_id="settings-container"):
                 do_remove_background = gr.Checkbox(
                     label="Remove Background",
                     value=True,
@@ -181,38 +191,41 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                     value=0.85,
                     step=0.05,
                 )
-
-        # Блок с обработанным изображением
-        with gr.Row(elem_id="processed-image-container"):
-            processed_image = gr.Image(
-                label="Processed Image",
-                interactive=False,
-                elem_id="processed_image",
-            )
-
-        # Кнопка генерации
-        with gr.Row(elem_id="generate-button-container"):
-            submit = gr.Button(
-                "Generate",
-                scale=0,
-                variant="primary",
-                elem_classes="generate-button",
-            )
+            # Кнопка генерации
+            with gr.Column(scale=1, elem_id="generate-container"):
+                submit = gr.Button(
+                    "Generate",
+                    scale=0,
+                    variant="primary",
+                    elem_classes="generate-button",
+                )
 
         # Результаты генерации
         with gr.Row(elem_id="output-model-container"):
             with gr.Tab("OBJ Model"):
-                output_model = gr.Model3D(
-                    label="Generated OBJ Model",
-                    interactive=False,
-                )
+                with gr.Column():
+                    output_model = gr.Model3D(
+                        label="Generated OBJ Model",
+                        interactive=False,
+                    )
+                    # Кастомная анимация загрузки
+                    loading_obj = gr.Label(
+                        value="Loading...",
+                        elem_classes="loading-spinner",
+                    )
             with gr.Tab("GLB Model"):
-                output_model2 = gr.Model3D(
-                    label="Generated GLB Model",
-                    interactive=False,
-                )
+                with gr.Column():
+                    output_model2 = gr.Model3D(
+                        label="Generated GLB Model",
+                        interactive=False,
+                    )
+                    # Кастомная анимация загрузки
+                    loading_glb = gr.Label(
+                        value="Loading...",
+                        elem_classes="loading-spinner",
+                    )
 
-        # Привязка событий внутри контекста Blocks
+        # Привязка событий
         submit.click(
             fn=check_input_image,
             inputs=[input_image],
@@ -227,6 +240,30 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             outputs=[output_model, output_model2]
         )
 
+# CSS для унификации фона и анимации
+css += """
+/* Унификация фона Drop Image */
+.gr-image-upload {
+    background-color: #191a1e !important;
+    border: 1px dashed #FFFFFF !important;
+}
+
+/* Кастомная анимация загрузки */
+.loading-spinner {
+    font-size: 1.2rem;
+    color: #FFFFFF;
+    text-align: center;
+    margin-top: 20px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+"""
+
 # Запуск приложения
 demo.queue(max_size=10)
-demo.launch()
+demo.launch()
+