Add styles/duplicate/buymeacoffe/ options

app.py

@@ -29,6 +29,20 @@ title = """
           <div style="display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.75rem;">
             <h1 style="font-weight: 950; margin-bottom: 7px; color: #000; font-weight: bold;">Riffusion and Stable Diffusion</h1>
           </div>
+          <p style="text-align: center;font-size: 94%">
+              Duplicate this Space and run it on your own profile using a (paid) private T4-small or A10G-small GPU for training: 
+              <span style="display: flex;align-items: center;justify-content: center;height: 30px;">
+              <a href="https://huggingface.co/spaces/juancopi81/sd-riffusion?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>
+          <p style="text-align: center;font-size: 94%">
+              You can buy me a coffee to support this space: 
+              <span style="display: flex;align-items: center;justify-content: center;height: 30px;">
+              <a href="https://huggingface.co/spaces/juancopi81/sd-riffusion?duplicate=true">
+              <img src="https://badgen.net/badge/icon/Buy%20Me%20A%20Coffee?icon=buymeacoffee&label" alt="Buy me a coffee"></a>. Depending on the support, I'll keep this space running and add more features!
+              </span>
+          </p>
         </div>
         """
 def get_bg_image(prompt):
@@ -51,8 +65,9 @@ def get_music(prompt):
         f.write(wav[0].getbuffer())
     return "output.wav"
 
-def infer(prompt):
-    image = get_bg_image(prompt)
+def infer(prompt, style):
+    style_prompt = prompt + style
+    image = get_bg_image(style_prompt)
     audio = get_music(prompt)
     return (
         gr.make_waveform(audio,
@@ -67,6 +82,11 @@ css = """
         border-radius: 2px;
         padding: 8px;
     }
+    #prompt-style {
+        border: 2px solid #666;
+        border-radius: 2px;
+        padding: 8px;
+    }
     #btn-container {
       display: flex;
       align-items: center;
@@ -90,11 +110,20 @@ with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
       prompt_input = gr.Textbox(placeholder="The Beatles playing for the queen",
                                 elem_id="prompt-in",
-                                label="Enter your music prompt")
+                                label="Enter your music prompt.")
+      style_input = gr.Textbox(placeholder="In the style of Vincent van Gogh",
+                                elem_id="prompt-style",
+                                label="(Optional) Add styles to your background image.",
+                                value="")
       with gr.Row(elem_id="btn-container"):
         send_btn = gr.Button(value="Send", elem_id="submit-btn")   
       send_btn.click(infer,
-                     inputs=[prompt_input],
+                     inputs=[prompt_input, style_input],
                      outputs=[gr.Video()])
 
+gr.Markdown("""
+      [![Twitter Follow](https://img.shields.io/twitter/follow/juancopi81?style=social)](https://twitter.com/juancopi81)
+      ![visitors](https://visitor-badge.glitch.me/badge?page_id=Juancopi81.sd-riffusion)
+    """)
+
 demo.launch(debug=True)