122 KiB

Raw Blame History Unescape Escape

एआईको साथमा च्याट सहायक बनाउनुहोस्

स्टार ट्रेकमा जहाजको कम्प्युटरसँग कुरा गर्दै जटिल प्रश्न सोध्ने र विचारशील उत्तर पाउने दृश्य सम्झनुहोस्? १९६० को दशकमा विज्ञान कल्पना जस्तो देखिने यो कुरा अहिले तपाईंले वेब प्रविधिहरू प्रयोग गरेर बनाउन सक्नुहुन्छ।

यस पाठमा, हामी HTML, CSS, JavaScript, र केही ब्याकएन्ड एकीकरणको प्रयोग गरेर एआई च्याट सहायक बनाउनेछौं। तपाईंले सिक्दै आएको सीपहरू शक्तिशाली एआई सेवाहरूमा जडान गर्न सक्ने तरिका पत्ता लगाउनुहुनेछ, जसले सन्दर्भ बुझ्न र अर्थपूर्ण उत्तरहरू उत्पन्न गर्न सक्छ।

एआईलाई विशाल पुस्तकालयको पहुँच जस्तै सोच्नुहोस्, जसले जानकारी मात्र खोज्न सक्दैन, तर तपाईंको विशिष्ट प्रश्नहरूलाई ध्यानमा राखेर सुसंगत उत्तरहरू पनि तयार गर्न सक्छ। हजारौं पृष्ठहरू खोज्नुको सट्टा, तपाईंले सिधा सन्दर्भयुक्त उत्तरहरू पाउनुहुन्छ।

एकीकरण परिचित वेब प्रविधिहरूको सहकार्यबाट हुन्छ। HTML च्याट इन्टरफेस बनाउँछ, CSS दृश्य डिजाइनको हेरचाह गर्छ, JavaScript प्रयोगकर्ता अन्तर्क्रियाहरू व्यवस्थापन गर्छ, र ब्याकएन्ड APIले सबैलाई एआई सेवाहरूमा जडान गर्छ। यो एक सिम्फनी सिर्जना गर्न विभिन्न अर्केस्ट्रा खण्डहरू मिलेर काम गर्ने जस्तै हो।

हामी प्राकृतिक मानव सञ्चार र मेसिन प्रशोधनको बीचमा पुल निर्माण गर्दैछौं। तपाईंले एआई सेवा एकीकरणको प्राविधिक कार्यान्वयन र अन्तर्क्रियाहरू सहज महसुस गराउने डिजाइन ढाँचाहरू सिक्नुहुनेछ।

यस पाठको अन्त्यसम्ममा, एआई एकीकरण रहस्यमय प्रक्रियाजस्तो होइन, तर तपाईंले काम गर्न सक्ने अर्को API जस्तो महसुस हुनेछ। तपाईंले ChatGPT र Claude जस्ता एप्लिकेसनहरूलाई शक्ति दिने आधारभूत ढाँचाहरू बुझ्नुहुनेछ, तपाईंले सिक्दै आएको वेब विकास सिद्धान्तहरूको प्रयोग गरेर।

तपाईंको तयार परियोजना यस प्रकार देखिनेछ:

एआई बुझ्दै: रहस्यबाट महारथसम्म

कोडमा प्रवेश गर्नु अघि, हामी केसँग काम गर्दैछौं भन्ने कुरा बुझौं। यदि तपाईंले पहिले API प्रयोग गर्नुभएको छ भने, तपाईंलाई आधारभूत ढाँचा थाहा छ: अनुरोध पठाउनुहोस्, प्रतिक्रिया प्राप्त गर्नुहोस्।

एआई APIहरू समान संरचना अनुसरण गर्छन्, तर डेटाबेसबाट पहिले नै भण्डारण गरिएको डाटा पुनःप्राप्त गर्ने सट्टा, तिनीहरूले विशाल पाठबाट सिकेका ढाँचाहरूको आधारमा नयाँ प्रतिक्रियाहरू उत्पन्न गर्छन्। यो पुस्तकालय क्याटलग प्रणाली र ज्ञानवान पुस्तकालयकारको बीचको भिन्नता जस्तै हो, जसले धेरै स्रोतहरूबाट जानकारी संश्लेषण गर्न सक्छ।

"जेनरेटिभ एआई" वास्तवमा के हो?

रोसेटा स्टोनले ज्ञात र अज्ञात भाषाहरू बीचको ढाँचाहरू पत्ता लगाएर विद्वानहरूलाई इजिप्टका हाइरोग्लिफिक्स बुझ्न कसरी मद्दत गर्‍यो भन्ने कुरा विचार गर्नुहोस्। एआई मोडेलहरूले पनि यस्तै काम गर्छन् – तिनीहरूले भाषा कसरी काम गर्छ भनेर बुझ्न विशाल पाठमा ढाँचाहरू पत्ता लगाउँछन्, त्यसपछि ती ढाँचाहरू प्रयोग गरेर नयाँ प्रश्नहरूको उपयुक्त उत्तरहरू उत्पन्न गर्छन्।

यसलाई सरल तुलना गरेर बुझाऔं:

परम्परागत डेटाबेस: तपाईंको जन्म प्रमाणपत्र माग्दा – तपाईंले हरेक पटक उही कागजात पाउनुहुन्छ
सर्च इन्जिन: पुस्तकालयकारलाई बिरालाहरूको बारेमा पुस्तकहरू खोज्न सोध्दा – तिनीहरूले उपलब्ध सामग्री देखाउँछन्
जेनरेटिभ एआई: ज्ञानवान साथीलाई बिरालाहरूको बारेमा सोध्दा – तिनीहरूले तपाईंलाई रोचक कुरा आफ्नै शब्दमा बताउँछन्, तपाईंको चाहनालाई ध्यानमा राखेर

एआई मोडेलहरूले कसरी सिक्छन् (सरल संस्करण)

एआई मोडेलहरूले पुस्तकहरू, लेखहरू, र संवादहरू समावेश गर्ने विशाल डेटासेटहरूमा पहुँच गरेर सिक्छन्। यस प्रक्रियामा, तिनीहरूले निम्न कुराहरूमा ढाँचाहरू पहिचान गर्छन्:

लेखनमा विचारहरू कसरी संरचित हुन्छन्
कुन शब्दहरू सामान्यत: सँगै देखा पर्छन्
संवादहरू सामान्यत: कसरी प्रवाहित हुन्छन्
औपचारिक र अनौपचारिक सञ्चार बीचको सन्दर्भात्मक भिन्नता

यो पुरातत्वविदहरूले प्राचीन भाषाहरू डिकोड गर्ने तरिकासँग मिल्दोजुल्दो छ: तिनीहरूले व्याकरण, शब्दावली, र सांस्कृतिक सन्दर्भ बुझ्न हजारौं उदाहरणहरू विश्लेषण गर्छन्, अन्ततः सिकेका ढाँचाहरू प्रयोग गरेर नयाँ पाठहरूको व्याख्या गर्न सक्षम हुन्छन्।

किन GitHub मोडेलहरू?

हामी GitHub मोडेलहरू प्रयोग गर्दैछौं किनभने यसले हामीलाई हाम्रो आफ्नै एआई पूर्वाधार सेटअप नगरी उद्यम-स्तरको एआई पहुँच दिन्छ (जुन अहिले तपाईंले गर्न चाहनुहुन्न!)। यो मौसम API प्रयोग गरेर मौसमको भविष्यवाणी गर्ने जस्तै हो, मौसम स्टेशनहरू हरेक ठाउँमा सेटअप नगरी।

