Hugging Face's logo

Spaces:
W8in4am8
/
MotionLCM
Running

App Files Community
soumyanilain commited on
Commit
3edb540
·
verified ·
1 Parent(s): 7127494

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +19 -32
app.py CHANGED
@@ -241,7 +241,7 @@ with gr.Blocks(title="MotionLCM") as demo:
241
 
242
  # ── Header ──
243
  gr.HTML("""
244
- <div style="text-align:center; padding:28px 20px 20px; margin-bottom:16px; border-bottom:1px solid #e2e8f0;">
245
  <h1 style="font-size:2.6em; font-weight:800; margin:0 0 4px;
246
  background:linear-gradient(90deg,#06B6D4,#3B82F6);
247
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;">
@@ -254,40 +254,28 @@ with gr.Blocks(title="MotionLCM") as demo:
254
  <span style="background:#F97316; color:white; padding:5px 14px; border-radius:50px; font-size:0.82em; font-weight:700; margin:0 3px;">1929x Speedup</span>
255
  <span style="background:#E2E8F0; color:#334155; padding:5px 14px; border-radius:50px; font-size:0.82em; font-weight:700; margin:0 3px;">ECCV 2024</span>
256
  <div style="display:flex; justify-content:center; gap:32px; margin-top:18px; flex-wrap:wrap;">
257
- <div style="text-align:center;">
258
- <div style="font-size:1.5em; font-weight:800; color:#06B6D4;">22</div>
259
- <div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Body Joints</div>
260
- </div>
261
- <div style="text-align:center;">
262
- <div style="font-size:1.5em; font-weight:800; color:#06B6D4;">8.4M</div>
263
- <div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Parameters</div>
264
- </div>
265
- <div style="text-align:center;">
266
- <div style="font-size:1.5em; font-weight:800; color:#06B6D4;">1-4</div>
267
- <div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Denoising Steps</div>
268
- </div>
269
- <div style="text-align:center;">
270
- <div style="font-size:1.5em; font-weight:800; color:#06B6D4;">20fps</div>
271
- <div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Output</div>
272
- </div>
273
  </div>
274
  </div>
275
  """)
276
 
277
- # ── Architecture ──
278
  gr.HTML("""
279
- <div style="background:#f1f5f9; border:1px solid #e2e8f0; border-radius:12px; padding:16px 20px; margin-bottom:16px;">
280
- <div style="font-size:0.95em; font-weight:700; color:#06B6D4; margin-bottom:10px;">How It Works</div>
281
  <div style="display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;">
282
- <div style="background:#e2e8f0; padding:7px 14px; border-radius:8px; font-size:0.82em; color:#1e293b; font-weight:600;">Text Prompt</div>
283
- <span style="color:#06B6D4; font-weight:bold; font-size:1.1em;">&rarr;</span>
284
- <div style="background:#e2e8f0; padding:7px 14px; border-radius:8px; font-size:0.82em; color:#1e293b; font-weight:600;">Sentence-T5</div>
285
- <span style="color:#06B6D4; font-weight:bold; font-size:1.1em;">&rarr;</span>
286
- <div style="background:#e2e8f0; padding:7px 14px; border-radius:8px; font-size:0.82em; color:#1e293b; font-weight:600; border:2px solid #06B6D4;">MotionLCM</div>
287
- <span style="color:#06B6D4; font-weight:bold; font-size:1.1em;">&rarr;</span>
288
- <div style="background:#e2e8f0; padding:7px 14px; border-radius:8px; font-size:0.82em; color:#1e293b; font-weight:600;">VAE Decoder</div>
289
- <span style="color:#06B6D4; font-weight:bold; font-size:1.1em;">&rarr;</span>
290
- <div style="background:#e2e8f0; padding:7px 14px; border-radius:8px; font-size:0.82em; color:#1e293b; font-weight:600;">3D Skeleton</div>
291
  </div>
292
  </div>
293
  """)
@@ -297,9 +285,8 @@ with gr.Blocks(title="MotionLCM") as demo:
297
  with gr.Column(scale=1):
298
  prompt = gr.Textbox(label="Text Prompt",
299
  placeholder="Describe a human motion... e.g., 'a person walks forward and waves'", lines=3)
