如何用Pygame构建时间线UIMemento前端界面实现深度解析【免费下载链接】MementoMemento is a Python app that records everything you do on your computer and lets you go back in time, search, and chat with a LLM (Large Language Model) to find back information about what you did.项目地址: https://gitcode.com/gh_mirrors/mem/Memento想不想打造一个能倒回时间的桌面应用界面Memento 就是这样一个开源项目它每两秒截取一次屏幕通过 OCR 提取文字并建立索引最终用Pygame 构建时间线UI让用户可以像翻看历史录像一样回溯电脑上的所有操作。本文将以 Memento 前端界面为案例深入解析如何用 Pygame 构建时间线UI从主循环设计、时间条组件到 AI 聊天面板带你拆解一个真实可运行的 Pygame 桌面应用。为什么用 Pygame 构建时间线UIMemento 选择 Pygame 而非 Qt/Electron 的核心原因在于实时渲染能力时间线UI 需要流畅滚动、缩放、悬停预览视频帧Pygame 的 Surface 和 blit 机制天然适合高频图像刷新。同时Python 生态让 Memento 可以直接复用 OpenCV图像处理、TesseractOCR、LangChain大模型问答等库无需跨语言桥接。整体架构一条主循环撑起整个前端Memento 的前端入口是 timeline.py 中的Timeline类。它只做了两件小事却撑起了整个界面1. 初始化窗口自适应屏幕分辨率代码先通过pygame.display.Info()获取屏幕分辨率并把窗口设置为屏幕的约 95% 大小配合SRCALPHA NOFRAME标志实现无边框透明渲染让时间回放界面像系统覆盖层一样自然self.window_size (int(infoObject.current_w / 1.05), int(infoObject.current_h / 1.05)) self.screen pygame.display.set_mode(self.window_size, flagspygame.SRCALPHA pygame.NOFRAME)注意它用pygame.display.init()pygame.font.init()替代全量pygame.init()启动更快这是值得借鉴的性能细节。2. 主循环Draw → Input → Update 三段式run()方法揭示了 Pygame 时间线UI 的标准骨架先填充黑底依次绘制当前帧、时间条、搜索栏、聊天面板然后处理输入事件最后刷新 FPS 统计并pygame.display.update()。每个组件都是一个独立对象只暴露draw(screen, ...)和events(...)两个方法模块间解耦非常干净。时间条组件时间线UI的核心亮点 ⏱️time_bar.py 是整个前端最有设计感的部分。它把时间线变成一条按应用着色的分段彩条应用分段后台遍历每一帧的window_title元数据把同一应用的连续帧合并成一个色段每个应用从 16 色调色板取色超出后随机生成见 apps.py。图标识别通过 icon_getter.py 扫描系统/usr/share/icons目录用模糊匹配fuzz.ratio找到对应应用图标悬停时放大显示非常直观。游标与缩放白色竖线标记当前位置Ctrl滚轮缩放时间窗口tws缩放时动态重算可视区间并在接近边界时自动滚动偏移保证游标不丢失。悬停预览鼠标悬停时间条任意位置时会按 0.2 倍缩放渲染对应帧的截图预览并显示Today 14:32这类友好时间今天/昨天/前天自动转换。帧渲染与缓存流畅回放的关键 ️时间线UI 要回放海量历史帧直接读取视频必然卡顿。frame_getter.py 的解决思路是两级缓存视频帧通过ReadersCache缓存同一帧只解码一次当前显示帧单独保存get_frame()在帧号未变时直接返回缓存避免重复的 resize 和颜色转换。它还负责把搜索结果以红色半透明高亮框 文字标注的形式叠加到帧上并显示X results计数让用户一眼看到命中位置。搜索功能CtrlF 全量检索历史 search_bar.py 实现了类似 IDE 的搜索体验按下CtrlF弹出左侧搜索面板输入关键词后通过 db.py 的 SQLiteFTS5 全文索引查询结果以列表形式呈现点击任意条目即可跳转到对应时间点当前帧对应条目会以红色边框高亮。AI 聊天侧栏让时间线开口说话 Memento 最惊艳的功能是 chat.py 实现的 AI 聊天面板CtrlT唤起使用 LangChain 的ConversationalRetrievalChain Chroma 向量数据库对 OCR 文本做语义检索查询在独立多进程中进行UI 不卡顿回答以 JSON 返回包含answer和frames_ids聊天气泡左侧是问题绿色、右侧是回答蓝色回答中引用的历史帧会以缩略图形式嵌入气泡下方点击缩略图即可跳转回那一刻——真正实现了问 AI 就能找回记忆。区域OCR框选即提取文字 ✂️region_selector.py 允许用户在任意历史帧上拖拽框选区域调用 Tesseract OCR 识别框内文字并生成带坐标的标注CtrlC即可复制全文。配合 ui.py 的PopUpManager淡出提示如Text copied to clipboard交互反馈非常完整。调试利器内建 FPS 监控与红色录制灯 开发调试时按下D键可进入 Debug 模式ui.py 中的Plot类实时绘制 FPS 折线图同时右上角显示帧号。录制状态则以闪烁的红点提示——通过检查memento-bg进程是否存在来判断是否正在记录。小结从 Memento 学到的 4 个 Pygame UI 设计要点组件化每个 UI 元素独立成类只暴露draw和events接口主循环保持清爽缓存优先帧读取、图标匹配都做缓存这是时间线UI 流畅体验的基石善用元数据时间条着色、图标展示、时间提示全部来自录制时的窗口元数据UI 只做消费进程隔离AI 查询放到子进程避免阻塞渲染主循环。如果你也想用 Pygame 构建时间线UI 或类似的桌面应用直接参考 Memento 的 timeline 目录 就能找到所有答案。克隆仓库后运行memento-timeline命令即可亲自体验这个记忆回放器的完整前端界面【免费下载链接】MementoMemento is a Python app that records everything you do on your computer and lets you go back in time, search, and chat with a LLM (Large Language Model) to find back information about what you did.项目地址: https://gitcode.com/gh_mirrors/mem/Memento创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何用Pygame构建时间线UI：Memento前端界面实现深度解析
如何用Pygame构建时间线UIMemento前端界面实现深度解析【免费下载链接】MementoMemento is a Python app that records everything you do on your computer and lets you go back in time, search, and chat with a LLM (Large Language Model) to find back information about what you did.项目地址: https://gitcode.com/gh_mirrors/mem/Memento想不想打造一个能倒回时间的桌面应用界面Memento 就是这样一个开源项目它每两秒截取一次屏幕通过 OCR 提取文字并建立索引最终用Pygame 构建时间线UI让用户可以像翻看历史录像一样回溯电脑上的所有操作。本文将以 Memento 前端界面为案例深入解析如何用 Pygame 构建时间线UI从主循环设计、时间条组件到 AI 聊天面板带你拆解一个真实可运行的 Pygame 桌面应用。为什么用 Pygame 构建时间线UIMemento 选择 Pygame 而非 Qt/Electron 的核心原因在于实时渲染能力时间线UI 需要流畅滚动、缩放、悬停预览视频帧Pygame 的 Surface 和 blit 机制天然适合高频图像刷新。同时Python 生态让 Memento 可以直接复用 OpenCV图像处理、TesseractOCR、LangChain大模型问答等库无需跨语言桥接。整体架构一条主循环撑起整个前端Memento 的前端入口是 timeline.py 中的Timeline类。它只做了两件小事却撑起了整个界面1. 初始化窗口自适应屏幕分辨率代码先通过pygame.display.Info()获取屏幕分辨率并把窗口设置为屏幕的约 95% 大小配合SRCALPHA NOFRAME标志实现无边框透明渲染让时间回放界面像系统覆盖层一样自然self.window_size (int(infoObject.current_w / 1.05), int(infoObject.current_h / 1.05)) self.screen pygame.display.set_mode(self.window_size, flagspygame.SRCALPHA pygame.NOFRAME)注意它用pygame.display.init()pygame.font.init()替代全量pygame.init()启动更快这是值得借鉴的性能细节。2. 主循环Draw → Input → Update 三段式run()方法揭示了 Pygame 时间线UI 的标准骨架先填充黑底依次绘制当前帧、时间条、搜索栏、聊天面板然后处理输入事件最后刷新 FPS 统计并pygame.display.update()。每个组件都是一个独立对象只暴露draw(screen, ...)和events(...)两个方法模块间解耦非常干净。时间条组件时间线UI的核心亮点 ⏱️time_bar.py 是整个前端最有设计感的部分。它把时间线变成一条按应用着色的分段彩条应用分段后台遍历每一帧的window_title元数据把同一应用的连续帧合并成一个色段每个应用从 16 色调色板取色超出后随机生成见 apps.py。图标识别通过 icon_getter.py 扫描系统/usr/share/icons目录用模糊匹配fuzz.ratio找到对应应用图标悬停时放大显示非常直观。游标与缩放白色竖线标记当前位置Ctrl滚轮缩放时间窗口tws缩放时动态重算可视区间并在接近边界时自动滚动偏移保证游标不丢失。悬停预览鼠标悬停时间条任意位置时会按 0.2 倍缩放渲染对应帧的截图预览并显示Today 14:32这类友好时间今天/昨天/前天自动转换。帧渲染与缓存流畅回放的关键 ️时间线UI 要回放海量历史帧直接读取视频必然卡顿。frame_getter.py 的解决思路是两级缓存视频帧通过ReadersCache缓存同一帧只解码一次当前显示帧单独保存get_frame()在帧号未变时直接返回缓存避免重复的 resize 和颜色转换。它还负责把搜索结果以红色半透明高亮框 文字标注的形式叠加到帧上并显示X results计数让用户一眼看到命中位置。搜索功能CtrlF 全量检索历史 search_bar.py 实现了类似 IDE 的搜索体验按下CtrlF弹出左侧搜索面板输入关键词后通过 db.py 的 SQLiteFTS5 全文索引查询结果以列表形式呈现点击任意条目即可跳转到对应时间点当前帧对应条目会以红色边框高亮。AI 聊天侧栏让时间线开口说话 Memento 最惊艳的功能是 chat.py 实现的 AI 聊天面板CtrlT唤起使用 LangChain 的ConversationalRetrievalChain Chroma 向量数据库对 OCR 文本做语义检索查询在独立多进程中进行UI 不卡顿回答以 JSON 返回包含answer和frames_ids聊天气泡左侧是问题绿色、右侧是回答蓝色回答中引用的历史帧会以缩略图形式嵌入气泡下方点击缩略图即可跳转回那一刻——真正实现了问 AI 就能找回记忆。区域OCR框选即提取文字 ✂️region_selector.py 允许用户在任意历史帧上拖拽框选区域调用 Tesseract OCR 识别框内文字并生成带坐标的标注CtrlC即可复制全文。配合 ui.py 的PopUpManager淡出提示如Text copied to clipboard交互反馈非常完整。调试利器内建 FPS 监控与红色录制灯 开发调试时按下D键可进入 Debug 模式ui.py 中的Plot类实时绘制 FPS 折线图同时右上角显示帧号。录制状态则以闪烁的红点提示——通过检查memento-bg进程是否存在来判断是否正在记录。小结从 Memento 学到的 4 个 Pygame UI 设计要点组件化每个 UI 元素独立成类只暴露draw和events接口主循环保持清爽缓存优先帧读取、图标匹配都做缓存这是时间线UI 流畅体验的基石善用元数据时间条着色、图标展示、时间提示全部来自录制时的窗口元数据UI 只做消费进程隔离AI 查询放到子进程避免阻塞渲染主循环。如果你也想用 Pygame 构建时间线UI 或类似的桌面应用直接参考 Memento 的 timeline 目录 就能找到所有答案。克隆仓库后运行memento-timeline命令即可亲自体验这个记忆回放器的完整前端界面【免费下载链接】MementoMemento is a Python app that records everything you do on your computer and lets you go back in time, search, and chat with a LLM (Large Language Model) to find back information about what you did.项目地址: https://gitcode.com/gh_mirrors/mem/Memento创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
