Как создать веб-приложение на базе искусственного интеллекта с помощью Next.js и TensorFlow.js: руководство
programming ai python next.js tensorflowjs ai-powered-web-apps nextjs-guide tensorflow-tutorial web-app-development

Как создать веб-приложение на базе искусственного интеллекта с помощью Next.js и TensorFlow.js: руководство

2 сентября 2024 г.

Это руководство призвано провести вас через создание веб-приложения на базе ИИ и продемонстрировать потенциал ИИ в повседневной веб-разработке. Искусственный интеллект (ИИ) производит революцию в современных веб-технологиях, делая их более инновационными и отзывчивыми. Внедряя ИИ, разработчики могут улучшить пользовательский опыт с помощью таких функций, как анализ данных в реальном времени, персонализированные рекомендации по контенту и расширенное распознавание изображений.

Next.js — это надежный фреймворк Reach, который позволяет разработчикам быстро создавать серверные и статические веб-приложения. Он предлагает отличную производительность, масштабируемость и бесперебойный опыт разработки. TensorFlow.js, с другой стороны, TensorFlow.js — это библиотека Javascript, которая позволяет обучать и запускать модели машинного обучения непосредственно в браузере.

Объединив Next.js и TensorFlow.js, вы сможете создавать сложные веб-приложения, использующие возможности искусственного интеллекта без необходимости создания обширной внутренней инфраструктуры.

К концу этого руководства вы создадите полностью функциональное веб-приложение на базе ИИ, способное выполнять задачи распознавания изображений. Вы получите практический опыт работы с Next.js и TensorFlow.js, научившись интегрировать модели машинного обучения в современный веб-фреймворк.

Это руководство даст вам навыки, необходимые для внедрения функций ИИ в ваши проекты, открывая новые возможности для инноваций и взаимодействия с пользователями.

Настройка окружающей среды

Предварительные условия:

  • Базовый JavaScript
  • Node.js
  • Редактор кода

Шаг 1: Настройка проекта

  • Во-первых, убедитесь, что в вашей системе установлен Node.js. Если вы еще этого не сделали, вы можете загрузить его сnodejs.org.

  • Затем создайте папку на своем ПК, например, в корневой папке Linux/Mac или Windows.

  • Линукс/Мак

Обычно ваши проекты размещают вProjectsкаталог в вашем домашнем каталоге.

  • Откройте VS Code на верхней панели, выберитеViewпрокрутите вниз до терминала и создайте папку с именемProjectsэто в терминал:

    mkdir -p ~/Проекты

и перейдите в папку проекта, выполнив:

cd Projects

Ваши проекты будут располагаться по таким путям:/home/your-username/Projects/my_project(Линукс)/Users/your-username/Projects/my_project(Мак)

Windows с использованием подсистемы Linux WSL

  • Откройте VS Code, нажмите F1 и выберите «Подключиться к WSL».

  • Следуйте тем же инструкциям, что и для Linux/Mac.

Шаг 2: Установка Next.js

Если вы еще не установили Next.js, вы можете создать новый проект Next.js с помощью следующей команды:

Установка Next.js:

npx create-next-app ai-web-app

Проверьте, работает ли приложение на данный момент:

npm run dev

Вы увидите приложение Next.js на странице.http://localhost:3000. Если это сработает, мы можем продолжить.

Установка TensorFlow.js:

npm install @tensorflow/tfjs @tensorflow-models/mobilenet

Структура проекта

ai-web-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   │   ├── api/
│   │   │   └── hello.js
│   │   ├── _app.js
│   │   ├── _document.js
│   │   ├── index.js
│   ├── styles/
│   │   ├── globals.css
│   │   ├── Home.module.css
│   ├── utils/
│   │   └── imageProcessing.js
├── .gitignore
├── package.json
├── README.md

Итак, нам нужно добавить следующий файл:

  • imageProcessing.js
  • Редактировать src/pages/index.js:

Сотрите весь код и добавьте следующий:

Часть 1: Импорт и инициализация состояния

  1. Импорт
  • Headотnext/head: Используется для изменения<head>раздел HTML.
  • stylesот../styles/Home.module.css: Импортирует модуль CSS для стилизации.
  • useStateотreact: Хук React для управления состоянием.
  • loadModelиloadImageот@/utils/imageProcessing: Вспомогательные функции для загрузки модели и изображения.
  1. Инициализация состояния

  • model: Состояние для хранения загруженной модели TensorFlow.

  • predictions: Состояние для хранения прогнозов, сделанных моделью.

    импортировать заголовок из "next/head"; импортировать стили из "../styles/Home.module.css"; импортировать { useState } из "react"; импортировать { loadModel, loadImage } из "@/utils/imageProcessing";

    экспортировать функцию по умолчанию Home() { const [model, setModel] = useState(null); const [predictions, setPredictions] = useState([]);

Часть 2: Обработка анализа изображений

  1. Функция handleAnalyzeClick:
  • Извлекает загруженный файл изображения.

  • Загружает изображение и передает его в модель для классификации.

  • Устанавливает состояние прогнозов с результатами.

    const handleAnalyzeClick = async () => { const fileInput = document.getElementById("image-upload"); const imageFile = fileInput.files[0];

    if (!imageFile) {
  alert("Please upload an image file.");
  return;
}

try {
  const image = await loadImage(imageFile);
  const predictions = await model.classify(image);
  setPredictions(predictions);
} catch (error) {
  console.error('Error analyzing the image:', error);
}

  1. Извлечение загруженного файла изображения:

    const fileInput = document.getElementById("image-upload"); const imageFile = fileInput.files[0];

  • document.getElementById("image-upload");: Это извлекает элемент ввода файла из DOM. Этот элемент — место, куда пользователи загружают свои изображения.
  • const imageFile = fileInput.files[0];: Это получает первый файл из входного файла.filesСвойство представляет собой объект, подобный массиву, поэтому мы выбираем первый загруженный файл.

  1. Проверка того, загружен ли файл изображения:

    if (!imageFile) { alert("Пожалуйста, загрузите файл изображения."); return; }

  • if (!imageFile): Это проверяет, выбран ли файл изображения. Если файл не выбран,imageFileбудетnullилиundefined.
  • alert("Please upload an image file.");: Если файл не выбран, пользователю отображается предупреждающее сообщение.
  • return;: Функция завершает работу досрочно, если файл не выбран, что предотвращает дальнейшее выполнение.

  1. Загрузка изображения и его классификация:

    try { const image = await loadImage(imageFile); const predicts = await model.classify(image); setPredictions(predictions); } catch (error) { console.error('Ошибка анализа изображения:', error); }

  2. try { ... } catch (error) { ... }:try-catchБлок обрабатывает любые ошибки в процессе загрузки и классификации изображения.

  3. Загрузка изображения:

    const image = await loadImage(imageFile);

  • loadImage(imageFile): Эта функция — утилита, которая преобразует файл изображения в формат, подходящий для обработки TensorFlow.js. Вероятно, она включает чтение файла и создание элемента изображения HTML или тензора TensorFlow.js.
  • await: Это ключевое слово гарантирует, что функция дождется завершения загрузки изображения, прежде чем перейти к следующему шагу.
  • const image =: Загруженное изображение сохраняется в переменной изображения.

Классификация изображения:

const predictions = await model.classify(image);

  • model.classify(image): Этот метод использует модель TensorFlow.js для классификации входного изображения. Он возвращает прогнозы о том, что содержит изображение.
  • await: Это гарантирует, что функция дождется завершения процесса классификации.
  • const predictions =: Результаты классификации сохраняются в переменной predicts.

Состояние прогнозов настройки:

setPredictions(predictions);

setPredictions(predictions): Это обновляет состояние прогнозов новыми результатами классификации. Это запускает повторную визуализацию компонента, отображая прогнозы пользователю.

  1. Обработка ошибок:

    catch (error) { console.error('Ошибка анализа изображения:', error); }

catch (error) { ... }: Этот блок перехватывает любые ошибки, возникающие во время try block.console.error('Ошибка анализа изображения:', error);: Если возникает ошибка, он регистрирует сообщение об ошибке в консоли для целей отладки.

Часть 3: Загрузка модели TensorFlow

  1. Загрузка модели:

  • ИспользуетuseStateКрючок для загрузки модели при установке компонента.

  • Устанавливает загруженную модель в состояние.

    useState(() => { (async () => { try { const loadModel = await loadModel(); setModel(loadedModel); } catch (error) { console.error('Ошибка загрузки модели:', error); } })(); }, []);

  • Определяет реакциюuseStateХук, который инициализирует и загружает модель TensorFlow.js при монтировании компонента.
  • Он использует немедленно вызываемую асинхронную функцию для вызоваloadModelФункция, которая загружает модель и устанавливает ее в состояние компонента с помощьюsetModelФункция.
  • Если в процессе загрузки модели возникает ошибка, она фиксируется и выводится на консоль.
  • Пустой массив зависимостей[]гарантирует, что этот эффект будет запущен только один раз при первой визуализации компонента.

Базовая компоновка

Чтобы начать создание нашего веб-приложения на базе ИИ с Next.js и TensorFlow.js, мы настроим базовую схему с использованием компонентов Next.js. Эта начальная структура станет основой для пользовательского интерфейса нашего приложения.

Часть 4: Отображение пользовательского интерфейса

5. Рендеринг:

  • Отображает основной макет приложения.
  • Предоставляет входные данные для загрузки изображения и кнопку для анализа.
  • Отображает прогнозы, если они доступны.

Заявление о возврате JSX

1. Обертка фрагмента

return (
    <>
      ...
    </>

<> ... </>: Этот фрагмент React позволяет группировать несколько элементов без добавления дополнительных узлов в DOM.

2. Контейнерный отдел

<div className={styles.container}>
  ...
</div>

<div className={styles.container}> ... </div>: Этот div оборачивает основное содержимое страницы и применяет стили изstyles.containerСорт.

3. Головной компонент

<Head>
  <title>AI-Powered Web App</title>
</Head>

4. Основное содержание

<main className={styles.main}>
  ...
</main>

<main className={styles.main}> ... </main>: Этот основной элемент содержит основное содержимое страницы и применяет стили изstyles.mainсорт

5. Название и описание

<h1 className={styles.title}>AI-Powered Web Application</h1>
<p className={styles.description}>
  Using Next.js and TensorFlow.js to show some AI model.
</p>

  • <h1 className={styles.title}> ... </h1>: Этот заголовок отображает основной заголовок страницы со стилем изstyles.titleСорт.
  • <p className={styles.description}> ... </p>: Этот абзац содержит краткое описание и оформлен с использованиемstyles.descriptionСорт.

6. Область ввода

<div id="input-area">
  <input type="file" className={styles.input} id="image-upload" />
  <button className={styles.button} onClick={handleAnalyzeClick}>
    Analyze Image
  </button>
</div>

  • <div id="input-area"> ... </div>: Этот div содержит элементы ввода для загрузки и анализа изображения.
  • <input type="file" className={styles.input} id="image-upload" />: Этот элемент ввода позволяет пользователям загружать файл изображения. Он используетstyles.inputкласс для стилизации и имеет идентификаторimage-upload.
  • <button className={styles.button} onClick={handleAnalyzeClick}>Analyze Image</button>: Эта кнопка запускаетhandleAnalyzeClick functionпри нажатии. Он стилизован с использованиемstyles.buttonСорт.

7. Зона вывода

<div id="output-area">
  {predictions.length > 0 && (
    <ul>
      {predictions.map((pred, index) => (
        <li key={index}>
          {pred.className}: {(pred.probability * 100).toFixed(2)}%
        </li>
      ))}
    </ul>
  )}
</div>

  • <div id="output-area"> ... </div>: Этот div содержит область вывода, в которой отображаются прогнозы.
  • {predictions.length > 0 && ( ... )}: Этот условный рендеринг проверяет наличие прогнозов и отображает список прогнозов, если таковые имеются.
  • <ul> ... </ul>: Неупорядоченный список, который будет содержать элементы прогноза.
  • predictions.map((pred, index) => ( ... )): Это сопоставляет массив прогнозов и отображает каждый прогноз как элемент списка.
  • <li key={index}> ... </li>: Каждый элемент списка отображает имя класса и вероятность прогноза, отформатированные до двух знаков после запятой.keyАтрибут помогает React определить, какие элементы были изменены

Отредактируйте стили для файла index.js в Home.module.css, удалите весь код и добавьте следующий:

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
  text-align: center;
}
.description {
  margin: 4rem 0;
  line-height: 1.5;
  font-size: 1.5rem;
  text-align: center;
}

#ouput-area {
  margin-top: 2rem;
}
.li {
  margin-top: 10px;
  font-size: 20px;
}
.button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor:pointer;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #005bb5;
}

