Google Colab显示含图片DataFrame时崩溃的问题求助

在Google Colab中执行单元格时，想要展示包含Id、condensed_summary和generated_image列的DataFrame随机行。尝试展示200行全量数据时出现显示问题，改为展示n_results条随机子集时，大数值会导致会话重启，仅小数值（如10）能正常运行，且运行小数值时会弹出提示窗口。

引发问题的代码：

def show_results(df_result, images_dir_path: str, n_results: int):
  from IPython.core.display import display, HTML
  from PIL import Image
  from io import BytesIO
  import base64
  from os import listdir
  import random

  image_file_paths = []
  img_strs = []

  if n_results >= len(df_result):                           # all samples
    image_file_paths = listdir(images_dir_path)
  else:                                                     # random sampling
    df_result = df_result.sample(n=n_results).reset_index()
    image_file_paths = random.sample(listdir(images_dir_path), n_results)

  for idx, f in enumerate(image_file_paths):
    img = Image.open(images_dir_path + f)
    img_buffer = BytesIO()
    img.save(img_buffer, format="PNG")
    img_strs.append(base64.b64encode(img_buffer.getvalue()).decode())
    df_result.at[idx, 'generated_image'] = '<img src="data:image/png;base64,{'+str(idx)+':s}" width="300" height="300">'
  html_all = df_result.to_html(escape=False, index=False).format(*img_strs)
  display(HTML(html_all))

df_result = pd.DataFrame({"id": ids, "condensed_summary": condensed_summaries})
show_results(df_result, IMAGES_DIR_PATH, 10)

1. 内存过载：当n_results较大时，所有图片转为Base64字符串并嵌入HTML会生成超大体量的内容，直接耗尽Colab运行内存，触发会话重启。
2. 数据匹配错误：随机采样图片时直接从目录选取，未与DataFrame采样后的行绑定，会导致Id、摘要和图片完全错位。
3. 前端渲染压力：Colab浏览器进程渲染大量300x300尺寸的图片时，资源占用过高会触发浏览器提示甚至直接崩溃。

1. 修复数据匹配逻辑 #

确保采样后的图片与DataFrame行一一对应，避免数据错位：

def show_results(df_result, images_dir_path: str, n_results: int):
  from IPython.core.display import display, HTML
  from PIL import Image
  from io import BytesIO
  import base64
  import os

  img_strs = []

  # 先对DataFrame采样，保证后续图片与行对应
  if n_results >= len(df_result):
    sampled_df = df_result.reset_index(drop=True)
  else:
    sampled_df = df_result.sample(n=n_results).reset_index(drop=True)

  # 根据采样后的ID匹配对应图片（需根据实际文件名规则调整，示例为{id}.png）
  for idx, row in sampled_df.iterrows():
    img_filename = f"{row['id']}.png"
    img_path = os.path.join(images_dir_path, img_filename)
    if not os.path.exists(img_path):
      sampled_df.at[idx, 'generated_image'] = "<span>图片不存在</span>"
      continue
    
    img = Image.open(img_path)
    # 压缩图片减少体积
    img.thumbnail((300, 300))
    img_buffer = BytesIO()
    img.save(img_buffer, format="PNG", optimize=True, quality=80)
    img_str = base64.b64encode(img_buffer.getvalue()).decode()
    sampled_df.at[idx, 'generated_image'] = f'<img src="data:image/png;base64,{img_str}" width="300" height="300">'
  
  # 分块渲染，避免一次性加载过大HTML
  chunk_size = 20
  for i in range(0, len(sampled_df), chunk_size):
    chunk = sampled_df[i:i+chunk_size]
    html_chunk = chunk.to_html(escape=False, index=False)
    display(HTML(html_chunk))

df_result = pd.DataFrame({"id": ids, "condensed_summary": condensed_summaries})
show_results(df_result, IMAGES_DIR_PATH, 200)

2. 缓解内存与渲染压力 #

• 图片压缩：用thumbnail缩小尺寸，保存时开启optimize=True并降低quality参数，大幅减少Base64字符串长度。
• 分块渲染：将大结果集拆分为20行左右的小块依次渲染，避免一次性生成超大型HTML。
• 生成可下载文件：若全量渲染仍有问题，可生成HTML文件供本地查看：

# 生成完整HTML并下载
sampled_df = df_result.sample(n=200).reset_index(drop=True)
# （此处省略图片处理逻辑，复用上面的代码）
html_full = sampled_df.to_html(escape=False, index=False)
with open("results.html", "w") as f:
  f.write(html_full)
from google.colab import files
files.download("results.html")

3. 解读Colab提示窗口 #

当n_results=10弹出的提示，本质是浏览器的自我保护机制——即使10张图片的Base64内容也会占用不少前端内存，浏览器会提示"页面消耗大量内存，是否继续"，确认即可；但数值过大时，资源占用超出阈值会直接导致会话崩溃。

内容的提问来源于stack exchange，提问作者Behdad Abdollahi Moghadam