概述
最近chatGpt爆火出圈，如果我们也想要亲身体验一把并将其实现到我们自己的静态页面上。
只需两步就能完成
1.获取token
国外注册比较简单，国内就比较麻烦。所以花钱在网上买了个账号，还不能登录，需要搭梯子才能登录。要求对方退钱，或者直接给一个token。对方说不能退钱，给了一个token。
2.写页面接口
<html>
<head>
<title>
chatGPT
</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" style="display: flex;flex-flow: column;margin: 20 ">
<div style="display: flex;justify-content: center;align-items: center;margin: 20">
<textarea type="text" v-model="info" cols="40" rows="3" style="margin:15"></textarea>
<button v-on:click="ask()">发送</button>
</div>
<div style="display: flex;justify-content: center;align-items: center;"><textarea name="res" id="res" cols="100"
rows="20">{{res}}</textarea></div>
</div>
<body>
<script language="javascript">
const { chatGPT } = Vue
chatGPT({
data() {
return {
reqInfo: '软件架构定义和组成',
resInfo: '',
token: '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'
}
},
methods: {
ask() {
this.res = '请求中。。。。。。'
axios.post('https://api.openai.com/v1/completions', {"model":"text-davinci-003","prompt":this.reqInfo,"max_tokens":2048,"temperature":0.7,"top_p":1,"frequency_penalty":0,"presence_penalty":0}, {
headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.token }
}).then(response => { this.resInfo = response.data.choices[0].text })
}
}
}).mount('#app')
</script>
</html>
测试
双击页面，打开到浏览器，点击发送：
测试结果
软件架构是一种软件设计模式，它可以提供一个清晰的架构，用于设计、实施和维护软件系统。它是软件系统的抽象描述，其中包含了软件系统的技术组件、架构、技术构件的抽象描述和它们之间的关系。
软件架构由以下几个部分组成：
- 应用程序框架：应用程序框架是架构的核心，它定义了系统的结构，以及实现各种功能的手段，例如编程语言、软件开发工具、开发环境等。
- 基础设施：基础设施是软件架构的基础，它提供系统所需要的硬件、操作系统、网络、数据库等基础设施。
- 架构层次：它定义了架构的多个层次，每一层都有不同的职责和功能，从低层到高层，负责实现软件系统的功能。
- 元素：它描述了架构中的元素，比如模块、组件、服务和接口等。
- 架构模式：它描述了架构中的模式，比如组件、模块、服务、接口、等等。
- 连接：它定义了架构中的连接，比如模块之间的连接、组件之间的连接、服务之间的连接等。
-
配置：它描述了架构中的配置，比如模块配置、组件配置、服务配置等。
总裁
本质
