Failed to show images in Windows（Windows无法显示图片问题）

[mumu2233]

模型可以正常推理，但是在网页端无法显示图片。

[wrk226]

Same here. It works on linux, but no image on windows.

[chenfei-wu]

Hi @mumu2233 and @wrk226 , the web failed to show images because Gradio failed to parse \\ in windows.

I wrote a simple code to reproduce your error in Windows.

import gradio as gr
import re
import requests
import shutil
import os

# Download a flower png and save it to image/flower.png
os.makedirs('image', exist_ok=True)
r = requests.get('https://download.samplelib.com/png/sample-bumblebee-400x300.png', stream=True)
with open('image/flower.png', 'wb') as out_file:
    shutil.copyfileobj(r.raw, out_file)


# Whatever the user inputs, always outputs the flower image
def add_text(state, text):
    response = "image\\flower.png"  # Wrong Line
    # response = "image\\flower.png".replace("\\", "/")  # Correct Line
    response = re.sub('(image/\S*png)', lambda m: f'![](/file={m.group(0)})*{m.group(0)}*', response)
    state = state + [(text, response)]
    return state, state

# The layout 
with gr.Blocks(css="#chatbot .overflow-y-auto{height:500px}") as demo:
    chatbot = gr.Chatbot(elem_id="chatbot")
    state = gr.State([])
    with gr.Row():
        with gr.Column():
            txt = gr.Textbox(show_label=False, placeholder="Enter text").style(container=False)
    txt.submit(add_text, [state, txt], [state, chatbot])
    txt.submit(lambda :"", None, txt)

# Start demo
demo.launch()

By sending "Hi" in the text box, you will get the following response without an image:

To solve this issue, you will need to change the following line response = "image\\flower.png" # Wrong Line into response = "image\\flower.png".replace("\\", "/") # Correct Line

Try again, you will see the flowers:

Let's get back to our original code:

response = re.sub('(image/\S*png)', lambda m: f'![](/file={m.group(0)})*{m.group(0)}*', res['output'])

This code failed in Windows since res['output'] may contain \\, which means the sub function failed to do any replacement to generate the markdown.

So a possible workaround is that you can try to add the following line before running re.sub:

res['output'] = res['output'].replace("\\", "/")

Please tell me whether you have solved your issues.

-chenfei

[wrk226]

Yes, it works, thank you so much! @chenfei-wu

[mumu2233]

Thank you so much, i works! @chenfei-wu

[lucienshawls]

@chenfei-wu 建议把这个issue置顶