ChatGLM流式传输 / ai #17

lemooljiang(76)

Published in

HIVE CN 中文社区

Words

278

Reading

2 min

Listen

Play

https://www.zhipuai.cn

作为开发ChatGLM的主公司：智谱AI提供了很方便的API接口，只需在页面注册后就可得到API KEY, 然后就可以直接调用了，这些和OpenAI API的做法是一样的。

流式传输

流式传输就是每生成一段就传一段，在页面上就是那种打字机的效果：逐字生成。这种方法比较人性，生成多少就可以看到多少。ChatGLM也有类似的方法。

import zhipuai

zhipuai.api_key = 'ZHIPU_API_KEY'

def streaming(query, temperature):
    response = zhipuai.model_api.sse_invoke(
        model = "chatglm_lite",
        prompt = query,
        top_p = 0.7,
        temperature = temperature,
    )
    for event in response.events():
        if event.event == "add":
            yield event.data
        elif event.event == "error" or event.event == "interrupted":
            return "error", 500
        elif event.event == "finish":
            return
        else:
            return

后台的代码感觉还是比较简洁，几行就全搞定啰。

前端代码

前端感觉就略显复杂了，这里采用的方法是原生地fetch, 其它的诸如 axios, useFetch方法都不好用，试了半天还是得放弃，只能采用fetch

let dataObj = {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({
          query: history,
          temperature: 0.2
      })
  }
  const response = await fetch(baseURL+'/zhipustreaming', dataObj)
  messageDiv.innerHTML = " "
  if (response.ok) {    
      let i = 0
      let getStream = function (reader) {
          return reader.read().then(function (result) {
            // 如果数据已经读取完毕，直接返回
            if (result.done) {
              clearInterval(loadInterval)  
              loading.textContent = ''
              return
            }
            // 取出本段数据（二进制格式）
            let chunk = result.value
            let text = utf8ArrayToStr(chunk)
            if(i === 0){
              text = text.replace(/\\n/g,'')  //去除首段换行
            } else{
              text = text.replace(/\\n/g,'
')
            }
            // 将本段数据追加到网页之中
            messageDiv.innerHTML += text
            i ++
            // 递归处理下一段数据
            return getStream(reader)
          })
      }
      getStream(response.body.getReader())
  }