Update app.py

app.py

@@ -38,10 +38,12 @@ import torch
 
 import gradio as gr
 from huggingface_hub import snapshot_download
+import spaces
 
 from model import StableMultiDiffusion3Pipeline
 from util import seed_everything
 from prompt_util import preprocess_prompts, _quality_dict, _style_dict
+from share_btn import share_js
 
 
 ### Utils
@@ -302,6 +304,7 @@ def import_state(state, json_text):
 
 ### Main worker
 
+@spaces.GPU
 def generate(state, *args, **kwargs):
     return models[state.model_id](*args, **kwargs)
 
@@ -500,6 +503,52 @@ css = f"""
     conic-gradient(from   45deg at left ,#0000,#000 1deg 89deg,#0000 90deg) 
       50% calc(50% - var(--z))/100% calc(2*var(--z)) repeat-y;
 }}
+
+
+#share-btn {{
+    color: #ffffff;font-weight: 600;
+    background-color: #000000;
+    font-family: 'IBM Plex Sans', sans-serif;
+    // border-radius: 9999px !important;
+
+    --border-angle: 0turn; // For animation.
+    --main-bg: conic-gradient(
+        from var(--border-angle),
+        #213,
+        #112 5%,
+        #112 60%,
+        #213 95%
+    );
+    
+    border: solid 5px transparent;
+    border-radius: 2em;
+    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
+    
+    background: 
+    // padding-box clip this background in to the overall element except the border.
+    var(--main-bg) padding-box,
+    // border-box extends this background to the border space
+    var(--gradient-border) border-box, 
+    // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background.
+    var(--main-bg) border-box;
+    
+    background-position: center center;
+    
+    animation: bg-spin 3s linear infinite;
+    @keyframes bg-spin {{
+        to {{
+            --border-angle: 1turn;
+        }}
+    }}
+}}
+#share-btn:hover {{
+    color: #ffffff;font-weight: 600;
+    background-color: #000000;
+    font-family: 'IBM Plex Sans', sans-serif;
+    border-radius: 9999px !important;
+    box-shadow: 0 0 20px #eee;
+    animation-play-state: paused;
+}}
 """
 
 for i in range(opt.max_palettes + 1):
@@ -727,6 +776,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                         elem_id='run-button'
                     )
 
+                    iface.btn_share = gr.Button('🤗 Share with Community', elem_id='share-btn')
 
                     gr.HTML(
                         """
@@ -927,6 +977,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     #     api_name='quality_select',
     # )
 
+    iface.btn_share.click(None, [], [], js=share_js)
+
     iface.btn_export_state.click(lambda x: vars(x), state, iface.json_state_export)
     iface.btn_import_state.click(import_state, [state, iface.tbox_state_import], [
         state,