Zaiiida commited on
Commit
bf93613
·
verified ·
1 Parent(s): fc0229f

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +38 -170
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 start_loading(container_id):
 
63
  return f"""
64
- <div class="loader" id="loader-{container_id}"></div>
65
- <script>
66
- document.getElementById('loader-{container_id}').style.display = 'block';
67
- </script>
 
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
- /* Текст CheckBox в белый */
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(theme=CustomTheme(), css=css) as demo:
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="upload-container"):
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
- upload_loader = gr.HTML(visible=False)
226
-
227
- with gr.Column(elem_classes="processed-container"):
228
  processed_image = gr.Image(
229
  label="Processed Image",
230
  interactive=False,
231
  width=400,
232
  height=300,
233
  )
234
- process_loader = gr.HTML(visible=False)
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
- model_loader = gr.HTML(visible=False)
255
 
256
- # Обновляем цепочку событий
257
  submit.click(
258
- fn=lambda: """<div id='loading-bar' style='display: block;'></div>""",
259
- outputs=[upload_loader],
260
- show_progress=False,
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: """<div id='loading-bar' style='display: none;'></div>""",
275
- outputs=[upload_loader],
276
- show_progress=False,
277
  ).then(
278
- fn=lambda: """<div id='loading-bar' style='display: block;'></div>""",
279
- outputs=[model_loader],
280
- show_progress=False,
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: """<div id='loading-bar' style='display: none;'></div>""",
291
- outputs=[model_loader],
292
- show_progress=False,
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",