Skip to content

Instantly share code, notes, and snippets.

@sborquez

sborquez/gradio_multipage.py

Created January 15, 2024 18:21
Show Gist options
  • Save sborquez/6e5fb3400e45e56353bf3aa18fa9834a to your computer and use it in GitHub Desktop.
Save sborquez/6e5fb3400e45e56353bf3aa18fa9834a to your computer and use it in GitHub Desktop.
Download ZIP
Gradio with multipage demos
Raw
gradio_multipage.py
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
import gradio as gr
app = FastAPI()
HELLO_ROUTE = "/hello"
GOODBYE_ROUTE = "/goodbye"
index_html = '''
<!DOCTYPE html>
<html>
<head>
<title>Gradio App Collection</title>
<style>
body {font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4;}
.container {display: flex;}
.nav {background-color: #555; width: 200px; height: 100vh; overflow: auto;}
.nav a {padding: 10px 15px; text-decoration: none; font-size: 18px; color: white; display: block;}
.nav a:hover, .nav a.active {background-color: #ddd; color: black;}
.header-img {width: 100%; height: auto; margin-bottom: 20px;}
.content {flex-grow: 1; padding: 20px;}
iframe {width: 100%; height: 500px; border: none;}
.readme {padding: 15px; background-color: white; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<a href="https://www.gradio.app/" target="_blank">
<img src="https://www.gradio.app/_app/immutable/assets/gradio.8a5e8876.svg" alt="Header Image" class="header-img">
</a>
<br>
<a href="#!" id="nav-home" class="active" onclick="showApp('home')">Home</a>
<a href="#!" id="nav-app1" onclick="showApp('app1')">App 1</a>
<a href="#!" id="nav-app2" onclick="showApp('app2')">App 2</a>
<!-- Additional navigation links can be added here -->
</div>
<div class="content">
<div id="home" class="readme">
<h2>Welcome to the Gradio App Collection</h2>
<p>This is a collection of various Gradio applications. You can navigate through the applications using the sidebar.</p>
</div>
<div id="app1" style="display:none;">
<div class="readme">
<h2>App 1: Hello Route</h2>
<p>This is a the app 1.</p>
</div>
<br>
<iframe src="/hello"></iframe>
</div>
<div id="app2" style="display:none;">
<div class="readme">
<h2>App 2: Goodbye Route</h2>
<p>This is a the app 2.</p>
</div>
<br>
<iframe src="/goodbye"></iframe>
</div>
<!-- Additional app divs can be added here -->
</div>
</div>
<script>
function showApp(appId) {
var apps = document.querySelectorAll('.content > div');
var navLinks = document.querySelectorAll('.nav a');
apps.forEach(app => app.style.display = 'none');
navLinks.forEach(link => link.classList.remove('active'));
document.getElementById(appId).style.display = 'block';
document.getElementById('nav-' + appId).classList.add('active');
}
</script>
</body>
</html>
'''
@app.get("/", response_class=HTMLResponse)
def index():
return index_html
hello_app = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
goodbye_app = gr.Interface(lambda x: "Goodbye, " + x + "!", "textbox", "textbox")
app = gr.mount_gradio_app(app, hello_app, path=HELLO_ROUTE)
app = gr.mount_gradio_app(app, goodbye_app, path=GOODBYE_ROUTE)
if __name__ == "__main__":
import uvicorn
uvicorn.run(app)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment