ИИ для веб-разработчиков Введение в проект и настройка

Введение в проект и настройка ИИ для веб-разработчиков

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

ОНИ ИДУТ К НАМ!!!

Просто шучу ;P

Я совершенствую свое понимание того, что это за инструменты и как они работают, и решил создать серию уроков для веб-разработчиков, чтобы научиться внедрять технологию искусственного интеллекта в веб-приложения.

• Управление памятью в Apache Spark Диск-сброс
• Безмозглый мягкий робот успешно перемещается в сложных средах в технологическом прорыве в робототехнике.
• Регулирование искусственного интеллекта делает первые шаги на Капитолийском Холме

В этой серии мы узнаем, как интегрировать службы искусственного интеллекта OpenAI в приложение, созданное с использованием Qwik, фреймворка JavaScript, ориентированного на концепцию возобновляемости (это будет полезно для понимания позже).

Вот как выглядит план серии:

1. Введение и настройка
2. Ваш первый AI-промпт
3. Потоковые ответы
4. Как работает искусственный интеллект
5. Инженерия промпта
6. Изображения, созданные искусственным интеллектом
7. Безопасность и надежность
8. Развертывание

Мы подробно рассмотрим OpenAI и Qwik там, где это имеет смысл, но я больше сосредоточусь на общих знаниях, инструментах и реализациях, которые должны применяться к любой платформе или набору инструментов, который вы используете. Мы будем работать как можно ближе к фундаментальным принципам, и я указываю, какие части уникальны для этого приложения.

Вот небольшой предварительный просмотр.

Мне показалось бы интересным создать приложение, которое берет двух оппонентов и использует искусственный интеллект для определения, кто бы победил в гипотетической схватке. Оно предоставляет некоторые объяснения и возможность создать изображение, созданное искусственным интеллектом. Иногда результаты получаются немного странными, но именно это делает его интересным.

Надеюсь, вы уже жаждете начать, потому что в этом первом сообщении мы в основном сосредоточимся на…

Бойлерплейте :/

Предварительные требования

Прежде чем мы начнем что-то создавать, нам нужно выполнить несколько предварительных требований. Qwik – это фреймворк JavaScript, поэтому нам нужно установить Node.js (и NPM). Вы можете скачать самую последнюю версию, но все, что выше версии v16.8, должно работать. Я буду использовать версию 20.

Далее, нам также понадобится учетная запись OpenAI, чтобы получить доступ к их API.

В конце серии мы развернем наши приложения на VPS (виртуальный частный сервер). Шаги, которые мы будем выполнять, должны быть одинаковыми независимо от выбранного вами провайдера. Я буду использовать облачные вычисления Akamai (ранее Linode).

Настройка приложения Qwik

Предполагая, что мы уже справились с предварительными требованиями, мы можем открыть командную строку и выполнить команду: npm create qwik@latest. Это запустит Qwik CLI, который поможет нам создать основу нашего приложения.

Он задаст вам несколько вопросов о конфигурации, а затем сгенерирует проект для вас. Вот как выглядят мои ответы:

Если все работает, откройте проект и начните исследовать.

Внутри папки проекта вы заметите некоторые важные файлы и папки:

• /src: Содержит всю бизнес-логику приложения
• /src/components: Содержит reusable компоненты для построения нашего приложения
• /src/routes: Отвечает за файловую маршрутизацию Qwik; Каждая папка представляет собой маршрут (может быть страницей или конечной точкой API). Чтобы создать страницу, поместите файл index.{jsx|tsx} в папку маршрута.
• /src/root.tsx: Этот файл экспортирует корневой компонент, отвечающий за создание корневого документа HTML.

Начать разработку

Qwik использует Vite в качестве бандлера, что удобно, потому что у Vite есть встроенный сервер разработки. Он поддерживает запуск нашего приложения локально и обновление браузера при изменении файлов.

Чтобы запустить сервер разработки, мы можем открыть наш проект в терминале и выполнить команду npm run dev. При работе сервера разработки вы можете открыть браузер и перейти по адресу http://localhost:5173, и вы увидите очень простое приложение.

Все изменения, которые мы вносим в наше приложение, должны отображаться практически мгновенно в браузере.

Добавить стилизацию

В этом проекте мы не будем уделять слишком много внимания стилизации, поэтому этот раздел является полностью дополнительным, если вы хотите делать свои собственные вещи. Чтобы упростить все, я буду использовать Tailwind.

CLI Qwik позволяет легко добавить необходимые изменения, выполнив команду в терминале npm run qwik add. Это позволит вам выбрать из нескольких доступных плагинов Qwik.

Вы можете использовать стрелочные клавиши, чтобы переместиться к плагину Tailwind и нажать Enter. Затем он покажет вам изменения, которые он внесет в ваш код и попросит подтверждения. Если все выглядит хорошо, вы можете снова нажать Enter.

Для моих проектов мне также нравится иметь согласованную тему, поэтому я храню файл в моем GitHub, чтобы копировать и вставлять стили из него. Очевидно, если вы хотите свою собственную тему, вы можете пропустить этот шаг, но если вы хотите, чтобы ваш проект выглядел так же потрясающе, как мой, скопируйте стили из этого файла на GitHub в файл /src/global.css. Вы можете заменить старые стили, но оставьте директивы Tailwind на месте.

Подготовка главной страницы

Последнее, что мы сделаем сегодня, чтобы привести проект в хорошее исходное состояние, это внести некоторые изменения на главной странице. Это означает внесение изменений в файл /src/routes/index.tsx.

По умолчанию этот файл начинается с некоторого очень простого текста и примера изменения <head> HTML-кода путем экспорта переменной head. Изменения, которые я хочу внести, включают:

• Удаление экспорта head
• Удаление всего текста, кроме <h1>; Вы можете добавить свой собственный текст заголовка страницы.
• Добавление некоторых классов Tailwind для центрирования контента и увеличения размера <h1>
• Обертывание контента тегом <main> для большей семантичности
• Добавление классов Tailwind к тегу <main> для добавления немного отступа и центрирования содержимого

Все эти изменения незначительны и не являются строго обязательными, но я думаю, что они предоставят хорошую отправную точку для разработки нашего приложения в следующем посте.

Вот как выглядит файл после моих изменений.

import { component$ } from "@builder.io/qwik";

export default component$(() => {
  return (
    <main class="max-w-4xl mx-auto p-4">
      <h1 class="text-6xl">Привет [знак приветствия]</h1>
    </main>
  );
});

А в браузере это выглядит так:

Заключение

Это все, что мы рассмотрим сегодня. Опять же, этот пост в основном был посвящен избавлению от шаблонного кода, чтобы следующий пост можно было посвятить интеграции API OpenAI в наш проект.

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

Я с нетерпением жду, что вы придумаете, и если вы хотите более подробно изучить код, я размещу его на своем аккаунте на GitHub.