300
- with gr.Row():
301
- duration = gr.Slider(1.0, 15.0, 5.0, step=0.5, label="Duration (seconds)")
302
- seed = gr.Number(-1, label="Seed (-1 = random)", precision=0)
303
  method = gr.Radio(
304
  ["MotionLCM (Real-time, 1-4 steps)", "MLD (Baseline, ~50 steps)"],
305
  value="MotionLCM (Real-time, 1-4 steps)", label="Generation Method")
 
241
 
242
  # ── Header ──
243
  gr.HTML("""
244
+ <div style="text-align:center; padding:28px 20px 20px; margin-bottom:12px; border-bottom:1px solid #e2e8f0;">
245
  <h1 style="font-size:2.6em; font-weight:800; margin:0 0 4px;
246
  background:linear-gradient(90deg,#06B6D4,#3B82F6);
247
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;">
 
254
  <span style="background:#F97316; color:white; padding:5px 14px; border-radius:50px; font-size:0.82em; font-weight:700; margin:0 3px;">1929x Speedup</span>
255
  <span style="background:#E2E8F0; color:#334155; padding:5px 14px; border-radius:50px; font-size:0.82em; font-weight:700; margin:0 3px;">ECCV 2024</span>
256
  <div style="display:flex; justify-content:center; gap:32px; margin-top:18px; flex-wrap:wrap;">
257
+ <div style="text-align:center;"><div style="font-size:1.5em; font-weight:800; color:#06B6D4;">22</div><div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Body Joints</div></div>
258
+ <div style="text-align:center;"><div style="font-size:1.5em; font-weight:800; color:#06B6D4;">8.4M</div><div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Parameters</div></div>
259
+ <div style="text-align:center;"><div style="font-size:1.5em; font-weight:800; color:#06B6D4;">1-4</div><div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Denoising Steps</div></div>
260
+ <div style="text-align:center;"><div style="font-size:1.5em; font-weight:800; color:#06B6D4;">20fps</div><div style="font-size:0.7em; color:#94A3B8; text-transform:uppercase; letter-spacing:0.5px;">Output</div></div>
 
 
 
 
 
 
 
 
 
 
 
 
261
  </div>
262
  </div>
263
  """)
264
 
265
+ # ── Architecture (no background, just border) ──
266
  gr.HTML("""
267
+ <div style="border:1px solid #e2e8f0; border-radius:10px; padding:14px 20px; margin-bottom:16px;">
268
+ <div style="font-size:0.9em; font-weight:700; color:#06B6D4; margin-bottom:8px;">How It Works</div>
269
  <div style="display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;">
270
+ <div style="border:1px solid #e2e8f0; padding:6px 12px; border-radius:6px; font-size:0.8em; color:#334155; font-weight:600;">Text Prompt</div>
271
+ <span style="color:#06B6D4; font-weight:bold;">&rarr;</span>
272
+ <div style="border:1px solid #e2e8f0; padding:6px 12px; border-radius:6px; font-size:0.8em; color:#334155; font-weight:600;">Sentence-T5</div>
273
+ <span style="color:#06B6D4; font-weight:bold;">&rarr;</span>
274
+ <div style="border:2px solid #06B6D4; padding:6px 12px; border-radius:6px; font-size:0.8em; color:#06B6D4; font-weight:700;">MotionLCM</div>
275
+ <span style="color:#06B6D4; font-weight:bold;">&rarr;</span>
276
+ <div style="border:1px solid #e2e8f0; padding:6px 12px; border-radius:6px; font-size:0.8em; color:#334155; font-weight:600;">VAE Decoder</div>
277
+ <span style="color:#06B6D4; font-weight:bold;">&rarr;</span>
278
+ <div style="border:1px solid #e2e8f0; padding:6px 12px; border-radius:6px; font-size:0.8em; color:#334155; font-weight:600;">3D Skeleton</div>
279
  </div>
280
  </div>
281
  """)
 
285
  with gr.Column(scale=1):
286
  prompt = gr.Textbox(label="Text Prompt",
287
  placeholder="Describe a human motion... e.g., 'a person walks forward and waves'", lines=3)
288
+ duration = gr.Slider(1.0, 15.0, 5.0, step=0.5, label="Duration (seconds)")
289
+ seed = gr.Number(-1, label="Seed (-1 = random)", precision=0)
 
290
  method = gr.Radio(
291
  ["MotionLCM (Real-time, 1-4 steps)", "MLD (Baseline, ~50 steps)"],
292
  value="MotionLCM (Real-time, 1-4 steps)", label="Generation Method")