政安晨【零基础玩转各类开源AI项目】基于本地Ubuntu (Linux ) 系统应用Gradio-Lite:无服务器 Gradio 完全在浏览器中运行

news2024/10/22 17:17:07

目录

简介

什么是@gradio/lite?

入门

1.导入 JS 和 CSS

2. 创建标签

3. 在标签内编写你的 Gradio 应用程序

更多示例:添加其他文件和要求

多个文件

其他要求

SharedWorker 模式

代码和演示playground

1.无服务器部署

2.低延迟

3. 隐私和安全

限制

尝试一下!


政安晨的个人主页:政安晨

欢迎 👍点赞✍评论⭐收藏

希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正!

简介

Gradio 是一个流行的 Python 库,用于创建交互式机器学习应用程序。传统上,Gradio 应用程序依赖于服务器端基础设施来运行,这对于需要托管其应用程序的开发人员来说可能是一个障碍。

 输入 Gradio-lite(@gradio/lite):一个利用 Pyodide将 Gradio 直接带到浏览器的库。

Pyodide 是基于 WebAssembly 的浏览器和 Node. js 的 Python 发行版。

Pyodide 是 CPython 到 WebAssembly/ Emscripten的移植。

Pyodide 允许使用 micropip在浏览器中安装和运行 Python 包。PyPI 上任何带有 wheel 的纯 Python 包均受支持。许多带有 C 扩展的包也已移植到 Pyodide 中。其中包括许多通用包,例如 regex、pyyaml、lxml 和科学 Python 包,包括 numpy、pandas、scipy、matplotlib 和 scikit-learn。

Pyodide 带有强大的 Javascript ⟺ Python 外部函数接口,因此您可以在代码中自由混合这两种语言,而不会产生任何麻烦。这包括对错误处理(在一种语言中抛出错误,在另一种语言中捕获错误)、async/await 等的完全支持。

在浏览器中使用时,Python 可以完全访问 Web API。

在这篇文章中,我们将探讨 @gradio/lite 是什么,回顾示例代码,并讨论它为运行 Gradio 应用程序提供的好处。

什么是@gradio/lite?

@gradio/lite是一个 JavaScript 库,可让您直接在 Web 浏览器中运行 Gradio 应用程序。它通过利用 Pyodide(WebAssembly 的 Python 运行时)来实现这一点,它允许在浏览器环境中执行 Python 代码。有了@gradio/lite,您可以为 Gradio 应用程序编写常规 Python 代码,它们将在浏览器中无缝运行,而无需服务器端基础设施。

入门

让我们在 Gradio 中构建一个“Hello World”应用程序@gradio/lite

1.导入 JS 和 CSS

如果您还没有 HTML 文件,请先创建一个。@gradio/lite使用以下代码导入与包对应的 JavaScript 和 CSS:

<html>
	<head>
		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
	</head>
</html>

@gradio/lite请注意,您通常应该使用可用的最新版本。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VScode远程开发之remote 远程开发(二)

VScode远程开发之remote 远程开发&#xff08;二&#xff09; 使用vscode进行远程开发很简单&#xff0c;在拓展里搜索 Remote Development&#xff0c;就可以搜索到微软提供的远程开发大礼包&#xff0c;里面包含了 通过 SSH 远程服务器 远程容器 远程 WSL&#xff08;Win…

亚马逊测评自养号技术及采购下单成功率揭秘

在亚马逊测评中&#xff0c;自养号面临砍单、买家号关联等问题时&#xff0c;需要采取一系列策略和技术手段来提高采购下单的成功率。以下是一些具体的解决方案&#xff1a; 一、解决砍单问题 1.确保硬件参数独立 每个账号应使用具有独特硬件标识的设备&#xff0c;如IMEI、…

【大模型实战篇】大模型分词算法WordPiece分词及代码示例

继《大模型数据词元化处理BPE(Byte-Pair Encoding tokenization)》之后&#xff0c;我们针对大模型原始数据的分词处理&#xff0c;继续分享WordPiece分词技术【1】。 1. 原理分析 WordPiece 是 Google 开发的分词算法&#xff0c;用于预训练 BERT。此后&#xff0c;它被多个基…

uni-app中添加自定义相机(微信小程序+app)

一、微信小程序中 微信小程序中可以直接使用camera标签&#xff0c;这个标签不兼容app&#xff0c;官方文档 <cameradevice-position"back"flash"off":style"{ height: lheight px, width: lwidth px }"class"w-full"></c…

vue3【实战】 渲染 md 文件(markdown语法 .md后缀的文件)

1. 安装相关插件 npm i unplugin-vue-markdown markdown-it-prism prism unhead/vue2. 添加配置 src/main.ts // 给 md 文件创建头部 import { createHead } from unhead/vue // md 文件中代码高亮的样式 import prismjs/themes/prism.css // 自定义 md 文件的样式 import /as…

【JAVA面试题】什么是Springboot的自动配置以及注意事项

文章目录 强烈推荐核心概念&#xff1a;自动配置的关键特点&#xff1a;示例&#xff1a; 需要注意的点1.默认配置可能不适合所有场景2.Bean 冲突与覆盖3.应用启动慢的问题4.过度依赖自动配置5.安全性问题6.依赖冲突与版本兼容7.过多不必要的自动配置8.调试困难 专栏集锦 强烈推…

.net framework 3.5sp1安装错误卡住不动怎么解决

