腾讯云AI代码助手---用AI构造AI，打造属于个人的Copilot

 随着AI的快速发展，使用AI构造AI也登录历史舞台。本日带各人使用腾讯云 AI 代码助手来创建基于AI大模子的AI呆板人对话网页，使用的开辟工具为Python的Flask作为后端，HTML5+js作为前端。文章末尾附完整源码。源码没有一个是本身手敲出来的 都是AI编写。看完你也会。
一 环境和工具使用

PyCharm：适用于数据科学和 Web 开辟的 Python IDE

https://www.jetbrains.com/zh-cn/pycharm/Miniconda — Conda documentation

https://docs.conda.io/en/latest/miniconda.html首先就是通过上面的链接分别下载pycharm社区版（免费的）和miniconda你本身电脑对应的版本

下载过程中的选项除了安装路径不选择c盘换成其他盘，其他的都选择默认的就行。接下来找到这个打开
二 开辟前准备

创建conda虚拟环境 使用以下下令创建虚拟环境  

conda create -n your_env_name python=3.10

your_env_name：指的是你的虚拟环境的名字

python=3.10：指的是虚拟环境内置的python解释器版本

然后pycharm创建新项目 此处演示使用找到conda创建的解释器的位置选择就行 

右下角能看到当前解释器的名字和版本 

解释器设置完成后 点击文件下的设置找到里面的插件  在Marketplace界面中搜索腾讯 点击安装（我这里是安装好了的）

点击 然后扫码登录（微信扫码就行） 接下来与ai进行对话直接询问AI 我要使用什么去做什么，得到什么结果。例如我所询问的

那么我们按照它给出的第一步去细细盘问（这里之所以选择这个千帆大模子，这个里面有免费额度的）

接下来根据引导注册，创建应用选择服务（选择我选择的两种模子，这两种模子是免费额度500千tokens的学习测试使用完全足够。）

接下来点击应用接入 就可以得到你的API Key 和Secret Key 

三 操作AI来构造代码

根据得到的id API Key 和Secret Key 让其生成代码 然后插入到main.py文件内

注意这里的插入代码是直接插入代码到你当前打开的文件里面去了 所以后端代码要放置在.py文件内 前端代码放置在当前目录下新建文件夹然后创建html后缀的文件

这里进行新建html文件大概py文件

这是插入后的结果 可以明显的看看到爆红了 这意味的没有安装库，根据ai之前的提示我们使用pip指令安装库

点击终端的图标复制给的指令 复制粘贴 敲回车安装库

安装事子女码就不会爆红了

接下来运行代码 先运行main.py  此时出现报错将报错信息复制给ai  根据ai1给出的下令到终端去运行下载这个库。（这里会多次重复这个情况，ai也不是万能的，给他机会一次一次修改代码）这个过程就不一一展示了。

知道运行不报错了 出现以下 这表明代码乐成了我们看看下结果

四 反复鞭策AI让其给你生成你想要的结果

这个结果没题目，就是界面看起来不理想很不美观而且没有各种功能 我们将前端的代码再次发给ai让其对界面代码进行润色。  这里询问尽量全点，将你的逻辑梳理清晰，然后转换成笔墨来询问ai。 询问内容为（现在的前端代码展示的界面不理想 很不美观 请你进行优化 增长历史记载的功能 一旦用户发送题目后会等待结果，这个时间应该对话框内什么都没有没有任何的提示 应该显示ai正在思考中请等待）

接下来根据其给你的修改方案复制到代码相应的位置内 （小白的话，建议直接问ai这段代码应该插入到我的代码的哪里才对。大概直接一句给我修改后的完整的html的代码）得到最后的结果

五 源码展示

后续可以不断的追问ai让其对界面不断的美满，好比加上聊天界面的两边头像大概加上两边每段对话的时间。以下是ai编写出来的源码   

main.py

