# 聊天项目
这个聊天项目展示了如何使用 GitHub Models 构建一个聊天助手。
以下是完成后的项目效果：
一些背景信息：使用生成式 AI 构建聊天助手是学习 AI 的一个很好的起点。在本课程中，你将学习如何将生成式 AI集成到一个网页应用中。让我们开始吧。
## 连接生成式 AI
在后端，我们使用 GitHub Models。这是一项很棒的服务，可以免费使用 AI。访问它的 playground 并获取与你选择的后端语言对应的代码。以下是 [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) 的样子：
如我们所说，选择“Code”选项卡和你选择的运行时。
在这个例子中，我们选择 Python，这意味着我们会选择以下代码：
```python
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
```
让我们稍微清理一下这段代码，使其可重复使用：
```python
def call_llm(prompt: str, system_message: str):
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": system_message,
},
{
"role": "user",
"content": prompt,
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
return response.choices[0].message.content
```
通过这个函数 `call_llm`，我们现在可以传入一个提示和一个系统提示，函数最终会返回结果。
### 定制 AI 助手
如果你想定制 AI 助手，可以通过像下面这样填充系统提示来指定它的行为：
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## 通过 Web API 暴露功能
很好，我们已经完成了 AI 部分，现在让我们看看如何将其集成到一个 Web API 中。对于 Web API，我们选择使用 Flask，但任何 Web 框架都可以。以下是代码：
```python
# api.py
from flask import Flask, request, jsonify
from llm import call_llm
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # * example.com
@app.route("/", methods=["GET"])
def index():
return "Welcome to this API. Call POST /hello with 'message': 'my message' as JSON payload"
@app.route("/hello", methods=["POST"])
def hello():
# get message from request body { "message": "do this taks for me" }
data = request.get_json()
message = data.get("message", "")
response = call_llm(message, "You are a helpful assistant.")
return jsonify({
"response": response
})
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000)
```
在这里，我们创建了一个 Flask API，并定义了默认路由 "/" 和 "/chat"。后者是供前端传递问题使用的。
为了集成 *llm.py*，我们需要做以下事情：
- 导入 `call_llm` 函数：
```python
from llm import call_llm
from flask import Flask, request
```
- 从 "/chat" 路由调用它：
```python
@app.route("/hello", methods=["POST"])
def hello():
# get message from request body { "message": "do this taks for me" }
data = request.get_json()
message = data.get("message", "")
response = call_llm(message, "You are a helpful assistant.")
return jsonify({
"response": response
})
```
在这里，我们解析传入的请求，从 JSON 的 body 中检索 `message` 属性。然后我们通过以下调用来调用 LLM：
```python
response = call_llm(message, "You are a helpful assistant")
# return the response as JSON
return jsonify({
"response": response
})
```
很好，现在我们已经完成了所需的工作。
### 配置 CORS
我们需要设置类似 CORS（跨域资源共享）的东西。这意味着由于我们的后端和前端会运行在不同的端口，我们需要允许前端调用后端。在 *api.py* 中有一段代码设置了这个：
```python
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # * example.com
```
目前它被设置为允许 "*"，即所有来源，这有点不安全，应该在生产环境中进行限制。
## 运行你的项目
好了，我们有了 *llm.py* 和 *api.py*，如何让它与后端一起工作呢？我们需要做两件事：
- 安装依赖：
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
pip install openai flask flask-cors openai
```
- 启动 API：
```sh
python api.py
```
如果你在 Codespaces 中运行，需要在编辑器底部的 Ports 部分右键点击并选择“Port Visibility”，然后选择“Public”。
### 开发前端
现在我们已经有了一个运行的 API，让我们为它创建一个前端。我们将从一个最低限度的前端开始，并逐步改进。在 *frontend* 文件夹中，创建以下内容：
```text
backend/
frontend/
index.html
app.js
styles.css
```
首先是 **index.html**：
```html
```
以上是支持聊天窗口所需的最低限度内容，包括一个用于显示消息的文本区域，一个用于输入消息的输入框，以及一个用于将消息发送到后端的按钮。接下来我们看一下 *app.js* 中的 JavaScript。
**app.js**
```js
// app.js
(function(){
// 1. set up elements
const messages = document.getElementById("messages");
const form = document.getElementById("form");
const input = document.getElementById("input");
const BASE_URL = "change this";
const API_ENDPOINT = `${BASE_URL}/hello`;
// 2. create a function that talks to our backend
async function callApi(text) {
const response = await fetch(API_ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: text })
});
let json = await response.json();
return json.response;
}
// 3. add response to our textarea
function appendMessage(text, role) {
const el = document.createElement("div");
el.className = `message ${role}`;
el.innerHTML = text;
messages.appendChild(el);
}
// 4. listen to submit events
form.addEventListener("submit", async(e) => {
e.preventDefault();
// someone clicked the button in the form
// get input
const text = input.value.trim();
appendMessage(text, "user")
// reset it
input.value = '';
const reply = await callApi(text);
// add to messages
appendMessage(reply, "assistant");
})
})();
```
让我们逐段分析代码：
- 1) 在这里，我们获取所有稍后会引用的元素的引用。
- 2) 在这一部分，我们创建了一个使用内置 `fetch` 方法调用后端的函数。
- 3) `appendMessage` 用于添加助手的响应以及用户输入的消息。
- 4) 在这里，我们监听提交事件，读取输入字段，将用户的消息放入文本区域，调用 API，并将响应渲染到文本区域。
接下来我们看一下样式，你可以随意设计外观，但以下是一些建议：
**styles.css**
```
.message {
background: #222;
box-shadow: 0 0 0 10px orange;
padding: 10px:
margin: 5px;
}
.message.user {
background: blue;
}
.message.assistant {
background: grey;
}
```
通过这三个类，你可以根据消息来源（助手或用户）来区分样式。如果需要灵感，可以查看 `solution/frontend/styles.css` 文件夹。
### 修改 Base Url
这里有一个我们没有设置的东西，那就是 `BASE_URL`，它在后端启动之前是未知的。设置方法如下：
- 如果你在本地运行 API，它应该设置为类似 `http://localhost:5000` 的地址。
- 如果在 Codespaces 中运行，它应该类似于 "[name]app.github.dev"。
## 作业
创建你自己的文件夹 *project*，内容如下：
```text
project/
frontend/
index.html
app.js
styles.css
backend/
api.py
llm.py
```
复制上述指示的内容，但可以根据自己的喜好进行定制。
## 解决方案
[解决方案](./solution/README.md)
## 额外任务
尝试更改 AI 助手的个性。在 *api.py* 中调用 `call_llm` 时，可以将第二个参数更改为你想要的内容，例如：
```python
call_llm(message, "You are Captain Picard")
```
同时更改 CSS 和文本以符合你的喜好，因此可以修改 *index.html* 和 *styles.css*。
## 总结
很好，你已经从零开始学习了如何使用 AI 创建一个个人助手。我们使用了 GitHub Models、Python 后端以及 HTML、CSS 和 JavaScript 前端来完成这个项目。
## 使用 Codespaces 设置
- 访问：[Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- 从模板创建（确保你已登录 GitHub），在右上角：
- 在你的仓库中，创建一个 Codespace：
这将启动一个你可以使用的环境。
---
**免责声明**：
本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。
