Предисловие

Ранее я написал статью «Как элегантно встроить искусственный интеллект AI-Agent на страницу». Многие из основных структур этой статьи интегрированы с предыдущей статьей. Она также продолжает углублять раскопки предыдущей статьи и дополнять ее. Достигните практического применения от проектирования до реализации до уровня кода и бизнес-уровня. Интегрированная демонстрационная система в этой статье настроена в виде веб-страницы. Пользовательский интерфейс этой статьи также предназначен для интерактивного интерфейса. Многие элементы гибкого дизайна не обязательно должны быть написаны строго в соответствии с эффектами кода, описанными в этой статье. , но может быть спроектирован по производственным правилам. Если эта статья оказалась полезной, пожалуйста, поддержите ее!

Структура верхнего уровня проекта

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

1. Модуль взаимодействия с информацией пользователя.

• Запрос пользователя иметь дело с：
  • Отвечает за прием входной информации пользователя (например, текстовых или голосовых запросов). Если разработка голоса затруднена, для ее анализа можно использовать сторонний API.
  • Включает форматирование и предварительную обработку ввода. дело с, такие как проверка орфографии, понимание естественного языка (NLU) и другие шаги, обеспечивающие эффективное использование данных моделью ИИ. дело с,Но теперь многие ИИ имеют встроенную коррекцию орфографии.,В зависимости от используемой модели укажите, следует ли использовать эту функцию.
• информацияиметь дело с：
  • Проанализируйте содержимое запроса пользователя и определите намерение пользователя (например, запрос информации, запрос помощи и предоставление обратной связи).
  • Используйте модели распознавания намерений, чтобы определить реальные потребности пользователей.
  • информацияиметь дело с Также включено через базу знаний（Например, часто задаваемые вопросы или история чата.）Получать Сопутствующая информация,Обеспечьте последовательные ответы.
• Рендеринг и обратная связь:
  • Создавайте окончательные ответы пользователям, гарантируя, что ответы соответствуют ожиданиям и включают необходимую контекстную информацию.
  • Рендеринг может включать форматированный текст, таблицы, изображения и т. д., чтобы пользователям было легче его понять.
  • Система может предоставлять пользователям варианты обратной связи, чтобы подтвердить их удовлетворенность и скорректировать стратегии взаимодействия.

2. Модуль взаимодействия с искусственным интеллектом.

• Генерация ответа ИИ:
  • Используйте API-интерфейсы моделей искусственного интеллекта (такие как Ali Tongyi, Dark Side, Wenxin или Yuanbao) для анализа запросов пользователей и генерации ответов на естественном языке.
  • Формирование ответа включает в себя этап вывода модели и, возможно, поддержание контекста для обеспечения согласованности на протяжении нескольких раундов диалога.
  • Если требуются сложные ответы (например, технические вопросы или многогранный контент), также может потребоваться вызвать несколько моделей или объединить модели.
• Интеграция интерфейса API:
  • Интегрируйтесь с внешними системами для получения информации из других источников данных (таких как CRM-системы, базы данных и т. д.) для улучшения ответов ИИ.
  • Предоставляйте пользователям обновляемые данные в режиме реального времени через стыковку API и вызов внешних служб (таких как погода, статус логистики и т. д.).

3. Модуль передачи информации.

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

4. Модуль механизма обратной связи.

• Отзывы об удовлетворенности пользователей:
  • Собирайте ценные отзывы пользователей, спрашивая пользователей, удовлетворены ли они полученными ответами.
• Оптимизация модели и настройка системы:
  • Собранные отзывы пользователей в дальнейшем можно использовать для оптимизации модели, например, отмечая удовлетворительные и неудовлетворительные ответы для продолжения обучения и улучшения модели ИИ.
  • Система может корректировать стратегии вопросов и ответов и оптимизировать процесс диалога на основе содержания обратной связи, например, выявлять общие вопросы пользователей и заранее готовить дополнительные шаблоны ответов.
• Ненормальный иметь дело с И механизм обновления:
  • В ответ на отрицательные отзывы пользователей инициируйте процесс вмешательства вручную или передайте запрос в службу поддержки клиентов вручную, чтобы обеспечить своевременное решение проблем пользователей.
  • Система может анализировать сценарии, требующие ручного вмешательства, на основе исторических данных и оптимизировать рабочий процесс, чтобы уменьшить количество повторяющихся проблем и повысить скорость автоматического реагирования.

Выбор технологии

Для фронтенда мы используемVUE3создать интерфейс разговора,Быстро и удобно。Серверное внедрениеSpring Boot:В качестве основной структуры проекта,MyBatis-PlusИспользуется для операций сохранения базы данных.,упрощенный MyBatis использования и обеспечивает базовое CRUD метод。MySQL: В качестве базы данных, используемой для хранения AI данные сеанса. Я называю здесь модель Alibaba Tongyi Qianwen. Конечно, искусственный интеллект каждого производителя. Все SDK практически одинаковы, и правила вызова в основном одинаковы. Их можно легко вызвать, проверив возвращаемые параметры SDK.

