share button fixes (#2)

- share button fixes (921db717ea62a850767e67adb0289b86a17f9a11)


Co-authored-by: Radamés Ajna <radames@users.noreply.huggingface.co>

app.py

@@ -1,16 +1,15 @@
+import tempfile
+from share_btn import community_icon_html, loading_icon_html, share_js
+import huggingface_hub
+import gradio as gr
+from fromage import utils
+from fromage import models
+import matplotlib.pyplot as plt
+from PIL import Image
+import torch
+import numpy as np
 import os
 os.environ["HF_HUB_ENABLE_HF_TRANSFER"] = "False"
-import numpy as np
-import torch
-from PIL import Image
-import matplotlib.pyplot as plt
-
-from fromage import models
-from fromage import utils
-import gradio as gr
-import huggingface_hub
-from share_btn import community_icon_html, loading_icon_html, share_js
-import tempfile
 
 
 css = """
@@ -18,6 +17,7 @@ css = """
         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;
         margin-top: 10px;
         margin-left: auto;
+        flex: unset;
     }
     #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;
@@ -35,8 +35,10 @@ css = """
 """
 
 # Download model from HF Hub.
-ckpt_path = huggingface_hub.hf_hub_download(repo_id='jykoh/fromage', filename='pretrained_ckpt.pth.tar')
-args_path = huggingface_hub.hf_hub_download(repo_id='jykoh/fromage', filename='model_args.json')
+ckpt_path = huggingface_hub.hf_hub_download(
+    repo_id='jykoh/fromage', filename='pretrained_ckpt.pth.tar')
+args_path = huggingface_hub.hf_hub_download(
+    repo_id='jykoh/fromage', filename='model_args.json')
 model = models.load_fromage('./', args_path, ckpt_path)
 
 
@@ -44,7 +46,8 @@ def upload_image(state, image_input):
     conversation = state[0]
     chat_history = state[1]
     conversation += [(f"![](/file={image_input.name})", "")]
-    input_image = Image.open(image_input.name).resize((224, 224)).convert('RGB')
+    input_image = Image.open(image_input.name).resize(
+        (224, 224)).convert('RGB')
     return [conversation, chat_history, input_image], conversation
 
 
