show Llama prompt + share button

app.py

@@ -9,6 +9,7 @@ from gradio_client import Client
 client = Client("https://fffiloni-test-llama-api.hf.space/", hf_token=hf_token)
 lyrics_client = Client("https://fffiloni-music-to-lyrics.hf.space/")
 
+from share_btn import community_icon_html, loading_icon_html, share_js
 
 from compel import Compel, ReturnedEmbeddingsType
 from diffusers import DiffusionPipeline
@@ -92,7 +93,7 @@ def infer(audio_file, has_lyrics):
     
         Here's the music description :
     
-        « {cap_result} »
+        « {cap_result} »
     
         And here are the lyrics : 
     
@@ -109,7 +110,7 @@ def infer(audio_file, has_lyrics):
     
         Here's the music description :
     
-        « {cap_result} »
+        « {cap_result} »
         """
     print("""———
     Calling Llama2 ...
@@ -123,7 +124,7 @@ def infer(audio_file, has_lyrics):
 
     print(f"Llama2 result: {result}")
 
-    # ———
+    # ———
     print("""———
     Calling SD-XL ...
     """)
@@ -134,10 +135,83 @@ def infer(audio_file, has_lyrics):
     print("Finished")
     
     #return cap_result, result, images
-    return images, result, gr.update(visible=True)
+    return images, result, gr.update(visible=True), gr.Group.update(visible=True)
 
 css = """
-#col-container {max-width: 510px; margin-left: auto; margin-right: auto;}
+#col-container {max-width: 780px; margin-left: auto; margin-right: auto;}
+a {text-decoration-line: underline; font-weight: 600;}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+      transform: rotate(0deg);
+  }
+  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; 
+  max-width: 13rem;
+}
+div#share-btn-container > div {
+    flex-direction: row;
+    background: black;
+    align-items: center;
+}
+#share-btn-container:hover {
+  background-color: #060606;
+}
+#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.5rem !important; 
+  padding-bottom: 0.5rem !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;
+}
+#share-btn-container.hidden {
+  display: none!important;
+}
+.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"):
@@ -161,23 +235,51 @@ with gr.Blocks(css=css) as demo:
                 Note: Only the first 30 seconds of your audio will be used for inference.
                 </p>
             </div>""")
+        
         audio_input = gr.Audio(label="Music input", type="filepath", source="upload")
-        has_lyrics = gr.Radio(label="Does your audio has lyrics ?", choices=["Yes", "No"], value="No", info="If yes, the image should reflect the lyrics, but be aware that because we add a step (getting lyrics), inference will take more time.")
+        with gr.Row():
+            has_lyrics = gr.Radio(label="Does your audio has lyrics ?", choices=["Yes", "No"], value="No", info="If yes, the image should reflect the lyrics, but be aware that because we add a step (getting lyrics), inference will take more time.")
+            song_title = gr.Textbox(label="Song Title", value="Title: ", interactive=True, info="If you want to share your result, please provide the title of your audio sample :)", elem_id="song-title")
         infer_btn = gr.Button("Generate Image from Music")
         #lpmc_cap = gr.Textbox(label="Lp Music Caps caption")
-        llama_trans_cap = gr.Textbox(label="Llama translation", visible=False)
-        img_result = gr.Image(label="Image Result")
-        tryagain_btn = gr.Button("Try another image ?", visible=False)
+        with gr.Row():
+            llama_trans_cap = gr.Textbox(label="Llama Image Suggestion", placeholder="Llama2 image prompt suggestion will be displayed here ;)", visible=True, lines=12, elem_id="llama-prompt")
+            img_result = gr.Image(label="Image Result", elem_id="image-out")
+        with gr.Row():
+            tryagain_btn = gr.Button("Try another image ?", visible=False)
+            with gr.Group(elem_id="share-btn-container", visible=False) as share_group:
+                    community_icon = gr.HTML(community_icon_html)
+                    loading_icon = gr.HTML(loading_icon_html)
+                    share_button = gr.Button("Share to community", elem_id="share-btn")
 
         gr.Examples(examples=[["./examples/electronic.mp3", "No"],["./examples/folk.wav", "No"], ["./examples/orchestra.wav", "No"]],
                     fn=infer,
                     inputs=[audio_input, has_lyrics],
-                    outputs=[img_result, llama_trans_cap, tryagain_btn],
+                    outputs=[img_result, llama_trans_cap, tryagain_btn, share_group],
                     cache_examples=True
                    )
 
+        gr.HTML("""
+            <div class="footer">
+                <p> 
+                Music to Image Demo by 🤗 <a href="https://twitter.com/fffiloni" target="_blank">Sylvain Filoni</a>
+                </p>
+            </div>
+            <div id="may-like-container" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
+                <p style="font-size: 0.8em;margin-bottom: 4px;">You may also like: </p>
+                <div id="may-like" style="display:flex; align-items:center; justify-content: center;height:20px;">
+                    <svg height="20" width="182" style="margin-left:4px">       
+                        <a href="https://huggingface.co/spaces/fffiloni/Music-To-Zeroscope" target="_blank">
+                            <image href="https://img.shields.io/badge/🤗 Spaces-Music To Zeroscope-blue" src="https://img.shields.io/badge/🤗 Spaces-Music To Zeroscope-blue.png" height="20"/>
+                        </a>
+                    </svg>
+                </div>
+            </div>
+        """)
+
     #infer_btn.click(fn=infer, inputs=[audio_input], outputs=[lpmc_cap, llama_trans_cap, img_result])
-    infer_btn.click(fn=infer, inputs=[audio_input, has_lyrics], outputs=[img_result, llama_trans_cap, tryagain_btn])
+    infer_btn.click(fn=infer, inputs=[audio_input, has_lyrics], outputs=[img_result, llama_trans_cap, tryagain_btn, share_group])
+    share_button.click(None, [], [], _js=share_js)
     tryagain_btn.click(fn=solo_xd, inputs=[llama_trans_cap], outputs=[img_result])
 
 demo.queue(max_size=20).launch()