HarmonyOS NEXT DeepSeek+鸿蒙ArkTS三分钟实现用户与机器人对话界面前端转鸿蒙怎么样？（这里调用

前端转鸿蒙怎么样？（这里调用的是v3的接口）

一、鸿蒙布局的一些基本语法实现静态界面

①从外到内，至上而下，使用Column和Row来实现基础布局框架
②中间的区域我们可以使用List容器组件来解决，设置layoutWeight（1）则可撑满中间的区域
③使用ForEach来遍历ListItem，里面的内容由数据来决定，数据变化则视图变化

Column(){
  List({space:20}){
    ListItem(){
      Text('我是DeepSeek-V3，有什么可以帮到你?').fontSize(20)
    }
    ForEach(this.listAA, (item: Message) => {
      ListItem(){
        Column(){
          Image(item.role == 'system' ?$r('app.media.deepseek'):$r('app.media.my'))
            .width(40)
          Text(item.content)
            .fontSize(20)
            .fontColor(item.role == 'system' ? '#ff2f2b2b' : '#ff3196ef')
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
      }
    })
  }
}
.margin({top:10})
.layoutWeight(1)

二、准备数据（使用接口）

①从华为云上面领取接口链接和token（这个是免费的）支持全部的DeepSeek接口包括R1的
②用终端注册请求插件

③根据接口相应的数据我们需要准备一些数据类型interface和导入插件


import {http}from'@kit.NetworkKit'
import {fetchEventSource}from'fetch_event_source';

interface Delta{
  content:string
}
interface Chocies{
  delta:Delta
  index:number
}
interface ResponseQ{
  id:number,
  object:string,
  created:number,
  model:string,
  choices:Chocies[]
}
interface Message{
  role:'system'|'user'|'assdRFD',
  content:string
}

④封装请求函数，并在aboutToAppear中调用，当然，我们输入内容后点击确认按钮也需要去调用

aboutToAppear(): void {
  this.promptDeepSeek()
}
promptDeepSeek(){
  fetchEventSource(this.api_url,{
    method:http.RequestMethod.POST,
    header:{
      'Content-Type':'application/json',
      'Authorization':`Bearer ${this.token}`
    },
    extraData: {
      "model": "DeepSeek-V3",
      "max_tokens": 500,
      "messages": [
        { "role": "system", "content": `You are a helpful assistant.` },
        { "role": "user", "content": this.inputvalue || '你好' }
      ],
      // # 是否开启流式推理, 默认为False, 表示不开启流式推理
      "stream": true,
      // # 在流式输出时是否展示使用的token数目。只有当stream为True时改参数才会生效。
      "stream_options": { "include_usage": true },
      // # 控制采样随机性的浮点数，值较低时模型更具确定性，值较高时模型更具创造性。"0"表示贪婪取样。默认为1.0。
      "temperature": 1.0
    },
    onopen:async()=>{
      this.listAA.push({
        role:'user',
        content:''
      })
    },
    onmessage:(ev) => {
      console.log('+++',JSON.stringify(ev.data))
      try{
        const res = JSON.parse(ev.data) as ResponseQ
        const constr = res.choices[0]?.delta?.content
        const ColConst = this.listAA[this.listAA.length-1].content
        if(constr){
          this.listAA.splice(this.listAA.length-1,1,{
            role:'system',
            content:ColConst+constr
          })
        }
      }catch(err){
        console.log('+++ 失败')
      }
    },
    onclose:()=>{
      console.log('+++ 关闭',JSON.stringify(this.listAA))
    },
    onerror:(err)=>{
      return undefined
    }
  });
}

⑤准备变量：你的接口链接、你的token、输入的内容（使用$$进行双向绑定）、listAA（中间所需要的数据内容）

这样就实现了用户与机器人对话界面