От нуля до AI-анализатора изображений за 5 минут: руководство для начинающих

Хотите знать, как создать анализатор изображений AI? Тогда читайте эту статью до конца! Я собираюсь показать вам, как очень просто создавать инструменты анализатора ИИ, так что вам практически не потребуется никаких предварительных знаний. Я расскажу вам шаг за шагом, и мы будем использовать Project IDX и API Gemini. Это означает, что вам не нужно ничего настраивать; все, что мы будем делать, находится в облаке. Если вы готовы, то приступим!

Посетите мой канал на YouTube

Начало работы с проектом IDX

Первый шаг довольно прост. Нам нужно открыть сайт idx.google.com . Если вы еще не зарегистрировались, сначала вам необходимо зарегистрироваться, а затем вы увидите экран ниже.

1. Выберите шаблон: я выберу шаблон Gemini API.

   
   

2. Назовите свой проект: я назову его «тест 2024».

   
   

3. Выберите среду: я выберу «Vite», среду веб-приложений JavaScript.

   
   

4. Создайте проект: нажмите кнопку «Создать».

   
   

   

Через несколько минут IDX все создаст за нас, и мы увидим наши файлы шаблонов, которые мы можем изменять по своему усмотрению.

Изменение шаблона

Это наш файл index.html. Мы можем изменить его по своему усмотрению, но давайте сначала посмотрим на него. Исходный шаблон содержит практически все, что нам нужно. В этом шаблоне используется модель Gemini 1.5-flash, поэтому нам этого более чем достаточно.

Получение API-ключа

Как видите, приложение изначально не работает, поскольку сначала нам нужно получить ключ API. Перейти на сайт https://aistudio.google.com/app/apikey , и получите там свой ключ. Если вам нужны подробные инструкции о том , как получить ключ API , посмотрите еще одно видео о Project IDX.

Получив ключ, скопируйте его и перейдите к файлу main.js. Замените заполнитель своим ключом API.

Тестирование приложения

Давайте проверим, работает ли наше приложение. Нажмите «Go» и посмотрите, что нам вернет Gemini.

Как видите, Близнецы понимают, что находится на картинке, и предлагают несколько рецептов выпечки такой выпечки. Поскольку это приложение уже находится на сервере, вы сможете поделиться ссылкой или открыть это приложение в своем браузере.

URL-адрес еще не красив; однако вы увидите, что все работает, и сможете поделиться этой ссылкой со своими партнерами или коллегами.

Добавление функции загрузки изображений

Чтобы завершить наш анализатор изображений AI, нам нужно иметь возможность добавлять собственное изображение. Давайте внесем некоторые изменения в шаблон; сначала идет файл index.html:

1. Измените имя приложения: я назову его «Анализатор изображений AI».

   
   

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».

Мой пример изображения.

Результат:

Как видите, API Gemini объясняет все об изображении. Наш анализатор изображений AI работает!

Заключение

Вот и все! Как видите, создать анализатор изображений AI с использованием Project IDX и API Gemini очень просто. Вы можете сделать кучу разных приложений. Это всего лишь один пример. Надеюсь, вы найдете эту статью полезной и информативной. Пожалуйста, не забудьте поделиться своим мнением в комментариях ниже.

Спасибо и до встречи в моих следующих статьях! :)