@@ -86,10 +89,11 @@ def generate_for_prompt(input_text, state, ret_scale_factor, max_nm_rets, num_wo
     if temperature != 0.0:
         top_p = 0.95
 
-    print('Running model.generate_for_images_and_texts with', model_inputs, flush=True)
-    model_outputs = model.generate_for_images_and_texts(model_inputs, 
-        num_words=max(num_words, 1), ret_scale_factor=ret_scale_factor, top_p=top_p,
-        temperature=temperature, max_num_rets=max_nm_rets)
+    print('Running model.generate_for_images_and_texts with',
+          model_inputs, flush=True)
+    model_outputs = model.generate_for_images_and_texts(model_inputs,
+                                                        num_words=max(num_words, 1), ret_scale_factor=ret_scale_factor, top_p=top_p,
+                                                        temperature=temperature, max_num_rets=max_nm_rets)
     print('model_outputs', model_outputs, flush=True)
 
     im_names = []
@@ -108,13 +112,15 @@ def generate_for_prompt(input_text, state, ret_scale_factor, max_nm_rets, num_wo
             response += f'<img src="/file={filename}">'
 
     # TODO(jykoh): Persist image inputs.
-    chat_history = model_inputs + [' '.join([s for s in model_outputs if type(s) == str]) + '\n']
-    conversation.append((input_text, response.replace('[RET]', '')))  # Remove [RET] from outputs.
+    chat_history = model_inputs + \
+        [' '.join([s for s in model_outputs if type(s) == str]) + '\n']
+    # Remove [RET] from outputs.
+    conversation.append((input_text, response.replace('[RET]', '')))
 
     # Set input image to None.
     print('state', state, flush=True)
     print('updated state', [conversation, chat_history, None], flush=True)
-    return [conversation, chat_history, None], conversation
+    return [conversation, chat_history, None], conversation, gr.update(visible=True)
 
 
 with gr.Blocks(css=css) as demo:
@@ -128,33 +134,42 @@ with gr.Blocks(css=css) as demo:
 
     chatbot = gr.Chatbot(elem_id="chatbot")
     gr_state = gr.State([[], [], None])  # chat_history, input_image
-    with gr.Group(elem_id="share-btn-container", visible=False):
-        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")
+    with gr.Row(visible=False) as share_group:
+        with gr.Group(elem_id="share-btn-container"):
+            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")
 
     with gr.Row():
         with gr.Column(scale=0.3, min_width=100):
-            ret_scale_factor = gr.Slider(minimum=0.0, maximum=3.0, value=1.0, step=0.1, interactive=True, label="Multiplier for returning images (higher means more frequent)")
-            max_ret_images = gr.Number(minimum=0, maximum=3, value=1, precision=1, interactive=True, label="Max images to return")
-            gr_max_len = gr.Slider(minimum=1, maximum=64, value=32, step=1, interactive=True, label="Max # of words returned")
-            gr_temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.0, interactive=True, label="Temperature")
+            ret_scale_factor = gr.Slider(minimum=0.0, maximum=3.0, value=1.0, step=0.1, interactive=True,
+                                         label="Multiplier for returning images (higher means more frequent)")
+            max_ret_images = gr.Number(
+                minimum=0, maximum=3, value=1, precision=1, interactive=True, label="Max images to return")
+            gr_max_len = gr.Slider(minimum=1, maximum=64, value=32,
+                                   step=1, interactive=True, label="Max # of words returned")
+            gr_temperature = gr.Slider(
+                minimum=0.0, maximum=1.0, value=0.0, interactive=True, label="Temperature")
 
         with gr.Column(scale=0.7, min_width=400):
             image_btn = gr.UploadButton("🖼️ Image Input", file_types=["image"])
-            text_input = gr.Textbox(label="Chat Input", lines=1, placeholder="Upload an image above [optional]. Then enter a text prompt, and press enter!")
+            text_input = gr.Textbox(
+                label="Chat Input", lines=1, placeholder="Upload an image above [optional]. Then enter a text prompt, and press enter!")
 
             with gr.Row():
                 with gr.Column(scale=0.33):
-                    submit_btn = gr.Button("Submit", interactive=True, variant="primary")
+                    submit_btn = gr.Button(
+                        "Submit", interactive=True, variant="primary")
                 with gr.Column(scale=0.33):
                     clear_last_btn = gr.Button("Clear Last Round")
                 with gr.Column(scale=0.33):
                     clear_btn = gr.Button("Clear All")
 
-    text_input.submit(generate_for_prompt, [text_input, gr_state, ret_scale_factor, max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot])
+    text_input.submit(generate_for_prompt, [text_input, gr_state, ret_scale_factor,
+                      max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot, share_group])
     text_input.submit(lambda: "", None, text_input)  # Reset chatbox.
-    submit_btn.click(generate_for_prompt, [text_input, gr_state, ret_scale_factor, max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot])
+    submit_btn.click(generate_for_prompt, [text_input, gr_state, ret_scale_factor,
+                     max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot, share_group])
     submit_btn.click(lambda: "", None, text_input)  # Reset chatbox.
 
     image_btn.upload(upload_image, [gr_state, image_btn], [gr_state, chatbot])
@@ -164,4 +179,4 @@ with gr.Blocks(css=css) as demo:
 
 
 demo.queue(concurrency_count=1, api_open=False, max_size=16)
-demo.launch(debug=True, server_name="0.0.0.0")
+demo.launch(debug=True, server_name="0.0.0.0")

share_btn.py

@@ -12,7 +12,9 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
 
 share_js = """
 async () => {
-    async function uploadFile(file){
+    const html2canvas = (await import('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.esm.js')).default;
+    async function uploadFile(file) {
+        console.log(file.type)
         const UPLOAD_URL = 'https://huggingface.co/uploads';
         const response = await fetch(UPLOAD_URL, {
             method: 'POST',
@@ -25,53 +27,45 @@ async () => {
         const url = await response.text();
         return url;
     }
+    async function getImageFile(div) {
+        return new Promise((resolve, reject) =>
+            html2canvas(div)
+                .then((canvas) => {
+                    const imageBlob = canvas.toBlob((blob) => {
+                        const imageId = Date.now();
+                        const fileName = "FROMAGe-" + imageId + ".jpg";
+                        resolve(new File([blob], fileName, { type: 'image/jpeg' }));
+                    }, 'image/jpeg', 0.95);
+                })
 
-    //Creating dynamic link that automatically click
-    function downloadURI(uri, name) {
-        var link = document.createElement("a");
-        link.download = name;
-        link.href = uri;
-        link.click();
-    }
-
-    //Your modified code.
-    function printToFile(div) {
-        html2canvas(div, {
-            onrendered: function (canvas) {
-                var myImage = canvas.toDataURL("image/png");
-                downloadURI("data:" + myImage, "fromage_chat.png");
-            }
-        });
+        )
     }
 
     const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app');
     const chatbotEl = gradioEl.querySelector('#chatbot')
-    printToFile(chatbotEl)
-    const inputPromptEl = "test test";
-    //const outputChatbot = await getInputVideoFile(outputVideoEl);
-    //const urlChatbotImage = await uploadFile(outputChatbot);
-    const urlChatbotImage = "placeholder";
-
-    let titleTxt = `FROMAGe: ${inputPromptEl}`;
+    const imageFile = await getImageFile(chatbotEl);
+    const urlChatbotImage = await uploadFile(imageFile);
+    console.log(urlChatbotImage);
+    let titleTxt = `FROMAGe`;
 
     const shareBtnEl = gradioEl.querySelector('#share-btn');
     const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
     const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
     shareBtnEl.style.pointerEvents = 'none';
     shareIconEl.style.display = 'none';
-    loadingIconEl.style.removeProperty('display');    
+    loadingIconEl.style.removeProperty('display');
     const descriptionMd = `
-## ${inputPromptEl}
     
-${urlChatbotImage}
+<img src='${urlChatbotImage}'>
 `;
     const params = new URLSearchParams({
         title: titleTxt,
         description: descriptionMd,
     });
-	const paramsStr = params.toString();
-	window.open(`https://huggingface.co/spaces/jykoh/fromage/discussions/new?${paramsStr}`, '_blank');
+    const paramsStr = params.toString();
+    window.open(`https://huggingface.co/spaces/jykoh/fromage/discussions/new?${paramsStr}`, '_blank');
     shareBtnEl.style.removeProperty('pointer-events');
     shareIconEl.style.removeProperty('display');
     loadingIconEl.style.display = 'none';
-}"""
+}
+"""