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>
相关推荐
白-胖-子36 分钟前
深入剖析大模型在文本生成式 AI 产品架构中的核心地位
人工智能·架构
小溪彼岸1 小时前
初识Google Colab
google·aigc
小溪彼岸1 小时前
【Hugging Face】Hugging Face模型的基本使用
aigc
想要成为计算机高手2 小时前
11. isaacsim4.2教程-Transform 树与Odometry
人工智能·机器人·自动驾驶·ros·rviz·isaac sim·仿真环境
静心问道2 小时前
InstructBLIP:通过指令微调迈向通用视觉-语言模型
人工智能·多模态·ai技术应用
宇称不守恒4.03 小时前
2025暑期—06神经网络-常见网络2
网络·人工智能·神经网络
小楓12013 小时前
醫護行業在未來會被AI淘汰嗎?
人工智能·醫療·護理·職業
墨风如雪3 小时前
会“偷懒”的大模型来了:快手开源KAT-V1,终结AI“过度思考”
aigc
数据与人工智能律师4 小时前
数字迷雾中的安全锚点:解码匿名化与假名化的法律边界与商业价值
大数据·网络·人工智能·云计算·区块链
chenchihwen4 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习