66 KiB

Raw Blame History Unescape Escape

Bygg en chat-assistent med AI

Husker du i Star Trek når mannskapet snakket uformelt med skipets datamaskin, stilte komplekse spørsmål og fikk gjennomtenkte svar? Det som virket som ren science fiction på 1960-tallet, er nå noe du kan bygge ved hjelp av webteknologier du allerede kjenner.

I denne leksjonen skal vi lage en AI-chatassistent ved hjelp av HTML, CSS, JavaScript og litt backend-integrasjon. Du vil oppdage hvordan de samme ferdighetene du har lært kan kobles til kraftige AI-tjenester som forstår kontekst og genererer meningsfulle svar.

Tenk på AI som å ha tilgang til et enormt bibliotek som ikke bare kan finne informasjon, men også syntetisere det til sammenhengende svar tilpasset dine spesifikke spørsmål. I stedet for å søke gjennom tusenvis av sider, får du direkte, kontekstuelle svar.

Integrasjonen skjer gjennom kjente webteknologier som jobber sammen. HTML lager chat-grensesnittet, CSS tar seg av det visuelle designet, JavaScript håndterer brukerinteraksjoner, og en backend-API kobler alt til AI-tjenestene. Det er som hvordan ulike seksjoner av et orkester samarbeider for å skape en symfoni.

Vi bygger i bunn og grunn en bro mellom naturlig menneskelig kommunikasjon og maskinell prosessering. Du vil lære både den tekniske implementeringen av AI-tjenesteintegrasjon og designmønstrene som gjør interaksjoner intuitive.

Ved slutten av denne leksjonen vil AI-integrasjon føles mindre som en mystisk prosess og mer som en annen API du kan jobbe med. Du vil forstå de grunnleggende mønstrene som driver applikasjoner som ChatGPT og Claude, ved å bruke de samme prinsippene for webutvikling som du allerede har lært.

Slik vil det ferdige prosjektet ditt se ut:

Forstå AI: Fra mystikk til mestring

Før vi dykker inn i koden, la oss forstå hva vi jobber med. Hvis du har brukt API-er før, kjenner du det grunnleggende mønsteret: send en forespørsel, motta et svar.

AI-API-er følger en lignende struktur, men i stedet for å hente forhåndslagret data fra en database, genererer de nye svar basert på mønstre lært fra enorme mengder tekst. Tenk på det som forskjellen mellom et bibliotekskatalogsystem og en kunnskapsrik bibliotekar som kan syntetisere informasjon fra flere kilder.

Hva er egentlig "Generativ AI"?

Tenk på hvordan Rosettastenen tillot forskere å forstå egyptiske hieroglyfer ved å finne mønstre mellom kjente og ukjente språk. AI-modeller fungerer på samme måte – de finner mønstre i enorme mengder tekst for å forstå hvordan språk fungerer, og bruker deretter disse mønstrene til å generere passende svar på nye spørsmål.

La meg forklare dette med en enkel sammenligning:

Tradisjonell database: Som å be om fødselsattesten din – du får nøyaktig det samme dokumentet hver gang
Søkemotor: Som å be en bibliotekar finne bøker om katter – de viser deg hva som er tilgjengelig
Generativ AI: Som å spørre en kunnskapsrik venn om katter – de forteller deg interessante ting med egne ord, tilpasset det du vil vite

Hvordan AI-modeller lærer (den enkle versjonen)

AI-modeller lærer gjennom eksponering for enorme datasett som inneholder tekst fra bøker, artikler og samtaler. Gjennom denne prosessen identifiserer de mønstre i:

Hvordan tanker er strukturert i skriftlig kommunikasjon
Hvilke ord som ofte opptrer sammen
Hvordan samtaler typisk flyter
Kontekstuelle forskjeller mellom formell og uformell kommunikasjon

Det ligner på hvordan arkeologer dekoder gamle språk: de analyserer tusenvis av eksempler for å forstå grammatikk, vokabular og kulturell kontekst, og blir til slutt i stand til å tolke nye tekster ved hjelp av de lærte mønstrene.

Hvorfor GitHub Models?

Vi bruker GitHub Models av en ganske praktisk grunn – det gir oss tilgang til AI på bedriftsnivå uten å måtte sette opp vår egen AI-infrastruktur (noe du sannsynligvis ikke vil gjøre akkurat nå!). Tenk på det som å bruke en vær-API i stedet for å prøve å forutsi været selv ved å sette opp værstasjoner overalt.

Det er i bunn og grunn "AI-som-en-tjeneste", og det beste? Det er gratis å komme i gang, så du kan eksperimentere uten å bekymre deg for å pådra deg store kostnader.

Vi bruker GitHub Models for vår backend-integrasjon, som gir tilgang til profesjonelle AI-funksjoner gjennom et utviklervennlig grensesnitt. GitHub Models Playground fungerer som et testmiljø der du kan eksperimentere med ulike AI-modeller og forstå deres kapabiliteter før du implementerer dem i kode.

Her er hva som gjør playground så nyttig:

Prøv ut ulike AI-modeller som GPT-4o-mini, Claude og andre (alle gratis!)
Test ideene og promptene dine før du skriver kode
Få ferdige kodeeksempler i ditt favorittprogrammeringsspråk
Juster innstillinger som kreativitet og svarlengde for å se hvordan de påvirker resultatet

Når du har lekt deg litt, klikker du bare på "Code"-fanen og velger programmeringsspråket ditt for å få implementeringskoden du trenger.

Sette opp Python-backend-integrasjonen

La oss nå implementere AI-integrasjonen ved hjelp av Python. Python er utmerket for AI-applikasjoner på grunn av sin enkle syntaks og kraftige biblioteker. Vi starter med koden fra GitHub Models playground og refaktorerer den til en gjenbrukbar, produksjonsklar funksjon.

Forstå grunnimplementeringen

Når du henter Python-koden fra playground, vil du få noe som ser slik ut. Ikke bekymre deg hvis det virker mye i starten – la oss gå gjennom det bit for bit:

Her er hva som skjer i denne koden:

Vi importerer verktøyene vi trenger: os for å lese miljøvariabler og OpenAI for å kommunisere med AI
Vi setter opp OpenAI-klienten til å peke mot GitHubs AI-servere i stedet for OpenAI direkte
Vi autentiserer med en spesiell GitHub-token (mer om det om et øyeblikk!)
Vi strukturerer samtalen med ulike "roller" – tenk på det som å sette scenen for et skuespill
Vi sender forespørselen vår til AI med noen finjusteringsparametere
Vi trekker ut den faktiske svarteksten fra all dataen som kommer tilbake

Forstå meldingsroller: AI-samtalens rammeverk

AI-samtaler bruker en spesifikk struktur med ulike "roller" som har distinkte formål:

Tenk på det som å regissere et skuespill:

Systemrolle: Som sceneanvisninger for en skuespiller – det forteller AI hvordan den skal oppføre seg, hvilken personlighet den skal ha, og hvordan den skal svare
Brukerrolle: Det faktiske spørsmålet eller meldingen fra personen som bruker applikasjonen
Assistentrolle: AI-ens svar (du sender ikke dette, men det vises i samtalehistorikken)

Virkelighetsanalog: Tenk deg at du introduserer en venn til noen på en fest:

Systemmelding: "Dette er min venn Sarah, hun er lege som er flink til å forklare medisinske konsepter på en enkel måte"
Brukermelding: "Kan du forklare hvordan vaksiner fungerer?"
Assistentrespons: Sarah svarer som en vennlig lege, ikke som en advokat eller kokk

Forstå AI-parametere: Finjustering av svaradferd

De numeriske parameterne i AI-API-kall styrer hvordan modellen genererer svar. Disse innstillingene lar deg justere AI-ens adferd for ulike bruksområder:

Temperatur (0.0 til 2.0): Kreativitetskontrollen

Hva det gjør: Styrer hvor kreative eller forutsigbare AI-ens svar vil være.

Tenk på det som en jazzmusikers improvisasjonsnivå:

Temperatur = 0.1: Spiller nøyaktig samme melodi hver gang (svært forutsigbart)
Temperatur = 0.7: Legger til noen smakfulle variasjoner mens den forblir gjenkjennelig (balansert kreativitet)
Temperatur = 1.5: Full eksperimentell jazz med uventede vendinger (svært uforutsigbart)

Maks Tokens (1 til 4096+): Lengdekontrollen for svar

