Update app.py

app.py

@@ -53,40 +53,55 @@ def generate(image):
     mesh.export(mesh_path2.name)
     return mesh_path2.name
 
-# Loading bar controls
-def start_loading(loader_id):
-    return f"<script>document.getElementById('{loader_id}').style.display = 'block';</script>"
+def start_loading_image():
+    return "<div id='loading-image' style='display: block;'></div>"
 
-def stop_loading(loader_id):
-    return f"<script>document.getElementById('{loader_id}').style.display = 'none';</script>"
+def start_loading_processed():
+    return "<div id='loading-processed' style='display: block;'></div>"
+
+def start_loading_model():
+    return "<div id='loading-model' style='display: block;'></div>"
+def stop_loading_image():
+    return "<div id='loading-image' style='display: none;'></div>"
+
+def stop_loading_processed():
+    return "<div id='loading-processed' style='display: none;'></div>"
+
+def stop_loading_model():
+    return "<div id='loading-model' style='display: none;'></div>"
 
 # Custom CSS and theme
 css = """
-/* Loaders inside their respective rows */
-.loader {
-    display: none;
+.custom-loader {
+    display: none; /* По умолчанию скрыто */
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50%; 
+    left: 50%; 
     transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    border: 5px solid #f3f3f3;
-    border-top: 5px solid #5271FF;
-    border-radius: 50%;
+    width: 40px; 
+    height: 40px; 
+    border: 4px solid #f3f3f3; 
+    border-top: 4px solid #5271FF; 
+    border-radius: 50%; 
     animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Включение лоадеров внутри контейнеров */
+#loading-image {
+    z-index: 10; /* Вверху */
+}
+
+#loading-processed {
+    z-index: 10;
 }
 
-/* Loader container positions */
-#image-container,
-#process-container,
-#generate-container {
-    position: relative;
+#loading-model {
+    z-index: 10;
 }
 
 /* Button styling remains as original */
@@ -117,7 +132,10 @@ with gr.Blocks(css=css) as demo:
                 width=400,
                 height=300,
             )
-            loading_bar_image = gr.HTML("<div class='loader' id='image-loader'></div>")
+            loading_image = gr.HTML("<div id='loading-image' class='custom-loader'></div>")
+            loading_processed = gr.HTML("<div id='loading-processed' class='custom-loader'></div>")
+            loading_model = gr.HTML("<div id='loading-model' class='custom-loader'></div>")
+           
 
         # Row 2: Processing options
         with gr.Row(elem_id="process-container"):