Update app.py

app.py

@@ -86,7 +86,7 @@ class CustomTheme(gr.themes.Base):
 
 
 css = """
-/* Скрываем нижний колонтитул */
+/* Скрываем нижний колонтитул и системный лоадер */
 footer {
     visibility: hidden;
     height: 0;
@@ -95,8 +95,9 @@ footer {
     overflow: hidden;
 }
 
-/* Применяем шрифты */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+#gradio-loader {
+    display: none !important;
+}
 
 /* Общий стиль */
 body, input, textarea, select {
@@ -105,34 +106,60 @@ body, input, textarea, select {
     color: #FFFFFF;
 }
 
+/* Кастомный круговой лоадер */
+#loading-bar-processed, #loading-bar-glb {
+    display: none; /* Скрыт по умолчанию */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60px;
+    height: 60px;
+    border: 8px solid #f3f3f3; /* Светло-серый фон */
+    border-top: 8px 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); }
+}
+
 /* Убираем фон у контейнеров */
 #processed-container, #glb-container {
-    background-color: #191a1e !important;
-    border: none !important;
+    width: 400px !important; /* Ширина как у Drop Image */
+    height: 300px !important; /* Высота как у Drop Image */
+    background-color: #191a1e !important; /* Цвет совпадает с бэкграундом */
+    border: none !important; /* Убираем границы */
 }
 
 /* Убираем фон и стили контейнера изображения */
 .gr-image {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
+    background-color: transparent !important; /* Прозрачный фон */
+    border: none !important; /* Убираем границы */
+    box-shadow: none !important; /* Убираем тени */
 }
 
-/* Общий стиль для всех контейнеров */
-.gr-column, .gr-row, .gr-block {
-    background-color: #191a1e !important;
-    border: none !important;
+/* Стиль кнопки Generate */
+.generate-button {
+    background-color: #5271FF !important; /* Голубой фон */
+    color: #FFFFFF !important; /* Белый текст */
+    border: none;
+    border-radius: 5px;
+    font-weight: bold;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-/* Настраиваем текстовые поля, чтобы они были прозрачными */
-.gr-input, .gr-textbox {
-    background-color: transparent !important;
-    color: #FFFFFF !important;
-    border: 1px solid #FFFFFF !important;
+.generate-button:hover {
+    background-color: #395BB5 !important; /* Тёмно-голубой при наведении */
 }
+
 """
 # Интерфейс
-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>")
@@ -150,7 +177,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             )
 
             # Обработанное изображение и лоадер
-            with gr.Column(elem_id="processed-container"):  # Контейнер для центровки лоадера
+            with gr.Column(elem_id="processed-container"):
                 processed_image = gr.Image(
                     label="Processed Image",
                     interactive=False,
@@ -176,7 +203,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
         submit = gr.Button("Generate", elem_classes="generate-button")
 
         # Контейнер для модели GLB и лоадера
-        with gr.Column(elem_id="glb-container"):  # Контейнер для центровки лоадера
+        with gr.Column(elem_id="glb-container"):
             output_model = gr.Model3D(
                 label="Generated GLB Model",
                 interactive=False,
@@ -185,35 +212,36 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
 
         # Логика кнопки и цепочки событий
         submit.click(
-            fn=start_loading_processed,  # Запускаем лоадер для обработанного изображения
+            fn=start_loading_processed,
             inputs=[],
             outputs=[processed_loader],
         ).then(
-            fn=check_input_image,  # Проверяем изображение
+            fn=check_input_image,
             inputs=[input_image],
             outputs=[]
         ).then(
-            fn=preprocess,  # Обрабатываем изображение
+            fn=preprocess,
             inputs=[input_image, do_remove_background, foreground_ratio],
             outputs=[processed_image]
         ).then(
-            fn=stop_loading_processed,  # Останавливаем лоадер для обработанного изображения
+            fn=stop_loading_processed,
             inputs=[],
             outputs=[processed_loader],
         ).then(
-            fn=start_loading_glb,  # Запускаем лоадер для модели GLB
+            fn=start_loading_glb,
             inputs=[],
             outputs=[glb_loader],
         ).then(
-            fn=generate,  # Генерируем 3D модель
+            fn=generate,
             inputs=[processed_image],
             outputs=[output_model]
         ).then(
-            fn=stop_loading_glb,  # Останавливаем лоадер для модели GLB
+            fn=stop_loading_glb,
             inputs=[],
             outputs=[glb_loader],
         )
 
+
 # Запуск приложения
 demo.launch(
     server_name="0.0.0.0",