AI 超级智能体笔记和作业 - AI 应用部分

AI 超级智能体 Day 2 复习了 AI 超级智能体项目，同步构建 NextJS 的复刻项目。研究了阿里云百炼接口文档，以及 “NextJS 的 spring ai”，vercel 的 ai sdk 库。实现了基本的 ai 调用和生成文字 completion 功能。 1. [Github仓库](https://github.com/waitlistSawana/ai-super-agent-yupi-nextjs) 和 [上线地址](https://ai-super-agent-yupi-nextjs.hsawana9.com/)。 2. 基于阿里云百炼的 openai 兼容接口，参考 ai sdk provider 封装模型调用方法。 3. 集成 Shadcn UI 的 Registry，如果是集成了 shadcn ui 的项目，可以通过两行命令，轻松集成代码。 收获： 1. 学习封装 ai sdk 的 ai provider 2. 学习和实现 Shadcn UI 的 Registry 欢迎大家使用我的 Registry，推荐用集成了 ShadcnUI 的 NextJS 或者其他 React 框架： ``` # Init Shadcn UI # 初始化 Shadcn UI pnpm dlx shadcn@latest init # Add dashscope provider with vercel ai sdk # 增加阿里云百炼 ai 调用函数，通过 vercel ai sdk # create file - ./lib/ai/providers/dashscop.ts pnpm dlx shadcn@latest add https://ai-super-agent-yupi-nextjs.hsawana9.com/r/dashscrop-ai-provider.json # Add api route and component for generate text # 增加 api 后端端点和组件，使用阿里云百炼 # create files - ./components/generate-text.tsx - ./app/api/v1/generate-text/route.ts pnpm dlx shadcn@latest add https://ai-super-agent-yupi-nextjs.hsawana9.com/r/nextjs-generate-text-api-and-component-for-dashscrop-ai-provider.json ```

AI 超级智能体项目 day 1 第一次启动了 java 项目，在 vscode / trae，直接克隆 spring ai alibaba 的仓库 1. 克隆 2. 获取 api key 3. 命令启动 收获： - pom.xml == package.josn：之前是 js 全栈，迁移理解，都是包管理器，只是用到 xml 语法 - java 主程序：@SpringBootApplication - java controller / api 端点：@RestController @RequestMapping("/helloworld") （我勒个注解驱动的框架（误）） 常用命令： ```bash # 1. 首次运行：安装依赖并构建项目 mvn clean install # 2. 启动项目 mvn spring-boot:run # 其他常用命令 # 清理项目 mvn clean # 编译项目 mvn compile # 打包项目 mvn package # 安装到本地仓库 mvn install ```

用户中心上线（NextJS改造）

力扣：手搓二分查找 取中间值，代入判断，更新待选结果，更新上下界 --- 排序 取上下界限定待选值范围 while 下界 <= 上界： （# 仍有待选值） 中间值 = （下界 + 上界）// 2 if 中间值满足约束： 存为待选结果 更新上界为 中间值 - 1 （# 排除中间值和更偏离的值） else： 更新下界为 中间值 + 1 （# 排除中间值和更偏离值） return 待选结果

力扣 - k个有序链表重排序： 思路是 while 循环中比较每一个子链表的头选出最小的那个。 重点在于熟悉链表的概念以及创建和更新 - 理解链表和列表区别和操作： - 列表是选中了存储中的一团数据（连续的区域），一次性拿到所有值，创建和更新都是整团整团地更新，可以通过索引随机地访问里面的值，或者批量处理。 - 链表是选中了一枚数据，只有那一个节点的值＋指向下一个节点的指针，所以没办法一次性知道链表的所有值，需要 list node.next.next...value 往下访问（递归？）。这也导致头尾的增删很快（只访问一枚数据），而且在存储中是游离分布的。 - 新建虚拟头部 dummy，返回时返回 dummy.next()，就把头部去掉了。 - current = dummy 后，这两个都指向同一个“实际”节点（dummy），current.next 会让 dummy.next 同步变化。 - current 的更新，使其始终代表最末端节点，current = current.next。

[nextjs] 从 trpc 的 useInfiniteQuery 开始，在项目中学习和使用 “无限滚动加载” 和 “游标分页查询” [trpc文档](https://trpc.io/docs/client/react/useInfiniteQuery) 这次之所以用到这个，是因为项目中要实现数据库查询所有数据。但获取所有数据展示为列表显然不太科学，ai编程助手给出了无限滚动查询的方案，用到了这个hook。于是深入研究了下去。除了这个，后面还会提到这个页面用到的 useDebounded（settimeout包裹） 和 useLocalstore（浏览器kv存储）。 这个hook其实核心在于三个：后端指针分页查询、前端数据获取和维护、前后端协调指针。可以实现分批次小量地请求数据库数据，在前端全部展示。 1. 后端利用 指针 + where + limit 实现数据库查询。维护一个指针 cursor 来作为 where 的参数，排除那些已经获取过的数据，再取 limit 个数据。 这里的逻辑是这样：获取 cursur 和 limit -> 用 cursur 作为参数 where -> 取 limit + 1 条数据 -> pop 多出来的那条数据作为新的 cursor -> 回传新的 cursur 和 数据。 这里是深分页优化一些内容，面试鸭有看到。原理在于 offset + limit的方案其实是“数前10000条数据，再取后10个”。造成性能浪费。而 where + limit 是 “排除前面的数据，再取10个”，大大减少性能开销。 不过和 deepseek 探讨后，要注意 where 和 order 涉及的字段要建索引，否则每次查询都要扫描整表新建索引，反而更慢。 2. 前端接收和维护接收到的所有数据并协助维护cursor，最后设置一个触发继续请求数据的函数。 前端一方面接收和保存返回的数据，拼接成一整个数据并渲染，每次查询时还需要保存好上一次数据库返回的那个新 cursor，继续获取数据时回传。 触发继续获取的函数的情形根据情景定，加载更多按钮、识别滚动位置、或者更复杂的条件 3. 协调。其实已经提到了，维护好那个 cursor 是重点，来回传递和更新。感觉在前后端都行，where 的 less than 和 less 的区别。

leetcode 打卡 Day 1： 学习了图的数据结构，用TS实现图的 深度优先搜索 和 广度优先搜索。收获了： - 图的数据结构，和遍历方法 - 递归函数：函数调用自身 - queue队列：通过 array.shift() 和 array.push(i) 来处理队列，实现实际上的按层遍历

Day6 - 完成pdf单页提取、上传、 AI 对话功能，可以提交了，后面再慢慢改其它细节。（计划图片预览，toast，markdown显示，对话空间伸缩。 - 发现了一个写代码的关键词：“以中级开发者的水平****”，来自一个 Youtuber。之所以是中级开发者而不是高级开发者，是因为高级开发者版的代码会用很多高级语法，比如一行代码写完 for 循环。（实际是因为看不懂） - 配置 ChatGLM 的 ai-sdk ，deepseek 暂不提供看图能力，所以换成了 GLM-4V，刚好之前有额度，这个模型的价格是 50元/M token，6.8美元。GLM 开放平台的文档比印象里好看太多，还有 Playground - 看了两节智能 BI 项目：画架构图、修开源框架 Bug 的方法，对用到的 MQ 很感兴趣。 - github 仓库中看 isue 和 discussion，这两节课中学到最有用的技巧。 - 原来上传图片给 AI 可以不弄成 url ，直接上传（服了）。ai-sdk 两年多前的示例项目有些内容过时了，传输数据的结构更新，并且半年前更新了新特性，可以直接上传文件作为上下文。 - 了解了可以在项目中用到的消息队列，Upstash 原来还提供了 Qstack 消息队列服务，可以直接用。作为备选项。

Day 5 - 学习和应用了 React 的 Context。useContext 加 useState 造一个可以在组件树里使用的 Provider。看 React 文档的例子和应用的场景不同，文档只给了固定的 provider 值案例，感谢 AI 提示的用法。 - 单 Pdf 页面截图上传 vercel blob 实现，下一步尝试加入到 AI 上下文。折腾了很久的 trpc，才发现文件上传不是它支持的用法，23年底还在实验中，老老实实写 api 端点。