Support serving user-defined javascript with Gradio

[codedealer]

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

Currently the functionality of Gradio as a web server is completely blackboxed: there is no way to take advantage of it from the project folder but the initial steps are already in place. Blocks constructor can take a css file path to extend the styles of the app. I propose the similar approach is taken with javascript.

Introduce the ability to set lists of css and js assets to be served by Gradio, e.g. Blocks could take css and js arguments as lists of either local file paths or URLs to external CNDs to be served along with Gradio's own assets.

An additional but very welcome feature would be to designate that a particular js file should be included as a script tag with type="module" attribute.

Additional context
The main drive behind this feature is extending the functionality of gradio components (partly relating to #1432) using first and third party static assets (css and js). While the support for styling is mostly there (#2104 is a welcome addition to that), the integration of scripts can currently only be performed via _js parameter on block instances which is not always convenient especially if a third party dependency needs to be introduced.

As an example at https://github.com/hlky/stable-diffusion we had an experience of extending Image functionality with a 3rd party plugin. The ability to just link the dependencies to be served via script tag and then call it via _js argument on the relevant components would significantly improve the developer experience whilst not having any drawbacks on user experience.

[abidlabs]

Hi @codedealer thanks for opening this issue. I do see a demand for this (#2296, #1989) and this is something we have been discussing internally, but we haven't reached a decision yet whether and how to support this.

[kutny]

Adding user-defined javascript to Gradio apps is possible by mounting Gradio app to FastAPI and dynamically modify the HTML code produced by Gradio using the FastAPI middleware:

import gradio as gr
from fastapi import FastAPI, Request

app = FastAPI()

@app.middleware("http")
async def some_fastapi_middleware(request: Request, call_next):
    response = await call_next(request)
    
    if path == "/":
        response_body = ""
        async for chunk in response.body_iterator:
            response_body += chunk.decode()

        some_javascript = """
        <script type="text/javascript">
        // some javascript code
        </script>
        """

        response_body = response_body.replace("</head>", some_javascript + "</head>")

        del response.headers["content-length"]

        return Response(
            content=response_body,
            status_code=response.status_code, 
            headers=dict(response.headers),
            media_type=response.media_type
        )

    return response


with gr.Blocks() as demo:
    # gradio elements

gr.mount_gradio_app(app, demo, path="/")

[thiswillbeyourgithub]

If anyone knows how to add shortcuts / hotkeys to a gradio Blocks app using _js or any other method I'm very interested :)

[freddyaboulton]

This got done by @dawoodkhan82 in the 4.0 branch I believe! Feel free to reopen if not the case @dawoodkhan82