GN04. Бонусный урок. Подключение нейросети

Что мы умеем:

✅ Спроектировали базу данных, создали её в Glide, научились связывать таблицы в базе данных с помощью полей Row ID и Relation

✅ Собрали первый экран приложения: узнали, как создавать экран приложения, добавлять на него компоненты, поняли, зачем нужна фильтрация и как её настраивать, научились группировать данные и настраивать actions

✅ Доделали приложение и опубликовали его: узнали, что такое формы добавления и редактирования, научились их настраивать, добавили на экран кнопки и настроили на них actions, научились использовать специальные поля базы данных, которые позволяют делать подсчёты, добавили в приложение график с анализом расходов

Результат дня

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

⌛ Время прохождения урока: ~ 1,5-2,5 часа

Теория на сегодня

Внимание! Чтобы подключить нейросеть к Glide, тебе потребуется аккаунт Open AI и API-ключ. Мы подготовили материалы, которые помогут тебе с этим разобраться.

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

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

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

И всё-таки для полноценного использования искусственного интеллекта аккаунт в Open AI так или иначе потребуется. Если ты, как и мы, считаешь важным освоить нейросети, обрати внимание на программу Нейросети: от принципов к практике.

Подключаем аккаунт Open AI и получаем API-ключ

Чтобы подключить нейросеть к Glide тебе потребуется:

1. Завести аккаунт в Open AI (это платформа компании, которая занимается разработкой и продвижением искусственного интеллекта, в частности их продукт — Chat GPT).
2. Получить API-ключ, необходимый, чтобы подключить искусственный интеллект к Glide.

✅ API — это программа-посредник, которая обеспечивает обмен информацией между двумя или более приложениями. Если мы хотим к приложению, созданному на Glide, подключить сторонний сервис — Open AI, нам нужен специальный API-ключ (уникальный набор символов), который поможет это сделать.

Регистрируемся на Open AI

В целом процесс регистрации очень прост:

1. Переходим на сайт Open AI.
2. Нажимаем на кнопку Sign Up и регистрируемся.

Но если ты живёшь в России с регистрацией могут возникнуть трудности. Есть несколько способов с ними справиться, разберём два из них.

Способ 1

Мария Размазина — эксперт-аналитик и действующий преподаватель Университета Zerocoder

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

Подготовка:

1. Подключаем и включаем vpn (например, hola).
2. Получаем номер телефона той страны, которая подключена в vpn, например, помощью сайте 5SIM (нам нужен openai). Если находим нужный номер страны, регистрируемся, и пополняем счёт на сумму, равную стоимости номера. Сразу его не покупаем, так как он будет доступен ограниченное количество времени.

Пробуем первый способ регистрации:

1. Включаем vpn, переходим в режим инкогнито, открываем сайт OpenAI.
2. Нажимаем True рядом с ChatGPT.
3. Нажимаем Sing up.
4. Вводим свой адрес электронной почты.
5. Открываем почту, копируем адрес ссылки кнопки для верификации адреса, открываем её в режиме инкогнито. Иногда такой способ может сработать.

Способ 2

1. Скачиваем и устанавливаем нужную версию Tor Browser.
2. Когда браузер откроется, нажимаем кнопку Соединиться. Затем нажимаем Тест. Ставим галочку Всегда подключаться автоматически и нажимаем Соединиться.
3. Заходим на сайт 2ip, чтобы проверить ip-адрес.
4. Заходим в OpenAI, если видим, что попытка соединения не удалась, нажимаем Попробовать снова. На открывшейся странице нажимаем True. При необходимости обновляем страницу. Нажимаем Sign up.
5. Переходим на сайт создания временной почты, копируем сгенерированный адрес. Нажимаем Continue. Подтверждаем, что мы не робот. Вставляем пароль и нажимаем Continue. При необходимости повторяем ещё раз.

Заведи отдельный файл в блокноте, чтобы сохранять в нём адреса, номера и пароли, которые используешь.

6. При необходимости пробуем другой сайт для создания временной почты, например этот.

7. Копируем полученный код с сайта временных почт и вставляем его на сайт чата. Проходим проверку, что мы — человек, нажимаем Continue. Не забываем сохранить почту и пароль.

8. Ждём письмо с кнопкой верификации, нажимаем её. Если видим сообщение об ошибке, пробуем обновить страницу.

9. Вводим своё имя, можно ненастоящее (не забудь сохранить его в блокноте).

