SvelteKit:显示来自 Langchain 的聊天流 token

Question

我正在开发一个使用 SvelteKit 和 Langchain 的项目。我想实现一个功能，我可以按下按钮并让 UI 在聊天流进入时显示它们的标记。但是，我当前使用表单操作的实现遇到了一些困难。

这是我迄今为止所实现的:

在+page.server.ts中:

import type { Actions } from './$types';
import { OPENAI_API_KEY } from '$env/static/private';
import type { RequestEvent } from '@sveltejs/kit';
import { ChatOpenAI } from "langchain/chat_models/openai"
import { HumanChatMessage } from 'langchain/schema';

const message = `Hello World!`

const model = new ChatOpenAI({
  openAIApiKey: OPENAI_API_KEY,
  streaming: true,
  modelName: 'gpt-3.5-turbo',
  callbacks: [
    {
      handleLLMNewToken(token) {
        // Don't know what to do here
      },
    }
  ]
});

export const actions = {
  chat: async (event: RequestEvent) => {
    const msg = await model.call([new HumanChatMessage(message)])

    return {
      success: true,
      message: msg.text,
    }
  }
} satisfies Actions;

在+page.svelte中:

<script lang="ts">
  import { enhance } from '$app/forms';
  export let form;
  $: response = form?.message;
</script>

<div>
  {#if response}
    {response}
  {/if}
</div>

<div>
  <form method="POST" action="?/chat" use:enhance>
    <button class="">
      Generate
    </button>
  </form>
</div>

我需要帮助来显示聊天流中的 token 。具体来说，我不确定如何在 Langchain ChatOpenAI 模型中处理 handleLLMNewToken 回调。对于如何实现这一目标，我将不胜感激任何指导或建议。

预先感谢您的帮助!

Answer 1

我认为您想看看 Github 上 semicognitive 的示例存储库:https://github.com/semicognitive/sveltekit-chat 。他在创建和返回 ReadableStream 的上下文中使用了 Langchain 的 CallbackManager。