localizeflow[bot]
c31f210f01
|
1 month ago | |
|---|---|---|
| .. | ||
| solution | 4 months ago | |
| README.md | 1 month ago | |
README.md
Jenga Msaidizi wa Chat kwa AI
Kumbuka kwenye Star Trek wanapotumia mazungumzo ya kawaida na kompyuta ya meli, wakimuuliza maswali magumu na kupata majibu yenye fikira? Kinachokuwa kama hadithi ya sayansi katika miaka ya 1960 sasa ni kitu ambacho unaweza kujenga kwa kutumia teknolojia za wavuti unazozijua tayari.
Katika somo hili, tutaunda msaidizi wa AI wa mazungumzo kwa kutumia HTML, CSS, JavaScript, na muunganisho wa nyuma. Utagundua jinsi ujuzi ule ule ambao umekuwa ukijifunza unaweza kuunganishwa na huduma zenye nguvu za AI ambazo zinaweza kuelewa muktadha na kutoa majibu yenye maana.
Fikiria AI kama kuwa na upatikanaji wa maktaba kubwa ambayo si tu inatafuta taarifa bali pia inaunda majibu yaliyo na maelezo yaliyounganishwa na maswali yako maalum. Badala ya kutafuta kupitia maelfu ya kurasa, unapata majibu ya moja kwa moja na yenye muktadha.
Muunganisho hufanyika kupitia teknolojia za wavuti zinazojulikana zinazofanya kazi pamoja. HTML huunda kiolesura cha mazungumzo, CSS hushughulikia muundo wa kuona, JavaScript inasimamia mwingiliano wa mtumiaji, na API ya nyuma inaunganisha kila kitu na huduma za AI. Hii ni sawa na jinsi sehemu tofauti za orkesta zinavyofanya kazi pamoja kuunda sinfonia.
Kwa msingi, tunajenga daraja kati ya mawasiliano ya asili ya binadamu na usindikaji wa mashine. Utajifunza utekelezaji wa kiufundi wa muunganisho wa huduma za AI na mifumo ya muundo inayofanya mwingiliano hisike kwa njia ya asili.
Mwisho wa somo hili, muunganisho wa AI utakuhisi si kama mchakato wa ajabu bali kama API nyingine unayoweza kutumia. Utatafuta mifumo ya msingi inayochochea programu kama ChatGPT na Claude, ukitumia kanuni zile zile za maendeleo ya wavuti ulizojifunza.
⚡ Unaweza Kufanya Nini Katika Dakika 5 Zijazo
Njia ya Kuanzisha Haraka kwa Waendelezaji Walioko Mbusy
flowchart LR
A[⚡ Dakika 5] --> B[Pata tokeni ya GitHub]
B --> C[Jaribu uwanja wa michezo wa AI]
C --> D[Nakili msimbo wa Python]
D --> E[Tazama majibu ya AI]
- Dakika 1: Tembelea GitHub Models Playground na tengeneza tokeni ya upatikanaji binafsi
- Dakika 2: Jaribu mwingiliano wa AI moja kwa moja kwenye kiolesura cha playground
- Dakika 3: Bonyeza kichupo cha "Code" na nakili kipande cha Python
- Dakika 4: Endesha msimbo kwa ndani kwa kutumia tokeni yako:
GITHUB_TOKEN=your_token python test.py - Dakika 5: Tazama jibu lako la kwanza la AI likiundwa kutoka kwa msimbo wako mwenyewe
Msimbo wa Jaribio la Haraka:
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)
Kwa Nini Hii ni Muhimu: Ndani ya dakika 5, utaona uchawi wa mwingiliano wa AI kwa programu. Hii inaonyesha kizuizi cha msingi kinachochochea kila programu ya AI unayotumia.
Hivi ndivyo mradi wako utakavyoonekana umemalizika:
🗺️ Safari Yako ya Kujifunza Kupitia Maendeleo ya Programu za AI
journey
title Kutoka Maendeleo ya Wavuti hadi Muunganiko wa AI
section Kuelewa Misingi ya AI
Gundua dhana za AI inayotengeneza: 4: You
Chunguza jukwaa la Models la GitHub: 6: You
Kamilisha vigezo na maagizo ya AI: 8: You
section Muunganiko wa Backend
Jenga seva ya API ya Python: 5: You
Tekeleza simu za kazi za AI: 7: You
Shughulikia shughuli zisizo za wakati mmoja: 8: You
section Maendeleo ya Mbele (Frontend)
Tengeneza interface ya mazungumzo ya kisasa: 6: You
Kamilisha mwingiliano wa wakati halisi: 8: You
Jenga uzoefu wa mtumiaji unaojibu: 9: You
section Maombi ya Kitaalamu
Tumia mfumo kamili wa AI: 7: You
Boresha mifumo ya utendaji: 8: You
Tengeneza app inayostahili uzalishaji: 9: You
Hatua Yako ya Mwisho: Mwisho wa somo hili, utakuwa umejenga programu kamilifu inayotumia AI kwa kutumia teknolojia na mifumo ileile inayochochea wasaidizi wa AI wa kisasa kama ChatGPT, Claude, na Google Bard.
Kuelewa AI: Kutoka Shaka hadi Utaalamu
Kabla ya kuingia kwenye msimbo, hebu kuelewa tunafanya kazi na nini. Ikiwa umewahi kutumia API hapo awali, unajua muundo wa msingi: tuma ombi, pokea jibu.
API za AI hufuata muundo ule ule, lakini badala ya kupata data iliyohifadhiwa tayari kutoka kwa hifadhidata, zinatengeneza majibu mapya kulingana na mifumo iliyojifunza kutoka kwa maandishi mengi sana. Fikiria kama tofauti kati ya mfumo wa katalogi wa maktaba na mkutubi mwenye maarifa anayeweza kuchanganya taarifa kutoka vyanzo vingi.
Nini Ni "AI Inayozalisha" Kweli?
Fikiria jinsi Jiwe la Rosetta lilivyoruhusu wataalamu kuelewa hieroglyphics za Misri kwa kutafuta mifumo kati ya lugha zinazoeleweka na zisizoeleweka. Mifano ya AI hufanya jambo kama hilo – huita patterns kutoka kwa maandishi mengi kuelewa jinsi lugha inavyofanya kazi, halafu hutumia mifano hiyo kutengeneza majibu yanayofaa kwa maswali mapya.
Hebu niifafanue kwa kulinganisha rahisi:
- Hifadhidata ya kawaida: Kama kuomba cheti chako cha kuzaliwa – unapata hati ile ile kila wakati
- Mfumo wa utafutaji: Kama kumuomba mkutubi kupata vitabu kuhusu paka – wanaonyesha kinachopatikana
- AI Inayozalisha: Kama kumuuliza rafiki mwenye maarifa kuhusu paka – wanakuambia mambo ya kuvutia kwa maneno yao wenyewe, yaliyobinafsishwa kwa kile unachotaka kujua
graph LR
A[Swali Lako] --> B[Mfano wa AI]
B --> C[Utambuzi wa Mifumo]
C --> D[Uundaji wa Yaliyomo]
D --> E[Jibu la Muktadha]
F[Data ya Mafunzo<br/>Vitabu, Makala, Tovuti] --> B
Jinsi Mifano ya AI Hujifunza (Toleo Rahisi)
Mifano ya AI hujifunza kupitia kufundishwa na seti kubwa za data zinazojumuisha maandishi kutoka vitabu, makala, na mazungumzo. Kupitia mchakato huu, hutambua mifumo katika:
- Jinsi mawazo yanavyopangwa katika mawasiliano yaliyoandikwa
- Ni maneno gani yanayotokea pamoja mara kwa mara
- Jinsi mazungumzo huendelea kawaida
- Tofauti za muktadha kati ya mawasiliano rasmi na yasiyo rasmi
Hii ni sawa na jinsi wanasayansi wa kale wanavyofasiri lugha za zamani: huchambua maelfu ya mifano kuelewa sarufi, msamiati, na muktadha wa kitamaduni, na hatimaye kuwa na uwezo wa kutafsiri maandishi mapya kwa kutumia mifumo hiyo iliyojifunza.
Kwa Nini GitHub Models?
Tunatumia GitHub Models kwa sababu ya kiutendaji – inatupa upatikanaji wa AI ya viwango vya biashara bila kuanzisha miundombinu yetu ya AI (ambayo, niamini, hutaki kufanya sasa hivi!). Fikiria kama kutumia API ya hali ya hewa badala ya kujaribu kutabiri hali ya hewa mwenyewe kwa kuweka vituo vya hali ya hewa kila mahali.
Hii ni "AI kama Huduma," na sehemu nzuri ni kwamba ni bure kuanza, hivyo unaweza kujaribu bila wasiwasi wa gharama kubwa.
graph LR
A[UI ya Chat ya Mbele] --> B[API Yako ya Backend]
B --> C[API za Mfano wa GitHub]
C --> D[Usindikaji wa Mfano wa AI]
D --> C
C --> B
B --> A
Tutatumia GitHub Models kwa muunganisho wetu wa nyuma, inayotoa upatikanaji wa uwezo wa AI wa kiwango cha kitaalamu kupitia kiolesura kinachopendelewa na waendelezaji. GitHub Models Playground ni mazingira ya majaribio ambapo unaweza kujaribu mifano tofauti ya AI na kuelewa uwezo wake kabla ya kuitekeleza katika msimbo.
🧠 Mfumo wa Maendeleo ya Programu za AI
mindmap
root((AI Development))
Understanding AI
Generative Models
Pattern Recognition
Content Generation
Context Understanding
Response Synthesis
AI Parameters
Temperature Control
Token Limits
Top-p Filtering
System Prompts
Backend Architecture
API Integration
GitHub Models
Authentication
Request Handling
Error Management
Python Infrastructure
FastAPI Framework
Async Operations
Environment Security
CORS Configuration
Frontend Experience
Chat Interface
Real-time Updates
Message History
User Feedback
Loading States
Modern Web Tech
ES6 Classes
Async/Await
DOM Manipulation
Event Handling
Professional Patterns
Security Best Practices
Token Management
Input Validation
XSS Prevention
Error Boundaries
Production Readiness
Performance Optimization
Responsive Design
Accessibility
Testing Strategies
Kanuni Msingi: Maendeleo ya programu za AI yanachanganya ujuzi wa maendeleo ya wavuti wa kawaida na muunganisho wa huduma za AI, kuunda programu za akili zinazohisi kuwa za asili na zinazojibu watumiaji vizuri.
Hapa ni kinachofanya playground kuwa muhimu:
- Jaribu mifano tofauti ya AI kama GPT-4o-mini, Claude, na mingine (zote ni bure!)
- Testi mawazo yako na maelekezo kabla hujaandika msimbo wowote
- Pata vipande vya msimbo vinavyotumika moja kwa moja kwa lugha unayopendelea ya programu
- Boresha mipangilio kama kiwango cha ubunifu na urefu wa jibu kuona jinsi zinavyoathiri matokeo
Baada ya kucheza kidogo, bonyeza kichupo cha "Code" na chagua lugha yako ya programu kupata msimbo wa utekelezaji utakao hitajiwa.
Kuanzisha Muunganisho wa Backend wa Python
Sasa tutaweka muunganisho wa AI kwa kutumia Python. Python ni nzuri kwa programu za AI kwa sababu ya sarufi yake rahisi na maktaba zenye nguvu. Tutaanza na msimbo kutoka GitHub Models playground kisha tuurekebishe ili kuwa kazi inayoweza kutumika tena na tayari kwa uzalishaji.
Kuelewa Utekelezaji wa Msingi
Unapopata msimbo wa Python kutoka playground, utapata kitu kinachofanana na hiki. Usijali kama kinaonekana kuwa kingi mwanzoni – tuitakaye kidogo kidogo:
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# Ili kuthibitisha na modeli utahitaji kuunda tokeni ya upatikanaji binafsi (PAT) kwenye mipangilio yako ya GitHub.
# Unda tokeni yako ya PAT kwa kufuata maelekezo hapa: 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)
Hivi ndivyo msimbo unavyofanya:
- Tunachukua zana tunazohitaji:
oskusoma mazingira ya mabadiliko naOpenAIkuzungumza na AI - Tunaanzisha mteja wa OpenAI kuelekea seva za AI za GitHub badala ya OpenAI moja kwa moja
- Tunathibitisha kwa kutumia tokeni maalum ya GitHub (zaidi kuhusu hayo baadae!)
- Tunapanga mazungumzo yetu na "maudhi" tofauti – fikiria kama kuweka onyesho kwa tamthilia
- Tunatuma ombi letu kwa AI na baadhi ya vigezo vya kufinyanga
- Tunachukua maandishi halisi ya jibu kutoka kwenye data yote inayorudi
Kuelewa Nafasi za Ujumbe: Mfumo wa Mazungumzo wa AI
Mazungumzo ya AI hutumia muundo maalum wenye “maudhi” tofauti yenye majukumu tofauti:
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
Fikiria kama kuongoza tamthilia:
- Nafasi ya mfumo: Kama maelekezo ya jukwaani kwa mhusika – inamuambia AI jinsi ya tabia, utu wake, na jinsi ya kujibu
- Nafasi ya mtumiaji: Swali halisi au ujumbe kutoka kwa mtu anayetumia programu yako
- Nafasi ya msaidizi: Jibu la AI (huli tuma, lakini linaonekana katika historia ya mazungumzo)
Mfano wa maisha halisi: Fikiria unamtambulisha rafiki kwa mtu kwenye karamu:
- Ujumbe wa mfumo: "Huyu ni rafiki yangu Sarah, ni daktari mzuri wa kuelezea dhana za matibabu kwa maneno rahisi"
- Ujumbe wa mtumiaji: "Unaweza kufafanua jinsi chanjo zinavyofanya kazi?"
- Jibu la msaidizi: Sarah anajibu kama daktari mkarimu, si kama mwanasheria au mpishi
Kuelewa Vigezo vya AI: Kufinyanga Tabia ya Jibu
Vigezo vya nambari katika API za AI vinadhibiti jinsi mfano unavyotengeneza majibu. Mipangilio hii inakuwezesha kurekebisha tabia ya AI kwa matumizi tofauti:
Joto (0.0 hadi 2.0): Diali ya Ubunifu
Inafanya nini: Inadhibiti ni kiasi gani majibu ya AI yatakuwa ya ubunifu au yanayoweza kutabirika.
Fikiria kama kiwango cha kuigiza kwa mwanamuziki wa jazz:
- Joto = 0.1: Kuimba melodi ile ile kila mara (inayoweza kutabirika sana)
- Joto = 0.7: Kuongeza mabadiliko ya ladha huku ukibaki waeleweke (uwezo wa ubunifu wa wastani)
- Joto = 1.5: Jazz ya majaribio kamili yenye miondoko isiyotabirika (ubunifu mkubwa)
# Majibu yanayoweza kutabirika sana (mzuri kwa maswali ya ukweli)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Takriban kila mara atasema "4"
)
# Majibu ya ubunifu (mzuri kwa kuibua mawazo)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Atatengeneza hadithi za kipekee, zisizotarajiwa
)
Juu ya Tokens (1 hadi 4096+): Kidhibiti cha Urefu wa Jibu
Inafanya nini: Inaweka kikomo juu ya urefu wa jibu la AI.
Fikiria tokens kama maneno kwa takriban (kati ya token moja = karibu maneno 0.75 kwa Kiingereza):
- max_tokens=50: Fupi na tamu (kama ujumbe mfupi)
- max_tokens=500: Aya nzuri au mbili
- max_tokens=2000: Maelezo ya kina yenye mifano
# Majibu mafupi na ya wazi
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Inalazimisha maelezo mafupi
)
# Majibu ya kina na ya kina
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Inaruhusu maelezo ya kina pamoja na mifano
)
Top_p (0.0 hadi 1.0): Kigezo cha Kuzingatia
Inafanya nini: Inadhibiti jinsi AI inavyolingania na majibu yanayoweza kutokea zaidi.
Picha inaonyesha AI akiwa na msamiati mkubwa, umesawazishwa kwa uwezekano wa kila neno:
- top_p=0.1: Inazingatia maneno 10% ya juu yenye uwezekano mkubwa zaidi (ilenye makini sana)
- top_p=0.9: Inazingatia 90% ya maneno yanayowezekana (zaidi ya ubunifu)
- top_p=1.0: Inazingatia yote (tofauti kubwa zaidi)
Kwa mfano: Ukiuliza "Anga ni kawaida..."
- Top_p ya chini: Kusema "buluu" kabisa bila shaka
- Top_p ya juu: Inaweza kusema "buluu", "mawingu", "kubwa", "kubadilika", "mzuri", n.k.
Kuunganisha Pamoja: Mchanganyiko wa Vigezo kwa Matumizi Tofauti
# Kwa majibu ya kweli, ya kuzingatia (kama roboti wa hati)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# Kwa msaada wa uandishi wa ubunifu
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# Kwa majibu ya mazungumzo, yenye msaada (yenye uwiano)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
quadrantChart
title Mkataba wa Uboreshaji wa Vigezo vya AI
x-axis Ubunifu Mdogo --> Ubunifu Mkubwa
y-axis Jibu Fupi --> Jibu Refu
quadrant-1 Maudhui ya Ubunifu
quadrant-2 Uchambuzi wa Kina
quadrant-3 Taarifa za Haraka
quadrant-4 AI ya Mazungumzo
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]
Kuelewa kwa nini vigezo hivi ni muhimu: Programu tofauti zinahitaji aina tofauti za majibu. Bot wa huduma kwa wateja anatakiwa kuwa thabiti na wa ukweli (joto la chini), wakati msaidizi wa uandishi wa ubunifu anatakiwa kuwa wa mawazo na mabadiliko (joto la juu). Kuelewa vigezo hivi kunakupa udhibiti juu ya utu na mtindo wa jibu wa AI yako.
**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))
Kuelewa kazi hii iliyoboreshwa:
- Inakubali vigezo viwili: maelekezo ya mtumiaji na ujumbe wa mfumo wa hiari
- Inatoa ujumbe wa mfumo wa msingi kwa tabia ya msaidizi kwa ujumla
- Inatumia aina za Python kwa usahihi kwa ajili ya nyaraka bora za msimbo
- Inajumuisha maelezo ya kina ya kazi na vigezo vyake
- Inarejesha maudhui ya jibu tu, kufanya iwe rahisi kutumia katika API yetu ya wavuti
- Inadumisha vigezo vile vile vya mfano kwa tabia thabiti ya AI
Uchawi wa Maelekezo ya Mfumo: Kuprogramu Utu wa AI
Ikiwa vigezo vinadhibiti jinsi AI inavyofikiria, maelekezo ya mfumo yanadhibiti ni nani AI anayejiamini kuwa. Hii ni mojawapo ya sehemu za kuvutia zaidi za kufanya kazi na AI – unampa AI utu kamili, kiwango cha utaalamu, na mtindo wa mawasiliano.
Fikiria maelekezo ya mfumo kama kung'oa wauigizaji tofauti kwa majukumu tofauti: Badala ya kuwa na msaidizi mmoja wa kawaida, unaweza kuunda wataalamu maalum kwa hali tofauti. Unahitaji mwalimu mvumilivu? Mshirika wa ubunifu? Mshauri wa biashara asiye na upotovu? Badilisha tu maelekezo ya mfumo!
Kwa Nini Maelekezo ya Mfumo Ni Yenye Nguvu
Sehemu ya kuvutia: mifano ya AI imetengenezwa kwa mazungumzo mengi ambapo watu hukumbatia majukumu na viwango vya utaalamu tofauti. Unapompa AI jukumu maalum, ni kama kuwasha swichi inayochochea mifumo yote hiyo iliyojifunza.
Ni kama utendaji wa kina kwa AI: Mwambie mwigizaji "wewe ni profesa mzee mwenye busara" na uone jinsi wanavyobadilisha mkao, msamiati, na tabia zao. AI hufanya kitu kinachofanana sana na mifumo ya lugha.
Kuunda Maelekezo Bora ya Mfumo: Sanaa na Sayansi
Muundo wa maelekezo bora ya mfumo:
- Jukumu/Utu: AI ni nani?
- Utaalamu: Anajua nini?
- Mtindo wa mawasiliano: Anazungumza vipi?
- Maelekezo maalum: Angalau atazingatia nini?
# ❌ Amri ya mfumo isiyoeleweka
"You are helpful."
# ✅ Amri ya mfumo yenye maelezo, yenye ufanisi
"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."
Mifano ya Maelekezo ya Mfumo kwa Muktadha
Tuwone jinsi maelekezo tofauti ya mfumo yanavyounda utu tofauti kabisa wa AI:
# Mfano 1: Mwalimu Muvumilivu
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.
"""
# Mfano 2: Mshirikishi Mbunifu
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.
"""
# Mfano 3: Mshauri Mkakati wa Biashara
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.
"""
Kuona Maelekezo ya Mfumo Kazi
Tujaribu swali lile lile na maelekezo tofauti ya mfumo kuona tofauti kubwa:
Swali: "Ninawezaje kushughulikia uthibitishaji wa mtumiaji katika app yangu ya wavuti?"
# Kwa maelekezo ya mwalimu:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Jibu la kawaida: "Swali zuri! Hebu tugawanye uthibitishaji katika hatua rahisi.
# Fikiria kama mlinzi wa klabu ya usiku anayeangalia kitambulisho..."
# Kwa maelekezo ya biashara:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Jibu la kawaida: "Kwa mtazamo wa kimkakati, uthibitishaji ni muhimu kwa
# imani ya mtumiaji na uzingatiaji wa sheria. Acha nitoe muundo ukizingatia usalama,
# uzoefu wa mtumiaji, na uwezekano wa kupanuka..."
Mbinu Zinazopiga Kufika za Maelekezo ya Mfumo
1. Kuweka Muktadha: Mpa AI taarifa za awali
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. Kupangilia Matokeo: Mwambie AI jinsi ya kupanga majibu
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. Kuweka Vizingiti: Eleza kile ambacho AI haipaswi kufanya
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.
"""
Kwa Nini Hii Inahusu Msaidizi Wako wa Chat
Kuelewa maelekezo ya mfumo kunakupa nguvu kubwa ya kuunda wasaidizi maalum wa AI:
- Bot ya huduma kwa wateja: Msaidizi, mvumilivu, anayejuwa sera
- Mwalimu wa kujifunza: Anayehimiza, hatua kwa hatua, anathibitisha kuelewa
- Mshirika mbunifu: Mzuri katika kufikiria, huongeza mawazo, huuliza "je, vipi?"
- Mtaalamu wa kiufundi: Sahihi, ana maelezo, anayeangalia usalama
Mwelekeo muhimu: Haujui tu kuwaita API ya AI – unaunda utu maalum wa AI unaotumikia matumizi yako maalum. Hii ndiyo inayofanya programu za kisasa za AI kuonekana zimebinafsishwa na zikiwa na manufaa badala ya za kawaida.
🎯 Ukaguzi wa Kitaalamu: Kuprogramu Utu wa AI
Acha na Fikiria: Umejifunza programu za utu wa AI kupitia maelekezo ya mfumo. Hii ni ujuzi wa msingi katika maendeleo ya programu za kisasa za AI.
Tathmini Haraka ya Kibinafsi:
- Je, unaweza kueleza tofauti kati ya maelekezo ya mfumo na ujumbe wa kawaida wa mtumiaji?
- Je, tofauti kati ya vigezo vya joto na top_p ni ipi?
- Je, ungeundaje maelekezo ya mfumo kwa matumizi maalum (kama mwalimu wa kupanga programu)?
Uhusiano wa Dunia halisi: Mbinu za maelekezo ya mfumo ulizojifunza hutumika katika kila programu kuu ya AI - kuanzia msaada wa uandishi wa GitHub Copilot hadi kiolesura cha mazungumzo cha ChatGPT. Unatambua mifumo ile ile inayotumiwa na timu za bidhaa za AI katika makampuni makubwa ya teknolojia.
Swali la Changamoto: Unawezaje kubuni utu tofauti wa AI kwa aina tofauti za watumiaji (mwanzo dhidi ya mtaalamu)? Fikiria jinsi mfano huo huo wa AI unavyoweza kuhudumia hadhira tofauti kupitia uhandisi wa maelekezo.
Kujenga Web API kwa FastAPI: Kituo chako cha Mawasiliano ya AI ya Ufanisi Mno
Sasa tuanze kujenga backend inayounganisha frontend yako na huduma za AI. Tutatumia FastAPI, fremu ya kisasa ya Python inayobobea katika ujenzi wa API za programu za AI.
FastAPI inatoa faida kadhaa kwa mradi huu: msaada wa async ukiwezesha kushughulikia maombi mengi sambamba, utengenezaji wa moja kwa moja wa nyaraka za API, na utendaji bora. Server yako ya FastAPI inafanya kazi kama mpatanishi anayepokea maombi kutoka frontend, kuwasiliana na huduma za AI, na kurudisha majibu yaliyopangwa.
Kwa Nini FastAPI Kwa Programu za AI?
Huenda unajiuliza: "Siwezi tu kuitwa AI moja kwa moja kutoka JavaScript ya frontend yangu?" au "Kwa nini FastAPI badala ya Flask au Django?" Maswali mazuri!
Hapa ndio sababu FastAPI ni bora kwa tunachojenga:
- Async kwa default: Inaweza kushughulikia maombi mengi ya AI kwa wakati mmoja bila kuziba
- Nyaraka moja kwa moja: Tembelea
/docsupate ukurasa mzuri wa nyaraka za API zenye mwingiliano bure - Uthibitishaji uliojengewa ndani: Hugundua makosa kabla hayajasababisha matatizo
- Haraka sana: Moja ya fremu za Python zenye kasi zaidi
- Python ya kisasa: Inatumia vipengele vyote vya hivi karibuni vya Python
Na hapa ndio kwanini tunahitaji backend kabisa:
Usalama: Ufunguo wako wa API ya AI ni kama nenosiri – ukiuweka kwenye JavaScript ya frontend, mtu yeyote anayehakikisha chanzo cha tovuti yako anaweza kuiba na kutumia mikopo yako ya AI. Backend huhifadhi habari nyeti salama.
Kudhibiti Kasi na Udhibiti: Backend inakusaidia kudhibiti mara ngapi watumiaji wanaweza kutuma maombi, kutekeleza uthibitishaji wa watumiaji, na kuongeza rejista ya matumizi.
Usindikaji Data: Huenda unataka kuhifadhi mazungumzo, kuchuja maudhui yasiyofaa, au kuunganisha huduma nyingi za AI. Backend ndio mahali hii mantiki inakuwa.
Muundo unafanana na mfano wa mteja-serveri:
- Frontend: Tabaka la kiolesura cha mtumiaji kwa mwingiliano
- Backend API: Tabaka la usindikaji wa maombi na kupitisha
- Huduma ya AI: Utambuzi wa nje na uzalishaji wa majibu
- Mabadiliko ya Mazingira: Usanidi salama na uhifadhi wa nyaraka za siri
Kuelewa Mtiririko wa Ombi-Jibu
Tufuate kinachoendelea wakati mtumiaji anapotuma ujumbe:
sequenceDiagram
participant User as 👤 Mtumiaji
participant Frontend as 🌐 Mbele ya Mbele
participant API as 🔧 Seva ya FastAPI
participant AI as 🤖 Huduma ya AI
User->>Frontend: Andika "Hello AI!"
Frontend->>API: POST /hello {"message": "Hello AI!"}
Note over API: Inathibitisha ombi<br/>Inaongeza kiito mfumo
API->>AI: Inatuma ombi lililopangwa
AI->>API: Inarudisha jibu la AI
Note over API: Inachakata jibu<br/>Inaandika mazungumzo
API->>Frontend: {"response": "Hello! Naweza kusaidia vipi?"}
Frontend->>User: Inaonyesha ujumbe wa AI
Kuelewa kila hatua:
- Mwingiliano wa mtumiaji: Mtu anaandika katika kiolesura cha mazungumzo
- Usindikaji wa frontend: JavaScript inachukua maingizo na kuyaweka katika muundo wa JSON
- Uthibitishaji wa API: FastAPI inathibitisha maombi moja kwa moja kwa kutumia mifano ya Pydantic
- Uingizaji wa AI: Backend inaongeza muktadha (maelekezo ya mfumo) na kuita huduma ya AI
- Ushughulikiaji wa jibu: API inapokea jibu la AI na inaweza kulibadilisha kama ni lazima
- Onyesho la frontend: JavaScript inaonyesha jibu kwenye kiolesura cha mazungumzo
Kuelewa Muundo wa API
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Hujambo AI!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: Ombi la API
GitHub Models->>AI Function: Jibu la AI
AI Function->>FastAPI: maandishi ya jibu
FastAPI->>Frontend: {"response": "Hujambo! Naweza kusaidia vipi?"}
flowchart TD
A[Ingizo la Mtumiaji] --> B[Uthibitishaji wa Mbele]
B --> C[Ombi la HTTP POST]
C --> D[Router ya FastAPI]
D --> E[Uthibitishaji wa Pydantic]
E --> F[Simu ya Kazi ya AI]
F --> G[API za Modeli za GitHub]
G --> H[Usindikaji wa Majibu]
H --> I[Jibu la JSON]
I --> J[Usasishaji wa Mbele]
subgraph "Tabaka la Usalama"
K[Kati ya CORS]
L[Hali za Mazingira]
M[Ushughulikiaji wa Makosa]
end
D --> K
F --> L
H --> M
Kuunda Programu ya FastAPI
Tujenge API yetu hatua kwa hatua. Tengeneza faili liitwalo api.py na msimbo unaofuata wa FastAPI:
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Sanidi uandikishaji logi
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Unda programu ya FastAPI
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Sanidi CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Sanidi ipasavyo kwa ajili ya uzalishaji
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Mifano ya Pydantic kwa uthibitishaji wa ombi/jibu
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:
# Toa na thibitisha ujumbe
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]}...")
# Piga huduma ya AI (kumbuka: call_llm inapaswa kufanywa async kwa utendaji bora)
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)
Kuelewa utekelezaji wa FastAPI:
- Inaagiza FastAPI kwa utendaji wa fremu ya wavuti ya kisasa na Pydantic kwa uthibitishaji wa data
- Inaunda nyaraka za API moja kwa moja (zinapatikana kwenye
/docswakati server inapoanza) - Inawezeshwa CORS middleware kuruhusu maombi ya frontend kutoka asili tofauti
- Inaeleza mifano ya Pydantic kwa uthibitishaji wa maombi/majibu na nyaraka za moja kwa moja
- Inatumia maeneo async kwa utendaji bora na maombi mengi sambamba
- Inatekeleza misimbo sahihi ya hali za HTTP na usimamizi wa makosa kwa HTTPException
- Inajumuisha uandikishaji uliopangwa kwa ajili ya ufuatiliaji na utatuzi wa matatizo
- Inatoa sehemu ya ukaguzi wa afya kwa kufuatilia hali ya huduma
Faida kuu za FastAPI dhidi ya fremu za kawaida:
- Uthibitishaji moja kwa moja: Mifano ya Pydantic huhakikisha usahihi wa data kabla ya usindikaji
- Nyaraka zenye mwingiliano: Tembelea
/docskupata nyaraka za API zinazotengenezwa na zinaweza kujaribiwa - Usalama wa aina: Vidokezo vya aina za Python hupunguza makosa ya wakati wa utekelezaji na kuboresha ubora wa msimbo
- Msaada wa async: Hudumia maombi mengi ya AI kwa wakati mmoja bila kuziba
- Utendaji: Usindikaji wa maombi kwa kasi kubwa kwa programu zinazotegemea wakati halisi
Kuelewa CORS: Mlinzi wa Usalama wa Wavuti
CORS (Cross-Origin Resource Sharing) ni kama mlinzi wa usalama kwenye jengo ambaye hakuangalia kama wageni wanaruhusiwa kuingia. Tuelewe kwa nini hii ni muhimu na jinsi inavyoathiri programu yako.
CORS ni Nini na Kwa Nini Ipo?
Tatizo: Fikiria kama tovuti yoyote ingekuwa na uwezo wa kutuma maombi kwenye tovuti ya benki yako kwa niaba yako bila idhini yako. Hii ingekuwa shida kubwa ya usalama! Vivinjari huzuia hili kwa kutumia "Sera ya Asili Ileile."
Sera ya Asili Ileile: Vivinjari huruhusu kuruhusu kuruka maombi kutoka kwenye tovuti zenye eneo, bandari, na itifaki ile ile waliyoanzia kupakiwa.
Mfano wa dunia halisi: Ni kama usalama wa nyumba ya ghorofa – wakazi tu (asilimia ile ile) wanaruhusiwa kuingia. Ukitaka kuruhusu rafiki (asilimia tofauti) kutembelea, lazima umwambie mlinzi waziwazi ni sawa.
CORS Katika Mazingira Yako ya Maendeleo
Wakati wa maendeleo, frontend na backend zako zinafanya kazi katika bandari tofauti:
- Frontend:
http://localhost:3000(au file:// ikiwa unafungua HTML moja kwa moja) - Backend:
http://localhost:5000
Hizi zinachukuliwa kuwa "asilimia tofauti" ingawa ziko kwenye kompyuta ile ile!
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # Hii inawaambia vivinjari: "Ni sawa kwa asili nyingine kuomba huduma kwa API hii"
Kifanikio cha usanidi wa CORS kwa vitendo:
- Inaongeza vichwa maalum vya HTTP kwenye majibu ya API vinavyoambia vivinjari "ombi hili la asili tofauti linaruhusiwa"
- Inashughulikia maombi ya "preflight" (vivinjari mara nyingine huchunguza ruhusa kabla ya kutuma ombi halisi)
- Inazuia kosa la "kuzuia sera ya CORS" ambalo linapotokea kwenye koni ya kivinjari chako
Usalama wa CORS: Maendeleo vs Uzalishaji
# 🚨 Maendeleo: Inaruhusu vyanzo vyote (rahisi lakini hatari)
CORS(app)
# ✅ Uzalishaji: Ruhusu tu eneo lako la frontend lililobainishwa
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Kiwango cha juu: Vyanzo tofauti kwa mazingira tofauti
if app.debug: # Hali ya maendeleo
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Hali ya uzalishaji
CORS(app, origins=["https://yourdomain.com"])
Kwa nini hii ni muhimu: Katika maendeleo, CORS(app) ni kama kuacha mlango wa mbele wazi – ndio rahisi lakini si salama. Katika uzalishaji, unataka kutaja ni tovuti gani hasa zinaweza kuongea na API yako.
Hali za Kawaida za CORS na Suluhisho
| Hali | Tatizo | Suluhisho |
|---|---|---|
| Maendeleo ya Ndani (Local Development) | Frontend haiwezi kufikia backend | Ongeza CORSMiddleware kwenye FastAPI |
| GitHub Pages + Heroku | Frontend iliyowekwa haitumii API | Ongeza URL ya GitHub Pages kwenye asili za CORS |
| Domeni Maalum | Makosa ya CORS uzalishaji | Sasisha asili za CORS kulingana na domeni yako |
| Programu ya Simu | Programu haiwezi kufikia API ya wavuti | Ongeza domeni ya programu yako au tumia * kwa uangalifu |
Ushauri mzuri: Unaweza kuangalia vichwa vya CORS kwenye zana za Watengenezaji wa kivinjari chako chini ya kichupo cha Mtandao. Tafuta vichwa kama Access-Control-Allow-Origin kwenye jibu.
Ushughulikiaji wa Makosa na Uthibitishaji
Angalia jinsi API yetu inavyoshughulikia makosa kwa usahihi:
# Thibitisha kwamba tumepokea ujumbe
if not message:
return jsonify({"error": "Message field is required"}), 400
Kanuni kuu za uthibitishaji:
- Huthibitisha viwanja muhimu kabla ya kusindika maombi
- Hurejesha ujumbe wa makosa wenye maana katika muundo wa JSON
- Inatumia misimbo sahihi ya hali ya HTTP (400 kwa maombi mabaya)
- Hutoa mrejesho wazi kusaidia waendelezaji wa frontend kutatua matatizo
Kuweka na Kuendesha Backend Yako
Sasa tunapokuwa na uingizaji wetu wa AI na server ya FastAPI tayari, tuanzishe kila kitu kilicho tayari. Mchakato wa usanikishaji unahusisha kusakinisha maktaba za Python, kusanidi mabadiliko ya mazingira, na kuanzisha server yako ya maendeleo.
Kuanzisha Mazingira ya Python
Tuwashie mazingira ya maendeleo ya Python. Mazingira ya virtual ni kama mpango wa Manhattan uliogawanywa sehemu – kila mradi unapata nafasi yake pekee ya pekee yenye zana maalum na utegemezi, kuzuia migongano kati ya miradi tofauti.
# Elekea kwenye saraka yako ya nyuma
cd backend
# Unda mazingira ya kweli (kama kuunda chumba safi kwa mradi wako)
python -m venv venv
# Iwasha (Linux/Mac)
source ./venv/bin/activate
# Kwenye Windows, tumia:
# venv\Scripts\activate
# Sakinisha vitu vizuri
pip install openai fastapi uvicorn python-dotenv
Tulichofanya sasa hivi:
- Tumeunda povu yetu ndogo ya Python ambapo tunaweza kusakinisha maktaba bila kuathiri vingine
- Tumezikwa ili terminal yetu ijue kutumia mazingira haya maalum
- Tumefunga muhimu: OpenAI kwa uchawi wa AI, FastAPI kwa API yetu ya wavuti, Uvicorn kuendesha server, na python-dotenv kwa usimamizi wa siri salama
Marekebisho muhimu yaliyoelezwa:
- FastAPI: Fremu ya kisasa, yenye kasi ya wavuti na nyaraka za API za moja kwa moja
- Uvicorn: Server ya ASGI yenye kasi mno inayochukua na kuendesha programu za FastAPI
- OpenAI: Maktaba rasmi kwa modeli za GitHub na API ya OpenAI
- python-dotenv: Kubeba mabadiliko ya mazingira kwa usalama kutoka kwa faili
.env
Usanidi wa Mazingira: Kuzingatia Siri Salama
Kabla hatujaanza API yetu, tunahitaji kujadili moja ya masomo muhimu zaidi katika maendeleo ya wavuti: jinsi ya kuweka siri zako kweli zisiwe wazi. Mabadiliko ya mazingira ni kama sefeli salama ambayo programu yako tu inaweza kufikia.
Mabadiliko ya Mazingira ni Nini?
Fikiria mabadiliko ya mazingira kama sanduku la amana salama – unailaza vitu vyako vya thamani humo, na wewe tu (na programu yako) una funguo la kuipata. Badala ya kuandika taarifa nyeti moja kwa moja kwenye msimbo wako (ambapo mtu yeyote anaweza kuiona), unahifadhi kwa usalama katika mazingira.
Hii ndio tofauti:
- Njia mbaya: Kuandika nenosiri lako kwenye karatasi na kuiweka kwenye skrini yako ya kompyuta
- Njia sahihi: Kuweka nenosiri lako kwenye meneja wa nenosiri salama unayemiliki wewe peke yako
Kwa Nini Mabadiliko ya Mazingira Ni Muhimu
# 🚨 USIFANYE HIVYO - Fikira la API linaonekana kwa kila mtu
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Mtu yeyote anaweza kuiba hii!
base_url="https://models.github.ai/inference"
)
# ✅ FANYA HIVYO - Fikira la API lihifadhiwe kwa usalama
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Ni programu yako tu inaweza kufikia hii
base_url="https://models.github.ai/inference"
)
Kinachotokea ukiandika siri moja kwa moja:
- Ufunuo kwa usimamizi wa toleo: Yeyote aliye na ufikiaji wa hifadhi yako ya Git anaona ufunguo wako wa API
- Hifadhi za umma: Ukiweka kwenye GitHub, ufunguo wako unaonekana kwa kila mtu mtandaoni
- Kushirikiana kwa timu: Waendelezaji wengine kwenye mradi wako wanapata ufunguo wako wa API binafsi
- Uvunjaji wa usalama: Ikiwa mtu ataiba ufunguo wako wa API, anaweza kutumia mikopo yako ya AI
Kuunda Faili Yako la Mazingira .env
Tengeneza faili .env katika saraka ya backend yako. Faili hii huhifadhi siri zako ndani ya kompyuta:
# Faili la .env - Hili HAUWASHWI kamwe kupelekwa kwenye Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
Kuelewa faili la .env:
- Siri moja kwa mstari katika muundo wa
KEY=value - Hakuna nafasi karibu na alama ya sawa
- Hakuna nukuu zinahitajika kwenye thamani (kawaida)
- Maoni huanza na
#
Kuunda Tokeni Yako Binafsi ya Kufikia GitHub
Tokeni yako ya GitHub ni kama nenosiri maalum linaloruhusu programu yako kutumia huduma za AI za GitHub:
Hatua kwa hatua kuunda tokeni:
- Nenda kwenye Mipangilio ya GitHub → Mipangilio ya mtengenezaji → Tokeni za huduma binafsi → Tokeni (classic)
- Bonyeza "Generate new token (classic)"
- Weka muda wa kumalizika (siku 30 kwa majaribio, muda mrefu kwa uzalishaji)
- Chagua wigo: Angalia "repo" na ruhusa zingine unazohitaji
- Tengeneza tokeni na uibandike mara moja (hauna tena ruhusa ya kuiona!)
- Mweka kwenye faili lako la .env
# Mfano wa jinsi tokeni yako inavyoonekana (hii ni feki!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
Kupakia Mabadiliko ya Mazingira katika Python
import os
from dotenv import load_dotenv
# Pakia mabadiliko ya mazingira kutoka kwa faili la .env
load_dotenv()
# Sasa unaweza kuyafikia kwa usalama
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"
)
Msimbo huu unafanya:
- Unapakia faili lako la .env na kufanya mabadiliko kupatikana kwa Python
- Huthibitisha kama tokeni muhimu ipo (ushughulikiaji mzuri wa makosa!)
- Hutoa kosa la wazi ikiwa tokeni haipo
- Inatumia tokeni kwa usalama bila kuionyesha kwenye msimbo
Usalama wa Git: Faili la .gitignore
Faili lako la .gitignore linaambia Git ni faili gani isizotakwa kufuatiliwa au kupakiwa:
# .gitignore - Ongeza mistari hii
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
Kwa nini hii ni muhimu: Mara tu unapoongeza .env kwenye .gitignore, Git itapuuzia faili lako la mazingira, ikuzuia kupakia siri zako kwa bahati mbaya kwenye GitHub.
Mazingira Tofauti, Siri Tofauti
Programu za kitaalamu hutumia funguo tofauti za API kwa mazingira tofauti:
# .env.kuendeleza
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.utengenezaji
GITHUB_TOKEN=your_production_token
DEBUG=False
Kwa nini hii ni muhimu: Hutaki majaribio ya maendeleo kuathiri msamaha wako wa matumizi ya AI wa uzalishaji, na unataka viwango tofauti vya usalama kwa mazingira tofauti.
Kuanzisha Server ya Maendeleo: Kuleta FastAPI Yako Kuishi
Sasa inakuja wakati wa kusisimua – kuanzisha seva yako ya maendeleo ya FastAPI na kuona muunganisho wako wa AI ukiamka hai! FastAPI hutumia Uvicorn, seva ya ASGI yenye mwendo wa mwanga ambayo imeundwa mahsusi kwa programu za Python async.
Kuelewa Mchakato wa Kuanzisha Seva ya FastAPI
# Njia 1: Utekelezaji wa moja kwa moja wa Python (inajumuisha upya-ziada wa moja kwa moja)
python api.py
# Njia 2: Kutumia Uvicorn moja kwa moja (udhibiti zaidi)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
Unapoendesha amri hii, hapa ndilo linatokea nyuma ya pazia:
1. Python inapakia programu yako ya FastAPI:
- Inaingiza maktaba zote muhimu (FastAPI, Pydantic, OpenAI, n.k.)
- Inapakia mabadiliko ya mazingira kutoka kwa faili yako
.env - Inatengeneza mfano wa programu ya FastAPI na nyaraka za moja kwa moja
2. Uvicorn huandaa seva ya ASGI:
- Inajihusisha na bandari 5000 na uwezo wa kushughulikia maombi async
- Inaweka njia za kuongoza maombi na uhakikisho wa moja kwa moja
- Inawezeshwa upya moja kwa moja kwa maendeleo (huanzisha upya faili zinapobadilika)
- Inazalisha nyaraka za API zenye mwingiliano
3. Seva inaanza kusikiliza:
- Terminal yako inaonyesha:
INFO: Uvicorn running on http://0.0.0.0:5000 - Seva inaweza kushughulikia maombi mengi ya AI sambamba
- API yako iko tayari na nyaraka za moja kwa moja kwenye
http://localhost:5000/docs
Unapaswa Kuona Nini Wakati Kila Kitu Kinafanya Kazi
$ 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.
Kuelewa matokeo ya FastAPI:
- Itatazama mabadiliko: Auto-reload imewezeshwa kwa maendeleo
- Uvicorn inafanya kazi: Seva ya ASGI yenye utendaji mkubwa inatumika
- Mchakato wa reloader umeanzishwa: Mtafiti wa faili kwa kuanzisha upya moja kwa moja
- Mwanzo wa programu umekamilika: App ya FastAPI imezinduliwa kwa mafanikio
- Nyaraka za mwingiliano zinapatikana: Tembelea
/docskwa nyaraka za API za moja kwa moja
Kupima FastAPI Yako: Njia Nyingi Zenye Nguvu
FastAPI hutoa njia kadhaa rahisi za kupima API yako, ikiwa ni pamoja na nyaraka za mwingiliano za moja kwa moja:
Njia 1: Nyaraka za Mwingiliano za API (Inapendekezwa)
- Fungua kivinjari chako na nenda
http://localhost:5000/docs - Utaona Swagger UI na mwisho wote wako umeandikwa
- Bonyeza
/hello→ "Try it out" → Andika ujumbe wa majaribio → "Execute" - Tazama jibu moja kwa moja kwenye kivinjari kwa muundo sahihi
Njia 2: Jaribio la Kivinjari la Msingi
- Nenda
http://localhost:5000kwa mwisho wa mzizi - Nenda
http://localhost:5000/healthkuangalia afya ya seva - Hii inathibitisha seva yako ya FastAPI inafanya kazi vizuri
Njia 2: Jaribio la Line ya Amri (Zaidi)
# Jaribu kwa kutumia curl (ikiwa inapatikana)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Jibu linalotarajiwa:
# {"response": "Habari! Mimi ni msaidizi wako wa AI. Naweza kukusaidiaje leo?"}
Njia 3: Skripti ya Jaribio la Python
# test_api.py - Unda faili hili kupima API yako
import requests
import json
# Pima mwisho wa API
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)
Kutatua Tatizo la Kawaida la Mwanzo
| Ujumbe wa Hitilafu | Kinachomaanisha | Jinsi ya Kurekebisha |
|---|---|---|
ModuleNotFoundError: No module named 'fastapi' |
FastAPI haijasakinishwa | Endesha pip install fastapi uvicorn kwenye mazingira yako ya virtual |
ModuleNotFoundError: No module named 'uvicorn' |
Seva ya ASGI haijasakinishwa | Endesha pip install uvicorn kwenye mazingira yako ya virtual |
KeyError: 'GITHUB_TOKEN' |
Kigezo cha mazingira hakipatikani | Angalia faili yako .env na mwito wa load_dotenv() |
Address already in use |
Bandari 5000 inatumika | Funga mchakato mwingine unaotumia bandari 5000 au badilisha bandari |
ValidationError |
Data ya ombi hailingani na mfano wa Pydantic | Angalia muundo wa ombi lako unaendana na skimu inayotarajiwa |
HTTPException 422 |
Kiumbe kisichoshughulikiwa | Uhakiki wa ombi umefaulu, angalia /docs kwa muundo sahihi |
OpenAI API error |
Huduma ya AI imeshindwa kuthibitishwa | Hakikisha tokeni yako ya GitHub ni sahihi na ina ruhusa sahihi |
Miongozo Bora ya Maendeleo
Upakiaji Moto: FastAPI na Uvicorn hutoa upakiaji wa moja kwa moja unapohifadhi mabadiliko kwenye faili zako za Python. Hii inamaanisha unaweza kubadilisha msimbo na kupima mara moja bila kuanzisha upya kwa mkono.
# Wezesha upakiaji wa moto kwa uwazi
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True inaruhusu upakiaji wa moto
Kuinua kumbukumbu kwa Maendeleo: Ongeza kumbukumbu ili kuelewa kinachoendelea:
import logging
# Weka upigaji taarifa
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
Kwa nini kumbukumbu husaidia: Wakati wa maendeleo, unaweza kuona hasa maombi yanayokuja, AI inajibu vipi, na mahali pa kutokea kwa makosa. Hii hufanya utambuzi wa hitilafu kuwa wa kasi zaidi.
Kusanidi kwa GitHub Codespaces: Maendeleo ya Wingu Yaliyorahisishwa
GitHub Codespaces ni kama kuwa na kompyuta yenye nguvu ya maendeleo kwenye wingu unayoweza kufikia kutoka kivinjari chochote. Ikiwa unafanya kazi ndani ya Codespaces, kuna hatua chache za ziada za kufanya backend yako ipatikane kwa frontend yako.
Kuelewa Mtandao wa Codespaces
Katika mazingira ya maendeleo ya ndani, kila kitu kinaendeshwa kwenye kompyuta ile ile:
- Backend:
http://localhost:5000 - Frontend:
http://localhost:3000(au file://)
Katika Codespaces, mazingira yako ya maendeleo yanaendeshwa kwenye seva za GitHub, hivyo "localhost" ina maana tofauti. GitHub hutengeneza URL za umma kwa huduma zako kwa moja, lakini unahitaji kuziweka ipasavyo.
Usaidizi wa Hatua kwa Hatua wa Codespaces
1. Anzisha seva yako ya backend:
cd backend
python api.py
Utaona ujumbe wa kuanzisha FastAPI/Uvicorn unaofahamika, lakini ukumbuke iko ndani ya mazingira ya Codespace.
2. Sanidi uonekano wa bandari:
- Tafuta kichupo cha "Ports" kwenye paneli ya chini ya VS Code
- Tafuta bandari 5000 kwenye orodha
- Bonyeza kulia kwenye bandari 5000
- Chagua "Port Visibility" → "Public"
Kwa nini kuweka umma? Kwa kawaida, bandari za Codespace ni za faragha (zinapatikana kwako tu). Kuweka umma kunaruhusu frontend yako (inayoendesha kwenye kivinjari) kuwasiliana na backend yako.
3. Pata URL yako ya umma: Baada ya kuweka bandari kuwa umma, utaona URL kama hii:
https://your-codespace-name-5000.app.github.dev
4. Sasisha usanidi wa frontend yako:
// Katika app.js ya frontend yako, sasisha BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Kuelewa URL za Codespace
URL za Codespace zina muundo unaotabirika:
https://[codespace-name]-[port].app.github.dev
Kuvunja haya:
codespace-name: Kitambulisho cha kipekee kwa Codespace yako (kawaida kina jina la mtumiaji wako)port: Nambari ya bandari huduma yako inayoendeshwa (5000 kwa app yetu ya FastAPI)app.github.dev: Kikoa cha GitHub kwa programu za Codespace
Kupima Usanidi wako wa Codespace
1. Jaribu backend moja kwa moja: Fungua URL yako ya umma kwa kichupo kipya cha kivinjari. Unapaswa kuona:
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
2. Jaribu na zana za mende wa kivinjari:
// Fungua console ya kivinjari na jaribu API yako
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));
Codespaces dhidi ya Maendeleo ya Ndani
| Kipengele | Maendeleo ya Ndani | GitHub Codespaces |
|---|---|---|
| Muda wa Usanidi | Mrefu (sasisha Python, utegemezi) | Mara moja (mazingira tayari yamesanidiwa) |
| Upatikanaji wa URL | http://localhost:5000 |
https://xyz-5000.app.github.dev |
| Usanidi wa Bandari | Moja kwa moja | Mikono (weka bandari kuwa za umma) |
| Uendelevu wa Faili | Kompyuta ya ndani | Rejesta ya GitHub |
| Ushirikiano | Gumu kushiriki mazingira | Rahisi kushiriki kiungo cha Codespace |
| Utegemezi wa Intaneti | Kwa maombi ya API ya AI pekee | Inahitajika kwa kila kitu |
Vidokezo vya Maendeleo ya Codespace
Mabadiliko ya Mazingira katika Codespaces:
Faili yako .env inafanya kazi sawa ndani ya Codespaces, lakini pia unaweza kuweka vigezo vya mazingira moja kwa Codespace:
# Weka thamani ya mazingira kwa kikao cha sasa
export GITHUB_TOKEN="your_token_here"
# Au ongeza kwenye .bashrc yako kwa kudumu
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
Usimamizi wa Bandari:
- Codespaces hutambua moja kwa moja wakati programu yako inaanza kusikiliza bandari
- Unaweza kupeleka bandari nyingi kwa wakati mmoja (inayosaidia kama utaongeza hifadhidata baadaye)
- Bandari zinabaki kupatikana mradi Codespace yako inaendelea
Mtiririko wa Kazi wa Maendeleo:
- Fanya mabadiliko ya msimbo katika VS Code
- FastAPI ina auto-reload (shukrani kwa mode ya reload ya Uvicorn)
- Jaribu mabadiliko mara moja kupitia URL ya umma
- Fanya commit na push ukimaliza
💡 Ushauri Bora: Weka alama URL ya backend ya Codespace wakati wa maendeleo. Kwa kuwa majina ya Codespace ni thabiti, URL haitabadilika mradi unatumia Codespace ile ile.
Kuunda Uso wa Chat wa Frontend: Hapo Watu Wanakutana na AI
Sasa tutaweka muonekano wa mtumiaji – sehemu inayobainisha jinsi watu wanavyowasiliana na msaidizi wako wa AI. Kama muundo wa interface ya iPhone asili, tunalenga kufanya teknolojia tata ionekane rahisi na ya asili kutumia.
Kuelewa Mhandisi wa Kisasa wa Frontend
Uso wetu wa chat utakuwa kile tunachokiita "Programu ya Ukurasa Mmoja" au SPA. Badala ya mbinu ya zamani ambapo kila kubonyeza kunapakia ukurasa mpya, app yetu husasisha kwa simu na papo hapo:
Tovuti za zamani: Kama kusoma kitabu cha karatasi – unageuza kurasa mpya kabisa
App yetu ya chat: Kama kutumia simu yako – kila kitu kinatiririka na kusasishwa bila shida
graph TD
A[Mtu Mtumiaji Andika Ujumbe] --> B[JavaScript Inakamata Kuingiza]
B --> C[Thibitisha & Panga Data]
C --> D[Tuma kwa API ya Backend]
D --> E[Onyesha Hali ya Kupakia]
E --> F[Pokea Jibu la AI]
F --> G[Sabisha Kiolesura cha Mazungumzo]
G --> H[Tayari kwa Ujumbe Ufuo]
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : inaendesha
ChatApp --> FastAPI : inatuma maombi
Nguzo Tatu za Maendeleo ya Frontend
Kila programu ya frontend – kutoka tovuti rahisi hadi app ngumu kama Discord au Slack – imejengwa kwa teknolojia kuu tatu. Fikiri kama msingi wa kila unachoona na kuwasiliana nacho kwenye wavuti:
HTML (Muundo): Hii ni msingi wako
- Hutoa maelezo kuhusu vipengele vilivyopo (vitufe, maeneo ya maandishi, chombo)
- Hutoa maana kwa maudhui (hii ni kichwa, hii ni fomu, n.k.)
- Hutengeneza muundo wa msingi unaoendeshwa na kila kitu kingine
CSS (Uwasilishaji): Hii ni mbunifu wako wa ndani
- Inafanya kila kitu kuonekana nzuri (rangi, fonti, upangaji)
- Inasimamia ukubwa tofauti za skrini (simu vs laptop vs kibao)
- Hutoa michoro laini na mrejesho wa kuona
JavaScript (Tabia): Hii ni ubongo wako
- Inajibu kile watumiaji wanachofanya (kubofya, kuandika, kurusha chini)
- Inazungumza na backend yako na kusasisha ukurasa
- Inafanya kila kitu kuwa mwingiliano na nguvu
Fikiri kama usanifu wa usanifu:
- HTML: Ramani ya muundo (kueleza nafasi na uhusiano)
- CSS: Muundo wa urembo na mazingira (mwelekeo wa kuona na uzoefu wa mtumiaji)
- JavaScript: Mifumo ya mitambo (utendaji na mwingiliano)
Kwa Nini Usanifu wa JavaScript wa Kisasa Ni Muhimu
App yetu ya chat itatumia mifumo ya kisasa ya JavaScript ambayo utaiona katika programu za kitaalamu. Kuelewa dhana hizi kutakusaidia unavyoendelea kama mendelezaji:
Usanifu wa Mifumo ya Darasa: Tutapanga msimbo wetu kwa madarasa, ambayo ni kama kutengeneza ramani za vitu
Async/Await: Njia ya kisasa kushughulikia shughuli zinazochukua muda (kama miito ya API)
Programu Iliyotegemea Matukio: App yetu inajibu hatua za mtumiaji (kama kubofya, kubonyeza vidokezo) badala ya kuendesha kwa mizunguko
Udhibiti wa DOM: Kusasisha mabadiliko ya ukurasa wa wavuti kwa misukumo ya mtumiaji na majibu ya API
Mpangilio wa Mradi
Unda saraka ya frontend na mpangilio huu uliopangwa:
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
Kuelewa usanifu:
- Inatenga masuala kati ya muundo (HTML), tabia (JavaScript), na uwasilishaji (CSS)
- Inadumisha muundo rahisi wa faili unaoweza kutembea na kuhariri kwa urahisi
- Inafuata mbinu bora za maendeleo ya wavuti kwa usimamizi na uendelevu
Kujenga Msingi wa HTML: Muundo wa Semantic kwa Upatikanaji
Tuanze na muundo wa HTML. Maendeleo ya wavuti ya kisasa yanasisitiza "HTML semantic" – kutumia vipengele vya HTML vinavyoelezea wazi kusudi lao, si tu muonekano. Hii hufanya programu yako ipatikane kwa wasomaji wa skrini, injini za utafutaji, na zana nyingine.
Kwa nini HTML semantic ni muhimu: Fikiria unamuambia mtu app yako ya chat kwa simu. Ungesema "kuna kichwa lenye kichwa na maelezo, eneo kuu ambapo mazungumzo yanaonekana, na fomu chini kwa kuandika ujumbe." HTML semantic hutumia vipengele vinavyolingana na maelezo haya ya asili.
Tengeneza index.html na alama hii iliyoundwa kwa kufikiria:
<!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>
Kuelewa kila kipengele cha HTML na kusudi lake:
Muundo wa Hati
<!DOCTYPE html>: Inamfahamisha kivinjari hii ni HTML5 ya kisasa<html lang="en">: Inaeleza lugha ya ukurasa kwa wasomaji wa skrini na zana za tafsiri<meta charset="UTF-8">: Inahakikisha usimbaji wa herufi uko sahihi kwa maandishi ya kimataifa<meta name="viewport"...>: Inafanya ukurasa uwe na muundo unaojibu simu kwa kudhibiti boriti na kiwango
Vipengele vya Semantic
<header>: Hutoa sehemu ya juu wazi ya kichwa na maelezo<main>: Inaonyesha eneo kuu la maudhui (ambapo mazungumzo hufanyika)<form>: Ni sahihi kwa kisheria kwa ingizo la mtumiaji, hurahisisha kuvinjari kwa keyboard
Sifa za Upatikanaji
role="log": Inaambia wasomaji wa skrini eneo hili lina daftari la muda wa maandishiaria-live="polite": Inatangaza ujumbe mpya kwa wasomaji wa skrini bila kuvurugaaria-label: Hutoa maelezo ya vidhibiti vya fomurequired: Kivinjari kinathibitisha mtumiaji anaingiza ujumbe kabla ya kutuma
Mchanganyiko wa CSS na JavaScript
classattributes: Hutoa alama za mtindo kwa CSS (mfano,chat-container,input-group)idattributes: Huruhusu JavaScript kupata na kuhariri vipengele maalumu- Mahali pa script: Faili la JavaScript linaletwa mwishoni ili HTML ipakie kwanza
Kwa nini muundo huu unaendana:
- Mtiririko wa mantiki: Kichwa → Maudhui kuu → Fomu la ingizo linaendana na mfululizo wa kusoma asilia
- Upatikanaji wa keyboard: Watumiaji wanaweza kutumia tab kupitia vipengele vyote vya kuingilia
- Rafiki kwa wasomaji wa skrini: Alama za wazi na maelezo kwa watumiaji wenye ulemavu wa kuona
- Inayojibu simu: Meta tag ya viewport inaruhusu muundo unaojibu
- Uboreshaji Endelevu: Hufanya kazi hata kama CSS au JavaScript itashindikana kupakia
Kuongeza JavaScript ya Mwingiliano: Mantiki ya Programu ya Wavuti ya Kisasa
Sasa tufanye JavaScript inayoleta kiolesura chetu cha mazungumzo kuwa hai. Tutatumia mitindo ya kisasa ya JavaScript ambayo utakutana nayo katika maendeleo ya wavuti ya kitaalamu, ikiwa ni pamoja na madarasa ya ES6, async/await, na programu zinazotegemea matukio.
Kuelewa Mimariko ya Kisasa ya JavaScript
Badala ya kuandika msururu wa vipengele (mfululizo wa kazi ambazo zinafanya kwa mpangilio), tutaunda mimari inayotegemea madarasa. Fikiria darasa kama ramani ya jinsi ya kutengeneza vitu – kama vile ramani za mbunifu jengo zinazoweza kutumika kujenga nyumba nyingi.
Kwa nini kutumia madarasa kwa maombi ya wavuti?
- Mpangilio: Kazi zote zinazohusiana zimeunganishwa pamoja
- Tumia tena: Unaweza kuunda matukio mengi ya mazungumzo kwenye ukurasa mmoja
- Matengenezo rahisi: Rahisi kuchunguza hitilafu na kubadilisha vipengele maalum
- Kiwango cha kitaalamu: Mtindo huu hutumika katika mifumo kama React, Vue, na Angular
Unda app.js ukiwa na JavaScript hii ya kisasa, iliyopangwa vizuri:
// app.js - Mmantikio wa programu ya mazungumzo ya kisasa
class ChatApp {
constructor() {
// Pata marejeo kwa vipengele vya DOM tunavyohitaji kuvitawala
this.messages = document.getElementById("messages");
this.form = document.getElementById("chatForm");
this.input = document.getElementById("messageInput");
this.sendButton = document.getElementById("sendBtn");
// Sanidi URL ya seva yako hapa
this.BASE_URL = "http://localhost:5000"; // Sasisha hii kwa mazingira yako
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
// Weka wasikilizaji wa matukio unapounda programu ya mazungumzo
this.initializeEventListeners();
}
initializeEventListeners() {
// Sikiliza kuwasilishwa kwa fomu (wakati mtumiaji anabonyeza Tuma au anabonyeza Enter)
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Pia sikiliza kitufe cha Enter kwenye sehemu ya ingizo (UX bora)
this.input.addEventListener("keypress", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.handleSubmit(e);
}
});
}
async handleSubmit(event) {
event.preventDefault(); // Zuia fomu isiboreshe ukurasa
const messageText = this.input.value.trim();
if (!messageText) return; // Usitume ujumbe tupu
// Toa mrejesho kwa mtumiaji kwamba kuna jambo linaendelea
this.setLoading(true);
// Ongeza ujumbe wa mtumiaji kwenye mazungumzo mara moja (UI ya matumaini)
this.appendMessage(messageText, "user");
// Futa sehemu ya ingizo ili mtumiaji aweze kuandika ujumbe unaofuata
this.input.value = '';
try {
// Piga API ya AI na subiri jibu
const reply = await this.callAPI(messageText);
// Ongeza jibu la AI kwenye mazungumzo
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 {
// Rejesha kiolesura kwa kutumia mafanikio au kushindwa
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";
}
}
// Anzisha programu ya mazungumzo wakati ukurasa unapopakia
document.addEventListener("DOMContentLoaded", () => {
new ChatApp();
});
Kuelewa Kila Dhana ya JavaScript
Muundo wa Darasa la ES6:
class ChatApp {
constructor() {
// Hii inakwenda wakati unapotengeneza mfano mpya wa ChatApp
// Ni kama kazi ya "setup" kwa mazungumzo yako
}
methodName() {
// Mbinu ni kazi ambazo ni mali ya darasa
// Wanaweza kufikia mali za darasa kwa kutumia "this"
}
}
Mtindo wa Async/Await:
// Njia ya zamani (jeuri ya kurejea):
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Njia ya kisasa (async/await):
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
Programu Inayotegemea Matukio: Badala ya kuangalia kila wakati kama kitu kimefanyika, tunasikiliza matukio:
// Wakati fomu inapotumwa, endesha handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Wakati kitufe cha Enter kinapobonyezwa, pia endesha handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });
Udhibiti wa DOM:
// Tengeneza vipengele vipya
const messageElement = document.createElement("div");
// Badilisha mali zao
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";
// Ongeza kwenye ukurasa
this.messages.appendChild(messageElement);
Usalama na Maarifa Bora
Kuzuia XSS:
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text; // Hii huhifadhi HTML kiotomatiki
return div.innerHTML;
}
Kwa nini hili ni muhimu: Ikiwa mtumiaji ataandika <script>alert('hack')</script>, kazi hii inahakikisha inaonyeshwa kama maandishi badala ya kutekelezwa kama msimbo.
Udhibiti wa Makosa:
try {
const reply = await this.callAPI(messageText);
this.appendMessage(reply, "assistant");
} catch (error) {
// Onyesha kosa rafiki kwa mtumiaji badala ya kuvunja programu
this.appendMessage("Sorry, I'm having trouble...", "error");
}
Mambo ya Kuzingatia Kuhusu Uzoefu wa Mtumiaji:
- UI ya matumaini: Ongeza ujumbe wa mtumiaji mara moja, usisubiri jibu la seva
- Hali ya kupakia: Zima vifungo na onyesha "Inatumwa..." wakati wa kusubiri
- Kuzungusha kiotomatiki: Weka ujumbe mpya uwe waonekana
- Uthibitisho wa ingizo: Usitume ujumbe tupu
- Njia za ufunguo wa kibodi: Kitufe cha Enter kinatuma ujumbe (kama programu halisi za mazungumzo)
Kuelewa Mtiririko wa Programu
- Ukifungua ukurasa → tukio la
DOMContentLoadedlinaanzishwa →new ChatApp()inaumbwa - Kijenga kinaendesha → hupata marejeleo ya vipengele vya DOM → huandaa wasikilizaji wa matukio
- Mtumiaji anaandika ujumbe → Bonyeza Enter au bonyeza Send →
handleSubmitinaendesha - handleSubmit → Inathibitisha ingizo → Inaonyesha hali ya kupakia → Inaita API
- API inajibu → Ongeza ujumbe wa AI kwenye mazungumzo → Rudisha hali ya kiolesura kuweza kutumika tena
- Tayari kwa ujumbe unaofuata → Mtumiaji anaweza kuendelea kuzungumza
Mimari hii inaweza kupanuliwa – unaweza kwa urahisi kuongeza vipengele kama kuhariri ujumbe, kupakia faili, au nyuzi nyingi za mazungumzo bila kuandika upya muundo mkuu.
🎯 Ukaguzi wa Kisia: Mimariko ya Kisasa ya Frontend
Kuelewa Mimariko: Umetekeleza programu kamili ya ukurasa mmoja kwa kutumia mitindo ya kisasa ya JavaScript. Hii inaonyesha maendeleo ya frontendi ya kiwango cha kitaalamu.
Dhana Muhimu Ulizozifahamu:
- Mimari ya darasa la ES6: Muundo wa msimbo uliopangwa na rahisi kutunza
- Mitindo ya Async/Await: Programu ya kisasa isiyo sambaa
- Programu Inayotegemea Matukio: Ubunifu unaojibu wa kiolesura cha mtumiaji
- Mbinu Bora za Usalama: Kuzuia XSS na uthibitisho wa ingizo
Muunganisho wa Sekta: Mitindo uliyojifunza (mimari ya darasa, shughuli za async, udhibiti wa DOM) ni msingi wa mifumo ya kisasa kama React, Vue, na Angular. Unajenga kwa kufikiria kama inayotumika katika maombi ya uzalishaji.
Swali la Tafakari: Unaweza kutumiaje programu hii ya mazungumzo kushughulikia mazungumzo mengi au uthibitishaji wa mtumiaji? Fikiria mabadiliko ya mimari yanayohitajika na jinsi muundo wa darasa unavyobadilika.
Kubuni Kiolesura Chako cha Mazungumzo
Sasa tujenge kiolesura cha mazungumzo cha kisasa, chenye mvuto wa kuona kwa kutumia CSS. Urembo mzuri hufanya programu yako ionekane ya kitaalamu na kuboresha uzoefu wa mtumiaji kwa ujumla. Tutatumia sifa za kisasa za CSS kama Flexbox, CSS Grid, na mali za desturi kwa muundo unaojibu na unaopatikana kwa ajili ya wote.
Unda styles.css ukiwa na mitindo hii kamili:
/* 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;
}
}
Kuelewa mimariko ya CSS:
- Inatumia mali za desturi za CSS (mabadiliko ya thamani) kwa muundo thabiti na urahisi wa matengenezo
- Inatekeleza mpangilio wa Flexbox kwa muundo unaojibu na upangaji sahihi
- Inajumuisha mienendo laini ya ujumbe bila kusumbua
- Inatoa tofauti za kuona kati ya ujumbe wa mtumiaji, majibu ya AI, na hali za makosa
- Inaunga mkono muundo unaofaa kwa vifaa vya desktop na simu za mkononi
- Inazingatia upatikanaji kwa upendeleo wa kupunguza mienendo na uwiano mzuri wa rangi
- Inatoa msaada wa hali ya giza kulingana na upendeleo wa mfumo wa mtumiaji
Kusanidi URL ya Seva Yako ya Backend
Hatua ya mwisho ni kusasisha BASE_URL katika JavaScript yako ili ifuate seva yako ya backend:
// Kwa maendeleo ya ndani
this.BASE_URL = "http://localhost:5000";
// Kwa GitHub Codespaces (badilisha na URL yako halisi)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Kujua URL ya backend yako:
- Maendeleo ya eneo la karibu: Tumia
http://localhost:5000ikiwa unafanya kazi mbili, frontend na backend, eneo hilo moja - Codespaces: Tafuta URL ya backend kwenye kichupo cha Ports baada ya kufungua mlangoni 5000 kwa umma
- Uzalishaji: Badilisha na kikoa chako halisi unapopeleka huduma kwenye mtoa huduma
💡 Kidokezo cha Mtihani: Unaweza kujaribu backend yako moja kwa moja kwa kutembelea URL ya mzizi katika kivinjari chako. Unapaswa kuona ujumbe wa karibu kutoka kwa seva yako ya FastAPI.
Upimaji na Uwekaji Mtandaoni
Sasa baada ya kuwa na vipengele vya frontendi na backend vimejengwa, tukajaribu kama yote yanafanya kazi pamoja na kuchunguza chaguzi za kuweka mtandaoni ili kushiriki msaidizi wako wa mazungumzo na wengine.
Mtiririko wa Kujaribu Kwenye Eneo la Mitaa
Fuatilia hatua hizi kujaribu programu yako kamili:
graph TD
A[Anzisha Mtoaji wa Backend] --> B[Rekebisha Vigezo vya Mazingira]
B --> C[Jaribu Vipindi vya API]
C --> D[Fungua Frontend kwenye Kivinjari]
D --> E[Jaribu Uwezo wa Mazungumzo]
E --> F[Rekebisha Tatizo Lolote]
Mchakato wa hatua kwa hatua wa majaribio:
-
Anzisha seva yako ya backend:
cd backend source venv/bin/activate # au venv\Scripts\activate kwenye Windows python api.py -
Thibitisha API ina kazi:
- Fungua
http://localhost:5000katika kivinjari chako - Unapaswa kuona ujumbe wa karibu kutoka kwa seva yako ya FastAPI
- Fungua
-
Fungua frontend yako:
- Nenda kwenye saraka ya frontend
- Fungua
index.htmlkatika kivinjari chako - Au tumia ugani wa Live Server wa VS Code kwa uzoefu bora wa maendeleo
-
Jaribu kazi ya mazungumzo:
- Andika ujumbe katika sehemu ya ingizo
- Bonyeza "Send" au bonyeza Enter
- Thibitisha AI inajibu ipasavyo
- Angalia console ya kivinjari kwa makosa ya JavaScript
Kutatua Masuala ya Kawaida
| Tatizo | Dalili | Suluhisho |
|---|---|---|
| Hitilafu ya CORS | Frontend haiwezi kufikia backend | Hakikisha FastAPI CORSMiddleware imeandaliwa vizuri |
| Hitilafu ya API Key | Misingi ya 401 Unauthorized | Angalia toleo lako la mazingira GITHUB_TOKEN |
| Muunganisho Umezuiwa | Makosa ya mtandao frontend | Hakikisha URL ya backend ni sahihi na seva ya Flask inaendesha |
| Hakuna Jibu la AI | Majibu tupu au ya makosa | Angalia kumbukumbu za backend kwa makosa ya API au hitilafu za uthibitisho |
Hatua za kawaida za uchunguzi wa hitilafu:
- Angalia Console ya Zana za Developer wa kivinjari kwa makosa ya JavaScript
- Thibitisha kichupo cha Mtandao kinaonyesha maombi na majibu ya API kwa mafanikio
- Kagua matokeo ya kiolesura cha backend kwa makosa ya Python au matatizo ya API
- Hakiki mipangilio ya mazingira imeload kwa usahihi na inapatikana
📈 Muda wako wa Mwalimu wa Mageuzi wa AI
timeline
title Safari Kamili ya Maendeleo ya Programu ya AI
section Misingi ya AI
Kuelewa AI Inayotengeneza
: Fahamu dhana za utambuzi wa mifumo
: Shuhudia udhibiti wa vigezo vya AI
: Jifunze mbinu za uhandisi wa maelekezo
Muunganisho wa Modeli za GitHub
: Naviga majukwaa ya huduma za AI
: Shimika usalama wa uthibitishaji
: Boreshaji vigezo vya modeli
section Maendeleo ya Backend
Miundo ya API ya Python
: Tengeneza programu za FastAPI
: Tekeleza kazi zisizo za kawaida (async)
: Unda njia salama za kuingia
Muunganisho wa Huduma za AI
: Unganishaji na API za AI kutoka nje
: Shimika ukomo wa kiasi cha maombi
: Tekeleza mipaka ya makosa
section Utaalamu wa Frontend
Mifumo ya Kisasa ya JavaScript
: Shuhudia usanifu wa darasa la ES6
: Tekeleza mtiririko wa async/await
: Tengeneza interfaces zinazojibadilisha
Uzoefu wa Mtumiaji wa Wakati Halisi
: Tengeneza interfaces za mazungumzo zilizo hai
: Shimika hali za upakiaji
: Boreshaji mwingiliano wa mtumiaji
section Utayari wa Uzalishaji
Usalama & Utendaji
: Tekeleza usimamizi salama wa vibali
: Zuia udhaifu wa XSS
: Boreshaji utendaji wa API
Utekelezaji wa Kitaalamu
: Tengeneza usanifu unaoweza kupanuka
: Unda msimbo unaotunzwa kwa urahisi
: Andika mchakato wa maendeleo
🎓 Hatua ya Kuisha Masomo: Umefanikiwa kujenga programu kamili yenye nguvu za AI ukitumia teknolojia na mitindo ya mibuni inayotumia programu za msaidizi wa AI wa kisasa. Ujuzi huu unaonyesha mseto wa maendeleo ya wavuti wa jadi na ushirikiano wa AI wa kisasa.
🔄 Uwezo wa Kiwango Kifuatacho:
- Tayari kuchunguza mifumo ya AI yenye maendeleo (LangChain, LangGraph)
- Imekomeshwa kujenga programu za AI zenye aina nyingi (maandishi, picha, sauti)
- Imetayarishwa kutekeleza hifadhidata za vekta na mifumo ya upokezaji
- Msingi umewekwa kwa kujifunza mashine na marekebisho ya mfano wa AI
Changamoto ya Wakalimu wa GitHub Copilot 🚀
Tumia hali ya Wakili kumaliza changamoto ifuatayo:
Maelezo: Boresha msaidizi wa mazungumzo kwa kuongeza historia ya mazungumzo na uhifadhi wa ujumbe. Changamoto hii itakusaidia kuelewa jinsi ya kusimamia hali katika programu za mazungumzo na kutekeleza uhifadhi wa data kwa uzoefu bora wa mtumiaji.
Mhimili: Badilisha programu ya mazungumzo ili kujumuisha historia ya mazungumzo inayodumu kati ya vikao. Ongeza kazi ya kuhifadhi ujumbe wa mazungumzo kwenye hifadhi ya ndani, onesha historia ya mazungumzo wakati ukurasa unapopakia, na jumuisha kitufe cha "Futa Historia". Pia tekeleza viashiria vya uandikaji na nyakati za ujumbe kufanya uzoefu wa mazungumzo kuwa halisi zaidi.
Jifunze zaidi kuhusu hali ya wakili hapa.
Kazi: Tengeneza Msaidizi Wako wa AI Binafsi
Sasa utaunda utekelezaji wako wa msaidizi wa AI binafsi. Badala ya kunakili msimbo wa mafunzo tu, hii ni fursa ya kutumia dhana huku unajenga kitu kinachokamilisha maslahi na matumizi yako binafsi.
Sharti za Mradi
Tuweke mradi wako ukiwa na muundo safi, uliopangwa:
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
Kazi Muhimu za Utekelezaji
Maendeleo ya Backend:
- Chukua msimbo wetu wa FastAPI na uufanye wake
- Tengeneza tabia ya kipekee ya AI – labda msaidizi wa upishi, mshirika wa uandishi wa ubunifu, au rafiki wa kusomea?
- Ongeza udhibiti madhubuti wa makosa ili programu yako isivunjike wakati mambo yanaposhindikana
- Andika nyaraka wazi kwa yeyote anayetaka kuelewa jinsi API yako inavyofanya kazi
Maendeleo ya Frontend:
- Jenga kiolesura cha mazungumzo kinachoonekana kuwa rahisi na kinachokaribisha
- Andika JavaScript safi, ya kisasa ambayo utajivunia kuonyesha kwa watengenezaji wengine
- Buni mitindo ya desturi inayowakilisha tabia ya AI yako – mchangamfu na yenye rangi? Safi na ya chini kabisa? Yako kabisa!
- Hakikisha inafanya kazi vizuri kwenye simu na kompyuta
Sharti za Uboreshaji Binafsi:
- Chagua jina na tabia ya kipekee kwa msaidizi wako wa AI – labda kitu kinachowakilisha maslahi yako au matatizo unayotaka kutatua
- Boresha muundo wa kuona ili uendane na hali ya msaidizi wako
- Andika ujumbe wa ukaribisho mzuri unaowafanya watu watake kuanza kuzungumza
- Jaribu msaidizi wako na aina mbalimbali za maswali kuona jinsi anavyojibu
Mapendekezo ya Uboreshaji (Hiari)
Unataka kupeleka mradi wako hatua inayofuata? Hapa kuna mawazo ya kufurahia:
| Kipengele | Maelezo | Ujuzi Utayafanyia Mazoezi |
|---|---|---|
| Historia ya Ujumbe | Kukumbuka mazungumzo hata baada ya ukurasa kusasishwa | Kufanya kazi na localStorage, kushughulikia JSON |
| Viashiria vya Kuandika | Onyesha "AI anaandika..." wakati wa kusubiri majibu | Mienendo ya CSS, programu asynchronous |
| Nyakati za Ujumbe | Onyesha lini kila ujumbe umetumwa | Muundo wa tarehe/nyakati, ubunifu wa uzoefu wa mtumiaji |
| Kukabidhi Mazungumzo | Ruhusu watumiaji kupakua mazungumzo yao | Udhibiti faili, usafirishaji wa data |
| Kubadilisha Mandhari | Badilisha kati ya hali nyepesi/giza | Mali za CSS, mapendeleo ya mtumiaji |
| Ingizo la Sauti | Ongeza utendakazi wa hotuba hadi maandishi | API za wavuti, upatikanaji |
Upimaji na Nyaraka
Uhakiki wa Ubora:
- Jaribu programu yako kwa aina tofauti za ingizo na hali maalum
- Thibitisha muundo unaojibu unafanya kazi kwenye saizi mbalimbali za skrini
- Angalia upatikanaji kwa urambazaji wa kibodi na wasomaji wa skrini
- Thibitisha HTML na CSS kwa kufuata viwango
Sharti za Nyaraka:
- Andika README.md inayoelezea mradi wako na jinsi ya kuutumia
- Jumuisha picha za skrini za kiolesura chako cha mazungumzo kinavyofanya kazi
- Andika vipengele vyovyote maalum au ubinafsishaji ulioufanya
- Toa maelezo wazi ya usanidi kwa watengenezaji wengine
Miongozo ya Kuwasilisha
Vifurushi vya Mradi:
- Folda kamili ya mradi yenye msimbo wote chanzo
- README.md yenye maelezo ya mradi na maelekezo ya usanidi
- Picha za skrini zinaonyesha msaidizi wako wa mazungumzo akifanya kazi
- Tafakari fupi juu ya kile ulichojifunza na changamoto ulizokutana nazo
Vigezo vya Tathmini:
- Ufanisi: Je, msaidizi wa mazungumzo anafanya kazi kama inavyotarajiwa?
- Ubora wa Msimbo: Je, msimbo umepangwa vizuri, umeandikwa maelezo, na unaendeshwa kwa urahisi?
- Muundo: Je, kiolesura kina mvuto wa kuona na kinavutia mtumiaji?
- Ubunifu: Utekelezaji wako ni wa kipekee kiasi gani na umebinafsishwa vipi?
- Nyaraka: Je, maagizo ya usanidi ni wazi na kamili?
💡 Kidokezo cha Mafanikio: Anza na mahitaji ya msingi kwanza, kisha ongeza uboreshaji baada ya kila kitu kuwa kinavyofanya kazi. Lenga kuunda uzoefu mzuri kabla ya kuongeza vipengele vya hali ya juu.
Suluhisho
Changamoto za Ziada
Tayari kuchukua msaidizi wako wa AI hatua inayofuata? Jaribu changamoto hizi za hali ya juu zitakazoroga uelewa wako wa ushirikiano wa AI na maendeleo ya wavuti.
Uboreshaji wa Tabia
Uchawi halisi hutokea unapoleta tabia ya kipekee kwa msaidizi wako wa AI. Jaribu maagizo tofauti ya mfumo kuunda wasaidizi maalum:
Mfano wa Msaidizi wa Kitaalamu:
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
Mfano wa Msaidizi wa Uandishi wa Ubunifu:
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
Mfano wa Mshauri wa Kiufundi:
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
Uboreshaji wa Frontend
Badilisha kiolesura chako cha mazungumzo kwa maboresho haya ya kuona na utendaji:
Sifa za CSS za Juu:
- Tekeleza mienendo laini na mabadiliko ya ujumbe
- Ongeza muundo wa bubbule maalum za mazungumzo kwa kutumia umbo la CSS na miale ya rangi
- Tengeneza mienendo ya kiashiria cha kuandika wakati AI anafanya "kufikiria"
- Buni hisia za emoji au mfumo wa tathmini ya ujumbe
Uboreshaji wa JavaScript:
- Ongeza njia za mkato wa kibodi (Ctrl+Enter kutuma, Escape kufuta ingizo)
- Tekeleza utambuzi na uchujaji wa ujumbe
- Tengeneza kipengele cha kusafirisha mazungumzo (kupakua kama maandishi au JSON)
- Ongeza uhifadhi kiotomatiki kwenye localStorage kuepuka kupoteza ujumbe
Ushirikiano wa AI wa Juu
Tabia Nyingi za AI:
- Tengeneza menyu ya kunyang’anywa kuchagua kati ya tabia tofauti za AI
- Hifadhi tabia inayopendelewa ya mtumiaji katika localStorage
- Tekeleza kubadilisha muktadha unaoendeleza mtiririko wa mazungumzo
Vipengele Mahiri vya Jibu:
- Ongeza ufahamu wa muktadha wa mazungumzo (AI anakumbuka ujumbe uliopita)
- Tekeleza mapendekezo mahiri kulingana na mada ya mazungumzo
- Unda vitufe vya majibu ya haraka kwa maswali ya kawaida
🎯 Lengo la Kujifunza: Changamoto hizi za ziada zinakusaidia kuelewa mifumo ya maendeleo ya wavuti yenye maendeleo ya hali ya juu na mbinu za uunganishaji wa AI zinazotumiwa katika programu za uzalishaji.
Muhtasari na Hatua Zitakazofuata
Hongera! Umefanikiwa kujenga msaidizi wa mazungumzo unaotumia AI kutoka mwanzo. Mradi huu umekupa uzoefu wa vitendo na teknolojia za kisasa za maendeleo ya wavuti na uunganishaji wa AI – ujuzi unaozidi kuwa muhimu katika mazingira ya teknolojia ya sasa.
Uliyofanikiwa Kutanua
Katika somo hili, umejifunza teknolojia na dhana kuu kadhaa:
Maendeleo ya Backend:
- Umeunganishwa na GitHub Models API kwa ajili ya utendaji wa AI
- Umejenga API ya RESTful kwa kutumia Flask na usimamizi sahihi wa makosa
- Umetekeleza uthibitishaji salama kwa kutumia mabadiliko ya mazingira
- Umeweka CORS kwa maombi ya kuvuka-meneo kati ya frontend na backend
Maendeleo ya Frontend:
- Umeunda kiolesura cha mazungumzo kinachobadili ukubwa kwa kutumia HTML semantiki
- Umetumia JavaScript za kisasa na async/await pamoja na usanifu wa darasa
- Umetengeneza kiolesura cha kuvutia kwa kutumia CSS Grid, Flexbox, na michoro ya michoro
- Umeongeza vipengele vya upatikanaji na kanuni za muundo unaobadilika saizi
Uunganishaji wa Full-Stack:
- Umeunganisha frontend na backend kupitia simu za API za HTTP
- Umesimamia mwingiliano wa wakati halisi wa mtumiaji na mtiririko wa data usio na usawa
- Umetekeleza usimamizi wa makosa na mrejesho kwa mtumiaji katika programu nzima
- Umejaribu mtiririko kamili wa programu kutoka kwa ingizo la mtumiaji hadi jibu la AI
Matokeo Muhimu ya Kujifunza
mindmap
root((Ujuzi wa AI Chat App))
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
Mradi huu umekujulisha misingi ya kujenga programu zinazoendeshwa na AI, ambayo ni mustakabali wa maendeleo ya wavuti. Sasa unaelewa jinsi ya kuingiza uwezo wa AI katika programu za wavuti za jadi, kuunda uzoefu wa mtumiaji unaovutia unaoonekana kuwa mwenye akili na wa haraka.
Matumizi ya Kitaalamu
Ujuzi ulioupata katika somo hili unatumika moja kwa moja katika taaluma za kisasa za maendeleo ya programu:
- Maendeleo ya wavuti ya full-stack kwa kutumia mifumo na API za kisasa
- Uunganishaji wa AI katika programu za wavuti na programu za simu
- Ubunifu na maendeleo ya API kwa usanifu wa microservices
- Maendeleo ya kiolesura cha mtumiaji kwa kuzingatia upatikanaji na muundo unaobadilika ukubwa
- Mazoezi ya DevOps ikijumuisha usanidi wa mazingira na utoaji
Kuendeleza Safari Yako ya Maendeleo ya AI
Hatua Zinazo Fuata za Kujifunza:
- Chunguza mifano na API za AI za hali ya juu zaidi (GPT-4, Claude, Gemini)
- Jifunze mbinu za uhandisi wa prompt kwa majibu bora ya AI
- Soma kuhusu ubunifu wa mazungumzo na kanuni za uzoefu wa mtumiaji wa chatbot
- Chunguza usalama wa AI, maadili, na mbinu za maendeleo ya AI kwa uwajibikaji
- Jenga programu tata zaidi zenye kumbukumbu za mazungumzo na ufahamu wa muktadha
Mawazo ya Miradi ya Juu:
- Vyumba vya mazungumzo vya watumiaji wengi na udhibiti wa AI
- Chatbots za huduma kwa wateja zinazotumia AI
- Msaada wa kufundisha wa kielimu wenye mafunzo binafsi
- Washirika wa uandishi wa ubunifu wenye tabia mbalimbali za AI
- Msaidizi wa nyaraka za kiufundi kwa watengenezaji
Kuanzisha na GitHub Codespaces
Unataka kujaribu mradi huu katika mazingira ya maendeleo ya wingu? GitHub Codespaces inatoa usanidi kamili wa maendeleo katika kivinjari chako, bora kwa kujaribu programu za AI bila haja ya usanidi wa eneo lako la mashine.
Kuweka Mazingira Yako ya Maendeleo
Hatua 1: Unda Kutoka Kwenye Kiolezo
- Tembelea hazina ya Web Dev For Beginners repository
- Bonyeza "Use this template" juu kulia (hakikisha umeingia kwenye GitHub)
Hatua 2: Anzisha Codespaces
- Fungua hazina uliyounda hivi karibuni
- Bonyeza kitufe cha kijani "Code" na chagua "Codespaces"
- Chagua "Create codespace on main" kuanzisha mazingira yako ya maendeleo
Hatua 3: Usanidi wa Mazingira
Mara wakati Codespace yako ianzishwa, utakuwa na:
- Zana zilizo wekwa tayari Python, Node.js, na zana zote zinazohitajika za maendeleo
- Kiolesura cha VS Code na viendelezi vya maendeleo ya wavuti
- Ufikiaji wa terminal kwa kuendesha seva za backend na frontend
- Kuweka mbele bandari kwa ajili ya kujaribu programu zako
Nini Codespaces hutolewa:
- Hutoa kuondoa matatizo ya usanidi wa mazingira ya eneo lako
- Hutoa mazingira thabiti ya maendeleo kwa vifaa mbalimbali
- Inajumuisha zana na viendelezi vilivyosanidiwa kwa maendeleo ya wavuti
- Inatoa uunganisho mzuri na GitHub kwa usimamizi wa matoleo na ushirikiano
🚀 Kipendekezo cha Mtaalamu: Codespaces ni bora kwa kujifunza na kutunga mfano wa programu za AI kwa kuwa hutatua kabisa matatizo ya usanidi wa mazingira, ikikuruhusu kuzingatia kujenga na kujifunza badala ya kutatua changamoto za usanidi.
Kiasi cha Masuala:
Nyaraka hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI Co-op Translator. Wakati tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za moja kwa moja zinaweza kuwa na makosa au kutokukamilika. Nyaraka ya asili katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo halali. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inashauriwa. Hatutawajibika kwa mkanganyiko wowote au tafsiri potofu zitokanazo na matumizi ya tafsiri hii.