Hva det gjør: Setter en grense for hvor langt AI-ens svar kan være.

Tenk på tokens som omtrent tilsvarende ord (ca. 1 token = 0,75 ord på engelsk):

max_tokens=50: Kort og konsist (som en tekstmelding)
max_tokens=500: Et fint avsnitt eller to
max_tokens=2000: En detaljert forklaring med eksempler

Top_p (0.0 til 1.0): Fokusparameteren

Hva det gjør: Styrer hvor fokusert AI-en holder seg på de mest sannsynlige svarene.

Tenk deg at AI-en har et enormt vokabular, rangert etter hvor sannsynlig hvert ord er:

top_p=0.1: Vurderer kun de 10% mest sannsynlige ordene (svært fokusert)
top_p=0.9: Vurderer 90% av mulige ord (mer kreativ)
top_p=1.0: Vurderer alt (maksimal variasjon)

For eksempel: Hvis du spør "Himmelen er vanligvis..."

Lav top_p: Sier nesten helt sikkert "blå"
Høy top_p: Kan si "blå", "skyet", "vidstrakt", "skiftende", "vakker", osv.

Sette alt sammen: Parameterkombinasjoner for ulike bruksområder

Forstå hvorfor disse parameterne er viktige: Ulike applikasjoner trenger ulike typer svar. En kundeservicebot bør være konsistent og faktabasert (lav temperatur), mens en kreativ skriveassistent bør være fantasifull og variert (høy temperatur). Å forstå disse parameterne gir deg kontroll over AI-ens personlighet og svarstil.

Magien med systemmeldinger: Programmering av AI-personlighet

Hvis parametere styrer hvordan AI tenker, styrer systemmeldinger hvem AI tror den er. Dette er ærlig talt en av de kuleste delene ved å jobbe med AI – du gir i bunn og grunn AI-en en komplett personlighet, ekspertisenivå og kommunikasjonsstil.

Tenk på systemmeldinger som å caste ulike skuespillere til ulike roller: I stedet for å ha én generisk assistent, kan du lage spesialiserte eksperter for ulike situasjoner. Trenger du en tålmodig lærer? En kreativ sparringspartner? En målrettet forretningsrådgiver? Bare endre systemmeldingen!

Hvorfor systemmeldinger er så kraftige

Her er det fascinerende: AI-modeller har blitt trent på utallige samtaler der folk adopterer ulike roller og ekspertisenivåer. Når du gir AI-en en spesifikk rolle, er det som å slå på en bryter som aktiverer alle de lærte mønstrene.

Det er som metodeacting for AI: Fortell en skuespiller "du er en klok gammel professor" og se hvordan de automatisk justerer holdning, vokabular og væremåte. AI gjør noe bemerkelsesverdig likt med språk.

Utforming av effektive systemmeldinger: Kunst og vitenskap

Anatomien til en god systemmelding:

Rolle/Identitet: Hvem er AI-en?
Ekspertise: Hva vet den?
Kommunikasjonsstil: Hvordan snakker den?
Spesifikke instruksjoner: Hva bør den fokusere på?

Hvorfor dette er viktig for din chat-assistent

Å forstå systemmeldinger gir deg utrolig kraft til å lage spesialiserte AI-assistenter:

Kundeservicebot: Hjelpsom, tålmodig, policy-bevisst
Læringsveileder: Oppmuntrende, steg-for-steg, sjekker forståelse
Kreativ partner: Fantasifull, bygger på ideer, spør "hva hvis?"
Teknisk ekspert: Presis, detaljert, sikkerhetsbevisst

Den viktige innsikten: Du kaller ikke bare en AI-API – du skaper en tilpasset AI-personlighet som tjener ditt spesifikke bruksområde. Dette er det som gjør moderne AI-applikasjoner føles skreddersydde og nyttige i stedet for generiske.

Bygge web-API med FastAPI: Din høyytelses AI-kommunikasjonsnav

La oss nå bygge backend som kobler frontend til AI-tjenester. Vi bruker FastAPI, et moderne Python-rammeverk som utmerker seg i å bygge API-er for AI-applikasjoner.

FastAPI tilbyr flere fordeler for denne typen prosjekter: innebygd async-støtte for håndtering av samtidige forespørsler, automatisk generering av API-dokumentasjon, og utmerket ytelse. Din FastAPI-server fungerer som en mellommann som mottar forespørsler fra frontend, kommuniserer med AI-tjenester, og returnerer formaterte svar.

Hvorfor FastAPI for AI-applikasjoner?

Du lurer kanskje: "Kan jeg ikke bare kalle AI direkte fra frontend JavaScript?" eller "Hvorfor FastAPI i stedet for Flask eller Django?" Gode spørsmål! Her er hvorfor FastAPI er perfekt for det vi bygger:

Async som standard: Kan håndtere flere AI-forespørsler samtidig uten å bli hengende
Automatisk dokumentasjon: Besøk /docs og få en vakker, interaktiv API-dokumentasjonsside gratis
Innebygd validering: Fanger opp feil før de skaper problemer
Lynrask: En av de raskeste Python-rammeverkene som finnes
Moderne Python: Bruker alle de nyeste og beste Python-funksjonene

Og her er hvorfor vi trenger en backend i det hele tatt:

Sikkerhet: Din AI API-nøkkel er som et passord – hvis du legger den i frontend JavaScript, kan hvem som helst som ser kildekoden til nettstedet ditt stjele den og bruke AI-kredittene dine. Backend holder sensitive opplysninger sikre.

Ratebegrensning og kontroll: Backend lar deg kontrollere hvor ofte brukere kan sende forespørsler, implementere brukerautentisering og legge til logging for å spore bruk.

Databehandling: Du kan ønske å lagre samtaler, filtrere upassende innhold eller kombinere flere AI-tjenester. Backend er stedet hvor denne logikken ligger.

Arkitekturen ligner en klient-server-modell:

Frontend: Brukergrensesnittlag for interaksjon
Backend API: Forespørselsbehandling og rutinglag
AI-tjeneste: Ekstern beregning og responsgenerering
Miljøvariabler: Sikker lagring av konfigurasjon og legitimasjon

Forstå forespørsel-respons flyten

La oss spore hva som skjer når en bruker sender en melding:

sequenceDiagram
    participant User as 👤 User
    participant Frontend as 🌐 Frontend
    participant API as 🔧 FastAPI Server
    participant AI as 🤖 AI Service
    
    User->>Frontend: Types "Hello AI!"
    Frontend->>API: POST /hello {"message": "Hello AI!"}
    Note over API: Validates request<br/>Adds system prompt
    API->>AI: Sends formatted request
    AI->>API: Returns AI response
    Note over API: Processes response<br/>Logs conversation
    API->>Frontend: {"response": "Hello! How can I help?"}
    Frontend->>User: Displays AI message

Forstå hvert steg:

Brukerinteraksjon: Personen skriver i chat-grensesnittet
Frontend-behandling: JavaScript fanger opp input og formaterer det som JSON
API-validering: FastAPI validerer automatisk forespørselen ved hjelp av Pydantic-modeller
AI-integrasjon: Backend legger til kontekst (systemprompt) og kaller AI-tjenesten
Responsbehandling: API mottar AI-responsen og kan endre den om nødvendig
Frontend-visning: JavaScript viser responsen i chat-grensesnittet

Forstå API-arkitektur

sequenceDiagram
    participant Frontend
    participant FastAPI
    participant AI Function
    participant GitHub Models
    
    Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
    FastAPI->>AI Function: call_llm(message, system_prompt)
    AI Function->>GitHub Models: API request
    GitHub Models->>AI Function: AI response
    AI Function->>FastAPI: response text
    FastAPI->>Frontend: {"response": "Hello! How can I help?"}

Lage FastAPI-applikasjonen

La oss bygge vår API steg for steg. Opprett en fil kalt api.py med følgende FastAPI-kode:

# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Create FastAPI application
app = FastAPI(
    title="AI Chat API",
    description="A high-performance API for AI-powered chat applications",
    version="1.0.0"
)

# Configure CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Configure appropriately for production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Pydantic models for request/response validation
class ChatMessage(BaseModel):
    message: str

class ChatResponse(BaseModel):
    response: str

@app.get("/")
async def root():
    """Root endpoint providing API information."""
    return {
        "message": "Welcome to the AI Chat API",
        "docs": "/docs",
        "health": "/health"
    }

