Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import time  # Для эмуляции времени загрузки
 import tempfile
+import os
 import numpy as np
 import torch
 from PIL import Image
@@ -57,18 +58,13 @@ def generate(image):
     return mesh_path2.name
 
 
-# Функции для управления лоадерами
-def start_loading_processed():
-    return "<div id='loading-bar-processed' style='display: block;'></div>"
+# Функция для отображения загрузки
+def start_loading():
+    return "<div id='loading-bar' style='display: block;'></div>"
 
-def stop_loading_processed():
-    return "<div id='loading-bar-processed' style='display: none;'></div>"
 
-def start_loading_glb():
-    return "<div id='loading-bar-glb' style='display: block;'></div>"
-
-def stop_loading_glb():
-    return "<div id='loading-bar-glb' style='display: none;'></div>"
+def stop_loading():
+    return "<div id='loading-bar' style='display: none;'></div>"
 
 
 # Настройка темы и CSS
@@ -87,7 +83,8 @@ class CustomTheme(gr.themes.Base):
 
 
 css = """
-/* Скрываем системный лоадер Gradio */
+
+/* Скрываем нижний колонтитул */
 footer {
     visibility: hidden;
     height: 0;
@@ -96,37 +93,67 @@ footer {
     overflow: hidden;
 }
 
-/* Общий стиль */
+/* Применяем шрифты */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
 body, input, button, textarea, select, .gr-button {
     font-family: 'Poppins', sans-serif;
     background-color: #191a1e !important;
     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;
+/* Настройки заголовков */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    color: #FFFFFF;
+}
+
+/* Стиль для текстовых полей и кнопок */
+input[type="text"], textarea {
+    background-color: #191a1e !important;
+    color: #FFFFFF;
+    border: 1px solid #FFFFFF;
+}
+
+/* Слайдер */
+.gr-slider {
+    height: 40px !important; /* Увеличение высоты слайдера */
+    transition: all 0.3s ease !important; /* Плавные переходы */
+}
+
+.gr-slider .slider-value {
+    display: none !important; /* Прячем текст значения */
+}
+
+.gr-slider .slider::-webkit-slider-thumb {
+    height: 15px !important;
+    width: 15px !important;
+    background-color: #5271FF !important; /* Цвет совпадает с кнопкой */
     border-radius: 50%;
-    animation: spin 1s linear infinite;
 }
 
-@keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
+.gr-slider .slider::-webkit-slider-runnable-track {
+    background: #5271FF !important; /* Цвет заполнения слайдера */
 }
 
-/* Текст CheckBox в белый */
-.gr-checkbox label {
+/* Кнопка Generate */
+.generate-button {
+    background-color: #5271FF !important;
     color: #FFFFFF !important;
+    border: none;
+    font-weight: bold;
+}
+
+.generate-button:hover {
+    background-color: #405BBF !important; /* Цвет при наведении */
 }
+
+/* Выделяем текст для Prompt */
+.prompt-text {
+    font-weight: bold;
+    color: #FFFFFF;
+}
+
 """
 
 # Интерфейс
@@ -147,10 +174,7 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
                 interactive=False,
                 width=400,
                 height=300,
-                elem_id="processed-container",
             )
-            processed_loader = gr.HTML("<div id='loading-bar-processed'></div>")
-
         foreground_ratio = gr.Slider(
             label="Foreground Ratio",
             minimum=0.5,
@@ -159,28 +183,17 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             step=0.05,
         )
         do_remove_background = gr.Checkbox(
-            label="Remove Background",  # Текст перекрашен в белый через CSS
+            label="Remove Background",
             value=True,
         )
-
-        submit = gr.Button("Generate", elem_classes="generate-button")
-
-        with gr.Row():
-            output_model = gr.Model3D(
-                label="Generated GLB Model",
-                interactive=False,
-                elem_classes="gr-model3d-container",
-            )
-            glb_loader = gr.HTML("<div id='loading-bar-glb'></div>")
+        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_processed,
-            inputs=[],
-            outputs=[processed_loader],
-        ).then(
-            fn=start_loading_glb,
+            fn=start_loading,
             inputs=[],
-            outputs=[glb_loader],
+            outputs=[loading_bar],
         ).then(
             fn=check_input_image,
             inputs=[input_image],
@@ -189,18 +202,14 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
             fn=preprocess,
             inputs=[input_image, do_remove_background, foreground_ratio],
             outputs=[processed_image]
-        ).then(
-            fn=stop_loading_processed,
-            inputs=[],
-            outputs=[processed_loader],
         ).then(
             fn=generate,
             inputs=[processed_image],
             outputs=[output_model]
         ).then(
-            fn=stop_loading_glb,
+            fn=stop_loading,
             inputs=[],
-            outputs=[glb_loader],
+            outputs=[loading_bar],
         )
 
 # Запуск приложения
@@ -208,4 +217,4 @@ demo.launch(
     server_name="0.0.0.0",
     server_port=7860,
     share=True,
-)
+)