यो "एआई-एज-अ-सर्भिस" हो, र सबैभन्दा राम्रो कुरा? यो सुरु गर्न निःशुल्क छ, त्यसैले तपाईंले ठूलो बिलको चिन्ता नगरी प्रयोग गर्न सक्नुहुन्छ।

GitHub मोडेलहरू प्रयोग गरेर, तपाईंले व्यावसायिक-स्तरको एआई क्षमताहरूलाई डेवलपर-मैत्री इन्टरफेस मार्फत पहुँच गर्न सक्नुहुन्छ। GitHub मोडेल प्लेग्राउन्ड एक परीक्षण वातावरणको रूपमा काम गर्छ जहाँ तपाईं विभिन्न एआई मोडेलहरू प्रयोग गर्न सक्नुहुन्छ र तिनीहरूको क्षमताहरू बुझ्न सक्नुहुन्छ। यहाँ किन FastAPI हाम्रो निर्माणको लागि उपयुक्त छ:

डिफल्ट रूपमा Async: एकै समयमा धेरै AI अनुरोधहरूलाई बिना अड्किए व्यवस्थापन गर्न सक्छ
स्वचालित डकुमेन्टेसन: /docs मा जानुहोस् र निःशुल्क सुन्दर, अन्तरक्रियात्मक API डकुमेन्टेसन पृष्ठ प्राप्त गर्नुहोस्
निर्मित मान्यता: समस्याहरू उत्पन्न हुनु अघि नै त्रुटिहरू पत्ता लगाउँछ
चटपटे छिटो: Python फ्रेमवर्कहरू मध्ये एकदम छिटो
आधुनिक Python: Python का सबै नवीनतम र उत्कृष्ट सुविधाहरू प्रयोग गर्दछ

र किन हामीलाई ब्याकएन्ड आवश्यक छ:

सुरक्षा: तपाईंको AI API कुञ्जी पासवर्ड जस्तै हो – यदि तपाईं यसलाई फ्रन्टएन्ड JavaScript मा राख्नुहुन्छ भने, तपाईंको वेबसाइटको स्रोत कोड हेर्ने जो कोहीले यसलाई चोर्न सक्छ र तपाईंको AI क्रेडिटहरू प्रयोग गर्न सक्छ। ब्याकएन्डले संवेदनशील प्रमाणहरू सुरक्षित राख्छ।

रेट लिमिटिंग र नियन्त्रण: ब्याकएन्डले प्रयोगकर्ताहरूले कति पटक अनुरोध गर्न सक्छन् भन्ने नियन्त्रण गर्न, प्रयोगकर्ता प्रमाणीकरण कार्यान्वयन गर्न, र प्रयोग ट्र्याक गर्न लगिङ थप्न अनुमति दिन्छ।

डाटा प्रशोधन: तपाईं संवादहरू बचत गर्न, अनुपयुक्त सामग्री फिल्टर गर्न, वा धेरै AI सेवाहरूलाई संयोजन गर्न चाहनुहुन्छ। यो तर्क ब्याकएन्डमा बस्छ।

आर्किटेक्चर क्लाइन्ट-सर्भर मोडेल जस्तै देखिन्छ:

फ्रन्टएन्ड: अन्तरक्रियाको लागि प्रयोगकर्ता इन्टरफेस तह
ब्याकएन्ड API: अनुरोध प्रशोधन र रुटिङ तह
AI सेवा: बाह्य गणना र प्रतिक्रिया उत्पादन
पर्यावरण चरहरू: सुरक्षित कन्फिगरेसन र प्रमाणपत्र भण्डारण

अनुरोध-प्रतिक्रिया प्रवाह बुझ्दै

आउनुहोस्, प्रयोगकर्ताले सन्देश पठाउँदा के हुन्छ भनेर ट्रेस गरौं:

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

प्रत्येक चरण बुझ्दै:

प्रयोगकर्ता अन्तरक्रिया: व्यक्तिले च्याट इन्टरफेसमा टाइप गर्छ
फ्रन्टएन्ड प्रशोधन: JavaScript ले इनपुटलाई समात्छ र JSON रूपमा ढाँचा बनाउँछ
API मान्यता: FastAPI ले Pydantic मोडेलहरू प्रयोग गरेर अनुरोधलाई स्वचालित रूपमा मान्यता दिन्छ
AI एकीकरण: ब्याकएन्डले सन्दर्भ (सिस्टम प्रम्प्ट) थप्छ र AI सेवालाई कल गर्छ
प्रतिक्रिया ह्यान्डलिङ: API ले AI प्रतिक्रिया प्राप्त गर्छ र आवश्यक परेमा यसलाई परिमार्जन गर्न सक्छ
फ्रन्टएन्ड प्रदर्शन: JavaScript ले च्याट इन्टरफेसमा प्रतिक्रिया देखाउँछ

API आर्किटेक्चर बुझ्दै

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 कोड थप्नुहोस्:

# 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

यी "विभिन्न उत्पत्ति" मानिन्छन्, यद्यपि तिनीहरू एउटै कम्प्युटरमा छन्!

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 सुरक्षा: विकास बनाम उत्पादन

# 🚨 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 ले उचित त्रुटि ह्यान्डलिङ समावेश गरेको देख्नुहोस्:

# 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 को कम्पार्टमेन्टलाइज्ड दृष्टिकोण जस्तै हुन् – प्रत्येक परियोजनाले आफ्नै अलग ठाउँ प्राप्त गर्दछ विशिष्ट उपकरणहरू र निर्भरताहरूको साथ, विभिन्न परियोजनाहरू बीचको द्वन्द्व रोक्दै।

# 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 सुरु गर्नु अघि, वेब विकासको सबैभन्दा महत्त्वपूर्ण पाठहरू मध्ये एकको बारेमा कुरा गरौं: तपाईंको गोप्य वास्तवमा गोप्य कसरी राख्ने। वातावरण चरहरू सुरक्षित भण्डार जस्तै हुन् जुन केवल तपाईंको अनुप्रयोगले पहुँच गर्न सक्छ।

वातावरण चरहरू के हुन्?

वातावरण चरहरूलाई सुरक्षा निक्षेप बक्स जस्तै सोच्नुहोस् – तपाईंले त्यहाँ आफ्नो मूल्यवान सामान राख्नुहुन्छ, र केवल तपाईं (र तपाईंको एप) सँग यसलाई बाहिर निकाल्नको लागि कुञ्जी छ। तपाईंको कोडमा संवेदनशील जानकारी सीधा लेख्ने सट्टा (जहाँ वास्तवमा जो कोहीले देख्न सक्छ), तपाईं यसलाई सुरक्षित रूपमा वातावरणमा भण्डारण गर्नुहुन्छ।

यहाँ भिन्नता छ:

गलत तरिका: तपाईंको पासवर्डलाई स्टिकी नोटमा लेखेर तपाईंको मोनिटरमा राख्नु
सही तरिका: तपाईंको पासवर्डलाई सुरक्षित पासवर्ड म्यानेजरमा राख्नु जुन केवल तपाईंले पहुँच गर्न सक्नुहुन्छ

वातावरण चरहरू किन महत्त्वपूर्ण छन्

# 🚨 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"
)

तपाईंले गोप्य हार्डकोड गर्दा के हुन्छ:

