03Office Hours- Walkthrough of class projects

来源:AI时代学习营 · AI Builder 课程 · 在学习书房阅读原版(含图)

非正式课程

  • 当前进度:展示了截至目前提交项目的人数统计
  • 成功率提升:每个mini项目的成功率相比之前有明显提高

成功率的讨论

  • 工具影响:讨论成功率提升是否与Codex等AI工具有关
  • 效率对比:使用Cursor、Codex等工具后,完成项目所需时间显著减少
  • 典型案例:有学生提到绘图项目仅用10秒完成,而预期需要半小时到一小时

作业和项目的看法

社会科学的视⻆

  • 学习体验:对于非工程背景(社会科学)的学生具有挑战性但收获很大
  • 工具学习:初次接触GitHub等工具时存在困难
  • 互助价值:通过查看他人项目和获得帮助来学习新知识

工程师的视⻆

  • 专业背景:有工程背景的学生认为项目相对简单
  • 持续学习:即使有经验,通过提问和实现过程仍能学到新知识

预期耗时

例题:绘图项目耗时讨论

  • 预期差异:实际耗时(10秒)远低于预期(30-60分钟)
  • 工具优势:使用Playwright等工具可以自动完成绘图任务
  • 效率对比:新工具使用前后完成相同任务的时间差异显著
  • 课程安排:今日将展示使用新工具快速完成项目的方法
  • 实践价值:完成的项目可部署上线并用于简历展示

新平台的介绍

新平台的介绍

周三详细材料

  • 学习安排:第三周没有直播课程,但提供了详细阅读材料
  • 材料内容:包含60页阅读材料,适合想要挑战自我并构建实际项目的学生
  • 项目价值:完成的项目可以放入简历,展示对AI的理解并给同事或未来雇主留下深刻印象
  • 学习建议:建议从开头开始阅读,先完成前两个部分再决定后续计划

学生⻔户

  • 平台功能:提供支持学生完成优秀项目的平台
    • 首次登录:需要输入与Maven账户关联的邮箱
    • 点击重置密码(邮件可能出现在垃圾邮件文件夹)
    • 重新登录后即可使用
  • 主要特点:集成多种功能,支持AI工具开发

API键

  • API键的获取与用途

  • 核心功能:平台提供统一的API键管理系统
  • 创建方式:首次登录后需创建API键,创建后显示在列表中
  • 主要用途:通过单一API键访问多种AI功能,无需分别注册多个平台账户
  • 技术原理:提供API让AI作为代理执行各种任务
  • 案例展示:Chat BT及其API调用示例说明:以ChatGPT为例说明API调用原理
  • 基础功能:
  • 与AI对话获取响应
  • 自动生成对话标题
  • 浏览历史对话记录
    • 开发所需时间与AI时代的效率提升传统开发:团队可能需要一周时间完成类似ChatGPT的UI开发
    • AI时代:借助平台工具可在5分钟内完成基础功能搭建
    • 技术门槛:无需成为开发专家即可使用这些工具
    • API键的管理与配额说明学生配额:每位学生有100美元的使用额度
    • 费用说明:
  • 主要用于API调用和搜索引擎工具调用
    • 部署产品供他人使用会消耗配额额度管理:如需更多额度可联系教学团队
  • API键的调用与模型选择

  • 模型支持:平台整合多种AI模型,包括:
  • DeepSeek Chat(默认可用)
  • GPT-5(通过OpenAI兼容提供商)
  • Grok API(需要X_AI_API_KEY)
    • Gemini(需要Google API key)调用方式:所有模型都支持OpenAI兼容的API调用
    • Chat GBT与GBT的区分及API的重要性产品区分:ChatGPT产品与API是两个独立的系统
    • 账户管理:拥有ChatGPT订阅不代表拥有API访问权限
    • 平台优势:通过统一API可访问多种模型,无需分别获取各平台API
    • API键的创建与使用注意事项创建建议:建议所有用户首先创建API键
    • 安全提示:
  • API键不会永久显示,建议立即记录
    • 示例中展示的API键仅为演示用途使用便利:只要不退出登录,API键会保留方便后续操作

MCP介绍

  • 核心功能:作为知识摄取助手,将API使用规范、平台功能等知识整合到AI工具中
    • 工作原理:通过模型上下文粒子(Model Context Particle)实现,安装后AI即可理解:平台架构(what’s in AI builder space)
    • 操作指南(how to use it)
  • 认证机制:依赖API密钥进行身份验证(arbiter token)
  • 兼容性:支持Cursor/Cloud Code/CodeX等开发工具

