gradio 自建组件

gradio 一个超级好用的库，下面教大家如何自建组件

工作流程

自定义组件工作流程包含 4 个步骤：创建、开发、构建。

1. 创建：创建一个模板供您开始开发自定义组件。
2. dev：启动带有示例应用程序和热重载的开发服务器，使您可以轻松开发自定义组件
3. build：构建一个包含自定义组件的 Python 和 JavaScript 代码的 python 包

运行gradio cc --help以获取所有可用命令的帮助菜单。

还可以附加--help到任何命令名称以显示该命令的帮助页面，例如gradio cc create --help。

1.创建

安装环境

Node.js版本：

node -v

Python版本：

python --version

NPM版本：

npm -v

建议python用3.9或以上，其他直接最新版 

我的环境

新建目录

不要中文

在gradio_self下打开cmd

运行以下命令来引导新模板：

gradio cc create MyComponent --template SimpleTextbox

MyComponent为您的组件指定任意名称

SimpleTextbox您可以使用任何 Gradio 组件作为模板。SimpleTextbox实际上是一个特殊的组件，它是该组件的精简版本Textbox

运行gradio cc show以获取可用组件模板的列表。

该create命令将：

1. 创建一个目录，其中组件名称为小写，结构如下：

修改下面的文件内容       .svelte

2. 开发

创建新组件后，您可以通过entering the directory运行来启动开发服务器

就是测试一下你改的如何

在mycomponent下打开cmd

gradio cc dev

您将看到打印到控制台的几行。最重要的是那句话：

前端服务器（转到此处）：http://localhost:7861/

您的端口号可能不同。单击该链接以热重载模式启动演示应用程序。现在，您可以开始对后端和前端进行更改，您将看到示例应用程序中实时反映的结果！我们将在后面的指南中介绍一个真实的示例。

3. 构建

一旦您对自定义组件的实现感到满意，您就可以build在开发服务器之外使用它。

从您的组件目录中，运行：

gradio cc build

这将在子目录中创建一个tar.gz和.whl文件dist/。如果您或任何人安装该.whl文件 ( pip install <path-to-whl>)，他们将能够在任何 gradio 应用程序中使用您的自定义组件！

build完这样

whl在这里

以后安装这个，然后import 就行

问题

1.报错，无法

gradio cc create MyComponent --template SimpleTextbox

 1.检查python版本是不是3.9以上，我3.8时报错了

2.

这个报错说npm install 失败，手动安装就行

2.这个answer

问你要不要设置软件参数，先设置比较好，先问你软件描述，随便写

问你软件的license 没有写MIT就行

问你python版本 我直接写》=3.9

问你关键词 随便写

3.编码格式问题

软件在build时会出现格式问题，因为软件时utf-8编码，但调用的一些库是跟随系统编码 gbk 所以需要修改

主要是这2个库（data是我的环境名称）

搜索encoding ，如果发现=“locale”

就改为utf-8

4.运行 build时npm报错

少安装了npm的问题

npm install @gradio/statustracker