Update app.py

app.py

@@ -1,5 +1,5 @@
 import gradio as gr
-import time  # For simulating loading times
+import time  # Для эмуляции времени загрузки
 import tempfile
 import numpy as np
 import torch
@@ -7,10 +7,10 @@ from PIL import Image
 from tsr.system import TSR
 from tsr.utils import remove_background, resize_foreground, to_gradio_3d_orientation
 
-# Check for GPU availability
+# Проверяем наличие GPU
 device = "cuda:0" if torch.cuda.is_available() else "cpu"
 
-# Load the model
+# Загружаем модель
 model = TSR.from_pretrained(
     "stabilityai/TripoSR",
     config_name="config.yaml",
@@ -19,12 +19,14 @@ model = TSR.from_pretrained(
 model.renderer.set_chunk_size(131072)
 model.to(device)
 
-# Function to check image input
+
+# Функция для проверки изображения
 def check_input_image(input_image):
     if input_image is None:
         raise gr.Error("No image uploaded!")
 
-# Image preprocessing
+
+# Функция обработки изображения
 def preprocess(input_image, do_remove_background, foreground_ratio):
     def fill_background(image):
         image = np.array(image).astype(np.float32) / 255.0
@@ -43,9 +45,10 @@ def preprocess(input_image, do_remove_background, foreground_ratio):
             image = fill_background(image)
     return image
 
-# 3D model generation
+
+# Функция генерации 3D модели
 def generate(image):
-    time.sleep(3)  # Simulate processing time
+    time.sleep(3)  # Эмуляция времени обработки
     scene_codes = model(image, device=device)
     mesh = model.extract_mesh(scene_codes)[0]
     mesh = to_gradio_3d_orientation(mesh)
@@ -53,71 +56,120 @@ def generate(image):
     mesh.export(mesh_path2.name)
     return mesh_path2.name
 
-def start_loading_image():
-    return "<div id='loading-image' style='display: block;'></div>"
 
-def start_loading_processed():
-    return "<div id='loading-processed' style='display: block;'></div>"
+def start_loading():
+    return gr.HTML.update(visible=True)
+
+def stop_loading():
+    return gr.HTML.update(visible=False)
 
-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>"
+# Настройка темы и 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 stop_loading_model():
-    return "<div id='loading-model' style='display: none;'></div>"
 
-# Custom CSS and theme
 css = """
-.custom-loader {
-    display: none; /* По умолчанию скрыто */
-    position: absolute;
-    top: 50%; 
-    left: 50%; 
-    transform: translate(-50%, -50%);
-    width: 40px; 
-    height: 40px; 
-    border: 4px solid #f3f3f3; 
-    border-top: 4px solid #5271FF; 
-    border-radius: 50%; 
-    animation: spin 1s linear infinite;
+/* Скрываем нижний колонтитул */
+footer {
+    visibility: hidden;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+/* Применяем шрифты */
+@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-image {
-    z-index: 10; /* Вверху */
+/* Настройки заголовков */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    color: #FFFFFF;
 }
-
-#loading-processed {
-    z-index: 10;
+/* Стиль для текстовых полей и кнопок */
+input[type="text"], textarea {
+    background-color: #191a1e !important;
+    color: #FFFFFF;
+    border: 1px solid #FFFFFF;
 }
-
-#loading-model {
-    z-index: 10;
+/* Слайдер */
+.gr-slider {
+    height: 40px !important; /* Увеличение высоты слайдера */
+    transition: all 0.3s ease !important; /* Плавные переходы */
 }
-
-/* Button styling remains as original */
+.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%;
+}
+.gr-slider .slider::-webkit-slider-runnable-track {
+    background: #5271FF !important; /* Цвет заполнения слайдера */
+}
+/* Кнопка Generate */
 .generate-button {
     background-color: #5271FF !important;
     color: #FFFFFF !important;
     border: none;
     font-weight: bold;
 }
+.generate-button:hover {
+    background-color: #405BBF !important; /* Цвет при наведении */
+}
+.generate-button {
+    position: relative; /* Кнопка становится родительским контейнером */
+}
+/* Выделяем текст для Prompt */
+.prompt-text {
+    font-weight: bold;
+    color: #FFFFFF;
+}
+/* Лоадер (анимация) */
+#loading-bar {
+    display: none; /* Скрыт по умолчанию */
+    position: relative; /* Изменено на relative для использования в кнопке */
+    margin: 0 auto; /* Центрируем внутри родительского элемента */
+    width: 30px; /* Уменьшен размер для кнопки */
+    height: 30px;
+    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); }
+}
+/* Текст CheckBox в белый */
+.gr-checkbox label {
+    color: #FFFFFF !important;
+}
 """
 
-# Gradio Interface
-with gr.Blocks(css=css) as demo:
+# Интерфейс
+with gr.Blocks(theme=CustomTheme(), css=css) as demo:
     with gr.Column():
-        # Row 1: Image upload
-        with gr.Row(elem_id="image-container"):
+        gr.Markdown("<span style='color: white; font-weight: bold;'>Upload and Process Your Image</span>")
+        with gr.Row():
             input_image = gr.Image(
                 label="Upload Image",
                 image_mode="RGBA",
@@ -132,75 +184,49 @@ with gr.Blocks(css=css) as demo:
                 width=400,
                 height=300,
             )
-            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"):
-            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>")
-
-        # Row 3: Generate button and 3D model
-        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 button functionality
-        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],
+        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",  # Текст перекрашен в белый через CSS
+            value=True,
+        )
+        submit = gr.Button("Generate", elem_classes="generate-button")
+        loading_bar = gr.HTML("<div id='loading-bar'></div>")
+        output_model = gr.Model3D(
+            label="Generated GLB Model",
+            interactive=False,
+            elem_classes="gr-model3d-container",
         )
 
-# Launch app
+    submit.click(
+    fn=start_loading,  # Включить прогресс-бар
+    inputs=[], 
+    outputs=[loading_bar]
+).then(
+    fn=check_input_image,
+    inputs=[input_image],
+    outputs=[]
+).then(
+    fn=preprocess,
+    inputs=[input_image, do_remove_background, foreground_ratio],
+    outputs=[processed_image]
+).then(
+    fn=generate,
+    inputs=[processed_image],
+    outputs=[output_model]
+).then(
+    fn=stop_loading,  # Отключаем прогресс-бар после завершения генерации
+    inputs=[],
+    outputs=[loading_bar]
+)
+# Запуск приложения
 demo.launch(
     server_name="0.0.0.0",
     server_port=7860,
     share=True,
-)
+)