Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 import time  # Для эмуляции времени загрузки
 import tempfile
-import os
 import numpy as np
 import torch
 from PIL import Image
@@ -58,17 +57,14 @@ 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():
+    return "<div id='loading-bar' style='display: none;'></div>"
 
-def stop_loading_glb():
-    return "<div id='loading-bar-glb' style='display: none;'></div>"
 
 # Настройка темы и CSS
 class CustomTheme(gr.themes.Base):
@@ -86,7 +82,7 @@ class CustomTheme(gr.themes.Base):
 
 
 css = """
-/* Скрываем нижний колонтитул и системный лоадер */
+/* Скрываем нижний колонтитул */
 footer {
     visibility: hidden;
     height: 0;
@@ -95,78 +91,99 @@ footer {
     overflow: hidden;
 }
 
-#gradio-loader {
-    display: none !important;
+/* Применяем шрифты */
+@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;
 }
 
-/* Общий стиль */
-body, input, textarea, select {
+/* Настройки заголовков */
+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;
 }
 
-/* Кастомный круговой лоадер */
-#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; /* Анимация вращения */
+/* Слайдер */
+.gr-slider {
+    height: 40px !important; /* Увеличение высоты слайдера */
+    transition: all 0.3s ease !important; /* Плавные переходы */
 }
 
-@keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
+.gr-slider .slider-value {
+    display: none !important; /* Прячем текст значения */
 }
 
-/* Убираем фон у контейнеров */
-#processed-container, #glb-container {
-    width: 400px !important; /* Ширина как у Drop Image */
-    height: 300px !important; /* Высота как у Drop Image */
-    background-color: #191a1e !important; /* Цвет совпадает с бэкграундом */
-    border: none !important; /* Убираем границы */
+.gr-slider .slider::-webkit-slider-thumb {
+    height: 15px !important;
+    width: 15px !important;
+    background-color: #5271FF !important; /* Цвет совпадает с кнопкой */
+    border-radius: 50%;
 }
 
-/* Убираем фон и стили контейнера изображения */
-.gr-image {
-    background-color: transparent !important; /* Прозрачный фон */
-    border: none !important; /* Убираем границы */
-    box-shadow: none !important; /* Убираем тени */
+.gr-slider .slider::-webkit-slider-runnable-track {
+    background: #5271FF !important; /* Цвет заполнения слайдера */
 }
 
-/* Стиль кнопки Generate */
+/* Кнопка Generate */
 .generate-button {
-    background-color: #5271FF !important; /* Голубой фон */
-    color: #FFFFFF !important; /* Белый текст */
+    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;
 }
 
 .generate-button:hover {
-    background-color: #395BB5 !important; /* Тёмно-голубой при наведении */
+    background-color: #405BBF !important; /* Цвет при наведении */
+}
+
+/* Выделяем текст для Prompt */
+.prompt-text {
+    font-weight: bold;
+    color: #FFFFFF;
+}
+
+/* Лоадер (анимация) */
+#loading-bar {
+    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); }
 }
 
+/* Текст CheckBox в белый */
+.gr-checkbox label {
+    color: #FFFFFF !important;
+}
 """
+
 # Интерфейс
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(theme=CustomTheme(), css=css) as demo:
     with gr.Column():
-        # Заголовок
         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",
@@ -175,18 +192,12 @@ with gr.Blocks(css=css) as demo:
                 width=400,
                 height=300,
             )
-
-            # Обработанное изображение и лоадер
-            with gr.Column(elem_id="processed-container"):
-                processed_image = gr.Image(
-                    label="Processed Image",
-                    interactive=False,
-                    width=400,
-                    height=300,
-                )
-                processed_loader = gr.HTML("<div id='loading-bar-processed'></div>")
-
-        # Слайдер и чекбокс
+            processed_image = gr.Image(
+                label="Processed Image",
+                interactive=False,
+                width=400,
+                height=300,
+            )
         foreground_ratio = gr.Slider(
             label="Foreground Ratio",
             minimum=0.5,
@@ -195,26 +206,21 @@ with gr.Blocks(css=css) as demo:
             step=0.05,
         )
         do_remove_background = gr.Checkbox(
-            label="Remove Background",
+            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",
+        )
 
-        # Контейнер для модели GLB и лоадера
-        with gr.Column(elem_id="glb-container"):
-            output_model = gr.Model3D(
-                label="Generated GLB Model",
-                interactive=False,
-            )
-            glb_loader = gr.HTML("<div id='loading-bar-glb'></div>")
-
-        # Логика кнопки и цепочки событий
         submit.click(
-            fn=start_loading_processed,
+            fn=start_loading,  # Включить прогресс-бар
             inputs=[],
-            outputs=[processed_loader],
+            outputs=[loading_bar],
         ).then(
             fn=check_input_image,
             inputs=[input_image],
@@ -223,28 +229,19 @@ with gr.Blocks(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=start_loading_glb,
-            inputs=[],
-            outputs=[glb_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],
         )
 
-
 # Запуск приложения
 demo.launch(
     server_name="0.0.0.0",
     server_port=7860,
     share=True,
-)
+)