Pasting from excel into multimodal textbox also pastes an image

该问题发生在从 Excel 或 PowerPoint 复制单元格内容粘贴到 Gradio MultimodalTextbox 时,剪贴板会同时携带一份 PNG 图片和纯文本,导致图片被当作文件上传。优先排查方向是拦截 paste 事件并检查剪贴板中的 HTML 表格标记,在检测到表格数据时阻止默认粘

快速结论:该问题发生在从 Excel 或 PowerPoint 复制单元格内容粘贴到 Gradio MultimodalTextbox 时,剪贴板会同时携带一份 PNG 图片和纯文本,导致图片被当作文件上传。优先排查方向是拦截 paste 事件并检查剪贴板中的 HTML 表格标记,在检测到表格数据时阻止默认粘贴行为。

适用环境:Gradio 5.14.0(已确认触发),Gradio 6(社区提供了修复脚本);操作系统和浏览器未在 Issue 中明确说明。

最快修复方案:暂无官方一步修复方案。Issue 中提供了社区验证过的 head JS 注入脚本,可在 Blocks 的 head 参数中注入,拦截 paste 事件并将 Excel 表格转换为 Markdown 格式插入文本框。

注意事项:该脚本属于社区 workaround,尚未由 Gradio 官方合入;对 PowerPoint 复制的内容可能同样生效(Issue 中有提到类似行为),但未在脚本中单独验证;脚本依赖 document.execCommand('insertText'),在部分现代浏览器或非 Lexical 编辑器中可能需要调整。

问题场景

用户在 Gradio 的 MultimodalTextbox 组件中,从 Excel 表格复制单元格后直接粘贴(Ctrl+V)。预期行为是只插入纯文本内容,但实际会同时插入一张 PNG 图片和文本。由于后端流程不允许图片文件类型,导致下游处理报错。Issue 中提到 PowerPoint 复制文本时也可能出现类似现象。

报错原文

Pasting from excel into multimodal textbox also pastes an image

原因分析

Excel 的复制功能在剪贴板中会同时写入多种格式:纯文本(text/plain)、HTML 表格(text/html)以及位图/PNG 图片。Gradio MultimodalTextbox 的 paste 处理默认会接收剪贴板中的文件(图片)和文本,因此用户粘贴时图片和文本被同时提交。不同文本编辑器对剪贴板多媒体内容的处理策略不同,Mattermost 等产品只提取纯文本并渲染 Markdown,而 Gradio 当前版本未过滤图片文件。

环境排查

  • Gradio 版本:确认是否大于等于 5.14.0(Issue 中用户使用的是此版本)
  • 后端是否启用了文件上传限制(例如不允许 image/* 类型),如果后端允许图片则可能不会报错但会产生冗余文件
  • 浏览器类型:不同浏览器对剪贴板 HTML/图片数据的处理可能略有差异,暂未在 Issue 中确认
  • 操作系统:Windows / macOS 的 Excel 复制行为可能不同,Issue 中用户未注明系统

解决步骤

  1. 在 Gradio Blocks 中通过 head 参数注入一段 JavaScript 脚本(见 Issue 中完整代码),脚本会监听全局 paste 事件,但仅在检测到剪贴板内容包含表格标记(<table><tr> 或 Excel/Calc/Sheets 关键字)且纯文本包含制表符时才介入。
  2. 确认目标元素是 [contenteditable="true"]textarea,随后调用 preventDefault() 阻止 Gradio 默认的粘贴行为。
  3. 脚本会将纯文本按制表符拆分为行列,并转换为 Markdown 表格语法(包含表头分隔行,单元格内的竖线会转义为 \\| 以防止 Markdown 渲染冲突)。
  4. 对于 textarea 直接通过 selectionStart/selectionEnd 插入 Markdown;对于 contenteditable(Gradio 6 Lexical 编辑器)使用 document.execCommand('insertText') 插入。
  5. 插入完成后手动触发 input 事件,确保 Gradio 组件能感知内容变化并更新状态。

验证方法

在应用启动后,从 Excel 复制多个单元格(包含至少两行两列数据),在 MultimodalTextbox 中直接 Ctrl+V 粘贴。检查文本框内容是否变为 Markdown 表格格式,且 files 数组中没有新增图片文件。也可以通过后端回调打印 input_data,确认 files 字段为空、text 字段包含 | 表格分隔符。

参考来源

gradio-app/gradio #10910

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 21224

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注