Web-Dev-For-Beginners/translations/hi/9-chat-project

AI के साथ एक चैट असिस्टेंट बनाएं

Star Trek में याद है जब दल जहाज के कंप्यूटर से आराम से बातचीत करता था, उससे जटिल सवाल पूछता था और विचारशील जवाब पाता था? 1960 के दशक में जो शुद्ध विज्ञान कथा जैसा लगता था, अब कुछ ऐसा है जिसे आप पहले से जानते वेब तकनीकों का उपयोग करके बना सकते हैं।

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

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

इंटीग्रेशन परिचित वेब प्रौद्योगिकियों के संयोजन के माध्यम से होता है। HTML चैट इंटरफ़ेस बनाता है, CSS विज़ुअल डिज़ाइन को संभालता है, JavaScript उपयोगकर्ता इंटरैक्शन को प्रबंधित करता है, और एक बैकएंड API सब कुछ AI सेवाओं से जोड़ता है। यह उसी तरह है जैसे ऑर्केस्ट्रा के विभिन्न हिस्से मिलकर एक सिम्फनी बनाते हैं।

हम मौलिक रूप से प्राकृतिक मानव संचार और मशीन प्रसंस्करण के बीच एक पुल बना रहे हैं। आप AI सेवा इंटीग्रेशन के तकनीकी कार्यान्वयन और डिज़ाइन पैटर्न को सीखेंगे जो इंटरैक्शन को सहज महसूस कराते हैं।

इस पाठ के अंत तक, AI इंटीग्रेशन रहस्यमयी प्रक्रिया की बजाय एक और API की तरह लगेगा जिसके साथ आप काम कर सकते हैं। आप उन नींव पैटर्न को समझेंगे जो ChatGPT और Claude जैसे एप्लिकेशन को शक्ति देते हैं, उन्हीं वेब विकास सिद्धांतों का उपयोग करते हुए जिन्हें आप सीख रहे हैं।

⚡ अगले 5 मिनट में आप क्या कर सकते हैं

व्यस्त डेवलपर्स के लिए त्वरित आरंभ मार्ग

flowchart LR
    A[⚡ 5 मिनट] --> B[GitHub टोकन प्राप्त करें]
    B --> C[AI प्लेग्राउंड का परीक्षण करें]
    C --> D[पायथन कोड कॉपी करें]
    D --> E[AI प्रतिक्रियाएँ देखें]

• मिनट 1: GitHub Models Playground पर जाएं और एक व्यक्तिगत एक्सेस टोकन बनाएँ
• मिनट 2: सीधे प्लेग्राउंड इंटरफ़ेस में AI इंटरैक्शन का परीक्षण करें
• मिनट 3: "Code" टैब पर क्लिक करें और Python स्निपेट कॉपी करें
• मिनट 4: अपना टोकन इस्तेमाल करते हुए कोड स्थानीय रूप से चलाएँ: GITHUB_TOKEN=your_token python test.py
• मिनट 5: अपनी खुद की कोड से पहली AI प्रतिक्रिया उत्पन्न होते देखें

त्वरित परीक्षण कोड:

import os
from openai import OpenAI

client = OpenAI(
    base_url="https://models.github.ai/inference",
    api_key="your_token_here"
)

response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Hello AI!"}],
    model="openai/gpt-4o-mini"
)

print(response.choices[0].message.content)

यह क्यों महत्वपूर्ण है: 5 मिनट में, आप प्रोग्रामेटिक AI इंटरैक्शन का जादू अनुभव करेंगे। यह हर AI एप्लिकेशन की मूलभूत इमारत है जिसका आप उपयोग करते हैं।

आपका पूरा प्रोजेक्ट ऐसा दिखेगा:

🗺️ AI एप्लिकेशन विकास के माध्यम से आपकी सीखने की यात्रा

journey
    title वेब विकास से एआई एकीकरण तक
    section एआई की बुनियाद समझना
      जेनेरेटिव एआई अवधारणाओं की खोज करें: 4: You
      GitHub मॉडल्स प्लेटफॉर्म का अन्वेषण करें: 6: You
      एआई पैरामीटर और प्रॉम्प्ट में महारत हासिल करें: 8: You
    section बैकएंड एकीकरण
      पायथन एपीआई सर्वर बनाएं: 5: You
      एआई फ़ंक्शन कॉल लागू करें: 7: You
      असिंक्रोनस ऑपरेशन्स को संभालें: 8: You
    section फ्रंटएंड विकास
      आधुनिक चैट इंटरफ़ेस बनाएं: 6: You
      रियल-टाइम इंटरएक्शन में महारत हासिल करें: 8: You
      उत्तरदायी उपयोगकर्ता अनुभव बनाएं: 9: You
    section पेशेवर अनुप्रयोग
      पूर्ण एआई सिस्टम तैनात करें: 7: You
      प्रदर्शन पैटर्न अनुकूलित करें: 8: You
      प्रोडक्शन-रेडी ऐप बनाएं: 9: You

आपकी यात्रा का गंतव्य: इस पाठ के अंत तक, आप एक पूर्ण AI संचालित एप्लिकेशन बना चुके होंगे जो आधुनिक AI सहायक जैसे ChatGPT, Claude, और Google Bard को शक्ति देने वाली वही तकनीकें और पैटर्न उपयोग करता है।

AI को समझना: रहस्य से महारथ तक

कोड में जाने से पहले, आइए समझते हैं कि हम क्या काम कर रहे हैं। यदि आपने पहले APIs का उपयोग किया है, तो आप बुनियादी पैटर्न जानते हैं: अनुरोध भेजना, प्रतिक्रिया प्राप्त करना।

AI APIs भी इसी तरह संरचित होते हैं, लेकिन डेटा बेस से पहले से संग्रहित डेटा पुनः प्राप्त करने के बजाय, ये विशाल मात्रा में पाठ से सीखे गए पैटर्न पर आधारित नई प्रतिक्रियाएं उत्पन्न करते हैं। इसे पुस्तकालय के कैटलॉग सिस्टम की तुलना में एक जानकार पुस्तकालयाध्यक्ष की तरह सोचें जो कई स्रोतों से जानकारी संकलित कर सकता है।

"जनरेटिव AI" वास्तव में क्या है?

विचार करें कि रोसेटा स्टोन ने विद्वानों को मिस्री पिक्टोग्राफिक्स को समझने में कैसे मदद की थी, ज्ञात और अज्ञात भाषाओं के बीच पैटर्न ढूंढकर। AI मॉडल भी इसी तरह काम करते हैं – वे विशाल मात्रा में पाठ में पैटर्न ढूंढते हैं यह समझने के लिए कि भाषा कैसे काम करती है, फिर उन पैटर्न का उपयोग नए सवालों के लिए उपयुक्त उत्तर उत्पन्न करने में करते हैं।

मैं इसे एक सरल तुलना से बताता हूँ:

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

graph LR
    A[आपका प्रश्न] --> B[एआई मॉडल]
    B --> C[पैटर्न पहचान]
    C --> D[सामग्री निर्माण]
    D --> E[प्रासंगिक उत्तर]
    
    F[प्रशिक्षण डेटा<br/>पुस्तकें, लेख, वेब] --> B

AI मॉडल कैसे सीखते हैं (सरल संस्करण)

AI मॉडल पुस्तकें, लेख, और संवादों सहित विशाल डेटा सेट में पाठ के संपर्क से सीखते हैं। इस प्रक्रिया के माध्यम से वे पैटर्न पहचानते हैं:

• लिखित संचार में विचारों की संरचना कैसे होती है
• किन शब्दों का एक साथ अक्सर उपयोग होता है
• बातचीत आमतौर पर कैसे आगे बढ़ती है
• औपचारिक और अनौपचारिक संचार में संदर्भ आधारित भिन्नताएं

यह उसी तरह है जैसे पुरातत्वविद् प्राचीन भाषाओं को समझते हैं: वे हजारों उदाहरणों का विश्लेषण करके व्याकरण, शब्दावली और सांस्कृतिक संदर्भ को समझते हैं, अंततः उन शिक्षित पैटर्न का उपयोग कर नई पाठ्यपुस्तकें व्याख्यायित करने में सक्षम होते हैं।

GitHub Models क्यों?

हम GitHub Models का उपयोग एक व्यावहारिक कारण से कर रहे हैं – यह हमें एंटरप्राइज-स्तर के AI तक पहुंच देता है बिना अपनी खुद की AI इन्फ्रास्ट्रक्चर सेटअप किए (जो, मुझ पर भरोसा करें, आप अभी नहीं करना चाहेंगे!)। इसे ऐसे सोचें जैसे आप मौसम API का उपयोग कर रहे हों बजाय हर जगह मौसम स्टेशन लगाने के।

यह मूल रूप से "AI-as-a-Service" है, और सबसे अच्छी बात? शुरुआत करने के लिए यह मुफ़्त है, ताकि आप बिना बड़े बिल की चिंता किए प्रयोग कर सकें।

graph LR
    A[फ्रंटेंड चैट UI] --> B[आपका बैकएंड API]
    B --> C[GitHub मॉडल्स API]
    C --> D[एआई मॉडल प्रोसेसिंग]
    D --> C
    C --> B
    B --> A

हम GitHub Models का उपयोग अपने बैकएंड एकीकरण के लिए करेंगे, जो डेवलपर-मैत्रीपूर्ण इंटरफ़ेस के माध्यम से पेशेवर-ग्रेड AI क्षमताएं प्रदान करता है। GitHub Models Playground एक परीक्षण वातावरण के रूप में कार्य करता है जहाँ आप विभिन्न AI मॉडल के साथ प्रयोग कर सकते हैं और उनकी क्षमताओं को समझ सकते हैं इससे पहले कि आप उन्हें कोड में लागू करें।

🧠 AI एप्लिकेशन विकास पारिस्थितिकी तंत्र

mindmap
  root((एआई विकास))
    Understanding AI
      Generative Models
        पैटर्न पहचान
        सामग्री निर्माण
        संदर्भ समझना
        प्रतिक्रिया संश्लेषण
      AI Parameters
        तापमान नियंत्रण
        टोकन सीमाएं
        टॉप-प फ़िल्टरिंग
        सिस्टम प्रॉम्प्ट्स
    Backend Architecture
      API Integration
        गिटहब मॉडल्स
        प्रमाणीकरण
        अनुरोध प्रबंधन
        त्रुटि प्रबंधन
      Python Infrastructure
        FastAPI फ्रेमवर्क
        असिंक संचालन
        पर्यावरण सुरक्षा
        CORS कॉन्फ़िगरेशन
    Frontend Experience
      Chat Interface
        वास्तविक समय अपडेट
        संदेश इतिहास
        उपयोगकर्ता प्रतिक्रिया
        लोडिंग स्थितियाँ
      Modern Web Tech
        ES6 क्लासेस
        Async/Await
        DOM हेरफेर
        इवेंट हैंडलिंग
    Professional Patterns
      Security Best Practices
        टोकन प्रबंधन
        इनपुट सत्यापन
        XSS रोकथाम
        त्रुटि सीमाएँ
      Production Readiness
        प्रदर्शन अनुकूलन
        उत्तरदायी डिज़ाइन
        पहुंच योग्यता
        परीक्षण रणनीतियाँ

मूल सिद्धांत: AI एप्लिकेशन विकास पारंपरिक वेब विकास कौशल को AI सेवा इंटीग्रेशन के साथ संयोजित करता है, जिससे उपयोगकर्ताओं के लिए स्वाभाविक और उत्तरदायी बुद्धिमान एप्लिकेशन बनते हैं।

प्लेग्राउंड को इतना उपयोगी बनाने वाली बातें:

