History

softchris b9170990a1 🌐 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

Chat-prosjekt

Dette chat-prosjektet viser hvordan man kan bygge en Chat-assistent ved hjelp av GitHub Models.

Slik ser det ferdige prosjektet ut:

Litt kontekst: Å bygge chat-assistenter ved hjelp av generativ AI er en flott måte å begynne å lære om AI. Det du vil lære her er hvordan du integrerer generativ AI i en webapplikasjon gjennom denne leksjonen. La oss komme i gang.

Koble til generativ AI

For backend bruker vi GitHub Models. Det er en flott tjeneste som lar deg bruke AI gratis. Gå til lekeplassen deres og hent kode som tilsvarer ditt valgte backend-språk. Slik ser det ut på GitHub Models Playground

Som nevnt, velg fanen "Code" og din valgte runtime.

Bruke Python

I dette tilfellet velger vi Python, som betyr at vi bruker denne koden:

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

La oss rydde opp i denne koden litt slik at den blir gjenbrukbar:

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

Med denne funksjonen call_llm kan vi nå ta en prompt og en systemprompt, og funksjonen returnerer resultatet.

Tilpasse AI-assistenten

Hvis du vil tilpasse AI-assistenten, kan du spesifisere hvordan du vil at den skal oppføre seg ved å fylle ut systemprompten slik:

call_llm("Tell me about you", "You're Albert Einstein, you only know of things in the time you were alive")

Eksponere det via en Web API

Flott, vi har gjort AI-delen ferdig. La oss se hvordan vi kan integrere dette i en Web API. For Web API velger vi å bruke Flask, men enhver webrammeverk bør fungere. La oss se koden for det:

Bruke 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)

Her oppretter vi en Flask-API og definerer en standardrute "/" og "/chat". Den siste er ment å brukes av frontend for å sende spørsmål til den.

For å integrere llm.py trenger vi å gjøre følgende:

Importere funksjonen call_llm:

from llm import call_llm
from flask import Flask, request

Kalle den fra "/chat"-ruten:

@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
   })

Her analyserer vi den innkommende forespørselen for å hente message-egenskapen fra JSON-body. Deretter kaller vi LLM med denne kallet:

response = call_llm(message, "You are a helpful assistant")

# return the response as JSON
return jsonify({
   "response": response 
})

Flott, nå har vi gjort det vi trenger.

Konfigurere Cors

Vi bør nevne at vi setter opp noe som CORS, cross-origin resource sharing. Dette betyr at fordi backend og frontend vil kjøre på forskjellige porter, må vi tillate at frontend kan kalle backend.

Bruke Python

Det finnes et kodebit i api.py som setter dette opp:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)   # *   example.com

Akkurat nå er det satt opp til å tillate "*" som er alle opprinnelser, og det er litt usikkert. Vi bør begrense det når vi går til produksjon.

Kjør prosjektet ditt

For å kjøre prosjektet ditt, må du starte opp backend først og deretter frontend.

Bruke Python

Ok, så vi har llm.py og api.py. Hvordan kan vi få dette til å fungere med en backend? Vel, det er to ting vi må gjøre:

Installere avhengigheter:

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

pip install openai flask flask-cors openai

Starte API-en
```
python api.py
```
Hvis du er i Codespaces, må du gå til Ports nederst i editoren, høyreklikke på den og klikke "Port Visibility" og velge "Public".

Jobbe med en frontend

Nå som vi har en API oppe og kjører, la oss lage en frontend for dette. En helt enkel frontend som vi vil forbedre stegvis. I en frontend-mappe, opprett følgende:

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

La oss starte med 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>

Dette er det absolutt minimum du trenger for å støtte et chat-vindu, da det består av en tekstboks hvor meldinger vil bli vist, et input-felt for å skrive meldingen og en knapp for å sende meldingen til backend. La oss se på JavaScript neste i 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");

  })
})();

La oss gå gjennom koden per seksjon:

1. Her får vi en referanse til alle elementene vi vil referere til senere i koden.
1. I denne seksjonen oppretter vi en funksjon som bruker den innebygde fetch-metoden for å kalle backend.
1. appendMessage hjelper med å legge til svar samt det du som bruker skriver.
1. Her lytter vi til submit-hendelsen, leser input-feltet, plasserer brukerens melding i tekstboksen, kaller API-en og viser svaret i tekstboksen.

La oss se på styling neste. Her kan du virkelig være kreativ og få det til å se ut som du vil, men her er noen forslag:

styles.css

.message {
    background: #222;
    box-shadow: 0 0 0 10px orange;
    padding: 10px:
    margin: 5px;
}

.message.user {
    background: blue;
}

.message.assistant {
    background: grey;
}

Med disse tre klassene vil du style meldinger forskjellig avhengig av om de kommer fra assistenten eller deg som bruker. Hvis du vil bli inspirert, sjekk ut solution/frontend/styles.css-mappen.

Endre Base Url

Det var én ting vi ikke satte her, og det var BASE_URL. Dette er ikke kjent før backend er startet. For å sette det:

Hvis du kjører API lokalt, bør det settes til noe som http://localhost:5000.
Hvis det kjøres i Codespaces, bør det se ut som "[name]app.github.dev".

Oppgave

Opprett din egen mappe project med innhold som følger:

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

Kopier innholdet fra det som ble instruert ovenfor, men føl deg fri til å tilpasse det etter eget ønske.

Løsning

Bonus

Prøv å endre personligheten til AI-assistenten.

For Python

Når du kaller call_llm i api.py, kan du endre det andre argumentet til det du ønsker, for eksempel:

call_llm(message, "You are Captain Picard")

Frontend

Endre også CSS og tekst etter eget ønske, så gjør endringer i index.html og styles.css.

Oppsummering

Flott, du har lært fra bunnen av hvordan du lager en personlig assistent ved hjelp av AI. Vi har gjort det ved hjelp av GitHub Models, en backend i Python og en frontend i HTML, CSS og JavaScript.

Sett opp med Codespaces

Naviger til: Web Dev For Beginners repo
Opprett fra en mal (sørg for at du er logget inn på GitHub) øverst til høyre:
Når du er i ditt repo, opprett en Codespace:

Dette bør starte et miljø du nå kan jobbe med.

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.