uni-app (接入智谱清言语言模型)

1.技术说明

uni-app、智谱清言、XMLHttpRequest、marked

2.实现原理

此处实现原理为前端直接请求返还数据结果,未经后端进行处理,如AI接口有变化,请根据接口文档进行修改,通义千问AI同理。

XMLHttpRequest发起请求->监听数据流->输出结果到页面(markdown)

3.插件安装
php 复制代码
## 安装marked
pnpm add marked

## uni-app 支持XMLHttpRequest请求,因此无需安装
4.核心代码

该代码只实现了核心功能,具体参数及业务拓展请自行修改

html 复制代码
<template>
  <view class="container p-3 box-border" @click="handleClick">message</view>
  <view v-html="responseData"></view>
</template>

<script lang="ts" setup>
import { marked } from 'marked'

/**
 *  @author: xl
 *  @date: 2025/01/12
 *  @description: 智谱清言语言模型接入 wechat:suiyi01001
 *  @version: 1.0.0
 */

//  定义响应数据
const responseData = ref<String>('')

//  定义点击事件
const handleClick = () => {
  initRequest()
}

//  定义请求
const initRequest = () => {
  const xhr = new XMLHttpRequest()

  // 打开 POST 请求
  xhr.open('POST', 'https://open.bigmodel.cn/api/paas/v4/chat/completions', true)

  // 设置自定义请求头
  xhr.setRequestHeader('Authorization', 'Bearer 你自己的key')
  xhr.setRequestHeader('Content-Type', 'application/json')

  // 发送 POST 请求,带参数
  xhr.send(
    JSON.stringify({
      model: 'glm-4-plus',
      messages: [{ role: 'user', content: '中国国土面积是多少' }],
      stream: true,
    }),
  )

  // 监听流数据
  xhr.onreadystatechange = async () => {
    //  说明有数据返回
    if (xhr.readyState === 3) {
      //   分割数据
      const jsonStringsArray = xhr.responseText
        .split('\n')
        .filter((line) => line.startsWith('data: '))

      //   循环分割的数据
      let dataText = ''
      for (var i = 0; i < jsonStringsArray.length; i++) {
        if (jsonStringsArray[i].slice(6) == '[DONE]') {
          console.log('SSE 已关闭连接')
        } else {
          const jsonObject = JSON.parse(jsonStringsArray[i].slice(6)) // 剔除"data:"前缀
          // console.log('jsonObject: ', jsonObject);
          const choices = jsonObject.choices // 提取choices数组
          // 存在数据输出结果
          if (jsonObject.choices && jsonObject.choices[0].delta) {
            dataText += jsonObject.choices[0].delta.content
          }
        }
      }
      //  输出最终数据
      responseData.value = await marked(dataText)
    }
  }

  // 监听错误
  xhr.onerror = (err) => {
    console.error('SSE 错误:', err)
  }
}

onLoad(() => {})
</script>

<style lang="scss" scoped></style>
相关推荐
智能汽车人10 分钟前
Robot---能打羽毛球的机器人
人工智能·机器人·强化学习
埃菲尔铁塔_CV算法11 分钟前
基于 TOF 图像高频信息恢复 RGB 图像的原理、应用与实现
人工智能·深度学习·数码相机·算法·目标检测·计算机视觉
耶啵奶膘15 分钟前
uniapp——地图路线绘制map
uni-app
ζั͡山 ั͡有扶苏 ั͡✾15 分钟前
AI辅助编程工具对比分析:Cursor、Copilot及其他主流选择
人工智能·copilot·cursor
东临碣石8218 分钟前
【AI论文】数学推理能否提升大型语言模型(LLM)的通用能力?——探究大型语言模型推理能力的可迁移性
人工智能·语言模型·自然语言处理
shadouqi20 分钟前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
redreamSo24 分钟前
AI Daily | AI日报:Nature:超14%生物医学论文或由AI代写; Grok 4测试成绩优异,数据真实性引争议; 李飞飞:攻克空间智能,为AGI补拼图
程序员·aigc·资讯
未来智慧谷1 小时前
微软医疗AI诊断系统发布 多智能体协作实现疑难病例分析
人工智能·microsoft·医疗ai
PetterHillWater1 小时前
阿里云CodeUp集成大模型自动代码审查
aigc
野生技术架构师1 小时前
简述MCP的原理-AI时代的USB接口
人工智能·microsoft