• GPT-4o-mini, Claude, और अन्य (सभी मुफ़्त!) जैसे विभिन्न AI मॉडल आज़माएं
• कोई भी कोड लिखने से पहले अपने विचार और प्रॉम्प्ट का परीक्षण करें
• अपनी पसंदीदा प्रोग्रामिंग भाषा में तैयार-उपयोग कोड स्निपेट प्राप्त करें
• क्रिएटिविटी स्तर और प्रतिक्रिया की लंबाई जैसे सेटिंग्स को समायोजित करें और देखें कैसे वे परिणाम को प्रभावित करते हैं

जब आप थोड़ा प्रयोग कर लें, तो बस "Code" टैब पर क्लिक करें और अपनी प्रोग्रामिंग भाषा चुनें ताकि आपको आवश्यक कार्यान्वयन कोड मिल सके।

Python बैकएंड इंटीग्रेशन सेट करना

अब आइए Python का उपयोग करके AI इंटीग्रेशन को लागू करें। Python AI एप्लिकेशन के लिए उत्कृष्ट है इसकी सरल सिंटैक्स और शक्तिशाली लाइब्रेरीज़ के कारण। हम GitHub Models प्लेग्राउंड से कोड लेकर शुरू करेंगे और फिर इसे पुन: प्रयोज्य, प्रोडक्शन-तैयार फ़ंक्शन में सुधारेंगे।

मूल कार्यान्वयन को समझना

जब आप प्लेग्राउंड से Python कोड प्राप्त करते हैं, तो आपको कुछ ऐसा मिलेगा। शुरुआत में यह बहुत अधिक लग सकता है – चलिए इसे टुकड़ों में समझते हैं:

"""Run this model in Python

> pip install openai
"""
import os
from openai import OpenAI

# मॉडल के साथ प्रमाणीकरण करने के लिए, आपको अपने GitHub सेटिंग्स में एक व्यक्तिगत एक्सेस टोकन (PAT) जनरेट करना होगा।
# यहां दिए गए निर्देशों का पालन करके अपना PAT टोकन बनाएं: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
    base_url="https://models.github.ai/inference",
    api_key=os.environ["GITHUB_TOKEN"],
)

response = client.chat.completions.create(
    messages=[
        {
            "role": "system",
            "content": "",
        },
        {
            "role": "user",
            "content": "What is the capital of France?",
        }
    ],
    model="openai/gpt-4o-mini",
    temperature=1,
    max_tokens=4096,
    top_p=1
)

print(response.choices[0].message.content)

इस कोड में हो रहा है:

• आयात करते हैं आवश्यक टूल्स: पर्यावरण चर पढ़ने के लिए os और AI संवाद करने के लिए OpenAI
• OpenAI क्लाइंट सेटअप करते हैं जो सीधे OpenAI से नहीं बल्कि GitHub के AI सर्वर से जुड़ता है
• विशेष GitHub टोकन का उपयोग कर प्रमाणीकरण करते हैं (थोड़ा बाद में!)
• संवाद को विभिन्न "भूमिकाओं" के साथ संरचित करते हैं – इसे नाटक के सेटिंग के रूप में सोचें
• कुछ महत्वपूर्ण पैरामीटर के साथ AI को अनुरोध भेजते हैं
• पुनः प्राप्त डेटा से वास्तविक प्रतिक्रिया पाठ निकालते हैं

संदेश भूमिकाओं को समझना: AI वार्तालाप ढांचा

AI संवाद एक विशेष संरचना का उपयोग करते हैं जिसमें विभिन्न "भूमिकाएं" होती हैं जिनका अलग उद्देश्य होता है:

messages=[
    {
        "role": "system",
        "content": "You are a helpful assistant who explains things simply."
    },
    {
        "role": "user", 
        "content": "What is machine learning?"
    }
]

इसे एक नाटक के निर्देशन की तरह सोचें:

• सिस्टम भूमिका: एक अभिनेता के लिए मंच निर्देश की तरह – यह AI को बताता है कि कैसे व्यवहार करना है, किस तरह की व्यक्ति बननी है, और कैसे प्रतिक्रिया देनी है
• उपयोगकर्ता भूमिका: आपका एप्लिकेशन उपयोगकर्ता द्वारा वास्तविक प्रश्न या संदेश
• सहायक भूमिका: AI की प्रतिक्रिया (आप इसे नहीं भेजते, लेकिन यह संवाद इतिहास में दिखाई देती है)

वास्तविक दुनिया का उदाहरण: मान लीजिए आप पार्टी में अपने मित्र को किसी से परिचय करा रहे हैं:

• सिस्टम संदेश: "यह मेरी मित्र Sarah है, वह एक डॉक्टर है जो चिकित्सा अवधारणाओं को सरल शब्दों में समझाने में माहिर है"
• उपयोगकर्ता संदेश: "क्या आप बता सकते हैं कि टीके कैसे काम करते हैं?"
• सहायक प्रतिक्रिया: Sarah एक मित्रवत डॉक्टर के रूप में जवाब देती है, न कि वकील या शेफ के रूप में

AI पैरामीटर समझना: प्रतिक्रिया व्यवहार को ठीक करना

AI API कॉल में संख्यात्मक पैरामीटर नियंत्रित करते हैं कि मॉडल कैसे प्रतिक्रियाएं जनरेट करता है। ये सेटिंग्स आपको अलग-अलग उपयोग के मामलों के लिए AI के व्यवहार को समायोजित करने देती हैं:

तापमान (0.0 से 2.0): रचनात्मकता नियंत्रक

यह क्या करता है: AI की प्रतिक्रियाओं की रचनात्मकता या भविष्यवाणी क्षमता को नियंत्रित करता है।

इसे जैज़ संगीतकार की स्वतंत्रता स्तर की तरह सोचें:

• तापमान = 0.1: हर बार बिल्कुल एक ही धुन बजाना (बहुत पूर्वानुमेय)
• तापमान = 0.7: स्वादिष्ट परिवर्तन जोड़ना, फिर भी पहचान योग्य (संतुलित रचनात्मकता)
• तापमान = 1.5: पूरी तरह प्रयोगात्मक जैज़, अप्रत्याशित मोड़ के साथ (बहुत असंभावित)

# बहुत ही पूर्वानुमेय उत्तर (तथ्यात्मक प्रश्नों के लिए अच्छा)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "What is 2+2?"}],
    temperature=0.1  # लगभग हमेशा "4" कहेगा
)

# रचनात्मक उत्तर (मस्तिष्क के विखराव के लिए अच्छा)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Write a creative story opening"}],
    temperature=1.2  # अद्वितीय, अप्रत्याशित कहानियाँ बनाएगा
)

अधिकतम टोकन (1 से 4096+): प्रतिक्रिया की लंबाई नियंत्रक

यह क्या करता है: AI की प्रतिक्रिया की अधिकतम लंबाई निर्धारित करता है।

टोकन लगभग शब्दों के बराबर होते हैं (लगभग 1 टोकन = अंग्रेज़ी में 0.75 शब्द):

• max_tokens=50: छोटा और मीठा (एक टेक्स्ट संदेश जैसा)
• max_tokens=500: एक अच्छा पैराग्राफ या दो
• max_tokens=2000: उदाहरणों के साथ विस्तृत स्पष्टीकरण

# संक्षिप्त, सारगर्भित उत्तर
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=100  # संक्षिप्त व्याख्या के लिए बाध्य करता है
)

# विस्तृत, व्यापक उत्तर
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=1500  # उदाहरणों के साथ विस्तृत व्याख्याओं की अनुमति देता है
)

Top_p (0.0 से 1.0): फोकस पैरामीटर

यह क्या करता है: AI को सबसे संभावित प्रतिक्रियाओं पर कितनी फोकस बनाए रखना है इसे नियंत्रित करता है।

कल्पना करें AI के पास एक विशाल शब्दावली है, हर शब्द की संभावना के अनुसार रैंक की गई:

• top_p=0.1: केवल शीर्ष 10% सबसे संभावित शब्दों को ध्यान में रखता है (बहुत केंद्रित)
• top_p=0.9: संभावित शब्दों के 90% पर विचार करता है (अधिक रचनात्मक)
• top_p=1.0: सब कुछ पर विचार करता है (अधिकतम विविधता)

उदाहरण के लिए: यदि आप पूछते हैं "आकाश आमतौर पर..."

• कम top_p: लगभग निश्चित रूप से "नीला" कहेगा
• उच्च top_p: कह सकता है "नीला", "बादल", "विशाल", "परिवर्तित", "सुंदर", आदि

सभी को एक साथ जोड़ना: विभिन्न उपयोग मामलों के लिए पैरामीटर संयोजन

# तथ्यात्मक, सुसंगत उत्तरों के लिए (जैसे एक प्रलेखन बॉट)
factual_params = {
    "temperature": 0.2,
    "max_tokens": 300,
    "top_p": 0.3
}

# रचनात्मक लेखन सहायता के लिए
creative_params = {
    "temperature": 1.1,
    "max_tokens": 1000,
    "top_p": 0.9
}

# वार्तालापपूर्ण, सहायक प्रतिक्रियाओं के लिए (संतुलित)
conversational_params = {
    "temperature": 0.7,
    "max_tokens": 500,
    "top_p": 0.8
}

quadrantChart
    title एआई पैरामीटर ऑप्टिमाइज़ेशन मैट्रिक्स
    x-axis कम रचनात्मकता --> उच्च रचनात्मकता
    y-axis छोटा प्रतिक्रिया --> लंबा प्रतिक्रिया
    
    quadrant-1 रचनात्मक सामग्री
    quadrant-2 विस्तृत विश्लेषण
    quadrant-3 त्वरित तथ्य
    quadrant-4 संवादात्मक एआई
    
    Documentation Bot: [0.2, 0.3]
    Customer Service: [0.4, 0.4]
    General Assistant: [0.7, 0.5]
    Creative Writer: [0.9, 0.9]
    Brainstorming Tool: [0.8, 0.8]

इस बात को समझना क्यों महत्वपूर्ण है: विभिन्न एप्लिकेशन को विभिन्न प्रकार की प्रतिक्रियाओं की आवश्यकता होती है। एक ग्राहक सेवा बॉट को सुसंगत और तथ्यात्मक होना चाहिए (कम तापमान), जबकि रचनात्मक लेखन सहायक कल्पनाशील और विविध होना चाहिए (उच्च तापमान)। इन पैरामीटरों को समझने से आपको अपने AI की पर्सनालिटी और प्रतिक्रिया शैली पर नियंत्रण मिलता है।

**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back

> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.

### Creating a Reusable AI Function

Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:

