Spaces:
Paused
Paused
Update app.py
Browse files
app.py
CHANGED
@@ -1,5 +1,3 @@
|
|
1 |
-
|
2 |
-
|
3 |
import gradio as gr
|
4 |
import time # Для эмуляции времени загрузки
|
5 |
import tempfile
|
@@ -21,13 +19,11 @@ model = TSR.from_pretrained(
|
|
21 |
model.renderer.set_chunk_size(131072)
|
22 |
model.to(device)
|
23 |
|
24 |
-
|
25 |
# Функция для проверки изображения
|
26 |
def check_input_image(input_image):
|
27 |
if input_image is None:
|
28 |
raise gr.Error("No image uploaded!")
|
29 |
|
30 |
-
|
31 |
# Функция обработки изображения
|
32 |
def preprocess(input_image, do_remove_background, foreground_ratio):
|
33 |
def fill_background(image):
|
@@ -47,7 +43,6 @@ def preprocess(input_image, do_remove_background, foreground_ratio):
|
|
47 |
image = fill_background(image)
|
48 |
return image
|
49 |
|
50 |
-
|
51 |
# Функция генерации 3D модели
|
52 |
def generate(image):
|
53 |
time.sleep(3) # Эмуляция времени обработки
|
@@ -58,118 +53,21 @@ def generate(image):
|
|
58 |
mesh.export(mesh_path2.name)
|
59 |
return mesh_path2.name
|
60 |
|
61 |
-
|
62 |
-
def
|
|
|
63 |
return f"""
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
|
|
68 |
"""
|
69 |
|
70 |
-
def stop_loading(container_id):
|
71 |
-
return f"""
|
72 |
-
<script>
|
73 |
-
document.getElementById('loader-{container_id}').style.display = 'none';
|
74 |
-
</script>
|
75 |
-
|
76 |
-
|
77 |
# Настройка темы и CSS
|
78 |
-
class CustomTheme(gr.themes.Base):
|
79 |
-
def __init__(self):
|
80 |
-
super().__init__()
|
81 |
-
self.primary_hue = "#191a1e"
|
82 |
-
self.background_fill_primary = "#191a1e"
|
83 |
-
self.background_fill_secondary = "#191a1e"
|
84 |
-
self.background_fill_tertiary = "#191a1e"
|
85 |
-
self.text_color_primary = "#FFFFFF"
|
86 |
-
self.text_color_secondary = "#FFFFFF"
|
87 |
-
self.text_color_tertiary = "#FFFFFF"
|
88 |
-
self.input_background_fill = "#191a1e"
|
89 |
-
self.input_text_color = "#FFFFFF"
|
90 |
-
|
91 |
-
|
92 |
css = """
|
93 |
-
/* Скрываем нижний колонтитул */
|
94 |
-
footer {
|
95 |
-
visibility: hidden;
|
96 |
-
height: 0;
|
97 |
-
margin: 0;
|
98 |
-
padding: 0;
|
99 |
-
overflow: hidden;
|
100 |
-
}
|
101 |
-
|
102 |
-
/* Применяем шрифты */
|
103 |
-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
|
104 |
-
body, input, button, textarea, select, .gr-button {
|
105 |
-
font-family: 'Poppins', sans-serif;
|
106 |
-
background-color: #191a1e !important;
|
107 |
-
color: #FFFFFF;
|
108 |
-
}
|
109 |
-
|
110 |
-
/* Настройки заголовков */
|
111 |
-
h1, h2, h3, h4, h5, h6 {
|
112 |
-
font-family: 'Poppins', sans-serif;
|
113 |
-
font-weight: 700;
|
114 |
-
color: #FFFFFF;
|
115 |
-
}
|
116 |
-
|
117 |
-
/* Стиль для текстовых полей и кнопок */
|
118 |
-
input[type="text"], textarea {
|
119 |
-
background-color: #191a1e !important;
|
120 |
-
color: #FFFFFF;
|
121 |
-
border: 1px solid #FFFFFF;
|
122 |
-
}
|
123 |
-
|
124 |
-
/* Слайдер */
|
125 |
-
.gr-slider {
|
126 |
-
height: 40px !important;
|
127 |
-
transition: all 0.3s ease !important;
|
128 |
-
}
|
129 |
-
|
130 |
-
.gr-slider .slider-value {
|
131 |
-
display: none !important;
|
132 |
-
}
|
133 |
-
|
134 |
-
.gr-slider .slider::-webkit-slider-thumb {
|
135 |
-
height: 15px !important;
|
136 |
-
width: 15px !important;
|
137 |
-
background-color: #5271FF !important;
|
138 |
-
border-radius: 50%;
|
139 |
-
}
|
140 |
-
|
141 |
-
.gr-slider .slider::-webkit-slider-runnable-track {
|
142 |
-
background: #5271FF !important;
|
143 |
-
}
|
144 |
-
|
145 |
-
/* Кнопка Generate */
|
146 |
-
.generate-button {
|
147 |
-
background-color: #5271FF !important;
|
148 |
-
color: #FFFFFF !important;
|
149 |
-
border: none;
|
150 |
-
font-weight: bold;
|
151 |
-
}
|
152 |
-
|
153 |
-
.generate-button:hover {
|
154 |
-
background-color: #405BBF !important;
|
155 |
-
}
|
156 |
-
|
157 |
-
/* Выделяем текст для Prompt */
|
158 |
-
.prompt-text {
|
159 |
-
font-weight: bold;
|
160 |
-
color: #FFFFFF;
|
161 |
-
}
|
162 |
-
|
163 |
-
/* Контейнеры для правильного позиционирования лоадера */
|
164 |
-
.upload-container,
|
165 |
-
.processed-container,
|
166 |
-
.gr-model3d-container {
|
167 |
-
position: relative !important;
|
168 |
-
}
|
169 |
-
|
170 |
-
/* Обновленный стиль лоадера */
|
171 |
#loading-bar {
|
172 |
-
display: none;
|
173 |
position: absolute;
|
174 |
top: 50%;
|
175 |
left: 50%;
|
@@ -177,43 +75,25 @@ input[type="text"], textarea {
|
|
177 |
width: 60px;
|
178 |
height: 60px;
|
179 |
border: 8px solid #f3f3f3;
|
180 |
-
border-top: 8px solid #5271FF;
|
181 |
border-radius: 50%;
|
182 |
animation: spin 1s linear infinite;
|
183 |
-
z-index: 1000;
|
184 |
}
|
185 |
-
|
186 |
-
/* Анимация вращения */
|
187 |
@keyframes spin {
|
188 |
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
189 |
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
190 |
}
|
191 |
-
|
192 |
-
|
193 |
-
.gr-checkbox label {
|
194 |
-
color: #FFFFFF !important;
|
195 |
-
}
|
196 |
-
|
197 |
-
/* Убедимся, что контейнеры изображений правильно позиционированы */
|
198 |
-
.image-container {
|
199 |
-
position: relative !important;
|
200 |
-
width: 100%;
|
201 |
-
height: 100%;
|
202 |
-
}
|
203 |
-
|
204 |
-
/* Стили для контейнера с 3D моделью */
|
205 |
-
.gr-model3d-container {
|
206 |
-
position: relative !important;
|
207 |
-
min-height: 400px;
|
208 |
}
|
209 |
"""
|
210 |
|
211 |
# Интерфейс
|
212 |
-
with gr.Blocks(
|
213 |
with gr.Column():
|
214 |
gr.Markdown("<span style='color: white; font-weight: bold;'>Upload and Process Your Image</span>")
|
215 |
with gr.Row():
|
216 |
-
with gr.Column(elem_classes="
|
217 |
input_image = gr.Image(
|
218 |
label="Upload Image",
|
219 |
image_mode="RGBA",
|
@@ -222,17 +102,17 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
|
|
222 |
width=400,
|
223 |
height=300,
|
224 |
)
|
225 |
-
|
226 |
-
|
227 |
-
with gr.Column(elem_classes="
|
228 |
processed_image = gr.Image(
|
229 |
label="Processed Image",
|
230 |
interactive=False,
|
231 |
width=400,
|
232 |
height=300,
|
233 |
)
|
234 |
-
process_loader = gr.HTML(
|
235 |
-
|
236 |
foreground_ratio = gr.Slider(
|
237 |
label="Foreground Ratio",
|
238 |
minimum=0.5,
|
@@ -240,57 +120,45 @@ with gr.Blocks(theme=CustomTheme(), css=css) as demo:
|
|
240 |
value=0.85,
|
241 |
step=0.05,
|
242 |
)
|
243 |
-
do_remove_background = gr.Checkbox(
|
244 |
-
label="Remove Background",
|
245 |
-
value=True,
|
246 |
-
)
|
247 |
submit = gr.Button("Generate", elem_classes="generate-button")
|
248 |
-
|
249 |
-
with gr.Column(elem_classes="model3d-container"):
|
250 |
output_model = gr.Model3D(
|
251 |
label="Generated GLB Model",
|
252 |
interactive=False,
|
253 |
)
|
254 |
-
|
255 |
|
256 |
-
# Обновляем цепочку событий
|
257 |
submit.click(
|
258 |
-
fn=lambda: ""
|
259 |
-
|
260 |
-
|
261 |
).then(
|
262 |
fn=check_input_image,
|
263 |
inputs=[input_image],
|
264 |
-
outputs=[]
|
265 |
-
).then(
|
266 |
-
fn=lambda: """<div id='loading-bar' style='display: block;'></div>""",
|
267 |
-
outputs=[process_loader],
|
268 |
-
show_progress=False,
|
269 |
).then(
|
270 |
fn=preprocess,
|
271 |
inputs=[input_image, do_remove_background, foreground_ratio],
|
272 |
-
outputs=[processed_image]
|
273 |
).then(
|
274 |
-
fn=lambda: ""
|
275 |
-
|
276 |
-
|
277 |
).then(
|
278 |
-
fn=lambda: ""
|
279 |
-
|
280 |
-
|
281 |
).then(
|
282 |
fn=generate,
|
283 |
inputs=[processed_image],
|
284 |
-
outputs=[output_model]
|
285 |
-
).then(
|
286 |
-
fn=lambda: """<div id='loading-bar' style='display: none;'></div>""",
|
287 |
-
outputs=[process_loader],
|
288 |
-
show_progress=False,
|
289 |
).then(
|
290 |
-
fn=lambda: ""
|
291 |
-
|
292 |
-
|
293 |
)
|
|
|
294 |
# Запуск приложения
|
295 |
demo.launch(
|
296 |
server_name="0.0.0.0",
|
|
|
|
|
|
|
1 |
import gradio as gr
|
2 |
import time # Для эмуляции времени загрузки
|
3 |
import tempfile
|
|
|
19 |
model.renderer.set_chunk_size(131072)
|
20 |
model.to(device)
|
21 |
|
|
|
22 |
# Функция для проверки изображения
|
23 |
def check_input_image(input_image):
|
24 |
if input_image is None:
|
25 |
raise gr.Error("No image uploaded!")
|
26 |
|
|
|
27 |
# Функция обработки изображения
|
28 |
def preprocess(input_image, do_remove_background, foreground_ratio):
|
29 |
def fill_background(image):
|
|
|
43 |
image = fill_background(image)
|
44 |
return image
|
45 |
|
|
|
46 |
# Функция генерации 3D модели
|
47 |
def generate(image):
|
48 |
time.sleep(3) # Эмуляция времени обработки
|
|
|
53 |
mesh.export(mesh_path2.name)
|
54 |
return mesh_path2.name
|
55 |
|
56 |
+
# Функция для управления отображением лоадера
|
57 |
+
def toggle_loader(container_id, visible):
|
58 |
+
display = "block" if visible else "none"
|
59 |
return f"""
|
60 |
+
<style>
|
61 |
+
#{container_id} #loading-bar {{
|
62 |
+
display: {display};
|
63 |
+
}}
|
64 |
+
</style>
|
65 |
"""
|
66 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
67 |
# Настройка темы и CSS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
68 |
css = """
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
69 |
#loading-bar {
|
70 |
+
display: none; /* Скрыт по умолчанию */
|
71 |
position: absolute;
|
72 |
top: 50%;
|
73 |
left: 50%;
|
|
|
75 |
width: 60px;
|
76 |
height: 60px;
|
77 |
border: 8px solid #f3f3f3;
|
78 |
+
border-top: 8px solid #5271FF; /* Цвет лоадера */
|
79 |
border-radius: 50%;
|
80 |
animation: spin 1s linear infinite;
|
|
|
81 |
}
|
|
|
|
|
82 |
@keyframes spin {
|
83 |
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
84 |
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
85 |
}
|
86 |
+
.container {
|
87 |
+
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
88 |
}
|
89 |
"""
|
90 |
|
91 |
# Интерфейс
|
92 |
+
with gr.Blocks(css=css) as demo:
|
93 |
with gr.Column():
|
94 |
gr.Markdown("<span style='color: white; font-weight: bold;'>Upload and Process Your Image</span>")
|
95 |
with gr.Row():
|
96 |
+
with gr.Column(elem_id="DropImage", elem_classes="container"):
|
97 |
input_image = gr.Image(
|
98 |
label="Upload Image",
|
99 |
image_mode="RGBA",
|
|
|
102 |
width=400,
|
103 |
height=300,
|
104 |
)
|
105 |
+
drop_loader = gr.HTML("<div id='loading-bar'></div>")
|
106 |
+
|
107 |
+
with gr.Column(elem_id="ProcessedImage", elem_classes="container"):
|
108 |
processed_image = gr.Image(
|
109 |
label="Processed Image",
|
110 |
interactive=False,
|
111 |
width=400,
|
112 |
height=300,
|
113 |
)
|
114 |
+
process_loader = gr.HTML("<div id='loading-bar'></div>")
|
115 |
+
|
116 |
foreground_ratio = gr.Slider(
|
117 |
label="Foreground Ratio",
|
118 |
minimum=0.5,
|
|
|
120 |
value=0.85,
|
121 |
step=0.05,
|
122 |
)
|
123 |
+
do_remove_background = gr.Checkbox(label="Remove Background", value=True)
|
|
|
|
|
|
|
124 |
submit = gr.Button("Generate", elem_classes="generate-button")
|
125 |
+
with gr.Column(elem_id="GLB", elem_classes="container"):
|
|
|
126 |
output_model = gr.Model3D(
|
127 |
label="Generated GLB Model",
|
128 |
interactive=False,
|
129 |
)
|
130 |
+
glb_loader = gr.HTML("<div id='loading-bar'></div>")
|
131 |
|
|
|
132 |
submit.click(
|
133 |
+
fn=lambda: toggle_loader("DropImage", True), # Включаем лоадер в DropImage
|
134 |
+
inputs=[],
|
135 |
+
outputs=[drop_loader],
|
136 |
).then(
|
137 |
fn=check_input_image,
|
138 |
inputs=[input_image],
|
139 |
+
outputs=[]
|
|
|
|
|
|
|
|
|
140 |
).then(
|
141 |
fn=preprocess,
|
142 |
inputs=[input_image, do_remove_background, foreground_ratio],
|
143 |
+
outputs=[processed_image]
|
144 |
).then(
|
145 |
+
fn=lambda: toggle_loader("DropImage", False), # Отключаем лоадер в DropImage
|
146 |
+
inputs=[],
|
147 |
+
outputs=[drop_loader],
|
148 |
).then(
|
149 |
+
fn=lambda: toggle_loader("GLB", True), # Включаем лоадер в GLB
|
150 |
+
inputs=[],
|
151 |
+
outputs=[glb_loader],
|
152 |
).then(
|
153 |
fn=generate,
|
154 |
inputs=[processed_image],
|
155 |
+
outputs=[output_model]
|
|
|
|
|
|
|
|
|
156 |
).then(
|
157 |
+
fn=lambda: toggle_loader("GLB", False), # Отключаем лоадер в GLB
|
158 |
+
inputs=[],
|
159 |
+
outputs=[glb_loader],
|
160 |
)
|
161 |
+
|
162 |
# Запуск приложения
|
163 |
demo.launch(
|
164 |
server_name="0.0.0.0",
|