解决 .NET Framework 3.5 SP1 安装错误卡住的问题&#xff0c;可以尝试以下几种方法&#xff1a; 1.使用 DISM 工具&#xff1a; 将下载的 NetFx3.cab 文件放置在 C:\Windows 文件夹下。 以管理员身份打开命令提示符&#xff0c;输入以下命令&#xff1a; dism /online /En…

【web前端设计】jquery图标动画特效

学习目标 学习web前端设计技术&#xff08;HTML、css、JavaScript、jQuery等&#xff09;&#xff0c;综合运用技术&#xff0c;将其与HTML元素结合&#xff0c;设计样式、监听事件、添加动画等&#xff0c;给用户呈现出更好的视觉交互效果。本文主要学习分页按钮自动放大、元…

HCIP-HarmonyOS Application Developer 习题(十二)

&#xff08;多选&#xff09;1、声明式开发范式的转场动画包含以下哪几种类型? A、页面间转场 B、应用间转场 C、共享元素转场 D、组件内转场 答案&#xff1a;ACD 分析&#xff1a; &#xff08;多选&#xff09;2、公共事件服务为应用程序提供哪些能力。 A、取消发布公共…

IPMA能力基础线是什么?项目管理工具有哪些应用场景?

作为资深团队管理者&#xff0c;常常面临如何提升团队项目管理能力的挑战。其实在现代的项目管理世界中&#xff0c;有许多标准和模型帮助我们更好地理解项目的复杂性&#xff0c;IPMA&#xff08;International Project Management Association&#xff09;能力基础线就是其中…

iOS静态库(.a)及资源文件的生成与使用详解(Swift版本)

引言 在 iOS 开发中&#xff0c;开发者常常需要将一些功能模块封装成可重用的库&#xff0c;以便在多个项目中共享使用。除了常见的Framework&#xff08;动态库/静态库&#xff09;&#xff0c;静态库&#xff08;.a文件&#xff09;也是一种非常实用的封装方式。静态库在编译…

Java全栈经典面试题剖析4】JavaSE高级 -- 包装类,String, 类方法

目录 面试题3.1 什么是自动装箱与拆箱&#xff1f;用什么方式来装箱与拆箱&#xff1f; 面试题3.2 int和Integer有什么区别&#xff1f; 面试题3.3 Integer常量池 面试题3.4 字符串常量池 面试题3.5 这句代码创建了几个对象? String str1 new String("xyz");…

前端拦截302重定向

背景: 根据业务场景需要拦截302做后续的逻辑处理 尝试一: : axios拦截 、、、、、async created() {// 获取302请求返回的location后手动修改video的src路径let targetSrc;try {await axios.get(this.video).then((res) > {const { headers, status } res;const { locat…

Android 图片相识度比较(pHash)

概述 在 Android 中&#xff0c;要比对两张 Bitmap 图片的相似度&#xff0c;常见的方法有基于像素差异、直方图比较、或者使用一些更高级的算法如 SSIM&#xff08;结构相似性&#xff09;和感知哈希&#xff08;pHash&#xff09;。 1. 基于像素的差异比较 可以逐像素比较…

学习笔记——Test.pwn

前言&#xff1a;笔者也才接触Pwn&#xff0c;写这篇wp&#xff0c;记录目前所得感悟、思考、理解等。 存在错误&#xff0c;或者解释不通的地方&#xff0c;还请提出&#xff0c;已补足笔记的缺陷。 Pwn是什么&#xff1f; 我Pwn掉了你的电脑、我Pwn掉了你的设备…… 通俗的…

重庆大学软件工程考研,难度如何?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 重大软件专业可谓是最好上岸的985院校&#xff01;重庆大学24考研各大学院复试录取情况已出&#xff0c; 我们先说学硕部分&#xff1a; 招生人数&#xff1a; 重庆大学软件工程学硕近几年计划统招人数都不多&#xf…

入选ECCV 2024!浙江大学联合微软亚洲研究院提出统一医学图像预训练框架UniMedI,打破医学数据异构化藩篱

让 AI 在某些条件下具备类似人类的反应能力&#xff0c;从而代替人类高效地从事特定工作&#xff0c;是 AI 领域研究人员孜孜不倦的追求。正如在医学图像和人工智能的交叉领域&#xff0c;基于视觉语言预训练的深度模型 (Visual-Language Pre-training, VLP) 凭借其自动化的特点…

Docker本地镜像发布到阿里云镜像服务的简易指南

1 阿里云容器镜像服务 阿里云容器镜像服务&#xff08;Alibaba Cloud Container Registry&#xff0c;简称ACR&#xff09;是一个为容器镜像、Helm Chart等云原生资产提供安全托管及高效分发的平台。它支持多架构容器镜像&#xff0c;包括Linux、Windows、ARM等&#xff0c;以…

心觉:感恩日记:每天5分钟,重新定义你的人生

​Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松掌控自己的人生&#xff01; 挑战每日一省写作207/1000天 你是否觉得生活节奏太快&#xff0c;总是有做不完的事、解决不完的问题&#xff1f; 有一个简单的方法&#xff0c;…

DEPT_ DECOMPOSED PROMPT TUNING FOR PARAMETER-EFFICIENT FINE-TUNING

论文汇总 当前的问题 (1)Prompt Tuning通常收敛缓慢&#xff0c;并且对初始化敏感&#xff1b; (2)Prompt Tuning延长了输入序列的总长度&#xff0c;从而加剧了计算需求(即训练/推理时间和内存成本)&#xff0c;这是由于Transformer的二次复杂度(Vaswani et al, 2017)。 解…