संस्करण नियन्त्रण एक्सपोजर: तपाईंको Git रिपोजिटरीमा पहुँच भएको जो कोहीले तपाईंको API कुञ्जी देख्छ
सार्वजनिक रिपोजिटरीहरू: यदि तपाईं GitHub मा धकेल्नुहुन्छ भने, तपाईंको कुञ्जी सम्पूर्ण इन्टरनेटमा देखिन्छ
टीम साझेदारी: तपाईंको परियोजनामा काम गर्ने अन्य विकासकर्ताहरूले तपाईंको व्यक्तिगत API कुञ्जीमा पहुँच प्राप्त गर्छन्
सुरक्षा उल्लङ्घनहरू: यदि कसैले तपाईंको API कुञ्जी चोर्छ भने, तिनीहरूले तपाईंको AI क्रेडिटहरू प्रयोग गर्न सक्छन्

तपाईंको वातावरण फाइल सेटअप गर्दै

तपाईंको ब्याकएन्ड डिरेक्टरीमा .env फाइल सिर्जना गर्नुहोस्। यो फाइलले तपाईंको गोप्य स्थानीय रूपमा भण्डारण गर्दछ:

# .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 सेवाहरू प्रयोग गर्न अनुमति दिन्छ:

टोकन सिर्जना चरण-दर-चरण:

GitHub सेटिङमा जानुहोस् → Developer settings → Personal access tokens → Tokens (classic)
"Generate new token (classic)" क्लिक गर्नुहोस्
म्याद समाप्ति सेट गर्नुहोस् (परीक्षणको लागि 30 दिन, उत्पादनको लागि लामो)
स्कोपहरू चयन गर्नुहोस्: "repo" र तपाईंलाई आवश्यक अन्य अनुमतिहरू जाँच गर्नुहोस्
टोकन सिर्जना गर्नुहोस् र तुरुन्तै प्रतिलिपि गर्नुहोस् (तपाईंले यसलाई फेरि देख्न सक्नुहुन्न!)
तपाईंको .env फाइलमा टोकन टाँस्नुहोस्

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

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 लाई कुन फाइलहरू कहिल्यै ट्र्याक वा अपलोड नगर्ने भनेर बताउँछ:

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

किन यो महत्त्वपूर्ण छ: एकपटक तपाईंले .env लाई .gitignore मा थप्नुभयो भने, Git ले तपाईंको वातावरण फाइललाई बेवास्ता गर्नेछ, तपाईंलाई तपाईंको गोप्य GitHub मा अनजाने अपलोड गर्नबाट रोक्नेछ।

विभिन्न वातावरणहरू, विभिन्न गोप्य

व्यावसायिक अनुप्रयोगहरूले विभिन्न वातावरणहरूको लागि विभिन्न API कुञ्जीहरू प्रयोग गर्छन्:

# .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 सर्भर स्टार्टअप प्रक्रिया बुझ्दै

# 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:

# 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 फाइलहरूमा परिवर्तनहरू बचत गर्दा स्वचालित रूपमा रीलोडिङ प्रदान गर्दछ। यसको मतलब तपाईं आफ्नो कोड परिमार्जन गर्न सक्नुहुन्छ र म्यानुअल रूपमा पुनः सुरु नगरी तुरुन्तै परीक्षण गर्न सक्नुहुन्छ।

# Enable hot reloading explicitly
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload

विकासका लागि लगिङ: के भइरहेको छ बुझ्नको लागि लगिङ थप्नुहोस्:

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. आफ्नो ब्याकएन्ड सर्भर सुरु गर्नुहोस्:

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. आफ्नो फ्रन्टएन्ड कन्फिगरेसन अपडेट गर्नुहोस्:

// 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. ब्राउजर विकास उपकरणहरूसँग परीक्षण गर्नुहोस्:

// 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 मा सिधै वातावरण चरहरू सेट गर्न सक्नुहुन्छ:

# 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 चलिरहेको छ जति समयसम्म पहुँचयोग्य रहन्छ

विकास कार्यप्रवाह:

VS Code मा कोड परिवर्तन गर्नुहोस्
FastAPI स्वतः रीलोड हुन्छ (Uvicorn को रीलोड मोडको लागि धन्यवाद)
सार्वजनिक URL मार्फत परिवर्तनहरू तुरुन्तै परीक्षण गर्नुहोस्
तयार हुँदा कमिट र पुश गर्नुहोस्

💡 प्रो टिप: विकासको क्रममा आफ्नो Codespace ब्याकएन्ड URL बुकमार्क गर्नुहोस्। किनभने Codespace नामहरू स्थिर हुन्छन्, तपाईंले उही Codespace प्रयोग गरिरहनुभएको छ भने URL परिवर्तन हुनेछैन।

फ्रन्टएन्ड च्याट इन्टरफेस सिर्जना गर्दै: जहाँ मानिसहरू AI सँग भेट्छन्

अब हामी प्रयोगकर्ता इन्टरफेस निर्माण गर्नेछौं – भाग जसले मानिसहरूलाई तपाईंको AI सहायकसँग कसरी अन्तरक्रिया गर्ने निर्धारण गर्दछ। जस्तै मूल iPhone को इन्टरफेसको डिजाइन, हामी जटिल प्रविधिलाई सहज र प्रयोग गर्न प्राकृतिक बनाउनेमा ध्यान केन्द्रित गर्दैछौं।

आधुनिक फ्रन्टएन्ड आर्किटेक्चर बुझ्दै

हाम्रो च्याट इन्टरफेसलाई "सिंगल पेज एप्लिकेसन" वा SPA भनिन्छ। पुरानो शैलीको दृष्टिकोण जहाँ प्रत्येक क्लिकले नयाँ पृष्ठ लोड गर्दछ, हाम्रो एप सहज र तुरुन्तै अपडेट हुन्छ:

पुराना वेबसाइटहरू: भौतिक पुस्तक पढ्ने जस्तै – तपाईं पूर्ण रूपमा नयाँ पृष्ठहरू पल्टाउनुहुन्छ हाम्रो च्याट एप: तपाईंको फोन प्रयोग गर्ने जस्तै – सबै कुरा प्रवाह हुन्छ र सहज रूपमा अपडेट हुन्छ

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 प्रतिक्रियाहरूको आधारमा वेबपेज सामग्रीलाई गतिशील रूपमा अपडेट गर्दै

परियोजना संरचना सेटअप

फ्रन्टएन्ड डाइरेक्टरी यस संगठित संरचनासँग सिर्जना गर्नुहोस्:

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 सिर्जना गर्नुहोस् यस विचारपूर्वक संरचित मार्कअपसँग:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat Assistant</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="chat-container">
        <header class="chat-header">
            <h1>AI Chat Assistant</h1>
            <p>Ask me anything!</p>
        </header>
        
        <main class="chat-messages" id="messages" role="log" aria-live="polite">
            <!-- Messages will be dynamically added here -->
        </main>
        
        <form class="chat-form" id="chatForm">
            <div class="input-group">
                <input 
                    type="text" 
                    id="messageInput" 
                    placeholder="Type your message here..." 
                    required
                    aria-label="Chat message input"
                >
                <button type="submit" id="sendBtn" aria-label="Send message">
                    Send
                </button>
            </div>
        </form>
    </div>
    <script src="app.js"></script>
</body>
</html>

प्रत्येक HTML तत्व र यसको उद्देश्य बुझ्दै:

कागजात संरचना

<!DOCTYPE html>: ब्राउजरलाई यो आधुनिक HTML5 हो भन्छ
<html lang="en">: स्क्रिन रिडर र अनुवाद उपकरणहरूको लागि पृष्ठ भाषा निर्दिष्ट गर्दछ
<meta charset="UTF-8">: अन्तर्राष्ट्रिय पाठको लागि उचित क्यारेक्टर इन्कोडिङ सुनिश्चित गर्दछ
<meta name="viewport"...>: पृष्ठलाई मोबाइल-उत्तरदायी बनाउँछ जूम र स्केल नियन्त्रण गरेर

