Gradio unable to render html/badge on Huggingface Space

[onuralpszr]

Describe the bug

I was working hugging-face space and when I added markdown texts and used via "gr.Markdown("markdown text") it was unable to render. But I tested locally it works fine and I tested on gradio online demo docs also works fine but unable to see space.

Space url : https://huggingface.co/spaces/onuralpszr/paligemma2-detection

I am pasting current code but I am pretty sure it will work I didn't understand why it is not working on space

Any help would be awesome, thank you very much.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr

with gr.Blocks() as app:
    gr.Markdown( """
    ## PaliGemma 2 Detection with Supervision - Demo \n\n

    <div style="display: flex; gap: 10px;">
    <a href="https://github.com/google-research/big_vision/blob/main/big_vision/configs/proj/paligemma/README.md">
        <img src="https://img.shields.io/badge/Github-100000?style=flat&logo=github&logoColor=white" alt="Github">
    </a>
    <a href="https://huggingface.co/blog/paligemma">
        <img src="https://img.shields.io/badge/Huggingface-FFD21E?style=flat&logo=Huggingface&logoColor=black" alt="Huggingface">
    </a>
    <a href="https://github.com/merveenoyan/smol-vision/blob/main/Fine_tune_PaliGemma.ipynb">
        <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Colab">
    </a>
    <a href="https://arxiv.org/abs/2412.03555">
        <img src="https://img.shields.io/badge/Arvix-B31B1B?style=flat&logo=arXiv&logoColor=white" alt="Paper">
    </a>
    <a href="https://supervision.roboflow.com/">
        <img src="https://img.shields.io/badge/Supervision-6706CE?style=flat&logo=Roboflow&logoColor=white" alt="Supervision">
    </a>
    </div>

    \n\n
    PaliGemma 2 is an open vision-language model by Google, inspired by [PaLI-3](https://arxiv.org/abs/2310.09199) and 
    built with open components such as the [SigLIP](https://arxiv.org/abs/2303.15343) 
    vision model and the [Gemma 2](https://arxiv.org/abs/2408.00118) language model. PaliGemma 2 is designed as a versatile 
    model for transfer to a wide range of vision-language tasks such as image and short video caption, visual question 
    answering, text reading, object detection and object segmentation.

    This space show how to use PaliGemma 2 for object detection with supervision.
    You can input an image and a text prompt
    """)
    
    with gr.Tab("Image Detection"):
        with gr.Row():
            with gr.Column():
                input_image = gr.Image(type="pil", label="Input Image")
                input_text = gr.Textbox(lines=2, placeholder="Enter text here...", label="Enter prompt for example 'detect person;dog")
                class_names = gr.Textbox(lines=1, placeholder="Enter class names separated by commas...", label="Class Names")
            with gr.Column():
                annotated_image = gr.Image(type="pil", label="Annotated Image")
                detection_result = gr.Textbox(label="Detection Result")
        gr.Button("Submit").click(
            fn=process_image,
            inputs=[input_image, input_text, class_names],
            outputs=[annotated_image, detection_result]
        )
    
    with gr.Tab("Video Detection"):
      with gr.Row():
        with gr.Column():
            input_video = gr.Video(label="Input Video")
            input_text = gr.Textbox(lines=2, placeholder="Enter text here...", label="Enter prompt for example 'detect person;dog")
            class_names = gr.Textbox(lines=1, placeholder="Enter class names separated by commas...", label="Class Names")
        with gr.Column():
            output_video = gr.Video(label="Annotated Video")
            detection_result = gr.Textbox(label="Detection Result")
        
      gr.Button("Process Video").click(
          fn=process_video,
          inputs=[input_video, input_text, class_names],
          outputs=[output_video, detection_result]
      )

if __name__ == "__main__":
    app.launch(debug=True)

Screenshot

Local run

Gradio online demo view for testing

Huggingface Space View

Logs

No log

System Info

Hugging Space platform

Severity

I can work around it

[onuralpszr]

Extra note : I even tried with "Factory Reset" and still no rendering

[abidlabs]

Can you try setting ssr_mode=False in launch()?

[onuralpszr]

@abidlabs ssr_mode=False fix the issue thanks, but you can also give insight why server side rendering needs to be False at
least for logic stand point more info would be really helpful

Thank you

[abidlabs]

Yeah for some reason images are not being rendered correctly in SSR, we're looking into the underlying issue!

[onuralpszr]

Yeah for some reason images are not being rendered correctly in SSR, we're looking into the underlying issue!

Great, thank you, I am keeping issue open until fixed via PR.