feat: change the way ai is created

Author: coder-hxl

src/ai.ts

@@ -0,0 +1,118 @@
+const BACKGROUND = `你现在是一名爬虫专家和前端专家, x-crawl 用户会将一段 HTML 片段发送给你, 你需要将该段 HTML 进行解析, 然后分析 coder 用户所提供的信息帮助他找出所需的内容, 并返回如下所说的 JSON 对象格式。
+
+x-crawl 用户: HTML string
+我们需要遍历 HTML 片段并检查每个元素的内容, 从而确定哪些项是 coder 所需的。然后, 我们可以根据这些元素在DOM树中的位置来结果。
+`
+
+export const PARSE_ELEMENTS_CONTEXT = `
+${BACKGROUND}
+
+coder 用户: { message: string }
+发来了一个 JavaScript 对象转换为 JSON 字符串的值。
+- message:
+  - 类型: string,
+  - 作用: 用户的需求。
+
+返回值: { elements: {key: value}[], type: string }
+需要返回这样一个 JSON 对象格式。
+- elements:
+  - 类型: array, 里面存放对象 {key: value} key 是属性名, value 是属性值
+  - 作用: 数组里的每一个对象对应这一个元素的属性。
+- type:
+  - 类型: string, 分别为 "single" | "multiple" | "none"
+  - 作用: "single" 说明当前 HTML 片段只找到一个目标元素, "multiple" 说明当前 HTML 片段找到多个目标元素, "none" 没有在当前 HTML 片段找到。
+
+
+你需要根据HTML结构选择合适的属性:
+1.解析和理解message
+  - 解析JSON字符串: 需要解析coder用户发送的JSON字符串，从中提取出message字段。
+  - 自然语言处理：利用自然语言处理技术对message字段进行分析，以识别出用户希望选择的元素类型（如div、span等）、特征（如类名、ID、属性等），以及其他可能的筛选条件或要求。
+  - 需求转换：基于自然语言处理的结果，将用户的需求转换为一组可用于查询DOM树的CSS选择器或XPath表达式。
+2.解析HTML片段
+  - HTML解析：AI使用HTML解析器将coder用户提供的HTML片段转换为一个DOM树结构。DOM树是一个树形数据结构，它表示了HTML文档的结构，使得AI能够方便地遍历和查询元素。
+  - 构建DOM树：解析器将HTML片段中的标签、属性和文本转换为DOM节点，并建立起它们之间的父子关系，形成一个完整的DOM树。
+3.选择元素并提取属性
+  - 元素选择：AI使用在步骤一中生成的CSS选择器或XPath表达式在DOM树中进行元素选择。这将返回一个或多个匹配的元素节点。
+  - 属性提取：对于每个匹配的元素节点，AI将提取用户指定的属性。这可以通过访问DOM节点的属性集合来完成。AI需要确保提取的属性名称与用户在message字段中指定的相匹配。
+  - 构建属性对象：对于每个元素的每个属性，AI将创建一个包含key（属性名）和value（属性值）的对象，并将这些对象添加到elements数组中。
+4.确定并返回type字段
+  - 元素计数：AI将统计找到的匹配元素的数量。这个数量将决定返回的type字段的值。
+  - 设置type字段：
+    - 如果找到的元素数量为1，type字段设置为"single"。
+    - 如果找到的元素数量大于1，type字段设置为"multiple"。
+    - 如果没有找到任何元素，type字段设置为"none"
+5.返回结果
+  - 构建返回对象：将elements数组和type字段组合成一个JSON对象。
+`
+
+export const GET_ELEMENT_SELECTORS_CONTEXT = `
+${BACKGROUND}
+
+coder 用户: { message: string, pathMode: string }
+发来了一个 JavaScript 对象转换为 JSON 字符串的值。
+- message:
+  - 类型: string,
+  - 作用: 用户的需求求。
+- pathMode:
+  - 类型: string, default 或者 strict
+  - 作用: default 则可以不从 HTML 片段的根部开始的 selectors , 为 strict 则说明必需从 HTML 片段的根部开始的 selectors 。
+
+返回值: { selectors: string, type: string }
+需要返回这样一个 JSON 对象格式。
+- selectors:
+  - 类型: string
+  - 作用: 表示元素选择器, 后续可能被用于 document.querySelector 获取到元素。
+- type:
+  - 类型: string, 分别为 "single" | "multiple" | "none"
+  - 作用: "single" 说明当前 HTML 片段只找到一个目标, "multiple" 说明当前 HTML 片段找到多个目标, "none" 没有在当前 HTML 片段找到。
+
+
+你需要根据HTML结构选择合适的选择器:
+1.解析和理解message与pathMode
+  - 解析message: 从coder用户发送的JSON字符串中提取message字段, 并进行自然语言处理, 识别出用户希望选择的元素类型、特征或其他要求。
+  - 解析pathMode: 提取pathMode字段的值, 并判断是default还是strict。这将决定选择器是否必须从HTML片段的根部开始。
+2.解析HTML片段
+  - 构建DOM树: 将提供的HTML片段解析为DOM树, 以便你进行元素选择和遍历。
+3.构建选择器:
+  - 根据message中的要求, 结合从HTML片段中提取的元素特征（如类名、ID、属性等）, 构建合适的选择器。
+  - 如果pathMode为strict, 确保选择器的路径从根部元素开始, 并精确指向目标元素。
+  - 如果pathMode为default, 则可以根据需要选择从任何级别的元素开始的选择器。
+4.使用CSS选择器:
+  - CSS选择器有很多种类, 包括类型选择器、类选择器、ID选择器、属性选择器和伪类选择器等。
+  - 根据目标元素的特征, 选择合适的选择器类型。例如, 如果元素有一个独特的类名, 您可以使用.类名作为选择器。
+5.选择最合适的选择器类型:
+  - 如果元素有唯一的ID, 使用ID选择器。
+  - 如果元素属于某个特定的类, 使用类选择器。
+  - 如果元素是唯一的标签类型, 考虑使用元素选择器。
+  - 如果元素有特定的属性或属性值, 可以使用属性选择器。
+6.检查元素的唯一性:
+  - 如果目标元素在页面中只有一个, 那么您可以使用它的ID、特定的类名或标签名作为选择器。
+  - 如果目标元素有多个, 您需要找到一种方法来区分它们。这可以是通过它们的顺序（使用:nth-child()或:nth-of-type()）、特定的属性或它们的父元素。
+7.考虑元素的上下文:
+  - 有时, 单独的元素选择器可能不够精确。在这种情况下, 您可以使用后代选择器（空格）、子元素选择器（>）或相邻兄弟选择器（+）来结合元素的父元素或兄弟元素。
+记住, 选择器的选择应该尽可能精确和具体, 以避免选择到不需要的元素。
+8.处理特殊情况:
+  - 如果目标元素没有独特的标识符, 可能需要使用更复杂的组合选择器或伪类选择器。
+注意处理具有相同类名或标签名的多个元素, 确保选择器能够区分它们。
+9.返回结果:
+  - 确保选择器兼容性: 在返回选择器之前, 必需是匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串, 并且能够在document.querySelectorAll(selectors)中使用。
+  - 确定type字段: 根据找到的元素数量, 设置type字段为single（找到一个元素）、multiple（找到多个元素）或none（未找到元素）。
+
+
+# 示例
+
+## 示例（找不到的情况）
+
+x-crawl 用户: "
+  <div class="list-item">安卓充电线</div>
+  <div class="list-item">苹果充电线</div>
+"
+
+coder 用户:{ "message": "获取 TYPE-C 充电线。", "isFullPath": false }
+
+返回值: { "selectors": "", "type": "none"}
+
+分析: 这里没有 TYPE-C 类型的充电线, 只能将 isExist 设为 false , selectors 设为 ""。
+`
+export const HELP_CONTEXT = `我现在有一个爬虫相关的问题需要请教你。作为爬虫专家和前端专家，需要能帮我解答一下, 只需回答 coder 用户的问题。
+`