Datawhale冬令营第二期！👍Task3

Datawhale冬令营第二期-Task3：学AI编程做项目的方法论，构建自己的应用

对应链接：https://www.datawhale.cn/activity/116/23/96?rankingPage=1

笔记整理者：博客园-岁月月宝贝

jrm,国奖、计设、统计建模的💴都发了，我们这期头脑风暴也听了(是观众，但是为讲者提供了自己的意见+全程听完！收获我会补在下面！)，非常非常开心！！！

---

目录

• Datawhale冬令营第二期-Task3：学AI编程做项目的方法论，构建自己的应用
  • 发散灵感
  • 明确灵感之上的需求
    • 后端架构
    • 前端架构
    • 数据传输
    • 隐私保护措施
    • 技术选型示例
  • 实现和完善需求基础上的功能
  • 头脑风暴
  • 我做项目遇到的坑
  • 项目交流会

今天是12月31日，半小时前刚刚完成作品PPT初版，骑车回到宿舍，所以我想给这里先开一个笔记的头(明天一醒来就会接着写！中午1点前预计全部更完)，也是与各位看官的一个约定！

接着12月27日发表并完成更新的Task2笔记(Datawhale冬令营第二期🏋️‍♀️Task2 - 岁月月宝贝 - 博客园)，文末的最后一个问题——我该如何确定我的需求属于前端开发，还是后端开发，还是两者都要涉及呢？，所以站在这里的你，是在想“我要做一个XXX系统/界面”，BUT属于“前端开发”or"后端开发"已经是在技术细节的实现部分了……中间是不是跨越了很多阶段？首先，我想你脑子里面是有大概这个系统功能是怎样怎样的一个图景，你需要先把它表述成文字(超级初版，理解为“草图”)；然后，你需要确定这些功能是否存在重复/冲突(就像设计房子，最好不把地基设在水里)，进行功能的分类/筛选(比如一个客厅不用摆两个电视)，同时进行可能的扩充(就像建了院子后可以在里面养小猫小狗)，表述成结构化的段落(完整初版，理解为“图纸”）；最后就是“建房”过程了，什么结构要使用什么材料，就像什么语言写什么界面一样，其实最好什么地方用什么材料就在图纸上先标好(哪怕材料不贵，起码先保证房子不塌)，后再调整代码一点点优化结构。

这三部分用我们可爱的Datawhale的话表述就分别是“发散灵感”、“明确灵感之上的需求”和“实现和完善需求基础上的功能”，三部分我们的AI均可以辅助，但前提是你向它表述的语言是那种可以导向你所期望的输出类型的输入😁，那怎么让AI明白呢？就像和猫对话用猫语、和鸟对话用鸟语，和AI对话需要“Prompt工程”👍

下面，我们就以Datawhale给出的例“人生成就系统”为大家讲解吧！

发散灵感

首先，为什么借助AI可以发散我们的灵感？

😊家人们可以先想想AI丰富的预训练数据，所以这几相当于成百上千个人帮你一起想！

利用AI辅助发散灵感，开发者能够 突破个人经验和认知偏见的限制 ， 快速获取多样化且跨领域的创意 ，从而 提升创新效率并发现新的解决方案 。

作者是通过阅读一篇题为《设计一套成就系统，让生活像游戏一样好玩》的文章，脑海里有了“通过 搭建“成就系统” 的方式，在自己的日常生活与工作之外，给自己添加一些 “支线” ，让自己的生活 增添一点愉悦感与成就感，减少精神内耗 ”的想法，为了让这个想法更偏情绪中性+可实现性，作者来找AI辅助：

AI辅助头脑风暴的提示词

我看到了一篇文章，这篇文章讲述了通过搭建“成就系统”的方式，在自己的日常生活与工作之外，给自己添加一些“支线”，让自己的生活增添一点愉悦感与成就感，减少精神内耗。

你作为一个开发者，请对提到的“成就系统”，发散你的开发创意与灵感

AI的回复是这样的：

以下是一些关于“成就系统”的开发创意与灵感：

1. 个性化成就：允许用户根据自己的兴趣和目标创建自定义的成就。例如，用户可以设定“阅读10本关于历史的书籍”或“学会弹奏一首新的钢琴曲”等成就。
2. 社交互动：添加社交功能，让用户可以与朋友或其他用户分享自己的成就，互相点赞、评论和鼓励。这可以增加用户的参与感和动力。
3. 成就奖励：为完成成就的用户提供奖励，例如虚拟徽章、积分、优惠券或解锁特殊功能。这些奖励可以激励用户继续努力并追求更多的成就。
4. 成就分类：将成就分为不同的类别，例如学习、健康、兴趣爱好、社交等。这样用户可以更有针对性地设定和完成成就，同时也可以更好地了解自己在各个方面的进展。
5. 成就挑战：定期推出一些限时的成就挑战，鼓励用户在规定的时间内完成特定的任务。这可以增加用户的紧迫感和成就感。
6. 成就进度跟踪：提供一个直观的界面，让用户可以清晰地看到自己在每个成就上的进度。这可以帮助用户更好地管理自己的时间和努力，同时也可以增加他们的动力。
7. 成就提醒：设置提醒功能，提醒用户完成特定的成就或参与成就挑战。这可以帮助用户保持对成就系统的关注，并避免忘记重要的任务。
8. 成就分析：提供数据分析功能，让用户可以了解自己在成就系统中的表现，例如完成的成就数量、花费的时间、获得的奖励等。这可以帮助用户更好地了解自己的优势和不足，并制定更有效的计划。
9. 成就故事：允许用户分享自己完成成就的故事和经验。这可以增加用户之间的互动和交流，同时也可以为其他用户提供灵感和动力。
10. 成就合作：推出一些需要用户合作完成的成就，鼓励用户与他人合作，共同追求目标。这可以增加用户的社交互动和团队合作能力。

这些创意和灵感可以帮助你构建一个更加丰富和有趣的成就系统，让用户在追求成就的过程中获得更多的愉悦感和成就感，同时也可以减少精神内耗。

此时，作者感觉AI的立意有点偏，所以！

作者说

实际上，我的“成就系统”设计专注于“减少精神内耗”，因此我 不希望将“成就系统”异化为用户依靠成就炫耀自己优越感的工具

AI的回复是这样的：

明白了，你希望“成就系统”专注于帮助用户减少精神内耗，而不是成为炫耀的工具。以下是一些修改后的开发创意与灵感，以符合你的要求：

1. 自我反思与成长：设计成就系统时，将重点放在用户的自我反思和成长上。例如，设置一些与个人成长、情绪管理、心理健康相关的成就，鼓励用户关注自己的内心世界，而不是与他人比较。
2. 内在奖励机制：强调成就带来的内在奖励，如满足感、成就感、自我提升等。用户完成成就后，可以获得一些与个人成长相关的虚拟奖励，如冥想时间、自我肯定的语句、心理健康小贴士等，而不是物质奖励或炫耀性的徽章。
3. 隐私设置：提供严格的隐私设置，让用户可以选择将自己的成就公开或保密。这样用户可以根据自己的意愿分享成就，而不会感到被迫炫耀。
4. 社区支持与鼓励：创建一个积极、支持性的社区环境，让用户可以在其中分享自己的成就，但重点是互相鼓励和支持，而不是比较和炫耀。社区可以提供一些关于减少精神内耗的讨论话题和资源，帮助用户共同成长。
5. 个性化目标设定：允许用户根据自己的需求和情况设定个性化的目标和成就。这样用户可以专注于自己的成长和进步，而不是追求与他人相同的标准。
6. 成就反馈与建议：为用户提供关于他们成就的反馈和建议，帮助他们更好地理解自己的成长和进步。反馈可以侧重于用户的努力和进步，而不是与他人的比较。
7. 成就故事分享：鼓励用户分享他们完成成就的故事和经验，但强调分享的目的是为了启发和鼓励他人，而不是炫耀。用户可以分享自己在减少精神内耗过程中的挑战和应对方法，帮助他人也能从中受益。
8. 成就与心理健康教育：在成就系统中融入一些心理健康教育的内容，如情绪管理技巧、压力缓解方法、积极心态培养等。用户在追求成就的过程中，可以同时学习和实践这些知识，进一步提升自己的心理健康水平。
9. 成就挑战与自我突破：设置一些与自我突破相关的成就挑战，鼓励用户走出舒适区，尝试新的事物。这些挑战可以帮助用户克服恐惧和焦虑，提升自信心和自我效能感，从而减少精神内耗。
10. 定期回顾与调整：提醒用户定期回顾自己的成就和成长，帮助他们总结经验教训，调整目标和计划。定期回顾可以让用户更加清晰地看到自己的进步，增强自信心，同时也可以及时发现和解决可能出现的问题，避免精神内耗的积累。

通过这些创意和灵感，你可以设计一个专注于减少精神内耗的成就系统，帮助用户更好地关注自己的内心世界，实现自我成长和提升，而不是将成就作为炫耀的工具。

至此，作者通过AI辅助，得到了能够落地实现的“灵感”—— 专注于隐私保护和基于时间的个人成长记录 ，也实现了我们上面说到的“首先，我想你脑子里面是有大概这个系统功能是怎样怎样的一个图景，你需要先把它表述成文字(超级初版，理解为’草图‘)”。

接下来，就对应“明确灵感之上的需求”这部分了，也对应本文上面说的第二步外加第三步的初步材料设计。

明确灵感之上的需求

此时也是时候确定我们开发的前后端框架啦！

以开发“人生成就系统”为例，向AI提问：

让AI明确需求的参考提示词

我希望开发一款“人生成就系统”，要求保证严格隐私保护，用户能够按照时间顺序记录自己的成就记录

你作为一个开发者，请你判断这个“成就系统”应该采用什么样的技术架构

AI回复如下：

为了开发一款能够严格保护用户隐私且允许用户按照时间顺序记录成就的“人生成就系统”，我们可以考虑以下技术架构：

后端架构

• 数据库选择：
  • 使用关系型数据库（如MySQL、PostgreSQL）来存储用户的成就记录。关系型数据库提供了强大的事务支持和数据完整性保障，适合存储结构化的数据。
  • 为了保护用户隐私，对用户的敏感信息（如成就内容）进行加密存储。可以使用数据库的加密函数或者在应用层进行加密处理。
• 服务器端框架：
  • 选择一个适合的后端框架（如Node.js的Express、Python的Django或Flask）来处理HTTP请求和业务逻辑。这些框架提供了丰富的功能和插件，能够快速构建后端服务。
  • 实现用户认证和授权机制，确保只有授权用户能够访问和修改自己的成就记录。可以使用JWT（JSON Web Token）来进行用户认证，通过验证token来确保用户的身份。
  • 在服务器端对用户输入进行严格的验证和过滤，防止SQL注入和其他安全漏洞。

前端架构

• 单页应用（SPA）：
  • 采用前端框架（如React、Vue.js或Angular）构建单页应用，提供流畅的用户体验。SPA能够在不刷新页面的情况下更新内容，减少了网络请求，提高了响应速度。
  • 在前端实现数据的加密和解密，确保用户的成就记录在传输和存储过程中的安全性。可以使用JavaScript的加密库（如CryptoJS）来进行数据加密。
  • 使用前端路由来管理不同页面的导航，实现用户按照时间顺序查看和编辑自己的成就记录。

数据传输

• HTTPS协议：
  • 所有的数据传输都通过HTTPS协议进行，确保数据在传输过程中的安全性和完整性。HTTPS使用SSL/TLS加密协议，能够防止数据被窃取和篡改。

隐私保护措施

• 最小权限原则：
  • 在设计数据库和应用程序时，遵循最小权限原则，确保每个用户只能访问和修改自己的成就记录。
• 数据匿名化：
  • 在某些情况下，可以对用户的成就记录进行匿名化处理，去除个人身份信息，以保护用户的隐私。
• 数据备份和恢复：
  • 定期备份用户的成就记录，以防止数据丢失。同时，制定数据恢复计划，确保在发生数据灾难时能够及时恢复用户的数据。

技术选型示例

• 后端：
  • 数据库：MySQL或PostgreSQL
  • 服务器端框架：Node.js的Express或Python的Django
  • 加密库：bcrypt（用于密码加密）、crypto（用于数据加密）
• 前端：
  • 前端框架：React或Vue.js
  • 加密库：CryptoJS
• 数据传输：
  • HTTPS协议

通过以上技术架构和隐私保护措施，我们可以构建一款安全可靠的“人生成就系统”，满足用户对隐私保护和成就记录的需求。

家人们看，我们这里是不是完成了“然后，你需要确定这些功能是否存在重复/冲突，进行功能的分类/筛选，同时进行可能的扩充，表述成结构化的段落(完整初版，理解为“图纸”）”以及“最好什么地方用什么材料就在图纸上先标好”呀？😜

至此，作者通过AI辅助，明确了灵感之上的“需求”—— 前后端兼有的单页应用 。

接下来，我们需要通过AI辅助，实现和完善需求基础上的功能。就像我们的第三步“什么结构要使用什么材料，就像什么语言写什么界面一样”，并且细节已经落实到每个功能怎么实现啦！

实现和完善需求基础上的功能

开发需要遵循 前后端分离 的原则，AI辅助编程也不例外，作者以前端单页设计作为演示

*由于上述AI回应的前端框架“react和vue”涉及到的前置知识较多也较为复杂，因此实际提示词演示仍为html、tailwind css和javascript为主

接着，我们一起补充一点知识！

什么是前后端分离？

想象一下餐厅

前端（Front-End） ：

• 餐厅的门面和服务员 ：这是顾客直接看到和互动的部分。它包括菜单、餐厅的装修、服务员的态度等等。前端的任务是让顾客有一个良好的用餐体验，展示美味的菜肴图片，提供易于理解的菜单等。

后端（Back-End） ：

• 厨房和后台管理 ：这是顾客看不到的部分。后端负责处理订单、准备食物、管理库存、计算账单等。厨房里的厨师根据菜单和订单来制作食物，确保一切运行顺利。

前后端分离意味着什么？

在上面的比喻中， 前端和后端各自独立运作，但通过明确的方式进行沟通 。具体来说：

1. 独立开发 ：
   • 前端团队 负责设计和实现餐厅的门面、菜单和服务流程。
   • 后端团队 负责厨房的管理、食材采购和订单处理。
2. 清晰的沟通方式 ：
   • 当顾客点餐时，服务员（前端）将订单传递给厨房（后端）。
   • 厨房准备好食物后，再由服务员将食物送到顾客的桌上。
3. 灵活性和效率 ：
   • 如果餐厅想要更换菜单（前端），厨房的工作流程不需要完全改变，只需调整食材和烹饪方法。
   • 同样的，厨房可以优化食物准备流程，而不需要影响到餐厅的门面设计。

前后端分离在计算机和互联网中的应用

在网站或应用程序的开发中，“前后端分离”也是类似的：

• 前端 ：负责网页或应用的界面设计和用户互动部分，比如按钮、图片、文字等。用户在浏览器中看到并与之互动的所有内容都属于前端。
• 后端 ：负责处理数据、存储信息、执行逻辑运算等，比如用户登录信息的验证、数据库中的数据管理等。

通过将前端和后端分离，开发者可以更高效地工作：

• 前端开发者专注于用户体验和界面设计。
• 后端开发者专注于数据处理和服务器管理。

这种分离方式使得网站或应用更容易维护、升级和扩展，同时也提高了开发效率

下面，我们来看作者的前端提示词！

请按照以下步骤帮助我创建一个“人生成就系统”：

步骤1：创建基本的HTML页面结构请帮我创建一个基本的HTML页面，包含<!DOCTYPE html>声明，<html>、<head>和<body>标签。在<head>中添加页面标题“人生成就系统”，并引入Tailwind CSS的CDN链接。

步骤2：添加页面头部和主容器在<body>中添加一个导航栏，包含页面标题“人生成就系统”。然后添加一个主容器，用于放置记录成就的表单和展示成就的时间轴。

步骤3：创建成就记录表单在主容器中添加一个表单，包含以下字段：- 成就标题（文本输入框）- 成就描述（多行文本框）- 成就日期（日期选择器）- 提交按钮使用Tailwind CSS进行样式美化。

步骤4：创建时间轴展示区域在主容器中，表单下方添加一个时间轴区域，用于展示用户记录的成就。时间轴应按日期排序，并以时间流动的方式展示。

步骤5：添加JavaScript逻辑以处理表单提交和时间轴更新使用JavaScript为成就记录表单添加提交事件监听器。提交时，获取表单数据，创建一个新的成就条目，并将其添加到时间轴中。确保成就按日期排序。使用Tailwind CSS进行样式美化。

步骤6：美化时间轴样式使用Tailwind CSS进一步美化时间轴，使其更具视觉吸引力。添加左右交错的时间轴节点，使用不同颜色区分不同年份或类别的成就。

步骤7：添加删除成就功能为每个成就条目添加一个删除按钮。点击删除按钮后，从时间轴中移除该成就，并更新本地存储。

步骤8：实现编辑成就功能为每个成就条目添加一个编辑按钮。点击编辑按钮后，允许用户修改成就的标题、描述或日期，并更新时间轴和本地存储。

步骤9：实现响应式设计使用Tailwind CSS确保页面在不同设备上均有良好的显示效果。调整时间轴和表单在移动设备上的布局，使其适应屏幕宽度。

步骤10：添加动画效果以体现时间流动为时间轴中的成就条目添加进入动画，使其在加载时依次显示，体现时间的流动。使用Tailwind CSS和CSS动画实现渐变效果。

步骤11：实现本地存储以保存成就数据使用浏览器的LocalStorage功能，将用户记录的成就数据保存到本地。确保刷新页面后，成就数据仍然存在并正确显示在时间轴上。

步骤12：优化用户体验和UI设计使用Tailwind CSS进一步优化页面的用户体验和UI设计。添加适当的颜色、间距和字体，使页面更加美观大方。确保时间轴条目在不同设备上均有良好显示效果。

（同学们可能会发现到这里编写提示词的难度陡然升高了，殊不知这个提示词可能也源于AI之手😋，不过建议这个AI在一个空白项目中打开，不然AI与你的对话很容易受到项目中原内容的干扰，被带偏）

下面是作者采用的提示词方法(不过请大家相信一定不只有这一种方法！比如我就是通过让AI从一个个功能出发描述的！条条大路通罗马！)，但是作者的做法也的确为我拓开了思路！

用AI写作提示词

以下是“如何做好prompt”的方法论，请你依据这个方法论，帮助我生成一个AI编程创建“人生成就系统”的提示词，要求使用html、tailwind css和javascript，用户能够通过这个页面记录自己在某一个时刻的成就，因此页面需要以时间轴的形式进行展现，而且要保证UI美观、大方，并且能够体现时间的流动

分步指令方法论：将复杂任务拆分为多个简单步骤，逐步引导AI完成。

示例：

1. 创建一个HTML页面。
2. 添加一个表单，包含用户名和密码输入框。
3. 添加一个提交按钮，并实现基本的表单验证。

AI最后生成的页面是这样的：

左侧页面没有添加成就，右侧页面是添加成就后按照时间顺序正确排序

头脑风暴

是12月28号的头脑风暴会啦！

好开心遇到那么多有想法的人，并且竟然可以遇到在职科研医生和前端工程师！

笔记如下！

推荐oepncv截图+Googletrans翻译，还有推一个可以调用的项目链接：https://github.com/pot-app/pot-desktop

gradio或streamlit对“大语言模型与前端的交互”很友好。

很好的神经网络可视化项目：https://github.com/poloclub/transformer-explainer

神经网络可视化网站：https://alexlenail.me/NN-SVG/index.html

可以把API官方文档交给豆包AI让他生成代码，另外如果API官方文档里面有没有“function calling”选项，如果有就可以“如果LLM生气，就让它放烟花🎇”

——另外，Datawhale的ANQ是很棒的老师,一直在热情提建议！

我做项目遇到的坑

1.在新加入功能时，可能会遇到加入代码正确且成功加入，但是代码加入的位置不对的问题，这个需要你根据想法中的先后次序调整；

2.注意豆包AI的上下文学习能力目前较弱，所以问问题最好带上全面的知识；

3.js语言里面尤其要注意多个函数中使用的变量需要转为全局变量！

4.绘制图形需要手动在html里面加入<canvas>元素！豆包很可能加入的只是不支持getContext('2d')方法的<div>元素!

5.有时豆包AI进入代码生成怪圈(一直错)，可以在这个问题上求助其他编程AI！

6.想获取免费声音可以从消息列表 - 用户中心 - 耳聆网，不过大家注意版权！还有一个MP4转wav的免费网站https://www.aconvert.com/cn/audio/mp4-to-wav/ ，目前不收费QwQ!

7.读json文件需要异步读取！相关函数都要改为异步！

8.这个项目会大大锻炼你的Debug能力！哈哈哈哈哈😘

项目交流会

很开心+幸运,被W老师邀请作为嘉宾参与讨论😊

很开心+1,被L老师纯夸😝

开心+1+1,会后发现A老师他们群里偷偷夸我😆

我来分享一些会议中听老师/同辈们交流吸取的经验吧！

Q1：自己写的网页一刷新东西就全没啦😭

A1：提示词中包含localStorage。🚚与传统的 Cookie 不同，localStorage中的数据没有过期时间。只有当用户主动清除浏览器的本地存储或者通过 JavaScript 代码显式地删除数据时，存储的数据才会被移除(怎么刷新都不会丢)。这使得它非常适合存储那些需要长期保存且不需要频繁更新的数据，如用户的登录状态、主题设置等。🚎且localStorage提供了较大的存储空间，通常每个域名可以存储约 5MB 的数据。🚗它的 API 设计简单，开发者可以通过简单的 JavaScript 代码来存储和获取数据。例如，使用 localStorage.setItem(key, value)可以存储数据，使用 localStorage.getItem(key)可以获取数据。

Q2：请问Cursor在编码时有哪些好处呢👰？

A2：Cursor 在编码时具有多方面的好处，以下是一些主要的优势：

1. 😳智能代码补全和建议

• 上下文感知的代码补全：Cursor 能够理解整个项目结构，生成更加相关和准确的代码片段。例如，当你输入函数名时，Cursor 会自动给出参数提示和函数签名，让你更快地理解代码结构和用法。
• 实时代码分析与优化：Cursor 能够实时分析代码质量，提供 AI 驱动的优化建议。这不仅包括语法错误检测，还涵盖了性能优化、设计模式应用等高级建议。

2. 💱自然语言到代码转换

• 自然语言编程：Cursor 支持使用自然语言描述功能需求，然后自动生成相应的代码。用户可以通过聊天界面用自然语言描述需求，Cursor 能够理解并将其转化为代码。
• 上下文感知和多语言支持：Cursor 能够理解项目的整体结构和上下文，使自然语言指令更加精准。它支持多种编程语言，可以根据项目需求自动选择适当的语言生成代码，并能引用特定文件或代码段进行更精确的操作。

3. 🛠代码编辑和修改能力

• Tab 自动补全：Cursor 的 Tab 自动补全功能超越了传统的代码补全，可以建议光标周围的编辑，而不仅仅是插入额外的代码。它能够同时修改多行代码，并根据你最近的更改和 linter 错误提供建议。
• Cmd K 内联编辑：使用 Cmd K（Windows/Linux 上为 Ctrl K），你可以在编辑器窗口中生成新代码或编辑现有代码。支持多行编辑和内联生成，可以通过附加指令进一步优化生成结果。
• Composer 功能：Composer 是 Cursor 的一个强大的实验性功能，允许你同时创建和编辑多个文件，生成整个应用的框架，并通过对话逐步细化和修改生成的代码。

4. 📈代码质量和可读性提升

• 减少错误，提升代码质量：通过内置的智能代码补全、语法检查和代码重构功能，Cursor 可以帮助开发者减少低级错误，并提高代码的可读性和维护性。
• 增强代码可读性：AI 的优化建议不仅提升了代码的性能，还能帮助开发者编写更加简洁易读的代码。

5. 👨‍⚖️实时反馈与协作

• 实时反馈：通过与 AI 的实时对话，开发者可以随时获得帮助，而无需切换到其他文档或搜索工具。
• 上下文引用能力：Cursor 提供了强大的上下文引用能力，用户可以使用 @ 符号快速访问相关上下文，并通过全局代码检索高效地搜索整个项目的代码。

6. 👪多模型支持

• 灵活性：Cursor 不局限于单一 AI 模型，而是可以集成各种先进的语言模型。它甚至可以集成你自己的模型。
• 持续更新：随着新模型的发布，Cursor 可以快速将其纳入，确保用户始终能够使用最先进的 AI 技术。
• 高适应性：不同的任务可能需要不同的 AI 模型，多模型支持使 Cursor 能够为各种编程需求提供最佳解决方案。

*另外，Cursor还具备一定的回溯功能

Q3：如果我想在网页上实现后端功能，又无法实现后端，请问我们可以怎么做？

A3：可以通过Json文件做传播介质，每次运行好后下载到本地，下次使用再传到页面上来——JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它非常适合用于存储和传输数据。在没有后端的情况下，JSON 文件可以作为数据存储和传递的介质。

Q4：如果希望页面组件好看，需要怎样设计组件？

A4：提示词中带上“呼吸感，美观，大方”。

Q5：如果你的后端语言是python，你想融合一个web前端，请问可以使用哪个框架呢？

A5：
FastAPI、Flask 和 Django 都是 Python 中流行的 Web 框架，它们各自有不同的中间件实现方式。

• FastAPI 是一个现代、快速（高性能）的 Python Web 框架，专为构建 API 设计。它基于 Python 3.6+ 的类型提示，利用 Starlette 和 Pydantic 提供卓越的性能和功能。它通过使用最新的 Python 特性和异步编程，提供了快速开发 Web API 的能力。该框架不仅易于学习和使用，还具有自动生成文档、数据验证等强大功能。
• Flask 是一个使用 Python 编写的轻量级 Web 应用框架。它具有简单、灵活和可扩展的特点，非常适合小型到中型的 Web 应用。在 Flask 中，中间件可以通过 app.wsgi_app 属性添加。Flask 使用 Werkzeug 库来处理 WSGI 请求，因此中间件可以在这个层面上进行操作。
• Django 是一个高级的 Python Web 框架，它鼓励快速开发和干净、实用的设计。Django 旨在帮助开发者避免常见的 Web 开发陷阱。在 Django 中，中间件通过在 MIDDLEWARE 设置中列出中间件类来添加。Django 的中间件可以处理请求和响应，也可以修改请求对象和响应对象。它适合构建大型、复杂的 Web 应用。

Q6:请问如果我想创建一个便于用户能与人工智能（AI）模型进行交互的框架，我前端创建用户界面时选用哪些框架较好？

A6：

• Gradio 是一个用于快速创建 AI 应用前端界面的 Python 库。它允许开发者通过简单的代码快速创建交互式界面，用户可以通过这个界面与 AI 模型进行交互，例如上传文件、输入文本等，并获取模型的输出结果。
• Streamlit 是另一个用于快速创建数据应用和 AI 应用前端界面的 Python 库。它允许开发者通过简单的代码快速创建交互式界面，用户可以通过这个界面与数据和 AI 模型进行交互。

Gradio 和 Streamlit 这两个工具便于用于创建 AI 前端交互界面，并且可以与外部的 API 或其他服务（如“豆包”）进行集成，以便实现更复杂的功能和数据交互。

Q7:Gradio 提供了一个快速创建 AI 应用前端界面的框架，但这个框架的样式和布局相对固定，不容易进行个性化的美化,怎么办？

A7：虽然 Gradio 的默认框架可能在界面美化方面存在一些限制，但通过使用自定义 CSS、自定义 HTML 和第三方库，可以显著提高 Gradio 应用的美观度和个性化程度。这些方法可以帮助开发者创建更具吸引力和功能性的 AI 应用前端界面。

PS：Gradio Playground 是 Gradio 提供的一个在线工具，允许用户快速创建和测试 Gradio 应用，而无需编写任何代码。它提供了一个可视化的界面，用户可以通过拖放组件来构建应用。但尽管 Gradio Playground 为快速原型设计提供了便利，但它可能在界面美化和个性化方面也存在一些限制。https://www.gradio.app/playground

Q8：通过使用 Gradio 或 Streamlit 这样的前端交互工具，可以调用后端的 API 来获取数据。请问具体是怎么调用的呢？

A8：调用 API 时需要的几个关键信息：API 的 URL、密钥（用于身份验证）、请求（如 GET、POST 等）以及可能的成本（如果 API 有使用成本的话）。这些工具可以帮助用户在前端界面与后端的 AI 模型进行交互，获取响应数据。(如果历程看不懂可以问AI，比如如果你在coze上面设计了一个智能体，现在你想了解怎么通过在线平台调用，那你就把coze官方文档里面的“在线平台调用”方法发给AI，让它告诉你怎么做)

下面是一个例子：

import requests

# API URL 和密钥
api_url = "https://api.coze.cn/v3/chat"
api_key = "your_api_key"

# 请求头
headers = {
    "Authorization": f"Bearer {api_key}"
}

# 请求数据
data = {
    "message": "Hello, 豆包!"
}

# 发送 POST 请求
response = requests.post(api_url, headers=headers, json=data)

# 处理响应
if response.status_code == 200:
    data = response.json()
    print(data)
elif response.status_code == 401:
    print("无效的API密钥")
elif response.status_code == 404:
    print("资源未找到")
else:
    print("请求失败，状态码：", response.status_code)

下面是coze的一个界面：

PS：老师建议：先把人物用扣子实现，再部署到你的想法上

Q9：请问coze是一个怎样的平台？

A9：Coze（中文名：扣子）是由字节跳动开发的一个AI大模型智能体开发平台。它允许用户即使没有编程基础，也能快速搭建基于大模型的各类Bot（智能体），并将它们发布到各个社交平台、通讯软件或部署到网站等其他渠道。

Q10：如果我使用的是Node.js 构建的后端应用程序，我想创建用户登录功能，我应该？

A10：对应提示词用户鉴权，用户鉴权是验证用户身份的过程，确保用户是他们声称的那个人。在 Web 应用程序中，这通常涉及到检查用户的用户名和密码是否正确，或者验证用户是否拥有有效的令牌（如 JWT - JSON Web Tokens）。

Q11：请问什么是TTS语音合成？

A11：这句话的意思是“文本到语音（Text-to-Speech，简称 TQTS）语音合成”。这是一个技术领域的话题，涉及到将文本内容转换为语音输出的技术。TTS 语音合成技术广泛应用于各种场景，如语音助手、有声读物、自动电话服务等。在技术实现方面，TTS 语音合成可以通过多种方式实现，包括使用现成的库和框架，如 Google Text-to-Speech、Amazon Polly、IBM Watson Text to Speech 等，也可以通过自定义的深度学习模型来实现。

Q12：如果想实现和我们手机一样的切屏功能，应该怎么告诉AI？

A12:滑动组件选单。滑动选单组件是一种常见的用户界面元素，用于提供直观的选项选择体验。通过使用 HTML/CSS/JavaScript、Swift 或 Kotlin 等技术，可以轻松地在 Web 应用和移动应用中实现滑动选单组件。这种组件的优势在于其直观性和灵活性，但也有一些局限性，如可访问性和精确性问题。

Q13：A老师关于我的作品给出了哪些建议？（づ￣3￣）づ╭❤～

A13：游戏的一些核心点：好玩、有趣、手感、可玩性

其他朋友的建议：逐渐进阶，知识升级(从常见的知识进阶到一些不为人知的)，蛇形态升级(可以把蛇设置成对应的剪纸);具体些，比如春节;加入过年的席(各个地区吃的菜);2d→3d;可以从健康程度设置，设置有的吃了加分，有的吃了减分。

Q14：生成和展示简历的技术方案老师和同学们最后是怎么规划哒？

A14：

1. 使用大模型生成简历：

   • 首先，通过提供一些提示词，利用大型语言模型（如GPT-3）来生成简历内容。这些内容最初以Markdown格式生成，Markdown是一种轻量级的标记语言，易于阅读和编写。

2. 渲染为HTML/CSS：

   • 然后，将Markdown格式的简历内容转换为HTML和CSS格式，以便在网页上以更丰富的样式展示。HTML负责简历内容的结构，而CSS则用于样式设计，使得简历在网页上显示得更加美观。

3. PDF格式的问题：

   • 文本提到PDF格式的简历不太容易编辑，且在某些情况下可能存在读取问题。因此，建议使用SVG（可缩放矢量图形）格式，SVG是一种基于XML的标记语言，用于描述二维矢量图形，具有较好的可编辑性和可读性。

4. 使用HTML/CSS/JS实现功能：

   • 通过结合HTML、CSS和JavaScript，可以实现上述简历生成和展示的功能。HTML和CSS用于构建和美化简历的界面，而JavaScript则可以用于实现动态交互，如表单提交、数据验证等。

5. 使用Gradio实现：

   • Gradio是一个Python库，用于快速创建机器学习模型的交互式界面。使用Gradio可以更简单地实现简历生成和展示的功能，因为它提供了一些预制的组件，如复选框（checkbox），可以轻松地集成到应用中。
   • 但是，使用Gradio可能需要考虑其开发成本。如果选择使用Gradio库，可能需要新建一个Python文件来编写和部署应用。

A15：请问matplotlib 和 opencv 区别在？

Q15：matplotlib 和 opencv 都是 Python 中用于处理和分析图像数据的库，但它们的主要功能和用途有所不同。以下是它们的主要区别：

1. 用途和目标

matplotlib:

• 主要用于数据可视化和绘图。
• 适用于创建图表、图形和数据的可视化表示。
• 常用于科学计算、工程和数据分析领域。

opencv:

• 主要用于计算机视觉任务。
• 提供了广泛的图像处理和视频分析功能。
• 适用于实时图像处理、视频分析、物体识别和机器学习应用。

2. 图像处理能力

matplotlib:

• 提供基本的图像显示和处理功能，如图像读取、显示、保存等。
• 不专注于高级图像处理技术，如滤波、边缘检测、特征提取等。

opencv:

• 提供全面的图像处理功能，包括但不限于图像滤波、边缘检测、轮廓检测、图像变换等。
• 支持高级图像处理技术，如图像分割、特征匹配、3D图像处理等。

3. 性能和优化

matplotlib:

• 通常用于生成静态或动态的图表，性能优化主要针对绘图和渲染。

opencv:

• 针对实时和高性能的图像处理进行了优化。
• 能够处理大量图像数据，适用于需要快速处理的应用场景。

4. 社区和生态系统

matplotlib:

• 拥有强大的社区支持，特别是在科学和数据分析领域。
• 与许多科学计算库（如 NumPy、SciPy、Pandas）紧密集成。

opencv:

• 在计算机视觉和机器学习社区中非常流行。
• 与机器学习库（如 TensorFlow、PyTorch）和硬件加速（如 CUDA）有良好的集成。

5. 应用场景

matplotlib:

• 适用于需要创建出版质量图表的场合。
• 常用于探索性数据分析、科学论文和报告中的图表制作。

opencv:

• 适用于需要进行复杂图像分析的应用，如自动驾驶汽车、监控系统、机器人视觉等。
• 常用于开发需要实时图像处理和分析的软件。

6. 跨平台性

matplotlib:

• 主要用于生成图表和图形，跨平台性主要体现在不同操作系统上的图表渲染。

opencv:

• 跨平台性体现在能够在多种操作系统上运行，并且能够与多种硬件接口，如摄像头、图像传感器等。

其他：请问翻译英文文献用什么软件好呢？

A：师兄推荐的小绿鲸APP

• 上手简单：对新手用户友好，核心功能永久免费。
• 多引擎翻译：内置多种翻译引擎，支持划词翻译、全文翻译和截图翻译，满足不同翻译需求。
• 笔记和批注：支持大纲和思维导图模式的笔记，方便用户整理和回顾文献要点。
• 文献管理：提供文献题录信息展示和文件夹管理功能，方便用户分类和检索文献。
• AI解析文献重点：基于AI技术提取文献的核心要点和结构，帮助用户快速把握文献内容。
• 云端同步：支持电脑和平板间的同步阅读，提供云端存储空间，方便用户随时随地访问文献。