Update demo (#42)

- up (d5a2c8a386700c4b854987eda33201a436b74d7a)


Co-authored-by: Sanchit Gandhi <sanchit-gandhi@users.noreply.huggingface.co>

README.md

@@ -4,12 +4,10 @@ emoji: 🔊
 colorFrom: indigo
 colorTo: red
 sdk: gradio
-sdk_version: 3.36.1
+sdk_version: 3.40.1
 app_file: app.py
 pinned: false
-license: bigscience-openrail-m
-duplicated_from: haoheliu/audioldm2-text2audio-text2music
-
+license: cc-by-nc-nd-4.0
 ---
 
 [![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

@@ -40,80 +40,138 @@ def text2audio(text, negative_prompt, duration, guidance_scale, random_seed, n_c
 
 css = """
         a {
-            color: inherit; text-decoration: underline;
-        } .gradio-container {
+            color: inherit;
+            text-decoration: underline;
+        }
+        .gradio-container {
             font-family: 'IBM Plex Sans', sans-serif;
-        } .gr-button {
-            color: white; border-color: #000000; background: #000000;
-        } input[type='range'] {
+            max-width: 730px !important;
+        }
+        .gr-button {
+            color: white;
+            border-color: #000000;
+            background: #000000;
+        }
+        input[type='range'] {
             accent-color: #000000;
-        } .dark input[type='range'] {
+        }
+        .dark input[type='range'] {
             accent-color: #dfdfdf;
-        } .container {
-            max-width: 730px; margin: auto; padding-top: 1.5rem;
-        } #gallery {
-            min-height: 22rem; margin-bottom: 15px; margin-left: auto; margin-right: auto; border-bottom-right-radius:
-            .5rem !important; border-bottom-left-radius: .5rem !important;
-        } #gallery>div>.h-full {
+        }
+        .container {
+            margin: auto;
+            padding-top: 1.5rem;
+        }
+        #gallery {
+            min-height: 22rem;
+            margin-bottom: 15px;
+            margin-left: auto;
+            margin-right: auto;
+            border-bottom-right-radius: .5rem !important;
+            border-bottom-left-radius: .5rem !important;
+        }
+        #gallery>div>.h-full {
             min-height: 20rem;
-        } .details:hover {
+        }
+        .details:hover {
             text-decoration: underline;
-        } .gr-button {
+        }
+        .gr-button {
             white-space: nowrap;
-        } .gr-button:focus {
-            border-color: rgb(147 197 253 / var(--tw-border-opacity)); outline: none; box-shadow:
-            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-border-opacity: 1;
-            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-            var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px
-            var(--tw-ring-offset-width)) var(--tw-ring-color); --tw-ring-color: rgb(191 219 254 /
-            var(--tw-ring-opacity)); --tw-ring-opacity: .5;
-        } #advanced-btn {
-            font-size: .7rem !important; line-height: 19px; margin-top: 12px; margin-bottom: 12px; padding: 2px 8px;
+        }
+        .gr-button:focus {
+            border-color: rgb(147 197 253 / var(--tw-border-opacity));
+            outline: none;
+            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+            --tw-border-opacity: 1;
+            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
+            --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+            --tw-ring-opacity: .5;
+        }
+        #advanced-btn {
+            font-size: .7rem !important;
+            line-height: 19px;
+            margin-top: 12px;
+            margin-bottom: 12px;
+            padding: 2px 8px;
             border-radius: 14px !important;
-        } #advanced-options {
+        }
+        #advanced-options {
             margin-bottom: 20px;
-        } .footer {
-            margin-bottom: 45px; margin-top: 35px; text-align: center; border-bottom: 1px solid #e5e5e5;
-        } .footer>p {
-            font-size: .8rem; display: inline-block; padding: 0 10px; transform: translateY(10px); background: white;
-        } .dark .footer {
+        }
+        .footer {
+            margin-bottom: 45px;
+            margin-top: 35px;
+            text-align: center;
+            border-bottom: 1px solid #e5e5e5;
+        }
+        .footer>p {
+            font-size: .8rem;
+            display: inline-block;
+            padding: 0 10px;
+            transform: translateY(10px);
+            background: white;
+        }
+        .dark .footer {
             border-color: #303030;
-        } .dark .footer>p {
+        }
+        .dark .footer>p {
             background: #0b0f19;
-        } .acknowledgments h4{
-            margin: 1.25em 0 .25em 0; font-weight: bold; font-size: 115%;
-        } #container-advanced-btns{
-            display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
-        } .animate-spin {
+        }
+        .acknowledgments h4{
+            margin: 1.25em 0 .25em 0;
+            font-weight: bold;
+            font-size: 115%;
+        }
+        #container-advanced-btns{
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .animate-spin {
             animation: spin 1s linear infinite;
-        } @keyframes spin {
+        }
+        @keyframes spin {
             from {
                 transform: rotate(0deg);
-            } to {
+            }
+            to {
                 transform: rotate(360deg);
             }
-        } #share-btn-container {
-            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;
-            margin-top: 10px; margin-left: auto;
-        } #share-btn {
-            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;
-        } #share-btn * {
+        }
+        #share-btn-container {
+            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;
+            margin-top: 10px;
+            margin-left: auto;
+        }
+        #share-btn {
+            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;
+        }
+        #share-btn * {
             all: unset;
-        } #share-btn-container div:nth-child(-n+2){
-            width: auto !important; min-height: 0px !important;
-        } #share-btn-container .wrap {
+        }
+        #share-btn-container div:nth-child(-n+2){
+            width: auto !important;
+            min-height: 0px !important;
+        }
+        #share-btn-container .wrap {
             display: none !important;
-        } .gr-form{
+        }
+        .gr-form{
             flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
-        } #prompt-container{
+        }
+        #prompt-container{
             gap: 0;
-        } #generated_id{
+        }
+        #generated_id{
             min-height: 700px
-        } #setting_id{
-          margin-bottom: 12px; text-align: center; font-weight: 900;
+        }
+        #setting_id{
+          margin-bottom: 12px;
+          text-align: center;
+          font-weight: 900;
         }
 """
 iface = gr.Blocks(css=css)
@@ -259,4 +317,3 @@ with iface:
             )
 
 iface.queue(max_size=20).launch()
-