Hey各位privacy-conscious developers和AI enthusiasts！今天要proudly introduce我的latest project——Dialog Builder with OpenAI，这次是100% pure JavaScript and HTML构建，而且你的API keys只保存在local browser，我们完全不store任何sensitive data！马上体验demo 👉 https://dialogs.brandon.my/

我知道很多developers都worried about sharing API keys with third-party services。所以这个project采用了完全前端实现的设计理念：

• 你的OpenAI API key只存在localStorage，永远不会发送到我的server.
• 所有API calls直接从你的browser发出，完全bypass backend.
• 对话设计自动保存到local storage，即使refresh page也不会丢失数据.

这个project完全使用vanilla JS + HTML + CSS构建，主要技术亮点：

// Example of local API key handling
const saveAPIKey = (key) => {
  localStorage.setItem('openai_api_key', key);
  console.log('API key saved locally only!');
};

// All API calls made directly from client
const fetchAIResponse = async (prompt) => {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('openai_api_key')}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{role: "user", content: prompt}]
    })
  });
  return await response.json();
};

---

为保障你的API key安全，我们实现了多重保护：

• 🔐 API key模糊显示，默认显示为asterisks.
• ⚠️ 清除本地数据按钮，一键清除所有sensitive information.
• 🌐 所有请求直接发送到OpenAI，无中间server参与.

---

如何使用 | How to Use

1. 访问https://dialogs.brandon.my/
2. 输入你的OpenAI API key（只保存在你的浏览器）.
3. 开始构建对话流程，实时测试AI响应.
4. 导出HTML代码，直接嵌入你的网站.

所有操作都在你的浏览器内完成，完全无需担心数据隐私！

---

适合场景 | Perfect Use Cases

这个tool特别适合：

• 🏢 企业内部工具开发，无需部署backend.
• 🎓 教育演示用途，学生可以安全地学习AI integration.
• 🔧 快速原型开发，快速验证对话流程设计.
• 🌐 静态网站集成，即使只有HTML也能拥有AI功能.

---

未来规划 | Future Roadmap

虽然已经是pure client-side，但我们还有更多计划：

• IndexedDB存储 – 支持更大规模的对话数据存储.
• Service Worker缓存 – 实现完全离线功能.
• Web Components版本 – 更容易嵌入其他项目.
• 本地模型集成 – 支持WebLLM等本地运行模型.

---

结语 | Final Thoughts

在这个data privacy越来越重要的时代，client-side AI solutions绝对是未来趋势。我的Dialog Builder就是一个很好的起点，让你在享受AI强大功能的同时，完全掌控自己的数据。

🎯 立即尝试：https://dialogs.brandon.my/
💡 记住：你的API key永远只留在你的设备上！
GitHub: https://github.com/phototix/OpenAI-TTS-Dialog

P.S. 如果你喜欢这个project，记得star我的GitHub repo哦！

各位朋友，你们有没有发现，现在很多软件都变成subscription-based了？Every month都要扣钱，真的很sian啊！💸 尤其像我这种搞IT的，需要用到各种tools，subscription fees加起来可以买很多碗laksa了咧！

But guess what？自从我开始用AI来generate code，我都不需要花更多的钱去买软件和电脑里的工具了！Self Built Apps 怎么做？都用AI给我生成出来。

以下是一些我自己已经建立的Web Apps 和 一些辅助工具来自社群：Self Built Apps

Open Source Apps I Use:

• Open WebUI – 管理我的AI models
• NextCloud – 自己的cloud storage，不用给Google Drive钱
• Joplin – Note-taking app，sync去自己的serverSelf Built Apps

总结一下：Why This Approach Rocks 🚀

1. Cost Savings：省下几百块的subscription fees every year
2. Customization：可以customize到完完全全符合我的需求
3. Learning Opportunity：在build的过程中学到超多新skills
4. Independence：不用被大公司lock-in，我的data我做主

所以啦，各位tech朋友，不要再傻傻付subscription了！Leverage AI的力量，build你自己的tools吧！如果你们有兴趣学how to do this，可以留言让我知道，我可能consider做一个小型的workshop哦！😉

Yo，各位拖延症晚期患者 & 生产力工具控！今天我要分享一个超级简单但极度实用的自动化方案——用 WhatsApp 打造个人专属任务管理系统！是的，你没看错，连App都不用装，直接在WhatsApp里收每日任务提醒、早晨鸡汤（误）、晚间总结，甚至还能帮你记录完成情况！

---

🤔 为什么搞这个？

因为我懒！但又不想完全摆烂（偶尔还是要装一下自律）。市面上太多任务管理App，但每次都要打开另一个软件？太麻烦了啦！ 既然我每天泡在WhatsApp里（谁不是？），那就让任务提醒直接怼到我脸上！

⚙️ 怎么运作？

• 每天早上8点：从数据库拉取今日任务 + 随机一句毒鸡汤（例如：“今天的你，和昨天的你一样烂，但没关系！继续努力！”），通过WhatsApp发给我。
• 任务完成时：我直接回复 ✅ [任务ID]，捕捉消息，更新数据库。
• 晚上10点： 汇总今日完成情况，计算生产力分数（自我欺骗用），并发送总结+明日预告。

---

🚀 效果如何？

• 零学习成本：不用学新软件，直接WhatsApp聊天式操作。
• 极度个性化：任务逻辑、鸡汤语录、总结格式全自定义（我甚至加了天气提醒和生日提醒）。
• 免费或极低成本：WhatsApp API 用量少的话几乎不要钱。

---

😈 要不要试试？

如果你也懒得开一堆App，但又想假装高效，这个方案绝对适合你！

---

总结：用自动化工具把琐事丢给机器，人类负责躺平+创造！如果你也搞了类似的操作，欢迎交流——或者吐槽我的简陋设计！🤣

🚨 免责声明：此方案可能导致你变得更懒，本人概不负责。

---

P.S. 代码？哼，才不直接给你！自己动手丰衣足食～（付费客户另谈，谢谢 😏）