JS call txt or image not update

luoweb commented 1 year ago

Describe the bug

JS call txt or image not update, like the bug:Fix JS call #4486, the different is as flow:

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

UI:

import gradio as gr
import httprequest as httprequest

with gr.Blocks() as demo:
    demo.load(_js=wpjbridge.SdapiTest)

    a = gr.Textbox()
    retImage = gr.Image()
    c = gr.Button("hello",label="hello")
    d = gr.Button("world",label="world")
    c.click(None, None, a, _js="() => {console.log('hello'); return ['abc'];}")
    # d.click(None, None, a, _js="() => {console.log('world'); return ['def'];}")
    d.click(None, None, retImage, _js="()=>{ console.log('SdapiTest'); return SdapiTest(); }")
demo.launch(root_path="/blockai/web2/")

_JS:

fetch(translate_url, {
            method: "POST", // or 'PUT'
            headers: auth_headers,
            body: JSON.stringify(prompt_tran_src),
        }).then((response) => response.json())
            .then((data) => {
                console.log("Translate Success:", data);
                console.log(data.translated_text)
                prompt_txt2img_src.prompt = data.translated_text;
                console.log(prompt_txt2img_src);

                fetch(txt2img_url, {
                    method: "POST", // or 'PUT'
                    headers: auth_headers,
                    body: JSON.stringify(prompt_txt2img_src)
                }).then((response) => response.json())
                    .then((data) => {
                        console.log("Txt2Image Success:", data);
                        images = data.images;
                        console.log(images);
                        // return "data:image/png;base64," + images[0];
                        retImage = "data:image/gif;base64,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";

                        return retImage;
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                    });
            })
            .catch((error) => {
                console.error("Error:", error);
            });

Screenshot

![Uploading image.png…]() ![Uploading Screenshot 2023-08-09 at 9.21.24 AM.png…]()

Logs

prompt_tran_src
VM96:42 {texts: '锄禾日当午', from_lang: 'zh_CN', to_lang: 'en_US', api: 'mbart50', api_config: {…}}
VM96:51 Translate Success: {success: true, message: '', text: '锄禾日当午', translated_text: 'Weeding Day at noon', from_lang: 'zh_CN', …}
VM96:52 Weeding Day at noon
VM96:54 {prompt: 'Weeding Day at noon', steps: 5, batch_size: 1, override_settings: {…}}
VM96:62 Txt2Image Success: {images: Array(1), parameters: {…}, info: '{"prompt": "Weeding Day at noon", "all_prompts": […p": 1, "is_using_inpainting_conditioning": false}'}
VM96:64 ['iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAzH…owOxau5Vf1ioBIizRJ/r/AD49VjUKmeQ8AAAAAElFTkSuQmCC']

System Info

Mac OS

Severity

I can work around it

abidlabs commented 1 year ago

Sorry this issue is very unclear and the code that is provided is not formatted correctly. Please edit the issue to fix this.

luoweb commented 1 year ago

Sorry this issue is very unclear and the code that is provided is not formatted correctly. Please edit the issue to fix this.

had formatted. It seems that the component did not await before return. here is another reproduction code:

import gradio as gr

GetLocalStorage = """

function() {
    // debugger;
    console.log("GetLocalStorage");

    globalThis.setStorage = (key, value)=>{
        console.log("setStorage:" + key);
        localStorage.setItem(key, value);
    };
    globalThis.getStorage = (key)=>{
        console.log("getStorage:" + key);
        return localStorage.getItem(key);
    };

   # did not return timeout = 7 
    setTimeout("localStorage.setItem('timeout','7')",5000 ); 

    const localstorage =  JSON.stringify(localStorage);
    console.log("localstorage:" + localstorage);

    return [localstorage]
}
"""

with gr.Blocks() as demo:
    with gr.Column(variant="panel", elem_id="txt2imgPanel"):
        with gr.Row(variant="compact"):
            url_params = gr.JSON({"key":"value"}, visible=True, label="URL Params")
            text_input = gr.Text(label="Input")
            text_output = gr.Text(label="Output")

    demo.load(None,None,[text_output],_js=app_jslib.GetLocalStorage)

[localstorage] return old value, setTimeout("localStorage.setItem('timeout','7')",5000 );

luoweb commented 1 year ago

code mistake that js function not sync

gradio-app / gradio