Visit our site

项目概述

目标：创建一个Tampermonkey脚本，为与ChatGPT的对话生成一个树状结构，帮助用户轻松查看对话的分支和每个分支的细节。

项目要点

特殊名词定义：

Session：从头开始的完整对话集合。
Dialogue：会话中的每一个子过程，包括用户的prompt和ChatGPT的回答。

场景

• 树状结构：每次与ChatGPT的对话都产生一个节点。
• 节点编辑：允许用户在任意时间点编辑过去的prompt，并基于新的prompt生成新的回答分支。

功能需求：

• 分支导航：让用户能够选择任何分支进行后续的对话。
• 分支预览：简要显示分支内容（如前20个字的摘要）。

技能和学习方向

Tampermonkey脚本：需要学习JavaScript、Tampermonkey API以及Web开发基础。

1
2
3
4
5
6

 我的初步设想是:
在某个合适的位置添加一个按钮, 控制树的显示隐藏, `或者`, 控制树的显示方式(例如, 鼠标移动到某个位置显示, 否则渐渐淡化至透明),
然后,  树显示的层数可以自定义, 每一个节点显示该对话的prompt和回答的前10 和20个字符(如果有这么多字符的话).(这一步涉及到读取页面上的文字).  如果层数太多显示不下, 可以后拖拉滑块(就是平常网页的那个右边的滑块, 我也不知道叫什么)
接着, 提供关键词检索功能, 匹配当前对话中符合关键词的信息.(这可能需要数据库的知识?)
最后, 我还想给节点添加 高亮或者收藏功能, 方便下次重新打开对话页面的时候 能够快速定位之前比较满意/当前需要去到以继续的 那一个分支上.  必要的话(这个可能看起来太多了, 但是我既然想到就说一下), 可能还要添加笔记的功能.
请针对上面的每一句话提出你的看法 和 建议. 并且让我们从这里开始整个脚本的构建

关于”主要结构”和”关键元素”:

当我提到“主要结构”或“关键元素”时，我是指页面上与我们任务相关的部分。以你想要创建的Tampermonkey脚本为例，我们主要关心的可能是：

用户输入的文本框（用于获取用户的提问或输入）。

ChatGPT的回复区域（用于获取ChatGPT的回答）。
可能的其他与对话相关的界面元素（例如日期、时间、标签等）。
你可以查看页面的源代码，找到这些元素的HTML标签和它们的属性（如class、id等）。这些信息将帮助我们使用JavaScript来定位、读取或修改这些元素。

用户文本框:
form class :stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl
(第一层的) div class
relative flex h-full flex-1 items-stretch md:flex-col
(第二层的) div class
flex w-full items-center
(第三层的) div class
div class: flex flex-col w-full py-[10px] flex-grow md:py-4 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-xl shadow-xs dark:shadow-xs

用户发送prompt 按钮:

Chatgpt回答区域:
1层 div class
class=”relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]”
2层 div class
class=”flex flex-grow flex-col gap-3 max-w-full”
3层div class
class=”min-h-[20px] flex flex-col items-start gap-3 overflow-x-auto whitespace-pre-wrap break-words”
4层 div class
class=”markdown prose w-full break-words dark:prose-invert light”

其他界面元素
转换当前层中 同一父节点 的不同兄弟节点:

以下是一些建议如何使用 Tampermonkey 脚本与这些元素互动：

访问用户文本框：
const userQuestions = document.querySelectorAll(‘.relative.flex.w-[calc(100%-50px)].flex-col.gap-1.md:gap-3.lg:w-[calc(100%-115px)] > .flex.flex-grow.flex-col.gap-3.max-w-full > .min-h-[20px].flex.flex-col.items-start.gap-3.overflow-x-auto.whitespace-pre-wrap.break-words’);//访问用户内容

访问 ChatGPT 回复区域的内容：

由于 ChatGPT 回复区域的 HTML 代码是一个包含多个元素和文本内容的