После того, как вы выполнили предыдущие шаги, проверьте, чтобы увидеть что-то вроде этого:

Теперь давайте поработаем с мозгом приложения. Файл imageProcessing.js:

Часть 1: Загрузка модели

Функция: loadModel

import * as tf from "@tensorflow/tfjs";
import * as mobilenet from "@tensorflow-models/mobilenet";

export async function loadModel() {
  try {
    const model = await mobilenet.load();
    return model;
  } catch (error) {
    console.error("Error loading the model:", error);
    throw error;
  }
}

Эта функция загружает модель MobileNet с помощью TensorFlow.js. Вот пошаговое объяснение:

  • Импорт: Функция импортирует TensorFlow.js (tf) и модель MobileNet (mobilenet).
  • Определение функции:loadModelфункция определена как асинхронная функция.
  • Блок Try-Catch: Внутри блока try-catch функция загружает модель MobileNet асинхронно сawait mobilenet.load().
  • Возврат модели: в случае успеха возвращается загруженная модель.
  • Обработка ошибок: если возникает ошибка, она регистрируется в консоли и выводится на экран, позволяя вызывающей функции обработать ее.

Часть 2: Предварительная обработка изображения

Функция: preprocessesImage

export function preprocesImage(image) {
  const tensor = tf.browser
    .fromPixels(image)
    .resizeNearestNeighbor([224, 224]) // MobileNet input size
    .toFloat()
    .expandDims();
  return tensor.div(127.5).sub(1); // Normalize to [-1, 1] range
}

