# چیٹ اسسٹنٹ بنائیں AI کے ساتھ
یاد کریں کہ اسٹار ٹریک میں جب عملہ آرام سے جہاز کے کمپیوٹر سے بات کرتا تھا، پیچیدہ سوالات پوچھتا تھا اور سوچ سمجھ کر جواب حاصل کرتا تھا؟ جو 1960 کی دہائی میں خالص سائنس فکشن لگتا تھا، وہ اب کچھ ایسا ہے جو آپ ویب ٹیکنالوجیز کے ذریعے بنا سکتے ہیں جو آپ پہلے ہی جانتے ہیں۔
اس سبق میں، ہم HTML، CSS، جاوا اسکرپٹ، اور کچھ بیک اینڈ انٹیگریشن کا استعمال کرتے ہوئے ایک AI چیٹ اسسٹنٹ بنائیں گے۔ آپ دریافت کریں گے کہ وہی مہارتیں جو آپ سیکھ رہے ہیں، کس طرح طاقتور AI سروسز سے جڑ سکتی ہیں جو سیاق و سباق کو سمجھ سکتی ہیں اور معنی خیز جوابات پیدا کر سکتی ہیں۔
AI کو ایک وسیع لائبریری تک رسائی حاصل کرنے جیسا سمجھیں جو نہ صرف معلومات تلاش کر سکتی ہے بلکہ اسے آپ کے مخصوص سوالات کے مطابق مربوط جوابات میں بھی تبدیل کر سکتی ہے۔ ہزاروں صفحات کے ذریعے تلاش کرنے کے بجائے، آپ کو براہ راست، سیاق و سباق کے مطابق جوابات ملتے ہیں۔
یہ انٹیگریشن مانوس ویب ٹیکنالوجیز کے ذریعے ہوتی ہے جو ایک ساتھ کام کرتی ہیں۔ HTML چیٹ انٹرفیس بناتا ہے، CSS بصری ڈیزائن کو سنبھالتا ہے، جاوا اسکرپٹ صارف کے تعاملات کا انتظام کرتا ہے، اور ایک بیک اینڈ API سب کچھ AI سروسز سے جوڑتا ہے۔ یہ بالکل ویسا ہی ہے جیسے ایک آرکسٹرا کے مختلف حصے مل کر ایک سمفنی بناتے ہیں۔
ہم بنیادی طور پر قدرتی انسانی مواصلات اور مشین پروسیسنگ کے درمیان ایک پل بنا رہے ہیں۔ آپ AI سروس انٹیگریشن کے تکنیکی نفاذ اور ڈیزائن پیٹرنز سیکھیں گے جو تعاملات کو بدیہی محسوس کرتے ہیں۔
اس سبق کے اختتام تک، AI انٹیگریشن ایک پراسرار عمل کی طرح کم اور ایک اور API کی طرح محسوس ہوگا جس کے ساتھ آپ کام کر سکتے ہیں۔ آپ ان بنیادی پیٹرنز کو سمجھیں گے جو ChatGPT اور Claude جیسے ایپلیکیشنز کو طاقت دیتے ہیں، وہی ویب ڈویلپمنٹ اصولوں کا استعمال کرتے ہوئے جو آپ سیکھ رہے ہیں۔
## ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں؟
**مصروف ڈویلپرز کے لیے فوری آغاز کا راستہ**
```mermaid
flowchart LR
A[⚡ 5 minutes] --> B[Get GitHub token]
B --> C[Test AI playground]
C --> D[Copy Python code]
D --> E[See AI responses]
```
- **پہلا منٹ**: [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) پر جائیں اور ایک ذاتی رسائی ٹوکن بنائیں
- **دوسرا منٹ**: AI تعاملات کو براہ راست پلے گراؤنڈ انٹرفیس میں آزمائیں
- **تیسرا منٹ**: "کوڈ" ٹیب پر کلک کریں اور Python کا اسنیپٹ کاپی کریں
- **چوتھا منٹ**: اپنے ٹوکن کے ساتھ کوڈ کو مقامی طور پر چلائیں: `GITHUB_TOKEN=your_token python test.py`
- **پانچواں منٹ**: دیکھیں کہ آپ کا پہلا 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 From Web Development to AI Integration
section Understanding AI Foundations
Discover generative AI concepts: 4: You
Explore GitHub Models platform: 6: You
Master AI parameters and prompts: 8: You
section Backend Integration
Build Python API server: 5: You
Implement AI function calls: 7: You
Handle async operations: 8: You
section Frontend Development
Create modern chat interface: 6: You
Master real-time interactions: 8: You
Build responsive user experience: 9: You
section Professional Application
Deploy complete AI system: 7: You
Optimize performance patterns: 8: You
Create production-ready app: 9: You
```
**آپ کے سفر کی منزل**: اس سبق کے اختتام تک، آپ نے ایک مکمل AI سے چلنے والی ایپلیکیشن بنائی ہوگی جو جدید AI اسسٹنٹس جیسے ChatGPT، Claude، اور Google Bard کو طاقت دینے والی وہی ٹیکنالوجیز اور پیٹرنز استعمال کرتی ہے۔
## AI کو سمجھنا: پراسرار سے مہارت تک
کوڈ میں غوطہ لگانے سے پہلے، آئیے سمجھتے ہیں کہ ہم کس کے ساتھ کام کر رہے ہیں۔ اگر آپ نے پہلے APIs استعمال کیے ہیں، تو آپ بنیادی پیٹرن کو جانتے ہیں: درخواست بھیجیں، جواب وصول کریں۔
AI APIs ایک جیسا ڈھانچہ رکھتے ہیں، لیکن ڈیٹا بیس سے پہلے سے ذخیرہ شدہ ڈیٹا کو بازیافت کرنے کے بجائے، وہ نئے جوابات پیدا کرتے ہیں جو وسیع مقدار میں متن سے سیکھے گئے پیٹرنز پر مبنی ہوتے ہیں۔ اسے اس فرق کی طرح سمجھیں جو ایک لائبریری کیٹلاگ سسٹم اور ایک جاننے والے لائبریرین کے درمیان ہوتا ہے جو متعدد ذرائع سے معلومات کو مربوط کر سکتا ہے۔
### "Generative AI" واقعی کیا ہے؟
سوچیں کہ Rosetta Stone نے اسکالرز کو مصری ہائروگلیفس کو سمجھنے کی اجازت دی تھی، معلوم اور نامعلوم زبانوں کے درمیان پیٹرنز تلاش کرکے۔ AI ماڈلز اسی طرح کام کرتے ہیں – وہ زبان کو سمجھنے کے لیے متن کی وسیع مقدار میں پیٹرنز تلاش کرتے ہیں، پھر ان پیٹرنز کا استعمال کرتے ہوئے نئے سوالات کے لیے مناسب جوابات پیدا کرتے ہیں۔
**آئیے اسے ایک سادہ موازنہ کے ساتھ توڑتے ہیں:**
- **روایتی ڈیٹا بیس**: جیسے آپ کے پیدائشی سرٹیفکیٹ کے لیے پوچھنا – آپ کو ہر بار بالکل وہی دستاویز ملتی ہے
- **سرچ انجن**: جیسے کسی لائبریرین سے بلیوں کے بارے میں کتابیں تلاش کرنے کے لیے کہنا – وہ آپ کو دستیاب چیزیں دکھاتے ہیں
- **Generative AI**: جیسے کسی جاننے والے دوست سے بلیوں کے بارے میں پوچھنا – وہ آپ کو دلچسپ چیزیں اپنے الفاظ میں بتاتے ہیں، جو آپ جاننا چاہتے ہیں اس کے مطابق
```mermaid
graph LR
A[Your Question] --> B[AI Model]
B --> C[Pattern Recognition]
C --> D[Content Generation]
D --> E[Contextual Response]
F[Training Data Books, Articles, Web] --> B
```
### AI ماڈلز کیسے سیکھتے ہیں (سادہ ورژن)
AI ماڈلز کتابوں، مضامین، اور گفتگو پر مشتمل بڑے ڈیٹا سیٹس کے سامنے آنے کے ذریعے سیکھتے ہیں۔ اس عمل کے ذریعے، وہ درج ذیل میں پیٹرنز کی شناخت کرتے ہیں:
- تحریری مواصلات میں خیالات کیسے ترتیب دیے جاتے ہیں
- کون سے الفاظ عام طور پر ایک ساتھ ظاہر ہوتے ہیں
- گفتگو عام طور پر کیسے بہتی ہے
- رسمی اور غیر رسمی مواصلات کے درمیان سیاق و سباق کے فرق
**یہ بالکل ویسا ہی ہے جیسے آثار قدیمہ کے ماہرین قدیم زبانوں کو ڈی کوڈ کرتے ہیں**: وہ گرامر، الفاظ، اور ثقافتی سیاق و سباق کو سمجھنے کے لیے ہزاروں مثالوں کا تجزیہ کرتے ہیں، آخر کار ان سیکھے گئے پیٹرنز کا استعمال کرتے ہوئے نئے متن کی تشریح کرنے کے قابل ہو جاتے ہیں۔
### GitHub Models کیوں؟
ہم GitHub Models استعمال کر رہے ہیں ایک عملی وجہ کے لیے – یہ ہمیں انٹرپرائز لیول AI تک رسائی فراہم کرتا ہے بغیر اپنی AI انفراسٹرکچر قائم کیے (جو، یقین کریں، آپ ابھی نہیں کرنا چاہتے!)۔ اسے موسم API استعمال کرنے جیسا سمجھیں بجائے اس کے کہ آپ خود موسم کی پیش گوئی کرنے کی کوشش کریں۔
یہ بنیادی طور پر "AI-as-a-Service" ہے، اور سب سے اچھی بات؟ شروع کرنے کے لیے یہ مفت ہے، لہذا آپ تجربہ کر سکتے ہیں بغیر کسی بڑے بل کی فکر کیے۔
```mermaid
graph LR
A[Frontend Chat UI] --> B[Your Backend API]
B --> C[GitHub Models API]
C --> D[AI Model Processing]
D --> C
C --> B
B --> A
```
ہم اپنے بیک اینڈ انٹیگریشن کے لیے GitHub Models استعمال کریں گے، جو ایک ڈویلپر دوستانہ انٹرفیس کے ذریعے پیشہ ورانہ گریڈ AI صلاحیتوں تک رسائی فراہم کرتا ہے۔ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ایک ٹیسٹنگ ماحول کے طور پر کام کرتا ہے جہاں آپ مختلف AI ماڈلز کے ساتھ تجربہ کر سکتے ہیں اور ان کی صلاحیتوں کو کوڈ میں نافذ کرنے سے پہلے سمجھ سکتے ہیں۔
## 🧠 AI ایپلیکیشن ڈویلپمنٹ ایکو سسٹم
```mermaid
mindmap
root((AI Development))
Understanding AI
Generative Models
Pattern Recognition
Content Generation
Context Understanding
Response Synthesis
AI Parameters
Temperature Control
Token Limits
Top-p Filtering
System Prompts
Backend Architecture
API Integration
GitHub Models
Authentication
Request Handling
Error Management
Python Infrastructure
FastAPI Framework
Async Operations
Environment Security
CORS Configuration
Frontend Experience
Chat Interface
Real-time Updates
Message History
User Feedback
Loading States
Modern Web Tech
ES6 Classes
Async/Await
DOM Manipulation
Event Handling
Professional Patterns
Security Best Practices
Token Management
Input Validation
XSS Prevention
Error Boundaries
Production Readiness
Performance Optimization
Responsive Design
Accessibility
Testing Strategies
```
**بنیادی اصول**: AI ایپلیکیشن ڈویلپمنٹ روایتی ویب ڈویلپمنٹ کی مہارتوں کو AI سروس انٹیگریشن کے ساتھ جوڑتا ہے، ذہین ایپلیکیشنز تخلیق کرتا ہے جو صارفین کے لیے قدرتی اور جوابدہ محسوس ہوتی ہیں۔
**یہاں ہے کہ پلے گراؤنڈ کو اتنا مفید کیا بناتا ہے:**
- **مختلف AI ماڈلز آزمائیں** جیسے GPT-4o-mini، Claude، اور دیگر (سب مفت!)
- **اپنے خیالات اور پرامپٹس کو ٹیسٹ کریں** کوڈ لکھنے سے پہلے
- **اپنی پسندیدہ پروگرامنگ زبان میں تیار کوڈ اسنیپٹس حاصل کریں**
- **تخلیقی سطح اور جواب کی لمبائی جیسی ترتیبات کو ایڈجسٹ کریں** تاکہ دیکھ سکیں کہ وہ آؤٹ پٹ کو کیسے متاثر کرتے ہیں
جب آپ تھوڑا سا کھیل چکے ہوں، تو بس "کوڈ" ٹیب پر کلک کریں اور اپنی پروگرامنگ زبان منتخب کریں تاکہ آپ کو وہ نفاذی کوڈ ملے جس کی آپ کو ضرورت ہے۔
## Python بیک اینڈ انٹیگریشن سیٹ اپ کرنا
اب آئیے Python کا استعمال کرتے ہوئے AI انٹیگریشن نافذ کریں۔ AI ایپلیکیشنز کے لیے Python بہترین ہے کیونکہ اس کی سادہ نحو اور طاقتور لائبریریاں ہیں۔ ہم GitHub Models پلے گراؤنڈ سے کوڈ کے ساتھ شروع کریں گے اور پھر اسے ایک قابل استعمال، پروڈکشن ریڈی فنکشن میں ریفیکٹر کریں گے۔
### بنیادی نفاذ کو سمجھنا
جب آپ پلے گراؤنڈ سے Python کوڈ حاصل کرتے ہیں، تو آپ کو کچھ ایسا ملے گا۔ اگر یہ پہلے تو بہت زیادہ لگے، تو فکر نہ کریں – آئیے اسے ٹکڑوں میں سمجھتے ہیں:
```python
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
```
**اس کوڈ میں کیا ہو رہا ہے:**
- **ہم وہ ٹولز درآمد کرتے ہیں جن کی ہمیں ضرورت ہے**: `os` ماحول متغیرات کو پڑھنے کے لیے اور `OpenAI` AI سے بات کرنے کے لیے
- **ہم OpenAI کلائنٹ کو سیٹ اپ کرتے ہیں** تاکہ GitHub کے AI سرورز کی طرف اشارہ کریں بجائے OpenAI کے براہ راست
- **ہم ایک خاص 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 کا جواب (آپ یہ نہیں بھیجتے، لیکن یہ گفتگو کی تاریخ میں ظاہر ہوتا ہے)
**حقیقی دنیا کی مثال**: تصور کریں کہ آپ کسی دوست کو پارٹی میں کسی سے متعارف کروا رہے ہیں:
- **سسٹم پیغام**: "یہ میری دوست سارہ ہے، وہ ایک ڈاکٹر ہے جو طبی تصورات کو آسان الفاظ میں سمجھانے میں ماہر ہے"
- **صارف پیغام**: "کیا آپ وضاحت کر سکتی ہیں کہ ویکسین کیسے کام کرتی ہیں؟"
- **اسسٹنٹ جواب**: سارہ ایک دوستانہ ڈاکٹر کے طور پر جواب دیتی ہے، نہ کہ ایک وکیل یا شیف کے طور پر
### AI پیرامیٹرز کو سمجھنا: جواب کے رویے کو بہتر بنانا
AI API کالز میں عددی پیرامیٹرز ماڈل کے جوابات پیدا کرنے کے طریقے کو کنٹرول کرتے ہیں۔ یہ ترتیبات آپ کو مختلف استعمال کے معاملات کے لیے AI کے رویے کو ایڈجسٹ کرنے کی اجازت دیتی ہیں:
#### Temperature (0.0 سے 2.0): تخلیقی صلاحیت کا ڈائل
**یہ کیا کرتا ہے**: کنٹرول کرتا ہے کہ AI کے جوابات کتنے تخلیقی یا پیش گوئی کے قابل ہوں گے۔
**اسے جاز موسیقار کے ارتجاعی سطح کی طرح سمجھیں:**
- **Temperature = 0.1**: ہر بار بالکل وہی دھن بجانا (بہت پیش گوئی کے قابل)
- **Temperature = 0.7**: کچھ ذائقہ دار تغیرات شامل کرنا جبکہ قابل شناخت رہنا (متوازن تخلیقی صلاحیت)
- **Temperature = 1.5**: مکمل تجرباتی جاز غیر متوقع موڑ کے ساتھ (بہت غیر متوقع)
```python
# Very predictable responses (good for factual questions)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Will almost always say "4"
)
# Creative responses (good for brainstorming)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Will generate unique, unexpected stories
)
```
#### Max Tokens (1 سے 4096+): جواب کی لمبائی کا کنٹرولر
**یہ کیا کرتا ہے**: AI کے جواب کی لمبائی پر حد مقرر کرتا ہے۔
**ٹوکنز کو الفاظ کے برابر سمجھیں** (انگریزی میں تقریباً 1 ٹوکن = 0.75 الفاظ):
- **max_tokens=50**: مختصر اور میٹھا (جیسے ایک ٹیکسٹ میسج)
- **max_tokens=500**: ایک اچھا پیراگراف یا دو
- **max_tokens=2000**: مثالوں کے ساتھ تفصیلی وضاحت
```python
# Short, concise answers
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Forces a brief explanation
)
# Detailed, comprehensive answers
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Allows for detailed explanations with examples
)
```
#### Top_p (0.0 سے 1.0): فوکس پیرامیٹر
**یہ کیا کرتا ہے**: کنٹرول کرتا ہے کہ AI سب سے زیادہ ممکنہ جوابات پر کتنا مرکوز رہتا ہے۔
**تصور کریں کہ AI کے پاس ایک بہت بڑا ذخیرہ الفاظ ہے، ہر لفظ کی درجہ بندی کے ساتھ کہ ہر لفظ کتنا ممکن ہے:**
- **top_p=0.1**: صرف سب سے زیادہ ممکنہ 10% الفاظ پر غور کرتا ہے (بہت مرکوز)
- **top_p=0.9**: ممکنہ الفاظ کے 90% پر غور کرتا ہے (زیادہ تخلیقی)
- **top_p=1.0**: ہر چیز پر غور کرتا ہے (زیادہ سے زیادہ تنوع)
**مثال کے طور پر**: اگر آپ پوچھیں "آسمان عام طور پر..."
- **کم top_p**: تقریباً یقینی طور پر کہے گا "نیلا"
- **زیادہ top_p**: کہہ سکتا ہے "نیلا"، "بادلوں سے بھرا ہوا"، "وسیع"، "بدلتا ہوا"، "خوبصورت"، وغیرہ۔
### سب کچھ ایک ساتھ رکھنا: مختلف استعمال کے معاملات کے لیے پیرامیٹر امتزاج
```python
# For factual, consistent answers (like a documentation bot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# For creative writing assistance
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# For conversational, helpful responses (balanced)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
```
```mermaid
quadrantChart
title AI Parameter Optimization Matrix
x-axis Low Creativity --> High Creativity
y-axis Short Response --> Long Response
quadrant-1 Creative Content
quadrant-2 Detailed Analysis
quadrant-3 Quick Facts
quadrant-4 Conversational AI
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
```
**یہ پیرامیٹرز کیوں اہم ہیں سمجھنا**: مختلف ایپلیکیشنز کو مختلف قسم کے جوابات کی ضرورت ہوتی ہے۔ ایک کسٹمر سروس بوٹ کو مستقل اور حقیقت پسندانہ ہونا چاہیے (کم Temperature)، جبکہ ایک تخلیقی تحریری اسسٹنٹ کو تخیلاتی اور متنوع ہونا چاہیے (زیادہ Temperature)۔ ان پیرامیٹرز کو سمجھنا آپ کو اپنے 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 کے لیے طریقہ اداکاری کی طرح ہے**:
**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 ایپلیکیشن ڈیولپمنٹ میں ایک بنیادی مہارت ہے۔
**جلدی خود تشخیص**:
- کیا آپ وضاحت کر سکتے ہیں کہ سسٹم پرامپٹس عام صارف پیغامات سے کیسے مختلف ہیں؟
- temperature اور top_p پیرامیٹرز میں کیا فرق ہے؟
- آپ کسی خاص استعمال کے لیے (جیسے کوڈنگ ٹیوٹر) سسٹم پرامپٹ کیسے بنائیں گے؟
**حقیقی دنیا کا تعلق**: سسٹم پرامپٹ تکنیکیں جو آپ نے سیکھی ہیں ہر بڑی AI ایپلیکیشن میں استعمال ہوتی ہیں - GitHub Copilot کی کوڈنگ مدد سے لے کر ChatGPT کی گفتگو انٹرفیس تک۔ آپ وہی پیٹرنز سیکھ رہے ہیں جو بڑے ٹیک کمپنیوں کی AI پروڈکٹ ٹیمیں استعمال کرتی ہیں۔
**چیلنج سوال**: آپ مختلف صارف اقسام (ابتدائی بمقابلہ ماہر) کے لیے مختلف AI شخصیات کیسے ڈیزائن کریں گے؟ غور کریں کہ ایک ہی بنیادی AI ماڈل پرامپٹ انجینئرنگ کے ذریعے مختلف سامعین کی خدمت کیسے کر سکتا ہے۔
## FastAPI کے ساتھ ویب API بنانا: آپ کا اعلیٰ کارکردگی AI مواصلاتی مرکز
اب ہم وہ بیک اینڈ بنائیں گے جو آپ کے فرنٹ اینڈ کو AI سروسز سے جوڑتا ہے۔ ہم FastAPI استعمال کریں گے، ایک جدید Python فریم ورک جو AI ایپلیکیشنز کے لیے APIs بنانے میں بہترین ہے۔
FastAPI اس قسم کے پروجیکٹ کے لیے کئی فوائد پیش کرتا ہے: ہم وقتی درخواستوں کو سنبھالنے کے لیے بلٹ ان async سپورٹ، خودکار API دستاویزات کی تخلیق، اور بہترین کارکردگی۔ آپ کا FastAPI سرور ایک درمیانی کردار ادا کرتا ہے جو فرنٹ اینڈ سے درخواستیں وصول کرتا ہے، AI سروسز سے بات چیت کرتا ہے، اور فارمیٹ شدہ جوابات واپس کرتا ہے۔
### AI ایپلیکیشنز کے لیے FastAPI کیوں؟
آپ سوچ سکتے ہیں: "کیا میں AI کو براہ راست اپنے فرنٹ اینڈ جاوا اسکرپٹ سے کال نہیں کر سکتا؟" یا "Flask یا Django کے بجائے FastAPI کیوں؟" زبردست سوالات!
**یہاں وجہ ہے کہ FastAPI ہمارے منصوبے کے لیے بہترین ہے:**
- **ڈیفالٹ async**: ایک ساتھ کئی AI درخواستوں کو سنبھال سکتا ہے بغیر پھنسے
- **خودکار دستاویزات**: `/docs` پر جائیں اور مفت میں ایک خوبصورت، انٹرایکٹو API دستاویزات کا صفحہ حاصل کریں
- **بلٹ ان توثیق**: مسائل پیدا ہونے سے پہلے غلطیوں کو پکڑتا ہے
- **بہت تیز**: Python کے سب سے تیز فریم ورک میں سے ایک
- **جدید Python**: Python کی تمام جدید خصوصیات استعمال کرتا ہے
**اور یہاں وجہ ہے کہ ہمیں بیک اینڈ کی ضرورت ہے:**
**سیکیورٹی**: آپ کی AI API کلید ایک پاس ورڈ کی طرح ہے – اگر آپ اسے فرنٹ اینڈ جاوا اسکرپٹ میں ڈالیں، تو کوئی بھی جو آپ کی ویب سائٹ کے سورس کوڈ کو دیکھے گا اسے چرا سکتا ہے اور آپ کے AI کریڈٹس استعمال کر سکتا ہے۔ بیک اینڈ حساس اسناد کو محفوظ رکھتا ہے۔
**ریٹ لمیٹنگ اور کنٹرول**: بیک اینڈ آپ کو کنٹرول کرنے دیتا ہے کہ صارفین کتنی بار درخواستیں کر سکتے ہیں، صارف کی توثیق نافذ کر سکتے ہیں، اور استعمال کو ٹریک کرنے کے لیے لاگنگ شامل کر سکتے ہیں۔
**ڈیٹا پروسیسنگ**: آپ گفتگو کو محفوظ کرنا، نامناسب مواد کو فلٹر کرنا، یا متعدد AI سروسز کو یکجا کرنا چاہ سکتے ہیں۔ بیک اینڈ وہ جگہ ہے جہاں یہ منطق رہتی ہے۔
**آرکیٹیکچر کلائنٹ-سرور ماڈل جیسا ہے:**
- **فرنٹ اینڈ**: تعامل کے لیے صارف انٹرفیس کی پرت
- **بیک اینڈ API**: درخواست پروسیسنگ اور روٹنگ کی پرت
- **AI سروس**: بیرونی حساب کتاب اور جواب کی تخلیق
- **ماحولیاتی متغیرات**: محفوظ ترتیب اور اسناد کا ذخیرہ
### درخواست-جواب کے بہاؤ کو سمجھنا
آئیے دیکھتے ہیں کہ جب کوئی صارف پیغام بھیجتا ہے تو کیا ہوتا ہے:
```mermaid
sequenceDiagram
participant User as 👤 User
participant Frontend as 🌐 Frontend
participant API as 🔧 FastAPI Server
participant AI as 🤖 AI Service
User->>Frontend: Types "Hello AI!"
Frontend->>API: POST /hello {"message": "Hello AI!"}
Note over API: Validates request Adds system prompt
API->>AI: Sends formatted request
AI->>API: Returns AI response
Note over API: Processes response Logs conversation
API->>Frontend: {"response": "Hello! How can I help?"}
Frontend->>User: Displays AI message
```
**ہر قدم کو سمجھنا:**
1. **صارف کا تعامل**: شخص چیٹ انٹرفیس میں ٹائپ کرتا ہے
2. **فرنٹ اینڈ پروسیسنگ**: جاوا اسکرپٹ ان پٹ کو کیپچر کرتا ہے اور اسے JSON کے طور پر فارمیٹ کرتا ہے
3. **API توثیق**: 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": "Hello AI!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: API request
GitHub Models->>AI Function: AI response
AI Function->>FastAPI: response text
FastAPI->>Frontend: {"response": "Hello! How can I help?"}
```
```mermaid
flowchart TD
A[User Input] --> B[Frontend Validation]
B --> C[HTTP POST Request]
C --> D[FastAPI Router]
D --> E[Pydantic Validation]
E --> F[AI Function Call]
F --> G[GitHub Models API]
G --> H[Response Processing]
H --> I[JSON Response]
I --> J[Frontend Update]
subgraph "Security Layer"
K[CORS Middleware]
L[Environment Variables]
M[Error Handling]
end
D --> K
F --> L
H --> M
```
### FastAPI ایپلیکیشن بنانا
آئیے اپنی API مرحلہ وار بنائیں۔ `api.py` نامی فائل بنائیں اور درج ذیل FastAPI کوڈ شامل کریں:
```python
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Create FastAPI application
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Configure CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Configure appropriately for production
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic models for request/response validation
class ChatMessage(BaseModel):
message: str
class ChatResponse(BaseModel):
response: str
@app.get("/")
async def root():
"""Root endpoint providing API information."""
return {
"message": "Welcome to the AI Chat API",
"docs": "/docs",
"health": "/health"
}
@app.get("/health")
async def health_check():
"""Health check endpoint."""
return {"status": "healthy", "service": "ai-chat-api"}
@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
"""Main chat endpoint that processes messages and returns AI responses."""
try:
# Extract and validate message
message = chat_message.message.strip()
if not message:
raise HTTPException(status_code=400, detail="Message cannot be empty")
logger.info(f"Processing message: {message[:50]}...")
# Call AI service (note: call_llm should be made async for better performance)
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
logger.info("AI response generated successfully")
return ChatResponse(response=ai_response)
except HTTPException:
raise
except Exception as e:
logger.error(f"Error processing chat message: {str(e)}")
raise HTTPException(status_code=500, detail="Internal server error")
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
```
**FastAPI کے نفاذ کو سمجھنا:**
- **درآمد کرتا ہے** FastAPI جدید ویب فریم ورک کی فعالیت کے لیے اور Pydantic ڈیٹا کی توثیق کے لیے
- **خودکار API دستاویزات تخلیق کرتا ہے** (جب سرور چلتا ہے تو `/docs` پر دستیاب ہوتا ہے)
- **CORS مڈل ویئر کو فعال کرتا ہے** تاکہ مختلف اصل سے فرنٹ اینڈ درخواستوں کی اجازت دی جا سکے
- **Pydantic ماڈلز کی وضاحت کرتا ہے** خودکار درخواست/جواب کی توثیق اور دستاویزات کے لیے
- **بہتر کارکردگی کے لیے async اینڈ پوائنٹس استعمال کرتا ہے**
- **مناسب HTTP اسٹیٹس کوڈز اور غلطی ہینڈلنگ نافذ کرتا ہے** HTTPException کے ساتھ
- **ساختی لاگنگ شامل کرتا ہے** نگرانی اور ڈیبگنگ کے لیے
- **سروس کی حیثیت کی نگرانی کے لیے ہیلتھ چیک اینڈ پوائنٹ فراہم کرتا ہے**
**روایتی فریم ورک کے مقابلے میں FastAPI کے اہم فوائد:**
- **خودکار توثیق**: Pydantic ماڈلز ڈیٹا کی سالمیت کو پروسیسنگ سے پہلے یقینی بناتے ہیں
- **انٹرایکٹو دستاویزات**: `/docs` پر جائیں خودکار طور پر تیار کردہ، قابل آزمائش API دستاویزات کے لیے
- **ٹائپ سیفٹی**: Python ٹائپ ہنٹس رن ٹائم کی غلطیوں کو روکتے ہیں اور کوڈ کے معیار کو بہتر بناتے ہیں
- **async سپورٹ**: ایک ساتھ متعدد AI درخواستوں کو بلاک کیے بغیر سنبھالتا ہے
- **کارکردگی**: حقیقی وقت کی ایپلیکیشنز کے لیے درخواست پروسیسنگ نمایاں طور پر تیز
### CORS کو سمجھنا: ویب کا سیکیورٹی گارڈ
CORS (Cross-Origin Resource Sharing) ایک سیکیورٹی گارڈ کی طرح ہے جو چیک کرتا ہے کہ آیا زائرین کو داخل ہونے کی اجازت ہے۔ آئیے سمجھتے ہیں کہ یہ کیوں اہم ہے اور یہ آپ کی ایپلیکیشن کو کیسے متاثر کرتا ہے۔
#### CORS کیا ہے اور یہ کیوں موجود ہے؟
**مسئلہ**: تصور کریں کہ اگر کوئی بھی ویب سائٹ آپ کی اجازت کے بغیر آپ کے بینک کی ویب سائٹ پر درخواستیں کر سکتی۔ یہ ایک سیکیورٹی ڈراؤنا خواب ہوگا! براؤزرز اسے "Same-Origin Policy" کے ذریعے ڈیفالٹ سے روکتے ہیں۔
**Same-Origin Policy**: براؤزرز صرف ویب صفحات کو اسی ڈومین، پورٹ، اور پروٹوکول سے درخواستیں کرنے کی اجازت دیتے ہیں جس سے وہ لوڈ کیے گئے تھے۔
**حقیقی دنیا کی مثال**: یہ اپارٹمنٹ بلڈنگ کی سیکیورٹی کی طرح ہے – صرف رہائشی (ایک ہی اصل) کو ڈیفالٹ سے عمارت تک رسائی حاصل ہے۔ اگر آپ کسی دوست (مختلف اصل) کو مدعو کرنا چاہتے ہیں، تو آپ کو سیکیورٹی کو واضح طور پر بتانا ہوگا کہ یہ ٹھیک ہے۔
#### آپ کے ترقیاتی ماحول میں CORS
ترقی کے دوران، آپ کا فرنٹ اینڈ اور بیک اینڈ مختلف پورٹس پر چلتا ہے:
- فرنٹ اینڈ: `http://localhost:3000` (یا file:// اگر HTML کو براہ راست کھول رہے ہیں)
- بیک اینڈ: `http://localhost:5000`
یہ "مختلف اصل" سمجھے جاتے ہیں حالانکہ وہ ایک ہی کمپیوٹر پر ہیں!
```python
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # This tells browsers: "It's okay for other origins to make requests to this API"
```
**عملی طور پر CORS کنفیگریشن کیا کرتا ہے:**
- **خاص HTTP ہیڈرز شامل کرتا ہے** API جوابات میں جو براؤزرز کو بتاتے ہیں "یہ کراس-اورجن درخواست کی اجازت ہے"
- **"پری فلائٹ" درخواستوں کو ہینڈل کرتا ہے** (براؤزرز کبھی کبھار اصل درخواست بھیجنے سے پہلے اجازت چیک کرتے ہیں)
- **براؤزر کنسول میں "CORS پالیسی کے ذریعے بلاک کیا گیا" کی خرابی کو روکتا ہے**
#### CORS سیکیورٹی: ترقی بمقابلہ پروڈکشن
```python
# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)
# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Advanced: Different origins for different environments
if app.debug: # Development mode
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Production mode
CORS(app, origins=["https://yourdomain.com"])
```
**یہ کیوں اہم ہے**: ترقی میں، `CORS(app)` آپ کے سامنے کا دروازہ کھلا چھوڑنے جیسا ہے – آسان لیکن غیر محفوظ۔ پروڈکشن میں، آپ بالکل وضاحت کرنا چاہتے ہیں کہ کون سی ویب سائٹس آپ کی API سے بات کر سکتی ہیں۔
#### عام CORS منظرنامے اور حل
| منظرنامہ | مسئلہ | حل |
|----------|---------|----------|
| **مقامی ترقی** | فرنٹ اینڈ بیک اینڈ تک نہیں پہنچ سکتا | FastAPI میں CORSMiddleware شامل کریں |
| **GitHub Pages + Heroku** | تعینات فرنٹ اینڈ API تک نہیں پہنچ سکتا | اپنے GitHub Pages URL کو CORS اصل میں شامل کریں |
| **حسب ضرورت ڈومین** | پروڈکشن میں CORS کی غلطیاں | CORS اصل کو اپنے ڈومین سے ملانے کے لیے اپ ڈیٹ کریں |
| **موبائل ایپ** | ایپ ویب API تک نہیں پہنچ سکتی | اپنی ایپ کے ڈومین کو شامل کریں یا احتیاط سے `*` استعمال کریں |
**پرو ٹپ**: آپ اپنے براؤزر کے Developer Tools میں نیٹ ورک ٹیب کے تحت CORS ہیڈرز چیک کر سکتے ہیں۔ جواب میں `Access-Control-Allow-Origin` جیسے ہیڈرز تلاش کریں۔
### غلطی ہینڈلنگ اور توثیق
نوٹ کریں کہ ہماری API میں مناسب غلطی ہینڈلنگ شامل ہے:
```python
# Validate that we received a message
if not message:
return jsonify({"error": "Message field is required"}), 400
```
**اہم توثیق کے اصول:**
- **ضروری فیلڈز کی جانچ کرتا ہے** درخواستوں کو پروسیس کرنے سے پہلے
- **معنی خیز غلطی کے پیغامات واپس کرتا ہے** JSON فارمیٹ میں
- **مناسب HTTP اسٹیٹس کوڈز استعمال کرتا ہے** (خراب درخواستوں کے لیے 400)
- **واضح فیڈبیک فراہم کرتا ہے** فرنٹ اینڈ ڈیولپرز کو مسائل کو ڈیبگ کرنے میں مدد کرنے کے لیے
## اپنا بیک اینڈ سیٹ اپ اور چلانا
اب جب کہ ہمارے پاس AI انضمام اور FastAPI سرور تیار ہے، آئیے سب کچھ چلائیں۔ سیٹ اپ کے عمل میں Python کی ضروریات انسٹال کرنا، ماحولیاتی متغیرات کو ترتیب دینا، اور اپنا ترقیاتی سرور شروع کرنا شامل ہے۔
### Python ماحول سیٹ اپ
آئیے آپ کا Python ترقیاتی ماحول سیٹ کریں۔ ورچوئل ماحول مین ہٹن پروجیکٹ کے کمپارٹمنٹلائزڈ اپروچ کی طرح ہیں – ہر پروجیکٹ کو اپنے مخصوص ٹولز اور ضروریات کے ساتھ اپنا الگ تھلگ جگہ ملتا ہے، مختلف پروجیکٹس کے درمیان تنازعات کو روکنے کے لیے۔
```bash
# Navigate to your backend directory
cd backend
# Create a virtual environment (like creating a clean room for your project)
python -m venv venv
# Activate it (Linux/Mac)
source ./venv/bin/activate
# On Windows, use:
# venv\Scripts\activate
# Install the good stuff
pip install openai fastapi uvicorn python-dotenv
```
**ہم نے ابھی کیا کیا:**
- **اپنا Python کا چھوٹا سا بلبلہ بنایا** جہاں ہم پیکجز انسٹال کر سکتے ہیں بغیر کسی اور چیز کو متاثر کیے
- **اسے فعال کیا** تاکہ ہمارا ٹرمینل جان سکے کہ اس مخصوص ماحول کو استعمال کرنا ہے
- **ضروریات انسٹال کیں**: OpenAI AI جادو کے لیے، FastAPI ہمارے ویب API کے لیے، Uvicorn اسے چلانے کے لیے، اور python-dotenv محفوظ رازوں کے انتظام کے لیے
**اہم ضروریات کی وضاحت:**
- **FastAPI**: جدید، تیز ویب فریم ورک خودکار API دستاویزات کے ساتھ
- **Uvicorn**: تیز ترین ASGI سرور جو FastAPI ایپلیکیشنز چلاتا ہے
- **OpenAI**: GitHub ماڈلز اور OpenAI API انضمام کے لیے آفیشل لائبریری
- **python-dotenv**: .env فائلوں سے محفوظ ماحولیاتی متغیرات لوڈ کرنا
### ماحولیاتی ترتیب: رازوں کو محفوظ رکھنا
اس سے پہلے کہ ہم اپنی API شروع کریں، ہمیں ویب ڈیولپمنٹ میں سب سے اہم سبق کے بارے میں بات کرنی ہوگی: اپنے رازوں کو واقعی خفیہ رکھنے کا طریقہ۔ ماحولیاتی متغیرات ایک محفوظ والٹ کی طرح ہیں جسے صرف آپ کی ایپلیکیشن تک رسائی حاصل ہے۔
#### ماحولیاتی متغیرات کیا ہیں؟
**ماحولیاتی متغیرات کو ایک محفوظ ڈپازٹ باکس کی طرح سمجھیں** – آپ اپنی قیمتی چیزیں وہاں رکھتے ہیں، اور صرف آپ (اور آپ کی ایپ) کے پاس اسے نکالنے کی چابی ہوتی ہے۔ حساس معلومات کو براہ راست اپنے کوڈ میں لکھنے کے بجائے (جہاں کوئی بھی اسے دیکھ سکتا ہے)، آپ اسے محفوظ طریقے سے ماحول میں ذخیرہ کرتے ہیں۔
**یہاں فرق ہے:**
- **غلط طریقہ**: اپنا پاس ورڈ ایک چپچپا نوٹ پر لکھ کر اپنے مانیٹر پر رکھنا
- **صحیح طریقہ**: اپنا پاس ورڈ ایک محفوظ پاس ورڈ مینیجر میں رکھنا جس تک صرف آپ کو رسائی حاصل ہو
#### ماحولیاتی متغیرات کیوں اہم ہیں
```python
# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Anyone can steal this!
base_url="https://models.github.ai/inference"
)
# ✅ DO THIS - API key stored securely
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Only your app can access this
base_url="https://models.github.ai/inference"
)
```
**جب آپ رازوں کو ہارڈ کوڈ کرتے ہیں تو کیا ہوتا ہے:**
1. **ورژن کنٹرول کی نمائش**: آپ کے Git ریپوزیٹری تک رسائی رکھنے والا کوئی بھی آپ کی API کلید دیکھتا ہے
2. **عوامی ریپوزیٹریز**: اگر آپ GitHub پر اپ لوڈ کرتے ہیں، تو آپ کی کلید پورے انٹرنیٹ کے لیے نظر آتی ہے
3. **ٹیم شیئرنگ**: آپ کے پروجیکٹ پر کام کرنے والے دوسرے ڈیولپرز کو آپ کی ذاتی API کلید تک رسائی حاصل ہوتی ہے
4. **سیکیورٹی کی خلاف ورزیاں**: اگر کوئی آپ کی API کلید چوری کرتا ہے، تو وہ آپ کے AI کریڈٹس استعمال کر سکتا ہے
#### آپ کی ماحولیاتی فائل ترتیب دینا
اپنے بیک اینڈ ڈائریکٹری میں `.env` فائل بنائیں۔ یہ فائل آپ کے رازوں کو مقامی طور پر ذخیرہ کرتی ہے:
```bash
# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
```
**.env فائل کو سمجھنا:**
- **ایک لائن میں ایک راز** `KEY=value` فارمیٹ میں
- **برابر کے نشان کے ارد گرد کوئی جگہ نہیں**
- **عام طور پر اقتباسات کی ضرورت نہیں**
- **تبصرے** `#` سے شروع ہوتے ہیں
#### اپنا GitHub پرسنل ایکسیس ٹوکن بنانا
آپ کا GitHub ٹوکن ایک خاص پاس ورڈ کی طرح ہے جو آپ کی ایپلیکیشن کو GitHub کی AI سروسز استعمال کرنے کی اجازت دیتا ہے:
**ٹوکن تخلیق کا مرحلہ وار عمل:**
1. **GitHub سیٹنگز پر جائیں** →
اب آتا ہے وہ دلچسپ لمحہ – اپنا FastAPI ڈیولپمنٹ سرور شروع کریں اور اپنی AI انٹیگریشن کو زندہ دیکھیں! FastAPI Uvicorn استعمال کرتا ہے، ایک تیز رفتار ASGI سرور جو خاص طور پر async Python ایپلیکیشنز کے لیے ڈیزائن کیا گیا ہے۔
#### FastAPI سرور اسٹارٹ اپ پروسیس کو سمجھنا
```bash
# Method 1: Direct Python execution (includes auto-reload)
python api.py
# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
```
جب آپ یہ کمانڈ چلاتے ہیں، تو پردے کے پیچھے یہ ہوتا ہے:
**1. Python آپ کی FastAPI ایپلیکیشن کو لوڈ کرتا ہے**:
- تمام ضروری لائبریریاں (FastAPI، Pydantic، OpenAI وغیرہ) امپورٹ کرتا ہے
- آپ کی `.env` فائل سے ماحولیات کے متغیرات لوڈ کرتا ہے
- خودکار دستاویزات کے ساتھ FastAPI ایپلیکیشن انسٹینس بناتا ہے
**2. Uvicorn ASGI سرور کو کنفیگر کرتا ہے**:
- async درخواستوں کو ہینڈل کرنے کی صلاحیت کے ساتھ پورٹ 5000 پر بائنڈ کرتا ہے
- خودکار تصدیق کے ساتھ درخواستوں کی روٹنگ سیٹ کرتا ہے
- ڈیولپمنٹ کے لیے ہاٹ ری لوڈ کو فعال کرتا ہے (فائل میں تبدیلیوں پر دوبارہ شروع ہوتا ہے)
- انٹرایکٹو API دستاویزات تیار کرتا ہے
**3. سرور سننے کے لیے شروع ہوتا ہے**:
- آپ کے ٹرمینل میں دکھائی دیتا ہے: `INFO: Uvicorn running on http://0.0.0.0:5000`
- سرور متعدد ہم وقتی AI درخواستوں کو ہینڈل کر سکتا ہے
- آپ کا API خودکار دستاویزات کے ساتھ `http://localhost: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 آؤٹ پٹ کو سمجھنا**:
- **تبدیلیوں کے لیے دیکھے گا**: ڈیولپمنٹ کے لیے آٹو ری لوڈ فعال ہے
- **Uvicorn چل رہا ہے**: اعلی کارکردگی والا ASGI سرور فعال ہے
- **ری لوڈر پروسیس شروع ہوا**: فائل واچر خودکار ری اسٹارٹس کے لیے
- **ایپلیکیشن اسٹارٹ اپ مکمل**: FastAPI ایپ کامیابی سے انیشیلائز ہو گئی
- **انٹرایکٹو دستاویزات دستیاب ہیں**: خودکار 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
# Test with curl (if available)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Expected response:
# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
```
**طریقہ 3: Python ٹیسٹ اسکرپٹ**
```python
# test_api.py - Create this file to test your API
import requests
import json
# Test the API endpoint
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}
response = requests.post(url, json=data)
if response.status_code == 200:
result = response.json()
print("AI Response:", result['response'])
else:
print("Error:", response.status_code, response.text)
```
#### عام اسٹارٹ اپ مسائل کا حل
| ایرر میسج | اس کا مطلب | حل |
|-----------|------------|-----|
| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI انسٹال نہیں ہے | اپنی ورچوئل ماحول میں `pip install fastapi uvicorn` چلائیں |
| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI سرور انسٹال نہیں ہے | اپنی ورچوئل ماحول میں `pip install uvicorn` چلائیں |
| `KeyError: 'GITHUB_TOKEN'` | ماحولیات کا متغیر نہیں ملا | اپنی `.env` فائل اور `load_dotenv()` کال چیک کریں |
| `Address already in use` | پورٹ 5000 مصروف ہے | دیگر پروسیسز کو ختم کریں جو پورٹ 5000 استعمال کر رہے ہیں یا پورٹ تبدیل کریں |
| `ValidationError` | درخواست کا ڈیٹا Pydantic ماڈل سے میل نہیں کھاتا | اپنی درخواست کا فارمیٹ چیک کریں کہ متوقع اسکیمہ سے میل کھاتا ہے |
| `HTTPException 422` | ناقابل عمل ادارہ | درخواست کی تصدیق ناکام ہوئی، `/docs` پر صحیح فارمیٹ چیک کریں |
| `OpenAI API error` | AI سروس کی تصدیق ناکام ہوئی | اپنے GitHub ٹوکن کی تصدیق کریں کہ یہ درست ہے اور مناسب اجازتیں رکھتا ہے |
#### ڈیولپمنٹ کے بہترین طریقے
**ہاٹ ری لوڈنگ**: FastAPI Uvicorn کے ساتھ خودکار ری لوڈنگ فراہم کرتا ہے جب آپ اپنی Python فائلز میں تبدیلیاں محفوظ کرتے ہیں۔ اس کا مطلب ہے کہ آپ کوڈ میں ترمیم کر سکتے ہیں اور فوری طور پر جانچ سکتے ہیں بغیر دستی طور پر دوبارہ شروع کیے۔
```python
# Enable hot reloading explicitly
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True enables hot reload
```
**ڈیولپمنٹ کے لیے لاگنگ**: لاگنگ شامل کریں تاکہ معلوم ہو سکے کہ کیا ہو رہا ہے:
```python
import logging
# Set up logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
@app.route("/hello", methods=["POST"])
def hello():
data = request.get_json()
message = data.get("message", "")
logger.info(f"Received message: {message}")
if not message:
logger.warning("Empty message received")
return jsonify({"error": "Message field is required"}), 400
try:
response = call_llm(message, "You are a helpful and friendly assistant.")
logger.info(f"AI response generated successfully")
return jsonify({"response": response})
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return jsonify({"error": "AI service temporarily unavailable"}), 500
```
**کیوں لاگنگ مددگار ہے**: ڈیولپمنٹ کے دوران، آپ دیکھ سکتے ہیں کہ کون سی درخواستیں آ رہی ہیں، AI کیا جواب دے رہا ہے، اور کہاں غلطیاں ہو رہی ہیں۔ یہ ڈیبگنگ کو بہت تیز بناتا ہے۔
### GitHub Codespaces کے لیے کنفیگر کرنا: کلاؤڈ ڈیولپمنٹ کو آسان بنانا
GitHub Codespaces ایسا ہے جیسے آپ کے پاس کلاؤڈ میں ایک طاقتور ڈیولپمنٹ کمپیوٹر ہو جسے آپ کسی بھی براؤزر سے رسائی حاصل کر سکتے ہیں۔ اگر آپ Codespaces میں کام کر رہے ہیں، تو اپنے بیک اینڈ کو فرنٹ اینڈ کے لیے قابل رسائی بنانے کے لیے کچھ اضافی اقدامات کرنے ہوں گے۔
#### Codespaces نیٹ ورکنگ کو سمجھنا
ایک مقامی ڈیولپمنٹ ماحول میں، سب کچھ ایک ہی کمپیوٹر پر چلتا ہے:
- بیک اینڈ: `http://localhost:5000`
- فرنٹ اینڈ: `http://localhost:3000` (یا file://)
Codespaces میں، آپ کا ڈیولپمنٹ ماحول GitHub کے سرورز پر چلتا ہے، لہذا "localhost" کا مطلب مختلف ہوتا ہے۔ GitHub خودکار طور پر آپ کی سروسز کے لیے عوامی URLs بناتا ہے، لیکن آپ کو انہیں صحیح طریقے سے کنفیگر کرنا ہوگا۔
#### Codespaces کنفیگریشن کے مرحلہ وار اقدامات
**1. اپنا بیک اینڈ سرور شروع کریں**:
```bash
cd backend
python api.py
```
آپ کو مانوس FastAPI/Uvicorn اسٹارٹ اپ میسج نظر آئے گا، لیکن نوٹ کریں کہ یہ Codespace ماحول کے اندر چل رہا ہے۔
**2. پورٹ کی مرئیت کو کنفیگر کریں**:
- VS Code کے نیچے والے پینل میں "Ports" ٹیب دیکھیں
- فہرست میں پورٹ 5000 تلاش کریں
- پورٹ 5000 پر دائیں کلک کریں
- "Port Visibility" → "Public" منتخب کریں
**کیوں اسے عوامی بنائیں؟** ڈیفالٹ کے طور پر، Codespace پورٹس نجی ہوتی ہیں (صرف آپ کے لیے قابل رسائی)۔ اسے عوامی بنانے سے آپ کے فرنٹ اینڈ (جو براؤزر میں چلتا ہے) کو آپ کے بیک اینڈ کے ساتھ بات چیت کرنے کی اجازت ملتی ہے۔
**3. اپنا عوامی URL حاصل کریں**:
پورٹ کو عوامی بنانے کے بعد، آپ کو ایک URL نظر آئے گا:
```
https://your-codespace-name-5000.app.github.dev
```
**4. اپنے فرنٹ اینڈ کنفیگریشن کو اپ ڈیٹ کریں**:
```javascript
// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
```
#### Codespace URLs کو سمجھنا
Codespace URLs ایک متوقع پیٹرن کی پیروی کرتے ہیں:
```
https://[codespace-name]-[port].app.github.dev
```
**اسے توڑ کر دیکھیں**:
- `codespace-name`: آپ کے Codespace کے لیے ایک منفرد شناخت کنندہ (عام طور پر آپ کے یوزر نیم کو شامل کرتا ہے)
- `port`: وہ پورٹ نمبر جس پر آپ کی سروس چل رہی ہے (ہمارے FastAPI ایپ کے لیے 5000)
- `app.github.dev`: Codespace ایپلیکیشنز کے لیے GitHub کا ڈومین
#### اپنے Codespace سیٹ اپ کی جانچ
**1. بیک اینڈ کو براہ راست جانچیں**:
اپنے عوامی URL کو ایک نئے براؤزر ٹیب میں کھولیں۔ آپ کو یہ دیکھنا چاہیے:
```
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
```
**2. براؤزر ڈیولپر ٹولز کے ساتھ جانچ کریں**:
```javascript
// Open browser console and test your API
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));
```
#### Codespaces بمقابلہ مقامی ڈیولپمنٹ
| پہلو | مقامی ڈیولپمنٹ | GitHub Codespaces |
|------|----------------|-------------------|
| **سیٹ اپ کا وقت** | زیادہ (Python، ڈیپینڈنسیز انسٹال کریں) | فوری (پری کنفیگرڈ ماحول) |
| **URL رسائی** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
| **پورٹ کنفیگریشن** | خودکار | دستی (پورٹس کو عوامی بنائیں) |
| **فائل کی مستقل مزاجی** | مقامی مشین | GitHub ریپوزیٹری |
| **تعاون** | ماحول کو شیئر کرنا مشکل | Codespace لنک شیئر کرنا آسان |
| **انٹرنیٹ انحصار** | صرف AI API کالز کے لیے | ہر چیز کے لیے ضروری |
#### Codespace ڈیولپمنٹ کے نکات
**Codespaces میں ماحولیات کے متغیرات**:
آپ کی `.env` فائل Codespaces میں اسی طرح کام کرتی ہے، لیکن آپ Codespace میں ماحولیات کے متغیرات براہ راست سیٹ کر سکتے ہیں:
```bash
# Set environment variable for the current session
export GITHUB_TOKEN="your_token_here"
# Or add to your .bashrc for persistence
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
```
**پورٹ مینجمنٹ**:
- Codespaces خودکار طور پر پتہ لگاتا ہے جب آپ کی ایپلیکیشن کسی پورٹ پر سننا شروع کرتی ہے
- آپ بیک وقت متعدد پورٹس فارورڈ کر سکتے ہیں (اگر آپ بعد میں ڈیٹا بیس شامل کریں)
- پورٹس اس وقت تک قابل رسائی رہتی ہیں جب تک آپ کا Codespace چل رہا ہے
**ڈیولپمنٹ ورک فلو**:
1. VS Code میں کوڈ میں تبدیلی کریں
2. FastAPI خودکار طور پر ری لوڈ ہوتا ہے (Uvicorn کے ری لوڈ موڈ کی بدولت)
3. عوامی URL کے ذریعے فوری طور پر تبدیلیوں کی جانچ کریں
4. جب تیار ہو تو کمیٹ اور پش کریں
> 💡 **پرو ٹپ**: ڈیولپمنٹ کے دوران اپنے Codespace بیک اینڈ URL کو بک مارک کریں۔ چونکہ Codespace نام مستحکم ہیں، URL اس وقت تک نہیں بدلے گا جب تک آپ ایک ہی Codespace استعمال کر رہے ہیں۔
## فرنٹ اینڈ چیٹ انٹرفیس بنانا: جہاں انسان AI سے ملتے ہیں
اب ہم یوزر انٹرفیس بنائیں گے – وہ حصہ جو یہ طے کرتا ہے کہ لوگ آپ کے AI اسسٹنٹ کے ساتھ کیسے بات چیت کرتے ہیں۔ جیسے اصل آئی فون کے انٹرفیس کے ڈیزائن میں، ہم پیچیدہ ٹیکنالوجی کو استعمال میں آسان اور قدرتی بنانے پر توجہ دے رہے ہیں۔
### جدید فرنٹ اینڈ آرکیٹیکچر کو سمجھنا
ہمارا چیٹ انٹرفیس وہ ہوگا جسے ہم "سنگل پیج ایپلیکیشن" یا SPA کہتے ہیں۔ پرانے طریقے کے بجائے جہاں ہر کلک پر ایک نیا صفحہ لوڈ ہوتا ہے، ہمارا ایپ ہموار اور فوری طور پر اپ ڈیٹ ہوتا ہے:
**پرانے ویب سائٹس**: جیسے ایک کتاب پڑھنا – آپ مکمل طور پر نئے صفحات پلٹتے ہیں
**ہمارا چیٹ ایپ**: جیسے اپنے فون کا استعمال کرنا – سب کچھ بہتا ہے اور ہموار طریقے سے اپ ڈیٹ ہوتا ہے
```mermaid
graph TD
A[User Types Message] --> B[JavaScript Captures Input]
B --> C[Validate & Format Data]
C --> D[Send to Backend API]
D --> E[Display Loading State]
E --> F[Receive AI Response]
F --> G[Update Chat Interface]
G --> H[Ready for Next Message]
```
```mermaid
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : manipulates
ChatApp --> FastAPI : sends requests
```
### فرنٹ اینڈ ڈیولپمنٹ کے تین ستون
ہر فرنٹ اینڈ ایپلیکیشن – سادہ ویب سائٹس سے لے کر پیچیدہ ایپس جیسے Discord یا Slack – تین بنیادی ٹیکنالوجیز پر مبنی ہوتی ہے۔ انہیں وہ بنیاد سمجھیں جس پر آپ ویب پر سب کچھ دیکھتے اور تعامل کرتے ہیں:
**HTML (ساخت)**: یہ آپ کی بنیاد ہے
- فیصلہ کرتا ہے کہ کون سے عناصر موجود ہیں (بٹن، ٹیکسٹ ایریاز، کنٹینرز)
- مواد کو معنی دیتا ہے (یہ ایک ہیڈر ہے، یہ ایک فارم ہے، وغیرہ)
- بنیادی ساخت بناتا ہے جس پر سب کچھ تعمیر ہوتا ہے
**CSS (پیشکش)**: یہ آپ کا اندرونی ڈیزائنر ہے
- سب کچھ خوبصورت بناتا ہے (رنگ، فونٹس، لے آؤٹ)
- مختلف اسکرین سائزز کو ہینڈل کرتا ہے (فون بمقابلہ لیپ ٹاپ بمقابلہ ٹیبلٹ)
- ہموار اینیمیشنز اور بصری تاثرات بناتا ہے
**JavaScript (رویہ)**: یہ آپ کا دماغ ہے
- صارفین کے اعمال پر ردعمل دیتا ہے (کلکس، ٹائپنگ، اسکرولنگ)
- آپ کے بیک اینڈ سے بات کرتا ہے اور صفحہ کو اپ ڈیٹ کرتا ہے
- سب کچھ انٹرایکٹو اور ڈائنامک بناتا ہے
**اسے آرکیٹیکچرل ڈیزائن کی طرح سمجھیں:**
- **HTML**: ساختی بلیو پرنٹ (جگہوں اور تعلقات کی وضاحت)
- **CSS**: جمالیاتی اور ماحولیاتی ڈیزائن (بصری انداز اور یوزر تجربہ)
- **JavaScript**: میکینیکل سسٹمز (فنکشنلٹی اور انٹرایکٹیویٹی)
### جدید JavaScript آرکیٹیکچر کیوں اہم ہے
ہمارا چیٹ ایپلیکیشن جدید JavaScript پیٹرنز استعمال کرے گا جو آپ پیشہ ورانہ ایپلیکیشنز میں دیکھیں گے۔ ان تصورات کو سمجھنا آپ کی ترقی کے ساتھ آپ کی مدد کرے گا:
**کلاس پر مبنی آرکیٹیکچر**: ہم اپنے کوڈ کو کلاسز میں منظم کریں گے، جو اشیاء کے لیے بلیو پرنٹس بنانے جیسا ہے
**Async/Await**: وقت لینے والے آپریشنز (جیسے API کالز) کو ہینڈل کرنے کا جدید طریقہ
**ایونٹ ڈرائیون پروگرامنگ**: ہمارا ایپ صارف کے اعمال (کلکس، کی پریسز) پر ردعمل دیتا ہے بجائے اس کے کہ لوپ میں چلتا رہے
**DOM Manipulation**: صارف کے تعاملات اور API جوابات کی بنیاد پر ویب پیج کے مواد کو ڈائنامک طور پر اپ ڈیٹ کرنا
### پروجیکٹ اسٹرکچر سیٹ اپ
ایک فرنٹ اینڈ ڈائریکٹری بنائیں اس منظم ساخت کے ساتھ:
```text
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
```
**آرکیٹیکچر کو سمجھنا**:
- **الگ کرتا ہے** ساخت (HTML)، رویہ (JavaScript)، اور پیشکش (CSS) کے درمیان خدشات
- **برقرار رکھتا ہے** ایک سادہ فائل اسٹرکچر جو نیویگیٹ اور ترمیم کرنے میں آسان ہے
- **پیروی کرتا ہے** ویب ڈیولپمنٹ کے بہترین طریقے تنظیم اور برقرار رکھنے کے لیے
### HTML بنیاد بنانا: قابل رسائی کے لیے سیمینٹک ساخت
آئیے HTML ساخت سے شروع کریں۔ جدید ویب ڈیولپمنٹ "سیمینٹک HTML" پر زور دیتا ہے – HTML عناصر کا استعمال جو واضح طور پر ان کے مقصد کو بیان کرتے ہیں، نہ کہ صرف ان کی ظاہری شکل۔ یہ آپ کی ایپلیکیشن کو اسکرین ریڈرز، سرچ انجنز، اور دیگر ٹولز کے لیے قابل رسائی بناتا ہے۔
**کیوں سیمینٹک HTML اہم ہے**: تصور کریں کہ آپ اپنے چیٹ ایپ کو کسی کو فون پر بیان کر رہے ہیں۔ آپ کہیں گے "یہاں ایک ہیڈر ہے جس میں عنوان ہے، ایک مین ایریا جہاں بات چیت ظاہر ہوتی ہے، اور نیچے ایک فارم ہے پیغامات ٹائپ کرنے کے لیے۔" سیمینٹک HTML ایسے عناصر استعمال کرتا ہے جو اس قدرتی وضاحت سے میل کھاتے ہیں۔
`index.html` بنائیں اس سوچے سمجھے مارک اپ کے ساتھ:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**ہر HTML عنصر اور اس کے مقصد کو سمجھنا**:
#### دستاویز کی ساخت
- **``**: براؤزر کو بتاتا ہے کہ یہ جدید HTML5 ہے
- **``**: صفحہ کی زبان اسکرین ریڈرز اور ترجمہ ٹولز کے لیے بتاتا ہے
- **``**: بین الاقوامی متن کے لیے مناسب کریکٹر انکوڈنگ کو یقینی بناتا ہے
- **``**: صفحہ کو موبائل ریسپانسیو بناتا ہے زوم اور اسکیل کو کنٹرول کر کے
#### سیمینٹک عناصر
- **``**: واضح طور پر اوپر والے سیکشن کی شناخت کرتا ہے جس میں عنوان اور وضاحت ہے
- **``**: بنیادی مواد کے علاقے کو نامزد کرتا ہے (جہاں بات چیت ہوتی ہے)
- **`