Схема последовательности проектирования

Клиент нажимает на интеллектуальное окно, чтобы начать сеанс. Интерфейсная часть записывает идентификатор сеанса окна и возвращает его на серверную часть вместе с запросом на вопрос клиента. Внутренняя часть запрашивает интерфейс Alibaba Tongyi для получения ответа, вопроса и ответа. ID. Затем серверная часть объединяет полученный текст с request_id этого сеанса и возвращается во внешний интерфейс. Если пользователю нравится полученный ответ, возвращается request_id и статус оценки одного ответа. , и если не удовлетворено, оцените возврат 2.

Дизайн пользовательского интерфейса

Существует множество шаблонов, на которых можно учиться интерфейсному пользовательскому интерфейсу, например ChatGPT, Wen XiNYyan и т. д., или использовать более простое всплывающее окно службы поддержки клиентов:

Например, диалоговое окно, похожее на интерфейс WeChat, проще всего понять и использовать клиентам.

Фронтальная реализация

Реализуйте простую диалоговую страницу:

<template>
  <div class="chat-window">
    <div class="chat-header">Fanstuck</div> 
    <div class="messages">
      <div v-if="isLoading" class="load">
        <hr/><hr/><hr/><hr/>
      </div>
      <div v-for="(message, index) in messages" :key="index" class="message" :class="{ 'user': message.sender === 'user', 'bot': message.sender === 'bot' }">
        <div class="avatar">
          <img v-if="message.sender === 'user'" :src="userAvatar" alt="User">
          <img v-else :src="botAvatar" alt="Bot">
        </div>
        <div v-if="message.sender === 'bot' && message.isTyping" class="typing" :ref="'typeitContainer' + index"></div>
        <div v-else class="message-content">{{ message.content }}</div>
      </div>
    </div>
    <div class="input-area">
      <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." class="input-field" :disabled="isSending"/>
      <button @click="sendMessage" class="send-button" :disabled="isSending || !newMessage.trim()">отправлять</button>
    </div>
  </div>
</template>
​

Структура окна чата：

• Область отображения сообщений: циклическое перебор сообщений Массив для отображения каждого сообщения.
  • анимация загрузки：когдаisLoadingдляtrueчас,показыватьанимация загрузки。
  • Содержание сообщения:
    • в соответствии сmessage.sender区分用户и机器人информация,Применяйте разные стили.
    • показывать对应的头像（userAvatarилиbotAvatar）。
    • если Робот печатает（isTypingдляtrue）,Показать контейнер анимации ввода,В противном случае отображается содержимое сообщения.
• Область ввода: содержит поле ввода и кнопку отправки.
  • Привязка поля вводаnewMessage,在按下回车键часвызовsendMessageметод,Статус инвалида зависит отisSending。
  • отправлять按钮在点击часвызовsendMessageметод,禁用条件дляisSendingилиnewMessageдля空。

Нам нужно взаимодействовать с серверной частью и реализовать отображение эффекта пишущей машинки.,может пройтиИмпортированные библиотеки：

• TypeIt：Используется для достижения эффекта пишущей машинки.。
• axios：используется дляиметь дело сHTTP-запрос.

метод：

• startChat()：К后端отправлять请求,Начать новый сеанс чата。
  • Сохранение после успехаchatCode。
  • еслинеудача,КmessagesДобавить сообщение об ошибке。
• sendMessage()：иметь дело с Логика отправки сообщений.
  • исследоватьnewMessage是否для空。
  • возобновлятьisSendingиisLoadingсостояние。
  • Воля用户информация添加到messages。
  • еслиchatCodeдля空,вызовstartChat()Получать。
  • Отправляйте пользовательский ввод на серверную часть и получайте ответы от ботов.
  • Воля Ответ бота добавлен вmessages,и установитьisTypingдляtrue。
  • использоватьTypeIt在指定的容器中показывать打字机效果。
  • иметь дело с Ситуация, когда запрос не выполняется.

