Update app.py

app.py

@@ -6,6 +6,8 @@ import numpy as np
 from scipy.io.wavfile import read
 import gradio as gr
 
+from share_btn import community_icon_html, loading_icon_html, share_js
+
 
 os.system('git clone https://github.com/hmartiro/riffusion-inference.git riffusion')
 
@@ -227,7 +229,7 @@ def on_submit(prompt_1, prompt_2, steps, num_iterations, feel, seed):
     if prompt_1 == "":
         return None, gr.update(value="First prompt is required.")
     if prompt_2 == "":
-        return generate(prompt_1, steps, num_iterations, feel, seed), None
+        return generate(prompt_1, steps, num_iterations, feel, seed), None, gr.update(visible=True)
     else:
         return generate_riffuse(prompt_1, steps, num_iterations, feel, prompt_end=prompt_2, seed_start=seed), None
 
@@ -242,7 +244,27 @@ def on_num_iterations_change(n, prompt_2):
         total_length = 2.5 + 2.5 * n
     return gr.update(value=f"Total length: {total_length:.2f} seconds")
 
-with gr.Blocks() as app:
+
+css = '''
+    #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;
+    }
+    #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 {
+        display: none !important;
+    }
+'''
+
+with gr.Blocks(css=css) as app:
     gr.Markdown("## Riffusion Demo")
     gr.Markdown("""Generate audio using the [Riffusion](https://huggingface.co/riffusion/riffusion-model-v1) model.<br>
                 In single prompt mode you can generate up to ~1 minute of audio with smooth transitions between sections. (beta)<br>
@@ -267,14 +289,21 @@ with gr.Blocks() as app:
         with gr.Column():
             video = gr.Video()
 
+            with gr.Group(elem_id="share-btn-container", visible=False) as share_group:
+                community_icon = gr.HTML(community_icon_html, visible=False)
+                loading_icon = gr.HTML(loading_icon_html, visible=False)
+                share_button = gr.Button("Share to community", elem_id="share-btn", visible=False)
+
     inputs = [prompt_1, prompt_2, steps, num_iterations, feel, seed]
-    outputs = [video, info]
+    outputs = [video, info, share_group]
 
     num_iterations.change(on_num_iterations_change, [num_iterations, prompt_2], [info])
     prompt_1.submit(on_submit, inputs, outputs)
     prompt_2.submit(on_submit, inputs, outputs)
     btn_generate.click(on_submit, inputs, outputs)
 
+    share_button.click(None, [], [], _js=share_js)
+
     examples = gr.Examples(
         examples=[
             ["typing", "dance beat", "og_beat", 10],