当前位置：首页 > news >正文

前端 AI 开发实战：基于自定义工具类的大语言模型与语音识别调用指南

news 来源：原创 2025/4/30 9:38:16

在人工智能技术快速发展的今天，将大语言模型（LLM）和语音识别（ASR）功能集成到前端应用中，已经成为提升用户体验、打造智能化应用的重要手段。本文将结合一段实际的 AI 工具类代码，详细讲解如何在前端项目中快速实现大语言模型交互与语音识别功能，帮助开发者快速搭建属于自己的 AI 应用。

一、核心功能概览

本文介绍的 AI 工具类主要实现两大核心功能：

大语言模型调用：支持通义千问、豆包等多种主流 LLM，通过传入文本 prompt 获取模型生成的内容。
语音识别：支持简体中文、英语、日语等多语言的音频文件识别，将语音转化为文字。

二、代码结构解析

1. 枚举类型定义

export enum SupportLLM {TONGYIQIANWEN = "tongyiqianwen",VOL_DOUBAO = "voldoubao",MINIMAX = "minimax",DEEPSEEK = "deepseek",
}export enum AsrLanguage {ZH_CN = "zh", // 简体中文YUE_CN = "yue-cn", // 粤语EN_US = "en", // 美式英语// 其他语言...
}

通过SupportLLM和AsrLanguage枚举，将支持的大语言模型名称和语音识别语种进行标准化定义，方便后续代码调用和维护，避免硬编码带来的问题。

2. 常量配置

const LLM_API_TOKEN = "大模型API认证信息";
const LLM_API_KEY = "大模型API认证信息";
const LLM_BASE_URL = "https://ai-hub-temp.baicizhan.com/temp_llm";
const DEFAULT_RES_TYPE = "online";
const ASR_BASE_URL = "https://ai-hub-temp.baicizhan.com/temp_asr/short/aliyun";

LLM_API_TOKEN 和 LLM_API_KEY 是调用大语言模型 API 所需的认证信息。
LLM_BASE_URL 是大语言模型 API 的基础 URL（目前已接入，根据实际接入的替换即可）。
DEFAULT_RES_TYPE 是默认的结果返回类型。
ASR_BASE_URL 是语音识别 API 的基础 URL（同上）。

3. 模型配置与管理

export interface LLMModelConfig {name: SupportLLM;url: string;
}export const LLM_MODEL_CONFIG: LLMModelConfig[] = [// 多种模型配置
];

LLMModelConfig接口定义了每个大语言模型的名称和对应的 API 地址，LLM_MODEL_CONFIG数组则统一管理所有支持的模型配置。通过这种结构化的方式，后续如果需要新增或删除支持的模型，只需修改数组内容即可，代码扩展性强。

4. 核心功能函数

大语言模型调用函数

export function CallLLM(input: string,model: SupportLLM = SupportLLM.TONGYIQIANWEN
) {// 查找模型配置const modelConfig = LLM_MODEL_CONFIG.find((config) => config.name === model);if (!modelConfig) {throw new Error(`Unsupported LLM model: ${model}`);}return fetch(modelConfig.url, {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({token: LLM_API_TOKEN,key: LLM_API_KEY,// 其他参数prompt: input,}),});
}

CallLLM函数接收用户输入文本和指定模型（默认为通义千问），通过fetch向对应模型的 API 发送 POST 请求，携带认证信息和用户输入，获取模型生成的内容。请求返回的 Promise 对象可通过.then()链式调用进行结果处理。

语音识别调用函数

export function CallAsr(file: File, language: AsrLanguage = AsrLanguage.ZH_CN) {const formData = new FormData();formData.append("audio_file", file);// 添加认证和配置参数return fetch(ASR_BASE_URL, {method: "POST",body: formData,});
}

CallAsr函数接收音频文件和识别语言（默认为简体中文），通过FormData封装文件和请求参数，使用fetch向语音识别 API 发起请求，将音频转换为文字信息。