DEV Community
·
使用Chrome的Prompt API在Angular中生成旅行规划器
内容提要
本文介绍如何使用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的优势
使用Chrome的Prompt API构建旅行规划应用的最大优势在于其零成本。开发者可以利用Chrome Dev或Canary浏览器的本地模型，无需额外的云服务费用。这使得小型项目或个人开发者能够轻松实现AI功能，降低了技术门槛。
浏览器兼容性的重要性
文章提到，Chrome内置的AI服务仅在特定版本的浏览器中可用，开发者需确保用户使用的是Chrome 131及以上版本。对于使用其他浏览器的用户，必须提供备用实现。这一要求强调了浏览器兼容性在Web应用开发中的重要性，开发者需提前做好兼容性测试。
系统提示的灵活性
在应用中，用户可以自定义系统提示，以指导Gemini Nano的行为。这种灵活性使得应用能够根据不同用户的需求提供个性化的旅行建议，提升用户体验。开发者应考虑如何设计系统提示，以便更好地满足用户的具体需求。
延伸问答
如何使用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类型定义，便于编写代码。
