8岁女孩45分钟用Cursor打造聊天机器人

8岁女孩45分钟用Cursor打造聊天机器人 8岁女孩45分钟用Cursor打造聊天机器人 Modified October 1, 2024 键入 npm run dev（运行项目的“dev”脚本，通常用于启动开发模式，包含热更新和调试功能）。运行后浏览器出现 Hello Hono! 字样 2. 修改问候语 在聊天框输入“say harry potter instead of hello hono” (“把hello hono 替换为 harry potter”) 点击 “Apply” (“应用”) 键后，聊天框中生成的代码串将自动替换到脚本的对应位置里 浏览器出现的问候语由 hello hono 变为 harry potter 3. 调整文字位置 在聊天框输入“put harry potter in the middle of the screen” (“把 harry potter 放在屏幕中央”) 应用代码后，浏览器的 Harry Potter 位置成功调整 4. 增加文本框 在聊天框输入“add a text box” (“增加一个文本框”) 应用代码后，浏览器 Harry Potter 下方出现了一个文本框 5. 接入AI对话功能 在聊天框输入“can you make a Ai from cloudflare for the person to talk to” (“你能接入cloudflare公司的AI来和用户对话吗”) 应用代码后，回到浏览器页面，在文本框发送“hi” 浏览器返回AI回答内容，与用户进行对话 6. 添加加载指示符 在聊天框输入“can i have a little lightining bolt spinning around for the loading icon for when its typing the message” (“当它在回答问题的时候，我想要一个旋转的小闪电作为加载符号”) 应用代码后，用户输入并发送问题，AI大模型回答过程中，会出现一个黄色的小闪电在屏幕上旋转 7. 展现用户对话 在聊天框输入“can you show the conversation” (“你能把对话展现出来吗”) 应用代码后，用户的输入和AI的反馈以对话形式被展现出来 8. 修改优化页面背景 在聊天框输入“can you make the background gray with black glasses with a lightning scar above each of them” (“你能把背景设置成灰色，上面有黑色眼镜，并且每个镜片上都有一道闪电形状纹路吗？”) 应用代码后，网页背景变为灰色，但眼镜没画出来 在聊天框输入“have the background be gray with black and yellow dots, and delete the glasses and scar” (“在灰色背景上添加黑黄相间的点，并把眼镜和闪电纹去掉”) 应用代码后，网页背景灰色背景上添加了黑黄相间的点，并把没画好的眼镜删除了 在聊天框输入“can you have the dots bigger and can they move” (“你能让这些点变大点，让它们动起来吗”) 应用代码后，圆点变大了，并且在屏幕上移动 You don't have permission to access this synced block. Please log in and try again. Log In 键入 npm run dev（运行项目的“dev”脚本，通常用于启动开发模式，包含热更新和调试功能）。运行后浏览器出现 Hello Hono! 字样 2. 修改问候语 在聊天框输入“say harry potter instead of hello hono” (“把hello hono 替换为 harry potter”) 点击 “Apply” (“应用”) 键后，聊天框中生成的代码串将自动替换到脚本的对应位置里 浏览器出现的问候语由 hello hono 变为 harry potter 在聊天框输入“say harry potter instead of hello hono” (“把hello hono 替换为 harry potter”) 点击 “Apply” (“应用”) 键后，聊天框中生成的代码串将自动替换到脚本的对应位置里 浏览器出现的问候语由 hello hono 变为 harry potter 3. 调整文字位置 在聊天框输入“put harry potter in the middle of the screen” (“把 harry potter 放在屏幕中央”) 应用代码后，浏览器的 Harry Potter 位置成功调整 在聊天框输入“put harry potter in the middle of the screen” (“把 harry potter 放在屏幕中央”) 应用代码后，浏览器的 Harry Potter 位置成功调整 4. 增加文本框 在聊天框输入“add a text box” (“增加一个文本框”) 应用代码后，浏览器 Harry Potter 下方出现了一个文本框 在聊天框输入“add a text box” (“增加一个文本框”) 应用代码后，浏览器 Harry Potter 下方出现了一个文本框 5. 接入AI对话功能 在聊天框输入“can you make a Ai from cloudflare for the person to talk to” (“你能接入cloudflare公司的AI来和用户对话吗”) 应用代码后，回到浏览器页面，在文本框发送“hi” 浏览器返回AI回答内容，与用户进行对话 在聊天框输入“can you make a Ai from cloudflare for the person to talk to” (“你能接入cloudflare公司的AI来和用户对话吗”) 应用代码后，回到浏览器页面，在文本框发送“hi” 浏览器返回AI回答内容，与用户进行对话 6. 添加加载指示符 在聊天框输入“can i have a little lightining bolt spinning around for the loading icon for when its typing the message” (“当它在回答问题的时候，我想要一个旋转的小闪电作为加载符号”) 应用代码后，用户输入并发送问题，AI大模型回答过程中，会出现一个黄色的小闪电在屏幕上旋转 在聊天框输入“can i have a little lightining bolt spinning around for the loading icon for when its typing the message” (“当它在回答问题的时候，我想要一个旋转的小闪电作为加载符号”) 应用代码后，用户输入并发送问题，AI大模型回答过程中，会出现一个黄色的小闪电在屏幕上旋转 7. 展现用户对话 在聊天框输入“can you show the conversation” (“你能把对话展现出来吗”) 应用代码后，用户的输入和AI的反馈以对话形式被展现出来 在聊天框输入“can you show the conversation” (“你能把对话展现出来吗”) 应用代码后，用户的输入和AI的反馈以对话形式被展现出来 8. 修改优化页面背景 在聊天框输入“can you make the background gray with black glasses with a lightning scar above each of them” (“你能把背景设置成灰色，上面有黑色眼镜，并且每个镜片上都有一道闪电形状纹路吗？”) 应用代码后，网页背景变为灰色，但眼镜没画出来 在聊天框输入“can you make the background gray with black glasses with a lightning scar above each of them” (“你能把背景设置成灰色，上面有黑色眼镜，并且每个镜片上都有一道闪电形状纹路吗？”) 应用代码后，网页背景变为灰色，但眼镜没画出来 在聊天框输入“have the background be gray with black and yellow dots, and delete the glasses and scar” (“在灰色背景上添加黑黄相间的点，并把眼镜和闪电纹去掉”) 应用代码后，网页背景灰色背景上添加了黑黄相间的点，并把没画好的眼镜删除了 在聊天框输入“have the background be gray with black and yellow dots, and delete the glasses and scar” (“在灰色背景上添加黑黄相间的点，并把眼镜和闪电纹去掉”) 应用代码后，网页背景灰色背景上添加了黑黄相间的点，并把没画好的眼镜删除了 在聊天框输入“can you have the dots bigger and can they move” (“你能让这些点变大点，让它们动起来吗”) 应用代码后，圆点变大了，并且在屏幕上移动 在聊天框输入“can you have the dots bigger and can they move” (“你能让这些点变大点，让它们动起来吗”) 应用代码后，圆点变大了，并且在屏幕上移动 You don't have permission to access this synced block. Please log in and try again. Log In 1. 启动开发者模式