# Gumawa ng Chat Assistant gamit ang AI
Naalala mo ba sa Star Trek kung paano nakikipag-usap ang crew sa computer ng barko, nagtatanong ng mahihirap na tanong at nakakatanggap ng makabuluhang sagot? Ang tila purong science fiction noong 1960s ay ngayon ay kaya mo nang gawin gamit ang mga teknolohiyang web na alam mo na.
Sa araling ito, gagawa tayo ng AI chat assistant gamit ang HTML, CSS, JavaScript, at ilang backend integration. Matutuklasan mo kung paano ang parehong mga kasanayan na natutunan mo ay maaaring kumonekta sa makapangyarihang AI services na nakakaunawa ng konteksto at bumubuo ng makabuluhang sagot.
Isipin ang AI na parang may access ka sa isang napakalaking library na hindi lang naghahanap ng impormasyon kundi nag-synthesize din nito sa malinaw na sagot na naaayon sa iyong mga tanong. Sa halip na maghanap sa libu-libong pahina, makakakuha ka ng direktang, kontekstwal na sagot.
Ang integration ay nangyayari sa pamamagitan ng mga pamilyar na teknolohiyang web na nagtutulungan. Ang HTML ang gumagawa ng chat interface, ang CSS ang nag-aayos ng disenyo, ang JavaScript ang namamahala sa interaksyon ng user, at ang backend API ang nagkokonekta sa lahat sa AI services. Katulad ito ng kung paano nagtutulungan ang iba't ibang seksyon ng orchestra upang makabuo ng isang symphony.
Sa esensya, gumagawa tayo ng tulay sa pagitan ng natural na komunikasyon ng tao at pagproseso ng makina. Matutunan mo ang parehong teknikal na implementasyon ng AI service integration at ang mga disenyo na nagpapadama sa interaksyon na intuitive.
Sa pagtatapos ng araling ito, ang AI integration ay magiging mas pamilyar, parang isa pang API na kaya mong gamitin. Maiintindihan mo ang mga pundasyong pattern na nagpapagana sa mga aplikasyon tulad ng ChatGPT at Claude, gamit ang parehong mga prinsipyo ng web development na natutunan mo.
## β‘ Mga Kaya Mong Gawin sa Loob ng 5 Minuto
**Mabilisang Landas para sa Abalang Developer**
```mermaid
flowchart LR
A[β‘ 5 minutes] --> B[Get GitHub token]
B --> C[Test AI playground]
C --> D[Copy Python code]
D --> E[See AI responses]
```
- **Minuto 1**: Bisitahin ang [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) at gumawa ng personal access token
- **Minuto 2**: Subukan ang AI interactions direkta sa playground interface
- **Minuto 3**: I-click ang "Code" tab at kopyahin ang Python snippet
- **Minuto 4**: Patakbuhin ang code sa lokal gamit ang iyong token: `GITHUB_TOKEN=your_token python test.py`
- **Minuto 5**: Panoorin ang unang AI response na nabuo mula sa sarili mong code
**Mabilisang Test Code**:
```python
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)
```
**Bakit Ito Mahalaga**: Sa loob ng 5 minuto, mararanasan mo ang magic ng programmatic AI interaction. Ito ang pundasyon na nagpapagana sa bawat AI application na ginagamit mo.
Ganito ang magiging hitsura ng iyong natapos na proyekto:
## πΊοΈ Ang Iyong Paglalakbay sa Pagbuo ng AI Application
```mermaid
journey
title From Web Development to AI Integration
section Understanding AI Foundations
Discover generative AI concepts: 4: You
Explore GitHub Models platform: 6: You
Master AI parameters and prompts: 8: You
section Backend Integration
Build Python API server: 5: You
Implement AI function calls: 7: You
Handle async operations: 8: You
section Frontend Development
Create modern chat interface: 6: You
Master real-time interactions: 8: You
Build responsive user experience: 9: You
section Professional Application
Deploy complete AI system: 7: You
Optimize performance patterns: 8: You
Create production-ready app: 9: You
```
**Destinasyon ng Iyong Paglalakbay**: Sa pagtatapos ng araling ito, makakabuo ka ng kumpletong AI-powered application gamit ang parehong teknolohiya at pattern na nagpapagana sa mga modernong AI assistant tulad ng ChatGPT, Claude, at Google Bard.
## Pag-unawa sa AI: Mula sa Misteryo Patungo sa Mastery
Bago sumabak sa code, unawain muna natin kung ano ang ating ginagawa. Kung nakagamit ka na ng APIs dati, alam mo ang basic na pattern: magpadala ng request, tumanggap ng response.
Ang AI APIs ay sumusunod sa parehong istruktura, ngunit sa halip na kumuha ng pre-stored na data mula sa database, bumubuo sila ng bagong sagot batay sa mga pattern na natutunan mula sa napakaraming teksto. Isipin ito na parang pagkakaiba ng library catalog system at isang librarian na marunong mag-synthesize ng impormasyon mula sa maraming mapagkukunan.
### Ano nga ba ang "Generative AI"?
Isipin kung paano ang Rosetta Stone ay nagbigay-daan sa mga iskolar na maunawaan ang Egyptian hieroglyphics sa pamamagitan ng paghahanap ng mga pattern sa pagitan ng kilala at hindi kilalang wika. Ganito rin gumagana ang AI models β naghahanap sila ng mga pattern sa napakaraming teksto upang maunawaan kung paano gumagana ang wika, at ginagamit ang mga pattern na ito upang bumuo ng angkop na sagot sa mga bagong tanong.
**Hayaan kong ipaliwanag ito gamit ang simpleng paghahambing:**
- **Tradisyunal na database**: Parang humihingi ng birth certificate β makukuha mo ang eksaktong dokumento tuwing hihilingin mo ito
- **Search engine**: Parang humihingi sa librarian na maghanap ng mga libro tungkol sa pusa β ipapakita nila kung ano ang available
- **Generative AI**: Parang nagtatanong sa isang matalinong kaibigan tungkol sa pusa β sasabihin nila ang mga kawili-wiling bagay sa sarili nilang salita, naaayon sa gusto mong malaman
```mermaid
graph LR
A[Your Question] --> B[AI Model]
B --> C[Pattern Recognition]
C --> D[Content Generation]
D --> E[Contextual Response]
F[Training Data Books, Articles, Web] --> B
```
### Paano Natututo ang AI Models (Simpleng Bersyon)
Ang AI models ay natututo sa pamamagitan ng exposure sa napakalaking datasets na naglalaman ng teksto mula sa mga libro, artikulo, at usapan. Sa prosesong ito, natutukoy nila ang mga pattern sa:
- Paano istruktura ang mga ideya sa nakasulat na komunikasyon
- Aling mga salita ang karaniwang magkasama
- Paano karaniwang dumadaloy ang mga usapan
- Mga pagkakaiba sa konteksto sa pagitan ng pormal at impormal na komunikasyon
**Katulad ito ng kung paano binibigyang-kahulugan ng mga archaeologist ang sinaunang wika**: sinusuri nila ang libu-libong halimbawa upang maunawaan ang grammar, bokabularyo, at konteksto ng kultura, hanggang sa kaya na nilang bigyang-kahulugan ang mga bagong teksto gamit ang mga natutunang pattern.
### Bakit GitHub Models?
Ginagamit natin ang GitHub Models para sa praktikal na dahilan β nagbibigay ito ng access sa enterprise-level AI nang hindi kailangang mag-set up ng sarili nating AI infrastructure (na, maniwala ka, hindi mo gugustuhing gawin ngayon!). Isipin ito na parang paggamit ng weather API sa halip na subukang hulaan ang panahon sa pamamagitan ng pag-set up ng mga weather station sa bawat lugar.
Ito ay "AI-as-a-Service," at ang pinakamagandang bahagi? Libre itong simulan, kaya maaari kang mag-eksperimento nang hindi nag-aalala sa malaking gastusin.
```mermaid
graph LR
A[Frontend Chat UI] --> B[Your Backend API]
B --> C[GitHub Models API]
C --> D[AI Model Processing]
D --> C
C --> B
B --> A
```
Gagamitin natin ang GitHub Models para sa ating backend integration, na nagbibigay ng access sa professional-grade AI capabilities sa pamamagitan ng developer-friendly interface. Ang [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ay nagsisilbing testing environment kung saan maaari kang mag-eksperimento sa iba't ibang AI models at maunawaan ang kanilang kakayahan bago ito i-implement sa code.
## π§ Ecosystem ng Pagbuo ng AI Application
```mermaid
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
```
**Pangunahing Prinsipyo**: Ang pagbuo ng AI application ay pinagsasama ang tradisyunal na kasanayan sa web development at AI service integration, na lumilikha ng matatalinong aplikasyon na natural at tumutugon sa mga user.
**Narito kung bakit kapaki-pakinabang ang playground:**
- **Subukan** ang iba't ibang AI models tulad ng GPT-4o-mini, Claude, at iba pa (lahat libre!)
- **I-test** ang iyong mga ideya at prompts bago ka magsulat ng code
- **Kumuha** ng ready-to-use code snippets sa paborito mong programming language
- **I-tweak** ang mga setting tulad ng creativity level at response length upang makita kung paano ito nakakaapekto sa output
Kapag nakapaglaro ka na nang kaunti, i-click lang ang "Code" tab at piliin ang programming language para makuha ang implementation code na kailangan mo.
## Pag-set Up ng Python Backend Integration
Ngayon, i-implement natin ang AI integration gamit ang Python. Ang Python ay mahusay para sa AI applications dahil sa simpleng syntax nito at makapangyarihang mga library. Magsisimula tayo sa code mula sa GitHub Models playground at pagkatapos ay i-refactor ito sa isang reusable, production-ready function.
### Pag-unawa sa Base Implementation
Kapag kinuha mo ang Python code mula sa playground, makakakuha ka ng ganito. Huwag mag-alala kung mukhang marami ito sa simula β talakayin natin ito nang paisa-isa:
```python
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
```
**Narito ang nangyayari sa code na ito:**
- **Ini-import** natin ang mga tools na kailangan: `os` para sa pagbabasa ng environment variables at `OpenAI` para sa pakikipag-usap sa AI
- **Inaayos** natin ang OpenAI client upang ituro sa GitHub's AI servers sa halip na direkta sa OpenAI
- **Nag-aauthenticate** gamit ang isang espesyal na GitHub token (higit pa tungkol dito mamaya!)
- **Istruktura** natin ang usapan gamit ang iba't ibang "roles" β isipin ito na parang pag-set ng eksena para sa isang play
- **Nagpapadala** tayo ng request sa AI na may ilang fine-tuning parameters
- **Kinukuha** natin ang aktwal na response text mula sa lahat ng data na bumalik
### Pag-unawa sa Message Roles: Framework ng AI Conversation
Ang mga AI conversation ay gumagamit ng partikular na istruktura na may iba't ibang "roles" na may natatanging layunin:
```python
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
```
**Isipin ito na parang nagdidirekta ng isang play:**
- **System role**: Parang stage directions para sa aktor β sinasabi nito sa AI kung paano kumilos, anong personalidad ang dapat mayroon, at paano sumagot
- **User role**: Ang aktwal na tanong o mensahe mula sa taong gumagamit ng iyong aplikasyon
- **Assistant role**: Ang sagot ng AI (hindi mo ito ipinapadala, ngunit lumalabas ito sa conversation history)
**Halimbawa sa totoong buhay**: Isipin na ipinakikilala mo ang isang kaibigan sa isang tao sa party:
- **System message**: "Ito ang kaibigan kong si Sarah, isa siyang doktor na mahusay magpaliwanag ng mga konsepto sa medisina sa simpleng paraan"
- **User message**: "Paano gumagana ang mga bakuna?"
- **Assistant response**: Sumagot si Sarah bilang isang magiliw na doktor, hindi bilang abogado o chef
### Pag-unawa sa AI Parameters: Fine-Tuning ng Ugali ng Pagsagot
Ang mga numerikal na parameter sa AI API calls ay kumokontrol kung paano bumubuo ng sagot ang model. Ang mga setting na ito ay nagbibigay-daan sa iyo na i-adjust ang ugali ng AI para sa iba't ibang gamit:
#### Temperature (0.0 hanggang 2.0): Ang Creativity Dial
**Ano ang ginagawa nito**: Kinokontrol kung gaano ka-creative o predictable ang mga sagot ng AI.
**Isipin ito na parang antas ng improvisation ng jazz musician:**
- **Temperature = 0.1**: Tumutugtog ng eksaktong parehong melody tuwing (sobrang predictable)
- **Temperature = 0.7**: Nagdadagdag ng ilang tasteful variations habang nananatiling recognizable (balanced creativity)
- **Temperature = 1.5**: Buong experimental jazz na may hindi inaasahang liko (sobrang unpredictable)
```python
# Very predictable responses (good for factual questions)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Will almost always say "4"
)
# Creative responses (good for brainstorming)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Will generate unique, unexpected stories
)
```
#### Max Tokens (1 hanggang 4096+): Ang Controller ng Haba ng Sagot
**Ano ang ginagawa nito**: Naglalagay ng limitasyon sa haba ng sagot ng AI.
**Isipin ang tokens na halos katumbas ng mga salita** (mga 1 token = 0.75 na salita sa Ingles):
- **max_tokens=50**: Maikli at direkta (parang text message)
- **max_tokens=500**: Isang magandang talata o dalawa
- **max_tokens=2000**: Isang detalyadong paliwanag na may mga halimbawa
```python
# Short, concise answers
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Forces a brief explanation
)
# Detailed, comprehensive answers
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Allows for detailed explanations with examples
)
```
#### Top_p (0.0 hanggang 1.0): Ang Parameter ng Focus
**Ano ang ginagawa nito**: Kinokontrol kung gaano ka-focus ang AI sa mga pinaka-malamang na sagot.
**Isipin ang AI na may napakalaking bokabularyo, niraranggo ayon sa kung gaano ka-malamang ang bawat salita:**
- **top_p=0.1**: Tanging isinasaalang-alang ang top 10% na pinaka-malamang na salita (sobrang focus)
- **top_p=0.9**: Isinasaalang-alang ang 90% ng posibleng salita (mas creative)
- **top_p=1.0**: Isinasaalang-alang ang lahat (maximum variety)
**Halimbawa**: Kung magtanong ka ng "Ang langit ay karaniwang..."
- **Mababang top_p**: Halos tiyak na sasabihin "asul"
- **Mataas na top_p**: Maaaring sabihin "asul", "maulap", "malawak", "nagbabago", "maganda", atbp.
### Pagsasama-sama: Mga Kombinasyon ng Parameter para sa Iba't Ibang Gamit
```python
# For factual, consistent answers (like a documentation bot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# For creative writing assistance
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# For conversational, helpful responses (balanced)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
```
```mermaid
quadrantChart
title AI Parameter Optimization Matrix
x-axis Low Creativity --> High Creativity
y-axis Short Response --> Long Response
quadrant-1 Creative Content
quadrant-2 Detailed Analysis
quadrant-3 Quick Facts
quadrant-4 Conversational AI
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]
```
**Pag-unawa kung bakit mahalaga ang mga parameter na ito**: Ang iba't ibang aplikasyon ay nangangailangan ng iba't ibang uri ng sagot. Ang customer service bot ay dapat na consistent at factual (mababang temperature), habang ang creative writing assistant ay dapat na imaginative at varied (mataas na temperature). Ang pag-unawa sa mga parameter na ito ay nagbibigay sa iyo ng kontrol sa personalidad at istilo ng sagot ng 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))
```
**Pag-unawa sa pinahusay na function na ito:**
- **Tumatanggap** ng dalawang parameter: ang prompt ng user at isang optional na system message
- **Nagbibigay** ng default na system message para sa pangkalahatang assistant behavior
- **Gumagamit** ng tamang Python type hints para sa mas mahusay na dokumentasyon ng code
- **Nagbabalik** ng response content lamang, na ginagawang madali itong gamitin sa ating web API
- **Pinapanatili** ang parehong model parameters para sa consistent na ugali ng AI
### Ang Magic ng System Prompts: Pag-program ng Personalidad ng AI
Kung ang mga parameter ang kumokontrol kung paano mag-isip ang AI, ang system prompts ang kumokontrol kung sino ang iniisip ng AI na siya. Isa ito sa pinakakapanapanabik na bahagi ng pagtatrabaho sa AI β parang binibigyan mo ang AI ng kumpletong personalidad, antas ng expertise, at istilo ng komunikasyon.
**Isipin ang system prompts na parang pag-cast ng iba't ibang aktor para sa iba't ibang role**: Sa halip na magkaroon ng isang generic na assistant, maaari kang lumikha ng mga espesyalista para sa iba't ibang sitwasyon. Kailangan mo ba ng pasensyosong guro? Isang creative brainstorming partner? Isang seryosong business advisor? Palitan lang ang system prompt!
#### Bakit Napakalakas ng System Prompts
Narito ang kamangha-manghang bahagi: Ang AI models ay sinanay sa napakaraming usapan kung saan ang mga tao ay nag-a-adopt ng iba't ibang role at antas ng expertise. Kapag binigyan mo ang AI ng partikular na role, parang pinipindot mo ang switch na nag-a-activate sa lahat ng natutunang pattern.
**Parang method acting para sa AI**: Sabihin sa aktor "ikaw ay isang matalinong propesor" at panoorin kung paano nila awtomatikong ina-adjust ang kanilang postura, bokabularyo, at kilos. Ginagawa ng AI ang isang bagay na kahanga-hanga sa mga pattern ng wika.
#### Paglikha ng Epektibong System Prompts: Ang Art at Science
**Ang anatomy ng mahusay na system prompt:**
1. **Role/Identity**: Sino ang AI?
2. **Expertise**: Ano ang alam nila?
3. **Communication style**: Paano sila magsalita?
4. **Specific instructions**: Ano ang dapat nilang pagtuunan?
```python
# β Vague system prompt
"You are helpful."
# β Detailed, effective system prompt
"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."
```
#### Mga Halimbawa ng System Prompt na may Konteksto
Tingnan natin kung paano ang iba't ibang system prompts ay lumilikha ng ganap na magkakaibang personalidad ng AI:
```python
# Example 1: The Patient Teacher
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.
"""
# Example 2: The Creative Collaborator
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.
"""
# Example 3: The Strategic Business Advisor
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.
"""
```
#### Nakikita ang System Prompts sa Aksyon
Subukan natin ang parehong tanong gamit ang iba't ibang system prompts upang makita ang dramatikong pagkakaiba:
**Tanong**: "Paano ko hahawakan ang user authentication sa aking web app?"
```python
# With teacher prompt:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Typical response: "Great question! Let's break authentication down into simple steps.
# Think of it like a nightclub bouncer checking IDs..."
# With business prompt:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Typical response: "From a strategic perspective, authentication is crucial for user
# trust and regulatory compliance. Let me outline a framework considering security,
# user experience, and scalability..."
```
#### Mga Advanced na Teknik sa System Prompt
**1. Pag-set ng Konteksto**: Bigyan ang AI ng background information
```python
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. Pag-format ng Output**: Sabihin sa AI kung paano istruktura ang mga sagot
```python
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. Pag-set ng Constraint**: Tukuyin kung ano ang HINDI dapat gawin ng AI
```python
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.
"""
```
#### Bakit Mahalaga Ito para sa Iyong Chat Assistant
Ang pag-unawa sa mga system prompt ay nagbibigay sa iyo ng kapangyarihang lumikha ng mga espesyal na AI assistant:
- **Bot para sa Serbisyo sa Customer**: Matulungin, pasensyoso, may kaalaman sa mga patakaran
- **Tutor sa Pag-aaral**: Nakakaengganyo, hakbang-hakbang, sinusuri ang pag-unawa
- **Kasamang Malikhain**: Imaginative, nagtatayo sa mga ideya, nagtatanong ng "paano kung?"
- **Eksperto sa Teknolohiya**: Eksakto, detalyado, may kamalayan sa seguridad
**Ang mahalagang insight**: Hindi ka lang tumatawag sa isang AI API β gumagawa ka ng custom na AI personality na tumutugon sa iyong partikular na layunin. Ito ang dahilan kung bakit ang mga modernong AI application ay nararamdaman na akma at kapaki-pakinabang sa halip na generic.
### π― Pedagogical Check-in: Pag-program ng AI Personality
**Huminto at Magnilay**: Natutunan mo lang kung paano i-program ang mga AI personality gamit ang mga system prompt. Ito ay isang pangunahing kasanayan sa modernong pag-develop ng AI application.
**Mabilis na Pagsusuri sa Sarili**:
- Kaya mo bang ipaliwanag kung paano naiiba ang mga system prompt sa mga regular na mensahe ng user?
- Ano ang pagkakaiba ng temperature at top_p parameters?
- Paano ka gagawa ng system prompt para sa isang partikular na layunin (halimbawa, coding tutor)?
**Koneksyon sa Tunay na Mundo**: Ang mga teknik sa system prompt na natutunan mo ay ginagamit sa bawat pangunahing AI application - mula sa coding assistance ng GitHub Copilot hanggang sa conversational interface ng ChatGPT. Master mo na ang parehong mga pattern na ginagamit ng mga AI product team sa malalaking tech na kumpanya.
**Tanong sa Hamon**: Paano mo ididisenyo ang iba't ibang AI personality para sa iba't ibang uri ng user (baguhan vs eksperto)? Isaalang-alang kung paano maaaring maglingkod ang parehong AI model sa iba't ibang audience sa pamamagitan ng prompt engineering.
## Pagbuo ng Web API gamit ang FastAPI: Ang Iyong High-Performance AI Communication Hub
Ngayon, magtatayo tayo ng backend na kumokonekta sa iyong frontend sa mga AI service. Gagamit tayo ng FastAPI, isang modernong Python framework na mahusay sa pagbuo ng mga API para sa mga AI application.
Nag-aalok ang FastAPI ng ilang mga benepisyo para sa ganitong uri ng proyekto: built-in async support para sa paghawak ng sabay-sabay na mga request, awtomatikong pagbuo ng API documentation, at mahusay na performance. Ang iyong FastAPI server ang magsisilbing tagapamagitan na tumatanggap ng mga request mula sa frontend, nakikipag-ugnayan sa mga AI service, at nagbabalik ng mga formatted na sagot.
### Bakit FastAPI para sa AI Applications?
Maaaring iniisip mo: "Hindi ba pwedeng tawagan ko na lang ang AI direkta mula sa aking frontend JavaScript?" o "Bakit FastAPI sa halip na Flask o Django?" Magandang tanong!
**Narito kung bakit perpekto ang FastAPI para sa ating binubuo:**
- **Async by default**: Kayang hawakan ang maraming AI request nang sabay-sabay nang hindi natatali
- **Automatic docs**: Bisitahin ang `/docs` at makakakuha ng maganda, interactive na API documentation page nang libre
- **Built-in validation**: Nahuhuli ang mga error bago ito magdulot ng problema
- **Napakabilis**: Isa sa pinakamabilis na Python frameworks
- **Modern Python**: Gumagamit ng lahat ng pinakabagong feature ng Python
**At narito kung bakit kailangan natin ng backend:**
**Seguridad**: Ang iyong AI API key ay parang password β kung ilalagay mo ito sa frontend JavaScript, maaaring makita ito ng sinuman na tumitingin sa source code ng iyong website at gamitin ang iyong AI credits. Ang backend ang nagtatago ng mga sensitibong kredensyal.
**Rate Limiting & Control**: Ang backend ang nagbibigay-daan sa iyo na kontrolin kung gaano kadalas maaaring mag-request ang mga user, magpatupad ng user authentication, at magdagdag ng logging para subaybayan ang paggamit.
**Pagproseso ng Data**: Maaaring gusto mong i-save ang mga pag-uusap, i-filter ang hindi naaangkop na content, o pagsamahin ang maraming AI service. Ang backend ang lugar kung saan naninirahan ang logic na ito.
**Ang arkitektura ay kahawig ng client-server model:**
- **Frontend**: Layer ng user interface para sa interaksyon
- **Backend API**: Layer ng pagproseso ng request at routing
- **AI Service**: Panlabas na computation at pagbuo ng sagot
- **Environment Variables**: Secure na configuration at storage ng kredensyal
### Pag-unawa sa Request-Response Flow
Subaybayan natin kung ano ang nangyayari kapag ang isang user ay nagpadala ng mensahe:
```mermaid
sequenceDiagram
participant User as π€ User
participant Frontend as π Frontend
participant API as π§ FastAPI Server
participant AI as π€ AI Service
User->>Frontend: Types "Hello AI!"
Frontend->>API: POST /hello {"message": "Hello AI!"}
Note over API: Validates request Adds system prompt
API->>AI: Sends formatted request
AI->>API: Returns AI response
Note over API: Processes response Logs conversation
API->>Frontend: {"response": "Hello! How can I help?"}
Frontend->>User: Displays AI message
```
**Pag-unawa sa bawat hakbang:**
1. **Interaksyon ng User**: Nagta-type ang tao sa chat interface
2. **Pagproseso ng Frontend**: Kinukuha ng JavaScript ang input at inaayos ito bilang JSON
3. **Pag-validate ng API**: Awtomatikong sine-check ng FastAPI ang request gamit ang Pydantic models
4. **AI integration**: Idinadagdag ng backend ang context (system prompt) at tinatawag ang AI service
5. **Paghawak ng Sagot**: Tinatanggap ng API ang sagot ng AI at maaaring baguhin ito kung kinakailangan
6. **Pag-display sa Frontend**: Ipinapakita ng JavaScript ang sagot sa chat interface
### Pag-unawa sa API Architecture
```mermaid
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: API request
GitHub Models->>AI Function: AI response
AI Function->>FastAPI: response text
FastAPI->>Frontend: {"response": "Hello! How can I help?"}
```
```mermaid
flowchart TD
A[User Input] --> B[Frontend Validation]
B --> C[HTTP POST Request]
C --> D[FastAPI Router]
D --> E[Pydantic Validation]
E --> F[AI Function Call]
F --> G[GitHub Models API]
G --> H[Response Processing]
H --> I[JSON Response]
I --> J[Frontend Update]
subgraph "Security Layer"
K[CORS Middleware]
L[Environment Variables]
M[Error Handling]
end
D --> K
F --> L
H --> M
```
### Paglikha ng FastAPI Application
Gawin natin ang API step by step. Gumawa ng file na tinatawag na `api.py` gamit ang sumusunod na FastAPI code:
```python
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Create FastAPI application
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Configure CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Configure appropriately for production
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic models for request/response validation
class ChatMessage(BaseModel):
message: str
class ChatResponse(BaseModel):
response: str
@app.get("/")
async def root():
"""Root endpoint providing API information."""
return {
"message": "Welcome to the AI Chat API",
"docs": "/docs",
"health": "/health"
}
@app.get("/health")
async def health_check():
"""Health check endpoint."""
return {"status": "healthy", "service": "ai-chat-api"}
@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
"""Main chat endpoint that processes messages and returns AI responses."""
try:
# Extract and validate message
message = chat_message.message.strip()
if not message:
raise HTTPException(status_code=400, detail="Message cannot be empty")
logger.info(f"Processing message: {message[:50]}...")
# Call AI service (note: call_llm should be made async for better performance)
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
logger.info("AI response generated successfully")
return ChatResponse(response=ai_response)
except HTTPException:
raise
except Exception as e:
logger.error(f"Error processing chat message: {str(e)}")
raise HTTPException(status_code=500, detail="Internal server error")
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
```
**Pag-unawa sa implementasyon ng FastAPI:**
- **Imports** FastAPI para sa modernong functionality ng web framework at Pydantic para sa data validation
- **Nagbibigay** ng awtomatikong API documentation (available sa `/docs` kapag tumatakbo ang server)
- **Nag-enable** ng CORS middleware para payagan ang mga request ng frontend mula sa iba't ibang pinagmulan
- **Nagde-define** ng Pydantic models para sa awtomatikong validation ng request/response at documentation
- **Gumagamit** ng async endpoints para sa mas mahusay na performance sa sabay-sabay na mga request
- **Nag-implement** ng tamang HTTP status codes at error handling gamit ang HTTPException
- **Naglalaman** ng structured logging para sa monitoring at debugging
- **Nagbibigay** ng health check endpoint para sa monitoring ng status ng serbisyo
**Mga pangunahing benepisyo ng FastAPI kumpara sa tradisyunal na mga framework:**
- **Awtomatikong validation**: Tinitiyak ng Pydantic models ang integridad ng data bago ito iproseso
- **Interactive docs**: Bisitahin ang `/docs` para sa auto-generated, testable API documentation
- **Type safety**: Ang Python type hints ay pumipigil sa runtime errors at nagpapabuti sa kalidad ng code
- **Async support**: Kayang hawakan ang maraming AI request nang sabay-sabay nang hindi natatali
- **Performance**: Mas mabilis ang pagproseso ng request para sa real-time na mga application
### Pag-unawa sa CORS: Ang Security Guard ng Web
Ang CORS (Cross-Origin Resource Sharing) ay parang security guard sa isang gusali na nagche-check kung pinapayagan ang mga bisita na pumasok. Unawain natin kung bakit ito mahalaga at paano ito nakakaapekto sa iyong application.
#### Ano ang CORS at Bakit Ito Umiiral?
**Ang Problema**: Isipin kung ang anumang website ay maaaring mag-request sa website ng iyong bangko sa ngalan mo nang walang pahintulot. Isang security nightmare iyon! Pinipigilan ito ng mga browser sa pamamagitan ng "Same-Origin Policy."
**Same-Origin Policy**: Pinapayagan lang ng mga browser ang mga web page na mag-request sa parehong domain, port, at protocol kung saan sila na-load.
**Real-world analogy**: Parang security sa apartment building β ang mga residente (same origin) lang ang maaaring pumasok sa gusali bilang default. Kung gusto mong papasukin ang isang kaibigan (different origin), kailangan mong sabihin sa security na okay lang.
#### CORS sa Iyong Development Environment
Sa panahon ng development, ang iyong frontend at backend ay tumatakbo sa iba't ibang ports:
- Frontend: `http://localhost:3000` (o file:// kung direktang binubuksan ang HTML)
- Backend: `http://localhost:5000`
Ang mga ito ay itinuturing na "magkaibang origins" kahit na nasa parehong computer!
```python
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # This tells browsers: "It's okay for other origins to make requests to this API"
```
**Ano ang ginagawa ng CORS configuration sa praktika:**
- **Nagdadagdag** ng espesyal na HTTP headers sa mga API response na nagsasabi sa mga browser "pinapayagan ang cross-origin request na ito"
- **Humahawak** ng "preflight" requests (minsan sine-check ng mga browser ang permissions bago magpadala ng aktwal na request)
- **Pinipigilan** ang nakakatakot na "blocked by CORS policy" error sa iyong browser console
#### Seguridad ng CORS: Development vs Production
```python
# π¨ Development: Allows ALL origins (convenient but insecure)
CORS(app)
# β Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# π Advanced: Different origins for different environments
if app.debug: # Development mode
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Production mode
CORS(app, origins=["https://yourdomain.com"])
```
**Bakit ito mahalaga**: Sa development, ang `CORS(app)` ay parang iniwang bukas ang pintuan β maginhawa pero hindi secure. Sa production, gusto mong tukuyin nang eksakto kung aling mga website ang maaaring makipag-usap sa iyong API.
#### Karaniwang CORS Scenarios at Solusyon
| Scenario | Problema | Solusyon |
|----------|---------|----------|
| **Local Development** | Hindi maabot ng frontend ang backend | Magdagdag ng CORSMiddleware sa FastAPI |
| **GitHub Pages + Heroku** | Hindi maabot ng deployed frontend ang API | Idagdag ang URL ng GitHub Pages sa CORS origins |
| **Custom Domain** | CORS errors sa production | I-update ang CORS origins para tumugma sa iyong domain |
| **Mobile App** | Hindi maabot ng app ang web API | Idagdag ang domain ng iyong app o gamitin ang `*` nang maingat |
**Pro tip**: Maaari mong i-check ang CORS headers sa Developer Tools ng iyong browser sa ilalim ng Network tab. Hanapin ang headers tulad ng `Access-Control-Allow-Origin` sa response.
### Pag-handle ng Error at Validation
Pansinin kung paano ang ating API ay may tamang pag-handle ng error:
```python
# Validate that we received a message
if not message:
return jsonify({"error": "Message field is required"}), 400
```
**Mga pangunahing prinsipyo ng validation:**
- **Sine-check** ang mga kinakailangang field bago iproseso ang mga request
- **Nagbabalik** ng makabuluhang error messages sa JSON format
- **Gumagamit** ng tamang HTTP status codes (400 para sa bad requests)
- **Nagbibigay** ng malinaw na feedback para matulungan ang mga frontend developer na mag-debug ng mga isyu
## Pag-set Up at Pagpapatakbo ng Iyong Backend
Ngayon na mayroon na tayong AI integration at FastAPI server, simulan natin ang lahat. Ang proseso ng setup ay kinabibilangan ng pag-install ng Python dependencies, pag-configure ng environment variables, at pagsisimula ng development server.
### Python Environment Setup
I-set up natin ang iyong Python development environment. Ang virtual environments ay parang compartmentalized approach ng Manhattan Project β bawat proyekto ay may sariling isolated space na may partikular na tools at dependencies, na pumipigil sa mga conflict sa pagitan ng iba't ibang proyekto.
```bash
# Navigate to your backend directory
cd backend
# Create a virtual environment (like creating a clean room for your project)
python -m venv venv
# Activate it (Linux/Mac)
source ./venv/bin/activate
# On Windows, use:
# venv\Scripts\activate
# Install the good stuff
pip install openai fastapi uvicorn python-dotenv
```
**Ano ang ginawa natin:**
- **Gumawa** ng sarili nating Python bubble kung saan maaari tayong mag-install ng mga package nang hindi naaapektuhan ang iba
- **In-activate** ito para malaman ng terminal na gamitin ang partikular na environment na ito
- **Nag-install** ng mga essentials: OpenAI para sa AI magic, FastAPI para sa ating web API, Uvicorn para sa pagpapatakbo nito, at python-dotenv para sa secure na pamamahala ng mga secrets
**Mga pangunahing dependencies na ipinaliwanag:**
- **FastAPI**: Modernong, mabilis na web framework na may awtomatikong API documentation
- **Uvicorn**: Napakabilis na ASGI server na nagpapatakbo ng FastAPI applications
- **OpenAI**: Opisyal na library para sa GitHub Models at OpenAI API integration
- **python-dotenv**: Secure na pag-load ng environment variables mula sa .env files
### Configuration ng Environment: Panatilihing Ligtas ang Mga Secrets
Bago natin simulan ang API, pag-usapan natin ang isa sa pinakamahalagang aral sa web development: kung paano panatilihing talagang sikreto ang iyong mga secrets. Ang environment variables ay parang secure vault na ang iyong application lang ang may access.
#### Ano ang Environment Variables?
**Isipin ang environment variables na parang safety deposit box** β inilalagay mo ang iyong mahalagang bagay doon, at ikaw (at ang iyong app) lang ang may susi para makuha ito. Sa halip na isulat ang sensitibong impormasyon nang direkta sa iyong code (kung saan makikita ito ng kahit sino), itinatago mo ito nang ligtas sa environment.
**Narito ang pagkakaiba:**
- **Maling paraan**: Isinusulat ang iyong password sa sticky note at inilalagay ito sa monitor
- **Tamang paraan**: Itinatago ang iyong password sa secure na password manager na ikaw lang ang may access
#### Bakit Mahalaga ang Environment Variables
```python
# π¨ NEVER DO THIS - API key visible to everyone
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Anyone can steal this!
base_url="https://models.github.ai/inference"
)
# β DO THIS - API key stored securely
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Only your app can access this
base_url="https://models.github.ai/inference"
)
```
**Ano ang mangyayari kapag hardcoded ang secrets:**
1. **Exposure sa version control**: Makikita ng sinuman na may access sa iyong Git repository ang iyong API key
2. **Public repositories**: Kapag na-push sa GitHub, makikita ng buong internet ang iyong key
3. **Team sharing**: Ang ibang developer na nagtatrabaho sa iyong proyekto ay magkakaroon ng access sa iyong personal na API key
4. **Security breaches**: Kapag ninakaw ang iyong API key, magagamit nila ang iyong AI credits
#### Pag-set Up ng Iyong Environment File
Gumawa ng `.env` file sa iyong backend directory. Ang file na ito ang nagtatago ng iyong mga secrets nang lokal:
```bash
# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
```
**Pag-unawa sa .env file:**
- **Isang secret kada linya** sa `KEY=value` format
- **Walang spaces** sa paligid ng equals sign
- **Walang quotes** na kailangan sa paligid ng values (karaniwan)
- **Mga komento** ay nagsisimula sa `#`
#### Paglikha ng Iyong GitHub Personal Access Token
Ang iyong GitHub token ay parang espesyal na password na nagbibigay ng pahintulot sa iyong application na gamitin ang mga AI service ng GitHub:
**Step-by-step na paglikha ng token:**
1. **Pumunta sa GitHub Settings** β Developer settings β Personal access tokens β Tokens (classic)
2. **I-click ang "Generate new token (classic)"**
3. **I-set ang expiration** (30 araw para sa testing, mas mahaba para sa production)
4. **Piliin ang scopes**: I-check ang "repo" at anumang iba pang permissions na kailangan mo
5. **I-generate ang token** at kopyahin ito kaagad (hindi mo na ito makikita ulit!)
6. **I-paste sa iyong .env file**
```bash
# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
```
#### Pag-load ng Environment Variables sa Python
```python
import os
from dotenv import load_dotenv
# Load environment variables from .env file
load_dotenv()
# Now you can access them securely
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
raise ValueError("GITHUB_TOKEN not found in environment variables!")
client = OpenAI(
api_key=api_key,
base_url="https://models.github.ai/inference"
)
```
**Ano ang ginagawa ng code na ito:**
- **Naglo-load** ng iyong .env file at ginagawang available ang variables sa Python
- **Sine-check** kung umiiral ang kinakailangang token (magandang pag-handle ng error!)
- **Nag-raise** ng malinaw na error kung nawawala ang token
- **Gumagamit** ng token nang ligtas nang hindi ito inilalantad sa code
#### Seguridad ng Git: Ang .gitignore File
Ang iyong `.gitignore` file ang nagsasabi sa Git kung aling mga file ang hindi kailanman dapat i-track o i-upload:
```bash
# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
```
**Bakit ito mahalaga**: Kapag idinagdag mo ang `.env` sa `.gitignore`, i-ignore ng Git ang iyong environment file, pinipigilan kang aksidenteng ma-upload ang iyong secrets sa GitHub.
#### Iba't ibang Environment, Iba't ibang Secrets
Ang mga propesyonal na application ay gumagamit ng iba't ibang API keys para sa iba't ibang environment:
```bash
# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.production
GITHUB_TOKEN=your_production_token
DEBUG=False
```
**Bakit ito mahalaga**: Ayaw mong maapektuhan ng iyong development experiments ang iyong production AI usage quota, at gusto mo ng iba't ibang antas ng seguridad para sa iba't ibang environment.
### Pagsisimula ng Iyong Development Server: Pagbibigay-buhay sa Iyong FastAPI
Ngayon ay dumating na ang kapanapanabik na sandali β simulan ang iyong FastAPI development server at makita ang iyong AI integration na gumagana! Ang FastAPI ay gumagamit ng Uvicorn, isang napakabilis na ASGI server na partikular na idinisenyo para sa async Python applications.
#### Pag-unawa sa Proseso ng Startup ng FastAPI Server
```bash
# Method 1: Direct Python execution (includes auto-reload)
python api.py
# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
```
Kapag pinatakbo mo ang command na ito, narito ang nangyayari sa likod ng eksena:
**1. I-load ng Python ang iyong FastAPI application**:
- Ini-import ang lahat ng kinakailangang library (FastAPI, Pydantic, OpenAI, atbp.)
- I-load ang mga environment variable mula sa iyong `.env` file
- Gumagawa ng FastAPI application instance na may awtomatikong dokumentasyon
**2. I-configure ng Uvicorn ang ASGI server**:
- Kumokonekta sa port 5000 na may kakayahan sa async request handling
- Nagse-set up ng request routing na may awtomatikong validation
- Pinapagana ang hot reload para sa development (nagre-restart kapag may pagbabago sa file)
- Gumagawa ng interactive API documentation
**3. Nagsisimula ang server sa pakikinig**:
- Makikita mo sa terminal: `INFO: Uvicorn running on http://0.0.0.0:5000`
- Kaya ng server na mag-handle ng maraming sabay-sabay na AI requests
- Handa na ang iyong API na may awtomatikong dokumentasyon sa `http://localhost:5000/docs`
#### Ano ang Dapat Mong Makita Kapag Lahat ay Gumagana
```bash
$ 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.
```
**Pag-unawa sa output ng FastAPI**:
- **Magbabantay para sa mga pagbabago**: Naka-enable ang auto-reload para sa development
- **Uvicorn running**: Aktibo ang high-performance ASGI server
- **Nagsimula ang reloader process**: File watcher para sa awtomatikong restart
- **Application startup complete**: Matagumpay na na-initialize ang FastAPI app
- **Interactive docs available**: Bisitahin ang `/docs` para sa awtomatikong API documentation
#### Pagsubok sa Iyong FastAPI: Maraming Makapangyarihang Paraan
Nagbibigay ang FastAPI ng ilang maginhawang paraan para subukan ang iyong API, kabilang ang awtomatikong interactive documentation:
**Paraan 1: Interactive API Documentation (Inirerekomenda)**
1. Buksan ang iyong browser at pumunta sa `http://localhost:5000/docs`
2. Makikita mo ang Swagger UI na may dokumentasyon ng lahat ng iyong endpoints
3. I-click ang `/hello` β "Try it out" β Maglagay ng test message β "Execute"
4. Makikita ang response direkta sa browser na may tamang formatting
**Paraan 2: Basic Browser Test**
1. Pumunta sa `http://localhost:5000` para sa root endpoint
2. Pumunta sa `http://localhost:5000/health` para i-check ang server health
3. Kinukumpirma nito na gumagana nang maayos ang iyong FastAPI server
**Paraan 3: Command Line Test (Advanced)**
```bash
# Test with curl (if available)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Expected response:
# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
```
**Paraan 4: Python Test Script**
```python
# test_api.py - Create this file to test your API
import requests
import json
# Test the API endpoint
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)
```
#### Pag-aayos ng Karaniwang Startup Issues
| Error Message | Ano ang Kahulugan | Paano Ayusin |
|---------------|-------------------|--------------|
| `ModuleNotFoundError: No module named 'fastapi'` | Hindi naka-install ang FastAPI | Patakbuhin ang `pip install fastapi uvicorn` sa iyong virtual environment |
| `ModuleNotFoundError: No module named 'uvicorn'` | Hindi naka-install ang ASGI server | Patakbuhin ang `pip install uvicorn` sa iyong virtual environment |
| `KeyError: 'GITHUB_TOKEN'` | Hindi natagpuan ang environment variable | I-check ang iyong `.env` file at `load_dotenv()` call |
| `Address already in use` | Abala ang port 5000 | Patayin ang ibang proseso na gumagamit ng port 5000 o palitan ang port |
| `ValidationError` | Hindi tugma ang request data sa Pydantic model | I-check ang format ng iyong request na tumutugma sa inaasahang schema |
| `HTTPException 422` | Hindi maiproseso ang entity | Nabigo ang request validation, i-check ang `/docs` para sa tamang format |
| `OpenAI API error` | Nabigo ang authentication ng AI service | Siguraduhin na tama ang iyong GitHub token at may tamang permissions |
#### Mga Best Practices sa Development
**Hot Reloading**: Ang FastAPI na may Uvicorn ay nagbibigay ng awtomatikong pag-reload kapag nag-save ka ng mga pagbabago sa iyong Python files. Nangangahulugan ito na maaari mong baguhin ang iyong code at subukan agad nang hindi mano-manong nire-restart.
```python
# Enable hot reloading explicitly
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True enables hot reload
```
**Logging para sa Development**: Magdagdag ng logging para maunawaan kung ano ang nangyayari:
```python
import logging
# Set up logging
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
```
**Bakit nakakatulong ang logging**: Sa panahon ng development, makikita mo kung anong mga request ang pumapasok, kung ano ang sagot ng AI, at kung saan nagkakaroon ng errors. Pinapabilis nito ang debugging.
### Pag-configure para sa GitHub Codespaces: Madaling Cloud Development
Ang GitHub Codespaces ay parang pagkakaroon ng makapangyarihang development computer sa cloud na ma-access mo mula sa anumang browser. Kung nagtatrabaho ka sa Codespaces, may ilang karagdagang hakbang para gawing accessible ang iyong backend sa iyong frontend.
#### Pag-unawa sa Codespaces Networking
Sa lokal na development environment, lahat ay tumatakbo sa parehong computer:
- Backend: `http://localhost:5000`
- Frontend: `http://localhost:3000` (o file://)
Sa Codespaces, ang iyong development environment ay tumatakbo sa mga server ng GitHub, kaya ang "localhost" ay may ibang kahulugan. Awtomatikong gumagawa ang GitHub ng mga pampublikong URL para sa iyong mga serbisyo, ngunit kailangan mo itong i-configure nang maayos.
#### Step-by-Step Codespaces Configuration
**1. Simulan ang iyong backend server**:
```bash
cd backend
python api.py
```
Makikita mo ang pamilyar na FastAPI/Uvicorn startup message, ngunit mapapansin mong tumatakbo ito sa loob ng Codespace environment.
**2. I-configure ang visibility ng port**:
- Hanapin ang "Ports" tab sa ibabang panel ng VS Code
- Hanapin ang port 5000 sa listahan
- I-right-click ang port 5000
- Piliin ang "Port Visibility" β "Public"
**Bakit gawing pampubliko?** Sa default, ang mga Codespace port ay pribado (accessible lamang sa iyo). Ang paggawa nito na pampubliko ay nagpapahintulot sa iyong frontend (na tumatakbo sa browser) na makipag-ugnayan sa iyong backend.
**3. Kunin ang iyong pampublikong URL**:
Pagkatapos gawing pampubliko ang port, makakakita ka ng URL tulad ng:
```
https://your-codespace-name-5000.app.github.dev
```
**4. I-update ang iyong frontend configuration**:
```javascript
// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
```
#### Pag-unawa sa Codespace URLs
Ang Codespace URLs ay sumusunod sa predictable na pattern:
```
https://[codespace-name]-[port].app.github.dev
```
**Pag-unawa dito**:
- `codespace-name`: Isang natatanging identifier para sa iyong Codespace (karaniwang kasama ang iyong username)
- `port`: Ang numero ng port kung saan tumatakbo ang iyong serbisyo (5000 para sa aming FastAPI app)
- `app.github.dev`: Domain ng GitHub para sa Codespace applications
#### Pagsubok sa Iyong Codespace Setup
**1. Subukan ang backend direkta**:
Buksan ang iyong pampublikong URL sa bagong browser tab. Dapat mong makita:
```
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
```
**2. Subukan gamit ang browser developer tools**:
```javascript
// Open browser console and test your 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));
```
#### Codespaces vs Lokal na Development
| Aspeto | Lokal na Development | GitHub Codespaces |
|--------|-----------------------|-------------------|
| **Setup Time** | Mas matagal (install Python, dependencies) | Instant (pre-configured environment) |
| **URL Access** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
| **Port Configuration** | Automatic | Manual (gawing pampubliko ang ports) |
| **File Persistence** | Lokal na makina | GitHub repository |
| **Collaboration** | Mahirap i-share ang environment | Madaling i-share ang Codespace link |
| **Internet Dependency** | Para lamang sa AI API calls | Kinakailangan para sa lahat |
#### Mga Tips sa Codespace Development
**Environment Variables sa Codespaces**:
Ang iyong `.env` file ay gumagana nang pareho sa Codespaces, ngunit maaari ka ring mag-set ng environment variables direkta sa Codespace:
```bash
# Set environment variable for the current session
export GITHUB_TOKEN="your_token_here"
# Or add to your .bashrc for persistence
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
```
**Port Management**:
- Awtomatikong nadedetect ng Codespaces kapag nagsimula ang iyong application sa pakikinig sa isang port
- Maaari kang mag-forward ng maraming ports nang sabay-sabay (kapaki-pakinabang kung magdadagdag ka ng database sa hinaharap)
- Ang mga ports ay nananatiling accessible hangga't tumatakbo ang iyong Codespace
**Development Workflow**:
1. Gumawa ng mga pagbabago sa code sa VS Code
2. Awtomatikong nagre-reload ang FastAPI (salamat sa reload mode ng Uvicorn)
3. Subukan agad ang mga pagbabago sa pamamagitan ng pampublikong URL
4. I-commit at i-push kapag handa na
> π‘ **Pro Tip**: I-bookmark ang iyong Codespace backend URL sa panahon ng development. Dahil stable ang Codespace names, hindi magbabago ang URL hangga't ginagamit mo ang parehong Codespace.
## Paglikha ng Frontend Chat Interface: Kung Saan Nagkikita ang Tao at AI
Ngayon ay gagawin natin ang user interface β ang bahagi na tumutukoy kung paano nakikipag-ugnayan ang mga tao sa iyong AI assistant. Tulad ng disenyo ng orihinal na interface ng iPhone, magpo-focus tayo sa paggawa ng kumplikadong teknolohiya na intuitive at natural gamitin.
### Pag-unawa sa Modern Frontend Architecture
Ang ating chat interface ay magiging tinatawag na "Single Page Application" o SPA. Sa halip na lumang paraan kung saan bawat click ay naglo-load ng bagong page, ang ating app ay nag-a-update nang maayos at instant:
**Lumang websites**: Parang nagbabasa ng pisikal na libro β nagbabago ka ng buong pahina
**Ang ating chat app**: Parang gumagamit ng iyong telepono β lahat ay dumadaloy at nag-a-update nang maayos
```mermaid
graph TD
A[User Types Message] --> B[JavaScript Captures Input]
B --> C[Validate & Format Data]
C --> D[Send to Backend API]
D --> E[Display Loading State]
E --> F[Receive AI Response]
F --> G[Update Chat Interface]
G --> H[Ready for Next Message]
```
```mermaid
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 : manipulates
ChatApp --> FastAPI : sends requests
```
### Ang Tatlong Haligi ng Frontend Development
Ang bawat frontend application β mula sa simpleng websites hanggang sa mga kumplikadong apps tulad ng Discord o Slack β ay binubuo ng tatlong pangunahing teknolohiya. Isipin ang mga ito bilang pundasyon ng lahat ng nakikita at nakikipag-ugnayan sa web:
**HTML (Structure)**: Ito ang iyong pundasyon
- Nagpapasya kung anong mga elemento ang umiiral (mga button, text areas, containers)
- Nagbibigay ng kahulugan sa content (ito ay header, ito ay form, atbp.)
- Gumagawa ng pangunahing istruktura na binubuo ng lahat ng iba pa
**CSS (Presentation)**: Ito ang iyong interior designer
- Ginagawang maganda ang lahat (kulay, font, layout)
- Nagha-handle ng iba't ibang screen sizes (telepono vs laptop vs tablet)
- Gumagawa ng smooth animations at visual feedback
**JavaScript (Behavior)**: Ito ang iyong utak
- Tumutugon sa ginagawa ng mga user (clicks, typing, scrolling)
- Nakikipag-usap sa iyong backend at nag-a-update ng page
- Ginagawang interactive at dynamic ang lahat
**Isipin ito tulad ng architectural design**:
- **HTML**: Ang structural blueprint (nagde-define ng spaces at relationships)
- **CSS**: Ang aesthetic at environmental design (visual style at user experience)
- **JavaScript**: Ang mechanical systems (functionality at interactivity)
### Bakit Mahalaga ang Modern JavaScript Architecture
Ang ating chat application ay gagamit ng modernong JavaScript patterns na makikita mo sa mga propesyonal na applications. Ang pag-unawa sa mga konseptong ito ay makakatulong sa iyo habang lumalago ka bilang developer:
**Class-Based Architecture**: I-oorganize natin ang ating code sa mga klase, na parang gumagawa ng blueprints para sa mga object
**Async/Await**: Modernong paraan para mag-handle ng mga operasyon na tumatagal (tulad ng API calls)
**Event-Driven Programming**: Ang ating app ay tumutugon sa mga aksyon ng user (clicks, key presses) sa halip na tumatakbo sa loop
**DOM Manipulation**: Dinamikong ina-update ang webpage content batay sa user interactions at API responses
### Project Structure Setup
Gumawa ng frontend directory na may ganitong organized structure:
```text
frontend/
βββ index.html # Main HTML structure
βββ app.js # JavaScript functionality
βββ styles.css # Visual styling
```
**Pag-unawa sa architecture**:
- **Pinaghihiwalay** ang mga concern sa pagitan ng structure (HTML), behavior (JavaScript), at presentation (CSS)
- **Pinapanatili** ang simpleng file structure na madaling i-navigate at i-modify
- **Sumusunod** sa web development best practices para sa organization at maintainability
### Paggawa ng HTML Foundation: Semantic Structure para sa Accessibility
Magsimula tayo sa HTML structure. Ang modernong web development ay nagbibigay-diin sa "semantic HTML" β paggamit ng HTML elements na malinaw na naglalarawan ng kanilang layunin, hindi lang ang kanilang hitsura. Ginagawa nitong accessible ang iyong application sa screen readers, search engines, at iba pang tools.
**Bakit mahalaga ang semantic HTML**: Isipin ang pag-describe ng iyong chat app sa isang tao sa telepono. Sasabihin mo "may header na may title, isang main area kung saan lumalabas ang mga conversation, at isang form sa ibaba para mag-type ng mga mensahe." Ang semantic HTML ay gumagamit ng mga elemento na tumutugma sa natural na deskripsyon na ito.
Gumawa ng `index.html` na may ganitong maingat na structured markup:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**Pag-unawa sa bawat HTML element at ang layunin nito**:
#### Document Structure
- **``**: Sinasabi sa browser na ito ay modernong HTML5
- **``**: Nagsasaad ng wika ng page para sa screen readers at translation tools
- **``**: Tinitiyak ang tamang character encoding para sa international text
- **``**: Ginagawang mobile-responsive ang page sa pamamagitan ng pag-control sa zoom at scale
#### Semantic Elements
- **``**: Malinaw na tinutukoy ang top section na may title at description
- **``**: Itinalaga ang pangunahing content area (kung saan lumalabas ang mga conversation)
- **`