用 Python Gradio 快速构建/编辑交互式…

适用于需要用 Python 快速创建或修改 Gradio 应用、组件、事件监听、布局或聊天机器人的场景。

适用场景

解决思路

1. 需要了解特定主题时，按需阅读官方指南：快速开始（https://www.gradio.app/guides/quickstart）；Interface 类（https://www.gradio.app/guides/the-interface-class）；Blocks 和事件监听器（https://www.gradio.app/guides/blocks-and-event-listeners）；控制布局（https://www.gradio.app/guides/controlling-layout）；更多 Blocks 功能（https://www.gradio.app/guides/more-blocks-features）；自定义 CSS 和 JS（https://www.gradio.app/guides/custom-CSS-and-JS）；流式输出（https://www.gradio.app/guides/streaming-outputs）；流式输入（https://www.gradio.app/guides/streaming-inputs）；分享你的应用（https://www.gradio.app/guides/sharing-your-app）；自定义 HTML 组件（https://www.gradio.app/guides/custom-HTML-components）；Python 客户端入门（https://www.gradio.app/guides/getting-started-with-the-python-client）；JS 客户端入门（https://www.gradio.app/guides/getting-started-with-the-js-client）。
2. 使用 Interface 高级封装：用 `gr.Interface(fn=greet, inputs='text', outputs='text').launch()` 把函数包装成输入/输出组件。
3. 使用 Blocks 低级布局与显式事件：在 `with gr.Blocks() as demo:` 中创建组件，用 `btn.click(fn=..., inputs=name, outputs=output)` 绑定事件，最后 `demo.launch()`。
4. 使用 ChatInterface 高级聊天 UI 封装：用 `gr.ChatInterface(fn=respond).launch()`，其中 `respond(message, history)` 返回回复。
5. 使用 `gr.Textbox(...)` 创建文本输入/输出，支持 `type='text'/'password'/'email'`、`lines`、`max_lines`、`placeholder`、`label`、`info`、`max_length`、`submit_btn`、`stop_btn`、`buttons=['copy']` 等。
6. 使用 `gr.Number(...)` 创建数字字段，支持 `precision`、`minimum`、`maximum`、`step`。
7. 使用 `gr.Slider(...)` 创建滑块，支持 `minimum`、`maximum`、`step`、`precision`、`randomize`、`buttons=['reset']`。
8. 使用 `gr.Checkbox(...)` 创建可设为 `True`/`False` 的复选框。
9. 使用 `gr.Dropdown(...)` 创建下拉选择，支持 `choices`、`multiselect`、`allow_custom_value`、`max_choices`、`filterable`，可用于输入或输出。
10. 使用 `gr.Radio(...)` 创建单选按钮组，支持 `choices`、`type='value'/'index'`、`rtl`。
11. 使用 `gr.Image(...)` 创建图像上传/显示组件，支持 `sources=['upload','webcam','clipboard']`、`type='numpy'/'pil'/'filepath'`、`format`、`streaming`、`watermark`、`webcam_options` 等。
12. 使用 `gr.Audio(...)` 创建音频上传/录制/播放组件，支持 `sources=['upload','microphone']`、`type='numpy'/'filepath'`、`format='wav'/'mp3'`、`streaming`、`autoplay`、`editable`、`waveform_options`、`subtitles`、`playback_position`。
13. 使用 `gr.Video(...)` 创建视频上传/录制/播放组件，支持 `sources=['upload','webcam']`、`format`、`include_audio`、`autoplay`、`loop`、`streaming`、`subtitles`、`watermark`。
14. 使用 `gr.File(...)` 创建通用文件上传/下载组件，支持 `file_count='single'/'multiple'/'directory'`、`file_types`、`type='filepath'/'binary'`、`allow_reordering`。
15. 使用 `gr.Chatbot(...)` 创建聊天消息显示组件，支持 `value`、`height`、`resizable`、`editable='user'/'all'`、`latex_delimiters`、`layout='panel'/'bubble'`、`feedback_options`、`avatar_images`、`sanitize_html`、`render_markdown`、`group_consecutive_messages` 等。
16. 使用 `gr.Button(...)` 创建按钮，支持 `variant='primary'/'secondary'/'stop'/'huggingface'`、`size='sm'/'md'/'lg'`、`icon`、`link`，并可用 `.click()` 绑定事件。
17. 使用 `gr.Markdown(...)` 渲染 Markdown，支持 `latex_delimiters`、`sanitize_html`、`line_breaks`、`header_links`、`height`、`buttons=['copy']`。
18. 使用 `gr.HTML(...)` 创建任意 HTML 组件，支持 `html_template`、`css_template`、`js_on_load`、`server_functions`、`props`，可高度自定义现有组件或创建不存在的组件。
19. 自定义 HTML 组件时，在 `html_template` 中使用 `${}` JS 表达式和 `{{}}` Handlebars 语法，在 `css_template` 中写作用域样式，在 `js_on_load` 中写交互；在 JS 中通过 `props.value` 更新组件值，通过 `trigger('event_name')` 触发 Gradio 事件。
20. 为复用自定义组件，继承 `gr.HTML` 并定义 `api_info()` 以支持 API/MCP；参考 StarRating 示例：定义 `__init__`，传入 `html_template`、`css_template`、`js_on_load`，并在 `with gr.Blocks()` 中使用和绑定 `average_btn.click(fn=..., inputs=[...], outputs=rating_output)`。
21. 绑定事件监听器时，所有事件监听器共享签名：`component.event_name(fn='decorator', inputs=None, outputs=None, api_name=None, api_description=None, scroll_to_output=False, show_progress='full', show_progress_on=None, queue=True, batch=False, max_batch_size=4, preprocess=True, postprocess=True, cancels=None, trigger_mode=None, js=None, concurrency_limit='default', concurrency_id=None, api_visibility='public', time_limit=None, stream_every=0.5, key=None, validator=None) -> Dependency`。
22. 按组件选择支持的事件：AnnotatedImage: select；Audio: stream, change, clear, play, pause, stop, pause, start_recording, pause_recording, stop_recording, upload, input；BarPlot: select, double_click；BrowserState: change；Button: click；Chatbot: change, select, like, retry, undo, example_select, option_select, clear, copy, edit；Checkbox: change, input, select；CheckboxGroup: change, input, select；ClearButton: click；Code: change, input, focus, blur；ColorPicker: change, input, submit, focus, blur；Dataframe: change, input, select, edit；Dataset: click, select；DateTime: change, submit；DeepLinkButton: click；Dialogue: change, input, submit；DownloadButton: click；Dropdown: change, input, select, focus, blur, key_up；DuplicateButton: click；File: change, select, clear, upload, delete, download；FileExplorer: change, input, select；Gallery: select, upload, change, delete, preview_close, preview_open；HTML: change, input, click, double_click, submit, stop, edit, clear, play, pause, end, start_recording, pause_recording, stop_recording, focus, blur, upload, release, select, stream, like, example_select, option_select, load, key_up, apply, delete, tick, undo, retry, expand, collapse, download, copy；HighlightedText: change, select；Image: clear, change, stream, select, upload, input；ImageEditor: clear, change, input, select, upload, apply；ImageSlider: clear, change, stream, select, upload, input；JSON: change；Label: change, select；LinePlot: select, double_click；LoginButton: click；Markdown: change, copy；Model3D: change, upload, edit, clear；MultimodalTextbox: change, input, select, submit, focus, blur, stop；Navbar: change；Number: change, input, submit, focus, blur；ParamViewer: change, upload；Plot: change；Radio: select, change, input；ScatterPlot: select, double_click；SimpleImage: clear, change, upload；Slider: change, input, release；State: change；Textbox: change, input, select, submit, focus, blur, stop, copy；Timer: tick；UploadButton: click, upload；Video: change, clear, start_recording, stop_recording, stop, play, pause, end, upload, input。
23. 用 `gradio` CLI 的 `info` 命令发现 Gradio 应用端点与参数：`gradio info <space_id_or_url>` 返回 JSON，描述所有 endpoints、参数（类型与默认值）和返回值；例如 `gradio info gradio/calculator` 会得到 `/predict` 参数 `num1`、`operation`、`num2` 与返回 `output`。
24. 文件类型参数会显示 `"type": "filepath"`，并提示需要包含 `"meta": {"_type": "gradio.FileData"}`，表示文件将上传到远程服务器。
25. 用 `gradio predict` 发送预测：`gradio predict <space_id_or_url> <endpoint> <json_payload>` 返回带命名输出键的 JSON 对象。
26. 数值预测示例：`gradio predict gradio/calculator /predict '{"num1": 5, "operation": "multiply", "num2": 3}'` 返回 `{"output": 15}`。
27. 图像生成示例：`gradio predict black-forest-labs/FLUX.2-dev /infer '{"prompt": "A majestic dragon"}'` 返回 `{"Result": "/tmp/gradio/.../image.webp", "Seed": 1117868604}`。
28. 文件上传示例：`gradio predict gradio/image_mod /predict '{"image": {"path": "/path/to/image.png", "meta": {"_type": "gradio.FileData"}}}'` 返回 `{"output": "/tmp/gradio/.../output.png"}`。
29. 访问私有 Space 时，给 `gradio info` 与 `gradio predict` 都加上 `--token`。
30. 需要完整端到端示例时，阅读 `examples.md`。

适用边界 · 注意事项

• 不适合需要复杂前端工程化、精细状态管理或非 Python 技术栈的项目；这类场景应使用专门的前端框架。
• 不适合生产级高并发、企业级权限或复杂后端需求，除非配合额外基础设施；Gradio 更偏向演示和内部工具。
• 若不打算使用 Python/Gradio 或无法安装相关依赖，则不适用。