methods: {
    async startChat(){
      try{
        const response = await axios.post('http://localhost:8080/api/chats/start');
        this.chatCode = response.data; // Вернуть серверную часть chatCode Сохранить во внешнем интерфейсе
        console.log('Chat started with code:', this.chatCode);
      } catch (error) {
        console.error('Failed to start chat:', error);
        this.messages.push({ sender: 'bot', content: 'Невозможно начать разговор. Пожалуйста, повторите попытку позже. ' });
      }
    },
​
    async sendMessage() {
      if (!this.newMessage.trim()) return; // Обязательно не отправляйте пустые сообщения
      this.isSending = true; // Начать отправку, отключить кнопку отправки
      this.isLoading = true;
​
      // Добавить сообщение пользователя в беседу
      this.messages.push({ sender: 'user', content: this.newMessage, isTyping: false });
      
      // если chatCode пусто, позвоните сначала startChat Получать
      if (!this.chatCode) {
              await this.startChat();
              if (!this.chatCode) {
                this.isSending = false;
                this.isLoading = false;
                return; // если Получать chatCode Ошибка, прекратите отправку
              }
            }
​
      try {
      // Имитация асинхронных ответов Получениябота
      setTimeout(async () => {
        // к весне Серверная часть загрузки отправляет запрос POST
        const response = await axios.post(`http://localhost:8080/api/chats/${this.chatCode}/ask`, {
          prompt: this.newMessage // Используйте запрос POST и передайте данные в формате JSON.
        });
​
        const botMessageContent = response.data.reply; // в соответствии с后端响应的结构Получатьинформация内容
        
        this.messages.push({ sender: 'bot', content: botMessageContent, isTyping: true });
​
        setTimeout(() => {
          const botMessageIndex = this.messages.length -1 ;
          const container = this.$refs[`typeitContainer${botMessageIndex}`];
          if (container) {
            new TypeIt(container[0], {
              strings: [botMessageContent],
              speed: 50,
              afterComplete: (instance) => {
                this.messages[botMessageIndex].isTyping = false;
                instance.destroy(); // Принудительное обновление для отображения полного сообщения
              }
            }).go();
          }
        },0);
​
        this.isLoading = false;
        // Очистить поле ввода
        this.newMessage = '';
        this.isSending = false; // Завершить отправку, разрешить отправку снова
      }, 1000); // Предположим, ответ получен через 1 секунду.
    } catch (error) {
      console.error('Получатьотвечатьнеудача:', error);
      // иметь дело с Ошибочные состояния, например добавление сообщения об ошибке в беседу.
      this.messages.push({ sender: 'bot', content: 'Пожалей,Невозможно ответить. ' });
    }

Бэкэнд-реализация

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

Модуль веб-обработки данных：

• Ответственный дело Данные, вводимые пользователем из внешнего интерфейса, включают в себя бизнес-логику, такую ​​как обнаружение и фильтрация конфиденциальных слов, которые не соответствуют логике разговора.
• Воляиметь дело Чистые данные после с передаются в модуль взаимодействия с ИИ.
• Также необходимо реализовать хранилище данных для записи данных взаимодействия каждого пользовательского разговора, уделяя особое внимание бизнес-информации. Нет необходимости хранить технические детали ИИ, такие как токены или внутренние состояния. Необходимо записывать только поверхностные данные. взаимодействия с пользователем, например лайки возвращаемого текста, рейтинги и т. д.

Модуль взаимодействия с данными AI：

• иметь дело с Взаимодействие с моделями ИИ будет Модуль веб-обработки Данные, передаваемые data, передаются в AI. Интерфейс SDK для получения сгенерированных данных ответа.
• Эту часть данных о взаимодействии необходимо записывать, чтобы впоследствии сравнить эффекты обратной связи разных ИИ или реализовать применение мультимодальных больших моделей.
• Сохраняйте модули как можно менее связанными и разделяйте их на четкие иерархии, чтобы облегчить последующее обслуживание и расширение.
• В то же время этот модуль также должен записывать данные, которые помогают настроить производительность ИИ, такие как количество токенов на запрос, время ответа и другие показатели.

Здесь мы используем большую модель Hunyuan для разработки интерфейса API. Сначала откройте Tencent Cloud Hunyuan, чтобы создать соответствующее приложение:

После публикации мы можем получить соответствующий APIKey.

Управление ключами доступа создает ключ и осуществляет доступ к нему вместе с комбинацией API для внутренней связи с искусственным интеллектом.

Шаблон вызова для реализации API см.:

Slf4j
@Service
public class TencentyiServicelmpl implements TencentiService{
    @Resource
    private TencentProperties aliyunProperties;
    @Autowired
    private AiChatTencentRespRepository aiChatTencentRespRepository;
    @Override
    public TencentChatRespDto chat(TencentChatReqDto dto) {
        try {
            // Создание параметров вызова API
            ApplicationParam param = ApplicationParam.builder()
                    .apiKey(TencentProperties.getTongyi().getApiKey())
                    .appId(TencentProperties.getTongyi().getChatAppId())
                    .prompt(dto.getPrompt())
                    .build();
            Application application = new Application();
            ApplicationResult result = application.call(param);
            // Создать возвращаемый объект
            AiResponse response = new AiResponse(result.getRequestId(), dto.getPrompt(), result.getOutput().getText(), result.getOutput().getFinishReason(), result.getUsage());
            // Воля AiResponse Преобразовать в класс сущности AiChatTongyiRespPo
            AiChatTencentRespPo po = AiResponseToPoConverter.convert(response);
            aiChatTencentRespRepository.saveAiResponse(po);
            return new TencentChatRespDto().setReply(result.getOutput().getText());
​
        }catch (Exception e){
            log.error("Неизвестная ошибка при вызове большой модели", e);
            throw new RuntimeException("Ошибка вызова", e);
        }
    }
}

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

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

Начать разговор (/start)：

• POST /start Маршрут используется для начала нового сеанса чата, вызывая askService.startChat() Начните новый разговор и верните номер чата, чтобы облегчить последующую Задать. задавать вопросы и взаимодействовать.

Задать вопрос (/{chatCode}/ask)：

• POST /{chatCode}/ask Маршрутизация позволяет пользователям отправлять сообщения в AIЗадать в рамках определенного сеанса чата. вопрос。
• Метод получает номера чатов и данные, отправленные пользователем из формы. (AiChatForm),вызов askService.ask(chatCode, form.getPrompt()) Генерируйте ответы ИИ и проходите assemble() метод Воля AiChatAsk Объект преобразован в возвращен пользователю AskReplyVo Посмотреть объект.

оценивать (/{chatCode}/asks/{askCode}/evaluate)：

• PUT /{chatCode}/asks/{askCode}/evaluate Маршрутизация используется для оценки ответов ИИ.
• Найдите конкретный разговор по номеру чата и номеру вопросов и ответов и позвоните askService.evaluate() метод Воляпользователяоценивать（например, удовлетворение）запиши это。
• Если соответствующие данные вопроса и ответа не могут быть найдены, будет выдано исключение. ServiceException("Вопросы и ответы не существуют")。

При этом создайте новую таблицу, чтобы сохранить все данные разговоров для последующей оптимизации бизнес-модели:

При проектировании следует отметить, чтоchat_code записывает один и тот же номер диалога, который можно пометить как один и тот же идентификатор клиента, и можно проследить связь с контекстной проблемой. Последующие лайки комментариев клиентов выполняются после триггерной операции. Ask_code и Assessment возвращаются через внешний интерфейс, и эта таблица MySQL обновляется для записи лайков комментариев.

public class AiChatAskServiceImpl implements AiChatAskService {
    @Resource
    private AiChatAskRepository askRepository;
    @Resource
    private AiyunTongyiService tongyiService;
​
    @Override
    public String startChat() {
        return IdUtil.fastSimpleUUID();
    }
​
    @Override
    public AiChatAsk ask(String chatCode, String prompt) {
        AiChatAsk ask = new AiChatAsk(new AiChatAskInfo(chatCode, prompt));
        ask.start();
​
        TongyiChatRespDto resp = tongyiService.chat(new TongyiChatReqDto()
                .setAskCode(ask.getAskInfo().getAskCode())
                .setPrompt(prompt));
        ask.reply(resp.getReply());
​
        askRepository.save(ask);
        return ask;
    }
    @Override
    public void evaluate(AiChatAsk ask, Integer evaluate) {
        ask.evaluate(evaluate);
        askRepository.saveOnEvaluate(ask);
    }
​
}

Просто обратитесь к приведенному выше функциональному дизайну и реализации.,Интерфейс охватывает основные функции сеанса чата ИИ: начало сеанса, отчет ИИ, Задать вопрос и удовлетворенность ответами ИИ.,同час设计了一个测试接口используется для验证系统是否正常运行。исходный код Волязагрузить вGithubНуждающиеся студенты могут просмотреть исходный код напрямую.,Логика кода проста и в принципе нет сложной конструкции.,В будущем мультимодальные функции могут быть интегрированы и использованы в качестве основы.

Подвести итог

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

В процессе строительства проекта особое внимание уделялось малому количеству соединений и модульной конструкции системы, чтобы облегчить последующее обслуживание и расширение. Каждый из интерфейсов и серверов несет соответствующие обязанности. Интерфейс ориентирован на взаимодействие с пользователем и проектирование взаимодействия, а серверная часть сосредоточена на обработке бизнес-логики и эффективном взаимодействии с ИИ, чтобы гарантировать, что система может не только предоставлять услуги пользователям. с беспрепятственным опытом, но также быстро обрабатывать запросы пользователей и возвращать ценные ответы. Я надеюсь, что эта статья поможет каждому понять процесс создания системы обслуживания клиентов AI Q&A и предоставит эффективный справочник для фактической разработки. Спасибо за чтение и поддержку, и я с нетерпением жду ваших отзывов и дальнейшего общения.