अर्थपूर्ण तत्वहरू

<header>: शीर्षक र विवरण भएको शीर्ष खण्ड स्पष्ट रूपमा पहिचान गर्दछ
<main>: प्राथमिक सामग्री क्षेत्र (जहाँ कुराकानीहरू हुन्छन्) निर्दिष्ट गर्दछ
<form>: प्रयोगकर्ता इनपुटको लागि अर्थपूर्ण रूपमा सही छ, उचित कुञ्जीपाटी नेभिगेसन सक्षम गर्दछ

पहुँचयोग्यता सुविधाहरू

role="log": स्क्रिन रिडरहरूलाई यो क्षेत्र सन्देशहरूको कालानुक्रमिक लग समावेश गर्दछ भन्छ
aria-live="polite": स्क्रिन रिडरहरूलाई नयाँ सन्देशहरू बिना अवरोध घोषणा गर्दछ
aria-label: फारम नियन्त्रणहरूको लागि वर्णनात्मक लेबलहरू प्रदान गर्दछ
required: ब्राउजरले प्रयोगकर्ताहरूले सन्देश प्रविष्ट गर्नुहोस् भनेर मान्यता दिन्छ

CSS र JavaScript एकीकरण

class गुणहरू: CSS को लागि स्टाइलिङ हुकहरू प्रदान गर्दछ (जस्तै, chat-container, input-group)
id गुणहरू: JavaScript लाई विशिष्ट तत्वहरू फेला पार्न र हेरफेर गर्न अनुमति दिन्छ
स्क्रिप्ट स्थान: JavaScript फाइल अन्तमा लोड गरिन्छ ताकि HTML पहिले लोड होस्

किन यो संरचना काम गर्छ:

तार्किक प्रवाह: हेडर → मुख्य सामग्री → इनपुट फारम प्राकृतिक पढ्ने क्रमसँग मेल खान्छ
कुञ्जीपाटी पहुँचयोग्य: प्रयोगकर्ताहरूले सबै अन्तरक्रियात्मक तत्वहरूमा ट्याब गर्न सक्दछन्
स्क्रिन रिडर मैत्रीपूर्ण: दृश्य अपाङ्गता भएका प्रयोगकर्ताहरूका लागि स्पष्ट ल्यान्डमार्कहरू र विवरणहरू
मोबाइल उत्तरदायी: भ्यूपोर्ट मेटा ट्यागले उत्तरदायी डिजाइन सक्षम गर्दछ
प्रगतिशील वृद्धि: CSS वा JavaScript लोड गर्न असफल भए पनि काम गर्दछ

अन्तरक्रियात्मक JavaScript थप्दै: आधुनिक वेब अनुप्रयोग तर्क

अब हामी JavaScript निर्माण गर्नेछौं जसले हाम्रो च्याट इन्टरफेसलाई जीवन्त बनाउँछ। हामी व्यावसायिक वेब विकासमा तपाईंले सामना गर्ने आधुनिक JavaScript ढाँचाहरू प्रयोग गर्नेछौं, जसमा ES6 कक्षाहरू, async/await, र इभेन्ट-ड्रिभन प्रोग्रामिङ समावेश छ।

आधुनिक JavaScript आर्किटेक्चर बुझ्दै

प्रक्रियात्मक कोड लेख्ने (क्रममा चल्ने कार्यहरूको श्रृंखला) सट्टा, हामी क्लास-आधारित आर्किटेक्चर सिर्जना गर्नेछौं। कक्षा भनेको वस्तुहरू सिर्जना गर्नको लागि ब्लूप्रिन्ट जस्तै हो – जस्तै एक वास्तुकारको ब्लूप्रिन्टले धेरै घरहरू निर्माण गर्न प्रयोग गर्न सकिन्छ।

किन वेब अनुप्रयोगहरूको लागि कक्षाहरू प्रयोग गर्ने?

संगठन: सबै सम्बन्धित कार्यक्षमता एकसाथ समूह गरिएको छ
पुन: प्रयोगयोग्यता: तपाईंले एउटै पृष्ठमा धेरै च्याट उदाहरणहरू सिर्जना गर्न सक्नुहुन्छ
मर्मतयोग्यता: विशिष्ट सुविधाहरू डिबग गर्न र परिमार्जन गर्न सजिलो
व्यावसायिक मानक: यो ढाँचा React, Vue, र Angular जस्ता फ्रेमवर्कहरूमा प्रयोग गरिन्छ

app.js सिर्जना गर्नुहोस् यस आधुनिक, राम्रो संरचित JavaScript संग:

// app.js - Modern chat application logic

class ChatApp {
    constructor() {
        // Get references to DOM elements we'll need to manipulate
        this.messages = document.getElementById("messages");
        this.form = document.getElementById("chatForm");
        this.input = document.getElementById("messageInput");
        this.sendButton = document.getElementById("sendBtn");
        
        // Configure your backend URL here
        this.BASE_URL = "http://localhost:5000"; // Update this for your environment
        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
        
        // Set up event listeners when the chat app is created
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        // Listen for form submission (when user clicks Send or presses Enter)
        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
        
        // Also listen for Enter key in the input field (better UX)
        this.input.addEventListener("keypress", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                this.handleSubmit(e);
            }
        });
    }
    
    async handleSubmit(event) {
        event.preventDefault(); // Prevent form from refreshing the page
        
        const messageText = this.input.value.trim();
        if (!messageText) return; // Don't send empty messages
        
        // Provide user feedback that something is happening
        this.setLoading(true);
        
        // Add user message to chat immediately (optimistic UI)
        this.appendMessage(messageText, "user");
        
        // Clear input field so user can type next message
        this.input.value = '';
        
        try {
            // Call the AI API and wait for response
            const reply = await this.callAPI(messageText);
            
            // Add AI response to chat
            this.appendMessage(reply, "assistant");
        } catch (error) {
            console.error('API Error:', error);
            this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
        } finally {
            // Re-enable the interface regardless of success or failure
            this.setLoading(false);
        }
    }
    
    async callAPI(message) {
        const response = await fetch(this.API_ENDPOINT, {
            method: "POST",
            headers: { 
                "Content-Type": "application/json" 
            },
            body: JSON.stringify({ message })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data.response;
    }
    
    appendMessage(text, role) {
        const messageElement = document.createElement("div");
        messageElement.className = `message ${role}`;
        messageElement.innerHTML = `
            <div class="message-content">
                <span class="message-text">${this.escapeHtml(text)}</span>
                <span class="message-time">${new Date().toLocaleTimeString()}</span>
            </div>
        `;
        
        this.messages.appendChild(messageElement);
        this.scrollToBottom();
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    scrollToBottom() {
        this.messages.scrollTop = this.messages.scrollHeight;
    }
    
    setLoading(isLoading) {
        this.sendButton.disabled = isLoading;
        this.input.disabled = isLoading;
        this.sendButton.textContent = isLoading ? "Sending..." : "Send";
    }
}

// Initialize the chat application when the page loads
document.addEventListener("DOMContentLoaded", () => {
    new ChatApp();
});

प्रत्येक JavaScript अवधारणा बुझ्दै

ES6 कक्षा संरचना:

class ChatApp {
    constructor() {
        // This runs when you create a new ChatApp instance
        // It's like the "setup" function for your chat
    }
    
    methodName() {
        // Methods are functions that belong to the class
        // They can access class properties using "this"
    }
}

Async/Await ढाँचा:

// Old way (callback hell):
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Modern way (async/await):
try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error(error);
}

इभेन्ट-ड्रिभन प्रोग्रामिङ: केही भयो कि जाँच गरिरहनुको सट्टा, हामी घटनाहरूको लागि "सुन्छौं":

// When form is submitted, run handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));

// When Enter key is pressed, also run handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });

DOM म्यानिपुलेसन:

// Create new elements
const messageElement = document.createElement("div");

// Modify their properties
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";

// Add to the page
this.messages.appendChild(messageElement);

सुरक्षा र उत्कृष्ट अभ्यासहरू

XSS रोकथाम:

escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;  // This automatically escapes HTML
    return div.innerHTML;
}

