gradio自定义样式实例
发布时间
阅读量：
阅读量
Gradio是一款支持创建交互式机器学习模型部署系统的Python工具包。它提供了一个便捷的用户界面框架，在几分钟之内即可完成机器学习模型的部署工作。
为了使Gradio的用户界面（UI）更加贴近你的需求，
你 可以 采用 自定义样式。
下面是 介绍 Gradio自定义样式的 步骤。
import gradio as gr
def my_function(x):
return x
def my_custom_style():
return {"@global": {
"body": {
"background-color": "pink",
},
".input": {
"color": "red",
},
".output": {
"background-color": "yellow",
}
}
}
# 使用自定义样式
interface = gr.Interface(fn=my_function, inputs="text", outputs="text", title="My App", theme=my_custom_style)
interface.launch()在代码中我们定义了一个名为"my_custom_style"的函数其中该样式被定义为包含自定义CSS声明的内容以控制文本和背景颜色等属性
在实现过程中，在调用接口之前
总的来说，在使用Gradio进行样式定制时相当直观——你只需要预先设计一组符合自己风格的CSS样式（即CSS文件），随后将这些CSS样式传递给应用程序进行应用即可。这种设计方法让你能够根据个人需求调整其外观风格并调节其行为模式。
import gradio as gr
import uvicorn
from fastapi import FastAPI
import pandas as pd
app = FastAPI()
def compute_data(inp_data):
print("计算数据")
return pd.DataFrame({"6": [inp_data.values.astype("float").sum()]})
def clear_data(inp_data):
print("清除数据")
return inp_data
def save_data(inp_data):
print("保存数据")
return inp_data
# with gr.Blocks as demo:
# gr.Markdown("Start typing below and then click **Run** to see the output.")
custom_style = """
#component-18 > div.svelte-8hrj8a > div >div {
height: 300px;
width:400px;
overflow: auto;
}
#component-13 > div.svelte-8hrj8a > div.table-wrap.scroll-hide.svelte-8hrj8a.no-wrap > div
{
height: 300px;
width:400px;
overflow: auto;
}
#component-13 > div.svelte-8hrj8a > div.controls-wrap.svelte-8hrj8a
{
display:None
}
"""
btn1, btn2, btn3 = None, None, None
with gr.Blocks(css=custom_style) as demo:
with gr.Column():
with gr.Column():
inp = gr.Dataframe(headers=["10_d", "d_d", "12_12", "123"], type="pandas", datatype="number", row_count=1,
max_rows=1,
col_count=4)
with gr.Row():
btn1 = gr.Button("清除")
btn2 = gr.Button("计算")
with gr.Column():
out = gr.Dataframe(headers=["6"], type="pandas", datatype="number", row_count=1, col_count=1, max_rows=1)
# gr.Label("组个按钮")
btn3 = gr.Button("保存")
btn1.click(fn=clear_data, inputs=inp, outputs=inp)
btn2.click(fn=compute_data, inputs=inp, outputs=out)
btn3.click(fn=save_data, inputs=inp)
@app.get("/")
def read_main():
return {"message": "This is your main app"}
# app = gr.mount_gradio_app(app, demo, path="/")
app = gr.mount_gradio_app(app, demo, path="/gradio")
app = gr.mount_gradio_app(app, demo, path="/gradio1")
if __name__ == '__main__':
uvicorn.run(app='main:app', host="127.0.0.1", port=8000, reload=True)全部评论 (0)
还没有任何评论哟~