Gradio从入门到精通(8)---基础组件介绍2

news2024/9/22 23:33:09

文章目录

  • 一、基础组件详解
    • 1.Dropdown
    • 2.Image
    • 3.Audio
    • 4.File
  • 总结


一、基础组件详解

1.Dropdown

用途: 提供下拉菜单选项。

初始化参数:

choices: 可选择的选项列表。

value: 默认选中的值。可以是字符串、列表或是一个可调用对象。

type: 组件返回的值的类型,可以是“value”或“index”。

multiselect: 是否允许多选。

max_choices: 选择的最大选项数。

label: 组件在界面中的名称。

info: 组件的描述信息。

allow_custom_value: 是否允许用户输入不在选项列表中的自定义值。

此外,还有用于布局和样式的参数,如scale、min_width、visible、elem_id和elem_classes等 。

Dropdown组件事件监听器方法

change: 当组件的值发生变化时触发。

input: 当用户改变组件的值时触发。

blur: 当组件失去焦点时触发。

select: 当用户选择下拉菜单的选项时触发。

代码如下(示例):

import gradio as gr  
 
def process_dropdown(choice):  
    return f"You selected: {choice}"  
 
with gr.Interface(fn=process_dropdown, inputs=gr.Dropdown(["Choice 1", "Choice 2", "Choice 3"]), outputs="text") as app:  
    app.launch()

在这里插入图片描述

2.Image

**用途:**上传图像文件。
注意:在Blocks API中,Image组件通常与Image输出组件一起使用,但在Interface API中,可以直接用于输入。

初始化参数:

source: 指定图像数据的来源,可以是文件(“upload”)、URL(“url”)或两者(“both”),默认为"upload"。

type: 指定图像的类型,可以是"image"(默认)或"file"。"image"表示组件将接收图像数据,"file"表示组件将接收图像文件路径。

shape: 如果指定,组件将期望图像具有特定的尺寸。例如,(100, 100)表示图像应该是100x100像素。

convert_mode: 指定图像数据的转换模式,可以是"RGB"(默认)、“RGBA”、“L”(灰度)等。

label: 组件在界面中的名称。

info: 组件的描述信息。

代码如下(示例):

import gradio as gr  
  
def process_image(image):  
    # 这里只是简单地将上传的图片返回,实际中你可以在这里添加图像处理或模型预测的代码  
    return image  
  
with gr.Blocks() as demo:  
    with gr.Row():  
        image_input = gr.Image(label="Upload an image")  
        output = gr.Image(label="Processed Image")  
      
    with gr.Column():  
        process_btn = gr.Button("Process Image")  
          
    process_btn.click(fn=process_image, inputs=image_input, outputs=output)  
  
demo.launch(debug=True)

在这里插入图片描述

3.Audio

**用途:**用户可以通过Gradio的Audio组件上传音频文件,或直接从麦克风录制实时音频作为模型的输入

初始化参数:

sources: 指定音频数据的来源,可以是文件上传(“upload”)或URL(“url”)。

type: 指定组件接收的数据类型,可以是"audio"(默认,接收音频文件)或"file"(接收文件路径)。

sample_rate: 音频的采样率(单位:Hz)。如果设置,Gradio将尝试将上传的音频转换为该采样率。

mono: 如果设置为True,Gradio将尝试将音频转换为单声道。

bit_depth: 音频的位深度(单位:bits)。如果设置,Gradio将尝试将上传的音频转换为该位深度。

label: 组件在界面中的名称。

info: 组件的描述信息。

示例代码:该代码演示了如何创建一个简单的音频处理界面,允许用户上传音频文件,并显示处理后的音频(尽管在这个例子中并没有实际的音频处理逻辑)。

import gradio as gr  
  
def process_audio(audio):  
    # 在这里可以添加音频处理逻辑  
    # 但为了示例,我们直接返回上传的音频  
    return audio  
  
demo = gr.Interface(fn=process_audio,  
                    inputs=gr.Audio(sources="upload", label="Upload Audio"),  
                    outputs=gr.Audio(label="Processed Audio"))  
  
demo.launch(debug=True)

在这里插入图片描述

4.File

**用途:**上传各种类型的文件

初始化参数:

label: 组件在界面中的名称。

info: 组件的描述信息。

multiple: 如果设置为True,允许用户一次选择多个文件上传。