किन यो महत्त्वपूर्ण छ: यदि प्रयोगकर्ताले <script>alert('hack')</script> टाइप गर्छ भने, यो कार्यले यसलाई पाठको रूपमा प्रदर्शन सुनिश्चित गर्दछ बरु कोडको रूपमा कार्यान्वयन नगरी।

त्रुटि ह्यान्डलिङ:

try {
    const reply = await this.callAPI(messageText);
    this.appendMessage(reply, "assistant");
} catch (error) {
    // Show user-friendly error instead of breaking the app
    this.appendMessage("Sorry, I'm having trouble...", "error");
}

प्रयोगकर्ता अनुभव विचारहरू:

आशावादी UI: प्रयोगकर्ता सन्देश तुरुन्तै थप्नुहोस्, सर्भर प्रतिक्रिया कुर्नुहोस्
लोडिङ अवस्था: बटनहरू अक्षम गर्नुहोस् र "पठाउँदै यो आर्किटेक्चर स्केलेबल छ – तपाईं सजिलै सन्देश सम्पादन, फाइल अपलोड, वा बहु संवाद थ्रेडहरू जस्ता सुविधाहरू थप्न सक्नुहुन्छ बिना कोर संरचना पुनःलेखन नगरी।

तपाईंको च्याट इन्टरफेसको स्टाइलिङ

अब CSS प्रयोग गरेर आधुनिक, आकर्षक च्याट इन्टरफेस बनाउँ। राम्रो स्टाइलिङले तपाईंको एप्लिकेशनलाई व्यावसायिक महसुस गराउँछ र समग्र प्रयोगकर्ता अनुभव सुधार गर्दछ। हामी Flexbox, CSS Grid, र कस्टम प्रोपर्टीहरू जस्ता आधुनिक CSS सुविधाहरू प्रयोग गर्नेछौं ताकि उत्तरदायी र पहुँचयोग्य डिजाइन तयार गर्न सकियोस्।

styles.css बनाउनुहोस् यी विस्तृत स्टाइलहरूसँग:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS आर्किटेक्चरको बुझाइ:

प्रयोग गर्दछ CSS कस्टम प्रोपर्टीहरू (भेरिएबलहरू) निरन्तर थिमिङ र सजिलो मर्मतका लागि
लागु गर्दछ Flexbox लेआउट उत्तरदायी डिजाइन र सही संरेखणका लागि
सामेल गर्दछ सन्देश देखिने क्रममा नरम एनिमेसनहरू, जो ध्यान भंग नगर्ने खालका छन्
प्रदान गर्दछ प्रयोगकर्ता सन्देशहरू, AI प्रतिक्रियाहरू, र त्रुटि अवस्थाहरू बीच दृश्य भिन्नता
समर्थन गर्दछ उत्तरदायी डिजाइन जसले डेस्कटप र मोबाइल उपकरणहरूमा काम गर्दछ
विचार गर्दछ पहुँचयोग्यता कम गति प्राथमिकताहरू र सही कन्ट्रास्ट अनुपातहरूसँग
प्रस्ताव गर्दछ प्रयोगकर्ताको प्रणाली प्राथमिकतामा आधारित डार्क मोड समर्थन

तपाईंको ब्याकएन्ड URL कन्फिगर गर्दै

अन्तिम चरण भनेको तपाईंको JavaScript मा BASE_URL अपडेट गर्नु हो ताकि यो तपाईंको ब्याकएन्ड सर्भरसँग मेल खान सकोस्:

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

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

तपाईंको ब्याकएन्ड URL निर्धारण गर्दै:

स्थानीय विकास: यदि फ्रन्टएन्ड र ब्याकएन्ड दुवै स्थानीय रूपमा चलाउँदै हुनुहुन्छ भने http://localhost:5000 प्रयोग गर्नुहोस्
Codespaces: पोर्ट 5000 सार्वजनिक बनाएपछि पोर्ट्स ट्याबमा तपाईंको ब्याकएन्ड URL खोज्नुहोस्
प्रोडक्सन: होस्टिङ सेवामा तैनाथ गर्दा तपाईंको वास्तविक डोमेनसँग प्रतिस्थापन गर्नुहोस्

💡 परीक्षण सुझाव: तपाईं आफ्नो FastAPI सर्भरबाट स्वागत सन्देश देख्नको लागि ब्राउजरमा रूट URL भ्रमण गरेर ब्याकएन्ड सिधै परीक्षण गर्न सक्नुहुन्छ।

परीक्षण र तैनाथी

अब तपाईंले फ्रन्टएन्ड र ब्याकएन्ड कम्पोनेन्टहरू निर्माण गर्नुभएको छ, आउनुहोस् सबै कुरा सँगै काम गर्छ कि भनेर परीक्षण गरौं र तपाईंको च्याट सहायकलाई अरूसँग साझा गर्न तैनाथी विकल्पहरूको अन्वेषण गरौं।

स्थानीय परीक्षण कार्यप्रवाह

तपाईंको पूर्ण एप्लिकेशन परीक्षण गर्न यी चरणहरू पालना गर्नुहोस्:

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

चरण-दर-चरण परीक्षण प्रक्रिया:

तपाईंको ब्याकएन्ड सर्भर सुरु गर्नुहोस्:
```
cd backend
source venv/bin/activate  # or venv\Scripts\activate on Windows
python api.py
```
API काम गरिरहेको छ कि छैन जाँच गर्नुहोस्:
- ब्राउजरमा http://localhost:5000 खोल्नुहोस्
- तपाईंले आफ्नो FastAPI सर्भरबाट स्वागत सन्देश देख्नुपर्छ
तपाईंको फ्रन्टएन्ड खोल्नुहोस्:
- तपाईंको फ्रन्टएन्ड डाइरेक्टरीमा जानुहोस्
- ब्राउजरमा index.html खोल्नुहोस्
- वा विकास अनुभव सुधार गर्न VS Code को Live Server एक्सटेन्सन प्रयोग गर्नुहोस्
च्याट कार्यक्षमता परीक्षण गर्नुहोस्:
- इनपुट फिल्डमा सन्देश टाइप गर्नुहोस्
- "Send" क्लिक गर्नुहोस् वा Enter थिच्नुहोस्
- AI ले उपयुक्त प्रतिक्रिया दिन्छ कि छैन जाँच गर्नुहोस्
- कुनै पनि JavaScript त्रुटिहरूको लागि ब्राउजर कन्सोल जाँच गर्नुहोस्

सामान्य समस्याहरू समाधान गर्दै

