使用 Gradio 的“热重载”模式快速开发 AI 应用

在这篇文章中,我将展示如何利用 Gradio 的热重载模式快速构建一个功能齐全的 AI 应用。但在进入正题之前,让我们先了解一下什么是重载模式以及 Gradio 为什么要采用自定义的自动重载逻辑。如果你已熟悉 Gradio 并急于开始构建,请直接跳转到第三部分构建文档分析应用。

重载模式具体是做什么的?

简而言之,重载模式可以在不重启 Gradio 服务器的情况下,自动引入你源代码中的最新更改。如果这听起来还有些模糊,不妨继续阅读。

Gradio 是一个广受欢迎的 Python 库,专门用于创建交互式机器学习应用。开发者可以完全在 Python 中设计 UI 布局,并嵌入一些 Python 逻辑来响应 UI 事件。如果你已经掌握了 Python 基础,那么学习 Gradio 将会非常轻松。如果你对 Gradio 还不太熟悉,建议查看这个快速入门指南。

  • 快速入门指南https://www.gradio.app/guides/quickstart

通常,Gradio 应用像运行任何其他 Python 脚本一样启动,只需执行 python app.py (Gradio 代码文件可以任意命名) 。这会启动一个 HTTP 服务器,渲染应用的 UI 并响应用户操作。如果需要修改应用,通常会停止服务器 (通常使用 Ctrl + C) ,编辑源文件后重新运行脚本。

开发过程中频繁停止和重启服务器会造成明显的延迟。如果能有一种方式能自动更新代码变更并即刻测试新思路,那将大为便利。

这正是 Gradio 的重载模式的用武之地。你只需运行 gradio app.py 而不是 python app.py,即可在重载模式下启动应用!

Gradio 为何要自行实现重载逻辑?

Gradio 应用通常与uvicorn(一个 Python Web 框架的异步服务器) 一同运行。尽管 Uvicorn 提供了自动重载功能,但 Gradio 出于以下原因自行实现了重载逻辑:

  1. 更快速的重载:Uvicorn 的自动重载功能虽快于手动操作,但在开发 Gradio 应用时仍显缓慢。Gradio 开发者在 Python 中构建其 UI,因此他们希望在进行更改后能立即看到更新的 UI,这在 Javascript 生态中已是常态,但在 Python 中则较为新颖。

  2. 选择性重载:Gradio 应用属于 AI 应用,通常需要将 AI 模型加载到内存或连接到数据存储 (如向量数据库) 。开发过程中重启服务器将导致模型重新加载或重新连接数据库,这会在开发周期间引入不必要的延迟。为解决此问题,Gradio 引入了 if gr.NORELOAD: 代码块,你可以利用它标记不需重载的代码部分。这种做法只有在 Gradio 实现了自定义重载逻辑的情况下才可行。

  • uvicornhttps://www.uvicorn.org/

  • 自动重载功能https://www.uvicorn.org/

接下来,我将展示如何利用 Gradio 的重载模式迅速开发一个 AI 应用。

构建文档分析应用

本应用将允许用户上传文档图片并提出问题,随后以自然语言形式获得答案。我们将利用免费的Hugging Face 推理 API,你可以在自己的电脑上轻松操作,无需 GPU!

  • Hugging Face 推理 APIhttps://hf.co/docs/huggingfacehub/guides/inference

首先,让我们在名为 app.py 的文件中输入以下代码,并通过执行 gradio app.py 在重载模式下启动它:

import gradio as grdemo = gr.Interface(lambda x: x, "text", "text")if __name__ == "__main__":demo.launch()

这会创建以下简单的用户界面。

10376f8137a1c15ba9234be0d758030a.png

简单界面 UI

鉴于我希望用户能够上传图像文件及其问题,我将输入组件更改为 gr.MultimodalTextbox()。注意用户界面是如何立即更新的!

f2484daea9738751d6545d7039c73c88.gif

具有多模态文本框的简单界面

虽然这个用户界面已经可以工作,但我认为如果输入文本框位于输出文本框下方会更合适。我可以通过使用 Blocks API 来实现这一点,并且我还通过添加占位符文本来定制输入文本框,以引导用户。

d836c4cf9bc5cbc136ccf1b9616610ae.gif

切换到 Blocks

现在 UI 已经令人满意,我将开始实现 chatfn 的逻辑。

我将使用 Hugging Face 的推理 API,因此我需要从 huggingfacehub 包中导入 InferenceClient (预装在 Gradio 中) 。我将使用impira/layouylm-document-qa模型来回答用户的问题,然后使用HuggingFaceH4/zephyr-7b-beta大语言模型提供自然语言回答。

  • impira/layouylm-document-qahttps://hf.co/impira/layoutlm-document-qa

  • HuggingFaceH4/zephyr-7b-betahttps://hf.co/HuggingFaceH4/zephyr-7b-beta

