如何用Gradio搭建一个完整的AI产品功能？

AI带来的改变越来越超乎想象，看了油管和B站很多大神都在搞个人开发者，也一直在想在失业后是否能拥有一个躺着就能日进斗金的产品来养家糊口。无奈的是，作为AI算法工程师，对前端技术栈了解不足。AI很强但是全部让AI写，就不太放心，前面也说过感觉用AI的前提是能判定AI写的对和错，不然调试的时间一定远远超过编码。

工作中发现Gradio是一个非常强大的UI工具，过去主要用来做模型demo，然后我就想有没有可能通过Gradio就能实现完整的一套逻辑。经过不断地尝试，我发现登录鉴权、充值、AI功能全部可以搞定，就坚定了用Gradio先把页面搭起来的决心。

另一方面，我发现直接接入支付宝微信等支付都需要至少一张营业执照，然后域名+服务器也需要一些成本。直到最近发现了一套组合技术栈，让我只用一个买域名的钱就可以完整搭建成功支付链路，让我把自己做网站这个事情做了个小小的闭环。

目前全部代码已开源，可以到我的github查看，觉得有用的同学可以留下你的star，觉得有问题的同学同样欢迎issue，大概90%以上的代码全部由sonnet完成，我主要负责提需求和缝缝补补，轻喷。

github地址：

https://github.com/jacksonjack001/gpt4o-gradio-postcard

在线demo地址：

https://gpt4o.deepnoting.xyz

1、Gradio产品介绍

Gradio是两位ML工程师独立开发的项目，一度因为赚不到钱项目濒临失败，后来被HuggingFace的创始人看到，从而资助并收购了他们，让项目延续至今，成为AI领域做开源Demo最重要的开源项目之一，也基于它诞生了StableDiffusion WebUI、LLaMa Factory、GPT Academic等众多知名项目。

如何将你的AI算法迅速分享给别人，让对方体验，一直是一件麻烦事儿。通过gradio可以轻松实现AI算法可视化部署，使用gradio，只需在原有的代码中增加几行，就能自动化生成交互式web页面，并支持多种输入输出格式，比如图像分类中的图>>标签，超分辨率中的图>>图等。同时还支持生成能外部网络访问的链接，能够迅速让你的朋友，同事体验你的算法。

Gradio 是一个流行的 Python 库，主要用于为机器学习模型和数据科学应用快速搭建交互式 Web 应用界面。无论本地实验还是在线部署，Gradio 都可以帮助用户通过简单的接口与模型进行交互，从而便于展示、调试和分享模型。Gradio 可用于图像处理、文本生成、语音识别等各种任务，已经成为了 AI 开发与可视化演示的重要工具之一。

这里举一个最简单的例子，输入一张图片把图片变成灰度图，gradio只需要10行代码轻松搞定！

效果展示：

Gradio在飞速迭代中，未来充满无限可能，例如：针对“LLM 不了解 Gradio”的问题，Gradio 5 推出了一个实验性的 AI Playground，你可以在其中使用 AI 来生成或修改 Gradio 应用，并立即在浏览器中预览。

链接：

https://www.gradio.app/playground

2、Zpay个人支付能力

ZPAY支付是一家专注于为个人用户提供支付宝和微信支付接口的服务平台。其主要支付能力和特点包括：支持支付宝和微信支付接口，为个人用户提供方便快捷的收款解决方案，可实现「当面付」等多种支付方式，满足不同场景下的收款需求。

资金结算方面，ZPAY采用官方D+1结算模式，即当天收款后，资金在下一个工作日自动结算到个人银行卡。

最大特色就是免签约服务，无需通过企业认证即可接入，降低个人用户使用门槛。ZPAY适用于需要个人收款接口、希望快速实现支付宝和微信支付收款的用户。

3、登录鉴权

使用TRAE+Sonnet设计了一个完整的用户认证和会话管理系统，核心逻辑可以分为以下几个层面：

1）?️ 架构设计

三层架构：数据层(DatabaseManager) → 会话层(SessionManager) → 应用层(AuthenticatedApp)

2）? 安全机制

用户密码 → SHA-256哈希 → 数据库存储 

登录成功 → UUID会话ID → 24小时有效期 

频率限制 → 1分钟内最多5次尝试 → 防暴力破解

3）核心流程

注册/登录 → 验证输入 → 检查频率限制 → 处理认证 → 创建会话

权限验证 → 检查会话ID → 验证有效性 → 返回用户身份

业务操作 → 先验证身份 → 再执行功能 → 记录操作日志

4）主要模块

应用初始化 - 设置数据库和会话管理器；

用户注册流程 - 包含输入验证、频率限制、密码哈希和会话创建；

用户登录流程 - 验证凭据并创建会话；

会话管理 - 创建、验证和清除用户会话；

点数管理 - 管理用户点数和交易记录；

受保护功能 - 需要认证的功能访问；

频率限制 - 防止暴力攻击的安全机制；

4、订单功能

订单功能主要调用zpay的接口实现支付宝付款-增加账户点数的支付操作，主要流程是选择充值金额，生成支付宝二维码，支付宝扫码充值，弹窗提示充值成功，重新登录更新点数。

第一步：输入待充值金额，生成支付宝二维码；

第二步：扫描支付，支付完成后跳转弹窗提示充值状态，积分和余额；

第三步：重新登录，更新点数；

5、AI产品功能

1）AI绘画功能

调用Chatgpt的gpt4o原生生图api：gpt-image-1和国内小模型的接口即可实现，进入明信片绘画生成页面，即可根据预制模版和自定义提示词生成最终绘画提示词，然后点击一键生图，即可生成图片。

注意预置提示词是按照模版传递自定义选项，比如城市景点可以选择不同的城市和景区，通用参数可以选择中文或者不同的比例，以及生图数量，点击一键生图后等待一段时间即可在下方获得完整的结果。

注：预置提示词主要参考宝玉老师的提示词分享。

然后将每次调用的结果保存下来，进入我的画廊点击刷新即可获取历史绘画信息，包括绘画时间和对应的提示词；

2）多模型pk的提示词书写功能

预设的提示词可能并不完全能胜任提示词需求，很早就关注到因为每个大模型的训练语料不共享，这导致了每个模型擅长的能力完全不一样，比如gpt4o擅长文字，sonnet擅长编码。在工作中发现，通过多个模型组合决策可以有效降低大模型幻觉。为了成本和速度，我这边挑选了qwen系列最小的几个端模型来进行测试。

6、阿里云购买

阿里云的万网域名注册，.com的域名较贵，一般要50一年，其余一些费主流的域名通常不超过10块钱。我买的.xyz后缀的域名只要6块钱一年。

可以搜索不同的域名来询价，可以看到xyz的新域名还是在6元一年，非常便宜。

购买域名后参考xx的视频将DNS切换成cloudflare的即可。

7、用cloudflare配置域名转发到本地服务器的服务

自己搭建的网站如果想在国内访问，一般需要到工信部备案，而且服务器需要采买云服务ecs来提供服务。但是基于ClaudeFlare的隧道技术，可以将任意一台服务器运行的服务跟线上的域名绑定，从而实现最低成本构建AI服务网站，具体的做法可以参考B站爬爬虾的视频，最主要就是基于Nginx实现端口转发。这里贴一下我的配置：

cloudflare的主要路径：zero trust-network-tunnels-publichost