haoheliu sanchit-gandhi HF staff commited on
Commit
d925450
β€’
1 Parent(s): 984cfda

Update demo (#42)

Browse files

- up (d5a2c8a386700c4b854987eda33201a436b74d7a)


Co-authored-by: Sanchit Gandhi <[email protected]>

Files changed (2) hide show
  1. README.md +2 -4
  2. app.py +112 -55
README.md CHANGED
@@ -4,12 +4,10 @@ emoji: πŸ”Š
4
  colorFrom: indigo
5
  colorTo: red
6
  sdk: gradio
7
- sdk_version: 3.36.1
8
  app_file: app.py
9
  pinned: false
10
- license: bigscience-openrail-m
11
- duplicated_from: haoheliu/audioldm2-text2audio-text2music
12
-
13
  ---
14
 
15
  [![arXiv](https://img.shields.io/badge/arXiv-2308.05734-brightgreen.svg?style=flat-square)](https://arxiv.org/abs/2308.05734) [![githubio](https://img.shields.io/badge/GitHub.io-Audio_Samples-blue?logo=Github&style=flat-square)](https://audioldm.github.io/audioldm2/) [![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/haoheliu/audioldm2-text2audio-text2music)
 
4
  colorFrom: indigo
5
  colorTo: red
6
  sdk: gradio
7
+ sdk_version: 3.40.1
8
  app_file: app.py
9
  pinned: false
10
+ license: cc-by-nc-nd-4.0
 
 
11
  ---
12
 
13
  [![arXiv](https://img.shields.io/badge/arXiv-2308.05734-brightgreen.svg?style=flat-square)](https://arxiv.org/abs/2308.05734) [![githubio](https://img.shields.io/badge/GitHub.io-Audio_Samples-blue?logo=Github&style=flat-square)](https://audioldm.github.io/audioldm2/) [![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/haoheliu/audioldm2-text2audio-text2music)
app.py CHANGED
@@ -40,80 +40,138 @@ def text2audio(text, negative_prompt, duration, guidance_scale, random_seed, n_c
40
 
41
  css = """
42
  a {
43
- color: inherit; text-decoration: underline;
44
- } .gradio-container {
 
 
45
  font-family: 'IBM Plex Sans', sans-serif;
46
- } .gr-button {
47
- color: white; border-color: #000000; background: #000000;
48
- } input[type='range'] {
 
 
 
 
 
49
  accent-color: #000000;
50
- } .dark input[type='range'] {
 
51
  accent-color: #dfdfdf;
52
- } .container {
53
- max-width: 730px; margin: auto; padding-top: 1.5rem;
54
- } #gallery {
55
- min-height: 22rem; margin-bottom: 15px; margin-left: auto; margin-right: auto; border-bottom-right-radius:
56
- .5rem !important; border-bottom-left-radius: .5rem !important;
57
- } #gallery>div>.h-full {
 
 
 
 
 
 
 
 
58
  min-height: 20rem;
59
- } .details:hover {
 
60
  text-decoration: underline;
61
- } .gr-button {
 
62
  white-space: nowrap;
63
- } .gr-button:focus {
64
- border-color: rgb(147 197 253 / var(--tw-border-opacity)); outline: none; box-shadow:
65
- var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-border-opacity: 1;
66
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
67
- var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px
68
- var(--tw-ring-offset-width)) var(--tw-ring-color); --tw-ring-color: rgb(191 219 254 /
69
- var(--tw-ring-opacity)); --tw-ring-opacity: .5;
70
- } #advanced-btn {
71
- font-size: .7rem !important; line-height: 19px; margin-top: 12px; margin-bottom: 12px; padding: 2px 8px;
 
 
 
 
 
 
 
 
72
  border-radius: 14px !important;
73
- } #advanced-options {
 
74
  margin-bottom: 20px;
75
- } .footer {
76
- margin-bottom: 45px; margin-top: 35px; text-align: center; border-bottom: 1px solid #e5e5e5;
77
- } .footer>p {
78
- font-size: .8rem; display: inline-block; padding: 0 10px; transform: translateY(10px); background: white;
79
- } .dark .footer {
 
 
 
 
 
 
 
 
 
 
80
  border-color: #303030;
81
- } .dark .footer>p {
 
82
  background: #0b0f19;
83
- } .acknowledgments h4{
84
- margin: 1.25em 0 .25em 0; font-weight: bold; font-size: 115%;
85
- } #container-advanced-btns{
86
- display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
87
- } .animate-spin {
 
 
 
 
 
 
 
 
88
  animation: spin 1s linear infinite;
89
- } @keyframes spin {
 
90
  from {
91
  transform: rotate(0deg);
92
- } to {
 
93
  transform: rotate(360deg);
94
  }
95
- } #share-btn-container {
96
- display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color:
97
- #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
98
- margin-top: 10px; margin-left: auto;
99
- } #share-btn {
100
- all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif;
101
- margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem
102
- !important;right:0;
103
- } #share-btn * {
 
104
  all: unset;
105
- } #share-btn-container div:nth-child(-n+2){
106
- width: auto !important; min-height: 0px !important;
107
- } #share-btn-container .wrap {
 
 
 
108
  display: none !important;
109
- } .gr-form{
 
110
  flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
111
- } #prompt-container{
 
112
  gap: 0;
113
- } #generated_id{
 
114
  min-height: 700px
115
- } #setting_id{
116
- margin-bottom: 12px; text-align: center; font-weight: 900;
 
 
 
117
  }
118
  """
119
  iface = gr.Blocks(css=css)
@@ -259,4 +317,3 @@ with iface:
259
  )
260
 
261
  iface.queue(max_size=20).launch()
262
-
 
40
 
41
  css = """
42
  a {
43
+ color: inherit;
44
+ text-decoration: underline;
45
+ }
46
+ .gradio-container {
47
  font-family: 'IBM Plex Sans', sans-serif;
48
+ max-width: 730px !important;
49
+ }
50
+ .gr-button {
51
+ color: white;
52
+ border-color: #000000;
53
+ background: #000000;
54
+ }
55
+ input[type='range'] {
56
  accent-color: #000000;
57
+ }
58
+ .dark input[type='range'] {
59
  accent-color: #dfdfdf;
60
+ }
61
+ .container {
62
+ margin: auto;
63
+ padding-top: 1.5rem;
64
+ }
65
+ #gallery {
66
+ min-height: 22rem;
67
+ margin-bottom: 15px;
68
+ margin-left: auto;
69
+ margin-right: auto;
70
+ border-bottom-right-radius: .5rem !important;
71
+ border-bottom-left-radius: .5rem !important;
72
+ }
73
+ #gallery>div>.h-full {
74
  min-height: 20rem;
75
+ }
76
+ .details:hover {
77
  text-decoration: underline;
78
+ }
79
+ .gr-button {
80
  white-space: nowrap;
81
+ }
82
+ .gr-button:focus {
83
+ border-color: rgb(147 197 253 / var(--tw-border-opacity));
84
+ outline: none;
85
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
86
+ --tw-border-opacity: 1;
87
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
88
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
89
+ --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
90
+ --tw-ring-opacity: .5;
91
+ }
92
+ #advanced-btn {
93
+ font-size: .7rem !important;
94
+ line-height: 19px;
95
+ margin-top: 12px;
96
+ margin-bottom: 12px;
97
+ padding: 2px 8px;
98
  border-radius: 14px !important;
99
+ }
100
+ #advanced-options {
101
  margin-bottom: 20px;
102
+ }
103
+ .footer {
104
+ margin-bottom: 45px;
105
+ margin-top: 35px;
106
+ text-align: center;
107
+ border-bottom: 1px solid #e5e5e5;
108
+ }
109
+ .footer>p {
110
+ font-size: .8rem;
111
+ display: inline-block;
112
+ padding: 0 10px;
113
+ transform: translateY(10px);
114
+ background: white;
115
+ }
116
+ .dark .footer {
117
  border-color: #303030;
118
+ }
119
+ .dark .footer>p {
120
  background: #0b0f19;
121
+ }
122
+ .acknowledgments h4{
123
+ margin: 1.25em 0 .25em 0;
124
+ font-weight: bold;
125
+ font-size: 115%;
126
+ }
127
+ #container-advanced-btns{
128
+ display: flex;
129
+ flex-wrap: wrap;
130
+ justify-content: space-between;
131
+ align-items: center;
132
+ }
133
+ .animate-spin {
134
  animation: spin 1s linear infinite;
135
+ }
136
+ @keyframes spin {
137
  from {
138
  transform: rotate(0deg);
139
+ }
140
+ to {
141
  transform: rotate(360deg);
142
  }
143
+ }
144
+ #share-btn-container {
145
+ display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
146
+ margin-top: 10px;
147
+ margin-left: auto;
148
+ }
149
+ #share-btn {
150
+ all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;right:0;
151
+ }
152
+ #share-btn * {
153
  all: unset;
154
+ }
155
+ #share-btn-container div:nth-child(-n+2){
156
+ width: auto !important;
157
+ min-height: 0px !important;
158
+ }
159
+ #share-btn-container .wrap {
160
  display: none !important;
161
+ }
162
+ .gr-form{
163
  flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
164
+ }
165
+ #prompt-container{
166
  gap: 0;
167
+ }
168
+ #generated_id{
169
  min-height: 700px
170
+ }
171
+ #setting_id{
172
+ margin-bottom: 12px;
173
+ text-align: center;
174
+ font-weight: 900;
175
  }
176
  """
177
  iface = gr.Blocks(css=css)
 
317
  )
318
 
319
  iface.queue(max_size=20).launch()