```python
import asyncio
from openai import AsyncOpenAI

# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
    base_url="https://models.github.ai/inference",
    api_key=os.environ["GITHUB_TOKEN"],
)

async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
    """
    Sends a prompt to the AI model asynchronously and returns the response.
    
    Args:
        prompt: The user's question or message
        system_message: Instructions that define the AI's behavior and personality
    
    Returns:
        str: The AI's response to the prompt
    """
    try:
        response = await client.chat.completions.create(
            messages=[
                {
                    "role": "system",
                    "content": system_message,
                },
                {
                    "role": "user",
                    "content": prompt,
                }
            ],
            model="openai/gpt-4o-mini",
            temperature=1,
            max_tokens=4096,
            top_p=1
        )
        return response.choices[0].message.content
    except Exception as e:
        logger.error(f"AI API error: {str(e)}")
        return "I'm sorry, I'm having trouble processing your request right now."

# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
    """Synchronous wrapper for async AI calls."""
    return asyncio.run(call_llm_async(prompt, system_message))

इस उन्नत फ़ंक्शन को समझना:

• स्वीकार करता है दो पैरामीटर: उपयोगकर्ता का प्रॉम्प्ट और वैकल्पिक सिस्टम संदेश
• प्रदान करता है सामान्य सहायक व्यवहार के लिए डिफ़ॉल्ट सिस्टम संदेश
• सही Python टाइप हिंट्स का उपयोग करता है बेहतर कोड दस्तावेज़ीकरण के लिए
• विस्तृत डॉक्स्ट्रिंग शामिल है जो फ़ंक्शन के उद्देश्य और पैरामीटर समझाती है
• केवल प्रतिक्रिया सामग्री लौटाता है, जिससे हमारे वेब API में उपयोग आसान होता है
• मॉडल पैरामीटर समान रखता है ताकि AI व्यवहार निरंतर रहे

सिस्टम प्रॉम्प्ट्स का जादू: AI पर्सनालिटी प्रोग्रामिंग

यदि पैरामीटर कंट्रोल करते हैं कि AI कैसे सोचे, तो सिस्टम प्रॉम्प्ट्स कंट्रोल करते हैं कि AI अपने आप को कौन समझे। सच में, AI के साथ काम करने का यह सबसे आकर्षक हिस्सा है – आप AI को पूरी पर्सनालिटी, विशेषज्ञता स्तर, और संचार शैली प्रदान कर रहे हैं।

सिस्टम प्रॉम्प्ट्स को अलग-अलग भूमिकाओं के लिए विभिन्न अभिनेताओं को कास्ट करने जैसा सोचें: एक साधारण सहायक के बजाय, आप विभिन्न परिस्थितियों के लिए विशेषज्ञ बना सकते हैं। क्या एक धैर्यवान शिक्षक चाहिए? एक रचनात्मक विचार-मंथन साथी? एक सख्त व्यवसाय सलाहकार? बस सिस्टम प्रॉम्प्ट बदल दें!

सिस्टम प्रॉम्प्ट्स क्यों इतने शक्तिशाली हैं

यह रोमांचक है: AI मॉडल अनगिनत वार्तालापों पर प्रशिक्षित होते हैं जहाँ लोग विभिन्न भूमिकाएं और विशेषज्ञता स्तर अपनाते हैं। जब आप AI को एक विशिष्ट भूमिका देते हैं, तो यह एक स्विच की तरह होता है जो उन सभी सीखे हुए पैटर्न को सक्रिय कर देता है।

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

प्रभावी सिस्टम प्रॉम्प्ट्स बनाना: कला और विज्ञान

एक बढ़िया सिस्टम प्रॉम्प्ट की रचना:

1. भूमिका/पहचान: AI कौन है?
2. विशेषज्ञता: AI क्या जानता है?
3. संचार शैली: AI कैसे बोलता है?
4. विशिष्ट निर्देश: AI किस पर ध्यान केंद्रित करे?

# ❌ अस्पष्ट सिस्टम प्रॉम्प्ट
"You are helpful."

# ✅ विस्तृत, प्रभावी सिस्टम प्रॉम्प्ट
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."

संदर्भ सहित सिस्टम प्रॉम्प्ट उदाहरण

देखते हैं कि कैसे विभिन्न सिस्टम प्रॉम्प्ट पूरी तरह से अलग AI पर्सनालिटी बनाते हैं:

# उदाहरण 1: धैर्यवान शिक्षक
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students. 
You break down complex concepts into simple steps, use analogies from everyday life, 
and always check if the student understands before moving on. You're encouraging 
and never make students feel bad for not knowing something.
"""

# उदाहरण 2: रचनात्मक सहयोगी
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're 
enthusiastic, imaginative, and always build on the user's ideas rather than 
replacing them. You ask thought-provoking questions to spark creativity and 
offer unexpected perspectives that make stories more interesting.
"""

# उदाहरण 3: रणनीतिक व्यवसाय सलाहकार
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience 
helping startups scale. You think in frameworks, provide structured advice, 
and always consider both short-term tactics and long-term strategy. You ask 
probing questions to understand the full business context before giving advice.
"""

सिस्टम प्रॉम्प्ट्स को क्रिया में देखना

आइए एक ही सवाल को विभिन्न सिस्टम प्रॉम्प्ट्स के साथ परखते हैं और नाटकीय अंतर देखते हैं:

सवाल: "मैं अपनी वेब ऐप में उपयोगकर्ता प्रमाणीकरण कैसे संभालूं?"

# शिक्षक प्रॉम्प्ट के साथ:
teacher_response = call_llm(
    "How do I handle user authentication in my web app?",
    teacher_prompt
)
# सामान्य प्रतिक्रिया: "शानदार सवाल! आइए प्रमाणीकरण को सरल चरणों में विभाजित करें।
# इसे ऐसे सोचें जैसे एक नाइटक्लब बॉउंसर आईडी जांच रहा हो..."

# व्यवसाय प्रॉम्प्ट के साथ:
business_response = call_llm(
    "How do I handle user authentication in my web app?", 
    business_prompt
)
# सामान्य प्रतिक्रिया: "रणनीतिक दृष्टिकोण से, प्रमाणीकरण उपयोगकर्ता
# विश्वास और नियामक अनुपालन के लिए महत्वपूर्ण है। मुझे सुरक्षा,
# उपयोगकर्ता अनुभव, और स्केलेबिलिटी को ध्यान में रखते हुए एक रूपरेखा बताने दें..."

उन्नत सिस्टम प्रॉम्प्ट तकनीकें

1. संदर्भ सेटिंग: AI को पृष्ठभूमि जानकारी देना

system_prompt = """
You are helping a junior developer who just started their first job at a startup. 
They know basic HTML/CSS/JavaScript but are new to backend development and databases. 
Be encouraging and explain things step-by-step without being condescending.
"""

2. आउटपुट फॉर्मेटिंग: AI को बताएं कि प्रतिक्रियाओं का स्वरूप कैसे बनाना है

system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation 
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""

3. प्रतिबंध सेट करना: यह परिभाषित करें कि AI को क्या नहीं करना चाहिए

system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete 
solutions for the user - instead, guide them with hints and questions so they 
learn by doing. Always explain the 'why' behind coding decisions.
"""

आपके चैट सहायक के लिए यह क्यों महत्वपूर्ण है

सिस्टम प्रॉम्प्ट को समझना आपको विशेष AI सहायकों को बनाने की अद्भुत शक्ति देता है:

• कस्टमर सर्विस बॉट: सहायक, धैर्यशील, नीति-समझदार
• लर्निंग ट्यूटर: प्रोत्साहक, चरण-दर-चरण, समझ की जांच करता है
• क्रिएटिव पार्टनर: कल्पनाशील, विचारों पर निर्माण करता है, "अगर?" पूछता है
• टेक्निकल एक्सपर्ट: सटीक, विस्तारपूर्ण, सुरक्षा-चेतन

मुख्य अंतर्दृष्टि: आप सिर्फ AI API को कॉल नहीं कर रहे हैं – आप एक कस्टम AI व्यक्तित्व बना रहे हैं जो आपके विशिष्ट उपयोग मामले की सेवा करता है। यही वह चीज है जो आधुनिक AI एप्लिकेशन को सामान्य की तुलना में अधिक अनुकूलित और उपयोगी बनाती है।

🎯 शिक्षण जाँच: AI व्यक्तित्व प्रोग्रामिंग

रोकें और सोचें: आपने अभी सिस्टम प्रॉम्प्ट के माध्यम से AI व्यक्तित्व प्रोग्राम करना सीखा है। यह आधुनिक AI एप्लिकेशन विकास में एक बुनियादी कौशल है।

त्वरित आत्म-मूल्यांकन:

• क्या आप समझा सकते हैं कि सिस्टम प्रॉम्प्ट सामान्य उपयोगकर्ता संदेशों से कैसे भिन्न होते हैं?
• तापमान और top_p पैरामीटर में क्या अंतर है?
• आप कैसे एक विशिष्ट उपयोग मामले (जैसे कोडिंग ट्यूटर) के लिए सिस्टम प्रॉम्प्ट बनाएंगे?

वास्तविक दुनिया का संबंध: आपने जो सिस्टम प्रॉम्प्ट तकनीकें सीखी हैं, वे हर प्रमुख AI एप्लिकेशन में उपयोग की जाती हैं - GitHub Copilot की कोडिंग सहायता से लेकर ChatGPT के संवादात्मक इंटरफ़ेस तक। आप उन्हीं पैटर्नों में माहिर हो रहे हैं जिन्हें प्रमुख तकनीकी कंपनियों की AI उत्पाद टीमें इस्तेमाल करती हैं।

चुनौती प्रश्न: आप विभिन्न उपयोगकर्ता प्रकारों (शुरुआती बनाम विशेषज्ञ) के लिए विभिन्न AI व्यक्तित्व कैसे डिज़ाइन कर सकते हैं? विचार करें कि कैसे एक ही अंतर्निहित AI मॉडल विभिन्न दर्शकों की सेवा कर सकता है प्रॉम्प्ट इंजीनियरिंग के माध्यम से।

FastAPI के साथ वेब API बनाना: आपका उच्च-प्रदर्शन AI संचार केंद्र

अब हम वह बैकएंड बनाएंगे जो आपके फ्रंटएंड को AI सेवाओं से जोड़ता है। हम FastAPI का उपयोग करेंगे, एक आधुनिक पायथन फ्रेमवर्क जो AI एप्लिकेशन के लिए API बनाने में उत्कृष्ट है।

FastAPI इस प्रकार के प्रोजेक्ट के लिए कई लाभ प्रदान करता है: समवर्ती अनुरोधों को संभालने के लिए बिल्ट-इन असिंक समर्थन, स्वचालित API दस्तावेज़ीकरण, और बेहतरीन प्रदर्शन। आपका FastAPI सर्वर एक मध्यस्थ के रूप में काम करता है जो फ्रंटएंड से अनुरोध प्राप्त करता है, AI सेवाओं से संवाद करता है, और स्वरूपित प्रतिक्रियाएं लौटाता है।

AI एप्लिकेशन के लिए FastAPI क्यों?

आप सोच सकते हैं: "क्या मैं सीधे अपने फ्रंटएंड जावास्क्रिप्ट से AI को कॉल नहीं कर सकता?" या "FastAPI क्यों, Flask या Django के बजाय?" बहुत अच्छे सवाल!

यहाँ FastAPI को परफेक्ट बनाने वाले कारण हैं:

• डिफ़ॉल्ट रूप से असिंक: एक साथ कई AI अनुरोध संभाल सकता है बिना फंसे
• स्वचालित दस्तावेज़: /docs पर जाएं और मुफ्त में एक सुंदर, इंटरैक्टिव API डॉक्यूमेंटेशन पेज पाएं
• बिल्ट-इन वैलिडेशन: त्रुटियों को समय से पकड़ता है
• बहुत तेज़: उपलब्ध सबसे तेज़ पायथन फ्रेमवर्क में से एक
• आधुनिक पायथन: नवीनतम और बेहतरीन पायथन फीचर्स का उपयोग करता है

और यह भी कि हमें बैकएंड क्यों चाहिए:

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

रेट लिमिटिंग और नियंत्रण: बैकएंड आपको उपयोगकर्ता अनुरोधों की आवृत्ति नियंत्रित करने, उपयोगकर्ता प्रमाणीकरण लागू करने, और उपयोग की ट्रैकिंग हेतु लॉगिंग जोड़ने देता है।

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

यह आर्किटेक्चर ग्राहक-सर्वर मॉडल जैसा है:

• फ्रंटएंड: इंटरैक्शन के लिए उपयोगकर्ता इंटरफ़ेस परत
• बैकएंड API: अनुरोध प्रसंस्करण और रूटिंग परत
• AI सेवा: बाहरी कंप्यूटेशन और प्रतिक्रिया निर्माण
• पर्यावरण चर: सुरक्षित कॉन्फ़िगरेशन और क्रेडेंशियल संग्रह

अनुरोध-प्रतिक्रिया प्रवाह को समझना

आइए देखें जब कोई उपयोगकर्ता संदेश भेजता है तो क्या होता है:

sequenceDiagram
    participant User as 👤 उपयोगकर्ता
    participant Frontend as 🌐 फ्रंटएंड
    participant API as 🔧 FastAPI सर्वर
    participant AI as 🤖 एआई सेवा
    
    User->>Frontend: टाइप करता है "नमस्ते एआई!"
    Frontend->>API: POST /hello {"message": "नमस्ते एआई!"}
    Note over API: अनुरोध को मान्य करता है<br/>सिस्टम प्रॉम्प्ट जोड़ता है
    API->>AI: स्वरूपित अनुरोध भेजता है
    AI->>API: एआई प्रतिक्रिया लौटाता है
    Note over API: प्रतिक्रिया संसाधित करता है<br/>संवाद को लॉग करता है
    API->>Frontend: {"response": "नमस्ते! मैं आपकी कैसे मदद कर सकता हूँ?"}
    Frontend->>User: एआई संदेश प्रदर्शित करता है

प्रत्येक चरण को समझना:

1. उपयोगकर्ता इंटरैक्शन: व्यक्ति चैट इंटरफ़ेस में टाइप करता है
2. फ्रंटएंड प्रसंस्करण: जावास्क्रिप्ट इनपुट पकड़ता है और इसे JSON के रूप में स्वरूपित करता है
3. एपीआई वैधता: FastAPI स्वचालित रूप से Pydantic मॉडल का उपयोग करके अनुरोध मान्य करता है
4. AI एकीकरण: बैकएंड संदर्भ (सिस्टम प्रॉम्प्ट) जोड़ता है और AI सेवा को कॉल करता है
5. प्रतिक्रिया हैंडलिंग: API AI प्रतिक्रिया प्राप्त करता है और आवश्यकतानुसार इसे संशोधित कर सकता है
6. फ्रंटएंड प्रदर्शन: जावास्क्रिप्ट प्रतिक्रिया को चैट इंटरफ़ेस में दिखाता है

API आर्किटेक्चर को समझना

sequenceDiagram
    participant Frontend
    participant FastAPI
    participant AI Function
    participant GitHub Models
    
    Frontend->>FastAPI: POST /hello {"message": "नमस्ते एआई!"}
    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": "नमस्ते! मैं आपकी कैसे मदद कर सकता हूँ?"}

flowchart TD
    A[उपयोगकर्ता इनपुट] --> B[फ्रंटेंड सत्यापन]
    B --> C[HTTP POST अनुरोध]
    C --> D[फास्टएपी राउटर]
    D --> E[पायडेंटिक सत्यापन]
    E --> F[एआई फ़ंक्शन कॉल]
    F --> G[GitHub मॉडल्स API]
    G --> H[प्रतिक्रिया प्रसंस्करण]
    H --> I[JSON प्रतिक्रिया]
    I --> J[फ्रंटेंड अपडेट]
    
    subgraph "सुरक्षा परत"
        K[CORS मिडलवेयर]
        L[पर्यावरण चर]
        M[त्रुटि हैंडलिंग]
    end
    
    D --> K
    F --> L
    H --> M

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

# लॉगिंग कॉन्फ़िगर करें
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# FastAPI एप्लिकेशन बनाएं
app = FastAPI(
    title="AI Chat API",
    description="A high-performance API for AI-powered chat applications",
    version="1.0.0"
)

# CORS कॉन्फ़िगर करें
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # उत्पादन के लिए उचित रूप से कॉन्फ़िगर करें
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# अनुरोध/प्रतिक्रिया सत्यापन के लिए Pydantic मॉडल
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:
        # संदेश निकालें और सत्यापित करें
        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]}...")
        
        # AI सेवा को कॉल करें (टिप्पणी: बेहतर प्रदर्शन के लिए call_llm को async बनाना चाहिए)
        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 मॉडल स्वचालित अनुरोध/प्रतिक्रिया मान्यकरण और दस्तावेज़ीकरण के लिए
• उपयोग करता है बेहतर प्रदर्शन के लिए असिंक एंडपॉइंट्स, जो एक साथ अनुरोध संभाल सकें
• लागू करता है प्रासंगिक HTTP स्थिति कोड और त्रुटि हैंडलिंग HTTPException के साथ
• शामिल करता है निगरानी और डिबगिंग के लिए संरचित लॉगिंग
• प्रदान करता है सेवा की स्थिति के लिए हेल्थ चेक एंडपॉइंट

पारंपरिक फ्रेमवर्कों की तुलना में FastAPI के प्रमुख लाभ:

• स्वचालित मान्यकरण: Pydantic मॉडल डेटा अखंडता सुनिश्चित करते हैं
• इंटरैक्टिव डॉक्यूमेंटेशन: /docs पर स्वचालित उत्पन्न, परीक्षण योग्य API डॉक्यूमेंटेशन
• टाइप सुरक्षा: पायथन टाइप हिंट रनटाइम त्रुटियों को रोकते हैं और कोड गुणवत्ता सुधारते हैं
• असिंक समर्थन: कई AI अनुरोधों को समानांतर बिना ब्लॉकिंग के संभालना
• प्रदर्शन: रियल-टाइम एप्लिकेशन के लिए तेजी से अनुरोध प्रक्रिया

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

CORS (Cross-Origin Resource Sharing) एक सुरक्षा गार्ड की तरह है जो जाँच करता है कि विज़िटर को अंदर आने की अनुमति है या नहीं। आइए इस बात को समझें कि यह क्यों जरूरी है और आपके अनुप्रयोग को कैसे प्रभावित करता है।

CORS क्या है और यह क्यों मौजूद है?

समस्या: सोचिए अगर कोई भी वेबसाइट आपकी अनुमति के बिना आपकी बैंक वेबसाइट को आपके behalf पर अनुरोध भेज सके। यह सुरक्षा के लिए भयंकर संकट होगा! ब्राउज़र डिफ़ॉल्ट रूप से इसे "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)   # यह ब्राउज़रों को बताता है: "अन्य मूलों के लिए इस API पर अनुरोध करना ठीक है"

CORS कॉन्फ़िगरेशन का व्यवहार में क्या करता है:

• विशेष HTTP हेडर जोड़ता है जो ब्राउज़र को बताता है "यह क्रॉस-ओरिजिन अनुरोध अनुमत है"
• "प्रीफ्लाइट" अनुरोधों को संभालता है (ब्राउज़र कभी-कभी अनुमति जांचते हैं पहले असली अनुरोध भेजने से)
• आपके ब्राउज़र कंसोल में 'blocked by CORS policy' त्रुटि को रोकता है

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

# 🚨 विकास: सभी मूलों को अनुमति देता है (सुविधाजनक लेकिन असुरक्षित)
CORS(app)

# ✅ उत्पादन: केवल आपके विशिष्ट फ्रंटेंड डोमेन को अनुमति दें
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])

# 🔒 उन्नत: विभिन्न परिवेशों के लिए विभिन्न मूल
if app.debug:  # विकास मोड
    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else:  # उत्पादन मोड
    CORS(app, origins=["https://yourdomain.com"])

यह क्यों महत्वपूर्ण है: विकास में CORS(app) ऐसे है जैसे आप अपनी मुख्य दरवाज़ा बिना लॉक के छोड़ दें – सुविधा जनक लेकिन सुरक्षित नहीं। उत्पादन में, आपको ठीक-ठीक निर्दिष्ट करना होगा कि कौन-कौन सी वेबसाइटें आपके API से बात कर सकती हैं।

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

परिदृश्य	समस्या	समाधान
स्थानीय विकास	फ्रंटएंड बैकएंड तक नहीं पहुँचा पा रहा	FastAPI में CORSMiddleware जोड़ें
GitHub Pages + Heroku	तैनात फ्रंटएंड API तक नहीं पहुँच पाता	अपने GitHub Pages URL को CORS ओरिजिन में जोड़ें
कस्टम डोमेन	उत्पादन में CORS त्रुटियाँ	CORS ओरिजिन को अपने डोमेन से मेल खाने के लिए अपडेट करें
मोबाइल ऐप	ऐप वेब API तक नहीं पहुँच पाता	अपने ऐप का डोमेन जोड़ें या * सावधानी से उपयोग करें

टिप: आप अपने ब्राउज़र के डेवलपर टूल्स में नेटवर्क टैब के अंतर्गत CORS हेडर जैसे Access-Control-Allow-Origin देख सकते हैं।

त्रुटि हैंडलिंग और मान्यकरण

ध्यान दें कि हमारी API में उचित त्रुटि हैंडलिंग शामिल है:

# सत्यापित करें कि हमें एक संदेश प्राप्त हुआ है
if not message:
    return jsonify({"error": "Message field is required"}), 400

प्रमुख मान्यकरण सिद्धांत:

• प्रक्रिया से पहले आवश्यक फ़ील्ड्स जांचना
• अर्थपूर्ण त्रुटि संदेश JSON में लौटाना
• उचित HTTP स्थिति कोड का उपयोग (400 खराब अनुरोध के लिए)
• स्पष्ट प्रतिक्रिया देना जिससे फ्रंटएंड डेवलपर्स डिबगिंग कर सकें

अपना बैकएंड सेटअप और चलाना

अब जब हमारी AI एकीकरण और FastAPI सर्वर तैयार है, तो चलिए सब कुछ चलाते हैं। सेटअप प्रक्रिया में पायथन निर्भरताओं को इंस्टॉल करना, पर्यावरण चर कॉन्फ़िगर करना, और विकास सर्वर शुरू करना शामिल है।

पायथन पर्यावरण सेटअप

आइए अपना पायथन विकास पर्यावरण सेट करें। वर्चुअल एनवायरनमेंट्स मानो मैनहट्टन प्रोजेक्ट की विभाजित पद्धति जैसे हैं – प्रत्येक प्रोजेक्ट को अपनी आइसोलेटेड जगह मिलती है जिसमें विशेष उपकरण और निर्भरता होती हैं, जो विभिन्न प्रोजेक्ट्स में संघर्ष से बचाती हैं।

# अपने बैकएंड डायरेक्टरी पर जाएं
cd backend

# एक वर्चुअल एन्वायरमेंट बनाएं (जैसे कि अपने प्रोजेक्ट के लिए एक साफ़ कमरा बनाना)
python -m venv venv

# इसे सक्रिय करें (Linux/Mac)
source ./venv/bin/activate

# Windows पर, उपयोग करें:
# venv\Scripts\activate

# आवश्यक चीजें इंस्टॉल करें
pip install openai fastapi uvicorn python-dotenv

हमने अभी जो किया:

• अपना छोटा पायथन बबल बनाया जहाँ हम पैकेज इन्स्टॉल कर सकते हैं बिना कुछ प्रभावित किए
• इसे सक्रिय किया ताकि हमारा टर्मिनल समझ सके कि इस विशिष्ट पर्यावरण का उपयोग करना है
• जरूरी पैकेज इंस्टॉल किए: OpenAI, FastAPI, Uvicorn, python-dotenv

मुख्य निर्भरताएँ समझें:

• FastAPI: आधुनिक, तेज़ वेब फ्रेमवर्क और स्वचालित API डॉक्यूमेंटेशन
• Uvicorn: बहुत तेज़ ASGI सर्वर जो FastAPI एप्लिकेशन चलाता है
• OpenAI: GitHub मॉडल और OpenAI API के लिए आधिकारिक लाइब्रेरी
• python-dotenv: .env फाइल से सुरक्षित वातावरण चर लोड करना

पर्यावरण कॉन्फ़िगरेशन: रहस्यों को सुरक्षित रखना

API शुरू करने से पहले हमें वेब विकास में सबसे महत्वपूर्ण पाठों में से एक पर बात करनी है: अपने रहस्यों को वास्तव में सुरक्षित कैसे रखें। पर्यावरण चर एक सुरक्षित तिजोरी की तरह हैं जिसे केवल आपकी एप्लिकेशन ही एक्सेस कर सकती है।

पर्यावरण चर क्या हैं?

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

यहाँ फर्क है:

• गलत तरीका: अपना पासवर्ड चिपचिपे नोट पर लिखना और मॉनिटर पर चिपकाना
• सही तरीका: पासवर्ड को एक सुरक्षित पासवर्ड मैनेजर में रखना जिसमें केवल आपको पहुंच हो

पर्यावरण चर क्यों महत्वपूर्ण हैं

# 🚨 कभी भी ऐसा न करें - API कुंजी सभी के लिए दिखाई दे रही है
client = OpenAI(
    api_key="ghp_1234567890abcdef...",  # कोई भी इसे चुरा सकता है!
    base_url="https://models.github.ai/inference"
)

# ✅ ऐसा करें - API कुंजी सुरक्षित रूप से संग्रहीत है
client = OpenAI(
    api_key=os.environ["GITHUB_TOKEN"],  # केवल आपका ऐप इसे एक्सेस कर सकता है
    base_url="https://models.github.ai/inference"
)

जब आप रहस्यों को हार्डकोड करते हैं तो क्या होता है:

1. संस्करण नियंत्रण में खुलासा: आपके Git रिपॉजिटरी तक पहुंच रखने वाला कोई भी आपकी API कुंजी देख सकता है
2. सार्वजनिक रिपॉजिटरी: GitHub पर पुश करने पर आपकी कुंजी पूरी इंटरनेट पर दिख जाती है
3. टीम साझा करना: अन्य डेवलपर्स को आपका व्यक्तिगत API कुंजी मिल जाता है
4. सुरक्षा उल्लंघन: अगर कोई आपकी API कुंजी चोरी कर ले तो वह आपके AI क्रेडिट्स का उपयोग कर सकता है

अपनी पर्यावरण फ़ाइल सेटअप करना

अपने बैकएंड डायरेक्टरी में .env नाम की फाइल बनाएं। यह फाइल आपके रहस्यों को स्थानीय स्तर पर संग्रहीत करती है:

# .env फ़ाइल - इसे कभी भी Git में कमिट नहीं किया जाना चाहिए
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development

.env फ़ाइल को समझना:

• KEY=value प्रारूप में एक रहस्य प्रति लाइन
• बराबरी के चिन्ह के दोनों ओर कोई स्पेस नहीं
• मानों के चारों ओर कोई कोट्स नहीं (आमतौर पर)
• टिप्पणियाँ # से शुरू होती हैं

अपना GitHub व्यक्तिगत एक्सेस टोकन बनाना

आपका GitHub टोकन एक विशेष पासवर्ड की तरह है जो आपकी एप्लिकेशन को GitHub की AI सेवाओं का उपयोग करने की अनुमति देता है:

स्टेप-दर-स्टेप टोकन निर्माण:

1. GitHub सेटिंग्स पर जाएं → डेवलपर सेटिंग्स → व्यक्तिगत एक्सेस टोकन → टोकन (क्लासिक)
2. "Generate new token (classic)" क्लिक करें
3. समाप्ति सेट करें (परीक्षण के लिए 30 दिन, उत्पादन के लिए लंबा)
4. स्कोप का चयन करें: "repo" और आवश्यक अन्य अनुमतियाँ देखें
5. टोकन जेनरेट करें और तुरंत कॉपी करें (इसे बाद में नहीं देख पाएंगे!)
6. अपने .env फाइल में पेस्ट करें

# आपका टोकन कैसा दिखता है इसका उदाहरण (यह नकली है!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R

पायथन में पर्यावरण चर लोड करना

import os
from dotenv import load_dotenv

# .env फ़ाइल से पर्यावरण चर लोड करें
load_dotenv()

# अब आप उन्हें सुरक्षित रूप से एक्सेस कर सकते हैं
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 फाइल को लोड करता है और चर पायथन में उपलब्ध कराता है
• जांचता है कि आवश्यक टोकन मौजूद है या नहीं (अच्छा त्रुटि हैंडलिंग!)
• टोकन गायब होने पर एक स्पष्ट त्रुटि उठाता है
• कोड में टोकन उजागर किए बिना सुरक्षित रूप से उपयोग करता है

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

आपकी .gitignore फ़ाइल Git को बताती है कि कौन सी फाइलें कभी ट्रैक या अपलोड नहीं करनी हैं:

# .gitignore - ये पंक्तियाँ जोड़ें
.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 सर्वर स्टार्टअप प्रक्रिया को समझना

# विधि 1: सीधे Python निष्पादन (स्वचालित पुनः लोड शामिल है)
python api.py

# विधि 2: सीधे Uvicorn का उपयोग करना (अधिक नियंत्रण)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload

जब आप यह कमांड चलाते हैं, तो पीछे क्या होता है:

1. Python आपके FastAPI एप्लिकेशन को लोड करता है:

• सभी आवश्यक लाइब्रेरीज़ (FastAPI, Pydantic, OpenAI, आदि) को इम्पोर्ट करता है
• आपकी .env फ़ाइल से वातावरण चर लोड करता है
• स्वचालित दस्तावेज़ीकरण के साथ FastAPI एप्लिकेशन इंस्टेंस बनाता है

2. Uvicorn ASGI सर्वर को कॉन्फ़िगर करता है:

• पोर्ट 5000 से बाइंड करता है जिसमें async अनुरोध हैंडलिंग क्षमताएं हैं
• स्वचालित मान्यता के साथ अनुरोध रूटिंग सेट करता है
• विकास के लिए हॉट रीलोड सक्षम करता है (फ़ाइल परिवर्तनों पर पुनःआरंभ)
• इंटरैक्टिव API दस्तावेज़ उत्पन्न करता है

3. सर्वर सुनना शुरू करता है:

• आपका टर्मिनल दिखाता है: INFO: Uvicorn running on http://0.0.0.0:5000
• सर्वर एकाधिक समानांतर AI अनुरोधों को संभाल सकता है
• आपकी API स्वचालित दस्तावेज़ के साथ तैयार है http://localhost:5000/docs पर

जब सब कुछ काम करता है तो आपको क्या देखना चाहिए

$ python api.py
INFO:     Will watch for changes in these directories: ['/your/project/path']
INFO:     Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO:     Started reloader process [12345] using WatchFiles
INFO:     Started server process [12346]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

FastAPI आउटपुट को समझना:

• Will watch for changes: विकास के लिए ऑटो-रीलोड सक्षम
• Uvicorn running: उच्च प्रदर्शन ASGI सर्वर सक्रिय है
• Started reloader process: स्वचालित पुनःआरंभ के लिए फ़ाइल वॉचर शुरू हुआ
• Application startup complete: FastAPI एप्लिकेशन सफलतापूर्वक प्रारंभ हुआ
• Interactive docs available: स्वचालित API डॉक्यूमेंटेशन के लिए /docs पर जाएं

अपने FastAPI का परीक्षण: कई शक्तिशाली तरीके

FastAPI आपकी API का परीक्षण करने के लिए कई सुविधाजनक तरीके प्रदान करता है, जिनमें स्वचालित इंटरैक्टिव डॉक्यूमेंटेशन शामिल है:

तरीका 1: इंटरैक्टिव API डॉक्यूमेंटेशन (अनुशंसित)

1. अपने ब्राउज़र में http://localhost:5000/docs खोलें
2. आपको सभी एंडपॉइंट के साथ Swagger UI दिखाई देगा
3. /hello पर क्लिक करें → "Try it out" → एक टेस्ट संदेश दर्ज करें → "Execute"
4. ब्राउज़र में उचित प्रारूपण के साथ सीधे प्रतिक्रिया देखें

तरीका 2: मूल ब्राउज़र टेस्ट

1. रूट एंडपॉइंट के लिए http://localhost:5000 पर जाएं
2. सर्वर स्वास्थ्य जांचने के लिए http://localhost:5000/health पर जाएं
3. यह पुष्टि करता है कि आपका FastAPI सर्वर सही ढंग से चल रहा है

तरीका 2: कमांड लाइन टेस्ट (उन्नत)

# कर्ल के साथ परीक्षण करें (अगर उपलब्ध हो)
curl -X POST http://localhost:5000/hello \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello AI!"}'

# अपेक्षित प्रतिक्रिया:
# {"response": "नमस्ते! मैं आपका एआई सहायक हूँ। मैं आपकी आज कैसे मदद कर सकता हूँ?"}

तरीका 3: Python टेस्ट स्क्रिप्ट

# test_api.py - इस फ़ाइल को अपनी API का परीक्षण करने के लिए बनाएं
import requests
import json

# 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 फ़ाइलों में बदलाव सहेजते हैं। इसका मतलब है कि आप अपने कोड को संशोधित कर सकते हैं और तुरंत परीक्षण कर सकते हैं बिना मैन्युअल रूप से पुनः प्रारंभ किए।

# हॉट रीलोडिंग को स्पष्ट रूप से सक्षम करें
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True हॉट रीलोड सक्षम करता है

विकास के लिए लॉगिंग: समझने के लिए लॉगिंग जोड़ें कि क्या हो रहा है:

import 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. अपनी फ्रंटेंड कॉन्फ़िगरेशन अपडेट करें:

// अपने फ्रंटएंड app.js में, BASE_URL अपडेट करें:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

Codespace URLs को समझना

Codespace URLs एक अनुमानित पैटर्न का पालन करते हैं:

https://[codespace-name]-[port].app.github.dev

इसे समझना:

• codespace-name: आपके Codespace की एक अद्वितीय पहचान (आमतौर पर आपके उपयोगकर्ता नाम सहित)
• port: आपका सेवा जिस पोर्ट पर चल रही है (हमारे FastAPI ऐप के लिए 5000)
• app.github.dev: GitHub का डोमेन Codespace एप्लिकेशन के लिए

अपने Codespace सेटअप का परीक्षण

1. सीधे बैकएंड का परीक्षण करें: नई ब्राउज़र टैब में अपनी सार्वजनिक URL खोलें। आपको यह दिखना चाहिए:

Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.

2. ब्राउज़र डिवेलपर टूल के साथ परीक्षण करें:

// ब्राउज़र कंसोल खोलें और अपने 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, dependencies स्थापित करें)	त्वरित (पूर्व-कॉन्फ़िगरित पर्यावरण)
URL एक्सेस	http://localhost:5000	https://xyz-5000.app.github.dev
पोर्ट कॉन्फ़िगरेशन	स्वचालित	मैन्युअल (पोर्ट सार्वजनिक बनाएं)
फ़ाइल स्थिरता	स्थानीय मशीन	GitHub रिपॉजिटरी
सहयोग	पर्यावरण साझा करना कठिन	Codespace लिंक साझा करना आसान
इंटरनेट निर्भरता	केवल AI API कॉल के लिए	सबके लिए आवश्यक

Codespace विकास सुझाव

Codespaces में पर्यावरण चर: आपकी .env फ़ाइल Codespaces में समान रूप से काम करती है, लेकिन आप सीधे Codespace में वातावरण चर भी सेट कर सकते हैं:

# वर्तमान सत्र के लिए पर्यावरण चर सेट करें
export GITHUB_TOKEN="your_token_here"

# या स्थिरता के लिए इसे अपनी .bashrc में जोड़ें
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc

पोर्ट प्रबंधन:

• Codespaces स्वचालित रूप से पहचानता है जब आपका एप्लिकेशन किसी पोर्ट पर सुनना शुरू करता है
• आप एक साथ कई पोर्ट फॉरवर्ड कर सकते हैं (यदि आप बाद में डेटाबेस जोड़ते हैं तो उपयोगी)
• जब तक आपका Codespace चल रहा है, पोर्ट सुलभ रहते हैं

विकास वर्कफ़्लो:

1. VS Code में कोड बदलाव करें
2. FastAPI ऑटो-रीलोड करता है (Uvicorn के रीलोड मोड के कारण)
3. सार्वजनिक URL के माध्यम से तुरंत परिवर्तन का परीक्षण करें
4. तैयार होने पर कमिट और पुश करें

💡 प्रो टिप: विकास के दौरान अपने Codespace बैकएंड URL को बुकमार्क करें। क्योंकि Codespace नाम स्थिर होते हैं, URL तब तक नहीं बदलेगा जब तक आप वही Codespace उपयोग कर रहे हैं।

फ्रंटेंड चैट इंटरफ़ेस बनाना: जहां मनुष्य AI से मिलते हैं

अब हम उपयोगकर्ता इंटरफ़ेस बनाएंगे – वह हिस्सा जो तय करता है कि लोग आपके AI सहायक के साथ कैसे बातचीत करते हैं। जैसे मूल iPhone के इंटरफ़ेस का डिज़ाइन, हम जटिल तकनीक को सहज और प्राकृतिक उपयोग का अनुभव बनाने पर ध्यान केंद्रित कर रहे हैं।

आधुनिक फ्रंटेंड वास्तुकला को समझना

हमारा चैट इंटरफ़ेस वह होगा जिसे हम "सिंगल पेज एप्लिकेशन" या SPA कहते हैं। पुरानी शैली के विपरीत जहां हर क्लिक एक नया पृष्ठ लाता है, हमारा ऐप चिकनी और त्वरित है:

पुरानी वेबसाइटें: जैसे कोई भौतिक पुस्तक पढ़ना – आप पूरी तरह से नए पृष्ठ पलटते हैं
हमारा चैट ऐप: जैसे आप अपना फोन इस्तेमाल कर रहे हों – सब कुछ सुचारू रूप से चलता और अपडेट होता है

graph TD
    A[उपयोगकर्ता संदेश टाइप करता है] --> B[जावास्क्रिप्ट इनपुट को कैप्चर करता है]
    B --> C[डेटा सत्यापित करें और स्वरूपित करें]
    C --> D[बैकएंड API को भेजें]
    D --> E[लोडिंग स्थिति दिखाएँ]
    E --> F[AI प्रतिक्रिया प्राप्त करें]
    F --> G[चैट इंटरफेस अपडेट करें]
    G --> H[अगले संदेश के लिए तैयार]

classDiagram
    class ChatApp {
        +messages: HTMLElement
        +form: HTMLElement
        +input: HTMLElement
        +sendButton: HTMLElement
        +BASE_URL: string
        +API_ENDPOINT: string
        
        +constructor()
        +initializeEventListeners()
        +handleSubmit(event)
        +callAPI(message)
        +appendMessage(text, role)
        +escapeHtml(text)
        +scrollToBottom()
        +setLoading(isLoading)
    }
    
    ChatApp --> DOM : नियंत्रित करता है
    ChatApp --> FastAPI : अनुरोध भेजता है

फ्रंटेंड विकास के तीन स्तंभ

हर फ्रंटेंड एप्लिकेशन – साधारण वेबसाइट से लेकर Discord या Slack जैसे जटिल ऐप तक – तीन मूलभूत तकनीकों पर आधारित है। इन्हें आप वेब पर जो कुछ भी देखते और उपयोग करते हैं उसकी नींव समझ सकते हैं:

HTML (संरचना): यही आपकी नींव है

• तय करता है कि कौन से एलिमेंट मौजूद हैं (बटन, टेक्स्ट एरिया, कंटेनर)
• सामग्री को अर्थ देता है (यह हेडर है, यह फॉर्म है, आदि)
• वह मूल संरचना बनाता है जिस पर सब कुछ बना होता है

CSS (प्रस्तुति): यह आपका इंटीरियर डिज़ाइनर है

• सब कुछ सुंदर बनाता है (रंग, फॉन्ट, लेआउट)
• विभिन्न स्क्रीन आकारों को संभालता है (फोन, लैपटॉप, टैबलेट)
• स्मूथ एनिमेशन और विज़ुअल फ़ीडबैक बनाता है

JavaScript (व्यवहार): यह आपका मस्तिष्क है

• उपयोगकर्ता क्रियाओं (क्लिक, टाइपिंग, स्क्रॉलिंग) पर प्रतिक्रिया करता है
• आपके बैकएंड से बात करता है और पेज को अपडेट करता है
• सब कुछ इंटरैक्टिव और गतिशील बनाता है

इसे वास्तुशिल्प डिज़ाइन की तरह सोचें:

• HTML: संरचनात्मक ब्लूप्रिंट (स्थान और संबंधों को परिभाषित करना)
• CSS: सौंदर्यशास्त्र और पर्यावरणीय डिज़ाइन (दृश्य शैली और उपयोगकर्ता अनुभव)
• JavaScript: यांत्रिक प्रणालियाँ (कार्यात्मकता और इंटरैक्टिविटी)

आधुनिक JavaScript वास्तुकला क्यों महत्वपूर्ण है

हमारा चैट एप्लिकेशन आधुनिक JavaScript पैटर्न का उपयोग करेगा जिसे आप व्यावसायिक अनुप्रयोगों में देखेंगे। इन अवधारणाओं को समझना आपको बेहतर डेवलपर बनने में मदद करेगा:

क्लास-आधारित वास्तुकला: हम अपने कोड को क्लास में व्यवस्थित करेंगे, जो वस्तुओं के लिए ब्लूप्रिंट बनाने जैसा है
Async/Await: उन ऑपरेशनों को संभालने का आधुनिक तरीका जो समय लेते हैं (जैसे API कॉल)
इवेंट-ड्रिवन प्रोग्रामिंग: हमारा ऐप उपयोगकर्ता क्रियाओं (क्लिक, कुंजी दबाने) पर प्रतिक्रिया करता है, बजाय कि लूप में लगातार चलने के
DOM मैनीपुलेशन: उपयोगकर्ता सहभागिता और API प्रतिक्रियाओं के आधार पर वेबपेज कंटेंट का गतिशील अपडेट

प्रोजेक्ट संरचना सेटअप

इस तरह से एक frontend डायरेक्टरी बनाएं जिसमें निम्न संरचना हो:

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 attributes: CSS के लिए स्टाइलिंग हुक प्रदान करते हैं (जैसे chat-container, input-group)
• id attributes: JavaScript को विशिष्ट एलिमेंट्स को खोजने और संशोधित करने की अनुमति देते हैं
• स्क्रिप्ट प्लेसमेंट: JavaScript फाइल अंत में लोड होती है ताकि HTML पहले लोड हो

यह संरचना क्यों काम करती है:

• तर्कसंगत प्रवाह: हेडर → मुख्य सामग्री → इनपुट फॉर्म प्राकृतिक पढ़ने के क्रम से मेल खाता है
• कीबोर्ड सुलभता: उपयोगकर्ता सभी इंटरैक्टिव एलिमेंट्स में टैब कर सकते हैं
• स्क्रीन रीडर फ्रेंडली: स्पष्ट चिह्न और दृष्टिहीन उपयोगकर्ताओं के लिए विवरण
• मोबाइल उत्तरदायी: व्यूपोर्ट मेटा टैग उत्तरदायी डिज़ाइन सक्षम करता है
• प्रगतिशील संवर्धन: तब भी काम करता है यदि CSS या JavaScript लोड न हो

इंटरैक्टिव JavaScript जोड़ना: आधुनिक वेब एप्लिकेशन लॉजिक

अब हम वह JavaScript बनाएंगे जो हमारी चैट इंटरफ़ेस को जीवन में लाएगी। हम आधुनिक JavaScript पैटर्न का उपयोग करेंगे जिन्हें आप पेशेवर वेब विकास में पाएंगे, जैसे ES6 क्लासेस, async/await, और इवेंट-चालित प्रोग्रामिंग।

आधुनिक JavaScript आर्किटेक्चर को समझना

परक्राम्य कोड लिखने के बजाय (ऐसे कई फ़ंक्शन जो क्रम में चलते हैं), हम एक क्लास-आधारित आर्किटेक्चर बनाएंगे। एक क्लास को उस ब्लूप्रिंट के रूप में सोचें जो वस्तुएं बनाने के लिए उपयोग किया जाता है – जैसे कि एक वास्तुकार की योजना का उपयोग कई घर बनाने के लिए किया जा सकता है।

वेब एप्लिकेशन के लिए क्लासेस क्यों?

• संगठन: सभी संबंधित कार्यक्षमता को एक साथ समूहित किया जाता है
• पुनः उपयोगिता: आप एक ही पेज पर कई चैट उदाहरण बना सकते हैं
• रखरखाव में आसानी: विशिष्ट फीचर्स को डिबग और संशोधित करना आसान
• पेशेवर मानक: यह पैटर्न React, Vue और Angular जैसे फ्रेमवर्क में इस्तेमाल होता है

यह आधुनिक, सुव्यवस्थित JavaScript के साथ app.js बनाएँ:

// app.js - आधुनिक चैट एप्लिकेशन लॉजिक

class ChatApp {
    constructor() {
        // उन DOM एलिमेंट्स के रेफरेंस लें जिन्हें हमें मैनिपुलेट करना होगा
        this.messages = document.getElementById("messages");
        this.form = document.getElementById("chatForm");
        this.input = document.getElementById("messageInput");
        this.sendButton = document.getElementById("sendBtn");
        
        // अपना बैकएंड URL यहाँ कॉन्फ़िगर करें
        this.BASE_URL = "http://localhost:5000"; // इसे अपने पर्यावरण के लिए अपडेट करें
        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
        
        // जब चैट ऐप तैयार हो तो इवेंट लिसनर्स सेट करें
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        // फॉर्म सबमिशन सुनें (जब उपयोगकर्ता Send क्लिक करे या Enter दबाए)
        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
        
        // इनपुट फील्ड में Enter कुंजी के लिए भी सुनें (बेहतर UX)
        this.input.addEventListener("keypress", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                this.handleSubmit(e);
            }
        });
    }
    
    async handleSubmit(event) {
        event.preventDefault(); // फॉर्म को पेज रिफ्रेश करने से रोकें
        
        const messageText = this.input.value.trim();
        if (!messageText) return; // खाली संदेश न भेजें
        
        // उपयोगकर्ता को फीडबैक दें कि कुछ हो रहा है
        this.setLoading(true);
        
        // उपयोगकर्ता संदेश को तुरंत चैट में जोड़ें (आशावादी UI)
        this.appendMessage(messageText, "user");
        
        // इनपुट फील्ड साफ़ करें ताकि उपयोगकर्ता अगला संदेश टाइप कर सके
        this.input.value = '';
        
        try {
            // AI API को कॉल करें और प्रतिक्रिया का इंतजार करें
            const reply = await this.callAPI(messageText);
            
            // AI प्रतिक्रिया को चैट में जोड़ें
            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 {
            // सफलता या विफलता की परवाह किए बिना इंटरफ़ेस को पुनः सक्षम करें
            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";
    }
}

// पेज लोड होने पर चैट एप्लिकेशन को इनिशियलाइज़ करें
document.addEventListener("DOMContentLoaded", () => {
    new ChatApp();
});

प्रत्येक JavaScript कॉन्सेप्ट को समझना

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

class ChatApp {
    constructor() {
        // यह तब चलता है जब आप एक नया ChatApp उदाहरण बनाते हैं
        // यह आपके चैट के लिए "सेटअप" फ़ंक्शन की तरह है
    }
    
    methodName() {
        // मेथड्स वे फ़ंक्शन होते हैं जो क्लास से संबंधित होते हैं
        // वे "this" का उपयोग करके क्लास गुणों तक पहुँच सकते हैं
    }
}

Async/Await पैटर्न:

// पुराना तरीका (कॉलबैक हेल):
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// आधुनिक तरीका (ऐसिंक/अवेट):
try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error(error);
}

इवेंट-चालित प्रोग्रामिंग: लगातार यह जांचने के बजाय कि कुछ हुआ है या नहीं, हम "इवेंट्स" सुनते हैं:

// जब फॉर्म सबमिट किया जाता है, तब handleSubmit चलाएँ
this.form.addEventListener("submit", (e) => this.handleSubmit(e));

// जब Enter कुंजी दबाई जाती है, तब भी handleSubmit चलाएँ
this.input.addEventListener("keypress", (e) => { /* ... */ });

DOM परिवर्तन:

// नए तत्व बनाएँ
const messageElement = document.createElement("div");

// उनकी गुणों को संशोधित करें
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";

// पृष्ठ में जोड़ें
this.messages.appendChild(messageElement);

सुरक्षा और सर्वश्रेष्ट प्रथाएँ

XSS रोकथाम:

escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;  // यह स्वचालित रूप से HTML को एस्केप करता है
    return div.innerHTML;
}

क्यों यह महत्वपूर्ण है: अगर कोई उपयोगकर्ता <script>alert('hack')</script> टाइप करता है, तो यह फ़ंक्शन इसे कोड के रूप में चलाने के बजाय टेक्स्ट के रूप में दिखाता है।

त्रुटि प्रबंधन:

try {
    const reply = await this.callAPI(messageText);
    this.appendMessage(reply, "assistant");
} catch (error) {
    // एप्लिकेशन के क्रैश होने के बजाय उपयोगकर्ता के अनुकूल त्रुटि दिखाएं
    this.appendMessage("Sorry, I'm having trouble...", "error");
}

उपयोगकर्ता अनुभव सम्बंधी विचार:

• आशावादी UI: उपयोगकर्ता का संदेश तुरंत जोड़ें, सर्वर प्रतिक्रिया का इंतजार न करें
• लोडिंग स्थितियाँ: इंतजार करते समय बटन निष्क्रिय करें और "Sending..." दिखाएँ
• ऑटो-स्क्रॉल: नवीनतम संदेशों को दिखाते रहें
• इनपुट वैधता: खाली संदेश न भेजें
• कीबोर्ड शॉर्टकट्स: Enter की संदेश भेजती है (जैसे असली चैट ऐप्स)

एप्लिकेशन फ्लो को समझना

1. पेज लोड होता है → DOMContentLoaded इवेंट फायर होता है → new ChatApp() बनाया जाता है
2. कंस्ट्रक्टर चलता है → DOM एलिमेंट्स की संदर्भ प्राप्त करता है → इवेंट लिसनर्स सेट करता है
3. उपयोगकर्ता संदेश टाइप करता है → Enter दबाता है या Send क्लिक करता है → handleSubmit चलता है
4. handleSubmit → इनपुट वैधता जांचता है → लोडिंग स्टेट दिखाता है → API कॉल करता है
5. API प्रतिक्रिया देती है → AI संदेश चैट में जोड़ता है → इंटरफ़ेस पुनः सक्षम करता है
6. अगले संदेश के लिए तैयार → उपयोगकर्ता चैट करना जारी रख सकता है

यह आर्किटेक्चर स्केलेबल है – आप आसानी से संदेश संपादन, फ़ाइल अपलोड, या कई वार्तालाप थ्रेड जैसी विशेषताएं जोड़ सकते हैं बिना मूल संरचना को फिर से लिखे।

🎯 पेडागॉजिकल चेक-इन: आधुनिक फ्रंटेंड आर्किटेक्चर

आर्किटेक्चर की समझ: आपने आधुनिक JavaScript पैटर्न का उपयोग करते हुए एक पूर्ण सिंगल-पेज एप्लिकेशन लागू किया है। यह पेशेवर स्तर के फ्रंटेंड विकास का प्रतिनिधित्व करता है।

मुख्य कॉन्सेप्ट महारत:

• ES6 क्लास आर्किटेक्चर: संगठित, रखरखाव योग्य कोड संरचना
• Async/Await पैटर्न: आधुनिक असिंक्रोनस प्रोग्रामिंग
• इवेंट-चालित प्रोग्रामिंग: प्रतिक्रियाशील यूजर इंटरफेस डिज़ाइन
• सुरक्षा सर्वश्रेष्ठ प्रथाएँ: XSS रोकथाम और इनपुट सत्यापन

इंडस्ट्री कनेक्शन: आपने जो पैटर्न सीखे हैं (क्लास-आधारित आर्किटेक्चर, async ऑपरेशन्स, DOM रिप्रेजेंटेशन) वे आधुनिक फ्रेमवर्क्स जैसे React, Vue, और Angular की आधारशिला हैं। आप उसी आर्किटेक्चरल सोच से निर्माण कर रहे हैं जो उत्पादन एप्लिकेशन में इस्तेमाल होता है।

परावर्तन प्रश्न: आप इस चैट एप्लिकेशन को कैसे विस्तार देंगे ताकि यह कई बातचीत या उपयोगकर्ता प्रमाणीकरण को संभाल सके? आवश्यक आर्किटेक्चरल बदलावों और क्लास संरचना के विकास पर विचार करें।

अपनी चैट इंटरफ़ेस को स्टाइल करें

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

यह व्यापक स्टाइल्स के साथ 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 प्रतिक्रियाएं, और त्रुटि अवस्थाओं के बीच दृश्यात्मक भेद
• सपोर्ट करता है प्रतिक्रियाशील डिज़ाइन जो डेस्कटॉप और मोबाइल दोनों पर काम करता है
• विचार करता है पहुँच से संबंधित मापदंड जैसे कम गति वरीयताएँ और उचित कंट्रास्ट अनुपात
• प्रदान करता है यूजर सिस्टम की वरीयताओं के आधार पर डार्क मोड सपोर्ट

अपने Backend URL को कॉन्फ़िगर करना

अंतिम चरण है अपने JavaScript में BASE_URL को आपके बैकएंड सर्वर से मेल खाने के लिए अपडेट करना:

// स्थानीय विकास के लिए
this.BASE_URL = "http://localhost:5000";

// GitHub Codespaces के लिए (अपने वास्तविक URL के साथ बदलें)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

अपने बैकएंड URL का निर्धारण:

• लोकल विकास: यदि आप फ्रंटेंड और बैकएंड दोनों स्थानीय रूप से चला रहे हैं तो http://localhost:5000 का उपयोग करें
• Codespaces: पोर्ट 5000 को सार्वजनिक करने के बाद पोर्ट्स टैब में अपना बैकएंड URL खोजें
• प्रोडक्शन: जब होस्टिंग सेवा पर डिप्लॉय करें तो अपने वास्तविक डोमेन के साथ प्रतिस्थापित करें

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

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

अब जबकि आपके पास दोनों फ्रंटेंड और बैकएंड घटक बनाए गए हैं, आइए जांचें कि सब कुछ संगठित रूप से काम करता है और अपने चैट सहायक को दूसरों के साथ साझा करने के विकल्प देखें।

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

अपने पूर्ण एप्लिकेशन का परीक्षण करने के लिए इन चरणों का पालन करें:

graph TD
    A[बैकेंड सर्वर शुरू करें] --> B[पर्यावरण वेरिएबल कॉन्फ़िगर करें]
    B --> C[एपीआई एंडपॉइंट्स का परीक्षण करें]
    C --> D[फ़्रंटेंड को ब्राउज़र में खोलें]
    D --> E[चैट कार्यक्षमता का परीक्षण करें]
    E --> F[किसी भी समस्या को डिबग करें]

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

1. अपना बैकएंड सर्वर शुरू करें:

   cd backend
   source venv/bin/activate  # या Windows पर venv\Scripts\activate करें
   python api.py
   

2. पुष्टि करें कि API काम कर रहा है:

   • अपने ब्राउज़र में http://localhost:5000 खोलें
   • आपको अपने FastAPI सर्वर से स्वागत संदेश दिखना चाहिए

3. अपना फ्रंटेंड खोलें:

   • अपने फ्रंटेंड डायरेक्टरी में जाएँ
   • अपने वेब ब्राउज़र में index.html खोलें
   • बेहतर विकास अनुभव के लिए VS Code के लाइव सर्वर एक्सटेंशन का उपयोग करें

4. चैट कार्यक्षमता का परीक्षण करें:

   • इनपुट फ़ील्ड में संदेश टाइप करें
   • "Send" पर क्लिक करें या Enter दबाएँ
   • पुष्टि करें कि AI उचित रूप से प्रतिक्रिया देता है
   • किसी भी JavaScript त्रुटि के लिए ब्राउज़र कंसोल जांचें

सामान्य समस्याओं का निवारण

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

सामान्य डिबगिंग कदम:

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

📈 आपका AI अनुप्रयोग विकास महारत टाइमलाइन

timeline
    title पूर्ण AI एप्लिकेशन विकास यात्रा
    
    section AI नींव
        जेनरेटिव AI को समझना
            : पैटर्न मान्यता अवधारणाएं समझें
            : AI पैरामीटर नियंत्रण में महारत हासिल करें
            : प्रॉम्प्ट इंजीनियरिंग तकनीकें सीखें
        
        GitHub मॉडल इंटीग्रेशन
            : AI सेवा प्लेटफ़ॉर्म पर नेविगेट करें
            : प्रमाणीकरण सुरक्षित रूप से संभालें
            : मॉडल पैरामीटर ऑप्टिमाइज़ करें
    
    section बैकएंड विकास
        Python API आर्किटेक्चर
            : FastAPI एप्लिकेशन बनाएं
            : async ऑपरेशन्स लागू करें
            : सुरक्षित एंडपॉइंट बनाएं
        
        AI सेवा इंटीग्रेशन
            : बाहरी AI API से कनेक्ट करें
            : रेट लिमिटिंग संभालें
            : त्रुटि सीमाएं लागू करें
    
    section फ्रंटएंड मास्टरी
        आधुनिक JavaScript पैटर्न
            : ES6 क्लास आर्किटेक्चर में महारत हासिल करें
            : async/await फ्लोज़ लागू करें
            : प्रतिक्रियाशील इंटरफेस बनाएं
        
        रियल-टाइम उपयोगकर्ता अनुभव
            : गतिशील चैट इंटरफेस बनाएं
            : लोडिंग स्टेट्स संभालें
            : उपयोगकर्ता इंटरैक्शन ऑप्टिमाइज़ करें
    
    section प्रोडक्शन तैयारी
        सुरक्षा और प्रदर्शन
            : सुरक्षित टोकन प्रबंधन लागू करें
            : XSS कमजोरियों को रोकें
            : API प्रदर्शन ऑप्टिमाइज़ करें
        
        पेशेवर तैनाती
            : स्केलेबल आर्किटेक्चर बनाएं
            : अनुरक्षित कोड बनाएं
            : विकास प्रक्रियाओं का दस्तावेज़ीकरण करें

🎓 स्नातक मील का पत्थर: आपने सफलतापूर्वक एक पूर्ण AI-संचालित एप्लिकेशन बनाया है जो उन्हीं तकनीकों और आर्किटेक्चर पैटर्न का उपयोग करता है जो आधुनिक AI सहायकों को शक्ति देते हैं। ये कौशल पारंपरिक वेब विकास और अत्याधुनिक AI एकीकरण के संगम का प्रतिनिधित्व करते हैं।

🔄 अगली स्तर की क्षमताएं:

• उन्नत AI फ्रेमवर्क (LangChain, LangGraph) का अन्वेषण करने के लिए तैयार
• मल्टी-मोडल AI अनुप्रयोग (टेक्स्ट, छवि, आवाज) बनाने के लिए तैयार
• वेक्टर डेटाबेस और पुनःप्राप्ति प्रणालियाँ लागू करने के लिए सक्षम
• मशीन लर्निंग और AI मॉडल फाइन-ट्यूनिंग के लिए आधार तैयार

GitHub Copilot एजेंट चुनौती 🚀

एजेंट मोड का उपयोग करके निम्न चुनौतियों को पूरा करें:

विवरण: चैट सहायक को वार्तालाप इतिहास और संदेश स्थिरता जोड़कर बढ़ाएँ। यह चुनौती आपको चैट एप्लिकेशन में स्टेट प्रबंधन और बेहतर उपयोगकर्ता अनुभव के लिए डेटा संग्रहण लागू करने का तरीका समझने में मदद करेगी।

प्रॉम्प्ट: चैट एप्लिकेशन को संशोधित करें ताकि वार्तालाप इतिहास शामिल हो जो सत्रों के बीच संरक्षित रहता हो। स्थानीय भंडारण में चैट संदेश सहेजने की कार्यक्षमता जोड़ें, पेज लोड होने पर वार्तालाप इतिहास दिखाएं, और एक "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 एनीमेशन, async प्रोग्रामिंग
संदेश टाइमस्टैम्प	दिखाएं कि प्रत्येक संदेश कब भेजा गया	दिनांक/समय प्रारूपण, UX डिज़ाइन
चैट निर्यात	उपयोगकर्ताओं को अपनी वार्तालाप डाउनलोड करने दें	फ़ाइल हैंडलिंग, डेटा एक्सपोर्ट
थीम स्विचिंग	लाइट/डार्क मोड टॉगल	CSS वेरिएबल्स, उपयोगकर्ता वरीयताएँ
वॉइस इनपुट	स्पीच-टू-टेक्स्ट फ़ंक्शन जोड़ें	वेब APIs, सुलभता

परीक्षण और डाक्यूमेंटेशन

गुणवत्ता आश्वासन:

• अपनी ऐप्लिकेशन का परीक्षण विभिन्न इनपुट प्रकारों और कोनों पर करें
• पुष्टि करें कि प्रतिक्रियाशील डिज़ाइन विभिन्न स्क्रीन आकारों पर काम करता है
• कीबोर्ड नेविगेशन और स्क्रीन रीडर से पहुँच जांचें
• HTML और CSS को मानकों के अनुसार सही करें

डाक्यूमेंटेशन आवश्यकताएँ:

• README.md लिखें जिसमें आपके प्रोजेक्ट और इसे चलाने का तरीका बताया हो
• अपने चैट इंटरफ़ेस के स्क्रीनशॉट शामिल करें
• कोई भी अनूठी विशेषताएँ या अनुकूलन दस्तावेज़ करें जो आपने जोड़े
• अन्य डेवलपर्स के लिए स्पष्ट सेटअप निर्देश प्रदान करें

सबमिशन दिशानिर्देश

परियोजना डिलिवरेबल्स:

1. सभी स्रोत कोड के साथ पूरा प्रोजेक्ट फ़ोल्डर
2. प्रोजेक्ट विवरण और सेटअप निर्देशों के साथ README.md
3. आपकी चैट सहायक का प्रदर्शन करते हुए स्क्रीनशॉट्स
4. आपने क्या सीखा और किन चुनौतियों का सामना किया यह संक्षिप्त प्रतिबिंब

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

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

💡 सफलता सुझाव: पहले बुनियादी आवश्यकताओं से शुरू करें, फिर जब सब काम कर रहा हो तो संवर्द्धन जोड़ें। उन्नत फीचर्स जोड़ने से पहले एक पॉलिश्ड कोर अनुभव बनाने पर ध्यान दें।

समाधान

Solution

बोनस चुनौतियाँ

अपने 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 के रूप में डाउनलोड)
• संदेश हानि से बचने के लिए localStorage में ऑटो-सेव जोड़ें

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

कई AI पर्सनालिटीज़:

• विभिन्न AI पर्सनालिटीज़ के बीच स्विच करने के लिए एक ड्रॉपडाउन बनाएं
• उपयोगकर्ता की पसंदीदा पर्सनालिटी localStorage में सहेजें
• वार्तालाप के प्रवाह को बनाए रखने वाला संदर्भ स्विचिंग लागू करें

स्मार्ट प्रतिक्रिया फ़ीचर्स:

• वार्तालाप संदर्भ जागरूकता जोड़ें (AI पिछले संदेशों को याद रखता है)
• बातचीत के विषय पर आधारित स्मार्ट सुझाव लागू करें
• सामान्य प्रश्नों के लिए त्वरित उत्तर बटन बनाएं

🎯 लर्निंग गोल: ये बोनस चुनौतियां आपको उन्नत वेब विकास पैटर्न और AI इंटीग्रेशन तकनीकों को समझने में मदद करती हैं जो प्रोडक्शन अनुप्रयोगों में उपयोग की जाती हैं।

सारांश और अगले कदम

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

आपने क्या उपलब्धि प्राप्त की

इस पाठ के दौरान, आपने कई प्रमुख तकनीकों और अवधारणाओं में महारत हासिल की है:

बैकेंड विकास:

• AI कार्यक्षमता के लिए GitHub Models API के साथ इंटीग्रेट किया
• सही त्रुटि हैंडलिंग के साथ Flask का उपयोग करके RESTful API बनाया
• पर्यावरण चर का उपयोग कर सुरक्षित प्रमाणीकरण लागू किया
• फ्रंटएंड और बैकएंड के बीच क्रॉस-ओरिजिन अनुरोधों के लिए CORS कॉन्फ़िगर किया

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

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

फुल-स्टैक इंटीग्रेशन:

• HTTP API कॉल के माध्यम से फ्रंटएंड और बैकएंड को जोड़ना
• रीयल-टाइम उपयोगकर्ता इंटरैक्शन और असिंक्रोनस डेटा फ्लो को संचालित किया
• ऐप्लिकेशन में त्रुटि हैंडलिंग और उपयोगकर्ता प्रतिक्रिया लागू किया
• उपयोगकर्ता इनपुट से AI प्रतिक्रिया तक पूरे ऐप कार्यप्रवाह का परीक्षण किया

मुख्य सीखने के परिणाम

mindmap
  root((एआई चैट ऐप कौशल))
    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 क्षमताओं को कैसे एकीकृत किया जाता है, जिससे उपयोगकर्ता अनुभव अधिक बुद्धिमान और उत्तरदायी बनता है।

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

इस पाठ में आपने जो कौशल विकसित किए हैं वे आधुनिक सॉफ़्टवेयर विकास करियर में सीधे लागू होते हैं:

• आधुनिक फ्रेमवर्क और API का उपयोग करते हुए फुल-स्टैक वेब विकास
• वेब अनुप्रयोगों और मोबाइल ऐप्स में AI इंटीग्रेशन
• माइक्रोसर्विस आर्किटेक्चर के लिए API डिज़ाइन और विकास
• यूजर इंटरफ़ेस विकास जिसमें एक्सेसिबिलिटी और प्रतिक्रियाशील डिज़ाइन पर ध्यान केंद्रित है
• DevOps प्रथाएं जिसमें पर्यावरण कन्फ़िगरेशन और परिनियोजन शामिल हैं

अपनी AI विकास यात्रा जारी रखें

अगले सीखने के चरण:

• अधिक उन्नत AI मॉडल और API (GPT-4, Claude, Gemini) का अध्ययन करें
• बेहतर AI उत्तरों के लिए प्रॉम्प्ट इंजीनियरिंग तकनीकों को सिखें
• बातचीत डिज़ाइन और चैटबोट उपयोगकर्ता अनुभव सिद्धांतों का अध्ययन करें
• AI सुरक्षा, नैतिकता, और जिम्मेदार AI विकास प्रथाओं की जांच करें
• बातचीत मेमोरी और संदर्भ जागरूकता के साथ अधिक जटिल अनुप्रयोग बनाएं

उन्नत परियोजना विचार:

• AI मॉडरेशन के साथ बहु-उपयोगकर्ता चैट रूम
• AI-संचालित ग्राहक सेवा चैटबोट
• व्यक्तिगत शिक्षण के साथ शैक्षिक ट्यूटर सहायक
• विभिन्न AI व्यक्तित्वों के साथ रचनात्मक लेखन सहयोगी
• डेवलपर्स के लिए तकनीकी दस्तावेज़ सहायक

GitHub Codespaces के साथ शुरुआत करना

क्या आप इस परियोजना को क्लाउड विकास वातावरण में आज़माना चाहते हैं? GitHub Codespaces आपके ब्राउज़र में पूर्ण विकास सेटअप प्रदान करता है, जो AI अनुप्रयोगों का स्थानीय सेटअप आवश्यकताओं के बिना प्रयोग करने के लिए उपयुक्त है।

अपने विकास पर्यावरण की स्थापना

चरण 1: टेम्पलेट से बनाएँ

• Web Dev For Beginners repository पर जाएं
• शीर्ष-दाएँ कोने में "Use this template" पर क्लिक करें (सुनिश्चित करें कि आप GitHub में लॉग इन हैं)

चरण 2: Codespaces लॉन्च करें

• अपने नए बनाए गए रिपॉजिटरी को खोलें
• हरे "Code" बटन पर क्लिक करें और "Codespaces" चुनें
• "Create codespace on main" चुनें ताकि आपका विकास पर्यावरण शुरू हो सके

चरण 3: पर्यावरण कॉन्फ़िगरेशन
एक बार आपका Codespace लोड हो जाने पर, आपको मिलेगा:

• पूर्व-स्थापित Python, Node.js, और सभी आवश्यक विकास उपकरण
• वेब विकास के लिए एक्सटेंशन के साथ VS Code इंटरफ़ेस
• बैकएंड और फ्रंटएंड सर्वर चलाने के लिए टर्मिनल एक्सेस
• आपके अनुप्रयोगों का परीक्षण करने के लिए पोर्ट फॉरवर्डिंग

Codespaces क्या प्रदान करता है:

• स्थानीय पर्यावरण सेटअप और कॉन्फ़िगरेशन मुद्दों को समाप्त करता है
• विभिन्न उपकरणों पर सुसंगत विकास पर्यावरण प्रदान करता है
• वेब विकास के लिए पूर्व-कॉन्फ़िगर किए गए उपकरण और एक्सटेंशन शामिल हैं
• संस्करण नियंत्रण और सहयोग के लिए GitHub के साथ सहज इंटीग्रेशन प्रदान करता है

🚀 प्रो टिप: Codespaces AI अनुप्रयोगों को सीखने और प्रोटोटाइप बनाने के लिए उत्तम है क्योंकि यह सभी जटिल पर्यावरण सेटअप को स्वचालित रूप से संभालता है, जिससे आप निर्माण और सीखने पर ध्यान केंद्रित कर सकें न कि कॉन्फ़िगरेशन समस्याओं पर।

---

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