Update app.py

app.py

@@ -1,4 +1,5 @@
 import gradio as gr
+import time  # Для эмуляции времени загрузки
 import tempfile
 import os
 import numpy as np
@@ -48,6 +49,7 @@ def preprocess(input_image, do_remove_background, foreground_ratio):
 
 # Функция генерации 3D модели
 def generate(image):
+    time.sleep(3)  # Эмуляция времени обработки
     scene_codes = model(image, device=device)
     mesh = model.extract_mesh(scene_codes)[0]
     mesh = to_gradio_3d_orientation(mesh)
@@ -56,38 +58,28 @@ def generate(image):
     return mesh_path2.name
 
 
-# Настройка темы и CSS
-class CustomTheme(gr.themes.Base):
-    def __init__(self):
-        super().__init__()
-        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"
+# Функция для отображения загрузки
+def start_loading():
+    return "visible"
 
 
-css = """
-footer {
-    visibility: hidden;
-    height: 0;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}
+def stop_loading():
+    return "hidden"
+
 
+# Настройка темы и CSS
+css = """
+/* Фон для всей страницы */
 body, .gr-block, .gr-container {
-    font-family: 'Poppins', sans-serif !important;
     background-color: #191a1e !important;
     color: #FFFFFF !important;
+    font-family: 'Poppins', sans-serif !important;
 }
 
-h1, h2, h3, h4, h5, h6, p, label, .gr-button {
+/* Цвет текста для заголовков и меток */
+h1, h2, h3, h4, h5, h6, p, label, .gr-slider-label, .gr-checkbox {
     color: #FFFFFF !important;
+    font-weight: bold !important;
 }
 
 /* Стили кнопки Generate */
@@ -105,44 +97,36 @@ h1, h2, h3, h4, h5, h6, p, label, .gr-button {
     color: #FFFFFF !important;
 }
 
-/* Области для загрузки изображений */
+/* Фон и границы для областей изображений */
 gr-image-upload {
     background-color: #191a1e !important;
     border: 1px dashed #FFFFFF !important;
 }
 
+.gr-image-upload .dropzone {
+    background-color: #191a1e !important;
+    border: 1px dashed #FFFFFF !important;
+}
+
 .gr-image-upload .dropzone::before {
     content: 'Drop Image Here';
     color: #FFFFFF !important;
     font-size: 1rem;
     font-weight: bold;
     text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
 }
 
-.gr-image-upload .dropzone {
-    background-color: #191a1e !important;
-    border: 1px dashed #FFFFFF !important;
-}
-
-/* Слайдер и контейнеры */
-.gr-slider {
-    background-color: #191a1e !important;
-    color: #FFFFFF !important;
+/* Значение слайдера */
+.gr-slider input[type="range"]::-webkit-slider-thumb {
+    background-color: #5271FF !important;
 }
 
-.gr-checkbox {
+.gr-slider span {
     color: #FFFFFF !important;
+    font-weight: bold !important;
 }
 
-.drop-image, .processed-image {
-    background-color: #191a1e !important;
-    border: 1px solid #FFFFFF !important;
-}
-
+/* Фон и текст в вкладках */
 .gr-tab {
     background-color: #191a1e !important;
     border: 1px solid #FFFFFF !important;
@@ -152,12 +136,33 @@ gr-image-upload {
 
 .gr-tab label {
     color: #FFFFFF !important;
-    font-weight: bold;
+    font-weight: bold !important;
 }
+/* Прогресс-бар */
+#loading-bar {
+    visibility: hidden;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    border: 10px solid #f3f3f3;
+    border-top: 10px 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); }
+}
+
 """
 
 # Интерфейс
-with gr.Blocks(theme=CustomTheme(), css=css) as demo:
+with gr.Blocks(css=css) as demo:
     with gr.Column():
         gr.Markdown("**Upload and Process Your Image**")
         with gr.Row():
@@ -187,10 +192,15 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             value=True,
         )
         submit = gr.Button("Generate")
+        loading_bar = gr.HTML("<div id='loading-bar'></div>")
         output_model = gr.Model3D(label="Generated GLB Model", interactive=False)
 
         # Обработка кликов
         submit.click(
+            fn=start_loading,  # Включить прогресс-бар
+            inputs=[],
+            outputs=[loading_bar],
+        ).then(
             fn=check_input_image,
             inputs=[input_image],
             outputs=[]
@@ -202,6 +212,10 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             fn=generate,
             inputs=[processed_image],
             outputs=[output_model]
+        ).then(
+            fn=stop_loading,  # Отключить прогресс-бар
+            inputs=[],
+            outputs=[loading_bar],
         )
 
 # Запуск приложения