Gradio入门，并搭个鸡兔同笼问题小应用，附源码（MindOpt)

应用链接： https://979427749bc9ceec34.gradio.live 是公开访问链接，3天有效。 在modelscope中的创空间发布长期有效:https://modelscope.cn/studios/wuyoy520v01/MindOpt_Chicken-with-rabbit-cage/summary。
应用图如下，源代码见正文。

知道Gradio

AI大模型快速生成应用的工具，
在Huggingface 的Space空间方式有Gradio和Streamlit：

在国内的AI模型开源社区 ModelScope 的创空间 有Gradio和Streamlit。

他们都可以搭建一个快速的应用，比如Gradio搭的ChatGPT式的问答（这半年多特别流程的大模型应用）：

图：modelscope创空间的通义千问 Chat Bot （2023年08月10日）

然后搜了些材料，发现

	Gradio	Streamlit
网址	https://www.gradio.app	https://streamlit.io
上手难度	简单	简单，比左边难一点，因为丰富
组件丰富度	低	高
扩展性	低	中
Jupyter Notebook 内支持	是	否

Streamlit可以支持封装自己的前端组件组合用。 不过看小白们都爱Gradio，作为码代码少的人士，喜欢Notebook，我选择了Gradio去做demo。

了解Gradio

了解一个开发者软件怎么用，最快速的就是翻它的文档，别人写的容易有偏。

官方例子跑一跑，然后看几个别人的代码跑一跑，然后自己编一个需求跑一跑。

官方文档：https://www.gradio.app/guides/quickstart 的截图如下

运行环境

运行环境：在国内各大开发者平台的厂商都提供了”薅羊毛“的机会，比如在ModelScope就链接了阿里云的PAI-DSW，会有一个Jupyter Notebook环境。 薅它，香：

打开后是这样的Notebook，可以搞自己的开发，还可以git与创空间的git仓库连上：
（这个图内是我编的文件，后文分享）

一个鸡兔同笼的例子，用了达摩院的MindOpt优化求解器

运行之前，先安装两个库，gradio和mindoptpy，在Jupyter的Terminal里面运行。
安装达摩院的MindOpt优化求解器是用来解方程，也可以去他们的官网捞复杂案例来学习：https://opt.aliyun.com/#/platform/case

pip install gradio
pip install mindoptpy

或者，Python代码里

import os
os.system('pip install gradio')
os.system('pip install mindoptpy')

然后建立一个 .ipynb的文件，选择Python 3内核。
然后运行如下程序后，设置最后一行生成公开访问连接后，会得到：

Running on local URL:  http://127.0.0.1:7932
Running on public URL: https://979427749bc9ceec34.gradio.liveThis share link expires in 72 hours. For free permanent hosting and GPU upgrades, run `gradio deploy` from Terminal to deploy to Spaces (https://huggingface.co/spaces)

其中，https://979427749bc9ceec34.gradio.live 是公开访问链接，3天有效 。需要部署后才能长期有效。 modelscope的创空间发布后也能长期有效:https://modelscope.cn/studios/wuyoy520v01/MindOpt_Chicken-with-rabbit-cage/summary。

电脑端打开是根据我的浏览器的主题来的，这样的：

完整代码

