Update app.py

app.py

@@ -55,135 +55,139 @@ def generate(image):
     mesh_path2 = tempfile.NamedTemporaryFile(suffix=".glb", delete=False)
     mesh.export(mesh_path2.name)
     return mesh_path2.name
+def start_loading(loader_id):
+    return f"<script>document.getElementById('{loader_id}').style.display = 'block';</script>"
 
+def stop_loading(loader_id):
+    return f"<script>document.getElementById('{loader_id}').style.display = 'none';</script>"
 
 # Настройка темы и CSS
 class CustomTheme(gr.themes.Base):
     def __init__(self):
         super().__init__()
-        self.primary_hue = "#5271FF"
+        self.primary_hue = "#191a1e"
         self.background_fill_primary = "#191a1e"
+        self.background_fill_secondary = "#191a1e"
+        self.background_fill_tertiary = "#191a1e"
         self.text_color_primary = "#FFFFFF"
+        self.text_color_secondary = "#FFFFFF"
+        self.text_color_tertiary = "#FFFFFF"
         self.input_background_fill = "#191a1e"
         self.input_text_color = "#FFFFFF"
 
 
 css = """
-/* Лоадер */
-.loader-container {
+/* Общий стиль лоадеров */
+.loader {
+    display: none; /* Скрыт по умолчанию */
     position: absolute;
-    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;
-    border-top: 8px solid #5271FF;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    border: 5px solid #f3f3f3; /* Белый круг */
+    border-top: 5px solid #5271FF; /* Синий круг */
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }
 
+/* Анимация вращения */
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* Кнопка Generate */
-.generate-button {
-    background-color: #5271FF !important;
-    color: #FFFFFF !important;
-    border: none;
-    font-weight: bold;
-    padding: 10px 20px;
-    border-radius: 5px;
-}
-.generate-button:hover {
-    background-color: #405BBF !important;
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
 }
 
-/* Верхние контейнеры */
-.gr-column .gr-box {
-    position: relative;
-    height: 300px;
+/* Добавить позицию для контейнеров */
+#image-container,
+#process-container,
+#generate-container {
+    position: relative; /* Для размещения лоадера внутри */
 }
 """
 
 # Интерфейс
-with gr.Blocks(theme=CustomTheme(), css=css) as demo:
+with gr.Blocks(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():
-            with gr.Box():
-                input_image = gr.Image(
-                    label="Upload Image",
-                    image_mode="RGBA",
-                    sources="upload",
-                    type="pil",
-                )
-                gr.HTML("<div class='loader-container' id='loader-dropimage'><div id='loading-bar'></div></div>")
-            with gr.Box():
-                processed_image = gr.Image(
-                    label="Processed Image",
-                    interactive=False,
-                )
-                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,
-            maximum=1.0,
-            value=0.85,
-            step=0.05,
-        )
-        do_remove_background = gr.Checkbox(
-            label="Remove Background",  
-            value=True,
-        )
-        submit = gr.Button("Generate", elem_classes="generate-button")
-        output_model = gr.Model3D(
-            label="Generated GLB Model",
-            interactive=False,
-        )
-
-        submit.click(
-            lambda: gr.update(visible=True, target="loader-dropimage"),
-            inputs=[],
-            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]
-        ).then(
-            lambda: gr.update(visible=True, target="loader-glb"),
-            inputs=[],
-            outputs=[],
-        ).then(
-            fn=generate,
-            inputs=[processed_image],
-            outputs=[output_model]
-        ).then(
-            lambda: gr.update(visible=False, targets=["loader-dropimage", "loader-processedimage", "loader-glb"]),
-            inputs=[],
-            outputs=[],
-        )
+        with gr.Row(elem_id="image-container"):
+            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,
+            )
+            loading_bar_image = gr.HTML("<div class='loader' id='image-loader'></div>")
+        
+        with gr.Row(elem_id="process-container"):
+            foreground_ratio = gr.Slider(
+                label="Foreground Ratio",
+                minimum=0.5,
+                maximum=1.0,
+                value=0.85,
+                step=0.05,
+            )
+            do_remove_background = gr.Checkbox(label="Remove Background", value=True)
+            loading_bar_process = gr.HTML("<div class='loader' id='process-loader'></div>")
+        
+        with gr.Row(elem_id="generate-container"):
+            submit = gr.Button("Generate", elem_classes="generate-button")
+            output_model = gr.Model3D(
+                label="Generated GLB Model",
+                interactive=False,
+                elem_classes="gr-model3d-container",
+            )
+            loading_bar_generate = gr.HTML("<div class='loader' id='generate-loader'></div>")
+            # Обновленная цепочка действий для кнопки submit
+    submit.click(
+        fn=lambda: start_loading('image-loader'),  # Показать лоадер для загрузки изображения
+        inputs=[],
+        outputs=[loading_bar_image]
+    ).then(
+        fn=check_input_image,  # Проверить изображение
+        inputs=[input_image],
+        outputs=[]
+    ).then(
+        fn=lambda: stop_loading('image-loader'),  # Скрыть лоадер для загрузки
+        inputs=[],
+        outputs=[loading_bar_image]
+    ).then(
+        fn=lambda: start_loading('process-loader'),  # Показать лоадер для обработки
+        inputs=[],
+        outputs=[loading_bar_process]
+    ).then(
+        fn=preprocess,  # Обработка изображения
+        inputs=[input_image, do_remove_background, foreground_ratio],
+        outputs=[processed_image]
+    ).then(
+        fn=lambda: stop_loading('process-loader'),  # Скрыть лоадер для обработки
+        inputs=[],
+        outputs=[loading_bar_process]
+    ).then(
+        fn=lambda: start_loading('generate-loader'),  # Показать лоадер для генерации
+        inputs=[],
+        outputs=[loading_bar_generate]
+    ).then(
+        fn=generate,  # Генерация модели
+        inputs=[processed_image],
+        outputs=[output_model]
+    ).then(
+        fn=lambda: stop_loading('generate-loader'),  # Скрыть лоадер для генерации
+        inputs=[],
+        outputs=[loading_bar_generate]
+    )
+     
 
 demo.launch(
     server_name="0.0.0.0",