Hugging Face's logo

Spaces:
JoaoK90
/
Controllable_Human_Motion_Generation
Running on Zero

App Files Community
Controllable_Human_Motion_Generation
File size: 12,744 Bytes
cc90e76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@font-face{font-family:Inter;src:url('__ASSET_URL__/Inter-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('__ASSET_URL__/Inter-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('__ASSET_URL__/Inter-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('__ASSET_URL__/Inter-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('__ASSET_URL__/SpaceGrotesk-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('__ASSET_URL__/SpaceGrotesk-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('__ASSET_URL__/SpaceGrotesk-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('__ASSET_URL__/SpaceGrotesk-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark!important}
html,body{background:#0B1020!important;color:#EDF0F7!important}
.gradio-container{font-family:Inter,sans-serif!important;background:radial-gradient(ellipse 95% 550px at 50% -120px,#14213A 0%,#0B1020 80%)!important;color:#EDF0F7!important;max-width:none!important;min-height:100vh!important;padding:0 40px 24px!important}
.gradio-container>.main{max-width:1280px!important;margin:0 auto!important}
.gradio-container input,.gradio-container textarea,.gradio-container button,.gradio-container select{font-family:Inter,sans-serif!important}
.gradio-container .gap{gap:18px}
.studio-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #BFC8DA18;padding:23px 0 20px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:#EDF0F7!important;text-decoration:none!important;font-size:15px;font-weight:500;letter-spacing:-.3px}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#BAA3E515;border:1px solid #BAA3E530;color:#BAA3E5;font:600 20px 'Space Grotesk',sans-serif;letter-spacing:-1px}
.brand-section{color:#8DBACB;font-weight:400}
.preview-tag{display:inline-flex;align-items:center;gap:8px;background:#8DBACB0B;border:1px solid #8DBACB30;border-radius:20px;padding:6px 11px;color:#8DBACB;font-size:11px;font-weight:500;white-space:nowrap}
.preview-tag>span{width:5px;height:5px;background:#8DBACB;border-radius:50%}
.studio-intro{padding:30px 0 28px}
.eyebrow{color:#8DBACB;font-size:10px;letter-spacing:2px;font-weight:600;margin-bottom:10px}
.studio-intro h1{font:500 clamp(30px,3.2vw,42px)/1.15 'Space Grotesk',sans-serif!important;letter-spacing:-1.5px;color:#EDF0F7!important;margin:0 0 10px!important}
.studio-intro h1 span{color:#BAA3E5}
.studio-intro p{color:#BFC8DA;font-size:14px;line-height:1.7;margin:0}
#studio-workspace{gap:22px;align-items:flex-start}
.studio-panel{background:#10182A!important;border:1px solid #BFC8DA20!important;border-radius:12px!important;box-shadow:0 8px 32px #03071422!important;padding:22px!important;gap:20px!important;overflow:visible!important}
.studio-panel .form{background:transparent!important;border:0!important;box-shadow:none!important;gap:12px!important;overflow:visible!important}
.studio-panel .block{background:transparent}
.panel-heading{display:flex;align-items:center;gap:10px;min-height:22px;margin-bottom:0}
.panel-heading h2{font:500 17px 'Space Grotesk',sans-serif!important;letter-spacing:-.3px;color:#EDF0F7!important;margin:0!important}
.section-number{font-size:10px;color:#8DBACB;letter-spacing:1px;border:1px solid #8DBACB30;border-radius:6px;padding:4px 5px}
.format-tag{font:500 9px Inter,sans-serif;color:#8DBACB;margin-left:auto;letter-spacing:1px;white-space:nowrap}
.field-caption{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:#BFC8DA;line-height:1.5;position:relative;min-height:20px;overflow:visible}
.help-anchor{position:relative;display:inline-flex;justify-content:center;align-items:center;width:15px;height:15px;border:1px solid #8DBACB80;border-radius:50%;font:500 10px Georgia,serif;font-style:italic;color:#8DBACB;cursor:help;outline:none;flex-shrink:0}
.help-anchor:hover,.help-anchor:focus{border-color:#E0D4F8;color:#E0D4F8}
.studio-tooltip-popover{position:fixed;inset:auto;margin:0;padding:12px 14px;box-sizing:border-box;width:300px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;border-radius:10px;background:#1B2740;border:1px solid #8DBACB60;box-shadow:0 8px 25px #0007;color:#EDF0F7;font:400 12px/1.7 Inter,sans-serif;pointer-events:none;white-space:normal;z-index:2147483647}
.studio-tooltip-popover::backdrop{background:transparent;pointer-events:none}
.studio-tooltip-popover[hidden]{display:none!important}
.gradio-container .html-container{overflow:visible!important}
#dataset-options{--border-color-primary:transparent;--block-background-fill:transparent;background:transparent!important;border:0!important;padding:0!important;gap:12px!important;overflow:visible!important}
#dataset-options .form,#dataset-options>.styler{background:transparent!important;border:0!important;box-shadow:none!important}
#dataset-options>.wrap,#seed-box>.wrap{background:transparent!important;border:0!important;padding:0!important}
#reference-mode .wrap{gap:8px}
#reference-mode label{border-radius:10px!important;padding:11px 12px!important;font-size:12px!important;line-height:1.5;transition:background .15s,border-color .15s;flex:1 1 auto!important}
#reference-mode label span{font-size:12px!important}
#reference-mode label:first-of-type{flex-basis:100%!important}
#reference-mode input{accent-color:#BAA3E5;flex-shrink:0}
#style-name{border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;padding:0!important;border-radius:12px!important}
#style-name input{min-height:40px;font-size:14px!important;background:transparent!important;border:0!important;outline:none!important;box-shadow:none!important}
#style-name input:focus,#style-name input:focus-visible{outline:none!important;box-shadow:none!important}
#style-name .wrap,#reference-id .wrap{border:1px solid #33405A!important;border-radius:12px!important;outline:none!important;box-shadow:none!important}
#style-name .wrap:focus-within,#reference-id .wrap:focus-within{border-color:#BAA3E5!important}
#style-name .wrap:focus-within{box-shadow:0 0 0 2px #BAA3E518!important}
#style-name .wrap-inner{padding:5px 10px!important}
#style-name .options,#reference-id .options{background:#10182A!important;border:1px solid #33405A!important;border-radius:12px!important;box-shadow:0 12px 30px #03071480!important;color:#EDF0F7!important}
#style-name .options .item:hover,#style-name .options .active,#reference-id .options .item:hover,#reference-id .options .active{background:#24314B!important}
.gradio-container textarea,.gradio-container input[type=number]{color:#EDF0F7!important;font-size:13px!important}
#action-prompt{border:0!important;background:transparent!important;padding:0!important}
#action-prompt textarea{padding:12px 14px!important;line-height:1.7!important;resize:vertical}
#action-prompt label>span,#duration label>span,#reference-id label>span{font-size:12px!important;font-weight:500!important;color:#BFC8DA!important}
#duration{border:0!important;padding:0!important;background:transparent!important}
#duration input[type=number]{border-radius:7px!important;padding:3px 6px!important;font-size:12px!important;min-width:58px!important;max-width:74px!important;background:#0B1324!important;border:1px solid #33405A!important}
#seed-box{background:#0D1526!important;border:1px solid #BFC8DA24!important;border-radius:12px!important;padding:13px!important;gap:10px!important}
#seed-box .styler{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
#seed-row{gap:10px!important;align-items:stretch!important}
#seed-input input{height:38px!important;background:#0B1324!important;border:1px solid #33405A!important;border-radius:8px!important;padding:8px 10px!important}
#shuffle-seed{font-size:11px!important;font-weight:500!important;min-height:38px!important;border-radius:8px!important;box-shadow:none!important;padding:8px 11px!important;color:#BAA3E5!important}
#advanced-options,#reference-comparison,#studio-information{background:transparent!important;border:1px solid #BFC8DA24!important;border-radius:12px!important;box-shadow:none!important}
#advanced-options>button,#reference-comparison>button,#studio-information>button{font-size:12px!important;font-weight:500!important;padding:14px!important;color:#BFC8DA!important}
#advanced-options .label-wrap,#reference-comparison .label-wrap,#studio-information .label-wrap{font-size:12px!important;font-weight:500!important;padding:0!important;color:#BFC8DA!important}
#advanced-options>.styler,#reference-comparison>.styler,#studio-information>.styler{padding:14px!important;border:0!important}
#advanced-options>button:hover,#reference-comparison>button:hover,#studio-information>button:hover{color:#E0D4F8!important;background:#BAA3E507!important}
#advanced-options>.wrap{padding:10px!important}
.advanced-section{background:#0D1526!important;border:1px solid #BFC8DA18!important;border-radius:10px!important}
.advanced-section>button{padding:13px!important;font-size:12px!important}
.advanced-section .block{border:0!important}
.experimental-note{font-size:11px;line-height:1.7;color:#8DBACB;margin:0}
#generate-button{min-height:48px!important;font-size:13px!important;font-weight:600!important;letter-spacing:.1px!important;box-shadow:0 4px 18px #BAA3E514!important;transition:background .15s,box-shadow .15s!important}
#generate-button:hover{box-shadow:0 4px 22px #BAA3E529!important}
#motion-preview{border:1px solid #BFC8DA18!important;border-radius:12px!important;overflow:hidden!important;background:#0B1324!important;min-height:395px}
#motion-preview video{background:#0B1324!important;border-radius:11px!important;object-fit:contain!important}
#motion-preview .icon-wrap{color:#8DBACB!important;opacity:.55}
#generation-status{font-size:12px!important;color:#BFC8DA!important;line-height:1.7!important;border-left:2px solid #8DBACB55!important;padding:0 0 0 12px!important;min-height:38px}
#generation-status p{color:#BFC8DA!important;font-size:12px!important;line-height:1.7!important}
#generation-status strong{color:#EDF0F7!important;font-weight:500!important}
#motion-downloads{background:#0D1526!important;border:1px dashed #8DBACB40!important;border-radius:12px!important;min-height:105px!important}
#motion-downloads label>span{font-size:11px!important;color:#BFC8DA!important;font-weight:500!important;background:#0D1526!important}
#motion-downloads .icon-wrap{color:#8DBACB!important;opacity:.6}
#motion-downloads .file{border-color:#BFC8DA20!important;background:#10182A!important}
#studio-information{margin-top:6px!important}
#studio-information .prose{padding:0 4px 8px;max-width:100%;font-size:13px!important;line-height:1.9!important;color:#BFC8DA!important}
#studio-information h3{font:500 15px 'Space Grotesk',sans-serif!important;color:#EDF0F7!important;margin:16px 0 8px!important}
#studio-information code{color:#8DBACB!important;background:#0B1324!important}
.studio-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 0 12px;color:#8C98B0;font-size:11px;line-height:1.8}
.studio-footer>span:last-child{text-align:right}
.footer-dot{color:#8DBACB;margin:0 6px}
.studio-footer a{color:#BAA3E5!important;text-decoration:none!important}.studio-footer a:hover{color:#E0D4F8!important}
.license-note{display:block;font-size:10px;color:#8C98B0;margin-top:2px}
.gradio-container footer{display:none!important}
.gradio-container footer.studio-footer{display:flex!important}
.gradio-container button:focus-visible,.gradio-container input:focus-visible,.gradio-container textarea:focus-visible{outline:2px solid #BAA3E5!important;outline-offset:2px}
@media(min-width:1500px){.gradio-container>.main{max-width:1280px!important}}
@media(max-width:900px){.gradio-container{padding:0 22px 20px!important}.studio-panel{padding:18px!important}#studio-workspace{gap:18px}#result-panel{min-width:min(100%,390px)!important}}
@media(max-width:650px){.gradio-container{padding:0 14px 16px!important}.studio-header{padding:18px 0}.brand-section{display:none}.studio-intro{padding:25px 0}.studio-intro h1{font-size:34px!important}.studio-panel{min-width:0!important;flex-basis:100%!important;padding:18px!important}#motion-preview{min-height:300px;height:300px!important}.studio-footer{flex-direction:column;gap:8px}.studio-footer>span:last-child{text-align:left}}