@app.get("/health")
async def health_check():
    """Health check endpoint."""
    return {"status": "healthy", "service": "ai-chat-api"}

@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
    """Main chat endpoint that processes messages and returns AI responses."""
    try:
        # Extract and validate message
        message = chat_message.message.strip()
        if not message:
            raise HTTPException(status_code=400, detail="Message cannot be empty")
        
        logger.info(f"Processing message: {message[:50]}...")
        
        # Call AI service (note: call_llm should be made async for better performance)
        ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
        
        logger.info("AI response generated successfully")
        return ChatResponse(response=ai_response)
        
    except HTTPException:
        raise
    except Exception as e:
        logger.error(f"Error processing chat message: {str(e)}")
        raise HTTPException(status_code=500, detail="Internal server error")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)

Forstå FastAPI-implementeringen:

Importerer FastAPI for moderne webrammeverksfunksjonalitet og Pydantic for datavalidering
Oppretter automatisk API-dokumentasjon (tilgjengelig på /docs når serveren kjører)
Aktiverer CORS-middleware for å tillate frontend-forespørsler fra forskjellige opprinnelser
Definerer Pydantic-modeller for automatisk validering og dokumentasjon av forespørsler/responser
Bruker asynkrone endepunkter for bedre ytelse med samtidige forespørsler
Implementerer riktige HTTP-statuskoder og feilhåndtering med HTTPException
Inkluderer strukturert logging for overvåking og feilsøking
Tilbyr helsesjekk-endepunkt for overvåking av tjenestestatus

Viktige fordeler med FastAPI sammenlignet med tradisjonelle rammeverk:

Automatisk validering: Pydantic-modeller sikrer dataintegritet før behandling
Interaktiv dokumentasjon: Besøk /docs for automatisk generert, testbar API-dokumentasjon
Type-sikkerhet: Python type hints forhindrer kjøretidsfeil og forbedrer kodekvaliteten
Async-støtte: Håndter flere AI-forespørsler samtidig uten blokkering
Ytelse: Betydelig raskere forespørselsbehandling for sanntidsapplikasjoner

Forstå CORS: Webens sikkerhetsvakt

CORS (Cross-Origin Resource Sharing) er som en sikkerhetsvakt ved en bygning som sjekker om besøkende har tillatelse til å komme inn. La oss forstå hvorfor dette er viktig og hvordan det påvirker applikasjonen din.

Hva er CORS og hvorfor eksisterer det?

Problemet: Tenk deg at hvilket som helst nettsted kunne sende forespørsler til bankens nettsted på dine vegne uten din tillatelse. Det ville vært et sikkerhetsmareritt! Nettlesere forhindrer dette som standard gjennom "Same-Origin Policy."

Same-Origin Policy: Nettlesere tillater kun nettsider å sende forespørsler til samme domene, port og protokoll de ble lastet fra.

Analogien i virkeligheten: Det er som sikkerhet i en leilighetsbygning – kun beboere (samme opprinnelse) kan få tilgang til bygningen som standard. Hvis du vil la en venn (annen opprinnelse) besøke, må du eksplisitt fortelle sikkerheten at det er greit.

CORS i ditt utviklingsmiljø

Under utvikling kjører frontend og backend på forskjellige porter:

Frontend: http://localhost:3000 (eller file:// hvis du åpner HTML direkte)
Backend: http://localhost:5000

Disse regnes som "forskjellige opprinnelser" selv om de er på samme datamaskin!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"

Hva CORS-konfigurasjon gjør i praksis:

Legger til spesielle HTTP-headere til API-responser som forteller nettlesere "denne forespørselen på tvers av opprinnelser er tillatt"
Håndterer "preflight"-forespørsler (nettlesere sjekker noen ganger tillatelser før de sender den faktiske forespørselen)
Forhindrer den fryktede "blokkert av CORS-policy"-feilen i nettleserkonsollen din

CORS-sikkerhet: Utvikling vs produksjon

# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)

# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])

# 🔒 Advanced: Different origins for different environments
if app.debug:  # Development mode
    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else:  # Production mode
    CORS(app, origins=["https://yourdomain.com"])

Hvorfor dette er viktig: I utvikling er CORS(app) som å la døren stå ulåst – praktisk, men ikke sikkert. I produksjon vil du spesifisere nøyaktig hvilke nettsteder som kan snakke med API-en din.

Vanlige CORS-scenarier og løsninger

Scenario	Problem	Løsning
Lokal utvikling	Frontend kan ikke nå backend	Legg til CORSMiddleware i FastAPI
GitHub Pages + Heroku	Frontend i produksjon kan ikke nå API	Legg til URL-en til GitHub Pages i CORS-opprinnelser
Egendefinert domene	CORS-feil i produksjon	Oppdater CORS-opprinnelser til å matche domenet ditt
Mobilapp	Appen kan ikke nå web-API	Legg til appens domene eller bruk `*` med forsiktighet

Tips: Du kan sjekke CORS-headere i nettleserens utviklerverktøy under Nettverksfanen. Se etter headere som Access-Control-Allow-Origin i responsen.

Feilhåndtering og validering

Legg merke til hvordan API-en vår inkluderer riktig feilhåndtering:

# Validate that we received a message
if not message:
    return jsonify({"error": "Message field is required"}), 400

Viktige valideringsprinsipper:

Sjekker for nødvendige felt før forespørsler behandles
Returnerer meningsfulle feilmeldinger i JSON-format
Bruker passende HTTP-statuskoder (400 for dårlige forespørsler)
Gir klar tilbakemelding for å hjelpe frontend-utviklere med å feilsøke problemer

Sette opp og kjøre din backend

Nå som vi har vår AI-integrasjon og FastAPI-server klar, la oss få alt i gang. Oppsettprosessen innebærer å installere Python-avhengigheter, konfigurere miljøvariabler og starte utviklingsserveren din.

Python-miljøoppsett

La oss sette opp ditt Python-utviklingsmiljø. Virtuelle miljøer er som en isolert arbeidsplass – hvert prosjekt får sitt eget rom med spesifikke verktøy og avhengigheter, og forhindrer konflikter mellom prosjekter.

# Navigate to your backend directory
cd backend

# Create a virtual environment (like creating a clean room for your project)
python -m venv venv

# Activate it (Linux/Mac)
source ./venv/bin/activate

# On Windows, use:
# venv\Scripts\activate

# Install the good stuff
pip install openai fastapi uvicorn python-dotenv

Hva vi nettopp gjorde:

Opprettet vår egen lille Python-boble hvor vi kan installere pakker uten å påvirke noe annet
Aktiverte det slik at terminalen vår vet å bruke dette spesifikke miljøet
Installerte det essensielle: OpenAI for AI-magi, FastAPI for vår web-API, Uvicorn for å faktisk kjøre det, og python-dotenv for sikker håndtering av hemmeligheter

Viktige avhengigheter forklart:

FastAPI: Moderne, raskt webrammeverk med automatisk API-dokumentasjon
Uvicorn: Lynrask ASGI-server som kjører FastAPI-applikasjoner
OpenAI: Offisiell bibliotek for GitHub-modeller og OpenAI API-integrasjon
python-dotenv: Sikker miljøvariabel lasting fra .env-filer

Miljøkonfigurasjon: Holde hemmeligheter trygge

Før vi starter API-en vår, må vi snakke om en av de viktigste leksjonene i webutvikling: hvordan holde hemmeligheter faktisk hemmelige. Miljøvariabler er som en sikker hvelv som bare applikasjonen din kan få tilgang til.

Hva er miljøvariabler?

Tenk på miljøvariabler som en sikkerhetsboks – du legger verdifulle ting der, og bare du (og appen din) har nøkkelen til å hente dem ut. I stedet for å skrive sensitiv informasjon direkte i koden din (hvor absolutt alle kan se det), lagrer du det trygt i miljøet.

Her er forskjellen:

Feil måte: Skrive passordet ditt på en lapp og feste det på skjermen
Riktig måte: Holde passordet ditt i en sikker passordbehandler som bare du kan få tilgang til

Hvorfor miljøvariabler er viktige

# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
    api_key="ghp_1234567890abcdef...",  # Anyone can steal this!
    base_url="https://models.github.ai/inference"
)

# ✅ DO THIS - API key stored securely
client = OpenAI(
    api_key=os.environ["GITHUB_TOKEN"],  # Only your app can access this
    base_url="https://models.github.ai/inference"
)

Hva som skjer når du hardkoder hemmeligheter:

Eksponering i versjonskontroll: Alle med tilgang til Git-repositoriet ditt ser API-nøkkelen din
Offentlige repositorier: Hvis du pusher til GitHub, er nøkkelen din synlig for hele internett
Deling med teamet: Andre utviklere som jobber på prosjektet ditt får tilgang til din personlige API-nøkkel
Sikkerhetsbrudd: Hvis noen stjeler API-nøkkelen din, kan de bruke AI-kredittene dine

Sette opp din miljøfil

Opprett en .env-fil i backend-katalogen din. Denne filen lagrer hemmelighetene dine lokalt:

# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development

Forstå .env-filen:

En hemmelighet per linje i KEY=value-format
Ingen mellomrom rundt likhetstegnet
Ingen anførselstegn nødvendig rundt verdier (vanligvis)
Kommentarer starter med #

Opprette din GitHub Personal Access Token

Din GitHub-token er som et spesielt passord som gir applikasjonen din tillatelse til å bruke GitHubs AI-tjenester:

Steg-for-steg token-opprettelse:

Gå til GitHub-innstillinger → Utviklerinnstillinger → Personlige tilgangstokens → Tokens (klassisk)
Klikk "Generer nytt token (klassisk)"
Sett utløpstid (30 dager for testing, lengre for produksjon)
Velg omfang: Kryss av for "repo" og eventuelle andre tillatelser du trenger
Generer token og kopier det umiddelbart (du kan ikke se det igjen!)
Lim inn i din .env-fil

# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R

Laste miljøvariabler i Python

import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Now you can access them securely
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
    raise ValueError("GITHUB_TOKEN not found in environment variables!")

client = OpenAI(
    api_key=api_key,
    base_url="https://models.github.ai/inference"
)

Hva denne koden gjør:

Laster din .env-fil og gjør variabler tilgjengelige for Python
Sjekker om den nødvendige token eksisterer (god feilhåndtering!)
Reiser en klar feil hvis token mangler
Bruker token sikkert uten å eksponere det i koden

Git-sikkerhet: .gitignore-filen

Din .gitignore-fil forteller Git hvilke filer som aldri skal spores eller lastes opp:

# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/

Hvorfor dette er avgjørende: Når du legger til .env i .gitignore, vil Git ignorere miljøfilen din, og forhindre at du ved et uhell laster opp hemmelighetene dine til GitHub.

Ulike miljøer, ulike hemmeligheter

Profesjonelle applikasjoner bruker forskjellige API-nøkler for forskjellige miljøer:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
GITHUB_TOKEN=your_production_token
DEBUG=False

Hvorfor dette er viktig: Du vil ikke at eksperimenter i utvikling skal påvirke produksjonens AI-brukskvote, og du ønsker ulike sikkerhetsnivåer for ulike miljøer.

Starte din utviklingsserver: Gi liv til din FastAPI

Nå kommer det spennende øyeblikket – starte din FastAPI-utviklingsserver og se AI-integrasjonen din komme til live! FastAPI bruker Uvicorn, en lynrask ASGI-server som er spesifikt designet for asynkrone Python-applikasjoner.

Forstå oppstartsprosessen for FastAPI-serveren

# Method 1: Direct Python execution (includes auto-reload)
python api.py

# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload

Når du kjører denne kommandoen, skjer følgende bak kulissene:

1. Python laster din FastAPI-applikasjon:

Importerer alle nødvendige biblioteker (FastAPI, Pydantic, OpenAI, etc.)
Laster miljøvariabler fra din .env-fil
Oppretter FastAPI-applikasjonsinstansen med automatisk dokumentasjon

2. Uvicorn konfigurerer ASGI-serveren:

Binder til port 5000 med asynkron forespørselshåndtering
Setter opp forespørselsruting med automatisk validering
Aktiverer hot reload for utvikling (starter på nytt ved filendringer)
Genererer interaktiv API-dokumentasjon

3. Serveren begynner å lytte:

Terminalen din viser: INFO: Uvicorn running on http://0.0.0.0:5000
Serveren kan håndtere flere samtidige AI-forespørsler
API-en din er klar med automatisk dokumentasjon på http://localhost:5000/docs

Hva du bør se når alt fungerer

$ python api.py
INFO:     Will watch for changes in these directories: ['/your/project/path']
INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO:     Started reloader process [12345] using WatchFiles
INFO:     Started server process [12346]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

Forstå FastAPI-utdata:

Vil overvåke endringer: Auto-reload aktivert for utvikling
Uvicorn kjører: Høyytelses ASGI-server er aktiv
Startet omstarterprosess: Filovervåker for automatiske omstarter
Applikasjonsoppstart fullført: FastAPI-app initialisert vellykket
Interaktiv dokumentasjon tilgjengelig: Besøk /docs for automatisk API-dokumentasjon

Testing av din FastAPI: Flere kraftige tilnærminger

FastAPI gir flere praktiske måter å teste API-en din på, inkludert automatisk interaktiv dokumentasjon:

Metode 1: Interaktiv API-dokumentasjon (Anbefalt)

Åpne nettleseren din og gå til http://localhost:5000/docs
Du vil se Swagger UI med alle endepunktene dine dokumentert
Klikk på /hello → "Prøv det ut" → Skriv inn en testmelding → "Utfør"
Se responsen direkte i nettleseren med riktig formatering

Metode 2: Enkel nettlesertest

Gå til http://localhost:5000 for rotendepunktet
Gå til http://localhost:5000/health for å sjekke serverens helse
Dette bekrefter at FastAPI-serveren din kjører som den skal

Metode 2: Kommandolinjetest (Avansert)

# Test with curl (if available)
curl -X POST http://localhost:5000/hello \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello AI!"}'

# Expected response:
# {"response": "Hello! I'm your AI assistant. How can I help you today?"}

Metode 3: Python-testskript

Feilsøking av vanlige oppstartsproblemer

Feilmelding	Hva det betyr	Hvordan fikse det
`ModuleNotFoundError: No module named 'fastapi'`	FastAPI er ikke installert	Kjør `pip install fastapi uvicorn` i ditt virtuelle miljø
`ModuleNotFoundError: No module named 'uvicorn'`	ASGI-server er ikke installert	Kjør `pip install uvicorn` i ditt virtuelle miljø
`KeyError: 'GITHUB_TOKEN'`	Miljøvariabel ikke funnet	Sjekk din `.env`-fil og `load_dotenv()`-kall
`Address already in use`	Port 5000 er opptatt	Avslutt andre prosesser som bruker port 5000 eller endre porten
`ValidationError`	Forespørselsdata samsvarer ikke med Pydantic-modellen	Sjekk at forespørselen din har riktig format i henhold til forventet skjema
`HTTPException 422`	Ubehandlingsbar enhet	Validering av forespørsel mislyktes, sjekk `/docs` for korrekt format
`OpenAI API error`	Autentisering mot AI-tjenesten mislyktes	Bekreft at GitHub-tokenet ditt er korrekt og har riktige tillatelser

Beste praksis for utvikling

Hot Reloading: FastAPI med Uvicorn gir automatisk oppdatering når du lagrer endringer i Python-filene dine. Dette betyr at du kan endre koden og teste umiddelbart uten å starte på nytt manuelt.

Logging for utvikling: Legg til logging for å forstå hva som skjer:

Hvorfor logging hjelper: Under utvikling kan du se nøyaktig hvilke forespørsler som kommer inn, hva AI svarer med, og hvor feil oppstår. Dette gjør feilsøking mye raskere.

Konfigurering for GitHub Codespaces: Enkel skyutvikling

GitHub Codespaces er som å ha en kraftig utviklingsmaskin i skyen som du kan få tilgang til fra hvilken som helst nettleser. Hvis du jobber i Codespaces, er det noen ekstra trinn for å gjøre backend tilgjengelig for frontend.

Forstå Codespaces-nettverk

I et lokalt utviklingsmiljø kjører alt på samme datamaskin:

Backend: http://localhost:5000
Frontend: http://localhost:3000 (eller file://)

I Codespaces kjører utviklingsmiljøet ditt på GitHubs servere, så "localhost" har en annen betydning. GitHub oppretter automatisk offentlige URL-er for tjenestene dine, men du må konfigurere dem riktig.

Trinnvis Codespaces-konfigurasjon

1. Start backend-serveren din: Du vil se den velkjente oppstartsmeldingen fra FastAPI/Uvicorn, men merk at den kjører inne i Codespace-miljøet.

2. Konfigurer port-synlighet:

Se etter "Ports"-fanen i den nederste panelet i VS Code
Finn port 5000 i listen
Høyreklikk på port 5000
Velg "Port Visibility" → "Public"

Hvorfor gjøre den offentlig? Som standard er Codespace-porter private (kun tilgjengelige for deg). Å gjøre den offentlig lar frontend (som kjører i nettleseren) kommunisere med backend.

3. Få din offentlige URL: Etter å ha gjort porten offentlig, vil du se en URL som:

4. Oppdater frontend-konfigurasjonen din:

Forstå Codespace-URL-er

Codespace-URL-er følger et forutsigbart mønster:

Forklaring:

codespace-name: En unik identifikator for din Codespace (inkluderer vanligvis brukernavnet ditt)
port: Portnummeret tjenesten din kjører på (5000 for vår FastAPI-app)
app.github.dev: GitHubs domene for Codespace-applikasjoner

Testing av Codespace-oppsett

1. Test backend direkte: Åpne din offentlige URL i en ny nettleserfane. Du bør se:

2. Test med utviklerverktøy i nettleseren:

Codespaces vs lokal utvikling

Aspekt	Lokal utvikling	GitHub Codespaces
Oppstartstid	Lengre (installere Python, avhengigheter)	Umiddelbar (forhåndskonfigurert miljø)
URL-tilgang	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
Portkonfigurasjon	Automatisk	Manuell (gjør porter offentlige)
Filpersistens	Lokal maskin	GitHub-repositorium
Samarbeid	Vanskelig å dele miljø	Enkel deling av Codespace-lenke
Internett-avhengighet	Kun for AI API-kall	Nødvendig for alt

Tips for utvikling i Codespaces

Miljøvariabler i Codespaces: Din .env-fil fungerer på samme måte i Codespaces, men du kan også sette miljøvariabler direkte i Codespace:

Porthåndtering:

Codespaces oppdager automatisk når applikasjonen din begynner å lytte på en port
Du kan videresende flere porter samtidig (nyttig hvis du legger til en database senere)
Porter forblir tilgjengelige så lenge Codespace kjører

Utviklingsarbeidsflyt:

Gjør kodeendringer i VS Code
FastAPI oppdaterer automatisk (takket være Uvicorns oppdateringsmodus)
Test endringer umiddelbart via den offentlige URL-en
Commit og push når du er klar

💡 Tips: Bokmerk backend-URL-en til Codespace under utvikling. Siden Codespace-navn er stabile, vil URL-en ikke endre seg så lenge du bruker den samme Codespace.

Lage frontend-chatgrensesnittet: Der mennesker møter AI

Nå skal vi bygge brukergrensesnittet – delen som avgjør hvordan folk interagerer med din AI-assistent. Akkurat som designet av det originale iPhone-grensesnittet, fokuserer vi på å gjøre kompleks teknologi intuitiv og enkel å bruke.

Forstå moderne frontend-arkitektur

Vårt chatgrensesnitt vil være det vi kaller en "Single Page Application" eller SPA. I stedet for den gammeldagse tilnærmingen der hver klikk laster en ny side, oppdateres appen vår jevnt og umiddelbart:

Gamle nettsider: Som å lese en fysisk bok – du blar til helt nye sider Vår chat-app: Som å bruke telefonen din – alt flyter og oppdateres sømløst

De tre pilarene i frontend-utvikling

Hver frontend-applikasjon – fra enkle nettsider til komplekse apper som Discord eller Slack – er bygget på tre kjerne-teknologier. Tenk på dem som grunnlaget for alt du ser og interagerer med på nettet:

HTML (Struktur): Dette er fundamentet ditt

Bestemmer hvilke elementer som finnes (knapper, tekstfelt, containere)
Gir mening til innholdet (dette er en overskrift, dette er et skjema, osv.)
Skaper den grunnleggende strukturen som alt annet bygges på

CSS (Presentasjon): Dette er din interiørdesigner

Gjør alt vakkert (farger, skrifttyper, oppsett)
Håndterer forskjellige skjermstørrelser (telefon vs laptop vs nettbrett)
Skaper jevne animasjoner og visuell tilbakemelding

JavaScript (Oppførsel): Dette er hjernen din

Reagerer på hva brukerne gjør (klikk, skriving, scrolling)
Kommuniserer med backend og oppdaterer siden
Gjør alt interaktivt og dynamisk

Tenk på det som arkitektonisk design:

HTML: Den strukturelle planen (definerer rom og relasjoner)
CSS: Den estetiske og miljømessige designen (visuell stil og brukeropplevelse)
JavaScript: De mekaniske systemene (funksjonalitet og interaktivitet)

Hvorfor moderne JavaScript-arkitektur er viktig

Vår chat-applikasjon vil bruke moderne JavaScript-mønstre som du vil se i profesjonelle applikasjoner. Å forstå disse konseptene vil hjelpe deg med å vokse som utvikler:

Klassebasert arkitektur: Vi organiserer koden vår i klasser, som er som blåkopier for objekter Async/Await: Moderne måte å håndtere operasjoner som tar tid (som API-kall) Hendelsesdrevet programmering: Appen vår reagerer på brukerhandlinger (klikk, tastetrykk) i stedet for å kjøre i en løkke DOM-manipulering: Dynamisk oppdatering av nettsideinnhold basert på brukerinteraksjoner og API-responser

Prosjektstruktur

Opprett en frontend-mappe med denne organiserte strukturen:

Forstå arkitekturen:

Skiller bekymringer mellom struktur (HTML), oppførsel (JavaScript) og presentasjon (CSS)
Opprettholder en enkel filstruktur som er lett å navigere og endre
Følger beste praksis for webutvikling når det gjelder organisering og vedlikehold

Bygge HTML-grunnlaget: Semantisk struktur for tilgjengelighet

La oss starte med HTML-strukturen. Moderne webutvikling legger vekt på "semantisk HTML" – bruk av HTML-elementer som tydelig beskriver deres formål, ikke bare deres utseende. Dette gjør applikasjonen din tilgjengelig for skjermlesere, søkemotorer og andre verktøy.

Hvorfor semantisk HTML er viktig: Tenk deg å beskrive chat-appen din til noen over telefon. Du ville sagt "det er en overskrift med tittelen, et hovedområde der samtaler vises, og et skjema nederst for å skrive meldinger." Semantisk HTML bruker elementer som samsvarer med denne naturlige beskrivelsen.

Opprett index.html med denne gjennomtenkte strukturen:

Forstå hvert HTML-element og dets formål:

Dokumentstruktur

<!DOCTYPE html>: Forteller nettleseren at dette er moderne HTML5
<html lang="en">: Angir sidens språk for skjermlesere og oversettelsesverktøy
<meta charset="UTF-8">: Sikrer riktig tegnkoding for internasjonal tekst
<meta name="viewport"...>: Gjør siden mobilvennlig ved å kontrollere zoom og skala

Semantiske elementer

<header>: Identifiserer tydelig toppseksjonen med tittel og beskrivelse
<main>: Angir hovedinnholdsområdet (der samtaler skjer)
<form>: Semantisk korrekt for brukerinput, muliggjør riktig tastaturnavigasjon

Tilgjengelighetsfunksjoner

role="log": Forteller skjermlesere at dette området inneholder en kronologisk logg over meldinger
aria-live="polite": Annonserer nye meldinger til skjermlesere uten å avbryte
aria-label: Gir beskrivende etiketter for skjemakontroller
required: Nettleseren validerer at brukere skriver inn en melding før de sender

CSS- og JavaScript-integrasjon

class-attributter: Gir stilkroker for CSS (f.eks. chat-container, input-group)
id-attributter: Lar JavaScript finne og manipulere spesifikke elementer
Script-plassering: JavaScript-fil lastes inn til slutt slik at HTML lastes først

Hvorfor denne strukturen fungerer:

Logisk flyt: Header → Hovedinnhold → Input-skjema samsvarer med naturlig leserekkefølge
Tastaturvennlig: Brukere kan navigere gjennom alle interaktive elementer med tabulator
Skjermleservennlig: Klare landemerker og beskrivelser for synshemmede brukere
Mobilvennlig: Viewport meta-tag gjør designet responsivt
Progressiv forbedring: Fungerer selv om CSS eller JavaScript ikke lastes inn

Legge til interaktiv JavaScript: Logikk for moderne webapplikasjoner

La oss nå bygge JavaScript som gir liv til chat-grensesnittet vårt. Vi bruker moderne JavaScript-mønstre som du vil møte i profesjonell webutvikling, inkludert ES6-klasser, async/await og hendelsesdrevet programmering.

Forstå moderne JavaScript-arkitektur

I stedet for å skrive prosedyrekode (en serie funksjoner som kjører i rekkefølge), vil vi lage en klassebasert arkitektur. Tenk på en klasse som en blåkopi for å lage objekter – som hvordan en arkitekts blåkopi kan brukes til å bygge flere hus.

Hvorfor bruke klasser for webapplikasjoner?

Organisering: All relatert funksjonalitet er gruppert sammen
Gjenbruk: Du kan opprette flere chat-installasjoner på samme side
Vedlikeholdbarhet: Enklere å feilsøke og endre spesifikke funksjoner
Profesjonell standard: Dette mønsteret brukes i rammeverk som React, Vue og Angular

Opprett app.js med denne moderne, velstrukturerte JavaScript-koden:

Forstå hvert JavaScript-konsept

ES6-klasse-struktur:

Async/Await-mønster:

Hendelsesdrevet programmering: I stedet for å konstant sjekke om noe har skjedd, "lytter" vi etter hendelser:

DOM-manipulering:

Sikkerhet og beste praksis

Forebygging av XSS:

Hvorfor dette er viktig: Hvis en bruker skriver <script>alert('hack')</script>, sørger denne funksjonen for at det vises som tekst i stedet for å bli utført som kode.

Feilhåndtering:

Brukeropplevelseshensyn:

Optimistisk UI: Legg til brukermelding umiddelbart, vent ikke på serverrespons
Lastetilstander: Deaktiver knapper og vis "Sender..." mens du venter
Auto-scroll: Hold de nyeste meldingene synlige
Input-validering: Ikke send tomme meldinger
Tastatursnarveier: Enter-tasten sender meldinger (som ekte chat-apper)

Forstå applikasjonsflyten

Siden lastes → DOMContentLoaded-hendelse utløses → new ChatApp() opprettes
Konstruktør kjører → Får referanser til DOM-elementer → Setter opp hendelseslyttere
Bruker skriver melding → Trykker Enter eller klikker Send → handleSubmit kjører
handleSubmit → Validerer input → Viser lastetilstand → Kaller API
API svarer → Legg til AI-melding i chatten → Aktiver grensesnittet igjen
Klar for neste melding → Brukeren kan fortsette å chatte Denne arkitekturen er skalerbar – du kan enkelt legge til funksjoner som redigering av meldinger, filopplastinger eller flere samtaletråder uten å måtte omskrive kjernearkitekturen.

Stilsetting av Chat-grensesnittet ditt

La oss nå lage et moderne og visuelt tiltalende chat-grensesnitt med CSS. God stilsetting får applikasjonen din til å føles profesjonell og forbedrer den generelle brukeropplevelsen. Vi vil bruke moderne CSS-funksjoner som Flexbox, CSS Grid og egendefinerte egenskaper for et responsivt og tilgjengelig design.

Opprett styles.css med disse omfattende stilene:

/* styles.css - Modern chat interface styling */

:root {
    --primary-color: #2563eb;
    --secondary-color: #f1f5f9;
    --user-color: #3b82f6;
    --assistant-color: #6b7280;
    --error-color: #ef4444;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.chat-container {
    width: 100%;
    max-width: 800px;
    height: 600px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    text-align: center;
}

.chat-header h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.chat-header p {
    opacity: 0.9;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--secondary-color);
}

.message {
    display: flex;
    max-width: 80%;
    animation: slideIn 0.3s ease-out;
}

.message.user {
    align-self: flex-end;
}

.message.user .message-content {
    background: var(--user-color);
    color: white;
    border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
}

.message.assistant {
    align-self: flex-start;
}

.message.assistant .message-content {
    background: white;
    color: var(--text-primary);
    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
    border: 1px solid #e2e8f0;
}

.message.error .message-content {
    background: var(--error-color);
    color: white;
    border-radius: var(--border-radius);
}

.message-content {
    padding: 12px 16px;
    box-shadow: var(--shadow);
    position: relative;
}

.message-text {
    display: block;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-time {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

.chat-form {
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

#messageInput {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

#messageInput:focus {
    border-color: var(--primary-color);
}

#messageInput:disabled {
    background: #f8fafc;
    opacity: 0.6;
    cursor: not-allowed;
}

#sendBtn {
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 80px;
}

#sendBtn:hover:not(:disabled) {
    background: #1d4ed8;
}

#sendBtn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .chat-container {
        height: calc(100vh - 20px);
        border-radius: 8px;
    }
    
    .message {
        max-width: 90%;
    }
    
    .input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    #messageInput {
        width: 100%;
    }
    
    #sendBtn {
        width: 100%;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .message {
        animation: none;
    }
    
    * {
        transition: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .chat-container {
        background: #1e293b;
        color: #f1f5f9;
    }
    
    .chat-messages {
        background: #0f172a;
    }
    
    .message.assistant .message-content {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }
    
    .chat-form {
        background: #1e293b;
        border-color: #475569;
    }
    
    #messageInput {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }
}

Forstå CSS-arkitekturen:

Bruker CSS-egendefinerte egenskaper (variabler) for konsistent tema og enkel vedlikeholdelse
Implementerer Flexbox-layout for responsivt design og riktig justering
Inkluderer jevne animasjoner for visning av meldinger uten å være distraherende
Gir visuell forskjell mellom brukermeldinger, AI-svar og feilmeldinger
Støtter responsivt design som fungerer både på stasjonære og mobile enheter
Tar hensyn til tilgjengelighet med redusert bevegelsespreferanse og riktig kontrastforhold
Tilbyr støtte for mørk modus basert på brukerens systeminnstillinger

Konfigurere Backend-URL-en din

Det siste trinnet er å oppdatere BASE_URL i JavaScript for å matche backend-serveren din:

// For local development
this.BASE_URL = "http://localhost:5000";

// For GitHub Codespaces (replace with your actual URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

Bestemme backend-URL-en din:

Lokal utvikling: Bruk http://localhost:5000 hvis du kjører både frontend og backend lokalt
Codespaces: Finn backend-URL-en din i Ports-fanen etter å ha gjort port 5000 offentlig
Produksjon: Erstatt med ditt faktiske domene når du distribuerer til en hostingtjeneste

💡 Testtips: Du kan teste backend-en din direkte ved å besøke rot-URL-en i nettleseren din. Du bør se velkomstmeldingen fra FastAPI-serveren din.

Testing og distribusjon

Nå som du har bygget både frontend- og backend-komponentene, la oss teste at alt fungerer sammen og utforske distribusjonsalternativer for å dele chat-assistenten din med andre.

Lokal testarbeidsflyt

Følg disse trinnene for å teste hele applikasjonen din:

graph TD
    A[Start Backend Server] --> B[Configure Environment Variables]
    B --> C[Test API Endpoints]
    C --> D[Open Frontend in Browser]
    D --> E[Test Chat Functionality]
    E --> F[Debug Any Issues]

Trinn-for-trinn testprosess:

Start backend-serveren din:

cd backend
source venv/bin/activate  # or venv\Scripts\activate on Windows
python api.py

Bekreft at API-et fungerer:
- Åpne http://localhost:5000 i nettleseren din
- Du bør se velkomstmeldingen fra FastAPI-serveren din
Åpne frontend-en din:
- Naviger til frontend-mappen din
- Åpne index.html i nettleseren din
- Eller bruk Live Server-utvidelsen i VS Code for en bedre utviklingsopplevelse
Test chat-funksjonaliteten:
- Skriv en melding i inndatafeltet
- Klikk på "Send" eller trykk Enter
- Bekreft at AI-en svarer riktig
- Sjekk nettleserkonsollen for eventuelle JavaScript-feil

Feilsøking av vanlige problemer