MCP配置

  • 安装步骤

  • 入口路径:
  • 打开Cursor设置
  • 进入MCP标签页
    • 点击”New MCP Server”配置文件:自动生成的复杂配置可直接复制使用
    • 验证提示:首次安装时会要求确认用户文件夹权限
    • 使用准备启用检查:需确保AI Builder Coach功能已激活
    • 优势特点:安装后无需手动复制粘贴或特殊指令
    • 语音辅助:可通过语音识别工具进行操作演示(课程中演示了该功能)
    • 提示工程关键原则:清晰的指令表达是AI高效工作的前提
  • 需要详细说明需求(what you want to the AI)
    • 确保包含所有必要的上下文信息开发工具:课程演示了自行开发的语音识别辅助工具

应用案例

  • 例题:ChatGPT界面克隆

  • 界面设计:
  • 采用两栏式布局:左侧为对话列表,右侧为聊天界面
  • 使用Next.js框架简化开发流程
    • 通过AI Builders API统一管理多个AI模型的接入开发要点:
  • API集成:只需一个API key即可接入多个AI模型(如DeepSeek、Grok- 4-fast等)
  • 自动配置:系统能自动识别并配置所需的API token
  • 错误处理:当出现API错误时,建议获取详细错误信息而非盲目尝试
  • 服务器管理:可通过命令npm run dev启动开发服务器

  • 功能增强:
  • 多行输入:将单行文本框改为textarea,支持Shift+Enter换行
  • 对话标题生成:根据第一条消息内容自动生成对话标题
  • 系统消息优化:自动添加”Not Chat”系统提示提升回答质量
  • Markdown渲染:支持代码块、列表、表格等Markdown格式的HTML渲染
  • 例题:模型选择应用

  • 模型切换机制:
  • 默认使用Grok-4-fast模型
  • 支持动态切换不同AI模型(如DeepSeek、SecondMind等)
    • 模型配置存储在路由文件(route.ts)中开发技巧:
  • 统一API管理:通过AI Builder平台统一管理不同模型的API调用
  • 错误诊断:当API调用失败时,建议获取完整的错误响应而非仅状态码
  • 模型特性:
  • Grok-4-fast:快速响应,适合常规对话
  • SecondMind:支持网络搜索,适合需要实时信息的查询
  • 例题:天气查询应用

  • 多代理工作模式:
  • 前端路由模型处理用户请求
  • 代理调用工具(如搜索引擎)获取信息
    • 结果经过多轮迭代优化后返回给用户实际应用:
  • 天气查询:通过SecondMind-agent模型结合搜索引擎获取实时天气
  • 新闻搜索:可查询本周AI领域最新动态
    • 响应特点:类似人类思考过程,需要一定处理时间开发建议:
  • 搜索优化:使用Tavily作为搜索引擎后端
  • 结果处理:对搜索结果进行多轮分析和提炼
  • 用户提示:对于耗时操作应提供进度提示

  • 扩展应用:
  • 数据提取工具
  • 网页内容增强工具
  • 图像内容分析工具
    • GUI自动化工具学习资源:
  • 提供参考提示模板
  • 包含多个种子项目创意
  • 建议从简单功能开始逐步扩展

新平台的部署

本周AI领域重大新闻概览

  • 基础设施投资:Anthropic宣布在美国投资$500亿建设数据中心,用于下一代AI模型开发
  • 国际竞争格局:中国AI初创公司Moonshot声称其最新模型在关键基准测试中超越GPT-5和Claude 4.5 Sonnet
  • 企业AI应用:Kyndryl推出新型代理AI服务,Salesforce以$1亿收购企业搜索初创公司Dot
  • 技术挑战:IBM报告指出企业AI采用的主要障碍是数据孤岛问题而非技术本身
  • 资本市场动态:AI芯片初创公司D-Matrix融资2.75亿,客服AI公司Wonderful完成1亿A轮融资

新平台部署:技术需求与操作流程

  • 部署工具链:使用Docker进行容器化部署,Next.js 16.0.3作为前端框架
    • 关键配置修改:更新next.config.ts设置独立Docker构建
    • 确保start脚本使用PORT环境变量
    • 修正Dockerfile中的端口配置
    • 自动化流程:通过AI助手(Cursor)引导完成整个部署过程,包括:自动生成Dockerfile
    • 修正TypeScript错误
    • 处理环境变量配置
  • 测试验证:部署完成后自动运行容器测试,验证应用可访问性

MCP在新平台部署中的⻆色与功能

  • 核心作用:MCP(Multi-Cloud Platform)作为AI的上下文管理器,自动收集部署所需信息
    • 与传统方式的区别:传统方式:需要手动收集API规范、token等信息并构造提示
    • MCP方式:AI自主决定何时调用MCP获取必要上下文
    • 优势体现:减少人工干预
    • 提高部署效率
    • 降低技术门槛
  • 适用场景:特别适合需要后端API服务的应用部署场景

MCP与API、FastAPI的关联与区别

  • 关系说明:MCP不是FastAPI的替代品,而是API消费者的辅助工具
  • 在ChatGPT克隆项目中,FastAPI提供后端AI服务
  • MCP帮助前端应用获取和使用这些API服务
  • 技术定位:FastAPI:服务提供者(创建API)
  • MCP:服务消费者工具(使用API)
  • 日常开发建议:如果不涉及特定API平台(如AI Builder),则不需要配置MCP

新平台部署后的测试与问题排查

  • 测试流程:构建Docker镜像:docker build -t duckchat:test
  • 运行容器:docker run -d -p 3001:3000 -e PORT=3000 —name duckchat-test duckchat:test
  • 验证访问:curl -s http://localhost:3001 | head -20
  • 检查日志:docker logs duckchat-test | tail -10
  • 常见问题:Docker守护进程未运行
  • 端口冲突
  • 环境变量配置错误
  • 自动修复:AI助手能自动检测并修复大部分配置问题

新平台部署后的持续集成与部署

  • 自动化机制:每次向GitHub仓库推送新提交都会触发自动部署
  • 部署时间:通常在5-10分钟内完成
    • 注意事项:初始部署可能需要更长时间
    • 后续更新部署速度更快
    • 部署成功率与代码质量直接相关

部署状态检查与GitHub集成

  • 状态检查方法:访问GitHub仓库
  • 导航至”Deployments”部分
  • 查看部署状态标记
  • 状态标识:红色叉号:部署失败
  • 绿色对勾:部署成功
  • 当前限制:尚无法直接查看详细的错误信息,需要手动排查

问题回答

部署位置与免费托管期限

  • 部署位置:项目部署在al-builders.space平台而非GitHub,可通过部署门户查看具体信息
  • 托管期限:目前承诺1年免费托管,到期后可申请延期
  • 平台架构:底层基于KOYAK基础设施,类似Cloudflare的服务器提供商
  • 费用承担:平台已为用户承担所有托管费用,无需额外支付

传统部署方式与新部署方式对比

  • 传统方式:需要租用AWS EC2等虚拟机实例
  • 手动上传代码库并配置反向代理、负载均衡
  • 需自行设置监控系统
  • 大量底层调试工作耗时
  • 新方式:使用KOYAK等serverless架构
  • 自动完成代码部署和配置
  • 内置监控和错误处理
  • 部署时间从数小时缩短至30分钟

为什么需要MCP

  • 核心功能:作为API集成层,统一调用不同AI服务
    • 优势:避免为每个AI服务单独注册账号
    • 通过单一API密钥访问多种模型
    • 简化多平台模型调用流程
  • 技术定位:不是服务本身,而是教会Cursor如何使用服务

实验性部署功能介绍

  • 主要特点:直接从Cursor部署项目
  • AI辅助检查代码准备情况
  • 自动创建GitHub开源仓库
  • 一键部署到al-builders.space平台
  • 使用限制:每个用户最多10个服务
  • 部署使用master分支
  • 需要5-10分钟完成配置

平台背后的代码量与优势

  • 代码规模:约20,000行代码支撑整个平台
    • 技术优势:自动化处理部署配置细节
    • 内置错误处理和监控
    • 简化用户操作流程
  • 开发效率:30分钟即可完成传统需要数天的部署工作

与AI初创公司的差异与优势

  • 典型AI初创模式:90%公司仅包装大模型API
  • 添加定制提示词和UI
  • 如作业辅导、宠物顾问等垂直应用
  • 平台差异点:提供完整开发基础设施
  • 支持任意类型应用开发
  • 保留用户创意发挥空间

MCP与Cursor的关系及自定义域名配置

  • 技术关系:MCP指导Cursor使用服务
  • 实际服务由secret manager提供
  • 域名配置:不支持自动配置自定义域名
  • 需通过GoDaddy等注册商手动设置
  • 可咨询Cursor获取配置指导

调试过程中的关键指标与多维度评估

  • 核心指标:任务成功率
  • 响应时间
  • 错误类型统计
  • 评估方法:构建测试数据集
  • 设计多维度评估矩阵
  • 包含安全防护指标
  • 优化流程:通过日志分析定位问题并迭代改进

多个API密钥的原因与模型选择依据

  • 多密钥原因:密钥显示后难以检索
  • 防止误删导致服务中断
  • 不同项目隔离需求
  • 模型选择:Cursor Composer1为首选(性能优于Claude4.5)
  • Kodak5.1处理复杂场景
  • 根据任务特性切换模型

不同模型切换的必要性

  • 切换原因:各平台服务覆盖不同(如搜索优选Tavily)
  • 模型特性差异(Gemini不喜搜索而DeepSeek擅长)
  • 构建多Agent系统优势
  • 实践建议:了解各模型”性格”特点
  • 建立模型能力矩阵
  • 设计智能路由机制

传统方法提取论文信息

传统提取方式与新方式对比

  • 传统方式:需要手动编写JavaScript代码在浏览器控制台运行
  • 新方式:使用Cursor等AI工具直接提取信息
  • 关键区别:传统方式需要理解网页结构和编程知识,而新方式更智能高效

浏览器作为编程环境

  • 本质:浏览器本身就是一个编程环境
  • 交互原理:GUI与HTML代码存在一对一映射关系
  • 操作验证:修改网页元素会实时反映在代码中

开发者工具的使用

  • 打开方式:右键点击页面元素选择”检查”
    • 核心功能:Inspector标签:查看和修改HTML/CSS
    • Console标签:运行JavaScript代码
  • 实用技巧:通过复制网页元素代码作为AI提示的基础

JavaScript代码提取论文信息

  • 提取目标:论文标题、作者列表和PDF链接
    • 代码逻辑:通过CSS选择器定位元素
    • 遍历DOM树获取相邻节点信息
    • 处理相对路径转换为绝对URL
  • 数据结构:将结果组织为包含title、authors、pdfLink字段的对象数组

开发者工具控制台的使用

  • 操作步骤:打开开发者工具(Console标签)
  • 粘贴JavaScript代码
  • 按Enter执行
  • 输出格式:表格视图(console.table)
  • JSON字符串(JSON.stringify)

代码复制粘贴与结果查看

  • 执行效果:即时显示提取的论文信息
  • 数据验证:检查输出是否包含完整标题、作者和PDF链接
  • 结果导出:可直接复制JSON格式数据用于其他用途
  • 关键要点:提供足够上下文信息是传统方法成功的关键

使用Cursor提取论文信息

Cursor提取论文信息的方法

  • 操作流程:直接将网页内容复制粘贴到Cursor中,它会自动解析网页结构并提取信息
  • 输出格式:Cursor会将提取的信息整理成JSON格式,包含论文标题、作者列表和PDF链接
  • 自动化程度:Cursor会尝试理解网页结构,自动编写代码并执行提取工作

Cursor提取论文信息的原理

  • 工作方式:Cursor会检索网页内容并将其放入上下文窗口进行分析
  • 技术基础:使用JavaScript解析网页DOM结构,通过p元素等HTML标签定位关键信息
  • 智能特性:具备自我修正能力,当发现提取结果不完整时会自动尝试修复

加速Cursor提取论文信息的方法

  • 粘贴技巧:使用Shift+Control+V(Windows)或Shift+Command V(Mac)绕过Cursor的自动链接处理功能
  • 效率优化:直接粘贴纯文本内容比让Cursor自行获取网页内容更快
  • 文件保存:提取结果会自动保存为”CVPR_papers.json”文件

