受同事老卢委托，近期我在一个 Vue2 项目中探索集成了 AI 对话功能。考虑到成本和便利性，讯飞星火大模型 Lite 版因其免费且不限次数的特性，成为了本次尝试的首选。下面我将详细记录整个集成过程，希望能为有类似需求的开发者提供一些参考。
首先，我们需要在讯飞开放平台注册并配置我们的应用。
1. 注册账号与实名认证
访问讯飞开放平台并完成注册。注册过程相当简便直观。
注册成功后，务必进行微信绑定和实名认证，这是使用后续服务的前提。
2. 应用创建与配置
登录后，在控制台的“我的应用”界面，你会看到一个默认的应用。我们可以直接使用这个默认应用，或根据需要进行修改。
3. 领取免费资源
进入应用，选择“模型服务与支持”中的 Spark Lite 版本，即可领取无限量的免费 token。
类似地，我们也可以领取一些免费的图片生成图点，用于体验图片生成功能。
完成以上步骤后，记下应用的 APPID、APIKey、APISecret 以及对话接口的 APIPassword，这些凭证在后续调用 API 时至关重要。
为了确保顺利调用，我们可以先在讯飞提供的 API 调试中心进行测试。
1. 文本对话 API (Spark Lite)
在星火调试中心，选择 Spark Lite 模型。既然是免费的，我们可以将各项参数（如 、 等）调整到合适的范围进行测试。
调试中心主要演示的是流式对话的用例。如果我们需要非流式接口，可以查阅官方的参考文档。
参考文档中提供了 Python 的非流式调用示例。我们可以参照其请求结构和参数，将其转换为在服务端使用 Axios 等库发送请求的形式。
2. 图片生成 API
图片生成 API 的调用方式略有不同，它需要根据一定的规则生成签名 (Authorization)。
官方文档指出，这两个 API（文本对话和图片生成）都不支持跨域请求，因此我们不能直接在前端调用，而是需要通过后端服务器进行代理。接下来，我们将使用 Koa2 搭建一个 Node.js 后端代理服务。
为了解决跨域问题并安全地管理 API 密钥，我们将在服务端设置代理。
1. 初始化项目与依赖
在你的项目下创建一个 文件夹，并初始化 ：
由于图片服务需要加密签名，我们引入了 。运行 或 安装依赖。
2. 服务器基本配置 ()
创建 文件，并配置基本的中间件和 API 信息：
注意： 请务必将 中的 替换为你自己应用的真实凭证。
3. 图片生成 API 鉴权函数
根据讯飞官方文档的签名生成规则，我们编写一个函数来生成图片 API 所需的鉴权 URL：
4. 图片生成代理路由 ()
接下来，配置图片生成的代理路由。此路由接收前端的请求，附加上述生成的鉴权信息，然后转发给讯飞的图片生成 API。
5. 文本对话代理路由 ()
然后，我们配置文本对话的代理路由。这个路由将使用 进行 Bearer Token 认证。
6. 注册路由并启动服务器
最后，在 中注册路由并启动 Koa 服务器：
现在，你可以通过 (如果安装了 nodemon) 或 来启动后端代理服务。
为了使前端代码更整洁，我们将 API 调用封装成服务模块。在 Vue 项目的 目录下创建一个 文件夹。
1. 图片生成服务 ()
2. 文本对话服务 ()
接下来，我们使用 Vue2 构建一个简单的用户界面，允许用户进行文本对话或生成图片。我们将创建一个主组件 。
核心思路：
- 模式切换： 顶部提供按钮，用于在“文本对话”和“图片生成”模式间切换。
- 消息展示： 将用户输入和 AI 回复（包括生成的图片）都存储在一个 数组中，并统一渲染到聊天窗口。
- 上下文保持： 对于文本对话，维护一个 数组，用于向 API 传递上下文信息，实现多轮对话。
1. 数据初始化 ()
在 的 部分，我们首先定义组件的 ：
初始状态下， 为对话模式 ()， 为 (未加载)，并有一条欢迎消息。
2. UI 模板 ()
下面是 的模板部分，构建了聊天界面的基本布局：
3. 科大讯飞 星火 教程 核心逻辑 ()
包含了模式切换、消息发送、图片生成等核心方法。
4. 样式 ()
为组件添加一些美化样式：
将以上 , 和 部分整合到一个 文件中，并在你的 Vue 项目中正确引入和使用它（通常是替换 中默认的 ）。确保你的 Vue 项目已经安装了 ()。
通过以上步骤，我们成功地在 Vue2 项目中集成了讯飞星火大模型的文本对话和图片生成功能。整个过程涉及到了讯飞平台的注册配置、API 的理解、后端 Koa2 代理的搭建，以及前端 Vue 页面的构建和 API 调用。虽然讯飞的 API 文档在某些细节上（特别是 Lite 版的非流式对话接口参数结构）可能需要仔细甄别和测试，但总体而言，其免费的 Lite 版为开发者提供了一个很好的 AI 功能体验入口。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/280953.html原文链接：https://javaforall.net
