Error embedding space with web component

[alexcumplido]

Describe the bug

When I tried to embed space in my Svelte frontend using <script is:inline type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.10.0/gradio.js"></script>

The console throws the following errors:

Access to script at 'https://gradio.s3-us-west-2.amazonaws.com/4.10.0/gradio.js' from origin 'http://localhost:4321' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

       GET https://gradio.s3-us-west-2.amazonaws.com/4.10.0/gradio.js net::ERR_FAILED

I notice that with 4.0.2 it's working, but I need 4.10.0. Also, for greater versions than 4.0.2 the content of gradio.js changed. gradio.js < 4.0.2

function make_script(src) {
    const script = document.createElement('script');
    script.type = 'module';
    script.setAttribute("crossorigin", "");
    script.src = src;
    document.head.appendChild(script);
}
make_script("https://gradio.s3-us-west-2.amazonaws.com/4.0.2/assets/index-0526d562.js");

gradio.js 4.10.0 import("./assets/index-96c4f758.js");

So, finally, if i load the script with <script is:inline type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.10.0/assets/index-96c4f758.js" crossorigin=""></script>

It works but the console throws some CSS errors, so I think it's not the expected behavior.

Failed to load resource: the server responded with a status of 403 (Forbidden)
css.ts:15 Unable to preload CSS for https://gradio.s3-us-west-2.amazonaws.com/assets/index-55eab32e.css

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

Screenshot

No response

Logs

No response

System Info

4.10.0

Severity

I can work around it

[pngwn]

This is strange, will look into it!

[PaulNdrei]

Hi @pngwn I work with Alex. It seems like now it's not throwing the CORS error.

The space load is OK and works as expected. But the console browser console throws the following CSS errors:

Failed to load resource: the server responded with a status of 403 (Forbidden)
css.ts:15 Unable to preload CSS for https://gradio.s3-us-west-2.amazonaws.com/assets/index-55eab32e.css
(anonymous) @ css.ts:15
index-55eab32e.css:1 
       Failed to load resource: the server responded with a status of 403 (Forbidden)

Our svelte code:

<script is:inline
    type="module"
    src="https://gradio.s3-us-west-2.amazonaws.com/4.10.0/gradio.js">
</script>

Thank you.

[abrichr]

Any update on this? Also experiencing this in https://github.com/OpenAdaptAI/SoM/pull/4

[hannahblair]

@pngwn I dont suppose you have capacity to take a look at this one? If not, I will when I get some bandwidth.