AI平台开发笔记
站长
· 阅读数 30
1.接入openai api
直接看官网文档接口
之前新用户注册（国外手机号）送$5，现在好像是不送了
pip3 install openai
from openai import OpenAI
client = OpenAI(api_key='xxxxxx')
def chat():
result = client.chat.completions.create(
model="gpt-3.5-turbo", # 调用的模型名称
temperature=0.5,
max_tokens=3000,
messages=[
{"role": "user",
"content": “chatGPT可以做什么”
}
],
)
re = result.choices[0].message.content
return re
2.接入智谱清言api zhipuai
不用去csdn等网站找，直接看官网的文档接口
和openai差不多
pip3 install zhipuai
from zhipuai import ZhipuAI
client = ZhipuAI(api_key="") # 填写您自己的APIKey
response = client.chat.completions.create(
model="glm-4", # 填写需要调用的模型名称
messages=[
{"role": "user", "content": "作为一名营销专家，请为智谱开放平台创作一个吸引人的slogan"},
{"role": "assistant", "content": "当然，为了创作一个吸引人的slogan，请告诉我一些关于您产品的信息"},
{"role": "user", "content": "智谱AI开放平台"},
{"role": "assistant", "content": "智启未来，谱绘无限一智谱AI，让创新触手可及!"},
{"role": "user", "content": "创造一个更精准、吸引人的slogan"}
],
)
print(response.choices[0].message)
3.element -下拉框
想做个下拉框，直接在element官网进行搜索
想做什么直接搜索，然后找到自己想要的样式应用，可以修改参数来改变样式
下拉选项是罗列出来的：
<el-dropdown>
<el-button type="primary">
更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
想把下拉菜单用v-for循环做
问chatGPT：el-dropdown-item v-for 动态菜单
chatGPT答：在Vue.js中，你可以使用v-for指令在<el-dropdown>组件中动态生成菜单项。下面是一个简单的示例：
<template>
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item, index) in menuItems" :key="index" @click="handleItemClick(item)">
{{ item.text }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ text: '菜单项1', action: 'item1Action' },
{ text: '菜单项2', action: 'item2Action' },
{ text: '菜单项3', action: 'item3Action' }
]
};
},
methods: {
handleItemClick(item) {
// 处理菜单项点击事件
console.log('点击了菜单项：', item);
}
}
};
</script>
在这个示例中，menuItems数组包含了要显示的菜单项。通过v-for指令遍历menuItems数组，在<el-dropdown-item>中动态生成菜单项，并为每个菜单项绑定了点击事件。点击菜单项时，会触发handleItemClick方法，你可以在这个方法中处理菜单项的点击事件。
根据示例代码修改以下几个地方，之后再增加下拉选项，只需要在menuItems中新增就可以了
vue双向绑定，command前面需要加冒号
<el-dropdown @command="handleCommand">
<el-button type="primary" style="margin-left: 10px;" size="small">
一键支持<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in menuItems" :command="item.text">{{ item.action }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
el: '#app',
data: function() {
return {
prompt: 'chatGPT可以做什么',
menuItems: [
{ text: '角色：软件测试工程师 任务：二维码扫码支付 安全性的测试点,不是测试用例，生成30条，生成md格式', action: '生成测试点' },
{ text: '角色：软件测试工程师 任务：电商支付系统 生成测试用例,包含功能,性能，兼容性，安全,生成md格式', action: '生成测试用例' }
]
}
}
4.element -下载文件
在下载button加属性@click="downloadFile('md')"
<el-button type="primary" style="margin-left: 20px" :disabled ="show" @click="downloadFile('txt')">下载文件(txt格式)</el-button>
<el-button type="success" :disabled="show" @click="downloadFile('md')">下载文件(md格式)</el-button>
下载文件的这段代码downloadFile(type)是aiXcoder插件自动生成的，很好用
downloadFile(type){
// 获取当前页面内容
var text = document.getElementById('airesult').innerText;
// 创建一个隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = 'down.' + type;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([text]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
5.接口请求
<el-button type="primary" @click="submit" style="margin-top: 10px;">提交问题</el-button>
submit() {
this.loading = true
let data={
content: this.prompt,
max_tokens: this.max_tokens,
temperature: this.temperature
}
axios.post('/chat',data).then(re => {
console.log(re)
this.response = re;
console.log(this.response)
this.loading = false
this.show = false
}).catch(error => {
this.response = '网络异常。。。'
this.loading = false
});
}
关于loading效果，从element官网搜索loading，有好几种效果，选一种
提交问题后loading = true，返回结果后loading = false
6.补充-布局
这是最开始的布局，顶部有一栏，下面分左右结构。然后在里面加了按钮、下拉框等
<body>
<div id="app">
<el-container>
<el-header>
<h1>ChatGPT</h1>
</el-header>
<el-main>
<el-col :span="10" v-loading="loading">
<h4>Prompt:</h4>
<el-input type="textarea" v-model="prompt" placeholder="请输入内容"
rows="10"></el-input>
</el-col>
<el-col :span="14">
<h2>ChatGPT返回结果</h2>
<p id="result" style="margin-left: 10px;color:red;white-space: pre-wrap;"></p>
</el-col>
</el-main>
</el-container>
</div>
</body>
7.补充-样式
样式统一放在这里
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-header {
background: #6060E8;
color: aliceblue;
}
.slider-laber {
font-size: 14px;
line-height: 44px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
</style>
</head>
用到的地方引用，比如滑块的样式，可以参考官网
<div class="slider-laber">
<el-slider
v-model="temperature" show-input style="margin-left: 10px;"
:max="1"
:min="0"
:step="0.1"
:format-tooltip="formatTooltip"
:label="sliderLabel"></el-slider>
</div>
效果是这样的，0-1，步长0.1
8.问题
目前还有一个问题未解决:
print(re) 返回的结果是我想要的结果
但是，return re 在前端页面显示的是个完整的json，不是我想要的结果。我只想要和print(re)一样的结果，即只要data
尝试了以下两种方式，将string转换成json后取data，都失败
return jsonify({'data': re})
json_data = json.loads(re)
return jsonify({'data': json_data['data']})
不知道问题出在哪里了
代码如下：
app.py
#-*- coding : utf-8 -*-
# @Author :
# @Time : 2024/4/18 上午11:13
from flask import Flask, request, render_template, jsonify, json
from openai import OpenAI
from zhipuai import ZhipuAI
app = Flask(__name__)
#client = OpenAI(api_key='xxxxxx')
client = ZhipuAI(api_key="xxxxxx")
app.jinja_env.variable_start_string = '<<'
app.jinja_env.variable_end_string = '>>'
@app.route('/')
def index():
return render_template('chatgpt.html')
@app.route('/chat',methods=['GET', 'POST'])
def chat():
if request.is_json:
data = request.get_json()
content = data.get('content', '')
max_tokens = data.get('max_tokens', '3000')
temperature = data.get('temperature', '0.5')
else:
content = request.args.get('content', '')
max_tokens = request.args.get('max_tokens', '0.5')
temperature = request.args.get('temperature', '3000')
result = client.chat.completions.create(
model="glm-4", # 调用的模型名称 gpt-3.5-turbo
temperature=float(temperature),
max_tokens=int(max_tokens),
messages=[
{"role": "user",
"content": content
}
],
)
re = result.choices[0].message.content
print(re)
print(type(re))
return re
if __name__ == '__main__':
app.run()
chat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-header {
background: #6060E8;
color: aliceblue;
}
.slider-laber {
font-size: 14px;
line-height: 44px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<h1>ChatGPT</h1>
</el-header>
<el-main>
<el-col :span="10" v-loading="loading">
<h4>Prompt:
<el-dropdown @command="handleCommand">
<el-button type="primary" style="margin-left: 10px;" size="small">
一键支持<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in menuItems" :command="item.text">{{ item.action }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</h4>
<el-input type="textarea" v-model="prompt" placeholder="请输入内容"
rows="10"></el-input>
<el-button type="primary" @click="submit" style="margin-top: 10px;">提交问题</el-button>
<h4>核心参数 Max_tokens(最大令牌数会影响最多返回结果的长度及费用开销，默认为16,最大4097:包含提问和回答)</h4>
<el-input-number v-model="max_tokens" :min="16" :max="4097" label="核心参数最大令牌数"></el-input-number>
<h4>核心参数 Temperature （较高的值 (如 0.8)将使输出更加随机，而较低的值 (如0.2)将使输出更加集中和确定）</h4>
<div class="slider-laber">
<el-slider
v-model="temperature" show-input style="margin-left: 10px;"
:max="1"
:min="0"
:step="0.1"
:format-tooltip="formatTooltip"
:label="sliderLabel"></el-slider>
</div>
</el-col>
<el-col :span="14">
<h2>ChatGPT返回结果</h2>
<el-button type="primary" style="margin-left: 20px" :disabled ="show" @click="downloadFile('txt')">下载文件(txt格式)</el-button>
<el-button type="success" :disabled="show" @click="downloadFile('md')">下载文件(md格式)</el-button>
<p id="airesult" style="margin-left: 10px;color:red;white-space: pre-wrap;">{{ response }}</p>
</el-col>
</el-main>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
prompt: 'chatGPT可以做什么',
max_tokens:3000,
temperature: 0.5,
result: '',
loading: false,
show: true,
menuItems: [
{ text: '角色：软件测试工程师 任务：二维码扫码支付 安全性的测试点,不是测试用例，生成30条，生成md格式', action: '生成测试点' },
{ text: '角色：软件测试工程师 任务：电商支付系统 生成测试用例,包含功能,性能，兼容性，安全,生成md格式', action: '生成测试用例' }
]
}
},
methods: {
submit() {
this.loading = true
let data={
content: this.prompt,
max_tokens: this.max_tokens,
temperature: this.temperature
}
axios.post('/chat',data).then(re => {
console.log(re)
this.response = re;
console.log(this.response)
this.loading = false
this.show = false
}).catch(error => {
this.response = '网络异常。。。'
this.loading = false
});
},
downloadFile(type){
// 获取当前页面内容
var text = document.getElementById('airesult').innerText;
// 创建一个隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = 'down.' + type;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([text]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
},
handleCommand(command) {
this.prompt = command;
}
}
})
</script>
</html>
转载自:https://juejin.cn/post/7363176766787158026