您想知道如何构建 AI 图像分析器吗？那就把这篇文章读到最后吧！我将向您展示如何非常简单地构建 AI 分析器工具，因此您几乎不需要任何先验知识。我将一步一步地指导您，我们将使用 Project IDX 和 Gemini API。这意味着您无需设置任何东西；我们要做的所有事情都在云端。如果您准备好了，那就开始吧！ https://youtu.be/kBNwTIoYwr8?si=x1eco-nEqgurQ13r&embedable=true 访问我的 YouTube 频道 Project IDX 入门 第一步很简单。我们需要打开网站 。如果你还没有注册，你必须先注册，然后你才能看到下面的屏幕。 idx.google.com 选择模板：我将选择 Gemini API 模板。 给您的项目命名：我将其命名为“test 2024”。 选择环境：我将选择“Vite”，它是一个 JavaScript Web 应用程序环境。 创建项目：按下创建按钮。 几分钟后，IDX 将为我们创建所有内容，我们将看到我们的模板文件，我们可以根据需要进行修改。 修改模板 这是我们的 index.html 文件。我们可以按照自己喜欢的方式进行修改，但让我们先看一下它。初始模板几乎包含了我们需要的所有内容。此模板使用 Gemini 1.5-flash 模型，因此对我们来说已经足够了。 获取 API 密钥 如您所见，该应用程序最初无法运行，因为我们需要先获取 API 密钥。转到网站 并在那里获取您的密钥。如果您需要有关 的详细说明，请观看有关 Project IDX 的另一个视频。 ， https://aistudio.google.com/app/apikey 如何获取 API 密钥 获取密钥后，复制它，然后转到 文件。将占位符替换为您的 API 密钥。 main.js 测试应用程序 让我们检查一下我们的应用程序是否正常工作。按“Go”，看看 Gemini 返回了什么。 如您所见，Gemini 了解图片中的内容，并推荐一些烘焙此类面包的食谱。由于此应用程序已在服务器上，因此您可以共享链接或在浏览器中打开此应用程序。 该 URL 还不够美观；但是，您将能够看到一切正常，并且您可以与您的合作伙伴或同事共享此链接。 添加图片上传功能 为了完成我们的 AI 图像分析器，我们需要能够添加自己的图像。让我们对模板进行一些调整；首先是 index.html 文件： 更改应用程序名称：我将其称为“AI Image Analyzer”。 删除 HTML：删除预定义的图像。第 14 行至第 27 行。 <div class="image-picker"> <label class="image-choice"> <input type="radio" checked name="chosen-image" value="/baked_goods_1.jpg"> <img src="/baked_goods_1.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_2.jpg"> <img src="/baked_goods_2.jpg"> </label> <label class="image-choice"> <input type="radio" name="chosen-image" value="/baked_goods_3.jpg"> <img src="/baked_goods_3.jpg"> </label> </div> 添加用于上传图片的输入字段。第 15 行 <input type="file" id="fileInput" name="file"> 将输入名称提示值更改为“询问有关此图像的任何疑问”。 生成的 HTML 应该如下图所示。 更新 JavaScript 我们需要定义 JavaScript 代码来读取我们的文件。打开 文件，并进行以下更改： main.js 删除第 22 行至第 26 行的代码。 // Load the image as a base64 string let imageUrl = form.elements.namedItem('chosen-image').value; let imageBase64 = await fetch(imageUrl) .then(r => r.arrayBuffer()) .then(a => Base64.fromByteArray(new Uint8Array(a))); 从第 22 行开始添加新代码。 // Load the image as a base64 string const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const imageBase64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { const base64String = reader.result.split(',')[1]; // Extract base64 part resolve(base64String); }; reader.onerror = reject; }); 您的应用程序将如下面的屏幕截图所示。 最终测试 让我们检查一下结果。上传一张图片，询问图片上的内容，然后按“Go”。 我的图像示例。 结果： 如您所见，Gemini API 解释了有关图像的所有内容。我们的 AI 图像分析器正在运行！ 结论 就是这样！如您所见，使用 Project IDX 和 Gemini API 构建 AI 图像分析器非常简单。您可以制作许多不同的应用程序。这只是一个例子。我希望您觉得这篇文章有用且信息丰富。请不要忘记在下面的评论中分享您的反馈。 谢谢，我们下篇文章再见！:)
