发布于 2026-01-06 5 阅读
0

⚡HabitForge AI——让你的新年决心变成看得见的现实👀

⚡HabitForge AI——让你的新年决心变成看得见的现实👀

这是提交给Google AI Studio 多模态挑战赛的作品。

我建造的

着陆页

HabitForge AI 是一款旨在解决个人发展中一个根本性挑战——动机差距——的 Web 应用程序。

养成新习惯,无论好坏,都很难坚持,因为它们的长期影响在短期内是看不见的。HabitForge AI 通过提供即时、强大且个性化的未来自我可视化,弥补了这一差距。

它将“变得更健康”这一抽象目标转化为具体的、能引起情感共鸣的视觉形象,从而起到日常激励的作用。

核心能力

  • 创建以隐私为先的头像

用户安全上传照片后,人工智能会立即将其转换为风格化的虚拟形象(电影风格、动漫风格、吉卜力风格等)。这为用户提供了一个既个性化又私密的虚拟形象展示平台,既安全又有趣,而且值得分享。

  • 可视化习惯影响

用户一次最多可以选择三个习惯——全部为积极习惯或全部为消极习惯。该应用会将这些习惯在不同时间段(21 天至 5 年)内累积的生理、心理和环境影响可视化。👉

积极习惯展现出积极的改变。消极习惯则揭示了睡眠不足、无休止地刷手机或缺乏运动等选择所带来的隐性代价。

  • 自定义习惯养成

超越预设列表。用户最多可以添加两个自定义习惯(正面习惯和负面习惯各一个)。借助 Gemini API,应用可以即时分析习惯,生成精辟的描述,并实时生成定制化的可视化提示。

  • 探索“康复之路”

每一种不良习惯都有其潜在的抵消因素。用户只需轻轻一点,即可用更健康的习惯取代有害习惯,并立即看到由此产生的积极影响。

  • 人工智能驱动的教练

除了视觉效果之外,这款应用还兼具掌上健康教练的功能。针对任何习惯,它都能提供关键益处、常见误区以及切实可行的专业建议,帮助用户坚持下去。

  • 保存并分享旅程

转换可以是:

  • 已保存到应用内个人图库
  • 下载为引人注目的前后对比合成图
  • 直接分享给 X,以激励他人🌍

用户流程

该体验旨在做到直观、鼓舞人心且流畅:

  1. 着陆页

    • 它阐述了其使命:“今天就想象未来的自己。”
    • 清晰的行动号召:开启你的蜕变之旅
  2. 第一步:创建虚拟形象

    • 上传照片 → 选择艺术风格(动漫、电影、吉卜力等)。
    • Gemini 生成一个风格化的、注重隐私的头像
  3. 第二步:习惯选择与可视化

    • 头像显示在主可视化界面中。
    • 选择最多3 个习惯(积极的或消极的)。
    • 选择时间范围(21 天 → 5 年)。
    • 点击:展现你的蜕变
  4. 步骤三:揭晓

    • 通过前后对比滑块,可以展现变化。
    • 可见效果:皮肤更健康、精力更充沛,或减轻不良习惯带来的负面影响。
    • 背景会根据习惯而变化(例如,冥想→宁静的房间)。
  5. 参与和深化

    • 调整时间范围。
    • 获取人工智能专业技巧。
    • 尝试使用Path to Recovery交换。
    • 保存、下载或分享结果。

HabitForge AI 不仅可以追踪习惯,还能让你今天就面对未来的自己。


演示

🚀自己动手试试吧

将你的习惯组合可视化,保存前后对比图,并与世界分享结果🌍✨ :- HabitForge AI

📽️项目演示

这是我的视频演示,展示了 HabitForge AI 的所有主要功能:

📸项目截图

以下是展示 HabitForge AI 不同部分和核心功能的屏幕截图:

着陆页

上传您的图片

用户头像和习惯选择

习惯人工智能解释

不吃饭——不良习惯的人工智能洞察

习惯可视化

我的网站图库

不良习惯的代价可视化


我如何使用 Google AI Studio

Google AI Studio 不仅仅是 HabitForge AI 的辅助工具,它更是赋予整个小程序生命力的引擎。从功能设计、用户界面优化、代码编写到可视化逻辑构建,这个项目的方方面面都是通过与 AI Studio 的迭代协作完成的。它不仅仅是“代码生成”工具;它集我的共同创作者、艺术总监和习惯教练于一身。


🔑我使用 Google AI Studio 的主要方式

  • 端到端编码合作伙伴

我完全通过 AI Studio 的提示构建了整个应用程序——指定了功能、约束、特性和 UI 元素。它生成了代码,我直接将其集成到我的小程序中。

  • 迭代建议与测试

