使用AI生成项目仪表板:Dictate Button的技术实践

本文详细介绍了使用多种AI平台(如Gemini、v0、Bolt)生成Dictate Button项目仪表板的过程,包括技术栈选择、Firebase集成、性能优化及开发挑战,展示了AI在Web开发中的实际应用与迭代改进。

Dictate Button - 独立开发者

发布仪表板(2025年8月10日)

我最近写了关于AI生成实验的文章,现在很高兴分享结果。欢迎访问 dash.dictate-button.io,这是Dictate Button服务的仪表板。当然,它离理想状态还很远,但立即发布将帮助我收集反馈并不断改进。请尝试并提供反馈,同时我会继续构建…

使用AI生成项目仪表板(2025年8月7日)

我尝试了4个AI平台来为dictate-button.io生成仪表板,以下是最终结果…

根据我朋友的建议,我首先去了Gemini,要求它创建一个合适的提示:“为AI创建一个提示,用于开发仪表板和用户账户以生成API密钥。数据库应为Firebase Firestore。登录使用Firebase Auth。技术栈为TypeScript、Next.js、Tailwind 4和shadcn组件。设计应类似https://dictate-button.io/”

Gemini创建了一个详细的一页提示,包含所有要求。我首先发送到Google AI Studio,但它生成的不是我要求的——模拟了Firebase逻辑并跳过了Next.js要求。最糟糕的是它没有在历史中保存项目。

我还尝试了Gemini Studio,希望它能更好地处理Firebase逻辑。Gemini Studio模拟了Firebase Auth逻辑,跳过了创建认证表单和应用布局,添加了不必要的Genkit AI代码,最后以"抱歉,我无法帮助您"结束。

接下来我尝试了v0。它处理得足够好,尽管我需要几次额外迭代来修复它生成的Firebase连接逻辑。截图:https://www.dropbox.com/scl/fi/cfijs34zg7f2lkl6nopom/v0.jpeg

最后,我尝试了Bolt,它生成了一个坚实的基础,在修复Firebase Firestore访问规则后开始正常工作。截图:https://www.dropbox.com/scl/fi/cs3h6fyauco8my69hjsad/bolt.jpeg

尽管v0和Bolt的解决方案都足够好,但我选择了Bolt的,因为它的冷启动性能更好。

现在我正在用Claude Code完成仪表板。有趣的是,我已经从Firebase切换到Supabase。

无论如何,我很快就能展示最终版本,请保持关注!

发布Dictate Button前端0.2.0版本(2025年7月29日)

在这个版本中,我引入了独占和包含自动注入模式。更多信息请参阅文档。对使用先前版本的用户没有任何破坏性更改。

还对API性能进行了一些调整。注意到内存量完全不影响性能,但核心数量直接影响性能,增加一个虚拟核心可使性能提升2倍。

将继续构建…

介绍Dictate Button(Beta)(2025年7月28日)

dictate-button.io是一个微服务,通过听写功能增强网站文本字段。

它是一个可定制的、框架无关的 Web组件,以及一个将其注入网站文本字段的脚本,和一个将语音转换为文本的后端API。

后端目前使用本地LLM模型。它是自托管的并且完全Docker化。

前端是开源的,因此用户可以自定义和适应其环境:👉 https://github.com/kkomelin/dictate-button

以下是我的路线图:

  • 开发用户账户和仪表板
  • 添加可选过滤器(如语法校正)
  • 添加不同的注入脚本(如默认增强所有或无字段)
  • 与用户交流
  • 与更多用户交流
  • 与更多用户交流 😅

如果您有兴趣关注我的进展,请加入等待列表:👉 https://dictate-button.io/#join-waitlist

当然,任何反馈都将非常感激!

关于

语音输入正在完全取代文本输入。独立的音频笔记应用在忙碌的人群中非常流行。我相信通过将听写功能直接集成到网站文本字段中,我们可以改善用户体验。

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计