from huggingface_hub import InferenceClientclient = InferenceClient()def chat_fn(multimodal_message):question = multimodal_message["text"]image = multimodal_message["files"][0]answer = client.document_question_answering(image=image, question=question, model="impira/layoutlm-document-qa")answer = [{"answer": a.answer, "confidence": a.score} for a in answer]user_message = {"role": "user", "content": f"Question: {question}, answer: {answer}"}message = ""for token in client.chat_completion(messages=[user_message],max_tokens=200, stream=True,model="HuggingFaceH4/zephyr-7b-beta"):if token.choices[0].finish_reason is not None:continuemessage += token.choices[0].delta.contentyield message

这是我们的应用演示!

5afd9873d8e1d69f43f479857a1c5cb1.gif

演示我们的应用

我还会添加一个系统消息,以便大语言模型保持回答简短,不包括原始置信度分数。为避免每次更改时都重新实例化 InferenceClient,我将其放在不需重载的代码块中。

if gr.NO_RELOAD:client = InferenceClient()system_message = {"role": "system","content": """
You are a helpful assistant.
You will be given a question and a set of answers along with a confidence score between 0 and 1 for each answer.
You job is to turn this information into a short, coherent response.For example:
Question: "Who is being invoiced?", answer: {"answer": "John Doe", "confidence": 0.98}You should respond with something like:
With a high degree of confidence, I can say John Doe is being invoiced.Question: "What is the invoice total?", answer: [{"answer": "154.08", "confidence": 0.75}, {"answer": "155", "confidence": 0.25}You should respond with something like:
I believe the invoice total is $154.08 but it can also be $155.
"""}

这是我们演示的现在情况!系统消息确实帮助保持了机器人的回答简短而不包含长的小数。

4b9d7771ac666ec60fcd10771b9bd99c.gif

应用演示带系统消息

作为最终改进,我将在页面上添加一个 Markdown 标题:

d9d3a2428b3d4f8a11b52c6ec22531e0.gif

添加一个 markdown 标题

结语

在本文中,我使用 Gradio 和 Hugging Face 推理 API 开发了一个实用的 AI 应用。从开发初期,我就不确定最终产品会是什么样子,所以能够即时重新加载 UI 和服务器逻辑让我能迅速尝试各种想法。整个应用的开发过程大约只用了一个小时!

如果您想了解此演示的完整代码,请访问这个Space 应用!

  • Space 应用https://hf.co/spaces/freddyaboulton/document-analyzer


英文原文:https://huggingface.co/blog/gradio-reload

原文作者: Freddy Boulton

译者: Luke

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/314533.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE4 拍摄、保存并浏览相册

效果: 1.新建CameraActor类 2.修改截图保存路径 3.编写BP_Camera蓝图 注意路径 Save Image函数要在执行拍照和BeginPlay事件执行一次 按钮执行拍摄事件 3.编写UMG蓝图 技巧:让Index加1、减1循环赋值 4.把BP_Camera挂在玩家上

SVN--基本原理与使用(超详细)

目录 一、SVN概述二、SVN服务端软件安装三、SVN服务端配置四、SVN客户端软件安装与使用五、SVN三大指令六、SVN图标集与忽略功能6.1 图标集6.2 忽略功能 七、SVN版本回退八、SVN版本冲突九、SVN配置多仓库与权限控制9.1 配置多仓库9.2 权限控制 十、服务配置与管理十一、模拟真…

新建云仓库

1.GitHub新建云仓库: LICENSE:开源许可证;README.md:仓库说明文件;开源项目;cocoaPodsName.podspec: CocoaPods项目的属性描述文件。 2.Coding新建云仓库: 备注: Coding新建项目:

每日一题(力扣45):跳跃游戏2--贪心

