# Mradi wa Gumzo
Mradi huu wa gumzo unaonyesha jinsi ya kujenga Msaidizi wa Gumzo kwa kutumia GitHub Models.
Hivi ndivyo mradi uliokamilika unavyoonekana:
Kama muktadha, kujenga wasaidizi wa gumzo kwa kutumia AI ya kizazi ni njia nzuri ya kuanza kujifunza kuhusu AI. Kile utakachojifunza ni jinsi ya kuunganisha AI ya kizazi kwenye programu ya wavuti katika somo hili, hebu tuanze.
## Kuunganisha na AI ya Kizazi
Kwa upande wa nyuma (backend), tunatumia GitHub Models. Ni huduma nzuri inayokuwezesha kutumia AI bila malipo. Nenda kwenye uwanja wake wa majaribio na uchukue msimbo unaolingana na lugha ya nyuma unayochagua. Hivi ndivyo inavyoonekana kwenye [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground)
Kama tulivyosema, chagua kichupo cha "Code" na muda wako wa utekelezaji uliouchagua.
Katika kesi hii tunachagua Python, ambayo itamaanisha tunachukua msimbo huu:
```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)
```
Hebu tusafishe msimbo huu kidogo ili uweze kutumika tena:
```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
```
Kwa kutumia kazi hii `call_llm` sasa tunaweza kuchukua maelekezo na maelekezo ya mfumo, na kazi hiyo itarudisha matokeo.
### Kubinafsisha Msaidizi wa AI
Ikiwa unataka kubinafsisha msaidizi wa AI unaweza kubainisha jinsi unavyotaka awe kwa kujaza maelekezo ya mfumo kama hivi:
```python
call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")
```
## Kuiweka Kupitia API ya Wavuti
Vizuri, tumemaliza sehemu ya AI, hebu tuone jinsi tunavyoweza kuunganisha hiyo kwenye API ya Wavuti. Kwa API ya Wavuti, tunachagua kutumia Flask, lakini mfumo wowote wa wavuti unafaa. Hebu tuone msimbo wake:
```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)
```
Hapa, tunaunda API ya Flask na kufafanua njia ya msingi "/" na "/chat". Njia ya mwisho inakusudiwa kutumiwa na sehemu ya mbele (frontend) yetu kupitisha maswali kwake.
Kuunganisha *llm.py* hivi ndivyo tunavyohitaji kufanya:
- Leta kazi ya `call_llm`:
```python
from llm import call_llm
from flask import Flask, request
```
- Iite kutoka kwenye njia ya "/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
})
```
Hapa tunachanganua ombi linaloingia ili kupata mali ya `message` kutoka kwa mwili wa JSON. Baadaye tunaita LLM kwa simu hii:
```python
response = call_llm(message, "You are a helpful assistant")
# return the response as JSON
return jsonify({
"response": response
})
```
Vizuri, sasa tumemaliza kile tunachohitaji.
### Kusakinisha Cors
Tunapaswa kutaja kwamba tumeweka kitu kama CORS, kushiriki rasilimali kati ya asili tofauti. Hii inamaanisha kwamba kwa sababu sehemu yetu ya nyuma na mbele zitaendesha kwenye bandari tofauti, tunahitaji kuruhusu sehemu ya mbele kupiga simu kwenye sehemu ya nyuma. Kuna kipande cha msimbo katika *api.py* kinachoweka hili:
```python
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # * example.com
```
Kwa sasa imewekwa kuruhusu "*" ambayo ni asili zote, na hiyo si salama sana, tunapaswa kuibana mara tu tunapokwenda kwenye uzalishaji.
## Kuendesha Mradi Wako
Sawa, kwa hivyo tuna *llm.py* na *api.py*, tunawezaje kufanya kazi hii na sehemu ya nyuma? Vizuri, kuna mambo mawili tunahitaji kufanya:
- Sakinisha utegemezi:
```sh
cd backend
python -m venv venv
source ./venv/bin/activate
pip install openai flask flask-cors openai
```
- Anzisha API
```sh
python api.py
```
Ikiwa uko kwenye Codespaces unahitaji kwenda kwenye Ports chini ya mhariri, bofya kulia juu yake na uchague "Port Visibility" na uchague "Public".
### Kufanya Kazi Kwenye Sehemu ya Mbele
Sasa kwa kuwa tuna API inayoendesha, hebu tuunde sehemu ya mbele kwa hili. Sehemu ya mbele ya kiwango cha chini kabisa ambayo tutaiboresha hatua kwa hatua. Katika folda ya *frontend*, unda yafuatayo:
```text
backend/
frontend/
index.html
app.js
styles.css
```
Tuanze na **index.html**:
```html
```
Hii hapo juu ni kiwango cha chini kabisa unachohitaji kusaidia dirisha la gumzo, kwani lina sehemu ya maandishi ambapo ujumbe utaonyeshwa, sehemu ya kuingiza kwa ajili ya kuandika ujumbe na kitufe cha kutuma ujumbe wako kwa sehemu ya nyuma. Hebu tuangalie JavaScript inayofuata katika *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");
})
})();
```
Hebu tupitie msimbo kwa kila sehemu:
- 1) Hapa tunapata marejeleo ya vipengele vyote tutakavyotumia baadaye kwenye msimbo.
- 2) Katika sehemu hii, tunaunda kazi inayotumia njia ya kujengwa ya `fetch` ambayo inaita sehemu yetu ya nyuma.
- 3) `appendMessage` husaidia kuongeza majibu pamoja na kile unachoandika kama mtumiaji.
- 4) Hapa tunasikiliza tukio la kuwasilisha na tunasoma sehemu ya kuingiza, kuweka ujumbe wa mtumiaji kwenye sehemu ya maandishi, kuita API, na kuonyesha jibu hilo kwenye sehemu ya maandishi.
Hebu tuangalie mitindo inayofuata, hapa ndipo unaweza kuwa mbunifu na kufanya ionekane unavyotaka, lakini hapa kuna mapendekezo:
**styles.css**
```
.message {
background: #222;
box-shadow: 0 0 0 10px orange;
padding: 10px:
margin: 5px;
}
.message.user {
background: blue;
}
.message.assistant {
background: grey;
}
```
Kwa madarasa haya matatu, utaweza kutofautisha mitindo ya ujumbe kulingana na chanzo chake, iwe ni kutoka kwa msaidizi au wewe kama mtumiaji. Ikiwa unataka kupata msukumo, angalia folda ya `solution/frontend/styles.css`.
### Badilisha Base Url
Kuna jambo moja hapa hatukuweka, nalo ni `BASE_URL`, hili halijulikani hadi sehemu yako ya nyuma ianze. Ili kuiweka:
- Ikiwa unaendesha API ndani ya nchi, inapaswa kuwekwa kama `http://localhost:5000`.
- Ikiwa unaendesha kwenye Codespaces, inapaswa kuonekana kama "[name]app.github.dev".
## Kazi
Unda folda yako mwenyewe *project* yenye maudhui kama haya:
```text
project/
frontend/
index.html
app.js
styles.css
backend/
api.py
llm.py
```
Nakili maudhui kutoka kwa yale yaliyoelekezwa hapo juu lakini jisikie huru kubinafsisha unavyopenda.
## Suluhisho
[Suluhisho](./solution/README.md)
## Ziada
Jaribu kubadilisha tabia ya msaidizi wa AI. Unapopiga simu `call_llm` katika *api.py* unaweza kubadilisha hoja ya pili kwa unavyotaka, kwa mfano:
```python
call_llm(message, "You are Captain Picard")
```
Badilisha pia CSS na maandishi unavyopenda, kwa hivyo fanya mabadiliko katika *index.html* na *styles.css*.
## Muhtasari
Vizuri, umejifunza kutoka mwanzo jinsi ya kuunda msaidizi wa kibinafsi kwa kutumia AI. Tumefanya hivyo kwa kutumia GitHub Models, sehemu ya nyuma kwa Python na sehemu ya mbele kwa HTML, CSS na JavaScript.
## Kuweka na Codespaces
- Nenda kwenye: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners)
- Unda kutoka kwa kiolezo (hakikisha umeingia kwenye GitHub) kwenye kona ya juu-kulia:
- Mara tu ukiwa kwenye repo yako, unda Codespace:
Hii inapaswa kuanzisha mazingira unayoweza kufanya kazi nayo sasa.
---
**Kanusho**:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia huduma ya tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.
