2ая часть про ChatGPT во FlutterFlow.
На самом деле, отскринить и детально описать весь процесс интеграции ChatGPT с FF не позволит формат телеграмовских сообщений. Да и зачем изобретать велосипед?!
На маркетплейсе FlutterFlow уже есть несколько готовых решений - давайте возьмем самое первое, и изучим, что к чему.
Итак, в разделе Api Calls у нас точно такой же запрос к API, который мы сконструировали в предыдущем посте.
Перейдем в раздел Custom Functions - там всего две функции.
Первая (convertToJson) - получает текст, который ввел пользователь и конвертирует его в Json. То есть функция проще некуда - просто обрамляет текст в эту конструкцию {”role”: “user”, “content”: “вот и наш текст”}
Вторая функция (SaveChatHistory) - не сложнее ни на йоту! Она получает на вход 2 параметра - историю чата (то есть набор этих реплик {”role”: “…”, “content”: “…”}) и новую реплику. Все, что делает - это добавляет новую реплику в эту историю.
Окей, идем теперь на главный экран. Сначала перейдем на уровень страницы, а потом в раздел Page State. Видим здесь переменную chatHistory - собственно в данном примере всю историю реплик приложение хранит локально, на устройстве.
Теперь посмотрим на ListView, с помощью которого строится список сообщений. Тоже ничего удивительного - там отображаются только реплики из chatHistory. То есть в каждый элемент ListView попадает JSON, формата {”role”: .., “content”: …}. Чтобы получить значение content (то есть непосредственно сообщение), разработчик извлекает поле content из полученного json. Почему это делается так я рассказывал в своем курсе на youtube. Так же в зависимости от значения в role сообщение будет отображаться либо слева, либо справа.
Ну и последний кусочек пазла - это что происходит при клике на кнопку “отправить сообщение”. Ну, новое сообщение конвертируется в json (с помощью функции convertToJson) и добавляется функцией SaveChatHistory в историю. Дальше эта история отправляется на созданный нами API (не забыть тут вставить свой ключ). При получении успешного ответа реплика chatGPT так же сохраняется в chatHistory.
Короче, никакой высшей математики 😅
А что делать, если вы хотите сохранять историю чата в firebase, а не локально на устройстве? Ну… в firebase то можно сохранять что угодно, но FF это не одобрит.
У нас два пути.
Первый - перед сохранением истории чата в БД сохранять наш json как строку (для этого нужно будет написать крохотную функцию), а когда будем получать обратно данные из базы, то превратить строку обратно в json (еще одна простая функция) (фото функций прилагаю).
Второй - создать кастомный тип данных (например replica), с двумя параметрами - role (string) и content (string). В таком случае обращаться с данными в самом приложении будет еще удобнее (не нужно парсить json), но перед отправкой данных по api в chatgpt нужно будет прогнать их через очередную кастомную функцию, которая преобразует наш DataType Replica в простой Json. Пример функции так же прикладываю)
Как-то так)
#обучение
На самом деле, отскринить и детально описать весь процесс интеграции ChatGPT с FF не позволит формат телеграмовских сообщений. Да и зачем изобретать велосипед?!
На маркетплейсе FlutterFlow уже есть несколько готовых решений - давайте возьмем самое первое, и изучим, что к чему.
Итак, в разделе Api Calls у нас точно такой же запрос к API, который мы сконструировали в предыдущем посте.
Перейдем в раздел Custom Functions - там всего две функции.
Первая (convertToJson) - получает текст, который ввел пользователь и конвертирует его в Json. То есть функция проще некуда - просто обрамляет текст в эту конструкцию {”role”: “user”, “content”: “вот и наш текст”}
Вторая функция (SaveChatHistory) - не сложнее ни на йоту! Она получает на вход 2 параметра - историю чата (то есть набор этих реплик {”role”: “…”, “content”: “…”}) и новую реплику. Все, что делает - это добавляет новую реплику в эту историю.
Окей, идем теперь на главный экран. Сначала перейдем на уровень страницы, а потом в раздел Page State. Видим здесь переменную chatHistory - собственно в данном примере всю историю реплик приложение хранит локально, на устройстве.
Теперь посмотрим на ListView, с помощью которого строится список сообщений. Тоже ничего удивительного - там отображаются только реплики из chatHistory. То есть в каждый элемент ListView попадает JSON, формата {”role”: .., “content”: …}. Чтобы получить значение content (то есть непосредственно сообщение), разработчик извлекает поле content из полученного json. Почему это делается так я рассказывал в своем курсе на youtube. Так же в зависимости от значения в role сообщение будет отображаться либо слева, либо справа.
Ну и последний кусочек пазла - это что происходит при клике на кнопку “отправить сообщение”. Ну, новое сообщение конвертируется в json (с помощью функции convertToJson) и добавляется функцией SaveChatHistory в историю. Дальше эта история отправляется на созданный нами API (не забыть тут вставить свой ключ). При получении успешного ответа реплика chatGPT так же сохраняется в chatHistory.
Короче, никакой высшей математики 😅
А что делать, если вы хотите сохранять историю чата в firebase, а не локально на устройстве? Ну… в firebase то можно сохранять что угодно, но FF это не одобрит.
У нас два пути.
Первый - перед сохранением истории чата в БД сохранять наш json как строку (для этого нужно будет написать крохотную функцию), а когда будем получать обратно данные из базы, то превратить строку обратно в json (еще одна простая функция) (фото функций прилагаю).
Второй - создать кастомный тип данных (например replica), с двумя параметрами - role (string) и content (string). В таком случае обращаться с данными в самом приложении будет еще удобнее (не нужно парсить json), но перед отправкой данных по api в chatgpt нужно будет прогнать их через очередную кастомную функцию, которая преобразует наш DataType Replica в простой Json. Пример функции так же прикладываю)
Как-то так)
#обучение