1. from flask import Flask, request, render_template, session, redirect, url_for
2. import requests
3. import json
4. import uuid
6. API_KEY = "输入你的钥匙"
7. SECRET_KEY = "输入你的密匙"
10. app = Flask(__name__)
11. app.secret_key = "your_secret_key_here"
13. def get_access_token():
14.     url = "https://aip.baidubce.com/oauth/2.0/token"
15.     params = {
16.         "grant_type": "client_credentials",
17.         "client_id": API_KEY,
18.         "client_secret": SECRET_KEY
19.     }
20.     response = requests.post(url, params=params)
21.     data = response.json()
22.     return data.get("access_token")
24. def get_ai_response(user_messages):
25.     access_token = get_access_token()
26.     url = f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token={access_token}"
27.     payload = {
28.         "messages": user_messages,
29.         "temperature": 0.95,
30.         "top_p": 0.8,
31.         "penalty_score": 1,
32.         "enable_system_memory": False,
33.         "disable_search": False,
34.         "enable_citation": False
35.     }
37.     headers = {
38.         'Content-Type': 'application/json'
39.     }
41.     response = requests.post(url, headers=headers, data=json.dumps(payload))
42.     result = response.json()
43.     ai_response = result.get("result", "抱歉，我未能理解您的请求。")
44.     return ai_response
46. @app.route("/", methods=["GET"])
47. def home():
48.     # 显示会话列表（如果没有则为空）
49.     if "conversations" not in session:
50.         session["conversations"] = {}
51.     conversations = session["conversations"]
52.     return render_template("index.html", chat_history=None, conversations=conversations, current_chat_id=None)
54. @app.route("/new_chat", methods=["GET"])
55. def new_chat():
56.     # 创建新的会话ID
57.     chat_id = str(uuid.uuid4())
58.     if "conversations" not in session:
59.         session["conversations"] = {}
60.     session["conversations"][chat_id] = []  # 空会话
61.     session.modified = True
62.     return redirect(url_for("chat", chat_id=chat_id))
64. @app.route("/chat/<chat_id>", methods=["GET", "POST"])
65. def chat(chat_id):
66.     if "conversations" not in session:
67.         session["conversations"] = {}
68.     if chat_id not in session["conversations"]:
69.         # 如果传入的chat_id不存在，重定向回首页或新建
70.         return redirect(url_for("home"))
72.     chat_history = session["conversations"][chat_id]
74.     if request.method == "POST":
75.         user_input = request.form.get("user_input", "").strip()
76.         if user_input:
77.             # 用户消息
78.             chat_history.append({"role": "user", "content": user_input})
79.             ai_response = get_ai_response([{"role": "user", "content": user_input}])
80.             chat_history.append({"role": "assistant", "content": ai_response})
81.             session["conversations"][chat_id] = chat_history
82.             session.modified = True
84.     conversations = session["conversations"]
85.     return render_template("index.html", chat_history=chat_history, conversations=conversations, current_chat_id=chat_id)
87. def get_ai_response(user_messages):
88.     access_token = get_access_token()
89.     url = f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token={access_token}"
90.     payload = {
91.         "messages": user_messages,
92.         "temperature": 0.95,
93.         "top_p": 0.8,
94.         "penalty_score": 1,
95.         "enable_system_memory": False,
96.         "disable_search": False,
97.         "enable_citation": False
98.     }
100.     headers = {
101.         'Content-Type': 'application/json'
102.     }
104.     response = requests.post(url, headers=headers, data=json.dumps(payload))
105.     result = response.json()
106.     ai_response = result.get("result", "抱歉，我未能理解您的请求。")
107.     return ai_response
109. if __name__ == "__main__":
110.     app.run(host="0.0.0.0", port=5000, debug=True)

复制代码

index.html

