History

leestott c0ca49b2cc 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	3 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

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

Kama tulivyosema, chagua kichupo cha "Code" na muda wako wa utekelezaji uliouchagua.

Katika kesi hii tunachagua Python, ambayo itamaanisha tunachukua msimbo huu:

"""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:

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:

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:

# 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:

from llm import call_llm
from flask import Flask, request

Iite kutoka kwenye njia ya "/chat":

@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:

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:

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:

cd backend
python -m venv venv
source ./venv/bin/activate

pip install openai flask flask-cors openai

Anzisha API
```
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:

backend/
frontend/
index.html
app.js
styles.css

Tuanze na index.html:

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <form>
        <textarea id="messages"></textarea>
        <input id="input" type="text" />
        <button type="submit" id="sendBtn">Send</button>  
      </form>  
      <script src="app.js" />
    </body>
</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

// 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.
1. Katika sehemu hii, tunaunda kazi inayotumia njia ya kujengwa ya fetch ambayo inaita sehemu yetu ya nyuma.
1. appendMessage husaidia kuongeza majibu pamoja na kile unachoandika kama mtumiaji.
1. 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:

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

Ziada

Jaribu kubadilisha tabia ya msaidizi wa AI. Unapopiga simu call_llm katika api.py unaweza kubadilisha hoja ya pili kwa unavyotaka, kwa mfano:

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
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. 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.