# एआईको साथमा च्याट सहायक बनाउनुहोस्
स्टार ट्रेकमा जहाजको कम्प्युटरसँग कुरा गर्दै जटिल प्रश्न सोध्ने र विचारशील उत्तर पाउने दृश्य सम्झनुहोस्? १९६० को दशकमा विज्ञान कल्पना जस्तो देखिने यो कुरा अहिले तपाईंले वेब प्रविधिहरू प्रयोग गरेर बनाउन सक्नुहुन्छ।
यस पाठमा, हामी HTML, CSS, JavaScript, र केही ब्याकएन्ड एकीकरणको प्रयोग गरेर एआई च्याट सहायक बनाउनेछौं। तपाईंले सिक्दै आएको सीपहरू शक्तिशाली एआई सेवाहरूमा जडान गर्न सक्ने तरिका पत्ता लगाउनुहुनेछ, जसले सन्दर्भ बुझ्न र अर्थपूर्ण उत्तरहरू उत्पन्न गर्न सक्छ।
एआईलाई विशाल पुस्तकालयको पहुँच जस्तै सोच्नुहोस्, जसले जानकारी मात्र खोज्न सक्दैन, तर तपाईंको विशिष्ट प्रश्नहरूलाई ध्यानमा राखेर सुसंगत उत्तरहरू पनि तयार गर्न सक्छ। हजारौं पृष्ठहरू खोज्नुको सट्टा, तपाईंले सिधा सन्दर्भयुक्त उत्तरहरू पाउनुहुन्छ।
एकीकरण परिचित वेब प्रविधिहरूको सहकार्यबाट हुन्छ। HTML च्याट इन्टरफेस बनाउँछ, CSS दृश्य डिजाइनको हेरचाह गर्छ, JavaScript प्रयोगकर्ता अन्तर्क्रियाहरू व्यवस्थापन गर्छ, र ब्याकएन्ड APIले सबैलाई एआई सेवाहरूमा जडान गर्छ। यो एक सिम्फनी सिर्जना गर्न विभिन्न अर्केस्ट्रा खण्डहरू मिलेर काम गर्ने जस्तै हो।
हामी प्राकृतिक मानव सञ्चार र मेसिन प्रशोधनको बीचमा पुल निर्माण गर्दैछौं। तपाईंले एआई सेवा एकीकरणको प्राविधिक कार्यान्वयन र अन्तर्क्रियाहरू सहज महसुस गराउने डिजाइन ढाँचाहरू सिक्नुहुनेछ।
यस पाठको अन्त्यसम्ममा, एआई एकीकरण रहस्यमय प्रक्रियाजस्तो होइन, तर तपाईंले काम गर्न सक्ने अर्को API जस्तो महसुस हुनेछ। तपाईंले ChatGPT र Claude जस्ता एप्लिकेसनहरूलाई शक्ति दिने आधारभूत ढाँचाहरू बुझ्नुहुनेछ, तपाईंले सिक्दै आएको वेब विकास सिद्धान्तहरूको प्रयोग गरेर।
तपाईंको तयार परियोजना यस प्रकार देखिनेछ:
## एआई बुझ्दै: रहस्यबाट महारथसम्म
कोडमा प्रवेश गर्नु अघि, हामी केसँग काम गर्दैछौं भन्ने कुरा बुझौं। यदि तपाईंले पहिले API प्रयोग गर्नुभएको छ भने, तपाईंलाई आधारभूत ढाँचा थाहा छ: अनुरोध पठाउनुहोस्, प्रतिक्रिया प्राप्त गर्नुहोस्।
एआई APIहरू समान संरचना अनुसरण गर्छन्, तर डेटाबेसबाट पहिले नै भण्डारण गरिएको डाटा पुनःप्राप्त गर्ने सट्टा, तिनीहरूले विशाल पाठबाट सिकेका ढाँचाहरूको आधारमा नयाँ प्रतिक्रियाहरू उत्पन्न गर्छन्। यो पुस्तकालय क्याटलग प्रणाली र ज्ञानवान पुस्तकालयकारको बीचको भिन्नता जस्तै हो, जसले धेरै स्रोतहरूबाट जानकारी संश्लेषण गर्न सक्छ।
### "जेनरेटिभ एआई" वास्तवमा के हो?
रोसेटा स्टोनले ज्ञात र अज्ञात भाषाहरू बीचको ढाँचाहरू पत्ता लगाएर विद्वानहरूलाई इजिप्टका हाइरोग्लिफिक्स बुझ्न कसरी मद्दत गर्यो भन्ने कुरा विचार गर्नुहोस्। एआई मोडेलहरूले पनि यस्तै काम गर्छन् – तिनीहरूले भाषा कसरी काम गर्छ भनेर बुझ्न विशाल पाठमा ढाँचाहरू पत्ता लगाउँछन्, त्यसपछि ती ढाँचाहरू प्रयोग गरेर नयाँ प्रश्नहरूको उपयुक्त उत्तरहरू उत्पन्न गर्छन्।
**यसलाई सरल तुलना गरेर बुझाऔं:**
- **परम्परागत डेटाबेस**: तपाईंको जन्म प्रमाणपत्र माग्दा – तपाईंले हरेक पटक उही कागजात पाउनुहुन्छ
- **सर्च इन्जिन**: पुस्तकालयकारलाई बिरालाहरूको बारेमा पुस्तकहरू खोज्न सोध्दा – तिनीहरूले उपलब्ध सामग्री देखाउँछन्
- **जेनरेटिभ एआई**: ज्ञानवान साथीलाई बिरालाहरूको बारेमा सोध्दा – तिनीहरूले तपाईंलाई रोचक कुरा आफ्नै शब्दमा बताउँछन्, तपाईंको चाहनालाई ध्यानमा राखेर
### एआई मोडेलहरूले कसरी सिक्छन् (सरल संस्करण)
एआई मोडेलहरूले पुस्तकहरू, लेखहरू, र संवादहरू समावेश गर्ने विशाल डेटासेटहरूमा पहुँच गरेर सिक्छन्। यस प्रक्रियामा, तिनीहरूले निम्न कुराहरूमा ढाँचाहरू पहिचान गर्छन्:
- लेखनमा विचारहरू कसरी संरचित हुन्छन्
- कुन शब्दहरू सामान्यत: सँगै देखा पर्छन्
- संवादहरू सामान्यत: कसरी प्रवाहित हुन्छन्
- औपचारिक र अनौपचारिक सञ्चार बीचको सन्दर्भात्मक भिन्नता
**यो पुरातत्वविदहरूले प्राचीन भाषाहरू डिकोड गर्ने तरिकासँग मिल्दोजुल्दो छ**: तिनीहरूले व्याकरण, शब्दावली, र सांस्कृतिक सन्दर्भ बुझ्न हजारौं उदाहरणहरू विश्लेषण गर्छन्, अन्ततः सिकेका ढाँचाहरू प्रयोग गरेर नयाँ पाठहरूको व्याख्या गर्न सक्षम हुन्छन्।
### किन GitHub मोडेलहरू?
हामी GitHub मोडेलहरू प्रयोग गर्दैछौं किनभने यसले हामीलाई हाम्रो आफ्नै एआई पूर्वाधार सेटअप नगरी उद्यम-स्तरको एआई पहुँच दिन्छ (जुन अहिले तपाईंले गर्न चाहनुहुन्न!)। यो मौसम API प्रयोग गरेर मौसमको भविष्यवाणी गर्ने जस्तै हो, मौसम स्टेशनहरू हरेक ठाउँमा सेटअप नगरी।
यो "एआई-एज-अ-सर्भिस" हो, र सबैभन्दा राम्रो कुरा? यो सुरु गर्न निःशुल्क छ, त्यसैले तपाईंले ठूलो बिलको चिन्ता नगरी प्रयोग गर्न सक्नुहुन्छ।
GitHub मोडेलहरू प्रयोग गरेर, तपाईंले व्यावसायिक-स्तरको एआई क्षमताहरूलाई डेवलपर-मैत्री इन्टरफेस मार्फत पहुँच गर्न सक्नुहुन्छ। [GitHub मोडेल प्लेग्राउन्ड](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) एक परीक्षण वातावरणको रूपमा काम गर्छ जहाँ तपाईं विभिन्न एआई मोडेलहरू प्रयोग गर्न सक्नुहुन्छ र तिनीहरूको क्षमताहरू बुझ्न सक्नुहुन्छ।
**यहाँ किन FastAPI हाम्रो निर्माणको लागि उपयुक्त छ:**
- **डिफल्ट रूपमा Async**: एकै समयमा धेरै AI अनुरोधहरूलाई बिना अड्किए व्यवस्थापन गर्न सक्छ
- **स्वचालित डकुमेन्टेसन**: `/docs` मा जानुहोस् र निःशुल्क सुन्दर, अन्तरक्रियात्मक API डकुमेन्टेसन पृष्ठ प्राप्त गर्नुहोस्
- **निर्मित मान्यता**: समस्याहरू उत्पन्न हुनु अघि नै त्रुटिहरू पत्ता लगाउँछ
- **चटपटे छिटो**: Python फ्रेमवर्कहरू मध्ये एकदम छिटो
- **आधुनिक Python**: Python का सबै नवीनतम र उत्कृष्ट सुविधाहरू प्रयोग गर्दछ
**र किन हामीलाई ब्याकएन्ड आवश्यक छ:**
**सुरक्षा**: तपाईंको AI API कुञ्जी पासवर्ड जस्तै हो – यदि तपाईं यसलाई फ्रन्टएन्ड JavaScript मा राख्नुहुन्छ भने, तपाईंको वेबसाइटको स्रोत कोड हेर्ने जो कोहीले यसलाई चोर्न सक्छ र तपाईंको AI क्रेडिटहरू प्रयोग गर्न सक्छ। ब्याकएन्डले संवेदनशील प्रमाणहरू सुरक्षित राख्छ।
**रेट लिमिटिंग र नियन्त्रण**: ब्याकएन्डले प्रयोगकर्ताहरूले कति पटक अनुरोध गर्न सक्छन् भन्ने नियन्त्रण गर्न, प्रयोगकर्ता प्रमाणीकरण कार्यान्वयन गर्न, र प्रयोग ट्र्याक गर्न लगिङ थप्न अनुमति दिन्छ।
**डाटा प्रशोधन**: तपाईं संवादहरू बचत गर्न, अनुपयुक्त सामग्री फिल्टर गर्न, वा धेरै AI सेवाहरूलाई संयोजन गर्न चाहनुहुन्छ। यो तर्क ब्याकएन्डमा बस्छ।
**आर्किटेक्चर क्लाइन्ट-सर्भर मोडेल जस्तै देखिन्छ:**
- **फ्रन्टएन्ड**: अन्तरक्रियाको लागि प्रयोगकर्ता इन्टरफेस तह
- **ब्याकएन्ड API**: अनुरोध प्रशोधन र रुटिङ तह
- **AI सेवा**: बाह्य गणना र प्रतिक्रिया उत्पादन
- **पर्यावरण चरहरू**: सुरक्षित कन्फिगरेसन र प्रमाणपत्र भण्डारण
### अनुरोध-प्रतिक्रिया प्रवाह बुझ्दै
आउनुहोस्, प्रयोगकर्ताले सन्देश पठाउँदा के हुन्छ भनेर ट्रेस गरौं:
```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
```
**प्रत्येक चरण बुझ्दै:**
1. **प्रयोगकर्ता अन्तरक्रिया**: व्यक्तिले च्याट इन्टरफेसमा टाइप गर्छ
2. **फ्रन्टएन्ड प्रशोधन**: JavaScript ले इनपुटलाई समात्छ र JSON रूपमा ढाँचा बनाउँछ
3. **API मान्यता**: FastAPI ले Pydantic मोडेलहरू प्रयोग गरेर अनुरोधलाई स्वचालित रूपमा मान्यता दिन्छ
4. **AI एकीकरण**: ब्याकएन्डले सन्दर्भ (सिस्टम प्रम्प्ट) थप्छ र AI सेवालाई कल गर्छ
5. **प्रतिक्रिया ह्यान्डलिङ**: API ले AI प्रतिक्रिया प्राप्त गर्छ र आवश्यक परेमा यसलाई परिमार्जन गर्न सक्छ
6. **फ्रन्टएन्ड प्रदर्शन**: JavaScript ले च्याट इन्टरफेसमा प्रतिक्रिया देखाउँछ
### API आर्किटेक्चर बुझ्दै
```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?"}
```
### FastAPI एप्लिकेसन सिर्जना गर्दै
आउनुहोस्, हाम्रो API चरणबद्ध रूपमा निर्माण गरौं। `api.py` नामक फाइल सिर्जना गर्नुहोस् र निम्न FastAPI कोड थप्नुहोस्:
```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)
```
**FastAPI कार्यान्वयन बुझ्दै:**
- **आयात गर्दछ** FastAPI आधुनिक वेब फ्रेमवर्क कार्यक्षमता र Pydantic डाटा मान्यताको लागि
- **स्वचालित API डकुमेन्टेसन सिर्जना गर्दछ** (सर्भर चल्दा `/docs` मा उपलब्ध)
- **CORS मिडलवेयर सक्षम गर्दछ** विभिन्न उत्पत्तिबाट फ्रन्टएन्ड अनुरोधहरू अनुमति दिन
- **Pydantic मोडेलहरू परिभाषित गर्दछ** स्वचालित अनुरोध/प्रतिक्रिया मान्यता र डकुमेन्टेसनको लागि
- **बेहतर प्रदर्शनको लागि Async अन्त बिन्दुहरू प्रयोग गर्दछ** समवर्ती अनुरोधहरूसँग
- **HTTP स्थिति कोडहरू र त्रुटि ह्यान्डलिङ कार्यान्वयन गर्दछ** HTTPException को साथ
- **संरचित लगिङ समावेश गर्दछ** निगरानी र डिबगिङको लागि
- **सेवा स्थिति निगरानीको लागि स्वास्थ्य जाँच अन्त बिन्दु प्रदान गर्दछ**
**परम्परागत फ्रेमवर्कहरू भन्दा FastAPI का प्रमुख फाइदाहरू:**
- **स्वचालित मान्यता**: Pydantic मोडेलहरूले प्रशोधन अघि डाटा अखण्डता सुनिश्चित गर्दछ
- **अन्तरक्रियात्मक डकुमेन्टेसन**: `/docs` मा जानुहोस् स्वचालित रूपमा उत्पन्न, परीक्षणयोग्य API डकुमेन्टेसनको लागि
- **प्रकार सुरक्षा**: Python प्रकार संकेतहरूले रनटाइम त्रुटिहरू रोक्छ र कोडको गुणस्तर सुधार गर्दछ
- **Async समर्थन**: एकै समयमा धेरै AI अनुरोधहरू बिना रोकावट ह्यान्डल गर्नुहोस्
- **प्रदर्शन**: वास्तविक-समय अनुप्रयोगहरूको लागि उल्लेखनीय रूपमा छिटो अनुरोध प्रशोधन
### CORS बुझ्दै: वेबको सुरक्षा गार्ड
CORS (Cross-Origin Resource Sharing) भवनको सुरक्षा गार्ड जस्तै हो जसले आगन्तुकहरूलाई प्रवेश गर्न अनुमति छ कि छैन भनेर जाँच गर्दछ। आउनुहोस्, यो किन महत्त्वपूर्ण छ र यसले तपाईंको अनुप्रयोगलाई कसरी असर गर्छ बुझौं।
#### CORS के हो र यो किन छ?
**समस्या**: कल्पना गर्नुहोस्, यदि कुनै पनि वेबसाइटले तपाईंको अनुमति बिना तपाईंको बैंकको वेबसाइटमा तपाईंको तर्फबाट अनुरोध गर्न सक्थ्यो। त्यो सुरक्षा दुःस्वप्न हुनेछ! ब्राउजरहरूले "Same-Origin Policy" मार्फत यो स्वचालित रूपमा रोक्छ।
**Same-Origin Policy**: ब्राउजरहरूले केवल वेब पृष्ठहरूलाई अनुरोध गर्न अनुमति दिन्छन् जुन तिनीहरू लोड गरिएको डोमेन, पोर्ट, र प्रोटोकलसँग समान छन्।
**वास्तविक संसारको उपमा**: यो अपार्टमेन्ट भवनको सुरक्षा जस्तै हो – केवल निवासीहरू (समान उत्पत्ति) ले डिफल्ट रूपमा भवनमा पहुँच गर्न सक्छन्। यदि तपाईंले साथीलाई (विभिन्न उत्पत्ति) भ्रमण गर्न दिन चाहनुहुन्छ भने, तपाईंले सुरक्षा गार्डलाई स्पष्ट रूपमा भन्नु पर्छ कि यो ठीक छ।
#### तपाईंको विकास वातावरणमा CORS
विकासको क्रममा, तपाईंको फ्रन्टएन्ड र ब्याकएन्ड विभिन्न पोर्टहरूमा चल्छ:
- फ्रन्टएन्ड: `http://localhost:3000` (वा HTML सीधा खोल्दा file://)
- ब्याकएन्ड: `http://localhost:5000`
यी "विभिन्न उत्पत्ति" मानिन्छन्, यद्यपि तिनीहरू एउटै कम्प्युटरमा छन्!
```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"
```
**CORS कन्फिगरेसनले व्यवहारमा के गर्छ:**
- **विशेष HTTP हेडरहरू थप्छ** API प्रतिक्रियाहरूमा जसले ब्राउजरहरूलाई "यो क्रस-उत्पत्ति अनुरोध अनुमति छ" भन्छ
- **"प्रिफ्लाइट" अनुरोधहरू ह्यान्डल गर्दछ** (कहिलेकाहीं ब्राउजरहरूले वास्तविक अनुरोध पठाउनु अघि अनुमति जाँच गर्छन्)
- **तपाईंको ब्राउजर कन्सोलमा "CORS नीति द्वारा अवरुद्ध" त्रुटि रोक्छ**
#### CORS सुरक्षा: विकास बनाम उत्पादन
```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"])
```
**किन यो महत्त्वपूर्ण छ**: विकासमा, `CORS(app)` तपाईंको अगाडिको ढोका अनलक राख्न जस्तै हो – सुविधाजनक तर सुरक्षित छैन। उत्पादनमा, तपाईंले ठीकसँग कुन वेबसाइटहरूले तपाईंको APIसँग कुरा गर्न सक्छन् भनेर निर्दिष्ट गर्न चाहनुहुन्छ।
#### सामान्य CORS परिदृश्यहरू र समाधानहरू
| परिदृश्य | समस्या | समाधान |
|----------|---------|----------|
| **स्थानीय विकास** | फ्रन्टएन्डले ब्याकएन्डमा पुग्न सक्दैन | FastAPI मा CORSMiddleware थप्नुहोस् |
| **GitHub Pages + Heroku** | तैनात फ्रन्टएन्डले API मा पुग्न सक्दैन | CORS उत्पत्तिहरूमा तपाईंको GitHub Pages URL थप्नुहोस् |
| **कस्टम डोमेन** | उत्पादनमा CORS त्रुटिहरू | CORS उत्पत्तिहरूलाई तपाईंको डोमेनसँग मिलाउन अद्यावधिक गर्नुहोस् |
| **मोबाइल एप** | एपले वेब API मा पुग्न सक्दैन | तपाईंको एपको डोमेन थप्नुहोस् वा सावधानीपूर्वक `*` प्रयोग गर्नुहोस् |
**प्रो टिप**: तपाईं आफ्नो ब्राउजरको Developer Tools मा Network ट्याब अन्तर्गत CORS हेडरहरू जाँच गर्न सक्नुहुन्छ। प्रतिक्रियामा `Access-Control-Allow-Origin` जस्ता हेडरहरू खोज्नुहोस्।
### त्रुटि ह्यान्डलिङ र मान्यता
हाम्रो API ले उचित त्रुटि ह्यान्डलिङ समावेश गरेको देख्नुहोस्:
```python
# Validate that we received a message
if not message:
return jsonify({"error": "Message field is required"}), 400
```
**मुख्य मान्यता सिद्धान्तहरू:**
- **आवश्यक क्षेत्रहरूको लागि जाँच गर्दछ** अनुरोधहरू प्रशोधन गर्नु अघि
- **अर्थपूर्ण त्रुटि सन्देशहरू JSON ढाँचामा फर्काउँछ**
- **उपयुक्त HTTP स्थिति कोडहरू प्रयोग गर्दछ** (खराब अनुरोधहरूको लागि 400)
- **फ्रन्टएन्ड विकासकर्ताहरूलाई समस्या समाधान गर्न स्पष्ट प्रतिक्रिया प्रदान गर्दछ**
## तपाईंको ब्याकएन्ड सेटअप र चलाउँदै
अब हामीसँग हाम्रो AI एकीकरण र FastAPI सर्भर तयार छ, आउनुहोस् सबै कुरा चलाउन सुरु गरौं। सेटअप प्रक्रियामा Python निर्भरताहरू स्थापना गर्नु, वातावरण चरहरू कन्फिगर गर्नु, र तपाईंको विकास सर्भर सुरु गर्नु समावेश छ।
### Python वातावरण सेटअप
आउनुहोस्, तपाईंको Python विकास वातावरण सेटअप गरौं। भर्चुअल वातावरणहरू Manhattan Project को कम्पार्टमेन्टलाइज्ड दृष्टिकोण जस्तै हुन् – प्रत्येक परियोजनाले आफ्नै अलग ठाउँ प्राप्त गर्दछ विशिष्ट उपकरणहरू र निर्भरताहरूको साथ, विभिन्न परियोजनाहरू बीचको द्वन्द्व रोक्दै।
```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
```
**हामीले के गर्यौं:**
- **हाम्रो आफ्नै सानो Python बबल सिर्जना गर्यौं** जहाँ हामी प्याकेजहरू स्थापना गर्न सक्छौं बिना अरूलाई असर नगरी
- **यसलाई सक्रिय गर्यौं** ताकि हाम्रो टर्मिनलले यो विशिष्ट वातावरण प्रयोग गर्न जान्दछ
- **आवश्यकताहरू स्थापना गर्यौं**: OpenAI AI जादूको लागि, FastAPI हाम्रो वेब API को लागि, Uvicorn यसलाई वास्तवमा चलाउनको लागि, र python-dotenv सुरक्षित गोप्य व्यवस्थापनको लागि
**मुख्य निर्भरताहरूको व्याख्या:**
- **FastAPI**: आधुनिक, छिटो वेब फ्रेमवर्क स्वचालित API डकुमेन्टेसनको साथ
- **Uvicorn**: चटपटे छिटो ASGI सर्भर जसले FastAPI अनुप्रयोगहरू चलाउँछ
- **OpenAI**: GitHub मोडेलहरू र OpenAI API एकीकरणको लागि आधिकारिक लाइब्रेरी
- **python-dotenv**: .env फाइलहरूबाट सुरक्षित वातावरण चर लोड गर्दै
### वातावरण कन्फिगरेसन: गोप्य सुरक्षित राख्दै
API सुरु गर्नु अघि, वेब विकासको सबैभन्दा महत्त्वपूर्ण पाठहरू मध्ये एकको बारेमा कुरा गरौं: तपाईंको गोप्य वास्तवमा गोप्य कसरी राख्ने। वातावरण चरहरू सुरक्षित भण्डार जस्तै हुन् जुन केवल तपाईंको अनुप्रयोगले पहुँच गर्न सक्छ।
#### वातावरण चरहरू के हुन्?
**वातावरण चरहरूलाई सुरक्षा निक्षेप बक्स जस्तै सोच्नुहोस्** – तपाईंले त्यहाँ आफ्नो मूल्यवान सामान राख्नुहुन्छ, र केवल तपाईं (र तपाईंको एप) सँग यसलाई बाहिर निकाल्नको लागि कुञ्जी छ। तपाईंको कोडमा संवेदनशील जानकारी सीधा लेख्ने सट्टा (जहाँ वास्तवमा जो कोहीले देख्न सक्छ), तपाईं यसलाई सुरक्षित रूपमा वातावरणमा भण्डारण गर्नुहुन्छ।
**यहाँ भिन्नता छ:**
- **गलत तरिका**: तपाईंको पासवर्डलाई स्टिकी नोटमा लेखेर तपाईंको मोनिटरमा राख्नु
- **सही तरिका**: तपाईंको पासवर्डलाई सुरक्षित पासवर्ड म्यानेजरमा राख्नु जुन केवल तपाईंले पहुँच गर्न सक्नुहुन्छ
#### वातावरण चरहरू किन महत्त्वपूर्ण छन्
```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"
)
```
**तपाईंले गोप्य हार्डकोड गर्दा के हुन्छ:**
1. **संस्करण नियन्त्रण एक्सपोजर**: तपाईंको Git रिपोजिटरीमा पहुँच भएको जो कोहीले तपाईंको API कुञ्जी देख्छ
2. **सार्वजनिक रिपोजिटरीहरू**: यदि तपाईं GitHub मा धकेल्नुहुन्छ भने, तपाईंको कुञ्जी सम्पूर्ण इन्टरनेटमा देखिन्छ
3. **टीम साझेदारी**: तपाईंको परियोजनामा काम गर्ने अन्य विकासकर्ताहरूले तपाईंको व्यक्तिगत API कुञ्जीमा पहुँच प्राप्त गर्छन्
4. **सुरक्षा उल्लङ्घनहरू**: यदि कसैले तपाईंको API कुञ्जी चोर्छ भने, तिनीहरूले तपाईंको AI क्रेडिटहरू प्रयोग गर्न सक्छन्
#### तपाईंको वातावरण फाइल सेटअप गर्दै
तपाईंको ब्याकएन्ड डिरेक्टरीमा `.env` फाइल सिर्जना गर्नुहोस्। यो फाइलले तपाईंको गोप्य स्थानीय रूपमा भण्डारण गर्दछ:
```bash
# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
```
**.env फाइल बुझ्दै:**
- **प्रत्येक लाइनमा एक गोप्य** `KEY=value` ढाँचामा
- **बराबर चिन्ह वरिपरि कुनै खाली ठाउँ छैन**
- **मानहरू वरिपरि कुनै उद्धरण आवश्यक छैन** (सामान्यतया)
- **टिप्पणीहरू** `#` बाट सुरु हुन्छन्
#### तपाईंको GitHub व्यक्तिगत पहुँच टोकन सिर्जना गर्दै
तपाईंको GitHub टोकन विशेष पासवर्ड जस्तै हो जसले तपाईंको अनुप्रयोगलाई GitHub का AI सेवाहरू प्रयोग गर्न अनुमति दिन्छ:
**टोकन सिर्जना चरण-दर-चरण:**
1. **GitHub सेटिङमा जानुहोस्** → Developer settings → Personal access tokens → Tokens (classic)
2. **"Generate new token (classic)" क्लिक गर्नुहोस्**
3. **म्याद समाप्ति सेट गर्नुहोस्** (परीक्षणको लागि 30 दिन, उत्पादनको लागि लामो)
4. **स्कोपहरू चयन गर्नुहोस्**: "repo" र तपाईंलाई आवश्यक अन्य अनुमतिहरू जाँच गर्नुहोस्
5. **टोकन सिर्जना गर्नुहोस्** र तुरुन्तै प्रतिलिपि गर्नुहोस् (तपाईंले यसलाई फेरि देख्न सक्नुहुन्न!)
6. **तपाईंको .env फाइलमा टोकन टाँस्नुहोस्**
```bash
# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
```
#### 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"
)
```
**यो कोडले के गर्छ:**
- **तपाईंको .env फाइल लोड गर्दछ** र चरहरू Python मा उपलब्ध गराउँछ
- **आवश्यक टोकन छ कि छैन जाँच गर्दछ** (राम्रो त्रुटि ह्यान्डलिङ!)
- **स्पष्ट त्रुटि उठाउँछ** यदि टोकन हराइरहेको छ भने
- **टोकन सुरक्षित रूपमा प्रयोग गर्दछ** यसलाई कोडमा एक्सपोज नगरी
#### Git सुरक्षा: .gitignore फाइल
तपाईंको `.gitignore` फाइलले Git लाई कुन फाइलहरू कहिल्यै ट्र्याक वा अपलोड नगर्ने भनेर बताउँछ:
```bash
# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
```
**किन यो महत्त्वपूर्ण छ**: एकपटक तपाईंले `.env` लाई `.gitignore` मा थप्नुभयो भने, Git ले तपाईंको वातावरण फाइललाई बेवास्ता गर्नेछ, तपाईंलाई तपाईंको गोप्य GitHub मा अनजाने अपलोड गर्नबाट रोक्नेछ।
#### विभिन्न वातावरणहरू, विभिन्न गोप्य
व्यावसायिक अनुप्रयोगहरूले विभिन्न वातावरणहरूको लागि विभिन्न API कुञ्जीहरू प्रयोग गर्छन्:
```bash
# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.production
GITHUB_TOKEN=your_production_token
DEBUG=False
```
**किन यो महत्त्वपूर्ण छ**: तपाईं आफ्नो विकास प्रयोगहरूले तपाईंको उत्पादन AI प्रयोग कोटा प्रभावित गर्न चाहनुहुन्न, र तपाईं विभिन्न वातावरणहरूको लागि विभिन्न सुरक्षा स्तरहरू चाहनुहुन्छ।
### तपाईंको विकास सर्भर सुरु गर्दै: तपाईंको FastAPI जीवनमा ल्याउँदै
अब रोमाञ्चक क्षण आउँछ – तपाईंको FastAPI विकास सर्भर सुरु गर्दै र तपाईंको AI एकीकरणलाई जीवित देख्दै! FastAPI Uvicorn प्रयोग गर्दछ, एक चटपटे छिटो ASGI सर्भर जुन विशेष रूपमा Async Python अनुप्रयोगहरूको लागि डिजाइन गरिएको हो।
#### FastAPI सर्भर स्टार्टअप प्रक्रिया बुझ्दै
```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
```
जब तपाईं यो आदेश चलाउनुहुन्छ, यहाँ पर्दा पछाडि के हुन्छ:
**1. Python तपाईंको FastAPI एप्लिकेसन लोड गर्दछ**:
- आवश्यक सबै लाइब्रेरीहरू आयात गर्दछ (FastAPI, Pydantic, OpenAI, आदि)
- तपाईंको `.env` फाइलबाट वातावरण चरहरू लोड गर्दछ
- स्वचालित डकुमेन्टेसनको साथ FastAPI एप्लिकेसन उदाहरण सिर्जना गर्दछ
**2. Uvicorn ASGI सर्भर कन्फिगर गर्दछ**:
- Async अनुरोध ह्यान्डलिङ क्षमताहरूको साथ पोर्ट 5000 मा बाँध्छ
- स्वचालित मान्यतासँग अनुरोध रुटिङ सेटअप गर्दछ
- विकासको लागि हट रीलोड सक्षम गर्दछ (फाइल परिवर्तनमा पुनः सुरु हुन्छ)
- अन्तरक्रियात्मक API डकुमेन्टेसन उत्पन्न गर्दछ
**3. सर्भर सुन्न सुरु गर्दछ**:
- तपाईंको टर्मिनल देखाउँछ: `INFO: Uvicorn running on http://0.0.0.0:5000`
- सर्भरले धेरै समवर्ती AI अनुरोधहरू ह्यान्डल गर्न सक्छ
- तपाईंको API स्वचालित डकुमेन्टेसनको साथ `http://localhost:
```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)
```
#### सामान्य सुरु हुने समस्याहरू समाधान गर्ने
| त्रुटि सन्देश | यसको अर्थ | समाधान गर्ने तरिका |
|---------------|---------------|------------|
| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI स्थापना गरिएको छैन | आफ्नो भर्चुअल वातावरणमा `pip install fastapi uvicorn` चलाउनुहोस् |
| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI सर्भर स्थापना गरिएको छैन | आफ्नो भर्चुअल वातावरणमा `pip install uvicorn` चलाउनुहोस् |
| `KeyError: 'GITHUB_TOKEN'` | वातावरण चर भेटिएन | आफ्नो `.env` फाइल र `load_dotenv()` कल जाँच गर्नुहोस् |
| `Address already in use` | पोर्ट 5000 व्यस्त छ | पोर्ट 5000 प्रयोग गरिरहेका अन्य प्रक्रियाहरू बन्द गर्नुहोस् वा पोर्ट परिवर्तन गर्नुहोस् |
| `ValidationError` | अनुरोध डेटा Pydantic मोडेलसँग मेल खाँदैन | आफ्नो अनुरोध ढाँचा अपेक्षित स्किमासँग मेल खाँदैन कि जाँच गर्नुहोस् |
| `HTTPException 422` | प्रक्रिया गर्न नसकिने इकाई | अनुरोध मान्यता असफल भयो, `/docs` मा सही ढाँचा जाँच गर्नुहोस् |
| `OpenAI API error` | AI सेवा प्रमाणीकरण असफल भयो | आफ्नो GitHub टोकन सही छ र उपयुक्त अनुमति छ कि जाँच गर्नुहोस् |
#### विकासका उत्कृष्ट अभ्यासहरू
**हट रीलोडिङ**: FastAPI र Uvicorn ले तपाईंको Python फाइलहरूमा परिवर्तनहरू बचत गर्दा स्वचालित रूपमा रीलोडिङ प्रदान गर्दछ। यसको मतलब तपाईं आफ्नो कोड परिमार्जन गर्न सक्नुहुन्छ र म्यानुअल रूपमा पुनः सुरु नगरी तुरुन्तै परीक्षण गर्न सक्नुहुन्छ।
```python
# Enable hot reloading explicitly
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True enables hot reload
```
**विकासका लागि लगिङ**: के भइरहेको छ बुझ्नको लागि लगिङ थप्नुहोस्:
```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
```
**किन लगिङ सहयोगी छ**: विकासको क्रममा, तपाईंले ठ्याक्कै के अनुरोधहरू आइरहेका छन्, AI के प्रतिक्रिया दिइरहेको छ, र कहाँ त्रुटिहरू आइरहेका छन् हेर्न सक्नुहुन्छ। यसले डिबगिङलाई धेरै छिटो बनाउँछ।
### GitHub Codespaces को लागि कन्फिगर गर्दै: क्लाउड विकास सजिलो बनाउँदै
GitHub Codespaces भनेको क्लाउडमा शक्तिशाली विकास कम्प्युटर जस्तै हो जसलाई तपाईं कुनै पनि ब्राउजरबाट पहुँच गर्न सक्नुहुन्छ। यदि तपाईं Codespaces मा काम गर्दै हुनुहुन्छ भने, तपाईंको ब्याकएन्डलाई फ्रन्टएन्डसँग पहुँचयोग्य बनाउनका लागि केही अतिरिक्त चरणहरू आवश्यक छन्।
#### Codespaces नेटवर्किङ बुझ्दै
स्थानीय विकास वातावरणमा, सबै कुरा एउटै कम्प्युटरमा चल्छ:
- ब्याकएन्ड: `http://localhost:5000`
- फ्रन्टएन्ड: `http://localhost:3000` (वा file://)
Codespaces मा, तपाईंको विकास वातावरण GitHub का सर्भरहरूमा चल्छ, त्यसैले "localhost" को अर्थ फरक हुन्छ। GitHub ले तपाईंको सेवाहरूको लागि स्वतः सार्वजनिक URL बनाउँछ, तर तपाईंले तिनीहरूलाई सही रूपमा कन्फिगर गर्न आवश्यक छ।
#### चरण-दर-चरण Codespaces कन्फिगरेसन
**1. आफ्नो ब्याकएन्ड सर्भर सुरु गर्नुहोस्**:
```bash
cd backend
python api.py
```
तपाईंले परिचित FastAPI/Uvicorn सुरु सन्देश देख्नुहुनेछ, तर ध्यान दिनुहोस् कि यो Codespace वातावरण भित्र चलिरहेको छ।
**2. पोर्ट दृश्यता कन्फिगर गर्नुहोस्**:
- VS Code को तल्लो प्यानलमा "Ports" ट्याब खोज्नुहोस्
- सूचीमा पोर्ट 5000 खोज्नुहोस्
- पोर्ट 5000 मा राइट-क्लिक गर्नुहोस्
- "Port Visibility" → "Public" चयन गर्नुहोस्
**किन यसलाई सार्वजनिक बनाउने?** डिफल्ट रूपमा, Codespace पोर्टहरू निजी हुन्छन् (तपाईंलाई मात्र पहुँचयोग्य)। यसलाई सार्वजनिक बनाउँदा तपाईंको फ्रन्टएन्ड (जसले ब्राउजरमा चल्छ) ब्याकएन्डसँग संवाद गर्न सक्दछ।
**3. आफ्नो सार्वजनिक URL प्राप्त गर्नुहोस्**:
पोर्ट सार्वजनिक बनाएपछि, तपाईंले यस्तो URL देख्नुहुनेछ:
```
https://your-codespace-name-5000.app.github.dev
```
**4. आफ्नो फ्रन्टएन्ड कन्फिगरेसन अपडेट गर्नुहोस्**:
```javascript
// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
```
#### Codespace URL बुझ्दै
Codespace URL ले एक अनुमानित ढाँचा पछ्याउँछ:
```
https://[codespace-name]-[port].app.github.dev
```
**यसलाई तोड्दै:**
- `codespace-name`: तपाईंको Codespace को लागि एक अद्वितीय पहिचानकर्ता (सामान्यतया तपाईंको प्रयोगकर्ता नाम समावेश गर्दछ)
- `port`: तपाईंको सेवा चलिरहेको पोर्ट नम्बर (हाम्रो FastAPI एपको लागि 5000)
- `app.github.dev`: Codespace अनुप्रयोगहरूको लागि GitHub को डोमेन
#### आफ्नो Codespace सेटअप परीक्षण गर्दै
**1. ब्याकएन्डलाई सिधै परीक्षण गर्नुहोस्**:
आफ्नो सार्वजनिक URL नयाँ ब्राउजर ट्याबमा खोल्नुहोस्। तपाईंले देख्नुहुनेछ:
```
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
```
**2. ब्राउजर विकास उपकरणहरूसँग परीक्षण गर्नुहोस्**:
```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 बनाम स्थानीय विकास
| पक्ष | स्थानीय विकास | GitHub Codespaces |
|--------|-------------------|-------------------|
| **सेटअप समय** | लामो (Python, निर्भरता स्थापना गर्नुहोस्) | तुरुन्त (पूर्व-कन्फिगर गरिएको वातावरण) |
| **URL पहुँच** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
| **पोर्ट कन्फिगरेसन** | स्वचालित | म्यानुअल (पोर्टहरू सार्वजनिक बनाउनुहोस्) |
| **फाइल स्थायित्व** | स्थानीय मेसिन | GitHub रिपोजिटरी |
| **सहयोग** | वातावरण साझा गर्न गाह्रो | Codespace लिंक साझा गर्न सजिलो |
| **इन्टरनेट निर्भरता** | केवल AI API कलहरूको लागि | सबै कुराको लागि आवश्यक |
#### Codespace विकास सुझावहरू
**Codespaces मा वातावरण चरहरू**:
तपाईंको `.env` फाइल Codespaces मा उस्तै तरिकाले काम गर्दछ, तर तपाईं 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
```
**पोर्ट व्यवस्थापन**:
- Codespaces स्वचालित रूपमा पत्ता लगाउँछ जब तपाईंको अनुप्रयोग पोर्टमा सुन्न सुरु गर्दछ
- तपाईं एकै समयमा धेरै पोर्टहरू अगाडि बढाउन सक्नुहुन्छ (यदि तपाईं पछि डेटाबेस थप्नुहुन्छ भने उपयोगी)
- पोर्टहरू तपाईंको Codespace चलिरहेको छ जति समयसम्म पहुँचयोग्य रहन्छ
**विकास कार्यप्रवाह**:
1. VS Code मा कोड परिवर्तन गर्नुहोस्
2. FastAPI स्वतः रीलोड हुन्छ (Uvicorn को रीलोड मोडको लागि धन्यवाद)
3. सार्वजनिक URL मार्फत परिवर्तनहरू तुरुन्तै परीक्षण गर्नुहोस्
4. तयार हुँदा कमिट र पुश गर्नुहोस्
> 💡 **प्रो टिप**: विकासको क्रममा आफ्नो Codespace ब्याकएन्ड URL बुकमार्क गर्नुहोस्। किनभने Codespace नामहरू स्थिर हुन्छन्, तपाईंले उही Codespace प्रयोग गरिरहनुभएको छ भने URL परिवर्तन हुनेछैन।
## फ्रन्टएन्ड च्याट इन्टरफेस सिर्जना गर्दै: जहाँ मानिसहरू AI सँग भेट्छन्
अब हामी प्रयोगकर्ता इन्टरफेस निर्माण गर्नेछौं – भाग जसले मानिसहरूलाई तपाईंको AI सहायकसँग कसरी अन्तरक्रिया गर्ने निर्धारण गर्दछ। जस्तै मूल iPhone को इन्टरफेसको डिजाइन, हामी जटिल प्रविधिलाई सहज र प्रयोग गर्न प्राकृतिक बनाउनेमा ध्यान केन्द्रित गर्दैछौं।
### आधुनिक फ्रन्टएन्ड आर्किटेक्चर बुझ्दै
हाम्रो च्याट इन्टरफेसलाई "सिंगल पेज एप्लिकेसन" वा SPA भनिन्छ। पुरानो शैलीको दृष्टिकोण जहाँ प्रत्येक क्लिकले नयाँ पृष्ठ लोड गर्दछ, हाम्रो एप सहज र तुरुन्तै अपडेट हुन्छ:
**पुराना वेबसाइटहरू**: भौतिक पुस्तक पढ्ने जस्तै – तपाईं पूर्ण रूपमा नयाँ पृष्ठहरू पल्टाउनुहुन्छ
**हाम्रो च्याट एप**: तपाईंको फोन प्रयोग गर्ने जस्तै – सबै कुरा प्रवाह हुन्छ र सहज रूपमा अपडेट हुन्छ
```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]
```
### फ्रन्टएन्ड विकासका तीन स्तम्भहरू
प्रत्येक फ्रन्टएन्ड अनुप्रयोग – साधारण वेबसाइटहरूदेखि जटिल एपहरू जस्तै Discord वा Slack – तीन मुख्य प्रविधिहरूमा आधारित हुन्छ। यीलाई वेबमा तपाईंले देख्ने र अन्तरक्रिया गर्ने सबै कुराको आधारभूत रूपमा सोच्नुहोस्:
**HTML (संरचना)**: यो तपाईंको आधार हो
- कुन तत्वहरू छन् (बटनहरू, टेक्स्ट क्षेत्रहरू, कन्टेनरहरू) निर्धारण गर्दछ
- सामग्रीलाई अर्थ दिन्छ (यो हेडर हो, यो फारम हो, आदि)
- आधारभूत संरचना सिर्जना गर्दछ जसमा सबै कुरा निर्माण हुन्छ
**CSS (प्रस्तुति)**: यो तपाईंको आन्तरिक डिजाइनर हो
- सबै कुरा सुन्दर देखिन्छ (रंगहरू, फन्टहरू, लेआउटहरू)
- विभिन्न स्क्रिन आकारहरू (फोन बनाम ल्यापटप बनाम ट्याब्लेट) ह्यान्डल गर्दछ
- सहज एनिमेसन र दृश्य प्रतिक्रिया सिर्जना गर्दछ
**JavaScript (व्यवहार)**: यो तपाईंको मस्तिष्क हो
- प्रयोगकर्ताहरूले के गर्छन् (क्लिक, टाइपिङ, स्क्रोलिङ) प्रतिक्रिया दिन्छ
- तपाईंको ब्याकएन्डसँग कुरा गर्छ र पृष्ठ अपडेट गर्छ
- सबै कुरा अन्तरक्रियात्मक र गतिशील बनाउँछ
**यसलाई वास्तुकला डिजाइन जस्तै सोच्नुहोस्:**
- **HTML**: संरचनात्मक ब्लूप्रिन्ट (स्पेस र सम्बन्धहरू परिभाषित गर्दै)
- **CSS**: सौन्दर्य र वातावरणीय डिजाइन (दृश्य शैली र प्रयोगकर्ता अनुभव)
- **JavaScript**: यांत्रिक प्रणालीहरू (कार्यक्षमता र अन्तरक्रियाशीलता)
### किन आधुनिक JavaScript आर्किटेक्चर महत्त्वपूर्ण छ
हाम्रो च्याट अनुप्रयोगले आधुनिक JavaScript ढाँचाहरू प्रयोग गर्नेछ जुन तपाईंले व्यावसायिक अनुप्रयोगहरूमा देख्नुहुनेछ। यी अवधारणाहरू बुझ्नाले तपाईंलाई विकासकर्ता रूपमा बढ्दै जाँदा सहयोग गर्नेछ:
**क्लास-आधारित आर्किटेक्चर**: हामी हाम्रो कोडलाई कक्षाहरूमा व्यवस्थित गर्नेछौं, जुन वस्तुहरूको लागि ब्लूप्रिन्ट सिर्जना गर्ने जस्तै हो
**Async/Await**: समय लाग्ने अपरेसनहरू (जस्तै API कलहरू) ह्यान्डल गर्ने आधुनिक तरिका
**इभेन्ट-ड्रिभन प्रोग्रामिङ**: हाम्रो एप प्रयोगकर्ता कार्यहरू (क्लिक, कुञ्जी प्रेसहरू) प्रतिक्रिया दिन्छ
**DOM म्यानिपुलेसन**: प्रयोगकर्ता अन्तरक्रिया र API प्रतिक्रियाहरूको आधारमा वेबपेज सामग्रीलाई गतिशील रूपमा अपडेट गर्दै
### परियोजना संरचना सेटअप
फ्रन्टएन्ड डाइरेक्टरी यस संगठित संरचनासँग सिर्जना गर्नुहोस्:
```text
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
```
**आर्किटेक्चर बुझ्दै:**
- **संरचना (HTML)**, व्यवहार (JavaScript), र प्रस्तुति (CSS) बीच चिन्ताहरू अलग गर्दछ
- **सरल फाइल संरचना** कायम राख्छ जुन नेभिगेट गर्न र परिमार्जन गर्न सजिलो छ
- **वेब विकासका उत्कृष्ट अभ्यासहरू** अनुसरण गर्दछ संगठन र मर्मतयोग्यताका लागि
### HTML आधार निर्माण गर्दै: पहुँचयोग्यताको लागि अर्थपूर्ण संरचना
अब HTML संरचना सुरु गरौं। आधुनिक वेब विकासले "अर्थपूर्ण HTML" मा जोड दिन्छ – HTML तत्वहरू प्रयोग गर्दै जसले स्पष्ट रूपमा आफ्नो उद्देश्य वर्णन गर्दछ, केवल आफ्नो उपस्थिति मात्र होइन। यसले तपाईंको अनुप्रयोगलाई स्क्रिन रिडरहरू, सर्च इन्जिनहरू, र अन्य उपकरणहरूमा पहुँचयोग्य बनाउँछ।
**किन अर्थपूर्ण HTML महत्त्वपूर्ण छ**: कल्पना गर्नुहोस् कि तपाईंको च्याट एप कसैलाई फोनमा वर्णन गर्दै हुनुहुन्छ। तपाईं भन्नुहुन्छ "त्यहाँ शीर्षक र विवरण भएको हेडर छ, मुख्य क्षेत्र जहाँ कुराकानीहरू देखा पर्दछ, र तल सन्देश टाइप गर्न फारम छ।" अर्थपूर्ण HTML ले तत्वहरू प्रयोग गर्दछ जसले यो प्राकृतिक वर्णनसँग मेल खान्छ।
`index.html` सिर्जना गर्नुहोस् यस विचारपूर्वक संरचित मार्कअपसँग:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**प्रत्येक HTML तत्व र यसको उद्देश्य बुझ्दै:**
#### कागजात संरचना
- **``**: ब्राउजरलाई यो आधुनिक HTML5 हो भन्छ
- **``**: स्क्रिन रिडर र अनुवाद उपकरणहरूको लागि पृष्ठ भाषा निर्दिष्ट गर्दछ
- **``**: अन्तर्राष्ट्रिय पाठको लागि उचित क्यारेक्टर इन्कोडिङ सुनिश्चित गर्दछ
- **``**: पृष्ठलाई मोबाइल-उत्तरदायी बनाउँछ जूम र स्केल नियन्त्रण गरेर
#### अर्थपूर्ण तत्वहरू
- **``**: शीर्षक र विवरण भएको शीर्ष खण्ड स्पष्ट रूपमा पहिचान गर्दछ
- **``**: प्राथमिक सामग्री क्षेत्र (जहाँ कुराकानीहरू हुन्छन्) निर्दिष्ट गर्दछ
- **`