DEV Community
·
使用Chrome的Prompt API在Angular中生成旅行规划器
💡
原文英文，约1800词，阅读约需7分钟。
📝
内容提要
本文介绍如何使用Chrome内置的Prompt API和Angular构建旅行规划应用。该应用利用Prompt API查询Gemini Nano，获取旅行签证、打包衣物和每日景点等信息。Chrome的AI服务免费，适用于Chrome Dev或Canary浏览器，其他浏览器需备用实现。文章提供了详细的安装和配置步骤。
🎯
关键要点
- 本文介绍如何使用Chrome内置的Prompt API和Angular构建旅行规划应用。
- 该应用利用Prompt API查询Gemini Nano，获取旅行签证、打包衣物和每日景点等信息。
- Chrome的AI服务免费，适用于Chrome Dev或Canary浏览器，其他浏览器需备用实现。
- 文章提供了详细的安装和配置步骤，包括更新Chrome版本和启用Gemini Nano。
- 开发者需要安装依赖项以支持TypeScript类型定义，便于编写优雅的代码。
- 应用程序配置中定义了环境提供者，以便访问Prompt API。
- 实现了浏览器版本和API可用性的验证逻辑，确保用户界面在API可用时显示。
- DetectAIComponent用于渲染PromptShowcaseComponent，处理错误信息。
- PromptResponseComponent允许用户输入查询并提交给Gemini Nano生成文本答案。
- SystemPromptsComponent允许用户更新系统提示，以指导Gemini Nano的行为。
- BasePromptComponent提供提交功能和状态信号，处理用户查询和响应。
- SystemPromptService封装了Prompt API的逻辑，管理会话的创建和销毁。
- 文章结尾强调软件工程师可以创建Web AI应用，而无需设置后端服务器或承担云端LLM的成本。
❓
延伸问答
如何使用Chrome的Prompt API构建旅行规划应用？
可以通过Angular调用Chrome的Prompt API，向Gemini Nano提交查询以获取旅行签证、打包衣物和每日景点等信息。
Chrome的AI服务有什么优势？
Chrome的AI服务是免费的，适用于Chrome Dev或Canary浏览器，使用本地模型无需额外成本。
如何确保Prompt API在浏览器中可用？
需要验证浏览器是否为Chrome，版本是否在131及以上，并确保ai对象在window命名空间中可用。
如何处理用户输入的查询并获取响应？
使用PromptResponseComponent组件，用户输入查询后点击提交按钮，查询将发送给Gemini Nano生成文本答案。
如何在Angular应用中配置Prompt API？
在应用配置中定义环境提供者，以便访问Prompt API，并确保在使用时能够正确调用其方法。
开发旅行规划应用需要哪些依赖项？
需要安装@types/dom-chromium-ai依赖项，以支持TypeScript类型定义，便于编写代码。
🏷️
标签
➡️
