1. 作品基础信息
-
作品名称： 异地牵绊 —— 留守儿童专属故事机
-
参赛赛道： 公益赛道 (More Than Coding / Code With SOLO)
-
参赛身份： 在校学生
-
一句话简介： 一款零依赖、纯前端的 AI 睡前故事生成器。异地打工的父母只需输入简单关键词，即可快速生成包含父母嘱托的定制化睡前故事，并使用浏览器原生语音直接播放给孩子听。
2. 创作背景与痛点（Why this project?） 随着城市化进程，许多父母不得不外出务工，留守儿童群体面临着长期的情感缺失。夜晚睡前往往是孩子们最需要陪伴、最容易感到孤独的时刻。
-
痛点 1： 异地父母工作繁忙，文化程度参差不齐，难以每天编撰高质量的睡前故事。
-
痛点 2： 市面上的故事机内容固化，缺乏针对孩子当前生活状态的“个性化嘱托”。
-
痛点 3： 公益类下沉产品必须考虑成本和门槛，复杂的 App 下载或高昂的订阅费不切实际。
基于此，我希望利用大模型的能力，做一款极低门槛（打开网页即用）、极低成本（纯前端+免费 API）、极度温暖（专属定制）的 AI 工具。
3. 核心功能演示（Features & Demo）
-
宝贝信息定制： 父母只需输入孩子的名字、年龄、兴趣标签（如“奥特曼”、“画画”），并写下一句想说的话（如：“今天降温了，记得多穿衣服”） -
温暖故事生成： AI 化身“故事婆婆”，生成 300-500 字的专属童话，结尾自然融入父母的嘱托。 -
原生语音播放： 无需昂贵的第三方 TTS 接口，直接调用浏览器原生的 Web Speech API进行中文语音朗读。 -
隐私与本地配置： 用户的 API Key（支持 DeepSeek, OpenAI, 通义等兼容接口）仅保存在浏览器 localStorage中，绝不上传，保障隐私。. 我是如何使用 SOLO 完成创作的（Prompt 揭秘） 本项目主打 “零依赖、零构建”，双击index.html即可运行。在开发过程中，我重度依赖了 SOLO 强大的前端代码生成能力。 -
关键 Prompt 记录：第一轮（搭骨架）：“我需要做一个留守儿童专属的睡前故事生成器网页。要求纯前端，零构建（不需要 Node.js），样式使用 Tailwind CSS 的 CDN。页面需要包含：标题、表单（填孩子名字、年龄、兴趣爱好标签、父母嘱托）、生成按钮、故事展示区和播放按钮。请帮我写出完整的
index.html。”第二轮（接大模型）：“请在这个网页的基础上，帮我用 Vanilla JS 接入 OpenAI 兼容的 API（比如 DeepSeek）。系统 Prompt 设定为一位名叫‘故事婆婆’的儿童文学作家。要求语言温暖，结构为‘小小冒险 → 温暖转折’，最关键的是必须在故事结尾自然融入父母输入的嘱托。”
第三轮（加语音与设置）：“为网页增加语音播放功能，使用浏览器自带的 Web Speech API。另外，增加一个右上角的齿轮图标弹窗，允许用户配置自己的 API Key 和 Base URL，并存入 localStorage 中。”
SOLO 的表现： SOLO 不仅一次性给出了结构清晰的 HTML 和 JS 代码，还在 Tailwind 样式的搭配上给出了温暖的渐变色背景（从琥珀到玫瑰色），极大地节省了我的开发和联调时间。
5. 技术架构解析 项目采用了极致轻量化的纯前端架构：
-
前端 UI： HTML5 + Tailwind CSS (CDN 引入)，适配移动端（考虑到父母多用手机操作）。
-
核心逻辑： Vanilla JavaScript，不依赖任何框架。
-
模型通信： Fetch API 直接发起 HTTPS 请求，流式/非流式接收 LLM 返回内容。
-
语音合成： 巧妙使用
window.speechSynthesis，规避了高昂的云端 TTS API 成本。
6. 参赛心得与未来展望 在这次 SOLO 挑战赛中，我最大的感触是：AI 工具极大地缩短了“公益灵感”到“产品落地”的距离。 以往即使有一个好点子，全栈开发的门槛也会让人望而却步；但现在有了 SOLO 的辅助，我可以在几个小时内把一个纯前端的构思完整跑通。
无论距离多远，爱都不应缺席。希望这个小小的网页，能借由 AI 的力量，为远方的孩子们带去一丝睡前的温暖。也希望大家多多支持，如果有改进建议，欢迎在评论区交流！
-
源码仓库：