# پروژه چت
این پروژه چت نشان می‌دهد که چگونه می‌توان یک دستیار چت با استفاده از مدل‌های GitHub ساخت.
این چیزی است که پروژه نهایی شبیه آن خواهد بود:
کمی توضیح: ساخت دستیارهای چت با استفاده از هوش مصنوعی مولد یک راه عالی برای شروع یادگیری درباره هوش مصنوعی است. در این درس یاد می‌گیرید که چگونه هوش مصنوعی مولد را در یک برنامه وب ادغام کنید. بیایید شروع کنیم.
## اتصال به هوش مصنوعی مولد
برای بخش بک‌اند، ما از مدل‌های GitHub استفاده می‌کنیم. این یک سرویس عالی است که به شما امکان می‌دهد به صورت رایگان از هوش مصنوعی استفاده کنید. به محیط آزمایشی آن بروید و کدی که با زبان بک‌اند انتخابی شما مطابقت دارد را دریافت کنید. اینجا می‌توانید آن را در [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` اکنون می‌توانیم یک پیام و یک پیام سیستمی را بگیریم و تابع نتیجه را برمی‌گرداند.
### شخصی‌سازی دستیار هوش مصنوعی
اگر می‌خواهید دستیار هوش مصنوعی را شخصی‌سازی کنید، می‌توانید مشخص کنید که چگونه رفتار کند، با پر کردن پیام سیستمی به این صورت:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## ارائه از طریق یک Web API
عالی، بخش هوش مصنوعی را انجام دادیم، حالا ببینیم چگونه می‌توانیم آن را در یک Web API ادغام کنیم. برای Web API، ما Flask را انتخاب می‌کنیم، اما هر فریم‌ورک وب دیگری هم مناسب است. بیایید کد آن را ببینیم:
```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)
```
اینجا، ما یک API با Flask ایجاد می‌کنیم و یک مسیر پیش‌فرض "/" و "/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
})
```
در اینجا درخواست ورودی را تجزیه می‌کنیم تا ویژگی `message` را از بدنه JSON بازیابی کنیم. سپس با این فراخوانی، 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
```
این حداقل چیزی است که برای پشتیبانی از یک پنجره چت نیاز دارید، زیرا شامل یک textarea برای نمایش پیامها، یک ورودی برای تایپ پیام و یک دکمه برای ارسال پیام به بک‌اند است. حالا بیایید به جاوااسکریپت در *app.js* نگاه کنیم.
**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) در اینجا به رویداد submit گوش میدهیم و در نهایت فیلد ورودی را میخوانیم، پیام کاربر را در textarea قرار میدهیم، API را فراخوانی می‌کنیم و پاسخ را در textarea نمایش میدهیم.
حالا بیایید به استایلدهی نگاه کنیم. اینجا جایی است که می‌توانید خلاقیت به خرج دهید و ظاهر را به دلخواه خود طراحی کنید، اما در اینجا چند پیشنهاد داریم:
**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)
## نکته اضافی
سعی کنید شخصیت دستیار هوش مصنوعی را تغییر دهید. وقتی `call_llm` را در *api.py* فراخوانی میکنید، می‌توانید آرگومان دوم را به چیزی که می‌خواهید تغییر دهید، برای مثال:
```python
call_llm(message, "You are Captain Picard")
```
همچنین CSS و متن را به دلخواه خود تغییر دهید، بنابراین تغییراتی در *index.html* و *styles.css* ایجاد کنید.
## خلاصه
عالی، شما از ابتدا یاد گرفتید که چگونه یک دستیار شخصی با استفاده از هوش مصنوعی ایجاد کنید. ما این کار را با استفاده از مدل‌های GitHub، یک بک‌اند در Python و یک فرانت‌اند در HTML، CSS و JavaScript انجام دادیم.
## راه‌اندازی با Codespaces
- به اینجا بروید: [مخزن Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- از یک قالب ایجاد کنید (مطمئن شوید که وارد GitHub شدهاید) در گوشه بالا سمت راست:
- وقتی در مخزن خود هستید، یک Codespace ایجاد کنید:
این باید محیطی را شروع کند که اکنون می‌توانید با آن کار کنید.
---
**سلب مسئولیت**:
این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه میشود از ترجمه حرفهای انسانی استفاده کنید. ما مسئولیتی در قبال سوء تفاهمها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.
