十分钟撸一个文心一言4.0

目前百度已经开放了文心一言大语言模型。我很有兴趣尝尝鲜,经过十多分钟的头脑风暴,火力全开。一个简陋却不简单的 demo 出来了。

整体交互流程设计:

  1. 🤵‍♂️用户在输入框中输入,按回车发送。
  2. 在对话区增加一条用户输入,对话区机器人🤖显示loading状态,并发送文心一言接口请求。
  3. 文心一言返回结果后,将其展示在对话区。

页面布局

html 复制代码
<template>
  <div class="wxyy">
    <div class="dialog">
      <!-- 对话区 -->
    </div>
    <!-- 输入框 -->
    <textarea></textarea>
  </div>
</template>

主打一个简单!

调接口

核心代码自然是调文心一言的 api 接口。文档在此

如果不用流式响应,那就是普通的 post 接口,so easy!

js 复制代码
// access_token 获取参见 https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Ilkkrb0i5
const access_token = 'your_access_token'
fetch(
  `https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=${access_token}`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      /**
       * 关键参数 messages
       * 之所以是数组,在于多轮对话时需要把对话历史全部传过去供模型分析
       */
      messages: [
        {
          role: 'user',
          content: '你好',
        },
      ],
    }),
  }
)

简单优化一下

最终效果如下:

完整代码如下:

html 复制代码
<template>
  <div class="wxyy">
    <div class="dialog">
      <div v-for="item in dialog" class="item" :class="[item.role]">
        <div class="avatar" v-if="item.role === 'assistant'">🤖</div>
        <div class="content">{{ item.content }}</div>
        <div class="avatar" v-if="item.role === 'user'">🤵‍</div>
      </div>
      <div class="item assistant" v-if="loading">
        <div class="avatar">🤖</div>
        <div class="content">正在想。。。</div>
      </div>
    </div>
    <textarea @keypress.enter="sendPrompt"
              v-model="prompt"></textarea>
  </div>
</template>

<script>
export default {
  data () {
    return {
      prompt: '',
      dialog: [],
      loading: false,
    }
  },
  methods: {
    sendPrompt (e) {
      this.loading = true
      e.preventDefault()
      this.dialog.push({
        role: 'user',
        content: this.prompt,
      })
      this.prompt = ''
      // 替换成你自己的 access_token
      const access_token = 'your_access_token'
      fetch(`https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=${access_token}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          messages: this.dialog
        })
      }).then(res => res.json()).then(res => {
        this.loading = false
        this.dialog.push({
          role: 'assistant',
          content: res.result
        })
      })
    },
  }
}
</script>

<style lang="less"
       scoped>
.wxyy {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 80vh;
  margin: 20px;
  border: 1px dashed lightcoral;

  .dialog {
    flex: 1;
    .item {
      display: flex;
      .content {
        width: 60%;
      }
    }
    .avatar {
      font-size: 32px;
    }
    .user {
      justify-content: flex-end;
      .content {
        background: lightblue;
      }
    }
  }
}
</style>
相关推荐
zqx_71 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己1 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称2 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色2 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
玄奕子2 小时前
GPT对话知识库——在STM32的平台下,通过SPI读取和写入Flash的步骤。
stm32·单片机·gpt·嵌入式·嵌入式驱动
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河2 小时前
CSS总结
前端·css
BigYe程普3 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H3 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍3 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发