Cursor提取论文信息的效果

  • 提取内容:成功获取论文标题、作者信息和PDF链接
  • 错误处理:能够识别”papers with PDF 0”等异常情况并自我修正
  • 优势体现:虽然首次提取可能不完全准确,但具备持续改进的能力

  • 典型输出:{ “title”: “Deterministic Image-to-Image Translation via Denoising Brownian Bridge Models with Dual Approximators”, “authors”: “Bohan Xiao, Peiyong Wang, Qisheng He, Ming Dong”, “pdfLink”: “https://[domain]/content/CVPR2025/papers/Xiao_Deterministic_Image-to- Image_Translation_Via_Denoising_CVPR_2025_paper.pdf” }

网络请求

网络请求与浏览器开发者工具

  • Network面板功能:在浏览器开发者工具中,Network面板用于监控所有网络请求活动
    • 操作步骤:打开开发者工具(F12)
    • 切换到Network选项卡
    • 刷新页面或执行操作以捕获网络请求
  • 关键观察:当滚动页面时,浏览器会发起新的网络请求获取资源

网络资源获取与链接查看

  • 资源类型:可以观察到网页、图片、视频等多种资源的请求
    • 请求分析:每个请求显示状态码、类型、大小等信息
    • 点击请求可查看详细请求头和响应头
  • 实际应用:通过分析这些请求,可以了解网站加载的资源构成

网⻚、图片、视频资源的请求

  • 请求机制:浏览器在滚动时会动态请求新内容
    • 资源识别:图片通常以.jpg/.png结尾
    • 视频资源可能有.mp4/.webm等扩展名
    • API请求通常是XHR/Fetch类型
  • 过滤技巧:可以使用过滤器只显示特定类型的资源

浏览器开发者工具的实际应用

  • 自动化优势:可以避免手动下载每个资源
    • 操作流程:打开开发者工具Network面板
    • 过滤只显示图片请求
    • 右键点击请求可复制链接或直接下载
  • 高级技巧:可以编写脚本批量处理这些请求

使用Git钩子自动化更新Wiki⻚面

  • 问题背景:保持Wiki与代码同步是常见挑战
    • 解决方案:利用Git钩子(pre-commit/post-commit)触发自动化流程
    • 编写脚本调用API分析代码和Wiki差异
    • 自动更新不同步的内容
    • 实现建议:使用Confluence搜索功能定位相关页面
    • 通过AI辅助识别需要更新的内容
    • 设置合理的更新频率避免过度请求

网络爬虫

举例查找网络请求

  • 查找API请求步骤:打开Chrome开发者工具(F12)
  • 导航到Network选项卡
  • 刷新页面查看所有网络请求
  • 过滤XHR/Fetch请求查找关键API
  • 检查请求头和响应内容
  • 关键API特征:通常包含”web_profile_info”路径
  • 返回JSON格式数据
  • 需要特定请求头如”x-ig-app-id”

网络爬虫介绍

  • 基本原理:逆向工程:通过分析浏览器与服务器的交互来理解API结构
  • 数据获取:主要获取JSON格式的结构化数据而非原始HTML
  • 请求模拟:需要复制浏览器请求的所有必要头部信息
  • 注意事项:服务条款:自动化请求可能违反Instagram服务条款
  • IP限制:频繁请求会导致IP被封禁
  • API变动:Instagram会定期更改API端点

网络爬虫继续

  • 图片获取技巧:需要滚动页面加载所有图片
  • 网络选项卡中过滤img类型请求
  • 图片URL通常包含时间戳和唯一ID
  • 常见问题:第一页限制:未滚动会导致只获取首屏图片
  • 动态加载:部分图片需要交互才会加载
  • 格式识别:注意区分jpg/png/webp等格式

网络爬虫方法

方法1

  • HAR文件使用:记录所有网络活动
  • 可通过开发者工具导出
  • 包含请求/响应完整信息
  • parse_har_for_images函数介绍

  • 函数功能:
  • 从HAR提取图片URL
  • 可选下载图片到本地
    • 保存URL列表到文本文件代码要点:
  • 使用json模块解析HAR
  • 过滤mime_type包含”image/”
  • 处理文件名缺失情况
  • 异常处理网络请求

方法2

  • 替代方案:使用浏览器插件直接下载
  • 编写JavaScript片段在控制台运行
  • 利用第三方库如InstagramPy
  • 效率比较:HAR方法适合批量处理
  • 直接请求更适合特定目标
  • 插件方式最简便但灵活性低

书签小程序

项目背景

  • 项目类型:接下来的两个项目都是关于书签小程序开发
  • 开发环境:使用浏览器作为主要开发工具,涉及网络请求监控功能

技术实现

  • 核心功能:从Instagram页面提取图片URL通过监控网络请求获取图片资源链接
  • 对获取的URL进行去重和排序处理
  • 代码逻辑:使用正则表达式处理URL前缀
  • 添加https://前缀校验
  • 使用集合(Set)数据结构自动去重

浏览器依赖问题

  • 环境要求:项目需要浏览器环境支持
  • 课程默认使用特定浏览器进行开发
  • 注意事项:如果未使用指定浏览器,可能无法正常访问浏览器API
  • 建议在实际开发前先测试环境兼容性
  • 解决方案:最佳实践是直接尝试运行代码验证环境是否支持
  • 课程确认浏览器环境是必要前提条件

浏览器使用

Chrome浏览器自动化操作

  • 自动化控制提示:Chrome浏览器被自动化测试软件控制时会显示提示信息
  • Cookie处理特性:当关闭浏览器时,所有cookies会被清除,可能导致无法保留用户配置
  • 网络请求监控:可以通过开发者工具的网络选项卡(Network tab)监控图片URL请求

Instagram图片URL提取方法

  • 操作步骤:导航到目标Instagram个人主页(如https://www.instagram.com/grapeot/)
  • 打开开发者工具的网络选项卡
  • 滚动页面5秒左右
  • 刷新页面后再次滚动
  • 从网络请求中收集所有图片URL
  • 注意事项:页面加载后部分图片会立即显示
  • 需要多次滚动和刷新才能获取完整图片集
  • 可以执行JavaScript辅助收集
  • 文件保存:将收集的图片URL保存到文本文件(如image_uris.txt)
  • 文件会包含类似格式的URL:https://scontent-sea5-1.cdninstagram.com/xxx.jpg

搜索引擎切换技巧

手动切换方法

  • 复制查询步骤:在Google搜索结果页面,直接复制地址栏中的搜索关键词(Ctrl+C或右键复制)
  • 新引擎访问:在浏览器新建标签页输入duckduckgo.com或直接访问其主页
  • 粘贴执行:将复制的关键词粘贴到DuckDuckGo搜索栏执行新搜索

自动化工具方案

  • 隐私扩展:推荐安装DuckDuckGo Privacy Essentials扩展(支持Chrome/Firefox/Edge),可添加快捷搜索按钮
  • 搜索引擎切换器:使用Search Engine Switcher类扩展可实现右键菜单快速跳转
  • 默认设置修改:在浏览器设置中将默认搜索引擎改为DuckDuckGo(路径:Chrome设置>搜索引擎>管理搜索引擎)

高级技巧

  • 自定义关键词:在Firefox浏览器中设置自定义搜索关键词(通过about:preferences#search配置),例如设置”ddg”作为DuckDuckGo的触发词
  • 地址栏直搜:在浏览器地址栏直接输入”ddg 搜索词”即可跳过Google直接获取DuckDuckGo结果
  • 隐私替代方案:SearxNG或Startpage等隐私搜索引擎也提供类似的一键切换功能

注意事项

  • 操作耗时:手动切换方法约需10-15秒完成全过程
  • 功能限制:目前主流搜索引擎不提供官方的一键切换按钮
  • 用户建议:可通过Google帮助论坛反馈该功能需求以促进改进

Google开发者工具

Google开发者工具基础应用

  • 网络请求监控:在开发者工具的Network标签中,可以监控所有网络请求,包括图片URL的获取。通过刷新页面和滚动操作,可以捕获动态加载的内容。
  • 图片URL提取:在Network标签中筛选图片请求,记录所有加载的图片URL,可以用于数据收集或分析。

  • 开发者工具界面:包含Console、Debugger、Network、Style Editor等多个功能模块,用于调试和分析网页内容。
  • 元素检查:通过Inspector可以查看和修改网页的HTML和CSS,实时预览效果。

自定义浏览器快捷方式和关键词

  • 自定义搜索关键词:在Firefox中,可以通过about:preferences#search设置自定义搜索引擎,并分配关键词,如”ddg”用于快速跳转到DuckDuckGo。
  • 快速跳转:在地址栏输入关键词加查询内容,如”ddg your keyword”,可以直接跳转到指定搜索引擎的搜索结果页面。

  • 书签脚本:通过JavaScript代码创建书签脚本,实现一键跳转功能。代码需要精确复制,确保功能正常。
  • 跨浏览器兼容:书签脚本在iOS Safari和Chrome等移动浏览器中同样适用,可以添加到分享菜单中方便使用。

书签脚本的创建与应用

  • 脚本功能:书签脚本可以自动获取当前页面的搜索查询,并重定向到其他搜索引擎,如从Google跳转到DuckDuckGo。
  • 使用方法:将JavaScript代码保存为书签,点击书签即可执行脚本,无需手动复制粘贴查询内容。

  • 工作原理:脚本通过解析当前页面的URL或搜索框内容,提取查询关键词,然后构造目标搜索引擎的URL并跳转。
  • 错误处理:脚本会检查当前页面是否为搜索结果页,避免在非搜索页面误触发跳转。

计算Pi与绘制圆形的实践

  • 绘制圆形:通过Canvas API在网页上绘制圆形,可以用于计算Pi值的实验。
  • 计算Pi:通过测量圆形的周长和直径,可以近似计算Pi值,但手动绘制难以达到高精度。

例题1:编写JavaScript程序绘制完美圆形

  • 题目解析:方法一:通过上下文工程向ChatGPT提问,获取绘制完美圆形的JavaScript代码。
  • 方法二:使用第二个思维代理(如DeepSeek或Gemini)编写程序,利用其互联网访问能力获取相关资源。
  • 实现步骤:代码需要在浏览器控制台中运行,通过Canvas API绘制完美圆形。
  • 注意事项:确保代码兼容不同浏览器,避免因浏览器差异导致绘制失败。

编写JavaScript程序画画

绘制完美圆形的JavaScript实现

  • 基本参数:圆心坐标:通过centerX和centerY定义
  • 半径:radius参数控制圆的大小
  • 起始角度:startAngle默认为0(3点钟方向),使用弧度制
  • 结束角度:endAngle设为2휋表示完整360度圆
  • 绘制命令:路径绘制:ctx.beginPath()开始新路径
  • 圆弧定义:ctx.arc(centerX, centerY, radius, 0, 2*Math.PI)
  • 描边绘制:ctx.stroke()绘制轮廓
  • 填充绘制:将ctx.stroke()替换为ctx.fill()可绘制实心圆

浏览器环境的重要性

  • 环境要求:必须使用浏览器:JavaScript绘图需要在浏览器环境中执行
  • 开发者工具:通过F12打开控制台执行代码
  • 页面导航:需要访问特定页面(如https://yage.ai/genai/pi.html)进行绘图
  • 执行流程:代码识别:系统会自动识别页面中的绘图代码
  • JavaScript执行:在控制台直接运行绘图脚本
  • 精度验证:绘制后可通过页面计算功能验证圆形精度(可达98.8%)

完整绘图代码实现

  • 代码结构:创建画布:const canvas = document.createElement(‘canvas’); canvas.width = 300; canvas.height = 300;
  • 样式设置:canvas.style.border = ‘2px solid black’; canvas.style.position = ‘fixed’; canvas.style.backgroundColor = ‘white’; document.body.appendChild(canvas);
  • 绘图上下文:const ctx = canvas.getContext(‘2d’);
  • 圆形属性:const centerX = canvas.width/2; const centerY = canvas.height/2; const radius = 150;
  • 绘制执行:ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2*Math.PI); ctx.strokeStyle = ‘red’; ctx.lineWidth = 5; ctx.stroke();
  • 常见问题:变量重复声明:注意避免重复声明canvas变量
  • 画布冲突:执行前检查并移除已存在的画布元素
  • 精度优化:使用360个均匀分布的点可获得最佳精度

开发者工具使用技巧

  • 操作步骤:打开开发者工具(F12或Ctrl+Shift+I)
  • 切换到Console标签
  • 粘贴并执行绘图代码
  • 点击”Calculate Pi”按钮验证绘制精度
  • 调试技巧:错误处理:根据控制台报错信息调整代码
  • 元素检查:使用Inspector查看画布元素属性
  • 性能优化:对于复杂绘图可切换到Grok模式加速执行

项目总结

  • 技术优势:无需安装:完全基于浏览器内置功能
  • 快速原型:适合快速演示和验证
  • 高精度:数学计算精度可达98.8%
  • 应用场景:教学演示:直观展示几何图形绘制
  • 算法验证:测试图形相关算法的准确性
  • 交互实验:结合用户输入创建动态图形

使用鼠标方法

  • 传统方法:过去使用铅笔工具自动化GUI绘制圆形需要大量工作
    • 现代方法:通过光标方式可以更高效地完成绘图任务这种方法在几个月前还无法实现
    • 展示了生成式AI的强大能力
    • 案例对比:农场项目中传统绘图方法耗时耗力
    • 新方法显著提升了工作效率和精确度

技术实现要点

  • 核心优势:简化了复杂的GUI操作流程
  • 实现了更直观的人机交互方式
  • 应用场景:适合需要精确绘制的图形设计工作
  • 特别适用于快速原型开发
  • 发展历程:从传统工具到现代AI辅助工具的演进
  • 技术突破发生在最近几个月内

使用光标方法

⻆色扮演心理治疗师项目介绍

  • 项目目标:通过微调AI模型使其能够扮演心理治疗师角色,基于数百个真实治疗对话视频脚本进行训练
  • 核心挑战:需要同时保证回答内容的专业性和表达方式的共情性
  • 数据准备:收集整理治疗师与来访者的对话脚本作为训练素材

微调模型的标准结构

  • 结构化输出:微调主要规范回答的框架结构而非语气风格
    • 两阶段优化:先通过提示工程测试基础模型表现
    • 仅当必要时才进行微调
  • 内容与语气分离:建议先确保内容质量,再调整共情表达

微调GPT-4o的步骤与成本

  • 操作流程:准备符合格式要求的训练数据
  • 通过OpenAI API上传数据集
  • 一键启动微调过程
  • 成本估算:GPT-3.5/4小型微调约需几美元
  • 大规模数据训练约100美元左右
  • 优势:无需编写代码,操作门槛低

微调开源模型的步骤与成本

  • 替代方案:使用LoRA技术微调开源模型
    • 技术栈:需要GPU计算资源(可云端租赁)
    • 基于开源库实现
  • 成本优势:相比商业API可能更经济
  • 操作建议:参考官方教程,可通过AI辅助生成代码

例题1:如何评估治疗师的性能

  • 评估难点:共情能力等主观指标难以量化
    • 解决方案:维度分解:将”好治疗师”拆解为多个可测量维度
    • 标准化评估:设计具有一致性的评分量表
    • 双轨验证:
  • 邀请领域专家参与评估
  • 使用AI模型作为辅助评委
  • 关键原则:确保评估标准的客观性和可重复性
  • 实施建议:无需专门训练评估模型,直接使用现有大语言模型进行多维度评分

问答环节

GPT-4o的微调与使用成本

  • 微调可用性:GPT-4o微调现已面向所有付费开发者开放
  • 训练成本:每百万token训练费用为$25
  • 推理成本:输入token每百万3.75,输出token每百万15
  • GPT-4o mini优惠: 9月23日前每日提供200万免费训练token

例题1:如何解决复杂问题

  • 汽车技术类比:汽车基础技术百年未变,但通过工程师持续优化细节实现进步
  • 说明复杂问题需要分解为多个小问题逐步解决
  • 解决策略:迭代优化:通过多次小改进逐步接近最优解
  • 多方案并行:不存在”银弹”式解决方案,需要多角度尝试
  • 持续改进:类似汽车工程师不断优化各个子系统

基础模型的定义与历史背景

  • 历史转折点:2017年前:NLP领域主要使用LSTM等串行处理模型
  • 2017年后:Transformer架构实现并行计算,推动GPT/BERT等模型发展
  • 核心特征:并行处理能力:适合GPU加速是大模型发展的关键
  • 两阶段训练:先预训练再微调的范式成为标准
  • 数据利用:深度学习模型不会出现传统算法的数据饱和问题

例题2:如何在研究中使用大型语言模型或AI

  • 应用方法:学习工具:用于建立领域直觉和评估标准
  • 验证工具:通过解决简单问题验证理解正确性
  • 反馈循环:快速获得问题解决效果的反馈
  • 研究场景:数学证明等无明确方向的问题
  • 需要探索性思考的开放性问题
  • 领域知识不足时的学习辅助

例题3:如何防止AI产生不真实的信息

  • 应对策略:信息补充:提供足够背景知识减少幻觉
  • 验证机制:建立结果验证标准和方法
  • 领域适配:数学等严谨领域需特殊处理
  • 局限性:复杂数学证明验证仍具挑战性
  • 需要领域专家级别的验证能力

例题4:如何验证AI在数学和物理问题上的正确性

  • 验证方法:分解验证:将复杂问题分解为可验证的子问题
  • 模拟测试:物理问题可通过仿真验证
  • 逆向验证:类似质因数分解,正向困难但验证简单
  • 应用案例:DSL翻译验证:通过物理模拟检测错误
  • 数学证明:建立中间结论验证点
  • 工程问题:设置多维度评估指标

知识小结分类 知识点 核心内容 技术工具/方法 应用场景AI开发 AI Builder 提供统一API调用多模 MCB配置、API密钥 快速构平台 Space功能 型服务 管理 建AI应用开发演 聊天机器人克 5分钟构建Charge BD Cursor+MCB集成 产品原示 隆 界面 型开发模型对 多模型协作 Gemini与DeepSeek 多代理系统架构 复杂任比 特性互补 务处理网页数 CVPR论文采 浏览器控制台JS脚本 DOM解析、JSON 学术数据提取 集 格式化 据整理自动化 完美圆形绘制 Playwright视觉验证 误差率控制(98.8%) UI测试测试 用例部署流 应用发布 自动Docker化部署 GitHub+Koyak集 生产环程 成 境发布提示工 错误诊断方法 增强错误日志可见性 上下文工程策略 调试优程 化模型微 角色扮演AI 治疗师语气风格训练 开源模型LORA微调 专业服调 务场景评估体 多维度评估 内容质量+情感一致性 分解式评分矩阵 AI行为系 验证开发范 传统vsAI辅助 人工编码(1周) vs AI生 Cursor实时迭代 开发效式 成(30分钟) 率对比