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

目录

简介

什么是@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.mzph.cn/diannao/57722.shtml

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

相关文章

基于Python+SQL Server2008实现(GUI)快递管理系统

快递业务管理系统的设计与实现 摘要: 着网络新零售的到来&#xff0c;传统物流在网购的洗礼下迅速蜕变&#xff0c;在这场以互联网为基础的时代变革中&#xff0c;哪家企业能率先转变其工作模式就能最先分得一杯羹&#xff0c;物流管理也不例外。传统的物流管理模式效率低下&a…

webView 支持全屏播放

webView 支持全屏播放 直接上代码 public class CustomFullScreenWebViewClient extends WebChromeClient {WebView webView;Context context;/*** 视频全屏参数*/protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS new FrameLayout.LayoutParams(ViewG…

【分布式技术】中间件-zookeeper安装配置

文章目录 安装部署1. 安装ZooKeeper2. 配置ZooKeeper3. 启动ZooKeeper服务器4. 使用ZooKeeper命令行客户端5. 使用ZooKeeper的四个基本操作6. ZooKeeper集群模式7. 安全和权限8. 监控和日志 相关文献 安装部署 在Linux环境中操作ZooKeeper通常涉及以下几个方面&#xff1a; 1…

同城分类信息网站源码系统 PHP+MySQL组合开发 带完整的安装代码包以及搭建部署教程

系统概述 该系统采用PHP作为后端开发语言&#xff0c;MySQL作为数据库管理系统。PHP是一种广泛使用的开源脚本语言&#xff0c;特别适合于Web开发&#xff0c;具有跨平台、易于学习、性能稳定等优点。MySQL则是一款轻量级的关系型数据库管理系统&#xff0c;具有体积小、速度快…

DHorse v1.6.0 发布,基于 k8s 的发布平台

版本说明 新增特性 支持Codeup&#xff08;阿里云云效&#xff09;代码仓库&#xff1b;支持环境的自动部署&#xff1b; 优化特性 管理员角色部署环境部需要审批&#xff1b;优化页面展示&#xff1b; 升级指南 升级指南 DHorse介绍 DHorse是一个轻量级、简单易用的云…

微服务网关Zuul

一、Zuul简介 Zuul是Netflix开源的微服务网关&#xff0c;包含对请求的路由和过滤两个主要功能。 1&#xff09;路由功能&#xff1a;负责将外部请求转发到具体的微服务实例上&#xff0c;是实现外部访问统一入口的基础。 2&#xff09;过滤功能&#xff1a;负责对请求的过程…

车型TCU\EMS刷写详细分析

概述车型TCU&#xff08;Transmission Control Unit&#xff0c;自动变速器控制单元&#xff09;和EMS&#xff08;Engine Management System&#xff0c;发动机管理系统&#xff09;刷写的关键信息。 一、TCU刷写分析 1. TCU概述 TCU是汽车自动变速器的核心控制单元&#x…

总结性标题:高效导入文本数据,探索 MySQL 与 Java 的最佳实践

全文目录&#xff1a; 开篇语&#x1f4dd; 前言&#x1f3f7;️ 摘要&#x1f4da; 简介&#x1f50d; 概述&#x1f680; 核心源码解读&#x1f4d6; 核心逻辑 &#x1f6e0;️ 案例分析&#x1f30d; 应用场景演示&#x1f44d; 优缺点分析优点缺点 &#x1f527; 类代码方法…

cesium相机(camera)控制

camera基础属性&#xff1a; Cesium 中的相机通过 viewer.camera 来获取和操作。 position:相机的位置,用 Cartesian3 坐标表示&#xff0c;表示的是相机在世界坐标系中的绝对位置。 viewer.camera.position Cesium.Cartesian3.fromDegrees(longitude, latitude, height);dir…

uniapp实现多文件下载,保存到本地

概览 uniapp实现多文件下载&#xff0c;保存到本地&#xff0c;因为使用的是uni.downloadFile 实现文件的下载&#xff0c;每次只能下载一个&#xff0c;需要下载多个文件&#xff0c;并保存到本地&#xff0c;并把保存的地址存储到对应的数据组中&#xff0c;并实现进度条显示…

crc, md5 和 sha的区别

效率不同: 直接看代码 import zlib import hashlib import timewith open(rD:\data., rb) as f:x f.read()s time.time() for i in range(100000):d zlib.crc32(x) print(time.time() - s)s time.time() for i in range(100000):m hashlib.md5()m.update(x)d m.hexdige…

学习webservice的心得

一.首先确定数据库中字段&#xff0c;编写相应的实体类&#xff0c;如果使用的是若依框架&#xff0c;则选择代码生成。 二.将生成的或者自己编写的实体类&#xff0c;mapper&#xff0c;service&#xff0c;serviceImpl,controller,(如果是xml文件写的sql&#xff0c;还需要编…

【CSS】纯CSS Loading动画组件

<template><div class"ai-loader-box"><!-- AI loader --><div class"ai-loader"><div class"text"><p>AI智能分析中....</p></div><div class"horizontal"><div class&quo…

idea项目搭建的四种方式: 一(以idea2017为例)

目录 1. 普通java项目 2. 普通JavaWEB项目 3. maven的JavaWEB项目 4. maven的java项目 1. 普通java项目 ①点击“Create New Project”&#xff1b; ②选择“Java”&#xff0c;选择自己安装的jdk&#xff0c;点击“Next”&#xff1b; ③填好项目名称和路径&#xff1b;…

记录一个docker volume映射目录创建文件报错问题

最近用docker-compse做中间件部署。 发现使用volume映射目录后&#xff0c;初始化时创建文件报错导致容器启动失败问题。 提示是没有访问权限。 如下&#xff1a; mariadb 10:07:26.86 INFO > mariadb 10:07:26.86 INFO > Welcome to the Bitnami mariadb contain…

CORS预检请求配置流程图 srpingboot和uniapp

首先要会判断预检请求 还是简单请求 简单请求 预检请求 #mermaid-svg-1R9nYRa7P9Pll4AK {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1R9nYRa7P9Pll4AK .error-icon{fill:#552222;}#mermaid-svg-1R9nYRa7P9Pll4…

关于测试用例的写法

最近公司有个新项目&#xff0c;需要写测试用例&#xff0c;表单项有点多&#xff0c;一个表单都有40个字段左右&#xff0c;若写用例得400条左右&#xff0c;大部分都是重复的项&#xff0c;在此写个小程序&#xff0c;批量生成测试用例 需要注意的是本程序只使用于表单内容 模…

基于ssm+vue的购物商场的设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

JavaScript 的 axios 实现文件下载功能

用 JavaScript 的 axios 实现文件下载功能&#xff0c;咱们要分几个步骤来搞定它&#xff01;最主要的部分是处理 二进制数据&#xff0c;可以生成一个进度检测&#xff0c;然后把它保存为文件。 文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b CogVideoX-2b 模型介绍发布时间模型测试生成的demo视频生成视频限制 运行环境安装运行模型下载开源协议参考 CogVideoX-2b 模型介绍 CogVideoX是 清影 同源的开源版本视频生成模型。 基础信息&#xff1a; 发布时间 2…