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">
	im