1. <!DOCTYPE html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <title>AI 对话页面</title>
6. <style>
7.     body {
8.         margin: 0;
9.         padding: 0;
10.         font-family: "Microsoft YaHei", sans-serif;
11.         background: #f0f2f5;
12.         height: 100vh;
13.         display: flex;
14.         color: #333;
15.     }
17.     .sidebar {
18.         width: 260px;
19.         background: #ffffff;
20.         border-right: 1px solid #ddd;
21.         display: flex;
22.         flex-direction: column;
23.         padding: 20px;
24.         box-sizing: border-box;
25.     }
27.     .sidebar h2 {
28.         font-size: 18px;
29.         margin-bottom: 20px;
30.         text-align: center;
31.         color: #333;
32.     }
34.     .new-chat-btn {
35.         display: block;
36.         width: 100%;
37.         text-align: center;
38.         background: #409eff;
39.         color: #fff;
40.         border: none;
41.         padding: 10px 0;
42.         border-radius: 5px;
43.         cursor: pointer;
44.         margin-bottom: 20px;
45.         font-size: 14px;
46.         text-decoration: none;
47.         line-height: 20px;
48.     }
50.     .new-chat-btn:hover {
51.         background: #66b1ff;
52.     }
54.     .chat-list {
55.         flex: 1;
56.         overflow-y: auto;
57.     }
59.     .chat-item {
60.         padding: 10px 0;
61.         border-bottom: 1px solid #eee;
62.         cursor: pointer;
63.         font-size: 14px;
64.         text-decoration: none;
65.         color: #333;
66.         display: block;
67.     }
69.     .chat-item:hover {
70.         background: #f9f9f9;
71.     }
73.     .main {
74.         flex: 1;
75.         display: flex;
76.         flex-direction: column;
77.         background: #f0f2f5;
78.     }
80.     .header {
81.         background: #409eff;
82.         color: #fff;
83.         padding: 15px;
84.         text-align: center;
85.         font-size: 18px;
86.     }
88.     .chat-window {
89.         flex: 1;
90.         padding: 20px;
91.         box-sizing: border-box;
92.         overflow-y: auto;
93.         position: relative;
94.     }
96.     .message {
97.         display: flex;
98.         margin-bottom: 20px;
99.         width: 100%;
100.     }
102.     .message.assistant .bubble {
103.         margin-right: auto;
104.         background: #ffffff;
105.         border: 1px solid #eee;
106.         color: #333;
107.     }
109.     .message.user .bubble {
110.         margin-left: auto;
111.         background: #409eff;
112.         color: #fff;
113.     }
115.     .bubble {
116.         max-width: 70%;
117.         padding: 12px 15px;
118.         border-radius: 8px;
119.         line-height: 1.5;
120.         word-wrap: break-word;
121.         white-space: pre-wrap;
122.         font-size: 14px;
123.     }
125.     .input-container {
126.         border-top: 1px solid #ddd;
127.         background: #ffffff;
128.         padding: 10px;
129.         display: flex;
130.         align-items: center;
131.     }
133.     .input-box {
134.         flex: 1;
135.         display: flex;
136.         align-items: center;
137.         background: #f9f9f9;
138.         border: 1px solid #ddd;
139.         border-radius: 5px;
140.         padding: 5px;
141.         margin-right: 10px;
142.     }
144.     .input-box textarea {
145.         flex: 1;
146.         border: none;
147.         background: transparent;
148.         outline: none;
149.         resize: none;
150.         font-size: 14px;
151.         padding: 5px;
152.         line-height: 1.5;
153.     }
155.     .send-btn {
156.         background: #409eff;
157.         color: #fff;
158.         border: none;
159.         padding: 10px 20px;
160.         font-size: 14px;
161.         border-radius: 5px;
162.         cursor: pointer;
163.     }
165.     .send-btn:hover {
166.         background: #66b1ff;
167.     }
169.     .footer {
170.         text-align: center;
171.         color: #aaa;
172.         font-size: 12px;
173.         margin: 10px 0;
174.     }
175. </style>
176. </head>
177. <body>
178.     <div class="sidebar">
179.         <h2>对话列表</h2>
180.         <a href="{{ url_for('new_chat') }}" class="new-chat-btn">新建对话</a>
181.         <div class="chat-list">
182.             {% for cid, conv in conversations.items() %}
183.                 <a class="chat-item" href="{{ url_for('chat', chat_id=cid) }}">
184.                     对话: {{ cid|truncate(8,true,'...') }}
185.                 </a>
186.             {% endfor %}
187.         </div>
188.     </div>
189.     <div class="main">
190.         <div class="header">与 AI 对话</div>
191.         <div class="chat-window" id="chat-window">
192.             {% if chat_history %}
193.                 {% for msg in chat_history %}
194.                     <div class="message {{ msg.role }}">
195.                         <div class="bubble">{{ msg.content }}</div>
196.                     </div>
197.                 {% endfor %}
198.             {% endif %}
199.         </div>
200.         {% if current_chat_id %}
201.         <form id="chat-form" method="post" action="{{ url_for('chat', chat_id=current_chat_id) }}" class="input-container">
202.             <div class="input-box">
203.                 <textarea name="user_input" id="user_input" rows="1" placeholder="在此输入您的问题..."></textarea>
204.             </div>
205.             <button type="submit" class="send-btn">发送</button>
206.         </form>
207.         {% endif %}
208.         <div class="footer">Powered by Wenxin & Flask</div>
209.     </div>
211.     <script>
212.     const chatForm = document.getElementById('chat-form');
213.     const chatWindow = document.getElementById('chat-window');
214.     const userInput = document.getElementById('user_input');
216.     if (chatForm) {
217.         chatForm.addEventListener('submit', function(e) {
218.             e.preventDefault(); // 阻止表单默认提交
219.             const message = userInput.value.trim();
220.             if (!message) return;
222.             // 1. 先显示用户输入
223.             appendMessage('user', message);
225.             // 2. 显示AI正在思考中...
226.             const thinkingMsg = appendMessage('assistant', 'AI正在思考中...');
228.             // 3. 发送AJAX请求到后端
229.             fetch(chatForm.action, {
230.                 method: 'POST',
231.                 body: new FormData(chatForm)
232.             })
233.             .then(response => response.text())
234.             .then(html => {
235.                 // 用后端重新渲染的整页HTML进行局部更新
236.                 // 需要从返回的HTML中提取最新对话记录
237.                 // 简单的做法是后端返回JSON而非整页HTML
238.                 // 以下方法为简单演示，建议使用JSON接口！
240.                 // DEMO方式：使用JSON接口替代，下面的代码仅供参考：
241.                 // 实际中你应该在后端提供一个JSON返回的API，例如 /chat/<chat_id>/api
242.                 // 然后在这里解析JSON更新界面。
244.                 // 简单处理：重新从服务器获取新页面HTML片段（不建议生产用）
245.                 const parser = new DOMParser();
246.                 const doc = parser.parseFromString(html, 'text/html');
247.                 const newChatWindow = doc.querySelector('#chat-window');
248.                 if (newChatWindow) {
249.                     chatWindow.innerHTML = newChatWindow.innerHTML;
250.                 }
252.             })
253.             .catch(err => {
254.                 console.error(err);
255.                 // 如果出错，则用一条消息表示出错信息
256.                 thinkingMsg.querySelector('.bubble').textContent = '出错了，请重试。';
257.             })
258.             .finally(() => {
259.                 userInput.value = '';
260.                 chatWindow.scrollTop = chatWindow.scrollHeight;
261.             });
262.         });
263.     }
265.     function appendMessage(role, content) {
266.         const msgDiv = document.createElement('div');
267.         msgDiv.className = 'message ' + role;
268.         const bubble = document.createElement('div');
269.         bubble.className = 'bubble';
270.         bubble.textContent = content;
271.         msgDiv.appendChild(bubble);
272.         chatWindow.appendChild(msgDiv);
273.         chatWindow.scrollTop = chatWindow.scrollHeight;
274.         return msgDiv;
275.     }
277.     </script>
278. </body>
279. </html>

复制代码

可以看到 ai修改生成的代码都非常的尺度，也很美观。节省了大量的开辟时间，有这时间摸鱼能不香嘛。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。