在B站看到了一个功能简单，但很有趣的小应用：实时检测电脑网页状态，联动AI给出反馈，当你工作去刷小红书时，会跳出来一个“人”犀利的“骂醒你”。
如果你一直在工作，AI也会跳出来，来一波彩虹屁夸夸你。
视频来源@UP主 智码侃侃
看起来很好玩，但原作者未开源，所以我就根据原作者分享的搭建思路，复刻了这个小产品。自己玩了一天，工作的时候“她”突然蹦出来来了一顿夸夸。
嘿，你别说，这感觉还真的挺奇妙的~ 我小子不能吃独食，马上做成教程分享给大家一起来玩。看看初步效果：
她会根据你浏览的不同网页和内容做出不同的反应和判断，机器人的声音、语言、形象、脾气都可以自由更换，你可以任意的把角色改成你喜欢的人物，只需要在配置文件中修改一下即可。我还做了一个川普的，让前总统为我监工。
前些天跟朋友一起学习了豆包MarsCode AI 编程云课堂的课程，了解了用法，而且豆包MarsCode是完全免费的，刚好拿这个需求来试玩一下。
因为有了前人的探索，所以我复刻起来就显得更加容易。整个过程一行代码没写，全靠AI完成。本篇，把我复刻的过程和项目代码分享给小伙伴们。
项目思路：
1、 使用浏览器插件监控网页活动
2、 本地服务器调用大模型API
3、 把文字转语音，把gif和音频合成视频
4、 桌面客户端显示最终的透明视频
AI开发/部署教程
{浪漫幻想，月}
首先我们需要装一个VS code，然后安装豆包MarsCode，因为无论是你想自己复现，还是要修改我的项目文件，都会需要它的帮助。
1.首先下载Vs code：
https://code.visualstudio.com/Download
2.注册豆包MarsCode：
3.进入这个网址：
https://www.marscode.cn/home?goInstall=true
点击“立即安装”，他会直接帮你打开VS code，安装豆包MarsCode插件。
安装完成后，登录刚才注册的账号。 点击右上角就可以展开AI对话框了。
4.点击左侧的“应用拓展” ，在输入框中输入：“中文”，安装中文插件。
5.我们需要新建一个文件夹，来存放项目文档。点击“打开文件夹”选择新建的文件夹即可开始让AI来帮我们完成需求了。
我是这么给AI进行交互的，首先我给他发了一个prompt
# Role
你是一名极其优秀具有20年经验的产品经理和精通所有编程语言的工程师。与你交流的用户是不懂代码的初中生，不善于表达产品和代码需求。你的工作对用户来说非常重要，完成后将获得10000美元奖励。
# Goal
你的目标是帮助用户以他容易理解的方式完成他所需要的产品设计和开发工作，你始终非常主动完成所有工作，而不是让用户多次推动你。
在理解用户的产品需求、编写代码、解决代码问题时，你始终遵循以下原则：
## 第一步
- 当用户向你提出任何需求时，你首先应该浏览根目录下的readme.md文件和所有代码文档，理解这个项目的目标、架构、实现方式等。如果还没有readme文件，你应该创建，这个文件将作为用户使用你提供的所有功能的说明书，以及你对项目内容的规划。因此你需要在readme.md文件中清晰描述所有功能的用途、使用方法、参数说明、返回值说明等，确保用户可以轻松理解和使用这些功能。
## 第二步
你需要理解用户正在给你提供的是什么任务
### 当用户直接为你提供需求时，你应当：
- 首先，你应当充分理解用户需求，并且可以站在用户的角度思考，如果我是用户，我需要什么？
- 其次，你应该作为产品经理理解用户需求是否存在缺漏，你应当和用户探讨和补全需求，直到用户满意为止；
- 最后，你应当使用最简单的解决方案来满足用户需求，而不是使用复杂或者高级的解决方案。
### 当用户请求你编写代码时，你应当：
- 首先，你会思考用户需求是什么，目前你有的代码库内容，并进行一步步的思考与规划
- 接着，在完成规划后，你应当选择合适的编程语言和框架来实现用户需求，你应该选择solid原则来设计代码结构，并且使用设计模式解决常见问题；
- 再次，编写代码时你总是完善撰写所有代码模块的注释，并且在代码中增加必要的监控手段让你清晰知晓错误发生在哪里；
- 最后，你应当使用简单可控的解决方案来满足用户需求，而不是使用复杂的解决方案。
### 当用户请求你解决代码问题是，你应当：
- 首先，你需要完整阅读所在代码文件库，并且理解所有代码的功能和逻辑；
- 其次，你应当思考导致用户所发送代码错误的原因，并提出解决问题的思路；
- 最后，你应当预设你的解决方案可能不准确，因此你需要和用户进行多次交互，并且每次交互后，你应当总结上一次交互的结果，并根据这些结果调整你的解决方案，直到用户满意为止。
## 第三步
在完成用户要求的任务后，你应该对改成任务完成的步骤进行反思，思考项目可能存在的问题和改进方式，并更新在readme.md文件中
## 注意：
- 你面对的是一个没有任何编程基础的小白用户
- 请不要提供假设信息，如果你需要某些文件才能确定答案，请告知用户应该提供哪个文件里的哪些信息。
- 当要求编写注释时，请编写详细的注释，注明每一行代码的运行原理和目的。
- 使用中文进行对话
然后开始阐明我的需求：
我想做一个windows的电脑屏幕桌面提醒工具。有以下功能：
他可以实时检测我的网页浏览的状态和信息，然后使用网页的内容和信息发送给ChatGPT，然后经过ChatGPT判断后输出回答，收到回复后使用本地tts把回答转成语音，然后把语音和我提供的git图转化成视频，最后使用FFmpeg把绿幕变成透明通道，最后使用Electron播放视频。
最终效果是，当我浏览网页时，定时触发与chatgpt的交互，在电脑屏幕上显示一个人物形象，并用语音说出chatgpt的回复内容
现在已经有人完成了这个功能，使用的方案是浏览器插件来监测网页的活动，使用ChatGPT来根据检测结果输出文字，然后调用本地tts转语音，使用Flask创建本地服务器中转语音文件，然后使用AniPortrait把语音和图片转化成视频，然后使用Remove-Video-Background把视频转成绿幕背景，最后使用FFmpeg把绿幕变成透明通道，最后使用Electron播放视频
我要完成这个项目，请你帮我列出整个项目的实施计划，并协助我完成。
大家可能疑惑，为什么第二行写的那么详细，作为小白我怎么能提前设计好实现方式呢？其实第二行中的实现逻辑，就是开头原项目分享的实现路径。在我们做一个项目时，先去收集一些必要信息是很重要的前置步骤。
我们前期要尽可能的提供丰富、清晰、有效的信息。即使一开始可能是有误的，后边持续更正也比一开始需求不清晰要好。
随后就是按照AI的指令，插入文件或者修改代码。通过不断的对话完成整个程序的调试。
大家有兴趣的可以自己尝试复刻一下，我就不在文章中全部展示了。
以下是我让AI写完的项目文件，大家可以直接在这个文件的基础上进行更改。如果你想要改人物、改声音，直接通过AI对话，让AI指导你完成即可。
另外，豆包MarsCode中的功能如果善用会提高不少效率，完全没有开发基础或者没有用过AI编程。强烈建议看一下 豆包MarsCode AI编程云课堂 的课程。
其中@大圣讲授的《从零开始理解AI编程》，还有@ 云中江树分享的《 股市预测助手 》 我都十分收益， 课程还会手把手带做有趣的应用，主要**全程免费！！！**
本周四就有一节大咖来讲的直播课，可以先预约一下：
https://zjsms.com/iAdbU8aX/ （点击底部的阅读原文也可跳转。）
@云中江树 股价预测分享
完整项目文件，飞书上点击下方直接下载。
公众号查看的，需要在私信中回复：“DP”获取下载文件。
使用方式
1、确保你有一个python 3.8以上版本的环境。（如果没有，直接问AI进行安装）
2、在DP目录下， Shift+鼠标右键，打开Powershell窗口，打开命令行，输入以下代码，安装依赖项目。
pip install -r server/requirements.txt
如果你发现任何报错，先尝试开关你的网络代理，重试。如果不行，把报错代码粘贴给AI，让他帮你解决。
3、 打开sever文件夹下的config.py， 填写配置项，本项目中共有两处需配置：
3.1 AI对话接口配置，此处是使用的标准的OpenAI格式接口，如果你有ChatGPT的API密钥，可以直接使用。
如果你没有，可以使用FastGPT的在线版，创建一个应用发布为API，把创建的API KEY填入即可，有免费额度，足够体验使用。
国内在线版地址：https://cloud.fastgpt.cn/
3.2 讯飞TTS是在线合成语音服务，官方送了个人免费的5万条额度，完全足够使用了。
讯飞地址：https://console.xfyun.cn/services/tts
4、打开你的“google”浏览器，在浏览器中输入：
chrome://extensions/
点击左上角 “加载已解压的扩展程序”按钮
5、选中“browser-extension”，点击确定，然后就看到，插件中有了“智能桌面助手1.0”了
安装好浏览器插件之后，我们来一一启动服务。
6、Shift+鼠标右键，在DP文件夹下打开Powershell窗口
7、在命令行中输入：
python -m server.app
8、然后 安装 Node.js， 访 问 https://nodejs.org/， 下 载并安装 LTS 版本， 安 装时选择默认选项即可。
9、打开desktop-app文件夹，在这个文件夹下也打开一个Powershell窗口，一行一行依次粘贴输入：
npm config set registry https://registry.npmmirror.com
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install
10、等待下载完成后，再输入：
npm start
有任何报错，直接把报错粘贴给豆包MarsCode帮你解决。
如果7和10两项正常启动，那么项目就已经安装完成了。你可以打开一个浏览器，点击测试一下。
（此项目每分钟发送一次浏览情况到ChatGPT，提醒一次后，静默1分钟再发送。测试按钮，点击就立即发送一次浏览情况到ChatGPT，方便调试。）
如果你的屏幕中出现了她，恭喜你完成了。
如果你想修改人物形象，音色等内容，尝试下让豆包MarCode帮助你完成，祝你玩的愉快~
最后，再次给小伙伴们强烈推荐下，字节官方的豆包MarsCode AI编程云课堂，是国内少有的 大厂背书 、嘉宾 水平够硬 ， 面向小白 教学的 免费课程 了。
AI Code发展迅猛，无论以后你使用哪个AI Code工具，现在了解和学习都是十分有益且必要的。 本周四晚8点，会直播教学《如何快速制作个人社交名片》，大咖手把手教学不容错过。
现在点击文末左下角的 阅读原文 可直接预约直播教学。
以上，既然看到这里了，喜欢就随手点个赞、在看、转发三连吧，感谢你的支持，再会~
往期推荐