VS Code Notebook渲染OpenAI Gym环境时单元格跳动问题求解

单元格上下跳动的核心原因是频繁调用display.display()和clear_output()导致VS Code Notebook的页面布局反复重排，结合以下优化方案可以解决：

方法1：优化实时渲染逻辑 #

通过减少不必要的figure显示操作、关闭坐标轴来降低布局变动：

import gym
from IPython import display
%matplotlib inline
from matplotlib import pyplot as plt

env = gym.make('CartPole-v0')
env.reset()

# 创建固定布局的figure
fig, ax = plt.subplots()
img = ax.imshow(env.render(mode='rgb_array'))
plt.axis('off')  # 关闭坐标轴避免布局变化

done = False
while not done:
    action = env.action_space.sample()
    observation, reward, done, _ = env.step(action)
    
    # 仅更新图像数据，不重建figure
    img.set_data(env.render(mode='rgb_array'))
    fig.canvas.draw()
    fig.canvas.flush_events()
    
    # 优化输出清除逻辑
    display.clear_output(wait=True)
    display.display(fig)

env.close()
plt.close(fig)

方法2：启用Matplotlib交互模式 #

利用交互模式直接更新画布，减少IPython输出的频繁刷新：

import gym
%matplotlib inline
from matplotlib import pyplot as plt
plt.ion()  # 开启交互模式

env = gym.make('CartPole-v0')
env.reset()

fig, ax = plt.subplots()
img = ax.imshow(env.render(mode='rgb_array'))
plt.axis('off')
plt.show(block=False)  # 非阻塞显示画布

done = False
while not done:
    action = env.action_space.sample()
    observation, reward, done, _ = env.step(action)
    
    img.set_data(env.render(mode='rgb_array'))
    fig.canvas.draw()
    fig.canvas.flush_events()

env.close()
plt.close(fig)

方法3：录制视频后播放（彻底避免跳动） #

如果不需要严格实时，先录制环境运行视频再播放，完全规避页面重排问题：

import gym
from gym.wrappers import RecordVideo
from IPython.display import HTML
from base64 import b64encode
import glob

env = gym.make('CartPole-v0', render_mode='rgb_array')
env = RecordVideo(env, video_folder='./gym_videos', name_prefix='cartpole')

env.reset()
done = False
while not done:
    action = env.action_space.sample()
    observation, reward, done, _ = env.step(action)

env.close()

# 自动获取最新生成的视频文件
video_path = glob.glob('./gym_videos/cartpole-step-*.mp4')[0]
with open(video_path, 'rb') as f:
    video_bytes = f.read()
video_b64 = b64encode(video_bytes).decode('utf-8')
HTML(f'<video width="400" controls><source src="data:video/mp4;base64,{video_b64}" type="video/mp4"></video>')

内容的提问来源于stack exchange，提问作者RTp