非科班出身碰瓷算法的某兔，为了在暑假给自己的算法搭建一个交互网站，每天挣扎于前端三大件，网络原理，还有些许后端知识。一会是因为校园网限制前后端无法正常通信，一会是渲染出来的网页不忍直视。难道没有一种原理简单可以快速上手对非科班友好基于Python语言……的方法让我实现自己小小的梦想吗？这时，我的梦中情库————Gradio出现了。 刚开始上手还一头雾水，结果后面越玩越上瘾，让我们一起来看看吧。

输入和输出

某兔分析了自己算法的输入输出，首先输入是大量的保存在.csv文件中的数据，另外还有一些超参可以留给用户调节，比如随机种子呀，束搜索的K值呀等等。输出主要是字符串数据（可以保存在.csv或者.txt中）与多张图像。

明确了输入输出后，我就开始码代码了，结果一查，网上基本上都是简单的demo内容，输入是文本框，输出是多张图片。这可咋办，遇事不决问文档，这里附上链接：www.gradio.app/ 。

很可惜，没有专门针对.csv文件的输入输出，所以我们需要把它转换成DataFrame并使用gr.File()上传。第一种输出同理。

随机种子和K值我想以一种划动模式展现，让用户体验更加的丝滑，这里使用了gr.Slider。里面有几个参数，minimum，maximum是最大最小值，step是步数，因为只要整数嘛，所以这里要设置成1，info是对label的解释。

第二种输出需要注意不能只是gr.Image，因为有多张图，我们需要回忆一下老师上课说的轮播图的概念，这里用的是gr.Gallary。

布局排版

最简单的创建界面方法是

interface = gr.Interface(fn=process_data, inputs=[csv_input, num_input], outputs=[text_output, image_output])
interface.launch()

但是你可以发现创建出来的网页别提有多难看了。

这里我们就用到了

with gr.Blocks(theme=my_theme, title='Test') as demo:
    xx
demo.launch()

咱们毕竟学了近一个月的前端基础了，稍微排排版总有必要吧。首先我们想给自己的网页取一个高大上的标题，以及一些注释，知道它是干啥的。

with gr.Blocks(theme=my_theme, title='Test') as demo:
    gr.Markdown("""# Test
    xxxx
    """)

gr.Row()下面的都在一行，gr.Tab()下面的都在一页。

选择主题

gradio还特意为新手准备了主题，只要从hugging face上下载就好了，但是网络不是很稳定，一次不行你就多运行几次。

my_theme = gr.Theme.from_hub("gstaff/sketch")
with gr.Blocks(theme=my_theme, title='Test') as demo:
    gr.Markdown("""# Test
    xxxx
    """)

"gstaff/sketch"可以替换成别的主题，你从官方文档中选择。

网络问题

如果使用实验室的校园网，记得转接一下端口才能在本地显示，我这里以Xshell的隧道为例，Gradio默认是7860端口。

代码

import gradio as gr
import pandas as pd
import matplotlib.pyplot as plt

# 定义处理函数
def process_data(csv_file, num, beam=None):
    # 读取CSV文件
    df = pd.read_csv(csv_file.name)

    # 处理数据
    processed_data = df * num

    # 生成图片
    plt.plot(processed_data)
    plt.xlabel('X Label')
    plt.ylabel('Y Label')
    plt.title('Processed Data')
    plt.grid(True)
    plt.savefig('output.png')
    plt.close()

    # 生成字符串结果
    result = pd.DataFrame({'result':[1,2,3]})
    result.to_csv('output.csv')

    return 'output.csv', ['output.png','output.png']


my_theme = gr.Theme.from_hub("gstaff/sketch")
with gr.Blocks(theme=my_theme, title='Test') as demo:
    gr.Markdown("""# Test
    xxxx
    """)

    with gr.Tab("Input"):
        with gr.Row():
            csv_input = gr.File(label="CSV文件")
        with gr.Row():
            seed_input = gr.Slider(minimum=0, maximum=100, step=1, label="seed",info="Different seeds may generate different results")
            beam_input = gr.Slider(minimum=1, maximum=20, step=1, label="beam width",info="Choose between 1 and 20")

        with gr.Row():
            button = gr.Button("Submit", variant="primary")
            clear = gr.Button("Clear")

    with gr.Tab("Output"):
        text_output = gr.File(label="结果")
        image_output = gr.Gallery(label="图像")
        button.click(fn=process_data, inputs=[csv_input, seed_input, beam_input], outputs=[text_output, image_output])
    with gr.Tab("README"):
        seed_input = gr.Textbox(label="seed")

demo.launch()

process_data我是随便写的测试函数，因为算法API还没有理好5555。 效果图如下：