Update app.py

app.py

@@ -73,13 +73,30 @@ class CustomTheme(gr.themes.Base):
 
 
 css = """
-/* Общий стиль для лоадера */
-.loading-bar {
-    display: none;
+/* Скрываем нижний колонтитул */
+footer {
+    visibility: hidden;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+/* Лоадер */
+.loader-container {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: none;
+}
+
+#loading-bar {
     width: 60px;
     height: 60px;
     border: 8px solid #f3f3f3;
@@ -88,25 +105,9 @@ css = """
     animation: spin 1s linear infinite;
 }
 
-/* Анимация вращения */
 @keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
-}
-
-/* Лоадер для DropImage */
-#drop-image-loader .loading-bar {
-    display: block;
-}
-
-/* Лоадер для Processed Image */
-#processed-image-loader .loading-bar {
-    display: block;
-}
-
-/* Лоадер для GLB */
-#glb-loader .loading-bar {
-    display: block;
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 """
 
@@ -115,20 +116,25 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
     with gr.Column():
         gr.Markdown("<span style='color: white; font-weight: bold;'>Upload and Process Your Image</span>")
         with gr.Row():
-            input_image = gr.Image(
-                label="Upload Image",
-                image_mode="RGBA",
-                sources="upload",
-                type="pil",
-                width=400,
-                height=300,
-            )
-            processed_image = gr.Image(
-                label="Processed Image",
-                interactive=False,
-                width=400,
-                height=300,
-            )
+            with gr.Column():
+                input_image = gr.Image(
+                    label="Upload Image",
+                    image_mode="RGBA",
+                    sources="upload",
+                    type="pil",
+                    width=400,
+                    height=300,
+                )
+                gr.HTML("<div class='loader-container' id='loader-dropimage'><div id='loading-bar'></div></div>")
+            with gr.Column():
+                processed_image = gr.Image(
+                    label="Processed Image",
+                    interactive=False,
+                    width=400,
+                    height=300,
+                )
+                gr.HTML("<div class='loader-container' id='loader-processedimage'><div id='loading-bar'></div></div>")
+        gr.HTML("<div class='loader-container' id='loader-glb'><div id='loading-bar'></div></div>")
         foreground_ratio = gr.Slider(
             label="Foreground Ratio",
             minimum=0.5,
@@ -137,45 +143,45 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             step=0.05,
         )
         do_remove_background = gr.Checkbox(
-            label="Remove Background",
+            label="Remove Background",  
             value=True,
         )
         submit = gr.Button("Generate", elem_classes="generate-button")
-        drop_loader = gr.HTML("<div id='drop-image-loader' class='loading-bar'></div>")
-        process_loader = gr.HTML("<div id='processed-image-loader' class='loading-bar'></div>")
         output_model = gr.Model3D(
             label="Generated GLB Model",
             interactive=False,
         )
-        model_loader = gr.HTML("<div id='glb-loader' class='loading-bar'></div>")
 
         submit.click(
-            fn=lambda: "<div id='drop-image-loader' class='loading-bar'></div>",
+            lambda: gr.update(visible=True, target="loader-dropimage"),
             inputs=[],
-            outputs=[drop_loader],
+            outputs=[],
         ).then(
             fn=check_input_image,
             inputs=[input_image],
             outputs=[]
+        ).then(
+            lambda: gr.update(visible=True, target="loader-processedimage"),
+            inputs=[],
+            outputs=[],
         ).then(
             fn=preprocess,
             inputs=[input_image, do_remove_background, foreground_ratio],
-            outputs=[processed_image],
+            outputs=[processed_image]
         ).then(
-            fn=lambda: "<div id='processed-image-loader' class='loading-bar'></div>",
+            lambda: gr.update(visible=True, target="loader-glb"),
             inputs=[],
-            outputs=[process_loader],
+            outputs=[],
         ).then(
             fn=generate,
             inputs=[processed_image],
-            outputs=[output_model],
+            outputs=[output_model]
         ).then(
-            fn=lambda: "<div id='glb-loader' class='loading-bar'></div>",
+            lambda: gr.update(visible=False, targets=["loader-dropimage", "loader-processedimage", "loader-glb"]),
             inputs=[],
-            outputs=[model_loader],
+            outputs=[],
         )
 
-# Запуск приложения
 demo.launch(
     server_name="0.0.0.0",
     server_port=7860,