Hello everyone,
I’m a Data Scientist with “good” knowledge of python & ML but no experience in front end or html/css/js/react/etc… For this reason i’m finding gradio a super useful tool to create light front end for the various algorithms me and my team are developing, which we wanna share to other people internally.
Now the problem is that i have different gradio front-ends (one for some computer vision solutions, one for some nlp solutions, etc…). What i would like to have is a main page where i list all these services we created, something similar of what is happening on the main page of gradio
Is this something i can do as well with gradio or i need to use a different tool?
Another reason to use gradio for the homepage is to keep the same style from homepage to the actual services.
What i do right now is to embed some HTML code on the “article” parameter where i put some image which do some redirection to the actual front-end of the desired application.
article = """
<div class="row">
<div class="column">
<a href="http://host-server-ip:port-app1/"><img src="logo_app1.png"></a>
</div>
<div class="column">
<a href="http://host-server-ip:port-app2/"><img src="logo_app2.png"></a>
</div>
<div class="column">
<a href="http://host-server-ip:port-app3/"><img src="logo_app3.png"></a>
</div>
</div>
"""
One problem is that i still need to define input and output in the gradio interface in order to work, but this is something i would avoid to do for the homepage.
Hi @fgrimaldi !
What do you mean by the following?
One problem is that i still need to define input and output in the gradio interface in order to work
Are these apps hosted on spaces or somewhere else?
I think are two things you can do:
- Static HTML embed
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html {
/* background: #111; */
/* color: #eee; */
font-family: Source Sans Pro;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Space Aggregator</title>
</head>
<body>
<iframe
src="<demo-1-address>"
frameborder="0"
></iframe>
<iframe
src="<demo-2-address>"
frameborder="0"
></iframe>
.....
</body>
</html>
That would just display the iframes. For stuff like tabs and stuff you would have to write more HTML.
- Build a gradio app that loads other gradio apps
import gradio as gr
#demo_1 and demo_2 are Blocks or Interface instances
from demo_1_source import demo_1
from demo_2_source import demo_2
with gr.Blocks() as main_demo:
with gr.Tabs():
with gr.TabItem():
demo_1.render()
with gr.TabItem():
demo_2.render()
.........
main_demo.launch()
1 Like
Hi @freddyaboulton,
first of all thanks for illustrating the options!
I thought of the first one, but didn’t want to dig too much into html even if i would love to learn some basic stuff for front end.
About the second one i did not think about this possibility of using different interface in various blocks… I will try to implemented and have a look at it as soon as possible.
Now back to your question:
- about the input/output: i was using just the gradio interface class and not the blocks, there i was required to define some inputs, outputs blocks and a function
- we host them internally in one of our server, we have a company network and sadly we cannot share anything outside.
By the way right now i found a solution which mix a bit streamlit and gradio:
with streamlit i can easily implement an homepage and then different pages, then in each page using iframe i embed the gradio application. I was thinking if it was worth to go 100% with streamlit but i really like gradio design better for this simple modules, so this solution of embedding gradio app inside streamlit is working quite fine while also being aesthetically pleasant.
It turns out something like that (sorry for the blue blocks, but here in the company are quite paranoid of leaking even the smallest info)
Cool that you got it to work with streamlit + gradio!
Tested your second solution and it works perfectly! Thanks again!
Glad it’s working @fgrimaldi !