Эта функция предварительно обрабатывает изображение в формате, требуемом MobileNet. Вот пошаговое объяснение:

  • Определение функции:preprocesImage functionопределяется как принимающий изображение в качестве аргумента.
  • Преобразование тензора: Функция преобразует изображение в тензор, используяtf.browser.fromPixels(image).
  • Изменение размера: изменяет размер тензора изображения до[224, 224], что является требуемым размером входных данных для MobileNet.
  • Преобразование числа с плавающей точкой: Затем тензор преобразуется в число с плавающей точкой с помощью.toFloat().
  • Добавить измерение: Тензор расширяется, чтобы включить измерение партии с помощью.expandDims().
  • Нормализация: Наконец, тензор нормализуется до диапазона[-1, 1]путем деления на127.5и вычитание1.

Часть 3: Загрузка изображения

Функция: loadImage

export function loadImage(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result;
      img.onload = () => resolve(img);
    };
    reader.onerror = (error) => reject(error);
    reader.readAsDataURL(file);
  });
}

Эта функция загружает файл изображения и возвращает элемент HTML Image. Вот пошаговое объяснение:

  • Определение функции:loadImage functionопределяется как принятие файла в качестве аргумента.
  • Создание Promise: Функция возвращает новый Promise, который разрешается с загруженным изображением или отклоняется с ошибкой.
  • FileReader: АFileReaderОбъект создан для чтения файла.
  • Читатель onLoad:onloadОпределен обработчик событий считывателя. Он создает новый объект изображения, устанавливает его источник в результат считывателя файла и разрешает обещание с изображением после его загрузки.
  • Читатель onError:onerrorобработчик событий читателя определен для отклонения обещания с ошибкой, если таковая возникает. Чтение файла: Читатель файла читает файл как URL-адрес данных, используяreader.readAsDataURL(file).

Теперь вы можете протестировать этот финальный проект, загрузив изображения на страницу проекта и увидев финальные результаты. Если у вас возникнут какие-либо проблемы, проверьте предоставленную ссылку, чтобы клонировать проект с Github:

Проект репозитория Github

Заключение

В этом руководстве вы узнали, как создать веб-приложение на базе ИИ с использованием Next.js и TensorFlow.js. Мы рассмотрели:

  1. Настройка окружающей среды: Вы установили Next.js и TensorFlow.js и настроили среду разработки.
  2. Создание пользовательского интерфейса: Вы создали простой пользовательский интерфейс для загрузки изображений и отображения прогнозов.
  3. Интеграция TensorFlow.js: Вы интегрировали модель MobileNet для выполнения классификации изображений непосредственно в браузере.

Объединив Next.js и TensorFlow.js, вы сможете создавать сложные веб-приложения, использующие возможности искусственного интеллекта, улучшая взаимодействие с пользователем с помощью таких функций, как распознавание изображений.

Следующие шаги

Для дальнейшего улучшения вашего приложения рассмотрите возможность изучения следующих дополнительных функций:

  • Улучшенный пользовательский интерфейс: Улучшите пользовательский интерфейс с помощью более продвинутого стиля или дополнительных функций.
  • Дополнительные модели: Интегрируйте другие предварительно обученные модели из TensorFlow.js или обучайте свои собственные модели.
  • Данные в реальном времени: Реализуйте обработку и отображение данных в реальном времени для динамического взаимодействия с пользователем.

Дополнительные ресурсы

  • Документация Next.js
  • Документация TensorFlow.js
  • Документация модели MobileNet
  • Документация Верселя

Об авторе

Иван Дуарте — бэкенд-разработчик с опытом работы фрилансером. Он увлечен веб-разработкой и искусственным интеллектом и любит делиться своими знаниями через руководства и статьи. Подписывайтесь на меняХ, Гитхаб, иLinkedInдля получения дополнительной информации и обновлений.

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE