Update app.py

app.py

@@ -17,13 +17,98 @@ def predict(prompt):
         f.write(wav[0].getbuffer())
     return spec, 'output.wav'
 
-gr.Interface(
-    predict,
-    inputs="text",
-    outputs=[gr.Image(), gr.Audio(type='filepath')],
-    title="Riffusion Text-to-Music",
-    description="""<p style="text-align: center;">Describe a musical prompt, generate music by getting a Riffusion spectrogram and its corresponding sound.
-              <br />if you want to skip the queue, or get faster inference, you can duplicate this space: <a href="https://huggingface.co/spaces/fffiloni/spectrogram-to-music?duplicate=true"><img src="https://bit.ly/3gLdBN6" alt="Duplicate Space"></a>
-              </p>
+title = """
+    <div style="text-align: center; max-width: 500px; margin: 0 auto;">
+        <div
+        style="
+            display: inline-flex;
+            align-items: center;
+            gap: 0.8rem;
+            font-size: 1.75rem;
+            margin-bottom: 10px;
+        "
+        >
+        <h1 style="font-weight: 600; margin-bottom: 7px;">
+            Riffusion - Stable diffusion for real-time music generation
+        </h1>
+        </div>
+        <p style="margin-bottom: 10px;font-size: 94%;font-weight: 100;line-height: 1.5em;">
+        Describe a musical prompt, generate music by getting a Riffusion spectrogram and its corresponding sound.
+        
+        <p style="font-size: 94%">
+            Do you need faster results ? You can skip the queue by duplicating this space: 
+            <span style="display: flex;align-items: center;justify-content: center;height: 30px;">
+            <a href="https://huggingface.co/fffiloni/spectrogram-to-music?duplicate=true"><img src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14" alt="Duplicate Space"></a>       
+            </span>
+        </p>
+    </div>
 """
-).queue().launch(debug=True)
+
+article = """
+    <p style="font-size: 0.8em;line-height: 1.2em;">
+    About the model: Riffusion is a latent text-to-image diffusion model capable of generating spectrogram images given any text input. These spectrograms can be converted into audio clips.
+    <br />The Riffusion model was created by fine-tuning the Stable-Diffusion-v1-5 checkpoint.
+    <br />The model is intended for research purposes only. Possible research areas and tasks include 
+    generation of artworks, audio, and use in creative processes, applications in educational or creative tools, research on generative models.
+
+    </p>
+    <div class="footer">
+        <p>
+        <a href="https://huggingface.co/riffusion/riffusion-model-v1" target="_blank">Riffusion model</a> by Seth Forsgren and Hayk Martiros - 
+        Gradio Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
+        </p>
+    </div>
+"""
+
+css = '''
+    #col-container, #col-container-2 {max-width: 510px; margin-left: auto; margin-right: auto;}
+    a {text-decoration-line: underline; font-weight: 600;}
+    div#record_btn > .mt-6 {
+        margin-top: 0!important;
+    }
+    div#record_btn > .mt-6 button {
+        width: 100%;
+        height: 40px;
+    }
+    .footer {
+            margin-bottom: 45px;
+            margin-top: 10px;
+            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 {
+            background: #0b0f19;
+        }
+'''
+ 
+
+
+with gr.Blocks(css=css) as demo:
+    
+    with gr.Column(elem_id="col-container"):
+        
+        gr.HTML(title)
+        
+        prompt_input = gr.Textbox(placeholder="a cat diva singing in a New York jazz club")
+  
+        send_btn = gr.Button("Get a new spectrogram ! ")
+            
+    with gr.Column(elem_id="col-container-2"):
+        spectrogram_output = gr.Image(label="spectrogram image result")
+        sound_output = gr.Audio(type='filepath', label="spectrogram sound")
+
+        gr.HTML(article)
+    
+    send_btn.click(chat_hf, inputs=[prompt_input], outputs=[spectrogram_output, sound_output])
+
+demo.queue(max_size=250).launch(debug=True)