JS package for self-hosted gradio apps

[Euruson]

• [x] I have searched to see if a similar issue already exists.

From this Q&A(https://github.com/gradio-app/gradio/discussions/2985), it seems that self-hosted gradio apps can not be embedded into web pages as web components.

Is your feature request related to a problem? Please describe.
I'm developing a web application that leverages multiple AI algorithms. I'm looking for a unified interface to integrate multiple AI models into my application, and gradio seems to be a great one. However, it seems that self-hosted gradio apps can only be embedded as IFrame and are hard to develop with existing modern web frameworks like React, Vue, etc. I believe more people are willing to develop web applications with AI functions if there is a convenient package.

Describe the solution you'd like
I think it's a great idea to provide a JS package that renders HTML elements on the fly and exposes data including input and output.

[pngwn]

Just to clarify, would you like to host your own gradio backend in python and embed that hosted gradio app on your own website, using a framework of your choice?

This isn't a usecase that we design for right now but it also isn't explicitly disallowed. We are current doing some work to make it easier to use gradio in a variety of ways, including better integration with the JS/ Frontend ecosystems. After we have done some internal refactoring we have tentative plans to make some packages available on npm that will make using gradio easier for frontend devs.

I'll do some tests and see what is stopping us from embedding non space hosted gradio apps.

[Euruson]

Yes. I'm hosting several gradio apps and want to leverage them in my web applications. For example, feeding the output of AIGC models to Pixi.js to make some animations. In this case, I have to set some input parameters and post-process the returned results in JS.

[pngwn]

This sounds like you'd be better off using the API rather than full GUI. We'll be making that easier soon too.

[lvelvee]

lgtm

[abidlabs]

Agreed. We have a dedicated issue for the API here: #2516. Shall we close this?

[pngwn]

I'd like to keep this open, i do think it would be nice to do:

import Gradio from '@gradio/svelte';
import Gradio from '@gradio/react';
import Gradio from '@gradio/vue';

<Gradio src="..." />

in react/vue/svelte as well as ensuring that self hosted embeds work as expected. I'll clarify that this issue is about self-hosted Gradio apps (will test + fix if it isn't working).

I''ll open a new issue for the frontend wrappers (they'd just be simple wrappers around the WC but WCs don't always play nicely with some frameworks).

[pngwn]

Actually, lets close this and open dedicated issues to avoid confusion.

[pngwn]

#3253 #3254