Gradio 自定义组件

如何使用 Gradio 自定义组件,Gradio 前端使用 Svelte,后端使用的 Python。如何自定义一个组件呢?Gadio 提供了类似于脚手架的命令,可以生成需要开发组件的前后和后端代码。

创建组件

运行如下命令,gradio 会自动生成 MyComponent 目录。

gradio cc create MyComponent --template SimpleTextbox

在这里插入图片描述
重要的是两个目录,frontend(前端) 和 backend(后端)。打开 mycomponent.py,包括两个主要的方法,preprocess、postprocess,preprocess 处理前端发送到后端时的数据进行处理,postprocess 处理返回到前端的数据。
在这里插入图片描述
前端包括两个文件,Index.svelte 和 Example.svelte,Index 是组件内容,Example 是显示示例数据的 UI,Example 分为两种,包括 table 和 gallery,Table 用于显示多个数据,Gallery 用于显示单个数据。例如我们在页面加两个Input,在 index.svelte 中添加新加一个 input,数据结构从字符串改为字典。

在这里插入图片描述

<svelte:options accessors={true} /><script lang="ts">import type { Gradio } from "@gradio/utils";import { BlockTitle } from "@gradio/atoms";import { Block } from "@gradio/atoms";import { StatusTracker } from "@gradio/statustracker";import type { LoadingStatus } from "@gradio/statustracker";import { tick } from "svelte";export let gradio: Gradio<{change: never;submit: never;input: never;clear_status: LoadingStatus;}>;export let label = "Textbox";export let elem_id = "";export let elem_classes: string[] = [];export let visible = true;export let value = {"name":"a1", "addr":"bj"};export let value1 = "";export let placeholder = "";export let show_label: boolean;export let scale: number | null = null;export let min_width: number | undefined = undefined;export let loading_status: LoadingStatus | undefined = undefined;export let value_is_output = false;export let interactive: boolean;export let rtl = false;let el: HTMLTextAreaElement | HTMLInputElement;const container = true;function handle_change(): void {gradio.dispatch("change");if (!value_is_output) {gradio.dispatch("input");}}async function handle_keypress(e: KeyboardEvent): Promise<void> {await tick();if (e.key === "Enter") {e.preventDefault();gradio.dispatch("submit");}}$: if (value === null) value = {"name":"a1", "addr":"bj"};$: if (value1 === null) value1 = "";// When the value changes, dispatch the change event via handle_change()// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive$: value, handle_change();
</script><Block{visible}{elem_id}{elem_classes}{scale}{min_width}allow_overflow={false}padding={true}
>{#if loading_status}<StatusTrackerautoscroll={gradio.autoscroll}i18n={gradio.i18n}{...loading_status}on:clear_status={() => gradio.dispatch("clear_status", loading_status)}/>{/if}<label class:container><BlockTitle {show_label} info={undefined}>{label}</BlockTitle><inputdata-testid="textbox"type="text"class="scroll-hide"bind:value={value.name}{placeholder}disabled={!interactive}dir={rtl ? "rtl" : "ltr"}on:keypress={handle_keypress}/><inputdata-testid="textbox"type="text"class="scroll-hide"bind:value={value.addr}{placeholder}disabled={!interactive}dir={rtl ? "rtl" : "ltr"}on:keypress={handle_keypress}/></label>
</Block><style>label {display: block;width: 100%;}input {display: block;position: relative;outline: none !important;box-shadow: var(--input-shadow);background: var(--input-background-fill);padding: var(--input-padding);width: 100%;color: var(--body-text-color);font-weight: var(--input-text-weight);font-size: var(--input-text-size);line-height: var(--line-sm);border: none;}.container > input {border: var(--input-border-width) solid var(--input-border-color);border-radius: var(--input-radius);}input:disabled {-webkit-text-fill-color: var(--body-text-color);-webkit-opacity: 1;opacity: 1;}input:focus {box-shadow: var(--input-shadow-focus);border-color: var(--input-border-color-focus);background-color: red;}input::placeholder {color: var(--input-placeholder-color);}
</style>

在这里插入图片描述

编译 & 发布

## 编译
gradio cc build
## 组件会发布到 Pypi,通过 Pip 进行安装
gradio cc publish

总结

Gradio 组件使用起来很方便,前端使用的是 Svelte,和 Vue 很像,入门的门槛也不高。同时,也可以引入其他三方类库,例如 tailwindcss 等等。

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

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

相关文章

[2025]基于微信小程序慢性呼吸系统疾病的健康管理(源码+文档+解答)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

开放标准如何破解企业数字化与可持续发展的困境:The Open Group引领生态系统架构创新

应对数字化与可持续发展的双重挑战&#xff0c;开放标准是关键 在当今快速变化的商业环境中&#xff0c;企业不仅需要通过数字化转型提升竞争力&#xff0c;还面临日益严格的可持续发展要求。开放标准正在成为企业破解这一双重挑战的核心工具。The Open Group 2024生态系统架构…

【MySQL】了解并操作MySQL的缓存配置与信息

目录 一、查看缓存配置 二、查看缓存信息 查询MySQL的缓存相关信息&#xff0c;一般我们用两个命令&#xff1a; show variables like %query_cache%; show status like %qcache%; 一、查看缓存配置 查看缓存配置的相关的系统变量变量&#xff0c;返回给我们服务器缓存的配置…

【SQL】百题计划:SQL内置函数“LENGTH“的使用

【SQL】百题计划-20240912 方法一&#xff1a; Select tweet_id from Tweets where LENGTH(content) > 15;– 方法二&#xff1a; Select tweet_id from Tweets where CHAR_LENGTH(content)> 15;

WordPress建站钩子函数及使用

目录 前言&#xff1a; 使用场景&#xff1a; 一、常用的wordpress钩子&#xff08;动作钩子、过滤器钩子&#xff09; 1、动作钩子&#xff08;Action Hooks&#xff09; 2、过滤器钩子&#xff08;Filter Hooks&#xff09; 二、常用钩子示例 1、添加自定义 CSS 和 JS…

HTB-Vaccine(suid提权、sqlmap、john2zip)

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天来为大家讲解Vaccine靶机 渗透过程 信息搜集 服务器开放了 21FTP服务、22SSH服务、80HTTP服务 通过匿名登录FTP服务器 通过匿名登录到服务器&#xff0c;发现backup.zip文件&#xff0c;可能存在账号密码 发现b…

硬件工程师笔试面试——滤波器

目录 12、滤波器 12.1 基础 滤波器原理图 滤波器实物图 12.1.1 概念 12.1.2 滤波器的分类 12.1.3 滤波器的工作原理 12.1.4 滤波器的应用 12.1.5 滤波器设计的关键参数 12.2 相关问题 12.2.1 不同类型的滤波器在实际应用中的具体作用是什么? 12.2.2 如何设计一个简…

ABAP-Logger ABAP 日志记录与任何其他语言一样轻松

ABAP-Logger ABAP 日志记录与任何其他语言一样轻松 ABAP Logger SAP Logging as painless as any other language. ABAP Version: 702 or higher See the mission statement Features Record message in Application Log(BC-SRV-BAL)Display message Installation Insta…

记忆化搜索

目录 引言&#xff1a; 1. 什么是记忆化搜索&#xff1f; 2. 如何实现记忆化搜索&#xff1f; 一、斐波那契数 1. 题目链接&#xff1a;509. 斐波那契数 2. 题目描述&#xff1a; 3. 解法&#xff08;暴搜 -> 记忆化搜索 -> 动态规划&#xff09;&#xff1a; &am…

【楚怡杯】职业院校技能大赛 “云计算应用” 赛项样题六

某企业根据自身业务需求&#xff0c;实施数字化转型&#xff0c;规划和建设数字化平台&#xff0c;平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”&#xff0c;拟采用开源OpenStack搭建企业内部私有云平台&#xff0c;开源Kubernetes搭建云原生服务平台&#xff0c;选…

涛思数据库安装和卸载

安装 cd opt/taos/TDengine-server-2.4.0.5 sudo ./install.sh 启动taos​ 安装后&#xff0c;请使用 systemctl 命令来启动 TDengine 的服务进程 systemctl start taosd检查服务是否正常工作&#xff1a; systemctl status taosd 升级 3.0 版在之前版本的基础上&#x…

使用 SpringBoot 基础web开发的支持

首先导入项目相关的依赖&#xff1a; pom.xml 文件&#xff1a; 导入相关项目依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-in…

Git使用—把当前仓库的一个分支push到另一个仓库的指定分支、基于当前仓库创建另一个仓库的分支并推送到对应仓库(mit6828)

把学习过程中遇到的Git问题汇总如下&#xff08;后续学习遇到问题会及时更新此专栏&#xff09;&#xff1a; Git原理及常用命令小结——实用版&#xff08;ing......&#xff09;、Git设置用户名邮箱-CSDN博客 解决git每次push代码到github都需要输入用户名以及密码-CSDN博客…

硬件工程师笔试面试——变压器

目录 9、变压器 9.1 基础 变压器原理图 变压器实物图 9.1.1 概念 9.1.2 变压器组成结构 9.1.3 变压器原理 9.1.4 变压器的类型 9.1.5 应用领域 9.2 相关问题 9.2.1 变压器的工作原理是什么? 9.2.2 如何选择合适的变压器类型? 9.2.3 变压器在实际应用中,如何进行…

9.18 C++对C的扩充

使用cout实现输出斐波那契前20项的值 #include <iostream>using namespace std;int main() {int n11,n21,n3;cout << n1 <<" "<< n2<<" ";for(int i0;i<18;i){n3n1n2;cout<<n3<<" " ;n1n2;n2n3;}…

算法备案究竟是自己做还是找专业机构?

算法备案究竟是自己做还是找专业机构&#xff1f; 在深入了解算法备案申报要求和规则的基础上&#xff0c;企业可以选择自行完成备案。然而&#xff0c;如果缺乏相关知识和经验&#xff0c;申报材料可能会反复出错&#xff0c;导致被驳回&#xff0c;增加试错的时间成本&#x…

前端开发之原型模式

介绍 原型模式本质就是借用一个已有的实例做原型&#xff0c;在这原型基础上快速复制出一个和原型一样的一个对象。 class CloneDemo {name clone democlone(): CloneDemo {return new CloneDemo()} } 原型原型链 函数&#xff08;class&#xff09;都有显示原型 prototyp…

录音翻译成文字的软件有哪些?试试这5款工具,一键识别

将录音翻译成文字的需求日益增长&#xff0c;无论是商务会议、学术讲座还是日常生活&#xff0c;一款高效、准确的录音翻译软件都能极大地提升我们的工作与生活效率。今天&#xff0c;我们就来盘点5款备受好评的录音翻译成文字的软件&#xff0c;一起来了解下吧。 工具一&#…

【云原生监控】Prometheus之PushGateway

Prometheus之PushGateway 文章目录 Prometheus之PushGateway介绍作用资源列表基础环境一、部署PushGateway1.1、下载软件包1.2、解压软件包1.3、编辑配置systemctl启动文件1.4、创建日志目录1.5、加载并启动1.6、监控端口1.7、访问PushGateway 二、 配置Prometheus抓取PushGate…

git push失败原因上传的文件超过了Gitee的上限100M

! [remote rejected] master -> master (pre-receive hook declined) error: failed to push some refs to 这个错误信息表明你在尝试将更改推送到Gitee的socket_service仓库时遇到了问题。具体来说&#xff0c;问题出在你尝试推送的文件大小超过了Gitee平台设定的限制。Git…