AI Studio提出了一些改进建议(功能、用户界面、可视化流程)。我逐一实现了这些建议,并在实际应用中进行了测试,最终只保留了真正有价值的改进。这种迭代过程确保了应用在保持不必要复杂性的前提下不断增强。

  • AI 扮演“艺术总监”🎨

    为了实现视觉转换,我为gemini-2.5-flash-image-preview模型设计了详细的指令。AI Studio 扮演了艺术总监的角色,指导:

    • 生理表现:习惯如何影响肤色、姿势和表情。
    • 强度变化:根据时间范围的不同,表现为细微的变化与剧烈的变化(21 天与 1 年)。
    • 环境叙事:改变背景(例如,极简的平静氛围,适合冥想)。
  • 我还反复测试了不同的教学风格,以观察模型如何解读诸如“补水带来的内在光彩”“冥想带来的微妙精神氛围”等微妙而抽象的概念。这种快速反馈循环使提示语能够像一位技艺精湛的艺术指导一样进行微调,确保可视化效果并非千篇一律,而是每个用户特定化身的逼真呈现。

  • 结构化且可靠的数据⚙️

我利用该工具gemini-2.5-flash,为习惯分析和健康洞察强制执行了严格的 JSON 模式。AI Studio 帮助我改进和测试了该工具responseSchema,消除了脆弱的字符串解析,并确保了用户界面输出的一致性和清晰度。

对于基于文本的功能,我还设计了结构化的提示,并测试了用于分析自定义习惯和生成辅导建议的 JSON 模式。这确保了用户界面能够无错误地显示可靠且结构化的输出。

  • 用户角色设计👥我将角色直接嵌入到提示信息中:
    • 习惯教练角色:一位享誉全球的教练,分析习惯并提供深刻的、激励人心的见解。
    • 艺术家角色:一位国际知名的艺术家,以极富创意的精准度将所选习惯的影响可视化。这两个角色协同工作——艺术家根据教练的反馈塑造视觉效果,使转变过程更加可信和易于理解

🔥凭借工程师和创意伙伴的双重角色,Google AI Studio 帮助我将 HabitForge AI 从一个想法转变为一个鲜活的、交互式的体验,人们可以看到、感受到并与之建立联系。


多模态特征

HabitForge AI 的核心在于谷歌的 Gemini 多模态处理能力,它将“图像 + 文本输入”与“图像 + 结构化数据输出”相结合。这种协同作用创造了一种深度个性化、私密且极具情感冲击力的用户体验。所有视觉和文本处理均通过特定的 Gemini 模型完成:

  • gemini-2.5-flash-image-preview→ 图像生成和头像/习惯可视化
  • gemini-2.5-flash→ 文本分析和结构化 JSON 输出

🌐核心多模态管道

  1. 注重隐私的头像创建(图片+文字→图片)

    • 用户操作:上传个人照片。
    • 应用程序操作:将图像连同文本提示(例如,“将此照片转换为动漫/电影/吉卜力风格的风格化头像……”)一起发送到gemini-2.5-flash-image-preview
    • AI 输出:返回一个风格化的头像,保留用户的主要特征,同时保护隐私。
    • 为什么这很重要
      • 确保隐私和信任(不存储原始照片)。
      • 打造个性化且可分享的体验。
      • 通过赏心悦目的虚拟形象鼓励用户参与互动。
  2. 动态习惯转变可视化(图像+文本→图像)

这就是 HabitForge AI 的核心。

  • 用户操作:选择最多 3 个习惯(积极的或消极的),并选择时间范围(21 天 → 5 年)。
  • 应用操作:将用户头像与动态生成的文本提示相结合,该文本提示编码如下:
    • 生理效应:肤色、姿势、精力、表情
    • 强度变化:短时间内变化不明显,长时间变化明显
    • 环境叙事:背景变化(例如,宁静的空间用于冥想,混乱的灯光用于深夜浏览)
  • AI 输出:通过生成的变换后的“之后”图像,gemini-2.5-flash-image-preview与原始图像一起显示在前后对比滑块中。
  • 为什么这很重要
    • 将抽象的习惯转化为切实可见的成果。
    • 能够引发情感共鸣,用户可以看到自己习惯带来的影响。
    • 比使用库存图片或纯文字建议更具激励性和沉浸感。

⚙️支持多模态功能(文本 → 结构化数据 / JSON)

  • 用户操作:输入自定义习惯(例如,“戒糖”“学习编程”)。
  • 应用操作gemini-2.5-flash:以严格的responseSchemaJSON 输出格式发送文本。
  • AI 输出:返回完整的习惯画像:
    • 习惯名称
    • 阳性/阴性分类
    • 影响描述概要
    • 头像编辑器的可视化提示
  • 为什么这很重要
    • 除了预定义的库之外,还允许用户自定义习惯。
    • 确保与用户界面进行结构化、可靠的集成。
    • 为每个用户旅程增添智能化和个性化元素。

🙏 感谢您关注 HabitForge AI!

✨ 欢迎您亲自体验,分享您的可视化之旅,或在下方评论区留下您的任何问题/想法,我很乐意倾听您的意见!💬

可爱的感谢gif

文章来源:https://dev.to/divyasinghdev/habitforge-ai-where-solutions-become-realities-you-can-see-4e8d