调用通义千问大模型实现流式对话

前言

我使用的是硅基流动中通义千问免费的大模型：

我的技术栈使用的 Next14.2 全栈框架。

代码结构

需要使用的库：

npm i ai openai

目录结构：

基础测试页面 test-openai/page.tsx：

'use client';

import { useChat } from 'ai/react';

export default function TestDeepseek() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat/openai',
  });
  
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      <h1 className="text-2xl font-bold mb-4">Deepseek 聊天测试</h1>
      
      {messages.map(message => (
        <div key={message.id} className="whitespace-pre-wrap mb-4 p-3 border rounded-lg">
          <div className="font-bold">{message.role === 'user' ? '用户: ' : 'AI: '}</div>
          <div className="mt-1">{message.content}</div>
        </div>
      ))}
      
      <form onSubmit={handleSubmit} className="mt-4">
        <input
          className="w-full p-2 border border-gray-300 rounded shadow-sm dark:bg-gray-800 dark:border-gray-700"
          value={input}
          placeholder="输入消息..."
          onChange={handleInputChange}
        />
        <button 
          type="submit" 
          className="mt-2 w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          发送
        </button>
      </form>
    </div>
  );
}

后端接口 app/api/chat/openai/route.ts：

import { handleChatRequest } from '@/lib/openai';
import { NextRequest, NextResponse } from 'next/server';
import { MessageRequestBody } from '@/types/chat';

// 设置最大响应时间为30秒
export const maxDuration = 30;

/**
 * 处理POST请求，使用QwQ-32B模型进行聊天
 * 
 * @param request NextRequest请求对象
 * @returns 返回流式响应
 */
export async function POST(request: NextRequest) {
  try {
    // 从请求中获取消息数据
    const { messages } = (await request.json()) as MessageRequestBody;
    
    if (!messages || !Array.isArray(messages)) {
      return NextResponse.json(
        { error: '无效的消息格式' },
        { status: 400 }
      );
    }
    
    // 调用QwQ-32B处理函数并返回流式响应
    return handleChatRequest(messages);
  } catch (error) {
    console.error('处理QwQ-32B请求时出错:', error);
    return NextResponse.json(
      { error: '处理请求时发生错误: ' + (error instanceof Error ? error.message : String(error)) },
      { status: 500 }
    );
  }
}

lib/openai.ts

openai 规范调用大模型可以参考 deepseek文档：api-docs.deepseek.com/zh-cn/

也可以参考硅基流动的文档：docs.siliconflow.cn/cn/userguid...

import { Message } from '@/types/chat';
import { NextResponse } from 'next/server';
import OpenAI from 'openai';

// 创建自定义OpenAI实例，使用SiliconFlow API
const openai = new OpenAI({
  apiKey: process.env.SILICONFLOW_API_KEY!,
  baseURL: process.env.SILICONFLOW_API_BASE!,  
});

/**
 * 处理聊天请求的函数
 * 使用SiliconFlow API处理消息并返回流式响应
 * 
 * @param messages 聊天消息数组
 * @returns 流式响应
 */
export async function handleChatRequest(messages: Message[]) {
  try {
    // 检查API密钥是否配置
    if (!process.env.SILICONFLOW_API_KEY) {
      console.error('SiliconFlow API密钥未配置');
      return NextResponse.json(
        { error: '未配置SiliconFlow API密钥，请在.env文件中设置SILICONFLOW_API_KEY' },
        { status: 500 }
      );
    }

    // 检查API基础URL是否配置
    if (!process.env.SILICONFLOW_API_BASE) {
      console.error('SiliconFlow API基础URL未配置');
      return NextResponse.json(
        { error: '未配置SiliconFlow API基础URL，请在.env文件中设置SILICONFLOW_API_BASE' },
        { status: 500 }
      );
    }

    // 将消息格式转换为OpenAI格式
    const formattedMessages = messages.map(msg => ({
      role: msg.role,
      content: msg.content
    }));
    
    // 使用SiliconFlow API创建流式响应
    const response = await openai.chat.completions.create({
      model: 'Qwen/QwQ-32B', // 使用SiliconFlow提供的QwQ-32B模型
      messages: formattedMessages,
      stream: true,
    });
    
    // 创建并返回流式响应
    const encoder = new TextEncoder();
    const stream = new ReadableStream({
      async start(controller) {
        // 处理流式响应
        for await (const chunk of response) {
          const text = chunk.choices[0]?.delta?.content || '';
          if (text) {
            controller.enqueue(encoder.encode(text));
          }
        }
        controller.close();
      },
    });
    
    return new Response(stream, {
      headers: {
        'Content-Type': 'text/plain; charset=utf-8',
        'Cache-Control': 'no-cache',
      },
    });
  } catch (error) {
    console.error('SiliconFlow API调用错误:', error);
    return NextResponse.json(
      { error: '调用SiliconFlow API时发生错误: ' + (error instanceof Error ? error.message : String(error)) },
      { status: 500 }
    );
  }
}

.env

# SILICONFLOW API密钥
SILICONFLOW_API_KEY=YOUR_API_KEY
SILICONFLOW_API_BASE=https://api.siliconflow.cn/v1

# 其他环境变量

演示