search

gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
34.14k stars 2.6k forks source link

Linebreaks not showing in embeds #4751

Open JIBSIL opened 1 year ago

JIBSIL commented 1 year ago

Describe the bug

Hi,

I'm trying to embed a Huggingface space into my website. I'm not getting consistent behaviour between the embedded and standalone versions.

Linebreaks and code blocks (and it appears, all markdown) is broken in embeds.

Relevant parts of my HTML code:

<body class="bg-gray-200 flex items-center justify-center">
    <div class="container mx-auto bg-white rounded shadow-lg p-8">
...
        <gradio-app id="hf-onload" src="https://huggingfaceh4-starchat-playground.hf.space"></gradio-app>
...
    </div>
</body>

Yields this:

image

The same prompt (cached so it's the exact same) yields this on the full Huggingface/Gradio instance:

image

Have you searched existing issues? 🔎

Reproduction

<html>
    <head>
        <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.28.3/gradio.js"></script>
    </head>
    <body>
        <gradio-app id="hf-onload" src="https://huggingfaceh4-starchat-playground.hf.space"></gradio-app>
    </body>
</html>

Screenshot

n/a (provided in description)

Logs

n/a (happens clientside)

System Info

Client info:
Microsoft Edge
Version 114.0.1823.58 (Official build) (64-bit)

Extensions:
uBlock, Privacy Pass

I think it's an error with the clientside gradio lib so gradio version isn't important

Severity

Blocking usage of gradio

Kunal-sharan commented 1 month ago

Markdown response is showing now in the upgraded version of gradio.js file below is a sample code.

<html>
    <head>
        <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.44.0/gradio.js"></script>
    </head>
    <body>
        <gradio-app src="https://huggingface-projects-llama-2-13b-chat.hf.space"></gradio-app>
    </body>
</html>

image

image

Hope this helps 😊