समस्या	लक्षण	समाधान
CORS त्रुटि	फ्रन्टएन्ड ब्याकएन्डमा पुग्न सक्दैन	FastAPI CORSMiddleware सही रूपमा कन्फिगर गरिएको छ कि छैन सुनिश्चित गर्नुहोस्
API Key त्रुटि	401 अनधिकृत प्रतिक्रिया	तपाईंको `GITHUB_TOKEN` वातावरण भेरिएबल जाँच गर्नुहोस्
कनेक्शन अस्वीकृत	फ्रन्टएन्डमा नेटवर्क त्रुटिहरू	ब्याकएन्ड URL र Flask सर्भर चलिरहेको छ कि छैन जाँच गर्नुहोस्
AI प्रतिक्रिया छैन	खाली वा त्रुटि प्रतिक्रिया	API कोटा वा प्रमाणीकरण समस्याहरूको लागि ब्याकएन्ड लगहरू जाँच गर्नुहोस्

सामान्य डिबगिङ चरणहरू:

ब्राउजरको डेभलपर टूल्स कन्सोल मा JavaScript त्रुटिहरू जाँच गर्नुहोस्
नेटवर्क ट्याब मा सफल API अनुरोधहरू र प्रतिक्रियाहरू देखिन्छ कि छैन जाँच गर्नुहोस्
ब्याकएन्ड टर्मिनल आउटपुट मा Python त्रुटिहरू वा API समस्याहरू समीक्षा गर्नुहोस्
पर्यावरण भेरिएबलहरू सही रूपमा लोड गरिएको र पहुँचयोग्य छन् कि छैन सुनिश्चित गर्नुहोस्

GitHub Copilot Agent चुनौती 🚀

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: संवाद इतिहास र सन्देश स्थायित्व थपेर च्याट सहायकलाई सुधार गर्नुहोस्। यो चुनौतीले तपाईंलाई च्याट एप्लिकेशनहरूमा अवस्था व्यवस्थापन गर्ने र राम्रो प्रयोगकर्ता अनुभवको लागि डाटा भण्डारण कार्यान्वयन गर्ने तरिका बुझ्न मद्दत गर्नेछ।

प्रेरणा: च्याट एप्लिकेशनलाई संवाद इतिहास समावेश गर्न संशोधन गर्नुहोस् जसले सत्रहरू बीचमा स्थायित्व कायम राख्छ। च्याट सन्देशहरू स्थानीय भण्डारणमा बचत गर्ने, पृष्ठ लोड हुँदा संवाद इतिहास देखाउने, र "Clear History" बटन समावेश गर्ने कार्यक्षमता थप्नुहोस्। साथै टाइपिङ संकेतकहरू र सन्देश टाइमस्ट्याम्पहरू कार्यान्वयन गर्नुहोस् ताकि च्याट अनुभवलाई अझ यथार्थपरक बनाइयोस्।

agent mode बारे थप जान्नुहोस्।

असाइनमेन्ट: तपाईंको व्यक्तिगत AI सहायक निर्माण गर्नुहोस्

अब तपाईं आफ्नो AI सहायक कार्यान्वयन निर्माण गर्नुहुनेछ। केवल ट्युटोरियल कोडलाई पुनः उत्पादन गर्नुको सट्टा, यो अवधारणाहरू लागू गर्दा तपाईंको आफ्नै रुचि र प्रयोग केसहरू प्रतिबिम्बित गर्ने केही निर्माण गर्ने अवसर हो।

परियोजना आवश्यकताहरू

तपाईंको परियोजनालाई सफा, व्यवस्थित संरचनासँग सेटअप गरौं:

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

कोर कार्यान्वयन कार्यहरू

ब्याकएन्ड विकास:

हाम्रो FastAPI कोड लिउँ र यसलाई तपाईंको बनाउनुहोस्
एक अद्वितीय AI व्यक्तित्व सिर्जना गर्नुहोस् – सायद एक सहयोगी खाना पकाउने सहायक, एक रचनात्मक लेखन साझेदार, वा अध्ययन साथी?
मजबुत त्रुटि ह्यान्डलिङ थप्नुहोस् ताकि तपाईंको एप्लिकेशन समस्याहरू हुँदा नबिग्रियोस्
स्पष्ट डकुमेन्टेसन लेख्नुहोस् जो कोहीलाई तपाईंको API कसरी काम गर्छ बुझ्न चाहन्छ

फ्रन्टएन्ड विकास:

एक च्याट इन्टरफेस निर्माण गर्नुहोस् जसले सहज र स्वागतयोग्य महसुस गराउँछ
सफा, आधुनिक JavaScript लेख्नुहोस् जसलाई तपाईं अन्य विकासकर्ताहरूलाई गर्वका साथ देखाउन सक्नुहुन्छ
कस्टम स्टाइलिङ डिजाइन गर्नुहोस् जसले तपाईंको AI को व्यक्तित्वलाई प्रतिबिम्बित गर्छ – रमाइलो र रंगीन? सफा र न्यूनतम? पूर्ण रूपमा तपाईंको रोजाइ!
पक्का गर्नुहोस् यो फोन र कम्प्युटर दुवैमा राम्रोसँग काम गर्छ

व्यक्तिगतकरण आवश्यकताहरू:

एक अद्वितीय नाम र व्यक्तित्व चयन गर्नुहोस् तपाईंको AI सहायकको लागि – सायद तपाईंको रुचि वा तपाईंले समाधान गर्न चाहेको समस्याहरू प्रतिबिम्बित गर्ने केही
भिजुअल डिजाइन अनुकूलन गर्नुहोस् ताकि तपाईंको सहायकको शैलीसँग मेल खान सकोस्
एक आकर्षक स्वागत सन्देश लेख्नुहोस् जसले मानिसहरूलाई च्याट सुरु गर्न प्रेरित गर्छ
विभिन्न प्रकारका प्रश्नहरूसँग तपाईंको सहायक परीक्षण गर्नुहोस् ताकि यसले कसरी प्रतिक्रिया दिन्छ हेर्न सकियोस्

सुधारका विचारहरू (वैकल्पिक)

तपाईंको परियोजनालाई अर्को स्तरमा लैजान चाहनुहुन्छ? यहाँ अन्वेषण गर्न केही रमाइलो विचारहरू छन्:

सुविधा	विवरण	तपाईंले अभ्यास गर्ने सीपहरू
सन्देश इतिहास	पृष्ठ रिफ्रेस पछि पनि संवाद सम्झनुहोस्	localStorage, JSON ह्यान्डलिङ
टाइपिङ संकेतकहरू	प्रतिक्रिया पर्खंदा "AI टाइप गर्दैछ..." देखाउनुहोस्	CSS एनिमेसन, असिंक्रोनस प्रोग्रामिङ
सन्देश टाइमस्ट्याम्पहरू	प्रत्येक सन्देश कहिले पठाइएको थियो देखाउनुहोस्	मिति/समय ढाँचाकरण, UX डिजाइन
च्याट निर्यात गर्नुहोस्	प्रयोगकर्ताहरूलाई उनीहरूको संवाद डाउनलोड गर्न दिनुहोस्	फाइल ह्यान्डलिङ, डाटा निर्यात
थिम स्विचिङ	लाइट/डार्क मोड टगल	CSS भेरिएबलहरू, प्रयोगकर्ता प्राथमिकताहरू
भ्वाइस इनपुट	स्पीच-टु-टेक्स्ट कार्यक्षमता थप्नुहोस्	वेब APIs, पहुँचयोग्यता

परीक्षण र डकुमेन्टेसन

गुणस्तर सुनिश्चितता:

विभिन्न इनपुट प्रकार र किनारा केसहरूसँग तपाईंको एप्लिकेशन परीक्षण गर्नुहोस्
पक्का गर्नुहोस् उत्तरदायी डिजाइन विभिन्न स्क्रिन साइजहरूमा काम गर्छ
किबोर्ड नेभिगेसन र स्क्रिन रिडरहरूसँग पहुँचयोग्यता जाँच गर्नुहोस्
HTML र CSS मानक अनुपालनको लागि मान्य गर्नुहोस्

डकुमेन्टेसन आवश्यकताहरू:

README.md लेख्नुहोस् जसले तपाईंको परियोजना र यसलाई कसरी चलाउने भनेर व्याख्या गर्छ
तपाईंको च्याट इन्टरफेसको स्क्रिनसटहरू समावेश गर्नुहोस् कार्यमा
तपाईंले थपेका कुनै पनि अद्वितीय सुविधाहरू वा अनुकूलनहरू डकुमेन्ट गर्नुहोस्
अन्य विकासकर्ताहरूका लागि स्पष्ट सेटअप निर्देशनहरू प्रदान गर्नुहोस्

पेश गर्ने दिशानिर्देशहरू

परियोजना डेलिभरेबलहरू:

सबै स्रोत कोडसहित पूर्ण परियोजना फोल्डर
README.md परियोजना विवरण र सेटअप निर्देशनहरूसहित
तपाईंको च्याट सहायक कार्यमा रहेको प्रदर्शन गर्ने स्क्रिनसटहरू
तपाईंले के सिक्नुभयो र के चुनौतीहरूको सामना गर्नुभयो भन्ने छोटो प्रतिबिम्ब

मूल्यांकन मापदण्ड:

कार्यक्षमता: के च्याट सहायक अपेक्षाअनुसार काम गर्छ?
कोड गुणस्तर: के कोड राम्रोसँग व्यवस्थित, टिप्पणी गरिएको, र मर्मतयोग्य छ?
डिजाइन: के इन्टरफेस दृश्यात्मक रूपमा आकर्षक र प्रयोगकर्ता-अनुकूल छ?
रचनात्मकता: तपाईंको कार्यान्वयन कति अद्वितीय र व्यक्तिगत छ?
डकुमेन्टेसन: के सेटअप निर्देशनहरू स्पष्ट र पूर्ण छन्?

💡 सफलता सुझाव: पहिले आधारभूत आवश्यकताहरूबाट सुरु गर्नुहोस्, त्यसपछि सबै कुरा काम गरेपछि सुधारहरू थप्नुहोस्। उन्नत सुविधाहरू थप्नुअघि एक पॉलिश गरिएको कोर अनुभव सिर्जना गर्न ध्यान केन्द्रित गर्नुहोस्।

समाधान

बोनस चुनौतीहरू

तपाईंको AI सहायकलाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? यी उन्नत चुनौतीहरू प्रयास गर्नुहोस् जसले AI एकीकरण र वेब विकासको तपाईंको बुझाइलाई गहिरो बनाउँछ।

व्यक्तित्व अनुकूलन

वास्तविक जादू तब हुन्छ जब तपाईं आफ्नो AI सहायकलाई अद्वितीय व्यक्तित्व दिनुहुन्छ। विभिन्न प्रणाली प्रेरणाहरू प्रयोग गरेर विशेष सहायकहरू सिर्जना गर्नुहोस्:

व्यावसायिक सहायक उदाहरण:

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

रचनात्मक लेखन सहयोगी उदाहरण:

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

प्राविधिक मेन्टर उदाहरण:

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

फ्रन्टएन्ड सुधारहरू

तपाईंको च्याट इन्टरफेसलाई यी दृश्य र कार्यात्मक सुधारहरूसँग रूपान्तरण गर्नुहोस्:

उन्नत CSS सुविधाहरू:

सन्देश एनिमेसन र ट्रान्जिसनहरू नरम बनाउनुहोस्
CSS आकारहरू र ग्रेडियन्टहरूसँग कस्टम च्याट बबल डिजाइन थप्नुहोस्
AI "सोच्दैछ" हुँदा टाइपिङ संकेतक एनिमेसन सिर्जना गर्नुहोस्
इमोजी प्रतिक्रिया वा सन्देश रेटिङ प्रणाली डिजाइन गर्नुहोस्

JavaScript सुधारहरू:

किबोर्ड सर्टकटहरू थप्नुहोस् (Ctrl+Enter पठाउन, Escape इनपुट खाली गर्न)
सन्देश खोज र फिल्टरिङ कार्यक्षमता कार्यान्वयन गर्नुहोस्
संवाद निर्यात सुविधा सिर्जना गर्नुहोस् (टेक्स्ट वा JSON रूपमा डाउनलोड गर्नुहोस्)
सन्देश हराउनबाट रोक्नको लागि स्थानीय भण्डारणमा स्वत: बचत थप्नुहोस्

उन्नत AI एकीकरण

बहु AI व्यक्तित्वहरू:

विभिन्न AI व्यक्तित्वहरू बीच स्विच गर्न ड्रपडाउन सिर्जना गर्नुहोस्
प्रयोगकर्ताको मनपर्ने व्यक्तित्वलाई स्थानीय भण्डारणमा बचत गर्नुहोस्
संवाद प्रवाह कायम राख्ने सन्दर्भ स्विचिङ कार्यान्वयन गर्नुहोस्

स्मार्ट प्रतिक्रिया सुविधाहरू:

संवाद सन्दर्भ जागरूकता थप्नुहोस् (AI ले अघिल्लो सन्देशहरू सम्झन्छ)
संवाद विषयको आधारमा स्मार्ट सुझावहरू कार्यान्वयन गर्नुहोस्
सामान्य प्रश्नहरूको लागि छिटो प्रतिक्रिया बटनहरू सिर्जना गर्नुहोस्

🎯 सिकाइको लक्ष्य: यी बोनस चुनौतीहरूले तपाईंलाई उत्पादन एप्लिकेशनहरूमा प्रयोग गरिने उन्नत वेब विकास ढाँचाहरू र AI एकीकरण प्रविधिहरू बुझ्न मद्दत गर्छ।

सारांश र आगामी चरणहरू

बधाई छ! तपाईंले स्क्र्याचबाट पूर्ण AI-संचालित च्याट सहायक सफलतापूर्वक निर्माण गर्नुभएको छ। यस परियोजनाले तपाईंलाई आधुनिक वेब विकास प्रविधिहरू र AI एकीकरणसँग व्यावहारिक अनुभव प्रदान गरेको छ – आजको प्रविधि परिदृश्यमा अत्यधिक मूल्यवान सीपहरू।

तपाईंले के हासिल गर्नुभयो

यस पाठको क्रममा, तपाईंले धेरै प्रमुख प्रविधिहरू र अवधारणाहरूमा महारत हासिल गर्नुभएको छ:

ब्याकएन्ड विकास:

GitHub Models API सँग एकीकृत AI कार्यक्षमताका लागि
Flask प्रयोग गरेर RESTful API निर्माण गरियो उचित त्रुटि ह्यान्डलिङसहित
सुरक्षित प्रमाणीकरण कार्यान्वयन गरियो वातावरण भेरिएबलहरू प्रयोग गरेर
CORS कन्फिगर गरियो फ्रन्टएन्ड र ब्याकएन्ड बीच क्रस-ओरिजिन अनुरोधहरूको लागि

फ्रन्टएन्ड विकास:

उत्तरदायी च्याट इन्टरफेस सिर्जना गरियो सेम्यान्टिक HTML प्रयोग गरेर
आधुनिक JavaScript कार्यान्वयन गरियो async/await र क्लास-आधारित आर्किटेक्चरको साथ
CSS Grid, Flexbox, र एनिमेसनहरू प्रयोग गरेर आकर्षक प्रयोगकर्ता इन्टरफेस डिजाइन गरियो
पहुंचयोग्यता सुविधाहरू र उत्तरदायी डिजाइन सिद्धान्तहरू थपियो

फुल-स्ट्याक एकीकरण:

HTTP API कलहरू मार्फत फ्रन्टएन्ड र ब्याकएन्ड जडान गरियो
रियल-टाइम प्रयोगकर्ता अन्तरक्रियाहरू र असिंक्रोनस डाटा प्रवाह ह्यान्डल गरियो
एप्लिकेशनमा त्रुटि ह्यान्डलिङ र प्रयोगकर्ता प्रतिक्रिया कार्यान्वयन गरियो
प्रयोगकर्ता इनपुटदेखि AI प्रतिक्रियासम्मको पूर्ण एप्लिकेशन कार्यप्रवाह परीक्षण गरियो

प्रमुख सिकाइ परिणामहरू

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

यस परियोजनाले तपाईंलाई AI-संचालित एप्लिकेशनहरू निर्माणको आधारभूत कुराहरूमा परिचित गराएको छ, जसले वेब विकासको भविष्यलाई प्रतिनिधित्व गर्दछ। तपाईंले परम्परागत वेब एप्लिकेशनहरूमा AI क्षमताहरू एकीकृत गर्ने तरिका बुझ्नुभएको छ, जसले आकर्षक प्रयोगकर्ता अनुभवहरू सिर्जना गर्दछ जो बौद्धिक र उत्तरदायी महसुस गर्छ।

व्यावसायिक अनुप्रयोगहरू

यस पाठमा तपाईंले विकास गरेका सीपहरू आधुनिक सफ्टवेयर विकास कर

पोर्ट फर्वार्डिङ तपाईंको एप्लिकेसन परीक्षण गर्नका लागि

Codespaces ले के प्रदान गर्छ:

स्थानीय वातावरण सेटअप र कन्फिगरेसन समस्याहरू समाप्त गर्छ
विभिन्न उपकरणहरूमा समान विकास वातावरण प्रदान गर्छ
वेब विकासका लागि पूर्व-कन्फिगर गरिएको उपकरणहरू र एक्सटेन्सनहरू सामेल छन्
संस्करण नियन्त्रण र सहकार्यका लागि GitHub सँग सहज एकीकरण प्रदान गर्छ

🚀 प्रो टिप: Codespaces AI एप्लिकेसन सिक्न र प्रोटोटाइप बनाउनका लागि उपयुक्त छ किनभने यसले सबै जटिल वातावरण सेटअप स्वचालित रूपमा व्यवस्थापन गर्छ, जसले तपाईंलाई कन्फिगरेसन समस्यामा अल्झिनुको सट्टा निर्माण र सिकाइमा ध्यान केन्द्रित गर्न मद्दत गर्छ।

अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।

122 KiB Raw Blame History Unescape Escape

एआईको साथमा च्याट सहायक बनाउनुहोस्

एआई बुझ्दै: रहस्यबाट महारथसम्म

"जेनरेटिभ एआई" वास्तवमा के हो?

एआई मोडेलहरूले कसरी सिक्छन् (सरल संस्करण)

किन GitHub मोडेलहरू?

अनुरोध-प्रतिक्रिया प्रवाह बुझ्दै

API आर्किटेक्चर बुझ्दै

FastAPI एप्लिकेसन सिर्जना गर्दै

CORS बुझ्दै: वेबको सुरक्षा गार्ड

CORS के हो र यो किन छ?

तपाईंको विकास वातावरणमा CORS

CORS सुरक्षा: विकास बनाम उत्पादन

सामान्य CORS परिदृश्यहरू र समाधानहरू

त्रुटि ह्यान्डलिङ र मान्यता

तपाईंको ब्याकएन्ड सेटअप र चलाउँदै

Python वातावरण सेटअप

वातावरण कन्फिगरेसन: गोप्य सुरक्षित राख्दै

वातावरण चरहरू के हुन्?

वातावरण चरहरू किन महत्त्वपूर्ण छन्

तपाईंको वातावरण फाइल सेटअप गर्दै

तपाईंको GitHub व्यक्तिगत पहुँच टोकन सिर्जना गर्दै

Python मा वातावरण चरहरू लोड गर्दै

Git सुरक्षा: .gitignore फाइल

विभिन्न वातावरणहरू, विभिन्न गोप्य

तपाईंको विकास सर्भर सुरु गर्दै: तपाईंको FastAPI जीवनमा ल्याउँदै

FastAPI सर्भर स्टार्टअप प्रक्रिया बुझ्दै

सामान्य सुरु हुने समस्याहरू समाधान गर्ने

विकासका उत्कृष्ट अभ्यासहरू

GitHub Codespaces को लागि कन्फिगर गर्दै: क्लाउड विकास सजिलो बनाउँदै

Codespaces नेटवर्किङ बुझ्दै

चरण-दर-चरण Codespaces कन्फिगरेसन

Codespace URL बुझ्दै

आफ्नो Codespace सेटअप परीक्षण गर्दै

Codespaces बनाम स्थानीय विकास

Codespace विकास सुझावहरू

फ्रन्टएन्ड च्याट इन्टरफेस सिर्जना गर्दै: जहाँ मानिसहरू AI सँग भेट्छन्

आधुनिक फ्रन्टएन्ड आर्किटेक्चर बुझ्दै

फ्रन्टएन्ड विकासका तीन स्तम्भहरू

किन आधुनिक JavaScript आर्किटेक्चर महत्त्वपूर्ण छ

परियोजना संरचना सेटअप

HTML आधार निर्माण गर्दै: पहुँचयोग्यताको लागि अर्थपूर्ण संरचना

कागजात संरचना

अर्थपूर्ण तत्वहरू

पहुँचयोग्यता सुविधाहरू

CSS र JavaScript एकीकरण

अन्तरक्रियात्मक JavaScript थप्दै: आधुनिक वेब अनुप्रयोग तर्क

आधुनिक JavaScript आर्किटेक्चर बुझ्दै

प्रत्येक JavaScript अवधारणा बुझ्दै

सुरक्षा र उत्कृष्ट अभ्यासहरू

तपाईंको च्याट इन्टरफेसको स्टाइलिङ

तपाईंको ब्याकएन्ड URL कन्फिगर गर्दै

परीक्षण र तैनाथी

स्थानीय परीक्षण कार्यप्रवाह

सामान्य समस्याहरू समाधान गर्दै

GitHub Copilot Agent चुनौती 🚀

असाइनमेन्ट: तपाईंको व्यक्तिगत AI सहायक निर्माण गर्नुहोस्

परियोजना आवश्यकताहरू

कोर कार्यान्वयन कार्यहरू

सुधारका विचारहरू (वैकल्पिक)

परीक्षण र डकुमेन्टेसन

पेश गर्ने दिशानिर्देशहरू

समाधान

बोनस चुनौतीहरू

व्यक्तित्व अनुकूलन

फ्रन्टएन्ड सुधारहरू

उन्नत AI एकीकरण

सारांश र आगामी चरणहरू

तपाईंले के हासिल गर्नुभयो

प्रमुख सिकाइ परिणामहरू

व्यावसायिक अनुप्रयोगहरू

122 KiB

Raw Blame History Unescape Escape