# 安装依赖import os
os.system('pip install gradio')
os.system('pip install mindoptpy')# 鸡兔同笼问题# 鸡兔同笼问题import gradio as grfrom mindoptpy import *def solverCalc(touNum0 = 35, zuNum0 = 94):touNum = int(touNum0)zuNum = int(zuNum0)MDO_INFINITY = MdoModel.get_infinity()tuziNum = -1jiNum = -1# 声明参数# Step 1. Create a model and change the parameters.model = MdoModel()try:# Add variables.var = {}var["tuziNum"] = model.add_var(0, MDO_INFINITY, 0, None, "tuziNum", True)var["jiNum"] = model.add_var(0, MDO_INFINITY, 0, None, "jiNum", True)        # Add constraints.# 头的数目cons = {}cons["touNum"] = model.add_cons(touNum, touNum,  var["tuziNum"] + var["jiNum"], "touNum")cons["zuNum"] = model.add_cons(zuNum, zuNum,  4 * var["tuziNum"] + 2 * var["jiNum"], "touNum")# Step 3. Solve the problem and populate the result.model.solve_prob()model.display_results()time.sleep(1) #for printstatus_code, status_msg = model.get_status()if status_msg == "OPTIMAL":tuziNum = int(var["tuziNum"].get_real_attr("PrimalSoln"))jiNum = int(var["jiNum"].get_real_attr("PrimalSoln"))else:tuziNum = "问题错误。用下方生成器生成一个。"jiNum = "问题错误。用下方生成器生成一个。"except MdoError as e:print("Received Mindopt exception.")print(" - Code          : {}".format(e.code))print(" - Reason        : {}".format(e.message))except Exception as e:print("Received exception.")print(" - Reason        : {}".format(e))finally:# Step 4. Free the model.model.free_mdl()return [tuziNum,jiNum]def puzzleGen(tuziNum0,jiNum0):tuziNum = int(tuziNum0)jiNum = int(jiNum0)touNum = tuziNum + jiNumzuNUm = 4*tuziNum + 2* jiNumreturn [touNum, zuNUm]with gr.Blocks() as run:gr.Markdown("## 用阿里达摩院MindOpt来做有趣的小应用")gr.Markdown("MindOpt是求解大规模优化问题、方程组的专业工具，各行业可用，企业降本增效好工具。国内站：[https://opt.aliyun.com](https://opt.aliyun.com) 国际站：[https://opt.alibabacloud.com](https://opt.alibabacloud.com)")# 第1个功能gr.Markdown("\n---\n")gr.Markdown("## 鸡兔同笼问题**计算器**")gr.Markdown("请修改【头】和【脚】和的数量:")with gr.Row():inp = [gr.Textbox(label="上有多少头？如35"),gr.Textbox(label="下有多少脚？如94")]gr.Markdown("MindOpt计算结果：")with gr.Row():out = [gr.Textbox(label="兔子数量"),gr.Textbox(label="鸡数量")]btn = gr.Button(value="计算",variant='primary')btn.click(fn=solverCalc, inputs=inp, outputs=out)gr.Markdown("\n---\n") # 第二个功能gr.Markdown("## 鸡兔同笼问题**生成器**")gr.Markdown("请修改【兔】和【鸡】和的数量:")with gr.Row():inp2 = [gr.Textbox(label="兔子多少只？如12"),gr.Textbox(label="鸡有多少只？如23")]gr.Markdown("生成问题：") with gr.Row():out2 = [gr.Textbox(label="头数量"),gr.Textbox(label="脚数量")]btn2 = gr.Button(value="生成问题",variant='primary')btn2.click(fn=puzzleGen, inputs=inp2, outputs=out2)
run.launch()#share=True)  # share=True的时候生成公开可访问的连接，3天有效，调试的时候注释掉就行。

代码分块讲解

功能函数：

def puzzleGen(tuziNum0,jiNum0):
def solverCalc(touNum0 = 35, zuNum0 = 94):

这是两个我做的功能，用来接收收到的信息，然后处理返回对应的信息。 这里注意计算的时候是数值，实际传过来的可能是字符，还没有搞清楚，有些gradio的参数设置了后，返回的内容会导致string无法转数字，计算不了。

其中puzzleGen()是鸡兔的头和脚的计算，很简单的计算逻辑

    touNum = tuziNum + jiNumzuNUm = 4*tuziNum + 2* jiNum

另一个solverCalc()是根据头和脚的计算鸡和兔。设置兔和鸡数量是整数变量 tuNum、jiNum，然后列一个简单的方程：
目标：0 #不设优化目标
约束： touNum = tuziNum + jiNum
zuNUm = 4tuziNum + 2 jiNum

然后根据MindOpt的Python库的用法mindoptpy来写程序。注意，有可能会有输入问题是错误的情况（求解器领域叫”不可解“），此时需要做异常处理。

Gradio 引用

下面是一个设置界面的参考，完整代码搞了两个，这里方便讲解：

with gr.Blocks() as run:gr.Markdown("# 用阿里达摩院MindOpt来做小应用")# 第1个功能gr.Markdown("\n---\n")gr.Markdown("## 鸡兔同笼问题**计算器**")gr.Markdown("请修改【头】和【脚】和的数量:")with gr.Row():inp = [gr.Textbox(label="上有多少头？如35"),gr.Textbox(label="下有多少脚？如94")]gr.Markdown("MindOpt计算结果:")with gr.Row():out = [gr.Textbox(label="兔子数量"),gr.Textbox(label="鸡数量")]btn = gr.Button(value="计算",variant='primary')btn.click(fn=solverCalc, inputs=inp, outputs=out)run.launch()#share=True)  # share=True的时候生成公开可访问的连接，3天有效，调试的时候注释掉就行。

其中 gr.Blocks() 相当于一个块，把要的东西塞进去。 gradio有很多组件，可以运行 help(gr.components) 来查询用法。

• 这里前面是Markdown语法添加了些文字。
• gr.Row()是一行塞的东西，这里面塞了俩个text文字填写框。
• gr.Button() 是摁键组件。
• 然后.click是执行任务。
• 最后一个是run这个应用launch起来。注意里面也有参数设置，调试的时候本地调试就行。

然后根据Notebook的运行调试就有运行效果啦，可以在Notebook里面点点点测试，也可以用生成的浏览器链接打开测试。公开的链接，还可以在手机上打开：
比如：

1.正确的问题解答示例	2. 问题错误的示例：