由于题目已经告诉了我们一定可以跳到,所以我们只需去考虑前进最快的方法。即 判断当前下一步能跳的各个位置中,哪个能带你去去向最远的地方(why? 因为其他位置所能提供的最大范围都没最远那个大,所以最远的那个已经可以…

The Log-Structured Merge-Tree (LSM-Tree) 论文阅读笔记

原论文:The Log-Structured Merge-Tree (LSM-Tree) LSM-Tree的简介和关键技术要点 LSM-Tree(Log-Structured Merge-Tree)是一种为高吞吐量读写操作优化的数据结构,特别适用于写入密集型的应用场景。它由Patrick O’Neil等人开发…

Vue 组件分类、局部注册和全局注册

文章目录 背景知识组件分类安装 vue-cli示例设置组件局部注册设置组件全局注册 背景知识 开发 Vue 的两种方式: 核心包传统开发模式:基于 html / css / js 文件,直接引入核心包,开发 Vue。工程化开发模式:基于构建工…

国产麒麟系统下打包electron+vue项目(AppImage、deb)

需要用到的一些依赖包、安装包以及更详细的打包方法word以及麒麟官网给出的文档都已放网盘,链接在文章最后!!!!!!!!!!!!&a…

13 c++版本的五子棋

前言 呵呵 这大概是 大学里面的 c 五子棋了吧 有一些 面向对象的理解, 但是不多 这里 具体的实现 就不赘述, 仅仅是 发一下代码 以及 具体的使用 然后 貌似 放在 win10 上面执行 还有一些问题, 渲染的, 应该很好调整 五子棋 #include<Windows.h> #include<io…

elaticsearch windows安装

es下载地址 https://www.elastic.co/cn/downloads/elasticsearch https://www.elastic.co/cn/downloads/past-releases#elasticsearch 在这里插入图片描述 下载直接解压&#xff0c;解压后目录 双击bin目录下的elasticsearch.bat开启服务 注意&#xff1a;9300 端口为 Elas…

阶跃星辰:探索智能科技的星辰大海

引言 在当今快速发展的科技时代&#xff0c;人工智能已经成为推动社会进步的重要力量。阶跃星辰&#xff0c;正是在这一背景下诞生的。 阶跃星辰是一家专注于通用人工智能探索的公司&#xff0c;成立于2023年4月。该公司的创始团队由一群对人工智能充满热情和渴望的人组成&am…

半导体行业的隐形翅膀:国产RFID技术突破封锁,助力生产

半导体行业的隐形翅膀&#xff1a;国产RFID技术突破封锁&#xff0c;助力生产 RFID技术&#xff0c;简单来说&#xff0c;就是一种自动识别技术&#xff0c;通过无线电波实现对标签信息的读取和写入。而这些标签&#xff0c;就像给物品贴上的小标签&#xff0c;上面存储着它们…

《系统架构设计师教程(第2版)》第15章-面向服务架构设计理论与实践-05-SOA设计模式

文章目录 1. 服务注册表模式1.1 服务注册表1.2 SOA治理功能1.3 注册表中的配置文件 2. 企业服务总线&#xff08;ESB&#xff09;模式3. Synchro ESB3. 微服务模式3.1 概述3.2 微服务架构模式方案3.2.1 聚合器微服务1&#xff09;概述2&#xff09;几种特殊的聚合微服务 3.2.2 …

C++解方程组的库

解决多元多次方程组的问题&#xff0c;你可以考虑以下几个C库&#xff1a; Eigen: Eigen库是一个高性能的C模板库&#xff0c;用于线性代数运算。它提供了强大的矩阵运算功能&#xff0c;可以用来解多元一次方程组。对于多次方程组&#xff0c;你可能需要结合Eigen和一些数值优…

javascript(第三篇)原型、原型链、继承问题,使用 es5、es6实现继承,一网打尽所有面试题

没错这是一道【去哪儿】的面试题目&#xff0c;手写一个 es5 的继承&#xff0c;我又没有回答上来&#xff0c;很惭愧&#xff0c;我就只知道 es5 中可以使用原型链实现继承&#xff0c;但是代码一行也写不出来。 关于 js 的继承&#xff0c;是在面试中除了【 this 指针、命名提…

计算机网络-IS-IS路由计算

前面已经学习了建立IS-IS邻接关系和同步LSDB&#xff0c;然后基于此路由器会进行路由计算。 一、路由计算 因为IS-IS路由器有不同的级别&#xff0c;只维护自身级别的LSDB&#xff0c;因此就是Level-1只有区域内的路由信息&#xff0c;Level-2有Level-2的路由信息&#xff0c;L…

开源协议与商业许可:选择与遵循

文章目录 一、开源协议1.1 MIT许可证&#xff08;MIT License&#xff09;1.2 BSD许可证&#xff08;BSD License&#xff09;1.3 Apache许可证 2.0&#xff08;Apache License 2.0&#xff09;1.4 GNU宽松通用公共许可证&#xff08;GNU Lesser General Public License&#x…

C++笔试强训day7

目录 1.字符串中找出连续最长的数字串 2.岛屿数量 3.拼三角 1.字符串中找出连续最长的数字串 链接 我的思路很简洁&#xff0c;就是双指针遍历&#xff0c;然后不断更新左位置left和右位置right和长度len。 然后我写代码的时候代码思路没跟上原本思路&#xff0c;直接把所有…

局部多项式近似与 AMPM 算法

kappa3; %已在您的代码中定义% 定义窗口大小 windowSize (2*kappa1);% 初始化梯度估计值 [rows, cols] size(wrappedPhase); phi_y zeros(rows, cols); phi_x zeros(rows, cols);% 遍历每个窗口 for m 1kappa:rows-kappafor n 1kappa:cols-kappa% 提取局部窗口Z_mn wrap…

保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识

1.简介 有的小伙伴或者童鞋们可能会好奇地问&#xff0c;不是讲解和分享抓包工具了怎么这里开始讲解HTTP和HTTPS协议了。这是因为你对HTTP协议越了解&#xff0c;你就能越掌握Fiddler的使用方法&#xff0c;反过来你越使用Fiddler&#xff0c;就越能帮助你了解HTTP协议。 Fid…

hive启动beeline报错

问题一在zpark启动集群报错 出现上面的问题执行以下代码 chmod 777 /opt/apps/hadoop-3.2.1/logs 问题二启动beeline报错 执行 cd /opt/apps/hadoop-3.2.1 bin/hadoop dfsadmin -safemode leave 问题三执行查询语句报错 执行 set hive.exec.mode.local.autotrue;