纯JS+HTML打造！本地运行Dialog Builder with OpenAI

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哦！