How to serve an HTML file?

🔒 Gradio
2

Hi @mandyvarel ,

That’s a great question. You can’t serve the static pages direct from Gradio, but you can mount Gradio within another FastAPI app.
Then use the FastAPI app StaticFiles to serve the static pages under /static and the Gradio app under /.

Here is a complete example of how to do that:

from pathlib import Path
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
import uvicorn
import gradio as gr
from datetime import datetime


# create a FastAPI app
app = FastAPI()

# create a static directory to store the static files
static_dir = Path('./static')
static_dir.mkdir(parents=True, exist_ok=True)

# mount FastAPI StaticFiles server
app.mount("/static", StaticFiles(directory=static_dir), name="static")

# Gradio code
def predict(text_input):
    file_name = f"{datetime.utcnow().strftime('%s')}.html"
    file_path = static_dir / file_name
    print(file_path)
    with open(file_path, "w") as f:
        f.write(f"""<h2>Hello {text_input} </h2>
        <h3>{file_name}</h3>
        """)

    return f'<a href="/static/{file_name}" target="_blank">{file_name}</a>'


with gr.Blocks() as block:
    text_input = gr.Textbox(label="Name")
    markdown = gr.Markdown(label="Output Box")
    new_btn = gr.Button("New")
    new_btn.click(fn=predict, inputs=[text_input], outputs=[markdown])

# mount Gradio app to FastAPI app
app = gr.mount_gradio_app(app, block, path="/")

# serve the app
if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=7860)

# run the app with
# python app.py
# or
# uvicorn "app:app" --host "0.0.0.0" --port 7860 --reload

To run,

python app.py

or

uvicorn "app:app" --host "0.0.0.0" --port 7860 --reload

If you’re running on Colab you need an slightly different approach:

Here’s an example

1 Like