file_types: 一个字符串列表,指定允许上传的文件类型(例如 [“txt”, “csv”])。

max_upload_size: 最大上传文件大小限制(单位:MB)。

visible: 如果设置为False,则组件在界面上不可见。

示例代码:上传文件,并读取内容

import gradio as gr

def process_file(file):
    # 检查是否有文件被上传
    if not file:
        return "No file uploaded."
    
    try:
        # 使用read()方法读取文件内容,并使用decode()方法将其解码为字符串
        with open(file,'rb') as w:
            file_content = w.read()
            return file_content
        
    except Exception as e:
        # 如果发生错误,返回错误信息
        return f"An error occurred: {e}"

# 创建Gradio界面
iface = gr.Interface(
    fn=process_file,
    inputs=gr.File(label="Upload a file", file_types=["txt", "pdf", "docx", "xlsx"]),
    outputs="text",
    live=True  # 启用实时更新
)

# 启动应用
iface.launch()

在这里插入图片描述


总结

以上两个章节内容介绍了Gradio 常用基础组件的使用,不需要记忆,大家可以根据日常的开发需求进行查找使用即可。

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

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

相关文章

【有效验证】解决SQLyog连接MYSQL的错误 1251 - Client does not support

目录 一、原因分析: 二、进入到mysql 三、查看当前加密方式 四、更改加密方式 五、查看是否成功 前言:使用一个开源软件使用sqlyog、navcat都报1251错误,网上都是提示升级客户端,还有一种就是修改mysql配置。本文就是修改配置…

逆向案例二十三——请求头参数加密,某区块链交易逆向

网址:aHR0cHM6Ly93d3cub2tsaW5rLmNvbS96aC1oYW5zL2J0Yy90eC1saXN0L3BhZ2UvNAo 抓包分析,发现请求头有X-Apikey参数加密,其他表单和返回内容没有加密。 直接搜索关键字,X-Apikey,找到疑似加密位置,注意这里…

R语言实现SVM算法——分类与回归

### 11.6 基于支持向量机进行类别预测 ### # 构建数据子集 X <- iris[iris$Species! virginica,2:3] # 自变量&#xff1a;Sepal.Width, Petal.Length y <- iris[iris$Species ! virginica,Species] # 因变量 plot(X,col y,pch as.numeric(y)15,cex 1.5) # 绘制散点图…

【DGL系列】DGLGraph.out_edges简介

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 目录 函数说明 用法示例 示例 1: 获取所有边的源节点和目标节点 示例 2: 获取特定节点的出边 示例 3: 获取所有边的边ID 示例 4: 获取所有信息&a…

【概率论三】参数估计:点估计(矩估计、极大似然法)、区间估计

文章目录 一. 点估计1. 矩估计法2. 极大似然法2.1. 似然函数2.2. 极大似然估计法 3. 评价估计量的标准3.1. 无偏性3.2. 有效性3.3. 一致性 二. 区间估计1. 区间估计的概念2. 正态总体参数的区间估计 参数估计讲什么 由样本来确定未知参数参数估计分为点估计与区间估计 一. 点估…

Ubuntu20.04从零开搭PX4MavrosGazebo环境并测试

仅仅是个人搭建记录 参考链接&#xff1a; https://zhuanlan.zhihu.com/p/686439920 仿真平台基础配置&#xff08;对应PX4 1.13版&#xff09; 语雀 mkdir -p ~/tzb/catkin_ws/src mkdir -p ~/tzb/catkin_ws/scripts cd catkin_ws && catkin init catkin build cd…

ECMP等价多路由机制,大模型训练负载均衡流量极化冲突原因,万卡(大规模)集群语言模型(LLM)训练流量拥塞特点

大规模集群&#xff0c;大语言模型(LLM)训练流量特点&#xff0c;ECMP&#xff08;Equal-Cost Multi-Path Routing&#xff09;流量极化拥塞原因。 视频分享在这&#xff1a; 2.1 ECMP等价多路由&#xff0c;大模型训练流量特点&#xff0c;拥塞冲突极化产生原因_哔哩哔哩_bi…

【GraphRAG】微软 graphrag 效果实测

GraphRAG 本文将基于以下来源&#xff0c;对Microsoft GraphRAG分析优缺点、以及示例实测分析。 1. Source 代码仓库&#xff1a; Welcome to GraphRAGhttps://microsoft.github.io/graphrag/ 微软文章1&#xff08;2024.2.13&#xff09;&#xff1a;GraphRAG: Unlocking…

