localizeflow[bot]
24a1a3bde1
|
1 month ago | |
|---|---|---|
| .. | ||
| solution | 4 months ago | |
| README.md | 1 month ago | |
README.md
Ustvarite Chat asistenta z AI
Se spomnite v Star Treku, ko je posadka brezskrbno klepetala z računalnikom ladje, ga spraševala zahtevna vprašanja in dobivala premišljene odgovore? Kar se je v šestdesetih zdelo kot znanstvena fantastika, lahko zdaj zgradite z uporabo spletnih tehnologij, ki jih že poznate.
V tej lekciji bomo ustvarili AI chat asistenta z uporabo HTML, CSS, JavaScript in nekaj integracije s strežnikom. Odkrijete boste, kako se lahko iste veščine, ki ste jih že spoznavali, povežejo z zmogljivimi AI storitvami, ki razumejo kontekst in ustvarjajo smiselne odgovore.
Premislite o AI kot dostopu do ogromne knjižnice, ki ne samo najde informacije, ampak jih tudi sintetizira v koherentne odgovore, prilagojene vašim specifičnim vprašanjem. Namesto iskanja skozi tisoče strani prejmete neposredne, kontekstualne odgovore.
Integracija poteka s sodelovanjem znanih spletnih tehnologij. HTML ustvari vmesnik za klepet, CSS skrbi za vizualno zasnovo, JavaScript upravlja uporabniške interakcije, strežniški API pa poveže vse to z AI storitvami. To je podobno kot različni deli orkestra, ki skupaj ustvarjajo simfonijo.
Pravzaprav gradimo most med naravnim človeškim komuniciranjem in obdelavo s strojem. Naučili se boste tako tehnične izvedbe integracije AI storitev kot oblikovalskih vzorcev, ki naredijo interakcije intuitivne.
Na koncu te lekcije bo integracija AI manj kot skrivnosten proces in bolj kot še en API, s katerim lahko delate. Razumeli boste temeljne vzorce, ki poganjajo aplikacije, kot so ChatGPT in Claude, z uporabo istih načel spletnega razvoja, ki ste jih že obvladali.
⚡ Kaj lahko naredite v naslednjih 5 minutah
Hitri začetek za zaposlene razvijalce
flowchart LR
A[⚡ 5 minut] --> B[Pridobi GitHub žeton]
B --> C[Preizkusi AI igrišče]
C --> D[Kopiraj Python kodo]
D --> E[Oglej si AI odgovore]
- 1. minuta: Obiščite GitHub Models Playground in ustvarite osebni dostopni žeton
- 2. minuta: Testirajte AI interakcije neposredno v playground vmesniku
- 3. minuta: Kliknite na zavihek "Code" in kopirajte Python izsek
- 4. minuta: Zaženite kodo lokalno z vašim žetonom:
GITHUB_TOKEN=your_token python test.py - 5. minuta: Oglejte si svoj prvi AI odgovor, ki ga ustvari vaša koda
Hitri testni koda:
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
Zakaj je to pomembno: V 5 minutah boste doživeli čar programskih AI interakcij. To predstavlja osnovni gradnik, ki poganja vsako AI aplikacijo, ki jo uporabljate.
Tako bo videti vaš končni projekt:
🗺️ Vaša pot učenja razvoja AI aplikacij
journey
title Od spletnega razvoja do integracije AI
section Razumevanje temeljev AI
Odkrijte koncepte generativne AI: 4: You
Raziščite platformo GitHub Models: 6: You
Obvladujte AI parametre in pozive: 8: You
section Integracija na backendu
Zgradite Python API strežnik: 5: You
Izvedite AI klice funkcij: 7: You
Upravite asinhrone operacije: 8: You
section Razvoj frontenda
Ustvarite sodoben klepetalni vmesnik: 6: You
Obvladujte interakcije v realnem času: 8: You
Zgradite odzivno uporabniško izkušnjo: 9: You
section Profesionalna uporaba
Namestite celoten AI sistem: 7: You
Optimizirajte vzorce zmogljivosti: 8: You
Ustvarite aplikacijo pripravljeno za produkcijo: 9: You
Cilj vaše poti: Na koncu te lekcije boste zgradili popolno AI-podprto aplikacijo z uporabo istih tehnologij in vzorcev, ki poganjajo sodobne AI asistente, kot so ChatGPT, Claude in Google Bard.
Razumevanje AI: od skrivnosti do obvladovanja
Preden se potopimo v kodo, razumimo, s čim delamo. Če ste že uporabljali API-je, poznate osnovni vzorec: pošljete zahtevo, prejmete odgovor.
AI API-ji sledijo podobni strukturi, vendar namesto pridobivanja vnaprej shranjenih podatkov iz baze, generirajo nove odgovore na podlagi vzorcev, naučenih iz ogromnih količin besedila. To je kot razlika med knjižničnim katalogom in pametnim knjižničarjem, ki zna sintetizirati informacije iz več virov.
Kaj je pravzaprav "Generativna AI"?
Pomislite, kako je Rosettinski kamen omogočil učenjakom razumevanje egipčanskih hieroglifov tako, da so našli vzorce med poznanimi in neznanimi jeziki. AI modeli delujejo podobno – najdejo vzorce v ogromnih količinah besedila, da razumemo, kako jezik deluje, nato uporabijo te vzorce za ustvarjanje ustreznih odgovorov na nova vprašanja.
To razložim s preprosto primerjavo:
- Tradicionalna baza podatkov: Kot da bi zaprosili za rojstni list – vedno dobite isto točno kopijo
- Iskalnik: Kot da vprašate knjižničarja, naj poišče knjige o mačkah – pokaže, kaj je na voljo
- Generativna AI: Kot da vprašate pametnega prijatelja o mačkah – pove zanimive stvari s svojimi besedami, prilagojeno temu, kar želite vedeti
graph LR
A[Vaše vprašanje] --> B[AI model]
B --> C[Prepoznavanje vzorcev]
C --> D[Generiranje vsebine]
D --> E[Odgovor v kontekstu]
F[Podatki za učenje<br/>Knjige, članki, splet] --> B
Kako se AI modeli učijo (poenostavljena različica)
AI modeli se učijo skozi izpostavljenost ogromnim podatkovnim nizom, ki vsebujejo besedila iz knjig, člankov in pogovorov. S tem procesom prepoznavajo vzorce pri:
- Kako so misli strukturirane v pisnem komuniciranju
- Katere besede se pogosto pojavljajo skupaj
- Kako običajno tečejo pogovori
- Kontekstualne razlike med formalno in neformalno komunikacijo
Podobno kot arheologi razbirajo starodavne jezike: analizirajo tisoče primerov za razumevanje slovnice, besedišča in kulturnega konteksta, da na koncu lahko razumejo nove tekste z uporabo teh naučenih vzorcev.
Zakaj GitHub Models?
Uporabljamo GitHub Models iz praktičnega razloga – omogoča nam dostop do AI na ravni podjetij, brez vzpostavitve lastne AI infrastrukture (verjemite, tega zdaj ne želite!). Predstavljajte si, da uporabljate vremenski API, namesto da bi sami postavljali vremenske postaje po vsej regiji in napovedovali vreme.
Gre za "AI kot storitev", najboljše pri tem pa je, da se lahko začnete brezplačno, zato lahko eksperimentirate brez skrbi zaradi visokih stroškov.
graph LR
A[Frontend klepet UI] --> B[Vaš Backend API]
B --> C[GitHub modeli API]
C --> D[Procesiranje AI modela]
D --> C
C --> B
B --> A
Za integracijo s strežnikom bomo uporabili GitHub Models, ki omogoča dostop do profesionalnih AI zmogljivosti preko razvijalcem prijaznega vmesnika. GitHub Models Playground služi kot testno okolje, kjer lahko preizkušate različne AI modele in razumete njihove zmogljivosti, preden jih implementirate v kodo.
🧠 Ekosistem razvoja AI aplikacij
mindmap
root((Razvoj AI))
Razumevanje AI
Generativni modeli
Prepoznavanje vzorcev
Generiranje vsebine
Razumevanje konteksta
Sestavljanje odgovorov
AI parametri
Nadzor temperature
Omejitve na število tokenov
Filtriranje top-p
Sistematični pozivi
Arhitektura zaledja
Integracija API
GitHub modeli
Avtentikacija
Obdelava zahtevkov
Upravljanje napak
Python infrastruktura
Okvir FastAPI
Asinhrone operacije
Varnost okolja
Nastavitve CORS
Izkušnja vmesnika
Pogovorni vmesnik
Posodobitve v realnem času
Zgodovina sporočil
Povratne informacije uporabnikov
Stanja nalaganja
Sodobna spletna tehnologija
ES6 razredi
Async/Await
Manipulacija DOM
Upravljanje dogodkov
Profesionalni vzorci
Najboljše varnostne prakse
Upravljanje tokenov
Validacija vhodov
Preprečevanje XSS
Robovi napak
Pripravljenost za produkcijo
Optimizacija zmogljivosti
Prilagodljiv dizajn
Dostopnost
Strategije testiranja
Osnovno načelo: Razvoj AI aplikacij združuje tradicionalne spletne razvojne veščine s integracijo AI storitev, ustvarjajoč inteligentne aplikacije, ki se uporabnikom zdijo naravne in odzivne.
Zakaj je playground tako uporaben:
- Preizkusite različne AI modele, kot so GPT-4o-mini, Claude in drugi (vsi brezplačni!)
- Testirajte ideje in pozive pred pisanjem kode
- Pridobite vnaprej pripravljene kode v želenem programskem jeziku
- Nastavite parametre, kot so stopnja ustvarjalnosti in dolžina odgovora, da vidite, kako vplivajo na izhod
Ko se poigrate, kliknite zavihek "Code" in izberite programski jezik za pridobitev potrebne implementacijske kode.
Nastavitev Python backend integracije
Zdaj pa uvedimo AI integracijo z uporabo Pythona. Python je odličen za AI aplikacije zaradi preproste sintakse in močnih knjižnic. Začeli bomo s kodo iz GitHub Models playground-a in jo nato preoblikovali v ponovno uporabno, produkcijsko funkcijo.
Razumevanje osnovne implementacije
Ko vzamete Python kodo iz playgrounda, boste dobili nekaj takšnega. Ne skrbite, če sprva izgleda veliko – poglejmo si korak za korakom:
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# Za overjanje z modelom boste morali ustvariti osebni dostopni žeton (PAT) v svojih nastavitvah GitHub.
# Ustvarite svoj PAT žeton tako, da sledite navodilom tukaj: 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)
Tukaj se v tej kodi dogaja:
- Uvozimo orodja, ki jih potrebujemo:
osza branje okoljskih spremenljivk inOpenAIza komunikacijo z AI - Nastavimo OpenAI klienta, da kaže na GitHubove AI strežnike, ne na OpenAI neposredno
- Avtentificiramo se z GitHub žetonom (več o tem kmalu!)
- Strukturiramo naš pogovor z različnimi "vlogami" – pomislite, da postavljamo sceno za igro
- Pošljemo zahtevo AI z nekaj parametri za fino nastavitev
- Izločimo dejansko besedilo odgovora iz vseh podatkov, ki jih dobimo nazaj
Razumevanje vlog sporočil: Okvir AI pogovora
AI pogovori uporabljajo specifično strukturo z različnimi "vlogami", ki služijo različnim namenom:
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
Pomislite na to kot režijo predstave:
- Vloga sistema: Kot usmeritve za igralca – pove AI, kako naj se obnaša, kakšno osebnost naj ima in kako naj odgovarja
- Vloga uporabnika: Dejanski vprašanje ali sporočilo osebe, ki uporablja vašo aplikacijo
- Vloga asistenta: AI odgovor (tega ne pošljete sami, ampak se pojavi v zgodovini pogovora)
Primer iz resničnega sveta: Predstavljajte si, da prijatelja predstavljate nekomu na zabavi:
- Sporočilo sistema: "To je moja prijateljica Sarah, zdravnica, ki odlično razloži medicinske koncepte na preprost način"
- Sporočilo uporabnika: "Lahko razložiš, kako delujejo cepiva?"
- Odgovor asistenta: Sarah odgovarja kot prijazna zdravnica, ne kot odvetnik ali kuhar
Razumevanje AI parametrov: Fino nastavitev vedenja odgovorov
Numerični parametri v API klicih AI nadzirajo, kako model ustvarja odgovore. Te nastavitve omogočajo prilagoditev obnašanja AI za različne primere uporabe:
Temperatura (0.0 do 2.0): Nastavitev ustvarjalnosti
Kaj naredi: Nadzoruje, kako ustvarjalni ali predvidljivi bodo odgovori AI.
Pomislite nanjo kot na jazz improvizacijo glasbenika:
- Temperatura = 0.1: Igra ves čas isto melodijo (zelo predvidljivo)
- Temperatura = 0.7: Doda nekaj okusnih variacij, ostane prepoznaven (uravnotežena ustvarjalnost)
- Temperatura = 1.5: Polni eksperimentalni jazz z nepričakovanimi obrati (zelo nepredvidljivo)
# Zelo predvidljivi odgovori (dobro za faktografska vprašanja)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Skoraj vedno bo rekel "4"
)
# Kreativni odgovori (dobro za možgansko nevihto)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Ustvaril bo edinstvene, nepričakovane zgodbe
)
Max Tokens (1 do 4096+): Nadzor dolžine odgovora
Kaj naredi: Nastavi omejitev, kako dolg je lahko odgovor AI.
Premislite o tokenih kot približno enakovrednih besedam (približno 1 token = 0,75 besede v angleščini):
- max_tokens=50: Kratek in jedrnat (kot SMS sporočilo)
- max_tokens=500: Lep odstavek ali dva
- max_tokens=2000: Podroben razlaga z primeri
# Kratki, jedrnati odgovori
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Zahteva kratek odgovor
)
# Podrobni, obsežni odgovori
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Omogoča podrobne razlage z primeri
)
Top_p (0.0 do 1.0): Nadzor fokusa
Kaj naredi: Nadzoruje, kako osredotočen AI ostane na najbolj verjetnih odgovorih.
Predstavljajte si, da AI ima ogromno besedišče, razvrščeno po verjetnosti posamezne besede:
- top_p=0.1: Upošteva samo 10 % najbolj verjetnih besed (zelo osredotočeno)
- top_p=0.9: Upošteva 90 % možnih besed (bolj ustvarjalno)
- top_p=1.0: Upošteva vse (maksimalna raznolikost)
Na primer: Če vprašate "Nebo je običajno ..."
- Nizka top_p: Zelo verjetno bo rekel "modro"
- Visoka top_p: Lahko reče "modro", "oblačno", "prostrano", "spremenljivo", "lepo" itd.
Vse skupaj: Kombinacije parametrov za različne primere uporabe
# Za dejanske, dosledne odgovore (kot dokumentacijski robot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# Za pomoč pri ustvarjalnem pisanju
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# Za pogovorne, koristne odgovore (uravnoteženo)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
quadrantChart
title Matrika optimizacije parametrov umetne inteligence
x-axis Nizka ustvarjalnost --> Visoka ustvarjalnost
y-axis Kratek odgovor --> Dolg odgovor
quadrant-1 Ustvarjalna vsebina
quadrant-2 Podrobna analiza
quadrant-3 Hitri podatki
quadrant-4 Pogovorna umetna inteligenca
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
Zakaj so ti parametri pomembni: Različne aplikacije potrebujejo različne tipe odgovorov. Bot za podporo strankam naj bo dosleden in faktualen (nizka temperatura), medtem ko naj bo pomočnik za ustvarjalno pisanje domiseln in raznolik (visoka temperatura). Razumevanje teh parametrov vam da nadzor nad osebnostjo in slogom odgovora AI.
**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
### Creating a Reusable AI Function
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
```python
import asyncio
from openai import AsyncOpenAI
# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
"""
Sends a prompt to the AI model asynchronously and returns the response.
Args:
prompt: The user's question or message
system_message: Instructions that define the AI's behavior and personality
Returns:
str: The AI's response to the prompt
"""
try:
response = await 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
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return "I'm sorry, I'm having trouble processing your request right now."
# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
"""Synchronous wrapper for async AI calls."""
return asyncio.run(call_llm_async(prompt, system_message))
Razumevanje izboljšane funkcije:
- Sprejema dva parametra: uporabnikov poziv in izbirno sistemsko sporočilo
- Nudi privzeto sistemsko sporočilo za splošno obnašanje asistenta
- Uporablja pravilne Python tipne namige za boljšo dokumentacijo kode
- Vključuje podrobno dokumentacijo, ki pove namen in parametre funkcije
- Vrača samo vsebino odgovora, kar poenostavi uporabo v našem spletno API-ju
- Ohranja iste model parametre za konsistentno AI vedenje
Čarobnost sistemskih pozivov: programiranje osebnosti AI
Če parametri nadzorujejo, kako AI razmišlja, sistemski pozivi nadzorujejo, kdo AI misli, da je. To je iskreno ena izmed najbolj kul stvari pri delu z AI – dajete AI celotno osebnost, strokovno znanje in način komuniciranja.
Pomislite na sistemske pozive kot na izbiro različni igralcev za različne vloge: Namesto enega generičnega asistenta lahko ustvarite specializirane strokovnjake za različne situacije. Potrebujete potrpežljivega učitelja? Kreativnega partnerja za brainstorming? Resnega poslovnega svetovalca? Samo spremenite sistemski poziv!
Zakaj so sistemski pozivi tako močni
Tukaj je fascinantni del: AI modeli so bili usposobljeni na neštetih pogovorih, kjer so ljudje prevzemali različne vloge in ravni strokovnosti. Ko AI daste specifično vlogo, je to kot da vklopite stikalo, ki aktivira vse te naučene vzorce.
To je kot igralska metoda za AI: Povejte igralcu "si moder star profesor" in opazujte kako samodejno prilagodi držo, besedišče in manire. AI naredi nekaj podobnega z jezikovnimi vzorci.
Oblikovanje učinkovitih sistemskih pozivov: umetnost in znanost
Anatomija odličnega sistemskega poziva:
- Vloga/Osebnost: Kdo je AI?
- Strokovnost: Kaj ve?
- Slog komunikacije: Kako govori?
- Specifična navodila: Na kaj se naj osredotoči?
# ❌ Nejasen sistemski poziv
"You are helpful."
# ✅ Podroben, učinkovit sistemski poziv
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
Primeri sistemskih pozivov s kontekstom
Oglejmo si, kako različni sistemski pozivi ustvarjajo popolnoma različne AI osebnosti:
# Primer 1: Potrpežljivi učitelj
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students.
You break down complex concepts into simple steps, use analogies from everyday life,
and always check if the student understands before moving on. You're encouraging
and never make students feel bad for not knowing something.
"""
# Primer 2: Kreativni sodelavec
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're
enthusiastic, imaginative, and always build on the user's ideas rather than
replacing them. You ask thought-provoking questions to spark creativity and
offer unexpected perspectives that make stories more interesting.
"""
# Primer 3: Strateški poslovni svetovalec
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience
helping startups scale. You think in frameworks, provide structured advice,
and always consider both short-term tactics and long-term strategy. You ask
probing questions to understand the full business context before giving advice.
"""
Opazovanje sistemskih pozivov v praksi
Preizkusimo isto vprašanje z različnimi sistemskimi pozivi in poglejmo dramatične razlike:
Vprašanje: "Kako upravljam z avtentikacijo uporabnikov v svoji spletni aplikaciji?"
# Z navodilom učitelja:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Tipičen odgovor: "Odlično vprašanje! Razdelimo avtentikacijo na preproste korake.
# Pomislite nanjo kot na varnostnika v nočnem klubu, ki preverja osebne izkaznice..."
# Z navodilom za poslovni kontekst:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Tipičen odgovor: "Z vidika strategije je avtentikacija ključna za zaupanje uporabnikov
# in skladnost z zakonodajo. Predstavil bom okvir, ki upošteva varnost,
# uporabniško izkušnjo in razširljivost..."
Napredne tehnike sistemskih pozivov
1. Nastavitev konteksta: Dajte AI ozadje
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
2. Oblikovanje izhoda: Povejte AI, kako naj strukturira odgovore
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
3. Nastavitev omejitev: Določite, česa AI NE sme početi
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
Zakaj je to pomembno za vašega klepetalnega asistenta
Razumevanje sistemskih pozivov vam daje izjemno moč za ustvarjanje specializiranih AI asistentov:
- Bot za uporabniško podporo: Računajoč, potrpežljiv, pozoren na politike
- Učni tutor: Spodbuden, korak za korakom, preverja razumevanje
- Kreativni partner: Domiseln, gradi na idejah, sprašuje "kaj pa če?"
- Tehnični strokovnjak: Natančen, podroben, pozoren na varnost
Ključni vpogled: Ne kličeš le AI API-ja – ustvarjaš prilagojeno AI osebnost, ki služi tvojemu specifičnemu primeru uporabe. To je razlog, da se sodobne AI aplikacije zdijo prilagojene in uporabne namesto generične.
🎯 Pedagoški premislek: Programiranje AI osebnosti
Premor in razmislek: Pravkar ste se naučili programirati AI osebnosti preko sistemskih pozivov. To je temeljna spretnost v razvoju sodobnih AI aplikacij.
Hitri samoevalvacijski vprašalnik:
- Ali lahko razložite, kako se sistemski pozivi razlikujejo od običajnih uporabniških sporočil?
- Kakšna je razlika med parametroma temperature in top_p?
- Kako bi ustvarili sistemski poziv za določen primer uporabe (npr. tutor za programiranje)?
Povezava z resničnim svetom: Te tehnike sistemskih pozivov se uporabljajo v vsakem pomembnem AI izdelku – od pomočnika za kodiranje GitHub Copilot do pogovornega vmesnika ChatGPT. Obvladaš iste vzorce, ki jih uporabljajo ekipe za AI izdelke v velikih tehnoloških podjetjih.
Izziv: Kako bi zasnovali različne AI osebnosti za različne vrste uporabnikov (začetnik proti strokovnjaku)? Razmisli, kako lahko isti osnovni AI model služi različnim ciljnim skupinam preko načrtovanja pozivov.
Gradnja spletnega API-ja z FastAPI: Vaš visokozmogljivi komunikacijski vozlišče za AI
Zgradimo zdaj backend, ki povezuje vaš frontend z AI storitvami. Uporabili bomo FastAPI, moderni Python okvir, ki izstopa pri ustvarjanju API-jev za AI aplikacije.
FastAPI ponuja več prednosti za tovrstne projekte: vgrajena podpora za asinhrono obdelavo sočasnih zahtevkov, samodejna generacija API dokumentacije in odlična zmogljivost. Vaš FastAPI strežnik deluje kot posrednik, ki sprejema zahtevke iz frontenda, komunicira z AI storitvami in vrača oblikovane odgovore.
Zakaj FastAPI za AI aplikacije?
Morda se sprašujete: "Ali ne morem kar direktno klicati AI iz mojega frontend JavaScripta?" ali "Zakaj FastAPI namesto Flask ali Django?" Odlična vprašanja!
Tukaj je razlog, zakaj je FastAPI popoln za to, kar gradimo:
- Privzeto asinhron: Obvladuje več AI zahtevkov hkrati brez zastojev
- Samodejna dokumentacija: Obiščite
/docsin dobite čudovito, interaktivno API dokumentacijo brezplačno - Vgrajena validacija: Preveri napake preden povzročijo težave
- Izjemno hiter: Eden najhitrejših Python okvirov
- Sodobni Python: Izkoristi vse najnovejše funkcije Pythona
In zakaj sploh potrebujemo backend:
Varnost: Vaš AI API ključ je kot geslo – če ga vstavite v frontend JavaScript, ga lahko kdorkoli, ki si ogleda izvorno kodo vaše spletne strani, ukrade in uporabi vaše AI kredite. Backend varuje občutljive podatke.
Omejitev hitrosti in nadzor: Backend omogoča nadzor nad tem, kako pogosto lahko uporabniki pošiljajo zahtevke, omogoča uporabniško avtentikacijo in beleženje za sledenje uporabe.
Obdelava podatkov: Morda želite shranjevati pogovore, filtrirati neprimerne vsebine ali združevati več AI storitev. Backend je kraj za to logiko.
Arhitektura spominja na model klient-strežnik:
- Frontend: Plasten uporabniškega vmesnika za interakcijo
- Backend API: Plasten za obdelavo in usmerjanje zahtevkov
- AI storitev: Zunanje računanje in generiranje odgovorov
- Okoljske spremenljivke: Varen shranjevalec konfiguracije in poverilnic
Razumevanje toka zahteve in odgovora
Poglejmo, kaj se zgodi, ko uporabnik pošlje sporočilo:
sequenceDiagram
participant User as 👤 Uporabnik
participant Frontend as 🌐 Vmesnik
participant API as 🔧 FastAPI strežnik
participant AI as 🤖 AI storitev
User->>Frontend: Vpiše "Pozdravljen AI!"
Frontend->>API: POST /hello {"message": "Pozdravljen AI!"}
Note over API: Preveri zahtevo<br/>Doda sistemski poziv
API->>AI: Pošlje oblikovano zahtevo
AI->>API: Vrne AI odgovor
Note over API: Obdeluje odgovor<br/>Zabeleži pogovor
API->>Frontend: {"response": "Pozdravljeni! Kako vam lahko pomagam?"}
Frontend->>User: Prikaže AI sporočilo
Razumevanje vsakega koraka:
- Interakcija z uporabnikom: Oseba vpiše sporočilo v klepetalni vmesnik
- Obdelava frontenda: JavaScript zajame vnos in ga oblikuje v JSON
- Validacija API-ja: FastAPI samodejno preveri zahtevek s Pydantic modeli
- Integracija AI: Backend doda kontekst (sistemski poziv) in kliče AI storitev
- Obdelava odgovora: API prejme AI odgovor in ga lahko po potrebi spremeni
- Prikaz frontenda: JavaScript prikaže odgovor v klepetalnem vmesniku
Razumevanje arhitekture API-ja
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Pozdravljen AI!"}
FastAPI->>AI Function: call_llm(sporočilo, sistemski_napotki)
AI Function->>GitHub Models: API zahteva
GitHub Models->>AI Function: AI odgovor
AI Function->>FastAPI: odgovor besedilo
FastAPI->>Frontend: {"response": "Živjo! Kako vam lahko pomagam?"}
flowchart TD
A[Uporabniški Vnos] --> B[Preverjanje na Sprednji Strani]
B --> C[HTTP POST Zahteva]
C --> D[FastAPI Usmerjevalnik]
D --> E[Pydantic Preverjanje]
E --> F[Klic AI Funkcije]
F --> G[GitHub API Modelov]
G --> H[Obdelava Odziva]
H --> I[JSON Odziv]
I --> J[Posodobitev Sprednje Strani]
subgraph "Varnostna Plast"
K[CORS Vmesnik]
L[Okoljske Spremenljivke]
M[Ravnanje z Napakami]
end
D --> K
F --> L
H --> M
Ustvarjanje FastAPI aplikacije
Zgradimo API korak za korakom. Ustvarite datoteko api.py z naslednjo FastAPI kodo:
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Konfiguriraj beleženje
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Ustvari FastAPI aplikacijo
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Konfiguriraj CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Primerno konfiguriraj za produkcijo
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic modeli za validacijo zahtevkov/odgovorov
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:
# Izvleci in preveri sporočilo
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]}...")
# Pokliči AI storitev (opomba: call_llm naj bo asinhron za boljšo zmogljivost)
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)
Razumevanje implementacije FastAPI:
- Uvozi FastAPI za moderno funkcionalnost spletnega okvira in Pydantic za validacijo podatkov
- Ustvari samodejno API dokumentacijo (dosegljivo na
/docs, ko strežnik teče) - Omogoči CORS middleware za dovoljenje zahtevkov iz različnih izvorov frontenda
- Določi Pydantic modele za samodejno validacijo zahtevkov/odgovorov in dokumentacijo
- Uporablja asinhrone končne točke za boljšo zmogljivost ob sočasnih zahtevah
- Izvaja pravilne HTTP statusne kode in obravnavo napak z HTTPException
- Vključuje strukturirano beleženje za nadzor in odpravljanje težav
- Nudi kontrolno točko za preverjanje stanja storitve (health check)
Glavne prednosti FastAPI pred tradicionalnimi okviri:
- Samodejna validacija: Pydantic modeli zagotavljajo celovitost podatkov pred obdelavo
- Interaktivna dokumentacija: Obiščite
/docsza avtomatsko generirano in testabilno API dokumentacijo - Tipna varnost: Pythonove tipne namige preprečujejo napake v času izvajanja in izboljšujejo kakovost kode
- Asinhrona podpora: Obdeluje več AI zahtev hkrati brez blokad
- Zmganljivost: Zelo hitra obdelava zahtevkov za aplikacije v realnem času
Razumevanje CORS: varnostni varuh spleta
CORS (Cross-Origin Resource Sharing) je kot varnostnik v stavbi, ki preverja, če so obiskovalci dovoljeni za vstop. Razumimo, zakaj je to pomembno in kako vpliva na vašo aplikacijo.
Kaj je CORS in zakaj obstaja?
Problem: Predstavljajte si, da bi lahko katera koli spletna stran na vašo banko pošiljala zahtevke v vašem imenu brez vašega dovoljenja. To bi bil varnostni nočna mora! Brskalniki to preprečujejo po privzetku z "Enak izvor (Same-Origin) politiko".
Same-Origin politika: Brskalniki dovoljujejo spletnim stranem pošiljanje zahtevkov le na isti domeni, vratih in protokolu, s katerega so bile naložene.
Resnični primer: To je kot varnost v stanovanjski stavbi – samo prebivalci (isti izvor) imajo dostop. Če želite prijatelju (drug izvor) dovoliti obisk, morate varnost jasno obvestiti.
CORS v vašem razvojni okolju
Med razvojem frontend in backend tečeta na različnih vratih:
- Frontend:
http://localhost:3000(ali file://, če odprete HTML neposredno) - Backend:
http://localhost:5000
To se šteje kot "drugi izvori", čeprav sta na istem računalniku!
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # To brskalnikom pove: "Druge izvorne domene lahko zahtevajo podatke iz tega API-ja"
Kaj CORS nastavitve naredijo v praksi:
- Dodajo posebne HTTP glave v API odgovore, ki brskalniku povedo "zahtevek iz drugega izvora je dovoljen"
- Obravnavajo "preletne" (preflight) zahtevke (brskalniki včasih preverijo dovoljenja pred pošiljanjem pravega zahtevka)
- Preprečujejo strašno napako "blocked by CORS policy" v konzoli brskalnika
Varnost CORS: razvoj proti produkciji
# 🚨 Razvoj: Dovoli VSI izvori (udobno, vendar nesvarno)
CORS(app)
# ✅ Proizvodnja: Dovoli samo vaš določen domeno frontend-a
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Napredno: Različni izvori za različna okolja
if app.debug: # Način razvoja
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Način proizvodnje
CORS(app, origins=["https://yourdomain.com"])
Zakaj je to pomembno: V razvoju je CORS(app) kot puščena vhodna vrata – priročno, a ne varno. V produkciji želite natančno določiti, katera spletišča lahko komunicirajo z vašim API-jem.
Pogoste CORS situacije in rešitve
| Situacija | Problem | Rešitev |
|---|---|---|
| Lokalni razvoj | Frontend ne doseže backend | Dodajte CORSMiddleware v FastAPI |
| GitHub Pages + Heroku | Deployed frontend ne doseže API | Dodajte URL GitHub Pages v CORS izvore |
| Prilagojena domena | CORS napake v produkciji | Posodobite CORS izvore za vašo domeno |
| Mobilna aplikacija | Aplikacija ne doseže spletnega API-ja | Dodajte domeno aplikacije ali previdno uporabite * |
Nasvet: CORS glave lahko preverite v orodjih za razvijalce v zavihku Omrežje (Network) v vašem brskalniku. Poiščite glave, kot je Access-Control-Allow-Origin v odgovoru.
Obravnava napak in validacija
Opazite, kako naša API vključuje ustrezno ravnanje z napakami:
# Preverite, ali smo prejeli sporočilo
if not message:
return jsonify({"error": "Message field is required"}), 400
Ključna načela validacije:
- Preveri zahtevana polja pred obdelavo zahtevka
- Vrne smiselna sporočila o napakah v JSON obliki
- Uporabi primerne HTTP statusne kode (400 za napačne zahtevke)
- Nudi jasne povratne informacije za lažje odpravljanje težav frontend razvijalcem
Priprava in zagon vašega backend strežnika
Zdaj, ko imamo integracijo AI in FastAPI strežnik pripravljen, zaženimo vse skupaj. Postopek setup-a vključuje namestitev Python odvisnosti, konfiguracijo okoljskih spremenljivk in zagon razvojnega strežnika.
Priprava Python okolja
Nastavimo Python razvojno okolje. Virtualna okolja so kot ločeni projekti Manhattan projekta – vsak projekt dobi svoj izoliran prostor z določenimi orodji in odvisnostmi, kar preprečuje konflikte med projekti.
# Pomaknite se do vaše direktorije za backend
cd backend
# Ustvarite virtualno okolje (kot ustvarjanje čiste sobe za vaš projekt)
python -m venv venv
# Aktivirajte ga (Linux/Mac)
source ./venv/bin/activate
# Na Windows uporabite:
# venv\Scripts\activate
# Namestite dobre stvari
pip install openai fastapi uvicorn python-dotenv
Kaj smo pravkar naredili:
- Ustvarili majhen Python 'mehurček', kjer lahko nameščamo pakete brez vpliva na druge projekte
- Aktivirali ga, da terminal ve, da naj uporablja to specifično okolje
- Namestili bistvene pakete: OpenAI za AI magijo, FastAPI za spletni API, Uvicorn za zagon in python-dotenv za varno upravljanje skrivnosti
Ključne odvisnosti:
- FastAPI: Moderni, hiter spletni okvir z samodejno API dokumentacijo
- Uvicorn: Zelo hiter ASGI strežnik za FastAPI aplikacije
- OpenAI: Uradna knjižnica za integracijo GitHub modelov in OpenAI API-ja
- python-dotenv: Varen priklop okoljskih spremenljivk iz .env datotek
Konfiguracija okolja: varovanje skrivnosti
Preden zaženemo API, moramo govoriti o eni najpomembnejših lekcij v spletnem razvoju: kako ohraniti svoje skrivnosti resnično skrivne. Okoljske spremenljivke so kot varen trezor, ki mu ima dostop samo vaša aplikacija.
Kaj so okoljske spremenljivke?
Razmišljajte o njih kot o sefih za dragocenosti – tam dajete svoje vrednosti, dostop do njih pa imate samo vi (in vaša aplikacija). Namesto da občutljive podatke pišete neposredno v kodo (kjer jih vidi prav vsak), jih shranite varno v okolju.
Razlika je taka:
- Napačno: Pisati geslo na listku in ga prilepiti na zaslon
- Pravilno: Hraniti geslo v varnem upravitelju gesel, do katerega imate samo vi dostop
Zakaj so okoljske spremenljivke pomembne
# 🚨 NIKOLI NE DELAJTE TEGA - API ključ je viden vsem
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Vsakdo ga lahko ukrade!
base_url="https://models.github.ai/inference"
)
# ✅ DELAJTE TO - API ključ shranjen varno
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Do tega dostopa samo vaša aplikacija
base_url="https://models.github.ai/inference"
)
Kaj se zgodi, če skušate trdo kodirati skrivnosti:
- Razkritje v sistemu za verzioniranje: Vsakdo z dostopom do vašega Git repozitorija vidi vaš API ključ
- Javni repozitoriji: Če potisnete kodo na GitHub, je ključ viden vsem na internetu
- Deljenje z ekipo: Drugi razvijalci projekta dobijo dostop do vaše osebne API ključa
- Varnostne ranljivosti: Če nekdo ukrade vaš API ključ, lahko uporabi vaše AI kredite
Nastavitev vaše datoteke okolja (.env)
Ustvarite .env datoteko v vaši backend mapi. Ta datoteka shrani vaše skrivnosti lokalno:
# Datoteka .env - te datoteke nikoli ne smete dodati v Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
Razumevanje .env datoteke:
- Ena skrivnost na vrstico v formatu
KEY=value - Brez presledkov okoli znaka enakosti
- Brez narekovajev okoli vrednosti (običajno)
- Komentarji se začnejo z
#
Ustvarjanje vašega osebnega GitHub dostopnega žetona
Vaš GitHub žeton je kot posebno geslo, ki daje vaši aplikaciji dovoljenje za uporabo AI storitev GitHuba:
Korak za korakom izdelava žetona:
- Pojdite v GitHub Nastavitve → Developer settings → Personal access tokens → Tokens (classic)
- Kliknite "Generate new token (classic)"
- Nastavite potek veljavnosti (30 dni za testiranje, daljši čas za produkcijo)
- Izberite obsege dostopa: Označite "repo" in druge potrebne pravice
- Ustvarite žeton in ga takoj kopirajte (po tem ga ne vidite več!)
- Prilepite ga v vašo .env datoteko
# Primer, kako izgleda vaš žeton (to je lažno!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
Nalaganje okoljskih spremenljivk v Pythonu
import os
from dotenv import load_dotenv
# Naloži spremenljivke okolja iz datoteke .env
load_dotenv()
# Zdaj jih lahko varno dostopate
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"
)
Kaj ta koda počne:
- Naloži vašo .env datoteko in naredi spremenljivke dostopne za Python
- Preveri, ali je zahtevan žeton prisoten (dobra obravnava napak!)
- Vrže jasen error, če žeton manjka
- Uporablja žeton varno, brez izpostavljanja v kodi
Varnost Git-a: datoteka .gitignore
Vaša .gitignore datoteka Git-u pove, katere datoteke naj nikoli ne spremlja ali naloži:
# .gitignore - Dodajte te vrstice
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
Zakaj je to ključno: Ko dodate .env v .gitignore, bo Git ignoriral datoteko okolja in preprečil nenameren prenos vaših skrivnosti na GitHub.
Različna okolja, različne skrivnosti
Profesionalne aplikacije uporabljajo različne API ključe za različna okolja:
# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.production
GITHUB_TOKEN=your_production_token
DEBUG=False
Zakaj je to pomembno: Ne želite, da vaši razvojni eksperimenti vplivajo na produkcijsko AI kvoto, hkrati pa želite različne nivoje zaščite za različna okolja.
Zagon vašega razvojnega strežnika: oživitev FastAPI aplikacije
Zdaj pride razburljiv trenutek – zagon strežnika za razvoj FastAPI in ogled oživele integracije AI! FastAPI uporablja Uvicorn, bliskovito hiter ASGI strežnik, ki je posebej zasnovan za asinhrone Python aplikacije.
Razumevanje procesa zagona FastAPI strežnika
# Metoda 1: Neposredno izvajanje v Pythonu (vključuje samodejno ponovni zagon)
python api.py
# Metoda 2: Neposredna uporaba Uvicorna (več nadzora)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
Ko zaženete ta ukaz, se za kulisami odvija naslednje:
1. Python naloži vašo FastAPI aplikacijo:
- Uvozi vse potrebne knjižnice (FastAPI, Pydantic, OpenAI itd.)
- Naloži okoljske spremenljivke iz vaše datoteke
.env - Ustvari instanco FastAPI aplikacije z avtomatsko dokumentacijo
2. Uvicorn konfigurira ASGI strežnik:
- Poveže se na vrata 5000 z asinhronimi sposobnostmi obdelave zahtevkov
- Nastavi usmerjanje zahtevkov z avtomatsko validacijo
- Omogoči vroč ponovni zagon za razvoj (restart ob spremembah datotek)
- Ustvari interaktivno API dokumentacijo
3. Strežnik začne poslušati:
- Vaš terminal prikaže:
INFO: Uvicorn running on http://0.0.0.0:5000 - Strežnik lahko obdeluje več sočasnih AI zahtevkov
- Vaš API je pripravljen z avtomatsko dokumentacijo na
http://localhost:5000/docs
Kaj bi morali videti, ko vse deluje
$ 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.
Razumevanje izpisa FastAPI:
- Will watch for changes: Samodejni ponovni zagon omogočen za razvoj
- Uvicorn running: Visoko zmogljiv ASGI strežnik je aktiven
- Started reloader process: Opazovalec datotek za samodejne ponovne zagone
- Application startup complete: FastAPI aplikacija uspešno inicializirana
- Interactive docs available: Obiščite
/docsza avtomatsko API dokumentacijo
Testiranje FastAPI: Več zmogljivih pristopov
FastAPI ponuja več priročnih načinov za testiranje vašega API-ja, vključno z avtomatsko interaktivno dokumentacijo:
Metoda 1: Interaktivna API dokumentacija (Priporočeno)
- Odprite brskalnik in pojdite na
http://localhost:5000/docs - Videli boste Swagger UI z vsemi dokumentiranimi končnimi točkami
- Kliknite na
/hello→ "Try it out" → Vnesite testno sporočilo → "Execute" - Odziv si oglejte neposredno v brskalniku z ustreznim formatiranjem
Metoda 2: Osnovni preizkus z brskalnikom
- Pojdite na
http://localhost:5000za korensko točko - Pojdite na
http://localhost:5000/healthza preverjanje zdravja strežnika - S tem potrdite, da vaš FastAPI strežnik pravilno deluje
Metoda 2: Test prek ukazne vrstice (Napredno)
# Testirajte s curl (če je na voljo)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Pričakovani odgovor:
# {"response": "Pozdravljeni! Sem vaš AI pomočnik. Kako vam lahko danes pomagam?"}
Metoda 3: Python testni skript
# test_api.py - Ustvarite to datoteko za testiranje vaše API
import requests
import json
# Preizkusite API končno točko
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}
response = requests.post(url, json=data)
if response.status_code == 200:
result = response.json()
print("AI Response:", result['response'])
else:
print("Error:", response.status_code, response.text)
Odpravljanje pogostih težav pri zagonu
| Sporočilo o napaki | Kaj pomeni | Kako odpraviti |
|---|---|---|
ModuleNotFoundError: No module named 'fastapi' |
FastAPI ni nameščen | Zaženite pip install fastapi uvicorn v vašem virtualnem okolju |
ModuleNotFoundError: No module named 'uvicorn' |
ASGI strežnik ni nameščen | Zaženite pip install uvicorn v vašem virtualnem okolju |
KeyError: 'GITHUB_TOKEN' |
Okoljska spremenljivka ni najdena | Preverite vašo .env datoteko in klic load_dotenv() |
Address already in use |
Vrata 5000 so zasedena | Ubijte druge procese, ki uporabljajo vrata 5000 ali spremenite vrata |
ValidationError |
Podatki v zahtevku ne ustrezajo Pydantic modelu | Preverite, da je format vašega zahtevka skladen s pričakovano shemo |
HTTPException 422 |
Neobdelovljiv entitet | Validacija zahtevka ni uspela, preverite /docs za pravilen format |
OpenAI API error |
Avtentikacija AI storitve ni uspela | Preverite, da je vaš GitHub žeton pravilen in ima ustrezna dovoljenja |
Najboljše prakse razvoja
Vroči ponovni zagon: FastAPI z Uvicorn omogoča samodejni ponovni zagon, ko shranite spremembe Python datotek. To pomeni, da lahko takoj spremenite kodo in testirate brez ročnega ponovnega zagona.
# Omogoči eksplicitno vroče ponovno nalaganje
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True omogoča vroče ponovno nalaganje
Dnevniški zapisi za razvoj: Dodajte beleženje, da razumete, kaj se dogaja:
import logging
# Nastavite beleženje
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
@app.route("/hello", methods=["POST"])
def hello():
data = request.get_json()
message = data.get("message", "")
logger.info(f"Received message: {message}")
if not message:
logger.warning("Empty message received")
return jsonify({"error": "Message field is required"}), 400
try:
response = call_llm(message, "You are a helpful and friendly assistant.")
logger.info(f"AI response generated successfully")
return jsonify({"response": response})
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return jsonify({"error": "AI service temporarily unavailable"}), 500
Zakaj pomaga beleženje: Med razvojem lahko natančno vidite, kakšni zahtevki prihajajo, kakšni so odgovori AI in kje nastanejo napake. To pospeši odpravljanje težav.
Konfiguracija za GitHub Codespaces: razvoj v oblaku z lahkoto
GitHub Codespaces je kot močan računalnik za razvoj v oblaku, do katerega lahko dostopate iz kateregakoli brskalnika. Če delate v Codespaces, je nekaj dodatnih korakov, da je vaš backend dostopen frontend-u.
Razumevanje omrežja v Codespaces
V lokalnem razvojnem okolju vse teče na istem računalniku:
- Backend:
http://localhost:5000 - Frontend:
http://localhost:3000(ali file://)
V Codespaces teče vaše razvojno okolje na GitHub strežnikih, zato "localhost" pomeni nekaj drugega. GitHub samodejno ustvari javne URL-je za vaše storitve, a jih morate pravilno konfigurirati.
Korak po koraku konfiguracija Codespaces
1. Zaženite vaš backend strežnik:
cd backend
python api.py
Videli boste znano sporočilo o zagonu FastAPI/Uvicorn, a znotraj okolja Codespace.
2. Konfigurirajte vidnost vrat:
- Poiščite zavihek "Ports" v spodnjem panelu VS Code
- Najdite vrata 5000 na seznamu
- Z desnim klikom na vrata 5000
- Izberite "Port Visibility" → "Public"
Zakaj narediti vrata javna? Privzeto so Codespace vrata zasebna (dostopate jih le vi). Javna vrata omogočajo, da vaš frontend (ki teče v brskalniku) komunicira z backend-om.
3. Pridobite vaš javni URL: Po nastavitvi javnih vrat boste videli URL, kot je:
https://your-codespace-name-5000.app.github.dev
4. Posodobite konfiguracijo frontend-a:
// V vaši frontend datoteki app.js posodobite BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Razumevanje Codespace URL-jev
Codespace URL-ji sledijo predvidljivemu vzorcu:
https://[codespace-name]-[port].app.github.dev
Podrobna razlaga:
codespace-name: Enoličen identifikator vašega Codespace (pogosto vključuje vaše uporabniško ime)port: Številka vrat, na katerih teče vaša storitev (5000 za našo FastAPI aplikacijo)app.github.dev: GitHubova domena za Codespace aplikacije
Testiranje Codespace nastavitve
1. Preizkusite backend neposredno: Odprite vaš javni URL v novem zavihku brskalnika. Morali bi videti:
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
2. Test z orodji za razvijalce v brskalniku:
// Odprite konzolo brskalnika in preizkusite svoj API
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));
Primerjava Codespaces in lokalnega razvoja
| Vidik | Lokalni razvoj | GitHub Codespaces |
|---|---|---|
| Čas nastavitve | Daljši (namestitev Pythona, odvisnosti) | Trenuten (prednastavljeno okolje) |
| Dostop do URL-ja | http://localhost:5000 |
https://xyz-5000.app.github.dev |
| Konfiguracija vrat | Samodejna | Ročna (odpravljanje vrat) |
| Shranjevanje datotek | Lokalni računalnik | GitHub repozitorij |
| Sodelovanje | Težko deliti okolje | Enostavno deliti povezavo do Codespace |
| Zahteva internet | Samo za AI API kliče | Potrebno za vse |
Nasveti za delo v Codespaces
Okoljske spremenljivke v Codespaces:
Vaša .env datoteka deluje enako tudi v Codespaces, lahko pa nastavite okoljske spremenljivke neposredno v Codespace-u:
# Nastavi okoljsko spremenljivko za trenutno sejo
export GITHUB_TOKEN="your_token_here"
# Ali dodaj v svojo .bashrc za trajnost
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
Upravljanje vrat:
- Codespaces samodejno zazna, ko se aplikacija začne poslušati na vratih
- Lahko preusmerite več vrat hkrati (uporabno npr. če dodate bazo podatkov)
- Vrata ostanejo dostopna, dokler vaš Codespace deluje
Razvojni potek dela:
- Naredite spremembe v kodi v VS Code
- FastAPI samodejno ponovno naloži (zaradi Uvicorn reload načina)
- Takoj testirajte spremembe preko javnega URL-ja
- Ko ste pripravljeni, commitajte in pushajte
💡 Nasvet: Med razvojem si shranite zaznamek za vaš Codespace backend URL. Ker so imena Codespace stabilna, URL ostane enak, dokler uporabljate isti Codespace.
Izdelava frontend klepetalnega vmesnika: Kjer se ljudje srečujejo z AI
Zdaj bomo zgradili uporabniški vmesnik – tisti del, ki določa, kako ljudje komunicirajo z vašim AI pomočnikom. Tako kot je bila zasnova vmesnika originalnega iPhona osredotočena na intuitivno in naravno uporabo, tudi mi želimo kompleksno tehnologijo narediti enostavno razumljivo.
Razumevanje moderne frontend arhitekture
Naš klepetalni vmesnik bo t.i. "enostranska aplikacija" ali SPA. Namesto starega načina, kjer vsak klik naloži novo stran, se naša aplikacija gladko posodablja in instantno reagira:
Stare spletne strani: Kot branje fizične knjige – listate na popolnoma nove strani
Naša klepetalna aplikacija: Kot uporaba telefona – vse teče in se osvežuje brez prekinitve
graph TD
A[Uporabnik vpiše sporočilo] --> B[JavaScript zajame vnos]
B --> C[Preveri in oblikuj podatke]
C --> D[Pošlji na Backend API]
D --> E[Prikaži stanje nalaganja]
E --> F[Prejmi odgovor AI]
F --> G[Posodobi vmesnik klepeta]
G --> H[Pripravljen za naslednje sporočilo]
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(dogodek)
+callAPI(sporočilo)
+appendMessage(besedilo, vloga)
+escapeHtml(besedilo)
+scrollToBottom()
+setLoading(nalaganje)
}
ChatApp --> DOM : manipulira
ChatApp --> FastAPI : pošilja zahteve
Tri stebre frontend razvoja
Vsaka frontend aplikacija – od preprostih spletnih strani do zapletenih aplikacij kot Discord ali Slack – temelji na treh osnovnih tehnologijah. Pomislite nanje kot na temelj vsega, kar vidite in s čimer interaktirate na spletu:
HTML (Struktura): To je vaša osnova
- Določa, kateri elementi obstajajo (gumbi, področja za tekst, vsebniki)
- Daja pomen vsebini (to je naslov, to je obrazec itd.)
- Ustvari osnovno strukturo, na kateri je vse ostalo zgrajeno
CSS (Predstavitev): To je vaš notranji oblikovalec
- Naredi vse lepo (barve, pisave, razporeditve)
- Prilagodi se različnim velikostim zaslonov (telefon, prenosnik, tablica)
- Ustvari gladke animacije in vizualne odzive
JavaScript (Vedenje): To je vaš možgan
- Odziva se na dejanja uporabnikov (kliki, tipkanje, pomikanje)
- Komunicira z backend-om in posodablja stran
- Naredi vse interaktivno in dinamično
Pomislite na to kot arhitekturno zasnovo:
- HTML: Strukturni načrt (definiranje prostorov in odnosov)
- CSS: Estetski in okoljski dizajn (vizualni stil in uporabniška izkušnja)
- JavaScript: Mehanski sistemi (funkcionalnost in interaktivnost)
Zakaj je pomembna moderna JavaScript arhitektura
Naša klepetalna aplikacija bo uporabljala sodobne JavaScript vzorce, kakršne vidite v profesionalnih aplikacijah. Razumevanje teh konceptov vam bo pomagalo pri rasti kot razvijalec:
Arhitektura temelječa na razredih: Kodo bomo organizirali v razrede, kar je kot ustvarjanje načrtov za objekte
Async/Await: Sodobna metoda za delo z operacijami, ki trajajo (kot so API klici)
Dogodkovno vodeno programiranje: Aplikacija se odziva na uporabniške akcije (klike, pritiske tipk), ne teče v zanki
Manipulacija DOM-a: Dinamična posodobitev vsebine strani glede na uporabniške interakcije in API odgovore
Nastavitev strukture projekta
Ustvarite imenik frontend s to organizirano strukturo:
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
Razumevanje arhitekture:
- Ločuje skrb za strukturo (HTML), vedenje (JavaScript) in predstavitev (CSS)
- Ohranja preprosto strukturo datotek, ki je enostavna za navigacijo in spremembe
- Sledi najboljšim praksam spletnega razvoja za organizacijo in vzdrževanje
Gradnja HTML osnove: Semantična struktura za dostopnost
Začnimo s HTML strukturo. Sodobni spletni razvoj poudarja "semantični HTML" – uporabo HTML elementov, ki jasno opisujejo svoj namen, ne le videz. To naredi vašo aplikacijo dostopno za bralnike zaslona, iskalnike in druga orodja.
Zakaj je semantični HTML pomemben: Predstavljajte si, da nekomu po telefonu opisujete vašo klepetalno aplikacijo. Rekli bi "tam je glava s naslovom, glavno območje, kjer potekajo pogovori, in obrazec na dnu za vnos sporočil." Semantični HTML uporablja elemente, ki ustrezajo temu naravnemu opisu.
Ustvarite index.html s to premišljeno strukturirano označbo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat Assistant</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<header class="chat-header">
<h1>AI Chat Assistant</h1>
<p>Ask me anything!</p>
</header>
<main class="chat-messages" id="messages" role="log" aria-live="polite">
<!-- Messages will be dynamically added here -->
</main>
<form class="chat-form" id="chatForm">
<div class="input-group">
<input
type="text"
id="messageInput"
placeholder="Type your message here..."
required
aria-label="Chat message input"
>
<button type="submit" id="sendBtn" aria-label="Send message">
Send
</button>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
Razumevanje posameznega HTML elementa in njegovega namena:
Struktura dokumenta
<!DOCTYPE html>: Pove brskalniku, da gre za sodoben HTML5<html lang="en">: Določa jezik strani za bralnike zaslona in prevajalska orodja<meta charset="UTF-8">: Zagotavlja pravilno kodiranje znakov za mednarodni tekst<meta name="viewport"...>: Naredi stran odzivno na mobilnih napravah z nadzorom povečave in razmerja
Semantični elementi
<header>: Jasno označuje zgornji del s naslovom in opisom<main>: Določa primarno vsebino (kjer potekajo pogovori)<form>: Semantično pravilno za uporabniški vnos, omogoča pravilno navigacijo s tipkovnico
Funkcije za dostopnost
role="log": Sporoča bralnikom zaslona, da je to kronološki dnevnik sporočilaria-live="polite": Oznanja nova sporočila bralnikom zaslona brez prekinitvearia-label: Nudi opisne oznake za kontrole obrazcarequired: Brskalnik preveri, da uporabnik vnese sporočilo pred pošiljanjem
Integracija CSS in JavaScript
classatributi: Nudi povezave za stiliziranje s CSS (npr.chat-container,input-group)idatributi: Omogočajo JavaScriptu iskanje in manipulacijo specifičnih elementov- Postavitev skript: JavaScript datoteka naložena na koncu, tako da se HTML najprej naloži
Zakaj ta struktura deluje:
- Logičen potek: Glava → Glavna vsebina → Obrazec za vnos sledi naravnemu vrstnemu redu branja
- Dostopnost s tipkovnico: Uporabniki lahko z zavihkom prehajajo skozi vse interaktivne elemente
- Prijazno do bralnikov zaslona: Jasne točke orientacije in opisi za slabovidne uporabnike
- Mobilna odzivnost: Meta oznaka viewport omogoča prilagodljiv dizajn
- Postopen razcvet: Dela tudi, če CSS ali JavaScript ne uspe naložiti
Dodajanje interaktivnega JavaScript-a: Logika sodobne spletne aplikacije
Zdaj pa sestavimo JavaScript, ki oživi naš klepetalni vmesnik. Uporabili bomo moderne JavaScript vzorce, s katerimi se boste srečali pri profesionalnem spletnem razvoju, vključno z ES6 razredi, async/await in dogodkovno programiranjem.
Razumevanje moderne JavaScript arhitekture
Namesto pisanja proceduralne kode (vrste funkcij, ki se izvajajo ena za drugo), bomo ustvarili arhitekturo na osnovi razredov. Razred si predstavljajte kot načrt za ustvarjanje objektov – tako kot arhitektov načrt služi za gradnjo več hiš.
Zakaj uporabljati razrede za spletne aplikacije?
- Organizacija: Vsa sorodna funkcionalnost je združena skupaj
- Ponovna uporaba: Na isti strani lahko ustvarite več primerkov klepeta
- Vzdrževalnost: Lažje je odpravljati napake in spreminjati specifične funkcije
- Profesionalni standard: Ta vzorec uporabljajo ogrodja kot React, Vue in Angular
Ustvarite app.js z to moderno, dobro strukturirano JavaScript kodo:
// app.js - Logika sodobne klepetalne aplikacije
class ChatApp {
constructor() {
// Pridobite reference na DOM elemente, s katerimi bomo manipulirali
this.messages = document.getElementById("messages");
this.form = document.getElementById("chatForm");
this.input = document.getElementById("messageInput");
this.sendButton = document.getElementById("sendBtn");
// Tukaj konfigurirajte URL vašega strežnika
this.BASE_URL = "http://localhost:5000"; // Posodobite to za vaše okolje
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
// Nastavite poslušalce dogodkov, ko je aplikacija za klepet ustvarjena
this.initializeEventListeners();
}
initializeEventListeners() {
// Poslušajte oddajo obrazca (ko uporabnik klikne Pošlji ali pritisne Enter)
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Prav tako poslušajte tipko Enter v vhodnem polju (boljša uporabniška izkušnja)
this.input.addEventListener("keypress", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.handleSubmit(e);
}
});
}
async handleSubmit(event) {
event.preventDefault(); // Preprečite osveževanje strani ob oddaji obrazca
const messageText = this.input.value.trim();
if (!messageText) return; // Ne pošiljajte praznih sporočil
// Zagotovite uporabniku povratno informacijo, da se nekaj dogaja
this.setLoading(true);
// Takoj dodajte uporabnikovo sporočilo v klepet (optimistično UI)
this.appendMessage(messageText, "user");
// Počistite vhodno polje, da lahko uporabnik vpiše naslednje sporočilo
this.input.value = '';
try {
// Pokličite AI API in počakajte na odgovor
const reply = await this.callAPI(messageText);
// Dodajte AI odgovor v klepet
this.appendMessage(reply, "assistant");
} catch (error) {
console.error('API Error:', error);
this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
} finally {
// Ponovno omogočite vmesnik, ne glede na uspeh ali napako
this.setLoading(false);
}
}
async callAPI(message) {
const response = await fetch(this.API_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ message })
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.response;
}
appendMessage(text, role) {
const messageElement = document.createElement("div");
messageElement.className = `message ${role}`;
messageElement.innerHTML = `
<div class="message-content">
<span class="message-text">${this.escapeHtml(text)}</span>
<span class="message-time">${new Date().toLocaleTimeString()}</span>
</div>
`;
this.messages.appendChild(messageElement);
this.scrollToBottom();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
scrollToBottom() {
this.messages.scrollTop = this.messages.scrollHeight;
}
setLoading(isLoading) {
this.sendButton.disabled = isLoading;
this.input.disabled = isLoading;
this.sendButton.textContent = isLoading ? "Sending..." : "Send";
}
}
// Inicializirajte klepetalno aplikacijo ob nalaganju strani
document.addEventListener("DOMContentLoaded", () => {
new ChatApp();
});
Razumevanje posameznih konceptov JavaScript
Struktura ES6 razreda:
class ChatApp {
constructor() {
// To se izvede, ko ustvarite novo primerek ChatApp
// To je kot funkcija "setup" za vaš klepet
}
methodName() {
// Metode so funkcije, ki pripadajo razredu
// Lahko dostopajo do lastnosti razreda z uporabo "this"
}
}
Vzorec Async/Await:
// Stari način (paklenski vračilni klici):
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Sodobni način (async/await):
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
Dogodkovno programiranje: Namesto stalnega preverjanja, ali se je nekaj zgodilo, "poslušamo" dogodke:
// Ko je obrazec poslan, zaženi handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Ko je pritisnjena tipka Enter, zaženi tudi handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });
Manipulacija DOM-a:
// Ustvari nove elemente
const messageElement = document.createElement("div");
// Spremeni njihove lastnosti
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";
// Dodaj na stran
this.messages.appendChild(messageElement);
Varnost in najboljše prakse
Preprečevanje XSS:
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text; // To samodejno pobegne HTML
return div.innerHTML;
}
Zakaj je to pomembno: Če uporabnik vnese <script>alert('hack')</script>, ta funkcija zagotovi, da se to prikaže kot besedilo in ne izvrši kot koda.
Ravnanje z napakami:
try {
const reply = await this.callAPI(messageText);
this.appendMessage(reply, "assistant");
} catch (error) {
// Prikaži uporabniku prijazno napako namesto, da aplikacija crkne
this.appendMessage("Sorry, I'm having trouble...", "error");
}
Razmislek o uporabniški izkušnji:
- Optimiziran UI: Uporabnikovo sporočilo dodajte takoj, ne čakajte na odziv strežnika
- Stanja nalaganja: Onemogočite gumbe in prikažite "Pošiljam..." med čakanjem
- Avtomatski pomik: Vedno prikažite najnovejša sporočila
- Validacija vnosa: Ne pošiljajte praznih sporočil
- Tipkovni bližnjici: Tipka Enter pošlje sporočila (kot v pravih klepetalnicah)
Razumevanje poteka aplikacije
- Stran se naloži → sproži se dogodek
DOMContentLoaded→ ustvari senew ChatApp() - Izvede se konstruktor → pridobi sklice na DOM elemente → nastavi poslušalce dogodkov
- Uporabnik vpiše sporočilo → pritisne Enter ali klikne Pošlji → se zažene
handleSubmit - handleSubmit → Validira vnos → Prikaže stanje nalaganja → Kliče API
- API odgovori → Doda sporočilo AI v klepet → Ponovno omogoči vmesnik
- Pripravljen za novo sporočilo → uporabnik lahko nadaljuje klepet
Ta arhitektura je razširljiva – enostavno lahko dodate funkcije, kot so urejanje sporočil, nalaganje datotek ali več pogovorov brez prepisovanja osnovne strukture.
🎯 Pedagoški pregled: Moderna frontend arhitektura
Razumevanje arhitekture: Implementirali ste celotno enostransko aplikacijo z modernimi JavaScript vzorci. To predstavlja profesionalni nivo frontend razvoja.
Osnovni izrazi, ki jih obvladate:
- ES6 arhitektura razredov: Organizirana, vzdrževana struktura kode
- Vzorec Async/Await: Sodobno asinhrono programiranje
- Dogodkovno programiranje: Oblikovanje odzivnega uporabniškega vmesnika
- Najboljše prakse varnosti: Preprečevanje XSS in validacija vnosa
Povezava z industrijo: Vzorci, ki ste se jih naučili (arhitektura na osnovi razredov, asinhroni klici, manipulacija DOM-a) so temelj sodobnih ogrodij kot so React, Vue in Angular. Gradite z enakim arhitekturnim razmišljanjem kot profesionalni razvijalci.
Vprašanje za razmislek: Kako bi razširili to klepetalno aplikacijo za več pogovorov ali uporabniško prijavo? Razmislite o potrebnih arhitekturnih spremembah in razvoju strukture razredov.
Stilizacija vašega klepetalnega vmesnika
Zdaj ustvarimo moder, vizualno privlačen klepetalni vmesnik s CSS. Dobra stilizacija naredi vašo aplikacijo profesionalno in izboljša uporabniško izkušnjo. Uporabili bomo sodobne CSS lastnosti kot so Flexbox, CSS Grid in prilagojene spremenljivke za odziven in dostopen dizajn.
Ustvarite styles.css z naslednjimi celovitimi slogi:
/* 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;
}
}
Razumevanje CSS arhitekture:
- Uporaba CSS prilagojenih lastnosti (spremenljivk) za konsistentno tematiko in lažje vzdrževanje
- Izvajanje Flexbox postavitve za odziven dizajn in pravilno poravnavo
- Vključevanje gladkih animacij za pojavljanje sporočil brez odvračanja pozornosti
- Zagotavljanje vizualne razlikovanja med uporabniškimi sporočili, odgovori AI in stanji napak
- Podpora odzivnemu dizajnu za računalnike in mobilne naprave
- Upoštevanje dostopnosti z nastavitvami zmanjšane animacije in ustreznim kontrastom
- Ponudba temnega načina glede na uporabnikove sistemske nastavitve
Konfiguracija vaše URL za backend
Zadnji korak je posodobitev BASE_URL v vašem JavaScriptu, da ustreza vašemu strežniku backend:
// Za lokalni razvoj
this.BASE_URL = "http://localhost:5000";
// Za GitHub Codespaces (zamenjajte z vašo dejansko URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Kako določiti URL backend strežnika:
- Lokalni razvoj: Uporabite
http://localhost:5000, če poganjate frontend in backend lokalno - Codespaces: URL backend strežnika poiščite pod zavihkom Ports, ko odprete vrata 5000 v javnost
- Produkcija: Nadomestite z dejansko domeno, ko nameščate na gostovanje
💡 Nasvet za testiranje: Backend lahko testirate neposredno tako, da v brskalniku obiščete root URL. Tam bi morali videti pozdravno sporočilo vašega FastAPI strežnika.
Preizkušanje in namestitev
Zdaj, ko imate oba komponenta, frontend in backend, sestavljena, preizkusimo, ali vse skupaj deluje, in preučimo možnosti namestitve za deljenje vašega klepetalnega asistenta z drugimi.
Lokalni preizkusni postopek
Sledite tem korakom, da preizkusite vašo aplikacijo v celoti:
graph TD
A[Zaženi Backend Strežnik] --> B[Konfiguriraj Spremenljivke Okolja]
B --> C[Preizkusi API Končne Točke]
C --> D[Odpri Frontend v Brskalniku]
D --> E[Preizkusi Funkcionalnost Čata]
E --> F[Ponaglji Morebitne Težave]
Postopno testiranje:
-
Zaženite strežnik backend:
cd backend source venv/bin/activate # ali v venv\Scripts\activate na Windows python api.py -
Preverite, da API deluje:
- Odprite
http://localhost:5000v brskalniku - Videti bi morali pozdravno sporočilo vašega FastAPI strežnika
- Odprite
-
Odprite frontend:
- Pomaknite se v katalog za frontend
- Odprite
index.htmlv vašem brskalniku - Ali uporabite razširitev Live Server v VS Code za boljšo razvojno izkušnjo
-
Preizkusite klepetalno funkcionalnost:
- Vnesite sporočilo v vnosno polje
- Kliknite "Pošlji" ali pritisnite Enter
- Preverite, ali AI primerno odgovori
- Preverite brskalnikov konzolo za morebitne JavaScript napake
Reševanje pogostih težav
| Težava | Simptomi | Rešitev |
|---|---|---|
| Napaka CORS | Frontend ne doseže backend | Prepričajte se, da je FastAPI CORSMiddleware pravilno nastavljen |
| Napaka ključa API | Odgovori 401 Unauthorized | Preverite okoljsko spremenljivko GITHUB_TOKEN |
| Povezava zavrnjena | Omrežne napake na frontendu | Preverite URL backend strežnika in ali Flask strežnik teče |
| Brez AI odgovora | Prazni ali napake odgovori | Preverite zapise backend strežnika za morebitne omejitve API ali težave z avtentikacijo |
Pogosti koraki za odpravljanje napak:
- Preverite konzolo razvijalskih orodij v brskalniku za JavaScript napake
- Preverite v zavihku Network uspešne API klice in odgovore
- Preglejte izhod terminala backend strežnika za Python napake ali težave z API
- Potrdite, da so okoljske spremenljivke pravilno naložene in dostopne
📈 Časovni načrt vašega razvoja AI aplikacije
timeline
title Popolna Pot Razvoja AI Aplikacij
section Osnove AI
Razumevanje Generativne AI
: Razumeti koncepte prepoznavanja vzorcev
: Obvladati nadzor AI parametrov
: Naučiti se tehnik inženiringa pozivov
Integracija Modelov GitHub
: Obvladati platforme za AI storitve
: Varnostno upravljati avtorizacijo
: Optimizirati parametre modelov
section Razvoj Backend-a
Python API Arhitektura
: Graditi FastAPI aplikacije
: Izvajati asinhrone operacije
: Ustvariti varne končne točke
Integracija AI Storitev
: Povezati se z zunanjimi AI API-ji
: Upravljati omejitve hitrosti
: Uvesti meje za napake
section Obvlada Frontenda
Moderni JavaScript Vzorci
: Obvladati ES6 razredno arhitekturo
: Implementirati asinhrone/await poteke
: Graditi odzivne vmesnike
Uporabniška Izkušnja v Realnem Času
: Ustvariti dinamične klepetalne vmesnike
: Upravljati stanja nalaganja
: Optimizirati uporabniške interakcije
section Pripravljenost za Produkcijo
Varnost in Zmogljivost
: Uvesti varno upravljanje žetonov
: Preprečiti ranljivosti XSS
: Optimizirati zmogljivost API-jev
Profesionalna Namestitev
: Graditi razširljive arhitekture
: Ustvariti vzdržen kodo
: Dokumentirati razvojne procese
🎓 Mejniki diplome: Uspešno ste zgradili popolno AI-poganjano aplikacijo z uporabo istih tehnologij in arhitekturnih vzorcev kot moderni AI asistenti. Ta znanja predstavljajo stik tradicionalnega spletnega razvoja in vrhunske AI integracije.
🔄 Naslednje sposobnosti:
- Pripravljeni za raziskovanje naprednih AI ogrodij (LangChain, LangGraph)
- Opremeljeni za gradnjo multimodalnih AI aplikacij (besedilo, slika, glas)
- Zmožni implementirati vektorske podatkovne baze in iskalne sisteme
- Postavljeni temelji za strojno učenje in fino nastavitev AI modelov
Izziv GitHub Copilot Agent 🚀
Uporabite režim Agent, da dokončate naslednji izziv:
Opis: Izboljšajte klepetalnega asistenta z dodajanjem zgodovine pogovorov in ohranjanjem sporočil. Ta izziv vam bo pomagal razumeti upravljanje stanja v klepetalnih aplikacijah in implementacijo shranjevanja podatkov za boljšo uporabniško izkušnjo.
Navodilo: Spremenite aplikacijo, da vključuje zgodovino pogovorov, ki se ohranja med sejami. Dodajte funkcionalnost shranjevanja sporočil v lokalni pomnilnik, prikaz zgodovine ob nalaganju strani ter gumb "Počisti zgodovino". Prav tako implementirajte indikatorje tipkanja in časovne žige sporočil za bolj realistično izkušnjo klepeta.
Več o agent mode preberite tukaj.
Naloga: Zgradite svojega osebnega AI asistenta
Zdaj boste ustvarili svojo lastno implementacijo AI asistenta. Namesto običajnega prepisovanja primerov v vodiču je to priložnost, da uporabite koncepte pri izdelavi nečesa, kar odraža vaše interese in primere uporabe.
Zahteve projekta
Postavimo vašo strukturo projekta čisto in organizirano:
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
Osnovne naloge implementacije
Razvoj backend-a:
- Vzemite naš FastAPI kodo in jo naredite svojo
- Ustvarite unikatno osebnost AI – mogoče pomočnik za kuhanje, ustvarjalni partner pri pisanju ali spremljevalec pri učenju?
- Dodajte trdno ravnanje z napakami, da aplikacija ne pade ob napakah
- Napišite jasno dokumentacijo za vsakogar, ki želi razumeti delovanje API-ja
Razvoj frontend-a:
- Izdelajte klepetalni vmesnik, ki je intuitiven in prijazen
- Napišite čisto, moderno JavaScript kodo, na katero boste ponosni pred drugimi razvijalci
- Oblikujte lasten stil, ki odraža osebnost vaše AI – zabaven in barvit? Čist in minimalen? Odvisno od vas!
- Poskrbite, da bo dobro delovalo na telefonih in računalnikih
Zahteve po personalizaciji:
- Izberite unikatno ime in osebnost za svojega AI asistenta – nekaj, kar odraža vaše interese ali probleme, ki jih želite rešiti
- Prilagodite vizualno obliko, da se ujema z vibe vašega asistenta
- Napišite privlačno uvodno sporočilo, ki ljudi vabi v klepet
- Testirajte svojega asistenta z različnimi vrstami vprašanj, da vidite, kako odgovarja
Ideje za izboljšave (neobvezno)
Želite svoj projekt dvigniti na višji nivo? Tukaj je nekaj zabavnih idej, ki jih lahko preizkusite:
| Funkcija | Opis | Znanja, ki jih boste vadili |
|---|---|---|
| Zgodovina sporočil | Še vedno si zapomni pogovore tudi po osvežitvi strani | Delo z localStorage, upravljanje JSON |
| Indikatorji tipkanja | Prikaže "AI tipka..." med čakanjem na odgovor | CSS animacije, asinhrono programiranje |
| Časovni žigi sporočil | Prikazuje, kdaj je bilo sporočilo poslano | Oblikovanje datuma/ure, UX oblikovanje |
| Izvoz klepeta | Omogočite prenos pogovora | Delo s datotekami, izvoz podatkov |
| Preklapljanje teme | Stikalo med svetlo in temno obliko | CSS spremenljivke, uporabniške preference |
| Glasovni vnos | Dodajte pretvorbo govora v besedilo | Web API, dostopnost |
Testiranje in dokumentacija
Zagotavljanje kakovosti:
- Testirajte aplikacijo z raznimi vrstami vnosov in robnimi primeri
- Preverite odzivni dizajn na različnih velikostih zaslonov
- Preverite dostopnost z uporabo tipkovnice in bralnikov zaslona
- Validirajte HTML in CSS v skladu s standardi
Zahteve za dokumentacijo:
- Napišite README.md, ki pojasnjuje projekt in navodila za zagon
- Priložite posnetke zaslona klepetalnega vmesnika v akciji
- Dokumentirajte edinstvene funkcije ali prilagoditve, ki ste jih dodali
- Ponudite jasna navodila za namestitev drugim razvijalcem
Navodila za oddajo
Oddaja projekta:
- Celotna mapa projekta z vsemi izvorni kodami
- README.md s opisom projekta in navodili za nastavitve
- Posnetki zaslona, ki prikazujejo vašega klepetalnega asistenta v akciji
- Kratek razmislek o tem, kaj ste se naučili in s kakšnimi izzivi ste se soočili
Merila ocenjevanja:
- Funkcionalnost: Ali klepetalni asistent deluje kot pričakovano?
- Kakovost kode: Ali je koda dobro organizirana, komentirana in vzdrževana?
- Oblikovanje: Je vmesnik vizualno privlačen in uporabniku prijazen?
- Ustvarjalnost: Kako unikaten in personaliziran je vaš pristop?
- Dokumentacija: Ali so navodila za namestitev jasna in izčrpna?
💡 Nasvet za uspeh: Najprej se osredotočite na osnovne zahteve, nato dodajajte izboljšave, ko vse deluje. Osredotočite se na popolno osnovno izkušnjo, preden vključite napredne funkcije.
Rešitev
Bonus izzivi
Ste pripravljeni dvigniti svojega AI asistenta na višji nivo? Preizkusite te zahtevne izzive, ki vam bodo poglobili znanja o AI integraciji in spletnem razvoju.
Prilagoditev osebnosti
Prava čarovnija se zgodi, ko svojemu AI asistentu daste unikatno osebnost. Eksperimentirajte z različnimi sistemskimi pozivi za ustvarjanje specializiranih asistentov:
Primer profesionalnega asistenta:
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
Primer pomočnika za ustvarjalno pisanje:
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
Primer tehničnega mentorja:
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
Izboljšave frontenda
Preoblikujte svoj klepetalni vmesnik z naslednjimi vizualnimi in funkcionalnimi izboljšavami:
Napredne CSS funkcije:
- Izvedite gladke animacije in prehode sporočil
- Dodajte prilagojene oblike klepetalnih oblačkov z uporabo CSS oblik in gradientov
- Ustvarite animacijo indikatorja tipkanja za "razmišljanje" AI
- Oblikujte reakcije z emojiji ali sistem ocenjevanja sporočil
Izboljšave JavaScript-a:
- Dodajte tipkovne bližnjice (Ctrl+Enter za pošiljanje, Escape za brisanje)
- Implementirajte iskanje in filtriranje sporočil
- Ustvarite funkcijo izvoza pogovora (kot besedilo ali JSON)
- Dodajte samodejno shranjevanje v localStorage, da preprečite izgubo sporočil
Napredna AI integracija
Več osebnosti AI:
- Ustvarite padajoči seznam za preklapljanje med različnimi osebnostmi AI
- Shranjujte uporabnikovo izbrano osebnost v localStorage
- Izvedite preklapljanje konteksta, ki ohranja potek pogovora
Pametne funkcionalnosti odgovorov:
- Dodajte zavedanje konteksta pogovora (AI si zapomni prejšnja sporočila)
- Izvedite pametne predloge na podlagi teme pogovora
- Ustvarite gumbe za hitre odgovore na pogosta vprašanja
🎯 Cilj učenja: Ti dodatni izzivi vam pomagajo razumeti napredne vzorce spletnega razvoja in tehnike integracije umetne inteligence, ki se uporabljajo v produkcijskih aplikacijah.
Povzetek in nadaljnji koraki
Čestitke! Uspešno ste zgradili popolnega klepetalnega asistenta, ki ga poganja umetna inteligenca, popolnoma od začetka. Ta projekt vam je dal praktične izkušnje z modernimi tehnologijami spletnega razvoja in integracijo AI – veščine, ki so vse bolj cenjene v današnjem tehnološkem okolju.
Kaj ste dosegli
V celotnem tečaju ste osvojili več ključnih tehnologij in konceptov:
Razvoj backend-a:
- Integrirali ste GitHub API za modele za AI funkcionalnost
- Zgradili RESTful API z uporabo Flaska z ustreznim upravljanjem napak
- Izvedli varno avtentikacijo z uporabo okoljskih spremenljivk
- Konfigurirali CORS za zahteve med frontend in backend
Razvoj frontend-a:
- Ustvarili odziven klepetalni vmesnik s semantičnim HTML-jem
- Uporabili sodobni JavaScript z async/await in arhitekturo na osnovi razredov
- Oblikovali privlačen uporabniški vmesnik s CSS Grid, Flexbox in animacijami
- Dodali funkcije dostopnosti in načela odzivnega oblikovanja
Celovita integracija:
- Povezali frontend in backend prek HTTP API klicev
- Obvladovali interakcije uporabnikov v realnem času in asinhrono pretakanje podatkov
- Izvedli upravljanje napak in povratne informacije uporabnikom po vsej aplikaciji
- Testirali celoten potek aplikacije od vnosa uporabnika do odziva AI
Ključni učni izidi
mindmap
root((Spretnosti AI klepetalnice))
API Integracija
Avtentikacija
Ravnanje z napakami
Asinhrono programiranje
Spletni razvoj
HTML5 semantika
Moderna CSS
ES6+ JavaScript
Uporabniška izkušnja
Prilagodljiv dizajn
Dostopnost
Interakcija v realnem času
Razumevanje AI
Konstruiranje pozivov
Parametri modela
Potek pogovora
Ta projekt vas je seznanil z osnovami gradnje aplikacij, ki jih poganja umetna inteligenca, kar predstavlja prihodnost spletnega razvoja. Sedaj razumete, kako integrirati AI zmogljivosti v tradicionalne spletne aplikacije in ustvariti privlačne uporabniške izkušnje, ki delujejo inteligentno in odzivno.
Poklicne uporabe
Veščine, ki ste jih razvili v tem tečaju, so neposredno uporabne v sodobnih karierah razvoja programske opreme:
- Celostni spletni razvoj z uporabo sodobnih ogrodij in API-jev
- Integracija AI v spletne in mobilne aplikacije
- Oblikovanje in razvoj API-jev za arhitekture mikro-storitev
- Razvoj uporabniškega vmesnika s poudarkom na dostopnosti in odzivnem oblikovanju
- Prakse DevOps vključno s konfiguracijo okolja in nameščanjem
Nadaljujte svojo pot razvoja z umetno inteligenco
Nadaljnji koraki učenja:
- Raziščite bolj napredne AI modele in API-je (GPT-4, Claude, Gemini)
- Naučite se tehnik priprave ukazov za boljše odgovore AI
- Študirajte oblikovanje pogovorov in principe uporabniške izkušnje chatbotov
- Preučite varnost, etiko in odgovorne prakse razvoja AI
- Gradite zahtevnejše aplikacije z možnostjo pomnjenja pogovorov in zavedanjem konteksta
Napredne ideje za projekte:
- Večuporabniške klepetalnice z AI moderiranjem
- Klepetalniki za podporo strankam, ki jih poganja AI
- Izobraževalni tutorji z osebnim pristopom k učenju
- Sodelavci pri ustvarjalnem pisanju z različnimi AI osebnostmi
- Pomočniki za tehnično dokumentacijo za razvijalce
Začnite z GitHub Codespaces
Želite preizkusiti ta projekt v oblačnem razvojno okolju? GitHub Codespaces vam nudi popolno razvojno okolje v vašem brskalniku, idealno za eksperimentiranje z AI aplikacijami brez lokalnih zahtev po nastavitvi.
Namestitev razvojnega okolja
Korak 1: Ustvarite iz predloge
- Odprite Web Dev For Beginners repozitorij
- Kliknite "Use this template" v zgornjem desnem kotu (preverite, da ste prijavljeni v GitHub)
Korak 2: Zaženite Codespaces
- Odprite novoustanovljeni repozitorij
- Kliknite zeleno tipko "Code" in izberite "Codespaces"
- Izberite "Create codespace on main", da začnete razvojno okolje
Korak 3: Konfiguracija okolja
Ko se vaš Codespace naloži, boste imeli dostop do:
- Prednameščenih Python, Node.js in vseh potrebnih orodij za razvoj
- Vmesnika VS Code z razširitvami za spletni razvoj
- Terminala za zagon backend in frontend strežnikov
- Posredovanja vrat za preizkušanje vaših aplikacij
Kaj Codespaces nudi:
- Odpravlja težave z nastavitvijo in konfiguracijo lokalnega okolja
- Nudi dosledno razvojno okolje na različnih napravah
- Vključuje vnaprej konfigurirana orodja in razširitve za spletni razvoj
- Omogoča nemoteno integracijo z GitHubom za nadzor različic in sodelovanje
🚀 Nasvet za profesionalce: Codespaces je popoln za učenje in prototipiziranje AI aplikacij, saj samodejno ureja vse zapletene nastavitve okolja, kar vam omogoča, da se osredotočite na razvoj in učenje namesto na odpravljanje težav s konfiguracijo.
Omejitev odgovornosti: Ta dokument je bil preveden z uporabo AI prevajalske storitve Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v izvorni jezik se šteje za avtoritativni vir. Za pomembne informacije priporočamo strokovni prevod s strani človeka. Ne odgovarjamo za kakršne koli nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda.