ImageEditor: High memory and CPU usage on mobile, crashes with large images

用户在使用 Gradio WebUI 中的 gr.ImageEditor 组件时,在移动端(Android / iOS)或桌面浏览器(Chrome / Safari)中加载图片进行编辑操作。具体场景包括:

ImageEditor: High memory and CPU usage on mobile, crashes with large images

ImageEditor: High memory and CPU usage on mobile, crashes with large images

快速结论:该报错出现在 Gradio 的 gr.ImageEditor 组件中,当在移动端或桌面浏览器加载中等以上尺寸图片时,会触发 Pixi.js 引擎的内存泄漏,导致浏览器甚至操作系统崩溃。优先排查是否上传了较大图片(即使仅 1MB 的 JPEG 也会被转换为约 15MB 的 PNG),并确认是否使用了 Gradio 版本 ≥6.3.0 且问题仍然存在。

问题场景

用户在使用 Gradio WebUI 中的 gr.ImageEditor 组件时,在移动端(Android / iOS)或桌面浏览器(Chrome / Safari)中加载图片进行编辑操作。具体场景包括:

  • 在手机浏览器上通过 Gradio 应用上传图片进行遮罩编辑
  • 在 macOS / Safari 上打开带有 gr.ImageEditor 的页面
  • 在 Ubuntu Desktop + Chrome 中通过 Dropdown 切换图片加载到 ImageEditor

即使仅上传 1MB 的小型 JPEG 图片,ImageEditor 也会将其转换为约 15MB 的 PNG 文件,导致内存迅速耗尽。

报错原文

Browser tab crashes with "Out of Memory" error
OS-level crash requiring hard reboot on mobile devices
VSCode / terminal OOM kill on laptop with 32GB RAM
System memory increases until exhausted during image load

原因分析

可能原因一:Gradio 底层依赖的 Pixi.js 渲染引擎在处理图片时存在内存泄漏或过度内存分配。当 ImageEditor 加载图片时,即使不做任何编辑操作,内存占用也会持续攀升直到浏览器崩溃。

可能原因二:ImageEditor 在上传图片时会自动将其转换为 PNG 格式,导致图片体积急剧膨胀(1MB JPEG → 15MB PNG),进一步加剧内存压力。

注意:该问题不限于移动端,在桌面端(Ubuntu + Chrome / macOS + Safari)上同样会触发,32GB RAM 的设备也会因 OOM 崩溃。

环境排查

  • Gradio 版本:确认使用的版本(受影响版本包括 5.43.1, 6.3.0 等)
  • 浏览器类型:Chrome / Safari / 移动端浏览器
  • 操作系统:Android / iOS / Ubuntu 24.04 / macOS
  • 图片格式与大小:即使仅 1MB JPEG 也会触发问题

解决步骤

  1. 可优先尝试:在加载图片之前手动压缩图片并限制最大尺寸。Issue 中提到的尝试方案(如下)虽然未完全解决问题,但可作为临时缓解措施:
    from PIL import Image, ImageOps
    
    def load_for_editing_action(path):
        if not path: return None
        try:
            img = Image.open(path)
            img = ImageOps.exif_transpose(img)
            max_size = 1024
            if max(img.size) > max_size:
                img.thumbnail((max_size, max_size), Image.LANCZOS)
            return img.convert("RGB")
        except Exception as e:
            print(f"Editor load error: {e}")
            return None
  2. 检查 Gradio 版本:如果使用 Gradio 6.3.0 或更早版本,尝试升级到最新版本查看修复情况。
  3. 重点关注修复 PR:Issue 提及修复在 PR #13571(https://github.com/gradio-app/gradio/pull/13571)中,建议检查该 PR 是否已合并到您的 Gradio 版本中。
  4. 临时替代方案:如果问题持续影响生产环境,可考虑使用 gr.Image 组件替代 gr.ImageEditor,或限制用户上传图片的最大分辨率。
  5. 浏览器层面缓解:在移动端浏览器中,可以提示用户关闭其他标签页释放内存后再使用 ImageEditor。

验证方法

上传一个中等尺寸图片(例如 2.5MB 的 JPEG)到 ImageEditor 组件,观察浏览器任务管理器中的内存占用是否在加载后持续攀升。如果内存稳定在合理范围且不会触发浏览器崩溃,则问题已解决。

参考来源

gradio-app/gradio #12058

celebrityanime
celebrityanime
文章: 10717

发表回复

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