10. Проходим верификацию номера. Покупаем номер там, где это более выгодно. Вставляем в соответствующее поле. Нажимаем Send code. Копируем пришедший код на сайте временных номеров и вставляем в соответствующее поле.

Получаем API-ключ

✅ API — программный интерфейс приложения. По сути, это инструкция приложения, в которой описаны методы и запросы, которые мы можем дать приложению для того, чтобы оно что-то сделало.

Посылая запрос по API, мы “говорим” приложению совершить определённое действие.

Взаимодействие по API осуществляется с помощью запросов, в которые включается ключ.

✅ API-ключ — это пароль, который позволяет нам обращаться к приложению.

Бывают открытые и закрытые API. Нам повезло, что у Open AI открытый — это означает, что мы можем связать его со всеми сервисами, у которых также открытый API (например, с Google-таблицами, Glide, Bubble, Directual).

Как получить API-ключ

Евгения Заяц — технический директор университета Zerocoder.

1. Перейдем в личный кабинет на сайте ChatGPT.
2. В верхнем правом углу нажимаем на значок аватара и выбираем View API keys.

3. Нажимаем Create new secret key. Называем его произвольно, например, Glide.

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

ОБЯЗАТЕЛЬНО скопируйте API-ключ себе в блокнот, потому что после нажатия кнопки Done он запишется в список ваших ключей и сократится (как на предыдущем скриншоте), и в целом виде вы его больше не увидите.

API интеграции у ChatGPT платные. Каждый запрос стоит денег. Ты платишь за токены. Посмотреть стоимость можно на странице прайсинга.

До недавнего времени на счету каждого аккаунта было 5 долларов для тестового периода интеграций. Проверить, есть ли они у вас, можно в разделе Usage.

Что делать, если не получается зарегистрироваться в Open AI и получить API-ключ? К сожалению, в рамках бесплатного продукта у нас нет возможности помочь тебе с решением этого вопроса. В этому случае просто посмотри видео этого занятия, чтобы узнать возможности нейросетей при создании мобильных приложений (в конце урока есть альтернативное домашнее задание на случай, если у тебя возникнут сложности с подключением Open AI, но ты хочешь заработать зерокоины).

Чтобы в полном объём использовать искусственный интеллект в мобильной разработке, аккаунт Open AI всё же потребуется. Если тебе интересная эта тема, обрати внимание на программу Нейросети: от принципов к практике.

1. Настраиваем интеграцию Glide и Open AI

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

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

1. Нажимаем кнопку Settings в правом верхнем углу, переходим на вкладку Integrations, находим в списке OpenAI, нажимаем Add to app.
2. В открывшемся окне вставляем свой API-ключ.
3. Если загорелась точка, это означает, что интеграция добавлена.

2. Делаем предварительную настройку экшена

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

Добавляем кнопку на экране Анализ

1. На экрана анализ добавляем новый компонент — Button.
2. На панели справа появляются кнопки, однако мы не будем их менять, так как сейчас представлен самый яркий ее вариант, какой нам и нужен — поскольку кнопка на этом экране единственная, хотелось бы, чтобы она привлекала внимание.

Настраиваем кнопку

1. Название и иконку вы можете выбрать на свое усмотрение. Например, Получить совет и в качестве иконки магический шар.
2. В поле выбора действия устанавливаем Create new action.
3. Оказываемся в редакторе действия. Даём действию название, например — Запрос к ИИ.
4. Первый шаг действия User Interaction отвечает за источник данных. Он стоит по умолчанию, его изменить мы не можем, так как мы создавали экшен через таблицу Категории.
5. Нажимаем на прямоугольник действия и выбираем OpenAi — Ask a question about a table.
6. Настраиваем это действия с помощью появившейся формы:

По кнопке Select columns выберем колонки в таблице Расходы, из которых нейросеть будет брать данные для анализа:

• Сумма;
• Дата и время;
• Название категории.

В таблице Users нам нужен столбец, в который будет записываться ответ искусственного интеллекта. Добавим его, а к настройкам действия вернёмся чуть позже. Закроем редактор экшена, нажав кнопку Close.

Добавляем в базу данных колонку, в которой будут сохраняться ответы нейросети

1. В редакторе данных выбираем таблицу Users.
2. Создаём в ней новую колонку текстового типа, называем её Ответ ИИ.

Возвращаемся к настройкам действия для кнопки Получить ответ

1. Возвращаемся в редактор интерфейса, выделяем в левом меню Button, на панели справа в секцию Action и нажимаем Edit action.
2. Снова оказываемся в редакторе действия и в поле Answer выбираем User Profile — Ответ ИИ.

