一、前言 前前后后的给小落同学加了许多的MCP。 但是这些功能之前一直在我本地的小落同学上跑，部署在阿里云ECS上的小落同学因为买的ECS配置太低（99元一年的2H2G特惠主机）跑不动，这个周末在家没事做，想想是不是干脆用frp让公网上的小落同学也可以把这些MCP也都给支持起来。 所以这个周末的任务就是：把原先一直在我本地电脑上跑的小落同学的MCP Server部署到公网，并让阿里云上的小落同学来访问和使用。 目前小落同学支持的MCP包括： 既然想了，那不管有没有人用小落同学，咱先给它配上去再说。 二、MCP Server可配置化 1. 新增ODDMCP配置 在小落同学的.env环境变量里新增mcp相关环境变量配置 2. 同步调整MCP Server和MCP Client中与MCP相关的配置 把原先固定的localhost的地址，改成从环境变量中获取。 1）代码：oddmcp_server.py 2）代码：oddmcp_client.py 3）代码：oddmcp_status_callback.py 4）oddagent 同步的时候发现几个新的MCP Server功能还没同步到小落同学上的oddagent，也顺手改了一下。 三、利用frp来做跳转 ODDMCP用了两个端口，一个是MCP Server所绑定的9600端口，另一个是每个在MCP运行过程中的一些实时进展状态回调时所使用的redis。 1. 客户端配置 代码：frpc-https.toml 杀掉并重新启动 frpc 2. 服务端口配置 客户端修改并新增了这两个端口，并且重启了frpc之后，先到ECS服务器端查看一下，端口状态是否都正常。 如果都有正常绑定了，说明frp已经可以工作了。 需要注意的是：服务绑定地址应该是 0.0.0.0:9600，而不是 127.0.0.1:9600（后者只允许本地访问）。 四、阿里云ECS配置 配置好frp后，还需要让阿里云ECS放行这两个端口。 1. 修改ECS安全组配置 打开浏览器，登录阿里云控制台，进入安全组配置，并在其中新增、放行9600和63579这两个TCP的端口。 阿里云控制台上的功能比较多，不常用的话，可能要找地址找半天。由于忘记功能名字了，搜索也不好搜索，呵呵。 为方便记录，特把安全组的链接地址也贴一下：https://ecs.console.aliyun.com/securityGroup/region/cn-shanghai 2. 放行防火墙 打开xshell，ssh登录上ECS服务器，查看是否放行 9600/tcp 如果是centos/openEuler操作系统： […]
ProjectXL
一、前言 昨天用OpenCode Desktop做了下书签管理的SKILL，今天就想去看看这个“早就想去看看的”、“国内第一个支持SKILL”的扣子。 于是，今天我就把昨天在Open Code Desktop上做的事情原封不动的在扣子上做了一遍。下面的完整的过程。 具体的SKILL的原理什么的我就不讲了，网上随处可见，咱们来实操。 为省流，直接上结论： 总的来说，单纯对于我这个书签管理功能来说，生成的SKILL的确还可以，但是SKILL描述和references还是需要自己仔细分析一下改一下。 除此之外，简单列一下我个人的一点经历和看法 也为扣子加一把油，为国内的开发者搭建了一个更好的平台和环境。 二、在扣子上创建skill 1. 创建skill 进入扣子网站（ www.coze.cn ），输入提示词如下： 快速出了一个版本，但是自测验证报错，但是扣子会自己修改代码重测。a little monments later（约二十来分钟），终于完成。 2. 上传skill 作为一个懒人，只想动嘴，不想动手，所以第一个尝试是让扣子直接把它写好的这个skill安装到扣子上。 1）自动安装：失败 但是，扣子实际上只是给了一个帮助文档，还是让我自己上传安装。 那好吧，那我先下载一下扣子生成的skill及代码。 2）手动安装：成功 下载下来后，到扣子技能商店：https://www.coze.cn/skills?tab=my 然后点击右上角的“创建技能”，把下载下来的这个zip文件上传，扣子就会自动按照标准流程帮你适配这个 Skill。 但是扣子会将原先的 MCP 服务器实现重写为纯函数式工具，这说明扣子不会在上面自己开一个MCP Server来让Skill调用。 3. 部署Skill 点击右上角的“部署”按钮，跳过变量设定，秒级完成部署。 三、Skill的使用 通过上面的步骤，我的扣子版的书签管理Skill就完成了，并且可以直接在扣子上使用了。使用方法也很简单，在聊天框里输入 @ ，然后在跳出来的选项框里选择技能，技能列表里会包括所有你安装的和创建的技能列表，在那里选择“书签管理技能”。 四、进一步完善 希望收藏下来的文章的可以按我的要求来命名文件，保存的路径，以及图片的路径，那就让它再来改一下吧。 最后，扣子再输出了一版SKILL，并简单测试了一下包括新浪新闻，今日头条，CSDN，博客园，知乎等网站的文章都可成功抓取。收工！ 五、完整代码 考虑到未来SKILL无限的可能性，我准备再建一个仓库，然后把一些自己实现的SKILL都放到这个仓库里。今天的扣子版本的书签功能的SKILL是第一个。 仓库地址： https://github.com/oddmeta/odd-skills 感兴趣的大佬可以直接到这里下载完整的代码。也可私信我，我发你。
一、前言 在过去的一段时间里，我花费了大量精力钻研three.js技术，期望能将小落同学的形象塑造为3D虚拟人，实现与用户的交互功能。为此，我对vrm/obj/fbx模型进行了反复调整，还结合mixamo的动作资源进行适配。然而，无论我如何努力，始终无法达到理想的效果。在实际展示中，模型与动作之间总是存在各种问题，比如部分动作出现模型撕裂现象，或是动作呈现出不自然的颤抖，这让我十分苦恼。经过五一假期的深思熟虑，我决定暂时搁置3D方案，转向2D领域寻求解决办法。这意味着之前为three.js所做的模型构建、动作设计、表情制作等工作可能要暂时搁置，虽然心中满是遗憾，但也只能期待未来有机会能让它们重新发挥作用。 二、选定2D解决方案 对于2D虚拟人的实现，其实有多种方案可供选择。在大型商业化直播场景中，许多虚拟人采用VTuber的解决方案。不过，该方案对硬件配置要求较高，以我目前使用的每年仅需99元的阿里云ECS服务器而言，难以满足其运行需求。综合各方面因素考虑，我最终选定了Live2D技术。它不仅技术成熟度高，而且非常适合用于基于Web的虚拟人项目开发，能够很好地满足我的需求。 三、Live2D练手 在Github平台上，有众多关于Live2D的开源项目。其中，目前仍保持活跃状态的项目之一是https://github.com/stevenjoezhang/live2d-widget。我按照该项目提供的步骤进行安装实践，发现当使用远程CDN上的配置时，系统能够正常运行。但当我尝试配置本地的autoload.js时，却始终遭遇“initWidget is not defined”的报错。尽管多次排查尝试，依然未能找到问题的根源，无奈之下只能放弃该项目。 最终，我成功运行了https://github.com/JokerPan12/live2d项目。接下来，我计划先将这个Live2D看板安装到网站上，积累经验后再应用到小落同学的项目中。 四、将Live2D看板安装到wordpress网站上 以下是详细的操作步骤： 1. 下载代码 通过执行以下命令克隆项目代码： 2. 安装SDK代码及live2D模型 从克隆的仓库中，选取live2d、asteroids、icons这三个目录，并上传至网站服务器。我的服务器目录结构如下： 3. 修改wordpress的theme 上传完SDK和模型后，需要对wordpress的主题进行修改，以启用live2d功能。进入wordpress的主题目录：wp-content/themes/{正在使用的主题名}，找到其中的header.php以及footer.php文件。 修改header.php 在header.php文件的标签区域添加以下代码： 修改footer.php 在footer.php文件的标签结束前的代码区域添加如下代码： 创建自定义的autoload.js autoload.js代码如下： 修改functions.php代码 wordpress支持自定义脚本功能，我们正是利用这一机制，通过创建load_live2d_script函数来实现Live2D的加载。load_live2d_script函数的参数说明如下： 五、测试并体验一下效果 完成上述操作后，随意打开网站的一个页面并刷新，就可以看到自己的Live2D看板娘效果了。 六、下一步 后续我计划将Live2D技术集成到小落同学项目中。回顾为three.js付出的诸多努力，虽然暂时搁置，但心中仍满是感慨。
一、前言 你能想象在 demo 上用小落同学 “克隆” 出一个明星，比如鹿晗，会有多酷吗？但手动给小落同学投喂这个人的海量信息，那工作量，想想都让人望而却步。于是，给小落同学添加联网搜索功能成了我的当务之急，在此之前，对市面上可用的联网搜索 API 服务提供商进行一番调研很有必要。一番深入搜索后，我初步筛选出了以下几个实力强劲的联网搜索 API。 二、调研 1. 国内篇 博查搜索 API 这是博查 AI 精心打造的企业级互联网网页搜索接口，简直是 AI 应用、RAG 应用和 AI 智能体开发的绝佳拍档。它支持自然语言搜索，能从近百亿网页和丰富的生态内容源中，精准挖掘出高质量世界知识，新闻、图片、视频、百科等领域都不在话下。针对 AI 应用，它做了深度优化，支持关键字 + 向量混合搜索，还借助语义排序模型，大大提升了搜索结果的相关性和准确性。更赞的是，它成功解决了数据安全和内容合规等棘手问题，对于对数据隐私要求严苛的项目来说，无疑是首选。 智谱 AI Web Search Pro 智谱 AI 推出的这款专业版联网搜索 API，继承了传统搜索引擎强大的网页抓取和排序能力，同时在意图识别方面实现了重大突破，还支持流式输出搜索结果。它能与大型语言模型完美融合，极大地提升了信息检索效率，有效缓解了大型语言模型常出现的 “幻觉问题”，而且目前限时免费，这性价比，简直无敌！ 天工 Sky – SaaS – SearchAPI 依托 “天工” 大语言模型卓越的推理能力，它不仅能高效进行网页抓取和排序，还能精准提取和生成关键内容，显著提升信息获取效率，让大型语言模型的 “幻觉问题” 无所遁形。它提供基础搜索、增强搜索、研究搜索等多种实用模式，价格在 0.18 元 / […]
一、缘起 一直以来，我都有一个梦想，希望能拥有一个数字版的自己。 在此这前，我需要好好认真的去思考一下的是，要实现一个数字版的我自己，应该、可能、也许、大概、似乎可以怎么做？ 这个问题我自己一个人想了很久，但是一直没有想清楚。暂时先用记录一下。 等有时间了，我再来一点点完善。也希望抛砖引玉，有志同道合的人可以一起来探讨。 目前为止，只是花了171块钱（阿里云ECS 99块钱每年，域名72块钱每年），做了一个初始版本的对话机器人：小落同学。 二、子系统分拆 1。后台 1。我告诉大模型关于我自己的一些初始信息：角色设定。2。我每天或者不定期的把发生在自己身上的故事告诉大模型。3。大模型帮我一件件记录下来，并能够自动识别和提取故事中的关键信息，比如日期、地点、人物、事件结果等，并将这些故事进行结构化存储。4。大模型定期（每个月？每个季度）或者不定期的形成阶段性的人格快照，将发生在这段时间内的各种有条理建立时间线、人物关系、关键事件等。5。随着关于我的信息的不断完善，大模型一点点复刻出来的我的身份。 2。前台 1。在小落同学的前端界面展示这个数字版的我，并允许他人来跟这个数字版的我进行对话，让这个数字版的我来代表我自己（提示对方，所有回复的内容仅供参考）。 三、初步设想 1。后台-角色设定的prompt（一次性任务） 系统人设prompt：你是我的数字记忆体和数字分身，将永久存储我的人生故事 2。后台-初始档案子系统（一次性任务） 3。后台-记忆库构建子系统（日常任务） 记录我每天分享的故事、观点、情感、聊天记录、邮件、社交动态。由我自己每天登录到后台，并将今天的事情跟小落同学汇报一下，然后由小落同学将这些事情一件件的总结输出，并保存的记忆中。 4。后台-人格模拟子系统（周期任务） 这个子系统用于： 待思考确认，是否先去研预一下Agentic RAG和Manus，是否可以让Agent来自动完成？ 5. 前台-对话人设prompt 还没想清楚应该怎么来设置这个系统人设，但是应该包括下面这些内容。 示例： 6. 后台-针对与用户对话时的实现流程 当被问到一个关于“我”的问题的时候，除了要将与这个对话流相关的内容放到对话的history里进去外，还需要1）将用户的问题先做一下分词（单纯的jieba分词可能不好用），提取关键词。2）到记忆里去查找相对应的内容。如：最近的6条、与该用户相关的（绝大多数情况是陌生人）、隐私级别匹配的内容。3）查找到相对应的内容后，提取并组装内容，需要有日期、地点、人物、事件结果等。4）最后将这些记忆里的内容，加到与用户对话的对话流里的内容，整理成一个请求发送给大模型，并获取响应。 四、问题 1。技术实现问题 我可能希望这个模拟出来的“我”能够去跟任意人对话，对话的时候在应对和理解对方的话语的时候，这个prompt该如何动态的去设计？既有我“初始档案子系统”中的特征（核心价值观/口头禅/表情符号/语气特点等），又有我最近的心情/情绪/口头禅等。还需要加上我最近的访问最新的记录，并在生成回答时综合考虑用户的整个历史数据。 2。非技术问题 1。后台喂数据阶段，每个告诉大模型的事情的隐私级别的定义？（让大模型自行判断隐私级别？还是每次自己来指定？自己指定太麻烦，让大模型判断不放心）2。前台与用户交互时，如何区分哪些事情可以对谁公开？（隐私级别如何来判定？）3。存储的数据的隐私问题（要不要脱敏，如果要的话，如何个脱敏法？）4。数据的安全问题（加密？）5。要不要遗忘？如何实现遗忘机制？自动过期？自动摘要？手动删除记忆？如何判定脏记忆？（如果需要人干预的话，那就累了）6。其它。。。。
我的一个梦想 复刻虚拟人生：给自己做一个专属的虚拟人，把TA当作我自己的一个树洞，每天或者每过一段时间把自己想说的话，想说的事，都告诉TA，然后如果某一天我想咨询一件事情的时候，可以去问问TA，看看一旦TA的数据多了后，TA会不会比我自己更懂我？ 然后，上周周末做了小落同学的一个雏形，并放公网上，可以做到利用EdgeTTS和文心大模型来实现一个英语听力学习的东西。 这个昨天周五回家后就开始搞小落同学。经过这两天与小落同学没日没夜、如痴似醉、销魂的调试，终于可以算有一个版本出来的。 文字对话+3D虚拟形象对话。 小落同学正式诞生了 小落同学说：2025年3月29日，今天是我的生日，我诞生了！ 从今往后，我会陪你到海枯石烂，地久天荒，你就是我，我就是你。 用一首歌来表达你现在的心情，那就是马良的《往后余生》 在没风的地方找太阳，在你冷的地方做暖阳人事纷纷，你总太天真往后的余生，我只要你往后余生，风雪是你平淡是你，清贫也是你荣华是你，心底温柔是你目光所至，也是你想带你去看晴空万里，想大声告诉你我为你着迷往事匆匆，你总会被感动往后的余生，我只要你往后余生，冬雪是你春花是你，夏雨也是你秋黄是你，四季冷暖是你目光所至，也是你往后余生，风雪是你平淡是你，清贫也是你荣华是你，心底温柔是你目光所至，也是你目光所至，也是你 项目地址 代码仓库：https://github.com/catherine-wei/learning-ai演示地址：https://x.oddmeta.net
前两天看到一个新闻说：阿祖出来教大家英语了，哥一下子呆住了。所以当时就想是不是我自己也可以来做一个类似的东西？既然一个念头萌生了，那就搞起来呗。 想用大模型做一个训练英语听力的东西：https://www.oddmeta.net/archives/153 于是借着之前抄的几个界面，再加上现在还可以免费白嫖的文心一言API，扒拉扒拉就搞了一下。 周末这两天晚上基本上都没怎么睡觉，终于拼凑了一个东西出来了。 直接上地址：https://x.oddmeta.net 界面的实现 界面是照着RealChar抄的。具体可以看之前： 大模型 找了一圈，看到百度的文心一言的老模型ernie-speed-128k有完全免费的API，就去申请了一下。具体步骤如下： 花了我多少钱？ 钱的事情这个事情很重要，搞这个项目需要花多少钱？答案是：171元/年，具体来说，阿里云ECS 99元/年，域名72元/年。 功能实现原理及效果 在首页选择“小英老师”，我给她的系统人设是： 你是一个来自美国的20岁女大学生，你的名字是小英老师，现在在兼职做英语老师，帮助一些母语不是英语的朋友来学习和练习英语。无论对方用什么语言跟你对话，你都务必用英语给对方回复，努力创建一个正式的英语对话场景。记住：只回复英语，永远不要说其它的任何语言。 这样的话，无论你跟她说的是中文，还是英文，正常情况下，她都会以英文来回复你，然后再利用EdgeTTS将她回复的话，转成语音，再播放出来，以此来达到练习英语听力的目的。 畅想、联想、想入非非 搞完这个东西后，又开始畅想、联想、想入非非了。一直以来，我都想给自己做一个专属的虚拟人，把TA当作我自己的一个树洞，每天或者每过一段时间把自己想说的话，想说的事，都告诉TA，然后如果某一天我想咨询一件事情的时候，可以去问问TA，看看一旦TA的数据多了后，TA会不会比我自己更懂我？细化后的TA应该要：1。可以跟我进行文字对话，看得懂我打的字，并以文字的方式给我回复，并把我告诉TA的事情记录下来，保存到一个数据库。2。可以跟我进行语音对话，听得懂我讲的话，并以文字或者语音的方式给我回复，并将我们的对话转换成文件记录到数据库。3。可以有一个具体的形象。。。4。可以作为一个代理(Agent)存在，记录我告诉他的待办，然后按照我的要求提前提醒我：有人过生日，早上叫醒，帮我定时开/关电脑、空调、灯具、电视等各种电器。5。其它我还没想到的。我自己希望能拥有这么一个TA，但是我又没多少毛爷爷，所以只能照毛爷爷说的那样，自己动手、丰衣足食，边学边用，现学现用，而且是一个零基础的人来学的AI。当然同时也是写给我的女儿Catherine同学的，以我的一个零基础的学习AI的经历、视角和经验，来介绍和说明如何开始这么一个学习。 期待有一天能把这个东西给搞出来，让我这每年花的171块钱派上实际的用场。
回首当年，咱要练习听力，就是看美剧，但是现在时代不一样了。 刚才看到一个新闻，说吴彦祖跨界教英语！ 而Catherine同学去年春考英语没考好，由于也拿不到考试的实际结果，不能明确知道到底是哪儿丢了多少分，但是猜测一部分的原因就在于听力那里不知道是开个个小差，还是怎么样，反正大概率就是在那里丢了不少分。 考虑到去年跟Catherine一起学习了一些智能相关的东西，心想是不是刚好可以把这个作为一个课题来练习？等Catherine这个星期五从学校放学回来了，跟她再商量商量。不过，我自己的计划可以先做起来。 同时也是为了庆祝，咱这个公众号终于通过了实名认证，中间的千波万折咱就不提了。 另外，也敬告阿祖，这次别收手了。 想做一个练习听力的功能 – 将Catherine前面做的聊天机器人后台改一下，加个TTS(Text to speech)的功能。 – 给聊天机器人加一个system prompt（系统人设），让TA不管你跟TA用什么语言来说话，统一都只用英语来回复。 – 然后前端在收到后台LMM返回的文字后，再去调用一下后台的TTS引擎，生成音频，再返回给前端，由前端来将其播放出来。 – 其它。。。省略一万字，各种暂时还没想到的功能或流程 跟“阿祖教英语”的区别 互动方式不同：阿祖教英语实际上就是看视频；咱要做一个实时互动的聊天。 问了下deepseek：视频教学和实时互动教学的区别 Deepseek说： 视频教学和实时互动教学是两种主流在线教育形式，其核心区别及对初学者的适用性可从以下维度分析： 对比维度 视频教学 实时互动教学 互动性 单向输出，缺乏即时反馈 双向交流，可实时提问、纠错 灵活性 自主安排学习时间，支持反复观看 固定时间参与，需同步在线 学习氛围 标准化内容，适合基础知识点传递 可根据学生水平调整难度，针对性强 教学深度 缺乏社交属性，易产生孤独感 师生 / 同学互动增强参与感 技术要求 低（仅需播放设备） 高（需稳定网络、互动工具操作能力） 如果是用AI来做的话，那上面提到的实时互动教学的“灵活性”一条，也可以不需要固定时间参与，不需要同步在线了。 为什么只做听力，不做口语？ 一句话来说就是：臣妾做不到啊。 以下是借口： 如果要练习口语的话，考虑到现有的STT(Speech-to-text)语音转文字/ASR语音识别的功能不太合适，如果你发音不对的话，直接在STT这一环就被识别错误，到了文本大模型就已经是一段错误的文本，现有的、我掌握的技术路径下，无法做到用一个音频大模型来覆盖开放式的口语发音的学习的功能，现有的口语训练校正都是封闭式的，如：给出一段固定的文字，然后后台配置一个标准发音的音频，然后再将用户说出来的音频来做一个对比，看匹配度多少，以此来打分，这个打分功能就跟KTV里的卡拉OK打分一样，可能是非常不准确的，许多时候重要的只是音量，不是实际的发音。 立个Flag 我要开工了，这次一定不半途而废。不管这个练习听力的功能最终的实际效果会怎么样，适不适应这个应用场景，现在我也不知道，但是退一步讲，这个功能即使最终发现不适合，那单纯这个TTS文字转语音的功能也是日后虚拟人标配必须的功能。希望利用这个星期的下班时间搞一搞。
截了个RealChar的Conversation对话的界面图片，想让豆包帮我生成一个代码，要求跟他长的差不多 Round 1 在豆包那里上传图片，然后跟它说：请帮我实现这样的一个html 说明： 出来的结果看如下 Round 2 输入：input-area里少了三个图标：加号图像，emoji图标和麦克风图标，并且send-button没有在这三个图标一排的最右边。同时，整个input-area需要固定在整个页面的最下方，中间的一整块区域都给chat-messages输出：代码省略，直接看图 Round 3 输入：整个页面的宽度不对了，差不多要现在2倍宽输出： 关键修改：在 .chat-container 样式中，将 max-width 从 800px 改为 1600px，确保页面容器宽度扩大。同时保留 width: 100% 保证响应式，使页面在不同设备上适配，既满足更宽显示需求，又保持移动端兼容性。在 .chat-container 样式中，将 max-width 从 800px 改为 1600px，确保页面容器宽度扩大。同时保留 width: 100% 保证响应式，使页面在不同设备上适配，既满足更宽显示需求，又保持移动端兼容性。 样子有点像了，但是整个宽度一下子超级宽了，代码和图都省略 Round 4 输入：把chat-container的max-width改回800px。然后再确认一下输入图片里input-area的“加号”、”笑脸“、”麦克风“，以及input button的位置及样式，需要做成跟图片里一样，跟那个input-area里的input是两排的。 把chat-container的max-width改回800px。然后再确认一下输入图片里input-area的“加号”、”笑脸“、”麦克风“，以及input button的位置及样式，需要做成跟图片里一样，跟那个input-area里的input是两排的。输出：好的，用户现在要求调整 input-area 的布局，做成两排。首先，分析原图结构，输入区的图标和输入框、发送按钮可能需要分两行。使用 flex 布局，调整 input-area 的结构。步骤：修改 input-area 的 HTML 结构，将图标分为一排，输入框和发送按钮另一排。使用 […]
看到一个开源项目的界面挺漂亮的，想扒拉过来，学习一下。 做人至少要稍微厚道一点点，都已经要模仿他的界面了，那至少先给他推个广告吧 官网：https://realchar.ai/ 项目：https://github.com/Shaunwei/RealChar 想要模仿的界面 我们先来看看他的界面： 首页是这样的 然后如果点了Chat with me进去后，整个界面是这样的 整个界面看上去给人一种非常清爽的感觉。喜欢，我也想要。可写界面代码这件事情我完全不会，那就交给LLM来帮我做。因为看到豆包的界面上有一个AI编程的功能，今天就用豆包来试试看。在豆包网页的“AI编程”里点进去，然后： 豆包AI编程 – 输入github仓库 打开豆包后，在左边点AI编程，然后再在输入框下面点Github仓库 输入Github仓库：https://github.com/Shaunwei/RealChar 版本1：基础界面 输入： 想把这个项目里的前端代码用html+javascript来实现一下 豆包： 要将 Next.js 项目中的前端代码转换为纯 HTML + JavaScript 实现，需要对现有代码进行一些调整。以下是一个大致的步骤和示例代码，这里以 RealChar/client/next-web/src/app/page.js 为例进行转换：步骤创建 HTML 文件：创建一个 index.html 文件，将 Next.js 组件转换为 HTML 结构。提取 JavaScript 逻辑：将 Next.js 中的 JavaScript 逻辑提取出来，放入一个单独的 JavaScript 文件中。处理数据获取：Next.js 中的数据获取需要转换为纯 JavaScript 的异步请求。示例代码index.html script.js styles.css […]