技术布道 | Vue及Python调用零一万物模型和Prompt模板（通过百度千帆大模型平台）

前面BedtimeStory代码还在继续整理，发现部署到本地电脑和云端服务器还是要准备不少的环境，软件版本不匹配、文件路径要修改......总之一堆问题。有没有更简便的方式呢？当前我不训练自己的大模型，只是想快捷简便的使用已有的大模型，有什么方案么？

有的，直接使用一些大模型社区，不仅提供大模型、数据集展示和下载，还支持直接部署到云端，作为用户我们直接通过API来调用就行了，今天我们就来看看百度千帆大模型平台来跑下Yi模型和Prompt模板。

Let's 构！

调用零一万物Yi模型

基于百度千帆大模型平台

1. 在百度云千帆大模型平台中先部署Yi模型在线服务，费用可选择按小时计费，28元/小时，先付费后使用，不用担心后付费时费用较多的情况。

2. 部署完成后可以查看在线服务的详情。

3. 通过API调用在线服务需要先获取AppID和AppKey，在后续代码中先通过AppID和AppKey生成获取access_token，然后再对大模型进行调用。

4. 官网文档（https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Ilphtu4k6）中提供了示例代码，可以直接参考使用。

5. 通过示例代码能够很容易在本地将Python代码跑起来，只需要AppID和AppKey两个参数，如果想修改Prompt也是可以的，直接硬编码了。

6. 我们希望通过API的方式来调用上面的Python脚本，所以使用Flask封装API，先安装Flask，编写代码（可直接参考下面的代码）。

from flask import Flaskimport requestsimport json
app=Flask(__name__)         #实例化并命名为app实例
@app.route("/yi")def yi_model():    url = "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=<client_id>&client_secret=<client_secret>"
    payload = json.dumps("")    headers = {'Content-Type': 'application/json','Accept': 'application/json'    }
    response = requests.request("POST", url, headers=headers, data=payload)    access_token = response.json().get("access_token")
"""    替换下列示例中的申请发布时填写的API名称    """
    url = "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/completions/hoaw3730_01ai?access_token=" + access_token
    payload = json.dumps({"prompt":"Introduce the city Beijing"    })    headers = {'Content-Type': 'application/json'    }
    response = requests.request("POST", url, headers=headers, data=payload)
    print(response.text)return response.text

if __name__ == '__main__':    app.run(port=2000,host="127.0.0.1",debug=True)

7. 在本地测试下请求结果，浏览器访问127.0.0.1:2020/yi，显示的内容较多，但请求是成功的。

8. 在百度千帆大模型平台中查看我们部署的在线服务的调用量。

通过Vue直接请求API

离线上应用越来越近

9. 我们继续封装API，除了调用Yi模型，我们还可以尝试增加对Prompt模板的调用（官网文档：https://cloud.baidu.com/doc/WENXINWORKSHOP/s/Olp7ysef9）。

10. 调用Prompt模板在线服务就需要找到一个合适的模板，我们需要记住这个Prompt模板的ID：6625，在稍后调用时使用。

11. 在Vue项目中封装API，代码客户可直接使用。

# /src/api/api.js
import axios from "axios";
export const getAccessToken = params => {  return axios.get("/oauth/2.0/token",{ params: params });};
export const requestYi = params => {  return axios.get(`/rpc/2.0/ai_custom/v1/wenxinworkshop/template/info`,{ params: params });};
export const requestPrompt = params => {  return axios.get('/rest/2.0/wenxinworkshop/api/v1/template/info',{ params: params })}

12. 在Vue前端界面文件中调用，我们显示access_token、对Yi模型调用响应结果、对Prompt模板调用响应结果，在网页中展示响应信息。

<template><div class="content"><div class="info_block"><div class="info_block_title">access_token</div><div class="info_block_content">                {{ access_token }}</div></div>
<div class="info_block"><div class="info_block_title">请求Yi模型响应</div><div class="info_block_content">                {{ response_yi }}</div></div>
<div class="info_block"><div class="info_block_title">请求Prompt响应</div><div class="info_block_content">                {{ response_prompt }}</div></div></div></template><script>import { getAccessToken } from '../../api/lab.js';import { requestYi } from '../../api/lab.js';import { requestPrompt } from '../../api/lab.js';
export default {name:'story_',    data() {return {access_token: '',response_yi: '',response_prompt: ''      };    },    mounted() {this.requestQianfanAPI()    },methods: {        requestQianfanAPI(){const params = {grant_type: "client_credentials",client_id: "<your_client_id>",client_secret: "<your_client_secret>"            }            getAccessToken(params).then((res)=>{this.access_token = res.data.access_token
const yi_params = {access_token: this.access_token                }                requestYi(yi_params).then((res)=>{console.log("cc")console.log(res)this.response_yi = res.data                })
const prompt_params = {access_token: this.access_token,id: 6625,problem: '这是一个问题',content: '我是测试内容'                }
                requestPrompt(prompt_params).then((res)=>{this.response_prompt = res.data                })            })
        }    }};</script>
<style>body {width:100%;height:100%;}.content {width:80%;height:100%;margin:0 auto;line-height: 28px;}.info_block {border:2px solid #0066FF;border-radius:0.5em;margin-bottom:28px;overflow:hidden;}.info_block_title {background-color: #0066FF20;color:#0066FF;font-weight: bold;padding:10px;border-bottom: 2px solid #0066FF;}.info_block_content {font-size:14px;background-color:#FFFFFF;min-height:100px;padding:10px;}</style>

13. 通过本地服务调用百度API涉及跨域调用，因此我们需要通过Proxy来更改请求路径。

# vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({  transpileDependencies: true,  devServer:{    open:true,    host:'localhost',    port: 8082,    proxy: {      '/oauth': {        target: 'https://aip.baidubce.com',        changeOrigin:true,        pathRewrite:{          '^/oauth/2.0/token':'/oauth/2.0/token'        }      },      '/rpc': {        target: 'https://aip.baidubce.com',        changeOrigin:true,        pathRewrite:{          '^/rpc/2.0/ai_custom/v1/wenxinworkshop/completions/hoaw3730_01ai':'/rpc/2.0/ai_custom/v1/wenxinworkshop/completions/hoaw3730_01ai'        }      },      '/rest': {        target: 'https://aip.baidubce.com',        changeOrigin:true,        pathRewrite:{          '^/rest':'/rest'        }      }    }  }})