3. Формулируем запрос к нейросети и тестируем, что получилось

На курсе Нейросети: от принципов к практике мы учим формулировать запросы к искусственному интеллекту так, чтобы получать максимально чёткий и соответствующий нашим требованиям ответ.

Формулируем запрос к ИИ

К формулировке вопроса нужно подойти серьезно. Чем конкретнее будет сформулирован ваш запрос, тем больше шансов получить адекватный ответ. Надо помнить, что нейросеть — это не человек. Если в ответ вы получаете что-то бессмысленное, первое, что нужно сделать, — это обратиться к запросу и подумать, как его можно переформулировать.

Это довольно нудная настройка, связанная с продолжительным этапом тестирования. Мы можем предложить в графе Question написать следующее:

Предложи короткий конкретный совет по сокращению моих расходов. Используй конкретные цифры и уложись в два предложения.

В Glide часто приходит не весь ответ целиком. Возможно, есть ограничение на объём передаваемых от нейросети данных. Поэтому формулировка про два предложения так важна.

Обозначаем контекст

Переходим к полю Additional context. Благодаря ему мы можем добавить больше конкретики, чтобы нейросеть лучше понимала, что мы вообще от нее хотим. Поскольку ответ должен строиться на анализе данных, так и напишем:

Ответ должен основываться на полученных данных. Все суммы указаны в рублях.

Итак, мы завершили настройку действия для кнопки Получить совет:

Закрываем редактор действия.

Тестируем экшен

На экране Анализ нажимаем кнопку Получить совет.

После этого она на некоторое время станет неактивной, а затем снова активной. Это означает, что нейросеть дала ответ. Как ты понимаешь, мы найдем его в таблице Users в столбце Ответ ИИ.

Так себе совет.

Попробуем немного скорректировать запрос для поля Question: в редакторе действия. Например, так:

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

На курсе Нейросети: от принципов к практике мы учим формулировать запрос к искусственному интеллекту так, чтобы получать максимально чёткий и соответствующий нашим требованиям ответ.

4. Выводим ответ искусственного интеллекта на экран

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

В Glide можно на один экшен добавить несколько действий.

Добавляем действие: показывать новый экран

1. Возвращаемся в редактор действия и добавим ещё один шаг. Для этого нужно навести курсор на какой-то из шагов и нажать на появившейся +.
2. В качестве действия выбираем Show new screen (показать новый экран). Настраиваем его:

3. Разместим это действие перед действием отправки запроса (пусть сначала появляется новый экран, а потом отправляется запрос)

Настраиваем экран с ответом искусственного интеллекта

Теперь при нажатии на кнопку Получить совет пользователь видит такой экран:

1. На панели слева удаляем все автоматически созданные компоненты.
2. На панели справа в поле Title пишем Совет нейросети.
3. На панели слева добавляем компонент Hint (можно добавить и просто Text, но Hint представлен в виде карточки, т.е. на цветном фоне).
4. На панели справа настраивает компонент:

Настраиваем экран с ответом в период ожидания

Мы замечаем, что проходит какое-то время, прежде чем до нас доходит ответ нейросети. Давайте позаботимся о том, чтобы во время ожидания экран не был пустым.

1. Добавляем компонент Text, настроим его:

2. Дублируем его и немного перенастраиваем дубликат:

3. Объединяем оба компонента Text с помощью компонента Container.

4. Перетаскиваем контейнер наверх и в настройках Padding устанавливаем среднее значение, чтобы вокруг него было больше свободного места.

5. Настраиваем условия видимости контейнера. Переходим во вкладку Options. Здесь есть только одна опция — Visibility. Добавим для нее условие через кнопку Add condition.

Таким образом, пользователь будет видеть часы и текст Формулирую ответ только в том случае, если ячейка в колонке с ответом ИИ будет пустой.

Настраиваем для пользователя возможность получить новый ответ от ИИ, если он уже делал запрос

1. Закрываем экран ответа, на экране Анализ на панели слева выделяем компонент Button.
2. Переходим в редактор его действия. Добавляем ещё один шаг — Set column values. И настраиваем его:

3. Этот шаг должен происходить раньше предыдущих, поэтому перетаскиваем его наверх, установив сама первым.

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

Публиковать приложение повторно после обновлений необязательно. После публикации приложение на Glide обновляется автоматически.

Удачи в твоих проектах!