5 分钟内从零开始掌握 AI 图像分析仪：初学者指南

您想知道如何构建 AI 图像分析器吗？那就把这篇文章读到最后吧！我将向您展示如何非常简单地构建 AI 分析器工具，因此您几乎不需要任何先验知识。我将一步一步地指导您，我们将使用 Project IDX 和 Gemini API。这意味着您无需设置任何东西；我们要做的所有事情都在云端。如果您准备好了，那就开始吧！

访问我的 YouTube 频道

Project IDX 入门

第一步很简单。我们需要打开网站idx.google.com 。如果你还没有注册，你必须先注册，然后你才能看到下面的屏幕。

1. 选择模板：我将选择 Gemini API 模板。

   
   

2. 给您的项目命名：我将其命名为“test 2024”。

   
   

3. 选择环境：我将选择“Vite”，它是一个 JavaScript Web 应用程序环境。

   
   

4. 创建项目：按下创建按钮。

   
   

   

几分钟后，IDX 将为我们创建所有内容，我们将看到我们的模板文件，我们可以根据需要进行修改。

修改模板

这是我们的 index.html 文件。我们可以按照自己喜欢的方式进行修改，但让我们先看一下它。初始模板几乎包含了我们需要的所有内容。此模板使用 Gemini 1.5-flash 模型，因此对我们来说已经足够了。

获取 API 密钥

如您所见，该应用程序最初无法运行，因为我们需要先获取 API 密钥。转到网站https://aistudio.google.com/app/apikey ，并在那里获取您的密钥。如果您需要有关如何获取 API 密钥的详细说明，请观看有关 Project IDX 的另一个视频。

获取密钥后，复制它，然后转到main.js文件。将占位符替换为您的 API 密钥。

测试应用程序

让我们检查一下我们的应用程序是否正常工作。按“Go”，看看 Gemini 返回了什么。

如您所见，Gemini 了解图片中的内容，并推荐一些烘焙此类面包的食谱。由于此应用程序已在服务器上，因此您可以共享链接或在浏览器中打开此应用程序。

该 URL 还不够美观；但是，您将能够看到一切正常，并且您可以与您的合作伙伴或同事共享此链接。

添加图片上传功能

为了完成我们的 AI 图像分析器，我们需要能够添加自己的图像。让我们对模板进行一些调整；首先是 index.html 文件：

1. 更改应用程序名称：我将其称为“AI Image Analyzer”。

   
   

2. 删除 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>

3. 添加用于上传图片的输入字段。第 15 行

<input type="file" id="fileInput" name="file">

4. 将输入名称提示值更改为“询问有关此图像的任何疑问”。

生成的 HTML 应该如下图所示。

更新 JavaScript

我们需要定义 JavaScript 代码来读取我们的文件。打开main.js文件，并进行以下更改：

1. 删除第 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)));

2. 从第 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 图像分析器非常简单。您可以制作许多不同的应用程序。这只是一个例子。我希望您觉得这篇文章有用且信息丰富。请不要忘记在下面的评论中分享您的反馈。

谢谢，我们下篇文章再见！:)