电脑系统重装数据被格式化,那些文件还有办法恢复吗?

在日常使用电脑的过程中&#xff0c;系统重装或格式化操作是常见的维护手段&#xff0c;尤其是在遇到系统崩溃、病毒感染或需要升级系统时。然而&#xff0c;这一操作往往伴随着数据丢失的风险&#xff0c;尤其是当C盘&#xff08;系统盘&#xff09;和D盘&#xff08;或其他数…

【linux】信号的理论概述和实操

目录 理论篇 信号概述 信号的分类 信号机制 理解硬件中断 异步 信号对应的三种动作 信号产生的条件 终端按键 系统调用 软件条件 硬件异常 除0错误 野指针 OS对于错误的态度 信号在进程中的内核数据结构 信号的处理 CPU的内核态和用户态概述 进程处理信号的时…

MATLAB科研数据可视化教程

原文链接&#xff1a;MATLAB科研数据可视化https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247609462&idx3&snf7043936fc5ee42b833c7c9f3bcd24ba&chksmfa826d91cdf5e4872eb275e5319b66ba6927ea0074fb2293fe1ca47d6aedf38ab91050be484c&token1551213…

FPGA 实现DDR4的读写

1 硬件设计 FPGA 端&#xff1a; DDR4: 2 验证方案 3 仿真验证 4 DDR4 下板验证

Qt模型/视图架构——委托(delegate)

一、为什么需要委托 模型&#xff08;model&#xff09;用来数据存储&#xff0c;视图&#xff08;view&#xff09;用来展示数据。因此&#xff0c;模型/视图架构是一种将数据存储和界面展示分离的编程方法。具体如下图所示&#xff1a; 由图可知&#xff0c;模型向视图提供数…

鼠标的发明和鼠标“变形记”

注&#xff1a;机翻&#xff0c;未校对。 Who Invented the Computer Mouse? 谁发明了电脑鼠标&#xff1f; It was technology visionary and inventor Douglas Engelbart (January 30, 1925 – July 2, 2013) who revolutionized the way computers worked, turning it fr…

【unity实战】使用unity制作一个红点系统

前言 注意&#xff0c;本文是本人的学习笔记记录&#xff0c;这里先记录基本的代码&#xff0c;后面用到了再回来进行实现和整理 素材 https://assetstore.unity.com/packages/2d/gui/icons/2d-simple-ui-pack-218050 框架&#xff1a; RedPointSystem.cs using System.…

Jmeter关联

案例脚本实现&#xff1a;选择商品加入购物车 客户端发送一个登录的HTTP请求&#xff0c;服务端返回一个带着token的响应&#xff0c;后续发出一个带token信息的加入购物车的HTTP请求&#xff0c;返回响应。 关联&#xff1a;当请求直接由依赖关系的时候&#xff0c;比如一个请…

好玩的动作单机游戏:鬼泣4 游戏安装包

Devil May Cry 4让玩家沉醉于哥德式的超自然世界之中&#xff1b;体验一个新主角与熟悉的英雄发生冲突的故事。玩家操作新主角Nero&#xff0c;利用游戏独特的新系统──强大的「恶魔之手」能释放令人难以置信的攻击和製作出不间断的连续技。 凭藉PC的高效能图形显示功能&…

【PostgreSQL】PostgreSQL 教程

博主介绍&#xff1a;✌全网粉丝20W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

k8s核心操作_存储抽象_K8S中使用ConfigMap抽取配置_实现配置热更新---分布式云原生部署架构搭建032

现在有个问题,是上面我们利用pv和pvc 就是持久卷 以及 持久卷申请,实现了对存储的,pod删除以后,对其使用的存储空间也进行了删除,那么还有个问题,对于redis这种我们希望,他的配置也管理起来. 比如这个redis的配置文件. 以后其他的配置文件也是这样. 使用配置文件的存储在k8s中…

HTML2048小游戏(最新版)

比上一篇文章的2048更好一点。 控制方法&#xff1a;WASD键&#xff08;小写&#xff09;或页面上四个按钮 效果图如下&#xff1a; 源代码在图片后面 源代码 HTML <!DOCTYPE html> <html lang"en"> <head><meta charset&…