# AI के साथ एक चैट असिस्टेंट बनाएं
Star Trek में याद है जब दल जहाज के कंप्यूटर से आराम से बातचीत करता था, उससे जटिल सवाल पूछता था और विचारशील जवाब पाता था? 1960 के दशक में जो शुद्ध विज्ञान कथा जैसा लगता था, अब कुछ ऐसा है जिसे आप पहले से जानते वेब तकनीकों का उपयोग करके बना सकते हैं।
इस पाठ में, हम HTML, CSS, JavaScript और कुछ बैकएंड एकीकरण का उपयोग करके एक AI चैट असिस्टेंट बनाएंगे। आप देखेंगे कि आपने जो कौशल सीखा है, वे शक्तिशाली AI सेवाओं से कैसे जुड़ सकते हैं जो संदर्भ को समझ सकती हैं और सार्थक प्रतिक्रियाएं उत्पन्न कर सकती हैं।
AI को एक विशाल पुस्तकालय की तरह सोचें जो न केवल जानकारी खोज सकता है बल्कि उसे आपके विशिष्ट सवालों के अनुसार सुसंगत उत्तरों में संकलित भी कर सकता है। हजारों पृष्ठों के माध्यम से खोजने के बजाय, आपको सीधे, संदर्भित जवाब मिलते हैं।
इंटीग्रेशन परिचित वेब प्रौद्योगिकियों के संयोजन के माध्यम से होता है। HTML चैट इंटरफ़ेस बनाता है, CSS विज़ुअल डिज़ाइन को संभालता है, JavaScript उपयोगकर्ता इंटरैक्शन को प्रबंधित करता है, और एक बैकएंड API सब कुछ AI सेवाओं से जोड़ता है। यह उसी तरह है जैसे ऑर्केस्ट्रा के विभिन्न हिस्से मिलकर एक सिम्फनी बनाते हैं।
हम मौलिक रूप से प्राकृतिक मानव संचार और मशीन प्रसंस्करण के बीच एक पुल बना रहे हैं। आप AI सेवा इंटीग्रेशन के तकनीकी कार्यान्वयन और डिज़ाइन पैटर्न को सीखेंगे जो इंटरैक्शन को सहज महसूस कराते हैं।
इस पाठ के अंत तक, AI इंटीग्रेशन रहस्यमयी प्रक्रिया की बजाय एक और API की तरह लगेगा जिसके साथ आप काम कर सकते हैं। आप उन नींव पैटर्न को समझेंगे जो ChatGPT और Claude जैसे एप्लिकेशन को शक्ति देते हैं, उन्हीं वेब विकास सिद्धांतों का उपयोग करते हुए जिन्हें आप सीख रहे हैं।
## ⚡ अगले 5 मिनट में आप क्या कर सकते हैं
**व्यस्त डेवलपर्स के लिए त्वरित आरंभ मार्ग**
```mermaid
flowchart LR
A[⚡ 5 मिनट] --> B[GitHub टोकन प्राप्त करें]
B --> C[AI प्लेग्राउंड का परीक्षण करें]
C --> D[पायथन कोड कॉपी करें]
D --> E[AI प्रतिक्रियाएँ देखें]
```
- **मिनट 1**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) पर जाएं और एक व्यक्तिगत एक्सेस टोकन बनाएँ
- **मिनट 2**: सीधे प्लेग्राउंड इंटरफ़ेस में AI इंटरैक्शन का परीक्षण करें
- **मिनट 3**: "Code" टैब पर क्लिक करें और Python स्निपेट कॉपी करें
- **मिनट 4**: अपना टोकन इस्तेमाल करते हुए कोड स्थानीय रूप से चलाएँ: `GITHUB_TOKEN=your_token python test.py`
- **मिनट 5**: अपनी खुद की कोड से पहली AI प्रतिक्रिया उत्पन्न होते देखें
**त्वरित परीक्षण कोड**:
```python
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
```
**यह क्यों महत्वपूर्ण है**: 5 मिनट में, आप प्रोग्रामेटिक AI इंटरैक्शन का जादू अनुभव करेंगे। यह हर AI एप्लिकेशन की मूलभूत इमारत है जिसका आप उपयोग करते हैं।
आपका पूरा प्रोजेक्ट ऐसा दिखेगा:
## 🗺️ AI एप्लिकेशन विकास के माध्यम से आपकी सीखने की यात्रा
```mermaid
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**: एक जानकार मित्र से बिल्लियों के बारे में पूछना – वे अपनी भाषा में आपकी जिज्ञासा के अनुसार रोचक बातें बताते हैं
```mermaid
graph LR
A[आपका प्रश्न] --> B[एआई मॉडल]
B --> C[पैटर्न पहचान]
C --> D[सामग्री निर्माण]
D --> E[प्रासंगिक उत्तर]
F[प्रशिक्षण डेटा पुस्तकें, लेख, वेब] --> B
```
### AI मॉडल कैसे सीखते हैं (सरल संस्करण)
AI मॉडल पुस्तकें, लेख, और संवादों सहित विशाल डेटा सेट में पाठ के संपर्क से सीखते हैं। इस प्रक्रिया के माध्यम से वे पैटर्न पहचानते हैं:
- लिखित संचार में विचारों की संरचना कैसे होती है
- किन शब्दों का एक साथ अक्सर उपयोग होता है
- बातचीत आमतौर पर कैसे आगे बढ़ती है
- औपचारिक और अनौपचारिक संचार में संदर्भ आधारित भिन्नताएं
**यह उसी तरह है जैसे पुरातत्वविद् प्राचीन भाषाओं को समझते हैं**: वे हजारों उदाहरणों का विश्लेषण करके व्याकरण, शब्दावली और सांस्कृतिक संदर्भ को समझते हैं, अंततः उन शिक्षित पैटर्न का उपयोग कर नई पाठ्यपुस्तकें व्याख्यायित करने में सक्षम होते हैं।
### GitHub Models क्यों?
हम GitHub Models का उपयोग एक व्यावहारिक कारण से कर रहे हैं – यह हमें एंटरप्राइज-स्तर के AI तक पहुंच देता है बिना अपनी खुद की AI इन्फ्रास्ट्रक्चर सेटअप किए (जो, मुझ पर भरोसा करें, आप अभी नहीं करना चाहेंगे!)। इसे ऐसे सोचें जैसे आप मौसम API का उपयोग कर रहे हों बजाय हर जगह मौसम स्टेशन लगाने के।
यह मूल रूप से "AI-as-a-Service" है, और सबसे अच्छी बात? शुरुआत करने के लिए यह मुफ़्त है, ताकि आप बिना बड़े बिल की चिंता किए प्रयोग कर सकें।
```mermaid
graph LR
A[फ्रंटेंड चैट UI] --> B[आपका बैकएंड API]
B --> C[GitHub मॉडल्स API]
C --> D[एआई मॉडल प्रोसेसिंग]
D --> C
C --> B
B --> A
```
हम GitHub Models का उपयोग अपने बैकएंड एकीकरण के लिए करेंगे, जो डेवलपर-मैत्रीपूर्ण इंटरफ़ेस के माध्यम से पेशेवर-ग्रेड AI क्षमताएं प्रदान करता है। [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) एक परीक्षण वातावरण के रूप में कार्य करता है जहाँ आप विभिन्न AI मॉडल के साथ प्रयोग कर सकते हैं और उनकी क्षमताओं को समझ सकते हैं इससे पहले कि आप उन्हें कोड में लागू करें।
## 🧠 AI एप्लिकेशन विकास पारिस्थितिकी तंत्र
```mermaid
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 कोड प्राप्त करते हैं, तो आपको कुछ ऐसा मिलेगा। शुरुआत में यह बहुत अधिक लग सकता है – चलिए इसे टुकड़ों में समझते हैं:
```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 संवाद एक विशेष संरचना का उपयोग करते हैं जिसमें विभिन्न "भूमिकाएं" होती हैं जिनका अलग उद्देश्य होता है:
```python
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**: पूरी तरह प्रयोगात्मक जैज़, अप्रत्याशित मोड़ के साथ (बहुत असंभावित)
```python
# बहुत ही पूर्वानुमेय उत्तर (तथ्यात्मक प्रश्नों के लिए अच्छा)
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**: उदाहरणों के साथ विस्तृत स्पष्टीकरण
```python
# संक्षिप्त, सारगर्भित उत्तर
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**: कह सकता है "नीला", "बादल", "विशाल", "परिवर्तित", "सुंदर", आदि
### सभी को एक साथ जोड़ना: विभिन्न उपयोग मामलों के लिए पैरामीटर संयोजन
```python
# तथ्यात्मक, सुसंगत उत्तरों के लिए (जैसे एक प्रलेखन बॉट)
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
}
```
```mermaid
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 किस पर ध्यान केंद्रित करे?
```python
# ❌ अस्पष्ट सिस्टम प्रॉम्प्ट
"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 पर्सनालिटी बनाते हैं:
```python
# उदाहरण 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.
"""
```
#### सिस्टम प्रॉम्प्ट्स को क्रिया में देखना
आइए एक ही सवाल को विभिन्न सिस्टम प्रॉम्प्ट्स के साथ परखते हैं और नाटकीय अंतर देखते हैं:
**सवाल**: "मैं अपनी वेब ऐप में उपयोगकर्ता प्रमाणीकरण कैसे संभालूं?"
```python
# शिक्षक प्रॉम्प्ट के साथ:
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 को पृष्ठभूमि जानकारी देना
```python
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
```
**2. आउटपुट फॉर्मेटिंग**: AI को बताएं कि प्रतिक्रियाओं का स्वरूप कैसे बनाना है
```python
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
```
**3. प्रतिबंध सेट करना**: यह परिभाषित करें कि AI को क्या नहीं करना चाहिए
```python
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
```
#### आपके चैट सहायक के लिए यह क्यों महत्वपूर्ण है
सिस्टम प्रॉम्प्ट को समझना आपको विशेष 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 सेवा**: बाहरी कंप्यूटेशन और प्रतिक्रिया निर्माण
- **पर्यावरण चर**: सुरक्षित कॉन्फ़िगरेशन और क्रेडेंशियल संग्रह
### अनुरोध-प्रतिक्रिया प्रवाह को समझना
आइए देखें जब कोई उपयोगकर्ता संदेश भेजता है तो क्या होता है:
```mermaid
sequenceDiagram
participant User as 👤 उपयोगकर्ता
participant Frontend as 🌐 फ्रंटएंड
participant API as 🔧 FastAPI सर्वर
participant AI as 🤖 एआई सेवा
User->>Frontend: टाइप करता है "नमस्ते एआई!"
Frontend->>API: POST /hello {"message": "नमस्ते एआई!"}
Note over API: अनुरोध को मान्य करता है सिस्टम प्रॉम्प्ट जोड़ता है
API->>AI: स्वरूपित अनुरोध भेजता है
AI->>API: एआई प्रतिक्रिया लौटाता है
Note over API: प्रतिक्रिया संसाधित करता है संवाद को लॉग करता है
API->>Frontend: {"response": "नमस्ते! मैं आपकी कैसे मदद कर सकता हूँ?"}
Frontend->>User: एआई संदेश प्रदर्शित करता है
```
**प्रत्येक चरण को समझना:**
1. **उपयोगकर्ता इंटरैक्शन**: व्यक्ति चैट इंटरफ़ेस में टाइप करता है
2. **फ्रंटएंड प्रसंस्करण**: जावास्क्रिप्ट इनपुट पकड़ता है और इसे JSON के रूप में स्वरूपित करता है
3. **एपीआई वैधता**: FastAPI स्वचालित रूप से Pydantic मॉडल का उपयोग करके अनुरोध मान्य करता है
4. **AI एकीकरण**: बैकएंड संदर्भ (सिस्टम प्रॉम्प्ट) जोड़ता है और AI सेवा को कॉल करता है
5. **प्रतिक्रिया हैंडलिंग**: API AI प्रतिक्रिया प्राप्त करता है और आवश्यकतानुसार इसे संशोधित कर सकता है
6. **फ्रंटएंड प्रदर्शन**: जावास्क्रिप्ट प्रतिक्रिया को चैट इंटरफ़ेस में दिखाता है
### API आर्किटेक्चर को समझना
```mermaid
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": "नमस्ते! मैं आपकी कैसे मदद कर सकता हूँ?"}
```
```mermaid
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 कोड डालें:
```python
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# लॉगिंग कॉन्फ़िगर करें
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`
ये "अलग मूल" माने जाते हैं, भले ही वे एक ही कंप्यूटर पर हों!
```python
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # यह ब्राउज़रों को बताता है: "अन्य मूलों के लिए इस API पर अनुरोध करना ठीक है"
```
**CORS कॉन्फ़िगरेशन का व्यवहार में क्या करता है:**
- **विशेष HTTP हेडर जोड़ता है** जो ब्राउज़र को बताता है "यह क्रॉस-ओरिजिन अनुरोध अनुमत है"
- **"प्रीफ्लाइट" अनुरोधों को संभालता है** (ब्राउज़र कभी-कभी अनुमति जांचते हैं पहले असली अनुरोध भेजने से)
- **आपके ब्राउज़र कंसोल में 'blocked by CORS policy' त्रुटि को रोकता है**
#### CORS सुरक्षा: विकास बनाम उत्पादन
```python
# 🚨 विकास: सभी मूलों को अनुमति देता है (सुविधाजनक लेकिन असुरक्षित)
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 में उचित त्रुटि हैंडलिंग शामिल है:
```python
# सत्यापित करें कि हमें एक संदेश प्राप्त हुआ है
if not message:
return jsonify({"error": "Message field is required"}), 400
```
**प्रमुख मान्यकरण सिद्धांत:**
- **प्रक्रिया से पहले आवश्यक फ़ील्ड्स जांचना**
- **अर्थपूर्ण त्रुटि संदेश JSON में लौटाना**
- **उचित HTTP स्थिति कोड का उपयोग (400 खराब अनुरोध के लिए)**
- **स्पष्ट प्रतिक्रिया देना जिससे फ्रंटएंड डेवलपर्स डिबगिंग कर सकें**
## अपना बैकएंड सेटअप और चलाना
अब जब हमारी AI एकीकरण और FastAPI सर्वर तैयार है, तो चलिए सब कुछ चलाते हैं। सेटअप प्रक्रिया में पायथन निर्भरताओं को इंस्टॉल करना, पर्यावरण चर कॉन्फ़िगर करना, और विकास सर्वर शुरू करना शामिल है।
### पायथन पर्यावरण सेटअप
आइए अपना पायथन विकास पर्यावरण सेट करें। वर्चुअल एनवायरनमेंट्स मानो मैनहट्टन प्रोजेक्ट की विभाजित पद्धति जैसे हैं – प्रत्येक प्रोजेक्ट को अपनी आइसोलेटेड जगह मिलती है जिसमें विशेष उपकरण और निर्भरता होती हैं, जो विभिन्न प्रोजेक्ट्स में संघर्ष से बचाती हैं।
```bash
# अपने बैकएंड डायरेक्टरी पर जाएं
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 शुरू करने से पहले हमें वेब विकास में सबसे महत्वपूर्ण पाठों में से एक पर बात करनी है: अपने रहस्यों को वास्तव में सुरक्षित कैसे रखें। पर्यावरण चर एक सुरक्षित तिजोरी की तरह हैं जिसे केवल आपकी एप्लिकेशन ही एक्सेस कर सकती है।
#### पर्यावरण चर क्या हैं?
**पर्यावरण चर को एक सेफ्टी डिपॉजिट बॉक्स की तरह सोचें** – आप अपनी कीमती चीजें वहाँ रखते हैं, और केवल आप (और आपकी ऐप) के पास उसका चाबी है। संवेदनशील जानकारी सीधे अपने कोड में लिखने के बजाय (जहां कोई भी देख सकता है), आप इसे सुरक्षित रूप से पर्यावरण में सहेजते हैं।
**यहाँ फर्क है:**
- **गलत तरीका**: अपना पासवर्ड चिपचिपे नोट पर लिखना और मॉनिटर पर चिपकाना
- **सही तरीका**: पासवर्ड को एक सुरक्षित पासवर्ड मैनेजर में रखना जिसमें केवल आपको पहुंच हो
#### पर्यावरण चर क्यों महत्वपूर्ण हैं
```python
# 🚨 कभी भी ऐसा न करें - 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` नाम की फाइल बनाएं। यह फाइल आपके रहस्यों को स्थानीय स्तर पर संग्रहीत करती है:
```bash
# .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 फाइल में पेस्ट करें**
```bash
# आपका टोकन कैसा दिखता है इसका उदाहरण (यह नकली है!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
```
#### पायथन में पर्यावरण चर लोड करना
```python
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 को बताती है कि कौन सी फाइलें कभी ट्रैक या अपलोड नहीं करनी हैं:
```bash
# .gitignore - ये पंक्तियाँ जोड़ें
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
```
**यह क्यों महत्वपूर्ण है**: एक बार जब आप `.env` को `.gitignore` में जोड़ देते हैं, तो Git आपकी पर्यावरण फ़ाइल को अनदेखा कर देगा, जिससे आप अपके रहस्यों को गलती से GitHub पर अपलोड करने से बचेंगे।
#### अलग-अलग पर्यावरण, अलग-अलग रहस्य
पेशेवर एप्लिकेशन विभिन्न पर्यावरणों के लिए अलग API कुंजी का उपयोग करते हैं:
```bash
# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.production
GITHUB_TOKEN=your_production_token
DEBUG=False
```
**यह क्यों मायने रखता है**: आप नहीं चाहते कि आपके विकास प्रयोग आपकी उत्पादन AI उपयोग कोटा को प्रभावित करें, और आप अलग-अलग पर्यावरणों के लिए विभिन्न सुरक्षा स्तर चाहते हैं।
### विकास सर्वर शुरू करना: अपना FastAPI जीवन में लाना
अब आता है रोमांचक पल – अपनी FastAPI विकास सर्वर को शुरू करना और अपनी AI एकीकरण को जीवंत होते देखना! FastAPI Uvicorn का उपयोग करता है, जो एक बेहद तेज़ ASGI सर्वर है जिसे विशेष रूप से async Python एप्लिकेशन के लिए डिज़ाइन किया गया है।
#### FastAPI सर्वर स्टार्टअप प्रक्रिया को समझना
```bash
# विधि 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` पर
#### जब सब कुछ काम करता है तो आपको क्या देखना चाहिए
```bash
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
```
**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: कमांड लाइन टेस्ट (उन्नत)**
```bash
# कर्ल के साथ परीक्षण करें (अगर उपलब्ध हो)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# अपेक्षित प्रतिक्रिया:
# {"response": "नमस्ते! मैं आपका एआई सहायक हूँ। मैं आपकी आज कैसे मदद कर सकता हूँ?"}
```
**तरीका 3: Python टेस्ट स्क्रिप्ट**
```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 फ़ाइलों में बदलाव सहेजते हैं। इसका मतलब है कि आप अपने कोड को संशोधित कर सकते हैं और तुरंत परीक्षण कर सकते हैं बिना मैन्युअल रूप से पुनः प्रारंभ किए।
```python
# हॉट रीलोडिंग को स्पष्ट रूप से सक्षम करें
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True हॉट रीलोड सक्षम करता है
```
**विकास के लिए लॉगिंग**: समझने के लिए लॉगिंग जोड़ें कि क्या हो रहा है:
```python
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. अपना बैकएंड सर्वर शुरू करें**:
```bash
cd backend
python api.py
```
आप परिचित FastAPI/Uvicorn स्टार्टअप संदेश देखेंगे, लेकिन ध्यान दें कि यह Codespace पर्यावरण के अंदर चल रहा है।
**2. पोर्ट दृश्यता सेट करें**:
- VS Code के नीचे पैनल में "Ports" टैब देखें
- सूची में पोर्ट 5000 खोजें
- पोर्ट 5000 पर राइट-क्लिक करें
- "Port Visibility" → "Public" चुनें
**इसे सार्वजनिक क्यों बनाएं?** डिफ़ॉल्ट रूप से, Codespace पोर्ट निजी होते हैं (सिर्फ आपके लिए सुलभ)। इसे सार्वजनिक बनाने से आपका फ्रंटेंड (जो ब्राउज़र में चलता है) आपके बैकएंड से संवाद कर सकता है।
**3. अपनी सार्वजनिक URL प्राप्त करें**:
पोर्ट सार्वजनिक बनाने के बाद, आपको इस तरह का URL दिखाई देगा:
```
https://your-codespace-name-5000.app.github.dev
```
**4. अपनी फ्रंटेंड कॉन्फ़िगरेशन अपडेट करें**:
```javascript
// अपने फ्रंटएंड 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. ब्राउज़र डिवेलपर टूल के साथ परीक्षण करें**:
```javascript
// ब्राउज़र कंसोल खोलें और अपने 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 में वातावरण चर भी सेट कर सकते हैं:
```bash
# वर्तमान सत्र के लिए पर्यावरण चर सेट करें
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 कहते हैं। पुरानी शैली के विपरीत जहां हर क्लिक एक नया पृष्ठ लाता है, हमारा ऐप चिकनी और त्वरित है:
**पुरानी वेबसाइटें**: जैसे कोई भौतिक पुस्तक पढ़ना – आप पूरी तरह से नए पृष्ठ पलटते हैं
**हमारा चैट ऐप**: जैसे आप अपना फोन इस्तेमाल कर रहे हों – सब कुछ सुचारू रूप से चलता और अपडेट होता है
```mermaid
graph TD
A[उपयोगकर्ता संदेश टाइप करता है] --> B[जावास्क्रिप्ट इनपुट को कैप्चर करता है]
B --> C[डेटा सत्यापित करें और स्वरूपित करें]
C --> D[बैकएंड API को भेजें]
D --> E[लोडिंग स्थिति दिखाएँ]
E --> F[AI प्रतिक्रिया प्राप्त करें]
F --> G[चैट इंटरफेस अपडेट करें]
G --> H[अगले संदेश के लिए तैयार]
```
```mermaid
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : नियंत्रित करता है
ChatApp --> FastAPI : अनुरोध भेजता है
```
### फ्रंटेंड विकास के तीन स्तंभ
हर फ्रंटेंड एप्लिकेशन – साधारण वेबसाइट से लेकर Discord या Slack जैसे जटिल ऐप तक – तीन मूलभूत तकनीकों पर आधारित है। इन्हें आप वेब पर जो कुछ भी देखते और उपयोग करते हैं उसकी नींव समझ सकते हैं:
**HTML (संरचना)**: यही आपकी नींव है
- तय करता है कि कौन से एलिमेंट मौजूद हैं (बटन, टेक्स्ट एरिया, कंटेनर)
- सामग्री को अर्थ देता है (यह हेडर है, यह फॉर्म है, आदि)
- वह मूल संरचना बनाता है जिस पर सब कुछ बना होता है
**CSS (प्रस्तुति)**: यह आपका इंटीरियर डिज़ाइनर है
- सब कुछ सुंदर बनाता है (रंग, फॉन्ट, लेआउट)
- विभिन्न स्क्रीन आकारों को संभालता है (फोन, लैपटॉप, टैबलेट)
- स्मूथ एनिमेशन और विज़ुअल फ़ीडबैक बनाता है
**JavaScript (व्यवहार)**: यह आपका मस्तिष्क है
- उपयोगकर्ता क्रियाओं (क्लिक, टाइपिंग, स्क्रॉलिंग) पर प्रतिक्रिया करता है
- आपके बैकएंड से बात करता है और पेज को अपडेट करता है
- सब कुछ इंटरैक्टिव और गतिशील बनाता है
**इसे वास्तुशिल्प डिज़ाइन की तरह सोचें:**
- **HTML**: संरचनात्मक ब्लूप्रिंट (स्थान और संबंधों को परिभाषित करना)
- **CSS**: सौंदर्यशास्त्र और पर्यावरणीय डिज़ाइन (दृश्य शैली और उपयोगकर्ता अनुभव)
- **JavaScript**: यांत्रिक प्रणालियाँ (कार्यात्मकता और इंटरैक्टिविटी)
### आधुनिक JavaScript वास्तुकला क्यों महत्वपूर्ण है
हमारा चैट एप्लिकेशन आधुनिक JavaScript पैटर्न का उपयोग करेगा जिसे आप व्यावसायिक अनुप्रयोगों में देखेंगे। इन अवधारणाओं को समझना आपको बेहतर डेवलपर बनने में मदद करेगा:
**क्लास-आधारित वास्तुकला**: हम अपने कोड को क्लास में व्यवस्थित करेंगे, जो वस्तुओं के लिए ब्लूप्रिंट बनाने जैसा है
**Async/Await**: उन ऑपरेशनों को संभालने का आधुनिक तरीका जो समय लेते हैं (जैसे API कॉल)
**इवेंट-ड्रिवन प्रोग्रामिंग**: हमारा ऐप उपयोगकर्ता क्रियाओं (क्लिक, कुंजी दबाने) पर प्रतिक्रिया करता है, बजाय कि लूप में लगातार चलने के
**DOM मैनीपुलेशन**: उपयोगकर्ता सहभागिता और API प्रतिक्रियाओं के आधार पर वेबपेज कंटेंट का गतिशील अपडेट
### प्रोजेक्ट संरचना सेटअप
इस तरह से एक frontend डायरेक्टरी बनाएं जिसमें निम्न संरचना हो:
```text
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
```
**आर्किटेक्चर को समझना:**
- संरचना (HTML), व्यवहार (JavaScript) और प्रस्तुति (CSS) के बीच जिम्मेदारियों को अलग करता है
- सरल फ़ाइल संरचना रखता है जिसे नेविगेट और संशोधित करना आसान है
- संगठन और रखरखाव के लिए वेब विकास के सर्वोत्तम अभ्यासों का पालन करता है
### HTML नींव बनाना: अभिगम्यता के लिए सेमांटिक संरचना
आइए HTML संरचना से शुरू करें। आधुनिक वेब विकास "सेमांटिक HTML" पर जोर देता है – ऐसे HTML एलिमेंट्स का उपयोग करना जो उनके उद्देश्य को स्पष्ट रूप से बताते हों, केवल उनके स्वरूप को नहीं। इससे आपका ऐप स्क्रीन रीडर्स, सर्च इंजन, और अन्य टूल्स के लिए सुलभ बनता है।
**सेमांटिक HTML क्यों महत्वपूर्ण है**: कल्पना करें कि आप किसी को फोन पर अपने चैट ऐप के बारे में बता रहे हैं। आप कहेंगे "यहाँ एक हेडर है जिसमें शीर्षक है, एक मुख्य क्षेत्र है जहाँ बातचीत होती है, और नीचे एक फॉर्म है जहाँ संदेश टाइप किए जाते हैं।" सेमांटिक HTML ऐसे एलिमेंट्स का उपयोग करता है जो इस प्राकृतिक विवरण से मेल खाते हैं।
`index.html` इस सावधानीपूर्वक संरचित मार्कअप के साथ बनाएं:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**प्रत्येक HTML एलिमेंट और उसके उद्देश्य को समझना:**
#### दस्तावेज़ संरचना
- **``**: ब्राउज़र को बताता है कि यह आधुनिक HTML5 है
- **``**: पेज भाषा निर्दिष्ट करता है स्क्रीन रीडर्स और अनुवाद उपकरणों के लिए
- **``**: अंतरराष्ट्रीय पाठ के लिए उचित कैरेक्टर एन्कोडिंग सुनिश्चित करता है
- **``**: ज़ूम और स्केल नियंत्रित करके पेज को मोबाइल-उत्तरदायी बनाता है
#### सेमांटिक एलिमेंट्स
- **``**: शीर्षक और विवरण के साथ शीर्ष अनुभाग को स्पष्ट करता है
- **``**: प्राथमिक सामग्री क्षेत्र निर्दिष्ट करता है (जहाँ बातचीत होती है)
- **`