Problem	Symptomer	Løsning
CORS-feil	Frontend kan ikke nå backend	Sørg for at FastAPI CORSMiddleware er riktig konfigurert
API-nøkkelfeil	401 Uautorisert svar	Sjekk `GITHUB_TOKEN` miljøvariabelen din
Tilkobling nektet	Nettverksfeil i frontend	Verifiser backend-URL og at Flask-serveren kjører
Ingen AI-svar	Tomme eller feilmeldinger	Sjekk backend-loggene for API-kvote eller autentiseringsproblemer

Vanlige feilsøkingstrinn:

Sjekk nettleserens utviklerverktøy-konsoll for JavaScript-feil
Verifiser at nettverksfanen viser vellykkede API-forespørsler og svar
Gå gjennom backend-terminalutdata for Python-feil eller API-problemer
Bekreft at miljøvariabler er riktig lastet og tilgjengelige

GitHub Copilot Agent Challenge 🚀

Bruk Agent-modus for å fullføre følgende utfordring:

Beskrivelse: Forbedre chat-assistenten ved å legge til samtalehistorikk og meldingers persistens. Denne utfordringen vil hjelpe deg med å forstå hvordan du håndterer tilstand i chat-applikasjoner og implementerer datalagring for bedre brukeropplevelse.

Oppgave: Endre chat-applikasjonen for å inkludere samtalehistorikk som vedvarer mellom økter. Legg til funksjonalitet for å lagre chat-meldinger i lokal lagring, vise samtalehistorikk når siden lastes, og inkluder en knapp for å "Tømme historikk". Implementer også skriveindikatorer og tidsstempler for meldinger for å gjøre chatteopplevelsen mer realistisk.

Les mer om agent mode her.

Oppgave: Bygg din personlige AI-assistent

Nå skal du lage din egen AI-assistent. I stedet for bare å kopiere opplæringskoden, er dette en mulighet til å bruke konseptene mens du bygger noe som reflekterer dine egne interesser og bruksområder.

Prosjektkrav

La oss sette opp prosjektet ditt med en ren, organisert struktur:

my-ai-assistant/
├── backend/
│   ├── api.py          # Your FastAPI server
│   ├── llm.py          # AI integration functions
│   ├── .env            # Your secrets (keep this safe!)
│   └── requirements.txt # Python dependencies
├── frontend/
│   ├── index.html      # Your chat interface
│   ├── app.js          # The JavaScript magic
│   └── styles.css      # Make it look amazing
└── README.md           # Tell the world about your creation

Kjerneoppgaver for implementering

Backend-utvikling:

Tilpass FastAPI-koden vår og gjør den til din egen
Lag en unik AI-personlighet – kanskje en hjelpsom matlagingsassistent, en kreativ skrivepartner eller en studievenn?
Legg til solid feilhåndtering slik at appen din ikke krasjer når noe går galt
Skriv tydelig dokumentasjon for alle som ønsker å forstå hvordan API-et ditt fungerer

Frontend-utvikling:

Bygg et chat-grensesnitt som føles intuitivt og innbydende
Skriv ren, moderne JavaScript som du kan være stolt av å vise andre utviklere
Design tilpasset stil som reflekterer AI-ens personlighet – morsom og fargerik? Ren og minimalistisk? Helt opp til deg!
Sørg for at det fungerer bra både på telefoner og datamaskiner

Personlig tilpasning:

Velg et unikt navn og personlighet for AI-assistenten din – kanskje noe som reflekterer dine interesser eller problemene du vil løse
Tilpass det visuelle designet for å matche assistentens stil
Skriv en overbevisende velkomstmelding som får folk til å ville starte en samtale
Test assistenten din med ulike typer spørsmål for å se hvordan den reagerer

Forbedringsideer (valgfritt)

Vil du ta prosjektet ditt til neste nivå? Her er noen morsomme ideer å utforske:

Funksjon	Beskrivelse	Ferdigheter du vil øve på
Meldingshistorikk	Husk samtaler selv etter at siden er oppdatert	Arbeide med localStorage, JSON-håndtering
Skriveindikatorer	Vis "AI skriver..." mens du venter på svar	CSS-animasjoner, asynkron programmering
Meldingstidsstempler	Vis når hver melding ble sendt	Dato/tid-formattering, UX-design
Eksport av chat	La brukere laste ned samtalen sin	Filhåndtering, dataeksport
Tema-bytte	Lys/mørk modus-bryter	CSS-variabler, brukerpreferanser
Taleinnspilling	Legg til tale-til-tekst-funksjonalitet	Web-API-er, tilgjengelighet

Testing og dokumentasjon

Kvalitetssikring:

Test applikasjonen din med ulike inndatatyper og kanttilfeller
Verifiser at responsivt design fungerer på forskjellige skjermstørrelser
Sjekk tilgjengelighet med tastaturnavigasjon og skjermlesere
Valider HTML og CSS for standardoverholdelse

Dokumentasjonskrav:

Skriv en README.md som forklarer prosjektet ditt og hvordan det kjøres
Inkluder skjermbilder av chat-grensesnittet ditt i aksjon
Dokumenter eventuelle unike funksjoner eller tilpasninger du har lagt til
Gi klare oppsettinstruksjoner for andre utviklere

Retningslinjer for innlevering

Prosjektleveranser:

Komplett prosjektmappe med all kildekode
README.md med prosjektbeskrivelse og oppsettinstruksjoner
Skjermbilder som viser chat-assistenten din i aksjon
Kort refleksjon over hva du har lært og hvilke utfordringer du møtte

Evalueringskriterier:

Funksjonalitet: Fungerer chat-assistenten som forventet?
Kodekvalitet: Er koden godt organisert, kommentert og vedlikeholdbar?
Design: Er grensesnittet visuelt tiltalende og brukervennlig?
Kreativitet: Hvor unik og personlig er implementeringen din?
Dokumentasjon: Er oppsettinstruksjonene klare og fullstendige?

💡 Suksesstips: Start med de grunnleggende kravene først, og legg til forbedringer når alt fungerer. Fokuser på å skape en polert kjerneopplevelse før du legger til avanserte funksjoner.

Løsning

Bonusutfordringer

Klar til å ta AI-assistenten din til neste nivå? Prøv disse avanserte utfordringene som vil utdype forståelsen din av AI-integrasjon og webutvikling.

Personlighetstilpasning

Den virkelige magien skjer når du gir AI-assistenten din en unik personlighet. Eksperimenter med ulike systemprompter for å lage spesialiserte assistenter:

Eksempel på profesjonell assistent:

call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")

Eksempel på kreativ skrivehjelper:

call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")

Eksempel på teknisk mentor:

call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")

Forbedringer i frontend

Forvandle chat-grensesnittet ditt med disse visuelle og funksjonelle forbedringene:

Avanserte CSS-funksjoner:

Implementer jevne meldingsanimasjoner og overganger
Legg til tilpassede chat-bobledesign med CSS-former og gradienter
Lag en skriveindikatoranimasjon for når AI-en "tenker"
Design emoji-reaksjoner eller et meldingsvurderingssystem

JavaScript-forbedringer:

Legg til hurtigtaster (Ctrl+Enter for å sende, Escape for å tømme inndata)
Implementer søk og filtreringsfunksjonalitet for meldinger
Lag en funksjon for eksport av samtaler (last ned som tekst eller JSON)
Legg til automatisk lagring til localStorage for å forhindre tap av meldinger

Avansert AI-integrasjon

Flere AI-personligheter:

Lag en rullegardinmeny for å bytte mellom ulike AI-personligheter
Lagre brukerens foretrukne personlighet i localStorage
Implementer kontekstbytte som opprettholder samtaleflyten

Smarte svarfunksjoner:

Legg til samtalekontekstbevissthet (AI husker tidligere meldinger)
Implementer smarte forslag basert på samtaleemne
Lag hurtigsvar-knapper for vanlige spørsmål

🎯 Læringsmål: Disse bonusutfordringene hjelper deg med å forstå avanserte mønstre for webutvikling og AI-integrasjon som brukes i produksjonsapplikasjoner.

Oppsummering og neste steg

Gratulerer! Du har med hell bygget en komplett AI-drevet chat-assistent fra bunnen av. Dette prosjektet har gitt deg praktisk erfaring med moderne webutviklingsteknologier og AI-integrasjon – ferdigheter som er stadig mer verdifulle i dagens teknologilandskap.

Hva du har oppnådd

Gjennom denne leksjonen har du mestret flere viktige teknologier og konsepter:

Backend-utvikling:

Integrert med GitHub Models API for AI-funksjonalitet
Bygget et RESTful API ved hjelp av Flask med riktig feilhåndtering
Implementert sikker autentisering ved hjelp av miljøvariabler
Konfigurert CORS for kryssopprinnelsesforespørsler mellom frontend og backend

Frontend-utvikling:

Skapt et responsivt chat-grensesnitt ved hjelp av semantisk HTML
Implementert moderne JavaScript med async/await og klassebasert arkitektur
Designet et engasjerende brukergrensesnitt med CSS Grid, Flexbox og animasjoner
Lagt til tilgjengelighetsfunksjoner og prinsipper for responsivt design

Fullstack-integrasjon:

Koblet frontend og backend gjennom HTTP API-kall
Håndtert sanntidsbrukerinteraksjoner og asynkron dataflyt
Implementert feilhåndtering og tilbakemeldinger til brukeren gjennom hele applikasjonen
Testet hele applikasjonsflyten fra brukerinput til AI-svar

Viktige læringsutbytter

mindmap
  root((AI Chat App Skills))
    API Integration
      Authentication
      Error Handling
      Async Programming
    Web Development
      HTML5 Semantics
      Modern CSS
      ES6+ JavaScript
    User Experience
      Responsive Design
      Accessibility
      Real-time Interaction
    AI Understanding
      Prompt Engineering
      Model Parameters
      Conversation Flow

Dette prosjektet har introdusert deg for grunnleggende prinsipper for å bygge AI-drevne applikasjoner, som representerer fremtiden for webutvikling. Du forstår nå hvordan du kan integrere AI-funksjonalitet i tradisjonelle webapplikasjoner og skape engasjerende brukeropplevelser som føles intelligente og responsive.

Profesjonelle anvendelser

Ferdighetene du har utviklet i denne leksjonen, er direkte anvendelige i moderne karrierer innen programvareutvikling:

Fullstack webutvikling med moderne rammeverk og API-er
AI-integrasjon i webapplikasjoner og mobilapper
API-design og utvikling for mikrotjenestearkitekturer
Utvikling av brukergrensesnitt med fokus på tilgjengelighet og responsivt design
DevOps-praksis inkludert miljøkonfigurasjon og distribusjon

Fortsett din AI-utviklingsreise

Neste læringstrinn:

Utforsk mer avanserte AI-modeller og API-er (GPT-4, Claude, Gemini)
Lær om prompt engineering-teknikker for bedre AI-svar
Studer samtaledesign og prinsipper for chatbot-brukeropplevelse
Undersøk AI-sikkerhet, etikk og ansvarlig AI-utviklingspraksis
Bygg mer komplekse applikasjoner med samtaleminne og kontekstbevissthet

Avanserte prosjektideer:

Flerrums chat med AI-moderering
AI-drevne kundeservice-chatboter
Utdanningsveiledere med personlig tilpasset læring
Kreative skrivepartnere med ulike AI-personligheter
Teknisk dokumentasjonsassistent for utviklere

Kom i gang med GitHub Codespaces

Vil du prøve dette prosjektet i et skyutviklingsmiljø? GitHub Codespaces gir et komplett utviklingsmiljø i nettleseren din, perfekt for å eksperimentere med AI-applikasjoner uten lokale oppsettkrav.

Sette opp utviklingsmiljøet ditt

Trinn 1: Opprett fra mal

Naviger til Web Dev For Beginners repository
Klikk på "Use this template" øverst til høyre (sørg for at du er logget inn på GitHub)

Trinn 2: Start Codespaces

Åpne det nyopprettede repositoriet ditt
Klikk på den grønne "Code"-knappen og velg "Codespaces"
Velg "Create codespace on main" for å starte utviklingsmiljøet ditt

Trinn 3: Miljøkonfigurasjon Når Codespace er lastet inn, vil du ha tilgang til:

Forhåndsinstallert Python, Node.js og alle nødvendige utviklingsverktøy
VS Code-grensesnitt med utvidelser for webutvikling
Terminaltilgang for å kjøre backend- og frontend-servere
Portviderekobling for testing av applikasjonene dine

Hva Codespaces tilbyr:

Eliminerer problemer med oppsett og konfigurasjon av lokale miljøer
Gir et konsistent utviklingsmiljø på tvers av ulike enheter
Inkluderer forhåndskonfigurerte verktøy og utvidelser for webutvikling
Tilbyr sømløs integrasjon med GitHub for versjonskontroll og samarbeid

🚀 Profftips: Codespaces er perfekt for å lære og lage prototyper av AI-applikasjoner, siden det automatisk håndterer all kompleks miljøoppsett, slik at du kan fokusere på å bygge og lære i stedet for å feilsøke konfigurasjoner.

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiske 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 misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

66 KiB Raw Blame History Unescape Escape

Bygg en chat-assistent med AI

Forstå AI: Fra mystikk til mestring

Hva er egentlig "Generativ AI"?

Hvordan AI-modeller lærer (den enkle versjonen)

Hvorfor GitHub Models?

Sette opp Python-backend-integrasjonen

Forstå grunnimplementeringen

Forstå meldingsroller: AI-samtalens rammeverk

Forstå AI-parametere: Finjustering av svaradferd

Temperatur (0.0 til 2.0): Kreativitetskontrollen

Maks Tokens (1 til 4096+): Lengdekontrollen for svar

Top_p (0.0 til 1.0): Fokusparameteren

Sette alt sammen: Parameterkombinasjoner for ulike bruksområder

Magien med systemmeldinger: Programmering av AI-personlighet

Hvorfor systemmeldinger er så kraftige

Utforming av effektive systemmeldinger: Kunst og vitenskap

Hvorfor dette er viktig for din chat-assistent

Bygge web-API med FastAPI: Din høyytelses AI-kommunikasjonsnav

Hvorfor FastAPI for AI-applikasjoner?

Forstå forespørsel-respons flyten

Forstå API-arkitektur

Lage FastAPI-applikasjonen

Forstå CORS: Webens sikkerhetsvakt

Hva er CORS og hvorfor eksisterer det?

CORS i ditt utviklingsmiljø

CORS-sikkerhet: Utvikling vs produksjon

Vanlige CORS-scenarier og løsninger

Feilhåndtering og validering

Sette opp og kjøre din backend

Python-miljøoppsett

Miljøkonfigurasjon: Holde hemmeligheter trygge

Hva er miljøvariabler?

Hvorfor miljøvariabler er viktige

Sette opp din miljøfil

Opprette din GitHub Personal Access Token

Laste miljøvariabler i Python

Git-sikkerhet: .gitignore-filen

Ulike miljøer, ulike hemmeligheter

Starte din utviklingsserver: Gi liv til din FastAPI

Forstå oppstartsprosessen for FastAPI-serveren

Hva du bør se når alt fungerer

Testing av din FastAPI: Flere kraftige tilnærminger

Feilsøking av vanlige oppstartsproblemer

Beste praksis for utvikling

Konfigurering for GitHub Codespaces: Enkel skyutvikling

Forstå Codespaces-nettverk

Trinnvis Codespaces-konfigurasjon

Forstå Codespace-URL-er

Testing av Codespace-oppsett

Codespaces vs lokal utvikling

Tips for utvikling i Codespaces

Lage frontend-chatgrensesnittet: Der mennesker møter AI

Forstå moderne frontend-arkitektur

De tre pilarene i frontend-utvikling

Hvorfor moderne JavaScript-arkitektur er viktig

Prosjektstruktur

Bygge HTML-grunnlaget: Semantisk struktur for tilgjengelighet

Dokumentstruktur

Semantiske elementer

Tilgjengelighetsfunksjoner

CSS- og JavaScript-integrasjon

Legge til interaktiv JavaScript: Logikk for moderne webapplikasjoner

Forstå moderne JavaScript-arkitektur

Forstå hvert JavaScript-konsept

Sikkerhet og beste praksis

Forstå applikasjonsflyten

Stilsetting av Chat-grensesnittet ditt

Konfigurere Backend-URL-en din

Testing og distribusjon

Lokal testarbeidsflyt

Feilsøking av vanlige problemer

GitHub Copilot Agent Challenge 🚀

Oppgave: Bygg din personlige AI-assistent

Prosjektkrav

Kjerneoppgaver for implementering

Forbedringsideer (valgfritt)

Testing og dokumentasjon

Retningslinjer for innlevering

Løsning

66 KiB

Raw Blame History Unescape Escape