Диалоговый поток во флаттере

Оригинальная (и устаревшая) инструкция для этого приложения. Моя реализация в этой статье.

Шаг №1: Создайте агент Dialogflow ES

  1. Убедитесь, что он использует автоматическую адаптацию речи при создании агента.
  2. Включите Dialogflow API в консоли GCP. Создайте учетную запись службы под учетными данными и предоставьте роль администратора Dialogflow API.
  3. Добавьте новый ключ JSON в только что созданную учетную запись службы и сохраните его локально на своем компьютере.

Шаг № 2: Создайте аудио приложение

  1. Установите Flutter и Android Studio. Запустите «flutter create voicebot».
  2. Установите версии SDK для пакета sound_stream в android/app/build.gradle: минимум 21 и цель 30.
  3. Дайте разрешение на интернет и микрофон в app/src/main/AndroidManifest.xml.
  4. Установить sound_stream, rxdart, dialogflow_grpc
  5. Переместите новый ключевой файл JSON из последнего шага в папку ресурсов. Будьте осторожны с ключом.
  6. Подключите свой физический телефон с помощью scrcpy и запустите приложение

Шаг № 3: Создайте пользовательский интерфейс чата с поддержкой STT

На высоком уровне дерево виджетов выглядит так: MyHomePage => чат (с сохранением состояния) => сообщение (без сохранения состояния). STT — это преобразование речи в текст.

Виджет чата

Он отображает пользовательский интерфейс чата и обрабатывает Dialogflow. Пользовательский интерфейс имеет

  1. ListView для отображения всех всплывающих сообщений.
  2. TextField для набора текста.
  3. IconButton для отправки сообщения. Когда она нажата, нам нужно отправить текст.
  4. IconButton для использования микрофона. Когда она нажата, нам нужно остановить или обработать аудиопоток.

Нам нужно несколько состояний:

  final List<ChatMessage> _messages = <ChatMessage>[];
  final TextEditingController _textController = TextEditingController();
  late DialogflowGrpcV2Beta1 dialogflow;
  bool _isRecording = false; // if mic is recording
  RecorderStream _recorder = RecorderStream();
  StreamSubscription? _recorderStatus;
  StreamSubscription<List<int>>? _audioStreamSubscription;
  BehaviorSubject<List<int>>? _audioStream;
  1. получить клиент Dialogflow через учетную запись службы в initState(). Это делается с использованием учетных данных json, которые мы скачали Dialogflow API.
  2. Чтобы остановить Stream, мы останавливаем RecorderStream, отменяем StreamSubscription и закрываем _audioStream(BehaviorSubject)
  3. Для обработкипотока вы можете указать диалоговые фразы (зависящие от приложения), аудиоконфигурацию (сэмпл герц, кодирование), а затем получить намерение, прослушивая dialogflow.streamingDetectIntent() с учетом аудиопотока.
  4. Для submitText вы получаете ответ от dialogflow.detectIntent() с текстом и обновляете всплывающий список сообщений в пользовательском интерфейсе.

Виджет сообщений

Каждое сообщение состоит из двух горизонтальных частей: CircleAvatar и текста сообщения. При желании текст сообщения может быть столбцом для размещения инициалов отправителя поверх текста. Единственная разница между сообщением бота и вашим сообщением заключается в том, что у бота есть CrossAxisAlignment.start для выравнивания по левому краю, а у вашего — CrossAxisAlignment.end для выравнивания по правому краю.

Шаг № 4: Создайте намерения

Добавьте намерения и ответы. Вы также можете использовать Коннектор знаний.

Если вам нравится этот урок, вы также можете найти полезным 3 уровня тестов флаттера. Они являются частью моей серии Стань флаттер-комфортным за 23 дня.

Ссылка

  1. Диалоговый поток продукт
  2. Диалоговый поток Намерение
  3. Диалоговый поток Коннекторы знаний