101 KiB

Raw Blame History Unescape Escape

چیٹ اسسٹنٹ بنائیں AI کے ساتھ

یاد کریں کہ اسٹار ٹریک میں جب عملہ جہاز کے کمپیوٹر سے آرام سے بات کرتا تھا، پیچیدہ سوالات پوچھتا تھا اور سوچ سمجھ کر جواب حاصل کرتا تھا؟ جو 1960 کی دہائی میں خالص سائنس فکشن لگتا تھا، وہ اب کچھ ایسا ہے جو آپ ویب ٹیکنالوجیز کے ذریعے بنا سکتے ہیں جو آپ پہلے ہی جانتے ہیں۔

اس سبق میں، ہم HTML، CSS، JavaScript، اور کچھ بیک اینڈ انٹیگریشن کا استعمال کرتے ہوئے ایک AI چیٹ اسسٹنٹ بنائیں گے۔ آپ دریافت کریں گے کہ وہی مہارتیں جو آپ سیکھ رہے ہیں، طاقتور AI سروسز سے جڑ سکتی ہیں جو سیاق و سباق کو سمجھ سکتی ہیں اور معنی خیز جوابات پیدا کر سکتی ہیں۔

AI کو ایک وسیع لائبریری تک رسائی حاصل کرنے کے طور پر سوچیں جو نہ صرف معلومات تلاش کر سکتی ہے بلکہ اسے آپ کے مخصوص سوالات کے مطابق مربوط جوابات میں بھی تبدیل کر سکتی ہے۔ ہزاروں صفحات کے ذریعے تلاش کرنے کے بجائے، آپ کو براہ راست، سیاق و سباق کے مطابق جوابات ملتے ہیں۔

انٹیگریشن مانوس ویب ٹیکنالوجیز کے ذریعے ہوتا ہے جو ایک ساتھ کام کرتی ہیں۔ HTML چیٹ انٹرفیس بناتا ہے، CSS بصری ڈیزائن کو سنبھالتا ہے، JavaScript صارف کے تعاملات کا انتظام کرتا ہے، اور ایک بیک اینڈ API سب کچھ AI سروسز سے جوڑتا ہے۔ یہ بالکل اسی طرح ہے جیسے آرکسٹرا کے مختلف حصے ایک سمفنی بنانے کے لیے مل کر کام کرتے ہیں۔

ہم بنیادی طور پر قدرتی انسانی مواصلات اور مشین پروسیسنگ کے درمیان ایک پل بنا رہے ہیں۔ آپ AI سروس انٹیگریشن کے تکنیکی نفاذ اور ڈیزائن پیٹرنز سیکھیں گے جو تعاملات کو بدیہی محسوس کرتے ہیں۔

اس سبق کے اختتام تک، AI انٹیگریشن ایک پراسرار عمل کی طرح کم اور ایک اور API کی طرح محسوس ہوگا جس کے ساتھ آپ کام کر سکتے ہیں۔ آپ ان بنیادی پیٹرنز کو سمجھیں گے جو ChatGPT اور Claude جیسے ایپلیکیشنز کو طاقت دیتے ہیں، وہی ویب ڈویلپمنٹ اصولوں کا استعمال کرتے ہوئے جو آپ سیکھ رہے ہیں۔

یہاں آپ کے مکمل پروجیکٹ کی جھلک ہے:

AI کو سمجھنا: راز سے مہارت تک

کوڈ میں غوطہ لگانے سے پہلے، آئیے سمجھتے ہیں کہ ہم کس کے ساتھ کام کر رہے ہیں۔ اگر آپ نے پہلے APIs استعمال کیے ہیں، تو آپ بنیادی پیٹرن کو جانتے ہیں: درخواست بھیجیں، جواب وصول کریں۔

AI APIs ایک جیسی ساخت کی پیروی کرتے ہیں، لیکن ڈیٹا بیس سے پہلے سے ذخیرہ شدہ ڈیٹا کو بازیافت کرنے کے بجائے، وہ متن کی بڑی مقدار سے سیکھے گئے پیٹرنز کی بنیاد پر نئے جوابات تیار کرتے ہیں۔ اسے اس طرح سوچیں جیسے لائبریری کیٹلاگ سسٹم اور ایک علم رکھنے والے لائبریرین کے درمیان فرق جو متعدد ذرائع سے معلومات کو مربوط کر سکتا ہے۔

"Generative AI" اصل میں کیا ہے؟

سوچیں کہ Rosetta Stone نے مصری ہائروگلیفس کو سمجھنے کے لیے معروف اور نامعلوم زبانوں کے درمیان پیٹرنز تلاش کرکے اسکالرز کو کیسے مدد دی۔ AI ماڈلز اسی طرح کام کرتے ہیں – وہ زبان کے کام کرنے کے طریقے کو سمجھنے کے لیے متن کی بڑی مقدار میں پیٹرنز تلاش کرتے ہیں، پھر ان پیٹرنز کا استعمال نئے سوالات کے لیے مناسب جوابات تیار کرنے کے لیے کرتے ہیں۔

آئیے اسے ایک سادہ موازنہ کے ساتھ توڑتے ہیں:

روایتی ڈیٹا بیس: جیسے آپ کے پیدائشی سرٹیفکیٹ کے لیے پوچھنا – آپ کو ہر بار بالکل وہی دستاویز ملتی ہے
سرچ انجن: جیسے لائبریرین سے بلیوں کے بارے میں کتابیں تلاش کرنے کے لیے کہنا – وہ آپ کو دستیاب چیزیں دکھاتے ہیں
Generative AI: جیسے کسی علم رکھنے والے دوست سے بلیوں کے بارے میں پوچھنا – وہ آپ کو دلچسپ چیزیں اپنے الفاظ میں بتاتے ہیں، جو آپ جاننا چاہتے ہیں اس کے مطابق

AI ماڈلز کیسے سیکھتے ہیں (سادہ ورژن)

AI ماڈلز کتابوں، مضامین، اور گفتگو سے متن پر مشتمل بڑے ڈیٹا سیٹس کے سامنے آنے کے ذریعے سیکھتے ہیں۔ اس عمل کے ذریعے، وہ درج ذیل میں پیٹرنز کی شناخت کرتے ہیں:

تحریری مواصلات میں خیالات کیسے تشکیل دیے جاتے ہیں
کون سے الفاظ عام طور پر ایک ساتھ ظاہر ہوتے ہیں
گفتگو عام طور پر کیسے بہتی ہے
رسمی اور غیر رسمی مواصلات کے درمیان سیاق و سباق کے فرق

یہ بالکل اسی طرح ہے جیسے آثار قدیمہ کے ماہرین قدیم زبانوں کو ڈی کوڈ کرتے ہیں: وہ گرامر، الفاظ، اور ثقافتی سیاق و سباق کو سمجھنے کے لیے ہزاروں مثالوں کا تجزیہ کرتے ہیں، آخر کار ان سیکھے گئے پیٹرنز کا استعمال کرتے ہوئے نئے متن کی تشریح کرنے کے قابل ہو جاتے ہیں۔

GitHub Models کیوں؟

ہم GitHub Models کو ایک عملی وجہ سے استعمال کر رہے ہیں – یہ ہمیں اپنی AI انفراسٹرکچر قائم کیے بغیر انٹرپرائز لیول AI تک رسائی فراہم کرتا ہے (جو، یقین کریں، آپ ابھی نہیں کرنا چاہتے!)۔ اسے موسم API استعمال کرنے کی طرح سوچیں بجائے اس کے کہ آپ خود موسم کی پیش گوئی کرنے کی کوشش کریں۔

یہ بنیادی طور پر "AI-as-a-Service" ہے، اور سب سے اچھی بات؟ شروع کرنے کے لیے یہ مفت ہے، لہذا آپ بغیر کسی بڑی بل کی فکر کیے تجربہ کر سکتے ہیں۔

ہم GitHub Models کو اپنے بیک اینڈ انٹیگریشن کے لیے استعمال کریں گے، جو ایک ڈویلپر دوستانہ انٹرفیس کے ذریعے پیشہ ورانہ گریڈ AI صلاحیتوں تک رسائی فراہم کرتا ہے۔ GitHub Models Playground ایک ٹیسٹنگ ماحول کے طور پر کام کرتا ہے جہاں آپ مختلف AI ماڈلز کے ساتھ تجربہ کر سکتے ہیں اور ان کی صلاحیتوں کو کوڈ میں نافذ کرنے سے پہلے سمجھ سکتے ہیں۔

Playground کو اتنا مفید بنانے والی چیزیں:

مختلف AI ماڈلز آزمائیں جیسے GPT-4o-mini، Claude، اور دیگر (سب مفت!)
اپنے خیالات اور پرامپٹس کو ٹیسٹ کریں کوڈ لکھنے سے پہلے
اپنی پسندیدہ پروگرامنگ زبان میں تیار کوڈ اسنیپٹس حاصل کریں
سیٹنگز کو ایڈجسٹ کریں جیسے تخلیقی سطح اور جواب کی لمبائی تاکہ دیکھ سکیں کہ وہ آؤٹ پٹ کو کیسے متاثر کرتے ہیں

کچھ دیر کھیلنے کے بعد، بس "Code" ٹیب پر کلک کریں اور اپنی پروگرامنگ زبان منتخب کریں تاکہ آپ کو وہ نفاذی کوڈ ملے جس کی آپ کو ضرورت ہے۔

Python بیک اینڈ انٹیگریشن سیٹ اپ کرنا

اب آئیے Python کا استعمال کرتے ہوئے AI انٹیگریشن کو نافذ کریں۔ Python AI ایپلیکیشنز کے لیے بہترین ہے کیونکہ اس کی سادہ نحو اور طاقتور لائبریریاں ہیں۔ ہم GitHub Models Playground سے کوڈ کے ساتھ شروع کریں گے اور پھر اسے ایک قابل استعمال، پروڈکشن ریڈی فنکشن میں ریفیکٹر کریں گے۔

بنیادی نفاذ کو سمجھنا

جب آپ Playground سے Python کوڈ حاصل کرتے ہیں، تو آپ کو کچھ ایسا ملے گا۔ اگر یہ پہلے تو بہت زیادہ لگے تو پریشان نہ ہوں – آئیے اسے ٹکڑوں میں سمجھتے ہیں:

اس کوڈ میں کیا ہو رہا ہے:

ہم وہ ٹولز درآمد کرتے ہیں جن کی ہمیں ضرورت ہے: os ماحول متغیرات کو پڑھنے کے لیے اور OpenAI AI سے بات کرنے کے لیے
ہم OpenAI کلائنٹ کو سیٹ اپ کرتے ہیں تاکہ GitHub کے AI سرورز کی طرف اشارہ کریں بجائے OpenAI کے براہ راست
ہم ایک خاص GitHub ٹوکن کا استعمال کرتے ہوئے تصدیق کرتے ہیں
ہم اپنی گفتگو کو مختلف "کرداروں" کے ساتھ ترتیب دیتے ہیں – اسے ایک ڈرامے کے منظر کے لیے ترتیب دینے کی طرح سوچیں
ہم اپنی درخواست AI کو بھیجتے ہیں کچھ فائن ٹیوننگ پیرامیٹرز کے ساتھ
ہم اصل جواب کا متن نکالتے ہیں تمام ڈیٹا سے جو واپس آتا ہے

پیغام کے کرداروں کو سمجھنا: AI گفتگو کا فریم ورک

AI گفتگو ایک مخصوص ساخت کا استعمال کرتی ہے جس میں مختلف "کردار" ہوتے ہیں جو الگ الگ مقاصد کی خدمت کرتے ہیں:

اسے ایک ڈرامے کی ہدایت کے طور پر سوچیں:

سسٹم کردار: جیسے اداکار کے لیے اسٹیج کی ہدایات – یہ AI کو بتاتا ہے کہ کیسے برتاؤ کرنا ہے، کس شخصیت کا ہونا ہے، اور کیسے جواب دینا ہے
صارف کردار: ایپلیکیشن استعمال کرنے والے شخص کا اصل سوال یا پیغام
اسسٹنٹ کردار: AI کا جواب (آپ اسے نہیں بھیجتے، لیکن یہ گفتگو کی تاریخ میں ظاہر ہوتا ہے)

حقیقی دنیا کی مثال: تصور کریں کہ آپ کسی پارٹی میں کسی دوست کو کسی سے متعارف کروا رہے ہیں:

سسٹم پیغام: "یہ میری دوست سارہ ہے، وہ ایک ڈاکٹر ہے جو طبی تصورات کو آسان الفاظ میں سمجھانے میں بہترین ہے"
صارف پیغام: "کیا آپ وضاحت کر سکتی ہیں کہ ویکسین کیسے کام کرتی ہیں؟"
اسسٹنٹ جواب: سارہ ایک دوستانہ ڈاکٹر کے طور پر جواب دیتی ہے، وکیل یا شیف کے طور پر نہیں

AI پیرامیٹرز کو سمجھنا: جواب کے رویے کو بہتر بنانا

AI API کالز میں عددی پیرامیٹرز کنٹرول کرتے ہیں کہ ماڈل جوابات کیسے تیار کرتا ہے۔ یہ ترتیبات آپ کو مختلف استعمال کے معاملات کے لیے AI کے رویے کو ایڈجسٹ کرنے کی اجازت دیتی ہیں:

Temperature (0.0 سے 2.0): تخلیقی صلاحیت کا ڈائل

یہ کیا کرتا ہے: کنٹرول کرتا ہے کہ AI کے جوابات کتنے تخلیقی یا پیش گوئی کے قابل ہوں گے۔

اسے جاز موسیقار کی بدیہی سطح کے طور پر سوچیں:

Temperature = 0.1: ہر بار بالکل وہی دھن بجانا (بہت پیش گوئی کے قابل)
Temperature = 0.7: کچھ ذائقہ دار تغیرات شامل کرنا جبکہ قابل شناخت رہنا (متوازن تخلیقی صلاحیت)
Temperature = 1.5: مکمل تجرباتی جاز غیر متوقع موڑ کے ساتھ (بہت غیر پیش گوئی کے قابل)

Max Tokens (1 سے 4096+): جواب کی لمبائی کا کنٹرولر

یہ کیا کرتا ہے: AI کے جواب کی لمبائی پر حد مقرر کرتا ہے۔

Tokens کو الفاظ کے برابر سمجھیں (انگریزی میں تقریباً 1 ٹوکن = 0.75 الفاظ):

max_tokens=50: مختصر اور جامع (جیسے ایک ٹیکسٹ میسج)
max_tokens=500: ایک یا دو اچھے پیراگراف
max_tokens=2000: تفصیلی وضاحت مثالوں کے ساتھ

Top_p (0.0 سے 1.0): فوکس پیرامیٹر

یہ کیا کرتا ہے: کنٹرول کرتا ہے کہ AI سب سے زیادہ ممکنہ جوابات پر کتنا مرکوز رہتا ہے۔

تصور کریں کہ AI کے پاس ایک بہت بڑا ذخیرہ الفاظ ہے، ہر لفظ کی درجہ بندی اس کے ممکنہ ہونے کے لحاظ سے:

top_p=0.1: صرف سب سے زیادہ ممکنہ 10% الفاظ پر غور کرتا ہے (بہت مرکوز)
top_p=0.9: ممکنہ الفاظ کے 90% پر غور کرتا ہے (زیادہ تخلیقی)
top_p=1.0: سب کچھ پر غور کرتا ہے (زیادہ سے زیادہ تنوع)

مثال کے طور پر: اگر آپ پوچھیں "آسمان عام طور پر..."

Low top_p: تقریباً یقینی طور پر کہے گا "نیلا"
High top_p: کہہ سکتا ہے "نیلا"، "بادلوں سے بھرا ہوا"، "وسیع"، "بدلتا ہوا"، "خوبصورت"، وغیرہ۔

سب کچھ ایک ساتھ رکھنا: مختلف استعمال کے معاملات کے لیے پیرامیٹرز کے امتزاج

یہ پیرامیٹرز کیوں اہم ہیں: مختلف ایپلیکیشنز کو مختلف قسم کے جوابات کی ضرورت ہوتی ہے۔ ایک کسٹمر سروس بوٹ کو مستقل اور حقائق پر مبنی ہونا چاہیے (کم Temperature)، جبکہ ایک تخلیقی تحریری اسسٹنٹ کو تخیلاتی اور متنوع ہونا چاہیے (زیادہ Temperature)۔ ان پیرامیٹرز کو سمجھنا آپ کو اپنے AI کی شخصیت اور جواب کے انداز پر کنٹرول دیتا ہے۔

سسٹم پرامپٹس کا جادو: AI شخصیت کو پروگرام کرنا

اگر پیرامیٹرز کنٹرول کرتے ہیں کہ AI کیسے سوچتا ہے، تو سسٹم پرامپٹس کنٹرول کرتے ہیں کہ AI کون سوچتا ہے کہ وہ ہے۔ یہ واقعی AI کے ساتھ کام کرنے کے سب سے دلچسپ حصوں میں سے ایک ہے – آپ بنیادی طور پر AI کو مکمل شخصیت، مہارت کی سطح، اور مواصلات کا انداز دے رہے ہیں۔

سسٹم پرامپٹس کو مختلف کرداروں کے لیے مختلف اداکاروں کو کاسٹ کرنے کے طور پر سوچیں: ایک عام اسسٹنٹ رکھنے کے بجائے، آپ مختلف حالات کے لیے ماہرین بنا سکتے ہیں۔ کیا آپ کو ایک صبر کرنے والے استاد کی ضرورت ہے؟ ایک تخلیقی خیالات کا ساتھی؟ ایک سنجیدہ کاروباری مشیر؟ بس سسٹم پرامپٹ تبدیل کریں!

سسٹم پرامپٹس کیوں اتنے طاقتور ہیں

یہاں دلچسپ حصہ ہے: AI ماڈلز کو بے شمار گفتگو پر تربیت دی گئی ہے جہاں لوگ مختلف کرداروں اور مہارت کی سطح کو اپناتے ہیں۔ جب آپ AI کو ایک مخصوص کردار دیتے ہیں، تو یہ ایسا ہے جیسے ایک سوئچ پلٹتا ہے جو ان تمام سیکھے گئے پیٹرنز کو فعال کرتا ہے۔

یہ AI کے لیے طریقہ اداکاری کی طرح ہے: ایک اداکار کو بتائیں "آپ ایک دانشمند بوڑھے پروفیسر ہیں" اور دیکھیں کہ وہ خود بخود اپنا انداز، الفاظ، اور انداز کیسے ایڈجسٹ کرتے ہیں۔ AI زبان کے پیٹرنز کے ساتھ کچھ حیرت انگیز طور پر اسی طرح کرتا ہے۔

مؤثر سسٹم پرامپٹس تیار کرنا: فن اور سائنس

ایک عظیم سسٹم پرامپٹ کی ساخت:

کردار/شناخت: AI کون ہے؟
مہارت: وہ کیا جانتے ہیں؟
مواصلات کا انداز: وہ کیسے بولتے ہیں؟
مخصوص ہدایات: انہیں کس پر توجہ دینی چاہیے؟

سسٹم پرامپٹس کے ساتھ سیاق و سباق میں مثالیں

آئیے دیکھتے ہیں کہ مختلف سسٹم پرامپٹس مکمل طور پر مختلف AI شخصیات کیسے بناتے ہیں:

سسٹم پرامپٹس کو عمل میں دیکھنا

آئیے ایک ہی سوال کو مختلف سسٹم پرامپٹس کے ساتھ آزمائیں تاکہ ڈرامائی فرق دیکھ سکیں:

سوال: "اپنی ویب ایپ میں صارف کی تصدیق کو کیسے سنبھالوں؟"

سسٹم پرامپٹس کے لیے جدید تکنیکیں

1. سیاق و سباق کی ترتیب: AI کو پس منظر کی معلومات دیں
2. آؤٹ پٹ فارمیٹنگ: AI کو بتائیں کہ جوابات کو کیسے ترتیب دینا ہے
3. پابندی کی ترتیب: وضاحت کریں کہ AI کو کیا نہیں کرنا چاہیے

آپ کے چیٹ اسسٹنٹ کے لیے اس کا مطلب کیوں ہے

سسٹم پرامپٹس کو سمجھنا آپ کو خصوصی AI اسسٹنٹس بنانے کی ناقابل یقین طاقت دیتا ہے:

کسٹمر سروس بوٹ: مددگار، صبر کرنے والا، پالیسی سے آگاہ
سیکھنے کا استاد: حوصلہ افزا، قدم بہ قدم، سمجھنے کی جانچ کرتا ہے
تخلیقی ساتھی: تخیلاتی، خیالات پر تعمیر کرتا ہے، "کیا ہوگا اگر؟" پوچھتا ہے
تکنیکی ماہر: درست، تفصیلی، سیکیورٹی سے آگاہ

اہم بصیرت: آپ صرف AI API کو کال نہیں کر رہے ہیں – آپ ایک حسب ضرورت AI شخصیت بنا رہے ہیں جو آپ کے مخصوص استعمال کے معاملے کی خدمت کرتی ہے۔ یہی وہ چیز ہے جو جدید AI ایپلیکیشنز کو عام کے بجائے مخصوص اور مفید محسوس کرتی ہے۔

FastAPI کے ساتھ ویب API بنانا: آپ کا اعلیٰ کارکردگی AI مواصلاتی مرکز

اب آئیے بیک اینڈ بنائیں جو آپ کے فرنٹ اینڈ کو AI سروسز سے جوڑتا ہے۔ ہم FastAPI کا استعمال کریں گے، ایک جدید Python فریم ورک جو AI ایپلیکیشنز کے لیے APIs بنانے میں بہترین ہے۔

FastAPI اس قسم کے پروجیکٹ کے لیے کئی فوائد پیش کرتا ہے: ہم وقتی درخواستوں کو سنبھالنے کے لیے بلٹ ان async سپورٹ، خودکار API دستاویزات کی نسل، اور بہترین کارکردگی۔ آپ کا FastAPI سرور ایک ثالث کے طور پر کام کرتا ہے جو فرنٹ اینڈ سے درخواستیں وصول کرتا ہے، AI سروسز کے ساتھ بات چیت کرتا ہے، اور فارمیٹ شدہ جوابات واپس کرتا ہے یہی وجہ ہے کہ FastAPI ہمارے پروجیکٹ کے لیے بہترین ہے:

پہلے سے Async: ایک ساتھ کئی AI درخواستوں کو سنبھال سکتا ہے بغیر رکاوٹ کے
خودکار دستاویزات: /docs پر جائیں اور خوبصورت، انٹرایکٹو API دستاویزات کا صفحہ مفت میں حاصل کریں
بلٹ ان تصدیق: غلطیوں کو مسئلہ بننے سے پہلے پکڑ لیتا ہے
بہت تیز: Python کے سب سے تیز فریم ورک میں سے ایک
جدید Python: Python کی تمام جدید اور بہترین خصوصیات استعمال کرتا ہے

اور یہ ہے کہ ہمیں بیک اینڈ کی ضرورت کیوں ہے:

سیکیورٹی: آپ کی AI API کی کلید ایک پاس ورڈ کی طرح ہے – اگر آپ اسے فرنٹ اینڈ جاوا اسکرپٹ میں ڈالیں تو کوئی بھی جو آپ کی ویب سائٹ کے سورس کوڈ کو دیکھے گا اسے چرا سکتا ہے اور آپ کے AI کریڈٹس استعمال کر سکتا ہے۔ بیک اینڈ حساس اسناد کو محفوظ رکھتا ہے۔

ریٹ لمیٹنگ اور کنٹرول: بیک اینڈ آپ کو کنٹرول کرنے دیتا ہے کہ صارفین کتنی بار درخواستیں کر سکتے ہیں، صارف کی تصدیق کو نافذ کر سکتے ہیں، اور استعمال کو ٹریک کرنے کے لیے لاگنگ شامل کر سکتے ہیں۔

ڈیٹا پروسیسنگ: آپ گفتگو کو محفوظ کرنا، نامناسب مواد کو فلٹر کرنا، یا متعدد AI سروسز کو یکجا کرنا چاہ سکتے ہیں۔ بیک اینڈ وہ جگہ ہے جہاں یہ منطق موجود ہے۔

آرکیٹیکچر کلائنٹ-سرور ماڈل جیسا ہے:

فرنٹ اینڈ: صارف کے تعامل کے لیے انٹرفیس کی تہہ
بیک اینڈ API: درخواست پروسیسنگ اور روٹنگ کی تہہ
AI سروس: بیرونی حساب کتاب اور جواب کی تخلیق
ماحولیاتی متغیرات: محفوظ ترتیب اور اسناد کا ذخیرہ

درخواست-جواب کے بہاؤ کو سمجھنا

آئیے دیکھتے ہیں کہ جب کوئی صارف پیغام بھیجتا ہے تو کیا ہوتا ہے:

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

ہر قدم کو سمجھنا:

صارف کا تعامل: شخص چیٹ انٹرفیس میں ٹائپ کرتا ہے
فرنٹ اینڈ پروسیسنگ: جاوا اسکرپٹ ان پٹ کو پکڑتا ہے اور اسے JSON کے طور پر فارمیٹ کرتا ہے
API کی تصدیق: FastAPI درخواست کو خودکار طور پر Pydantic ماڈلز کے ذریعے تصدیق کرتا ہے
AI انضمام: بیک اینڈ سیاق و سباق (سسٹم پرامپٹ) شامل کرتا ہے اور AI سروس کو کال کرتا ہے
جواب کی ہینڈلنگ: API AI کا جواب وصول کرتا ہے اور ضرورت پڑنے پر اسے تبدیل کر سکتا ہے
فرنٹ اینڈ ڈسپلے: جاوا اسکرپٹ چیٹ انٹرفیس میں جواب دکھاتا ہے

API آرکیٹیکچر کو سمجھنا

sequenceDiagram
    participant Frontend
    participant FastAPI
    participant AI Function
    participant GitHub Models
    
    Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
    FastAPI->>AI Function: call_llm(message, system_prompt)
    AI Function->>GitHub Models: API request
    GitHub Models->>AI Function: AI response
    AI Function->>FastAPI: response text
    FastAPI->>Frontend: {"response": "Hello! How can I help?"}

FastAPI ایپلیکیشن بنانا

آئیے اپنی API کو مرحلہ وار بناتے ہیں۔ api.py نامی فائل بنائیں اور درج ذیل FastAPI کوڈ شامل کریں:

# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Create FastAPI application
app = FastAPI(
    title="AI Chat API",
    description="A high-performance API for AI-powered chat applications",
    version="1.0.0"
)

# Configure CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Configure appropriately for production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Pydantic models for request/response validation
class ChatMessage(BaseModel):
    message: str

class ChatResponse(BaseModel):
    response: str

@app.get("/")
async def root():
    """Root endpoint providing API information."""
    return {
        "message": "Welcome to the AI Chat API",
        "docs": "/docs",
        "health": "/health"
    }

@app.get("/health")
async def health_check():
    """Health check endpoint."""
    return {"status": "healthy", "service": "ai-chat-api"}

@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
    """Main chat endpoint that processes messages and returns AI responses."""
    try:
        # Extract and validate message
        message = chat_message.message.strip()
        if not message:
            raise HTTPException(status_code=400, detail="Message cannot be empty")
        
        logger.info(f"Processing message: {message[:50]}...")
        
        # Call AI service (note: call_llm should be made async for better performance)
        ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
        
        logger.info("AI response generated successfully")
        return ChatResponse(response=ai_response)
        
    except HTTPException:
        raise
    except Exception as e:
        logger.error(f"Error processing chat message: {str(e)}")
        raise HTTPException(status_code=500, detail="Internal server error")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)

FastAPI کے نفاذ کو سمجھنا:

درآمد کرتا ہے FastAPI جدید ویب فریم ورک کی فعالیت کے لیے اور Pydantic ڈیٹا کی تصدیق کے لیے
خودکار API دستاویزات بناتا ہے (جب سرور چلتا ہے تو /docs پر دستیاب)
CORS مڈل ویئر کو فعال کرتا ہے تاکہ مختلف اصل سے فرنٹ اینڈ درخواستوں کی اجازت دی جا سکے
Pydantic ماڈلز کی وضاحت کرتا ہے خودکار درخواست/جواب کی تصدیق اور دستاویزات کے لیے
async اینڈ پوائنٹس استعمال کرتا ہے تاکہ ہم وقتی درخواستوں کے ساتھ بہتر کارکردگی حاصل ہو
مناسب HTTP اسٹیٹس کوڈز اور غلطی ہینڈلنگ نافذ کرتا ہے HTTPException کے ساتھ
ساختی لاگنگ شامل کرتا ہے نگرانی اور ڈیبگنگ کے لیے
صحت کی جانچ کا اینڈ پوائنٹ فراہم کرتا ہے سروس کی حیثیت کی نگرانی کے لیے

روایتی فریم ورک کے مقابلے میں FastAPI کے اہم فوائد:

خودکار تصدیق: Pydantic ماڈلز ڈیٹا کی سالمیت کو پروسیسنگ سے پہلے یقینی بناتے ہیں
انٹرایکٹو دستاویزات: /docs پر جائیں خودکار، قابل آزمائش API دستاویزات کے لیے
ٹائپ سیفٹی: Python ٹائپ ہنٹس رن ٹائم غلطیوں کو روکتے ہیں اور کوڈ کے معیار کو بہتر بناتے ہیں
async سپورٹ: ایک ساتھ کئی AI درخواستوں کو بلاک کیے بغیر سنبھالتا ہے
کارکردگی: حقیقی وقت کی ایپلیکیشنز کے لیے درخواست پروسیسنگ نمایاں طور پر تیز

CORS: ویب کا سیکیورٹی گارڈ سمجھنا

CORS (Cross-Origin Resource Sharing) ایک سیکیورٹی گارڈ کی طرح ہے جو چیک کرتا ہے کہ آیا زائرین کو عمارت میں داخل ہونے کی اجازت ہے۔ آئیے سمجھتے ہیں کہ یہ کیوں اہم ہے اور آپ کی ایپلیکیشن پر کیسے اثر ڈالتا ہے۔

CORS کیا ہے اور یہ کیوں موجود ہے؟

مسئلہ: تصور کریں کہ اگر کوئی بھی ویب سائٹ آپ کی اجازت کے بغیر آپ کے بینک کی ویب سائٹ پر آپ کی طرف سے درخواستیں کر سکتی۔ یہ ایک سیکیورٹی ڈراؤنا خواب ہوگا! براؤزرز اسے "Same-Origin Policy" کے ذریعے ڈیفالٹ میں روکتے ہیں۔

Same-Origin Policy: براؤزرز صرف ان ویب صفحات کو اجازت دیتے ہیں جو اسی ڈومین، پورٹ، اور پروٹوکول سے درخواستیں کریں جہاں سے وہ لوڈ ہوئے ہیں۔

حقیقی دنیا کی مثال: یہ اپارٹمنٹ بلڈنگ کی سیکیورٹی کی طرح ہے – صرف رہائشی (ایک ہی اصل) کو ڈیفالٹ میں عمارت تک رسائی حاصل ہے۔ اگر آپ کسی دوست (مختلف اصل) کو مدعو کرنا چاہتے ہیں تو آپ کو سیکیورٹی کو واضح طور پر بتانا ہوگا کہ یہ ٹھیک ہے۔

آپ کے ترقیاتی ماحول میں CORS

ترقی کے دوران، آپ کا فرنٹ اینڈ اور بیک اینڈ مختلف پورٹس پر چلتا ہے:

فرنٹ اینڈ: http://localhost:3000 (یا file:// اگر HTML کو براہ راست کھول رہے ہیں)
بیک اینڈ: http://localhost:5000

یہ "مختلف اصل" سمجھے جاتے ہیں حالانکہ وہ ایک ہی کمپیوٹر پر ہیں!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"

عملی طور پر CORS کنفیگریشن کیا کرتا ہے:

API جوابات میں خاص HTTP ہیڈرز شامل کرتا ہے جو براؤزرز کو بتاتے ہیں "یہ کراس-اورجن درخواست کی اجازت ہے"
"پری فلائٹ" درخواستوں کو ہینڈل کرتا ہے (براؤزرز کبھی کبھار اصل درخواست بھیجنے سے پہلے اجازت چیک کرتے ہیں)
براؤزر کنسول میں "CORS پالیسی کے ذریعے بلاک کیا گیا" کی خرابی کو روکتا ہے

CORS سیکیورٹی: ترقی بمقابلہ پیداوار

# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)

# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])

# 🔒 Advanced: Different origins for different environments
if app.debug:  # Development mode
    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else:  # Production mode
    CORS(app, origins=["https://yourdomain.com"])

یہ کیوں اہم ہے: ترقی میں، CORS(app) آپ کے سامنے کا دروازہ کھلا چھوڑنے کی طرح ہے – آسان لیکن محفوظ نہیں۔ پیداوار میں، آپ بالکل بتانا چاہتے ہیں کہ کون سی ویب سائٹس آپ کے API سے بات کر سکتی ہیں۔

عام CORS منظرنامے اور حل

منظرنامہ	مسئلہ	حل
مقامی ترقی	فرنٹ اینڈ بیک اینڈ تک نہیں پہنچ سکتا	FastAPI میں CORSMiddleware شامل کریں
GitHub Pages + Heroku	تعینات فرنٹ اینڈ API تک نہیں پہنچ سکتا	اپنے GitHub Pages URL کو CORS اصل میں شامل کریں
حسب ضرورت ڈومین	پیداوار میں CORS کی غلطیاں	CORS اصل کو اپنے ڈومین سے ملانے کے لیے اپ ڈیٹ کریں
موبائل ایپ	ایپ ویب API تک نہیں پہنچ سکتی	اپنی ایپ کے ڈومین کو شامل کریں یا `*` کو احتیاط سے استعمال کریں

پرو ٹپ: آپ اپنے براؤزر کے Developer Tools میں نیٹ ورک ٹیب کے تحت CORS ہیڈرز چیک کر سکتے ہیں۔ جواب میں Access-Control-Allow-Origin جیسے ہیڈرز تلاش کریں۔

غلطی ہینڈلنگ اور تصدیق

نوٹ کریں کہ ہماری API میں مناسب غلطی ہینڈلنگ شامل ہے:

# Validate that we received a message
if not message:
    return jsonify({"error": "Message field is required"}), 400

کلیدی تصدیقی اصول:

ضروری فیلڈز کی جانچ کرتا ہے درخواستوں کو پروسیس کرنے سے پہلے
معنی خیز غلطی کے پیغامات واپس کرتا ہے JSON فارمیٹ میں
مناسب HTTP اسٹیٹس کوڈز استعمال کرتا ہے (خراب درخواستوں کے لیے 400)
واضح فیڈبیک فراہم کرتا ہے فرنٹ اینڈ ڈویلپرز کو مسائل کو ڈیبگ کرنے میں مدد کے لیے

اپنا بیک اینڈ سیٹ اپ اور چلانا

اب جب کہ ہمارے پاس AI انضمام اور FastAPI سرور تیار ہے، آئیے سب کچھ چلائیں۔ سیٹ اپ کے عمل میں Python کی dependencies انسٹال کرنا، ماحولیاتی متغیرات کو ترتیب دینا، اور اپنا ترقیاتی سرور شروع کرنا شامل ہے۔

Python ماحول کی ترتیب

آئیے آپ کے Python ترقیاتی ماحول کو ترتیب دیتے ہیں۔ ورچوئل ماحول Manhattan Project کے compartmentalized approach کی طرح ہیں – ہر پروجیکٹ کو اپنے مخصوص ٹولز اور dependencies کے ساتھ اپنا الگ تھلگ جگہ ملتا ہے، مختلف پروجیکٹس کے درمیان تنازعات کو روکنے کے لیے۔

# 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 محفوظ رازوں کے انتظام کے لیے

کلیدی dependencies کی وضاحت:

FastAPI: جدید، تیز ویب فریم ورک خودکار API دستاویزات کے ساتھ
Uvicorn: تیز رفتار ASGI سرور جو FastAPI ایپلیکیشنز کو چلاتا ہے
OpenAI: GitHub Models اور OpenAI API انضمام کے لیے آفیشل لائبریری
python-dotenv: .env فائلوں سے محفوظ ماحولیاتی متغیرات لوڈ کرنا

ماحولیاتی ترتیب: رازوں کو محفوظ رکھنا

API شروع کرنے سے پہلے، ہمیں ویب ڈویلپمنٹ کے سب سے اہم سبق کے بارے میں بات کرنی ہوگی: اپنے رازوں کو واقعی خفیہ رکھنے کا طریقہ۔ ماحولیاتی متغیرات ایک محفوظ والٹ کی طرح ہیں جس تک صرف آپ کی ایپلیکیشن رسائی حاصل کر سکتی ہے۔

ماحولیاتی متغیرات کیا ہیں؟

ماحولیاتی متغیرات کو ایک محفوظ ڈپازٹ باکس کی طرح سمجھیں – آپ اپنی قیمتی چیزیں وہاں رکھتے ہیں، اور صرف آپ (اور آپ کی ایپ) کے پاس اسے حاصل کرنے کی چابی ہوتی ہے۔ حساس معلومات کو براہ راست اپنے کوڈ میں لکھنے کے بجائے (جہاں کوئی بھی اسے دیکھ سکتا ہے)، آپ اسے محفوظ طریقے سے ماحول میں ذخیرہ کرتے ہیں۔

یہاں فرق ہے:

غلط طریقہ: اپنا پاس ورڈ ایک چپچپا نوٹ پر لکھ کر اپنے مانیٹر پر رکھنا
صحیح طریقہ: اپنا پاس ورڈ ایک محفوظ پاس ورڈ مینیجر میں رکھنا جس تک صرف آپ کو رسائی حاصل ہو

ماحولیاتی متغیرات کیوں اہم ہیں

# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
    api_key="ghp_1234567890abcdef...",  # Anyone can steal this!
    base_url="https://models.github.ai/inference"
)

# ✅ DO THIS - API key stored securely
client = OpenAI(
    api_key=os.environ["GITHUB_TOKEN"],  # Only your app can access this
    base_url="https://models.github.ai/inference"
)

جب آپ رازوں کو ہارڈ کوڈ کرتے ہیں تو کیا ہوتا ہے:

ورژن کنٹرول کی نمائش: آپ کے Git ریپوزٹری تک رسائی رکھنے والا کوئی بھی آپ کی API کلید دیکھتا ہے
عوامی ریپوزٹریز: اگر آپ GitHub پر اپ لوڈ کرتے ہیں، تو آپ کی کلید پورے انٹرنیٹ پر نظر آتی ہے
ٹیم شیئرنگ: آپ کے پروجیکٹ پر کام کرنے والے دوسرے ڈویلپرز کو آپ کی ذاتی API کلید تک رسائی حاصل ہوتی ہے
سیکیورٹی کی خلاف ورزی: اگر کوئی آپ کی API کلید چوری کرتا ہے، تو وہ آپ کے AI کریڈٹس استعمال کر سکتا ہے

آپ کی ماحولیاتی فائل ترتیب دینا

اپنے بیک اینڈ ڈائریکٹری میں .env فائل بنائیں۔ یہ فائل آپ کے رازوں کو مقامی طور پر ذخیرہ کرتی ہے:

# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development

.env فائل کو سمجھنا:

ایک راز فی لائن KEY=value فارمیٹ میں
برابر کے نشان کے ارد گرد کوئی جگہ نہیں
عام طور پر اقتباسات کی ضرورت نہیں ہوتی اقدار کے ارد گرد
تبصرے # سے شروع ہوتے ہیں

آپ کا GitHub پرسنل ایکسیس ٹوکن بنانا

آپ کا GitHub ٹوکن ایک خاص پاس ورڈ کی طرح ہے جو آپ کی ایپلیکیشن کو GitHub کی AI سروسز استعمال کرنے کی اجازت دیتا ہے:

ٹوکن تخلیق کے مرحلہ وار اقدامات:

GitHub سیٹنگز پر جائیں → Developer settings → Personal access tokens → Tokens (classic)
"Generate new token (classic)" پر کلک کریں
میعاد مقرر کریں (ٹیسٹنگ کے لیے 30 دن، پیداوار کے لیے زیادہ)
اسکوپس منتخب کریں: "repo" اور کوئی بھی دیگر اجازتیں چیک کریں جن کی آپ کو ضرورت ہے
ٹوکن بنائیں اور اسے فوراً کاپی کریں (آپ اسے دوبارہ نہیں دیکھ سکتے!)
اپنی .env فائل میں پیسٹ کریں

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

Python میں ماحولیاتی متغیرات لوڈ کرنا

import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Now you can access them securely
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
    raise ValueError("GITHUB_TOKEN not found in environment variables!")

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

یہ کوڈ کیا کرتا ہے:

آپ کی .env فائل لوڈ کرتا ہے اور متغیرات کو Python کے لیے دستیاب بناتا ہے
چیک کرتا ہے کہ مطلوبہ ٹوکن موجود ہے (اچھی غلطی ہینڈلنگ!)
واضح غلطی پیدا کرتا ہے اگر ٹوکن غائب ہو
ٹوکن کو محفوظ طریقے سے استعمال کرتا ہے بغیر کوڈ میں ظاہر کیے

Git سیکیورٹی: .gitignore فائل

آپ کی .gitignore فائل Git کو بتاتی ہے کہ کون سی فائلیں کبھی ٹریک یا اپ لوڈ نہ کریں:

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

یہ کیوں اہم ہے: ایک بار جب آپ .env کو .gitignore میں شامل کرتے ہیں، Git آپ کی ماحولیاتی فائل کو نظر انداز کر دے گا، آپ کو اپنے رازوں کو GitHub پر اپ لوڈ کرنے سے روک دے گا۔

مختلف ماحول، مختلف راز

پیشہ ورانہ ایپلیکیشنز مختلف ماحول کے لیے مختلف API کلیدیں استعمال کرتی ہیں:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
GITHUB_TOKEN=your_production_token
DEBUG=False

یہ کیوں اہم ہے: آپ نہیں چاہتے کہ آپ کے ترقیاتی تجربات آپ کے پیداوار AI کے استعمال کے کوٹے کو متاثر کریں، اور آپ مختلف ماحول کے لیے مختلف سیکیورٹی سطحیں چاہتے ہیں۔

اپنا ترقیاتی سرور شروع کرنا: اپنے FastAPI کو زندہ کرنا

اب دلچسپ لمحہ آتا ہے – اپنا FastAPI ترقیاتی سرور شروع کرنا اور اپنے AI انضمام کو زندہ دیکھنا! FastAPI Uvicorn استعمال کرتا ہے، ایک تیز رفتار ASGI سرور جو خاص طور پر async Python ایپلیکیشنز کے لیے ڈیزائن کیا گیا ہے۔

FastAPI سرور اسٹارٹ اپ کے عمل کو سمجھنا

# Method 1: Direct Python execution (includes auto-reload)
python api.py

# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload

جب آپ یہ کمانڈ چلاتے ہیں، تو پردے کے پیچھے یہ ہوتا ہے:

1. Python آپ کی FastAPI ایپلیکیشن لوڈ کرتا ہے:

تمام مطلوبہ لائبریریاں درآمد کرتا ہے (FastAPI، Pydantic، OpenAI، وغیرہ)
آپ کی .env فائل سے ماحولیاتی متغیرات لوڈ کرتا ہے
خودکار دستاویزات کے ساتھ FastAPI ایپلیکیشن انسٹینس بناتا ہے

2. Uvicorn ASGI سرور کو ترتیب دیتا ہے:

async درخواست ہینڈلنگ صلاحیتوں کے ساتھ پورٹ 5000 پر بائنڈ کرتا ہے
خودکار تصدیق کے ساتھ درخواست روٹنگ ترتیب دیتا ہے
ترقی کے لیے ہاٹ ری لوڈ کو فعال کرتا ہے (فائل میں تبدیلیوں پر دوبارہ شروع ہوتا ہے)
انٹرایکٹو API دستاویزات تیار کرتا ہے

3. سرور سننا شروع کرتا ہے:

آپ کے ٹرمینل میں ظاہر ہوتا ہے: INFO: Uvicorn running on http://0.0.0.0:5000
سرور کئی ہم وقتی AI درخواستوں کو سنبھال سکتا ہے
آپ کی API خودکار دستاویزات کے ساتھ http://localhost:5000/docs پر تیار ہے

جب سب کچھ کام کرے تو آپ کو کیا دیکھنا چاہیے

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

FastAPI آؤٹ پٹ کو سمجھنا:

تبدیلیوں کے لیے دیکھے گا: ترقی کے لیے آٹو ری لوڈ فعال ہے

# test_api.py - Create this file to test your API
import requests
import json

# Test the API endpoint
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}

response = requests.post(url, json=data)
if response.status_code == 200:
    result = response.json()
    print("AI Response:", result['response'])
else:
    print("Error:", response.status_code, response.text)

عام اسٹارٹ اپ مسائل کا حل

ایرر میسج	اس کا مطلب	حل کیسے کریں
`ModuleNotFoundError: No module named 'fastapi'`	FastAPI انسٹال نہیں ہے	اپنی ورچوئل ماحول میں `pip install fastapi uvicorn` چلائیں
`ModuleNotFoundError: No module named 'uvicorn'`	ASGI سرور انسٹال نہیں ہے	اپنی ورچوئل ماحول میں `pip install uvicorn` چلائیں
`KeyError: 'GITHUB_TOKEN'`	ماحول کا متغیر نہیں ملا	اپنی `.env` فائل اور `load_dotenv()` کال چیک کریں
`Address already in use`	پورٹ 5000 مصروف ہے	دوسرے پروسیسز کو ختم کریں جو پورٹ 5000 استعمال کر رہے ہیں یا پورٹ تبدیل کریں
`ValidationError`	درخواست کا ڈیٹا Pydantic ماڈل سے میل نہیں کھاتا	اپنی درخواست کے فارمیٹ کو متوقع اسکیمہ سے ملائیں
`HTTPException 422`	ناقابل عمل ادارہ	درخواست کی توثیق ناکام ہوئی، درست فارمیٹ کے لیے `/docs` چیک کریں
`OpenAI API error`	AI سروس کی توثیق ناکام ہوئی	اپنے GitHub ٹوکن کی تصدیق کریں کہ وہ درست ہے اور مناسب اجازتیں رکھتا ہے

ترقی کے بہترین طریقے

ہوٹ ری لوڈنگ: FastAPI اور Uvicorn خودکار ری لوڈنگ فراہم کرتے ہیں جب آپ اپنی Python فائلز میں تبدیلی کرتے ہیں۔ اس کا مطلب ہے کہ آپ کوڈ میں ترمیم کر سکتے ہیں اور فوراً ٹیسٹ کر سکتے ہیں بغیر دستی طور پر دوبارہ شروع کیے۔

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

ترقی کے لیے لاگنگ: لاگنگ شامل کریں تاکہ معلوم ہو سکے کہ کیا ہو رہا ہے:

import logging

# Set up logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

@app.route("/hello", methods=["POST"])
def hello():
    data = request.get_json()
    message = data.get("message", "")
    
    logger.info(f"Received message: {message}")
    
    if not message:
        logger.warning("Empty message received")
        return jsonify({"error": "Message field is required"}), 400
    
    try:
        response = call_llm(message, "You are a helpful and friendly assistant.")
        logger.info(f"AI response generated successfully")
        return jsonify({"response": response})
    except Exception as e:
        logger.error(f"AI API error: {str(e)}")
        return jsonify({"error": "AI service temporarily unavailable"}), 500

لاگنگ کیوں مددگار ہے: ترقی کے دوران، آپ دیکھ سکتے ہیں کہ کون سی درخواستیں آ رہی ہیں، AI کیا جواب دے رہا ہے، اور کہاں غلطیاں ہو رہی ہیں۔ اس سے ڈیبگنگ بہت تیز ہو جاتی ہے۔

GitHub Codespaces کے لیے ترتیب دینا: کلاؤڈ میں ترقی کو آسان بنائیں

GitHub Codespaces ایک طاقتور ترقیاتی کمپیوٹر کی طرح ہے جو کلاؤڈ میں چلتا ہے اور آپ کسی بھی براؤزر سے اس تک رسائی حاصل کر سکتے ہیں۔ اگر آپ Codespaces میں کام کر رہے ہیں، تو اپنے بیک اینڈ کو فرنٹ اینڈ کے لیے قابل رسائی بنانے کے لیے کچھ اضافی اقدامات کی ضرورت ہوگی۔

Codespaces نیٹ ورکنگ کو سمجھنا

ایک مقامی ترقیاتی ماحول میں، سب کچھ ایک ہی کمپیوٹر پر چلتا ہے:

بیک اینڈ: http://localhost:5000
فرنٹ اینڈ: http://localhost:3000 (یا file://)

Codespaces میں، آپ کا ترقیاتی ماحول GitHub کے سرورز پر چلتا ہے، لہذا "localhost" کا مطلب مختلف ہوتا ہے۔ GitHub خود بخود آپ کی سروسز کے لیے عوامی URLs بناتا ہے، لیکن آپ کو انہیں صحیح طریقے سے ترتیب دینا ہوگا۔

Codespaces ترتیب دینے کے مراحل

1. اپنا بیک اینڈ سرور شروع کریں:

cd backend
python api.py

آپ کو FastAPI/Uvicorn اسٹارٹ اپ میسج نظر آئے گا، لیکن نوٹ کریں کہ یہ Codespace ماحول کے اندر چل رہا ہے۔

2. پورٹ کی مرئیت کو ترتیب دیں:

VS Code کے نیچے والے پینل میں "Ports" ٹیب تلاش کریں
فہرست میں پورٹ 5000 تلاش کریں
پورٹ 5000 پر دائیں کلک کریں
"Port Visibility" → "Public" منتخب کریں

اسے عوامی کیوں بنائیں؟ عام طور پر، Codespace پورٹس نجی ہوتی ہیں (صرف آپ کے لیے قابل رسائی)۔ اسے عوامی بنانے سے آپ کا فرنٹ اینڈ (جو براؤزر میں چلتا ہے) آپ کے بیک اینڈ سے بات چیت کر سکتا ہے۔

3. اپنا عوامی URL حاصل کریں: پورٹ کو عوامی بنانے کے بعد، آپ کو ایسا URL نظر آئے گا:

https://your-codespace-name-5000.app.github.dev

4. اپنی فرنٹ اینڈ کنفیگریشن کو اپ ڈیٹ کریں:

// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

Codespace 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. براؤزر ڈیولپر ٹولز کے ساتھ ٹیسٹ کریں:

// 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، dependencies انسٹال کریں)	فوری (پری کنفیگرڈ ماحول)
URL رسائی	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
پورٹ کنفیگریشن	خودکار	دستی (پورٹس کو عوامی بنائیں)
فائل کی مستقل مزاجی	مقامی مشین	GitHub ریپوزیٹری
تعاون	ماحول کو شیئر کرنا مشکل	Codespace لنک شیئر کرنا آسان
انٹرنیٹ انحصار	صرف AI API کالز کے لیے	ہر چیز کے لیے ضروری

Codespace ترقی کے نکات

Codespaces میں ماحول کے متغیرات: آپ کی .env فائل Codespaces میں اسی طرح کام کرتی ہے، لیکن آپ ماحول کے متغیرات کو براہ راست Codespace میں بھی سیٹ کر سکتے ہیں:

# Set environment variable for the current session
export GITHUB_TOKEN="your_token_here"

# Or add to your .bashrc for persistence
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc

پورٹ مینجمنٹ:

Codespaces خود بخود پتہ لگاتا ہے جب آپ کی ایپلیکیشن کسی پورٹ پر سننا شروع کرتی ہے
آپ ایک ساتھ متعدد پورٹس کو فارورڈ کر سکتے ہیں (اگر آپ بعد میں ڈیٹا بیس شامل کریں تو مفید)
پورٹس اس وقت تک قابل رسائی رہتے ہیں جب تک آپ کا Codespace چل رہا ہے

ترقیاتی ورک فلو:

VS Code میں کوڈ میں تبدیلی کریں
FastAPI خودکار طور پر ری لوڈ ہوتا ہے (Uvicorn کے ری لوڈ موڈ کی بدولت)
عوامی URL کے ذریعے فوراً تبدیلیوں کا ٹیسٹ کریں
تیار ہونے پر کمیٹ اور پش کریں

💡 پرو ٹپ: ترقی کے دوران اپنے Codespace بیک اینڈ URL کو بک مارک کریں۔ چونکہ Codespace نام مستحکم ہیں، URL اس وقت تک تبدیل نہیں ہوگا جب تک آپ ایک ہی Codespace استعمال کر رہے ہیں۔

فرنٹ اینڈ چیٹ انٹرفیس بنانا: جہاں انسان AI سے ملتے ہیں

اب ہم یوزر انٹرفیس بنائیں گے – وہ حصہ جو یہ طے کرتا ہے کہ لوگ آپ کے AI اسسٹنٹ کے ساتھ کیسے بات چیت کرتے ہیں۔ جیسے اصل آئی فون کے انٹرفیس کا ڈیزائن، ہم پیچیدہ ٹیکنالوجی کو استعمال میں آسان اور قدرتی بنانے پر توجہ دے رہے ہیں۔

جدید فرنٹ اینڈ آرکیٹیکچر کو سمجھنا

ہمارا چیٹ انٹرفیس وہ ہوگا جسے ہم "سنگل پیج ایپلیکیشن" یا SPA کہتے ہیں۔ پرانے طریقے کے بجائے جہاں ہر کلک ایک نیا صفحہ لوڈ کرتا ہے، ہمارا ایپ ہموار اور فوری طور پر اپ ڈیٹ ہوتا ہے:

پرانے ویب سائٹس: جیسے ایک کتاب پڑھنا – آپ مکمل طور پر نئے صفحات پر پلٹتے ہیں ہمارا چیٹ ایپ: جیسے اپنے فون کا استعمال کرنا – سب کچھ بہتا ہے اور ہموار طریقے سے اپ ڈیٹ ہوتا ہے

graph TD
    A[User Types Message] --> B[JavaScript Captures Input]
    B --> C[Validate & Format Data]
    C --> D[Send to Backend API]
    D --> E[Display Loading State]
    E --> F[Receive AI Response]
    F --> G[Update Chat Interface]
    G --> H[Ready for Next Message]

فرنٹ اینڈ ڈیولپمنٹ کے تین ستون

ہر فرنٹ اینڈ ایپلیکیشن – سادہ ویب سائٹس سے لے کر پیچیدہ ایپس جیسے Discord یا Slack – تین بنیادی ٹیکنالوجیز پر مبنی ہوتی ہے۔ انہیں وہ بنیاد سمجھیں جس پر ویب پر آپ جو کچھ دیکھتے اور تعامل کرتے ہیں وہ بنایا گیا ہے:

HTML (ساخت): یہ آپ کی بنیاد ہے

طے کرتا ہے کہ کون سے عناصر موجود ہیں (بٹن، ٹیکسٹ ایریاز، کنٹینرز)
مواد کو معنی دیتا ہے (یہ ایک ہیڈر ہے، یہ ایک فارم ہے، وغیرہ)
بنیادی ساخت بناتا ہے جس پر سب کچھ تعمیر ہوتا ہے

CSS (پیشکش): یہ آپ کا اندرونی ڈیزائنر ہے

سب کچھ خوبصورت بناتا ہے (رنگ، فونٹس، لے آؤٹ)
مختلف اسکرین سائزز کو ہینڈل کرتا ہے (فون بمقابلہ لیپ ٹاپ بمقابلہ ٹیبلٹ)
ہموار اینیمیشنز اور بصری تاثرات بناتا ہے

JavaScript (رویہ): یہ آپ کا دماغ ہے

صارفین کے اعمال کا جواب دیتا ہے (کلکس، ٹائپنگ، اسکرولنگ)
آپ کے بیک اینڈ سے بات کرتا ہے اور صفحہ کو اپ ڈیٹ کرتا ہے
سب کچھ انٹرایکٹو اور متحرک بناتا ہے

اسے آرکیٹیکچرل ڈیزائن کی طرح سمجھیں:

HTML: ساختی بلیو پرنٹ (جگہوں اور تعلقات کی وضاحت)
CSS: جمالیاتی اور ماحولیاتی ڈیزائن (بصری انداز اور یوزر تجربہ)
JavaScript: میکینیکل سسٹمز (فنکشنلٹی اور انٹرایکٹیویٹی)

جدید JavaScript آرکیٹیکچر کیوں اہم ہے

ہمارا چیٹ ایپلیکیشن جدید JavaScript پیٹرنز استعمال کرے گا جو آپ پیشہ ورانہ ایپلیکیشنز میں دیکھیں گے۔ ان تصورات کو سمجھنا آپ کی ترقی کے ساتھ آپ کی مدد کرے گا:

کلاس پر مبنی آرکیٹیکچر: ہم اپنے کوڈ کو کلاسز میں منظم کریں گے، جو اشیاء کے لیے بلیو پرنٹس بنانے جیسا ہے Async/Await: وقت لینے والے آپریشنز (جیسے API کالز) کو ہینڈل کرنے کا جدید طریقہ ایونٹ پر مبنی پروگرامنگ: ہمارا ایپ صارف کے اعمال (کلکس، کی پریسز) کا جواب دیتا ہے بجائے اس کے کہ لوپ میں چلتا رہے DOM Manipulation: صارف کے تعاملات اور API جوابات کی بنیاد پر ویب پیج کے مواد کو متحرک طور پر اپ ڈیٹ کرنا

پروجیکٹ اسٹرکچر سیٹ اپ

ایک فرنٹ اینڈ ڈائریکٹری بنائیں اس منظم اسٹرکچر کے ساتھ:

frontend/
├── index.html      # Main HTML structure
├── app.js          # JavaScript functionality
└── styles.css      # Visual styling

آرکیٹیکچر کو سمجھنا:

ساخت کو HTML، JavaScript، اور CSS کے درمیان الگ کرتا ہے
سادہ فائل اسٹرکچر برقرار رکھتا ہے جو نیویگیٹ اور ترمیم کرنے میں آسان ہے
ویب ڈیولپمنٹ کے بہترین طریقوں کی پیروی کرتا ہے تنظیم اور برقرار رکھنے کے لیے

HTML بنیاد بنانا: قابل رسائی کے لیے سیمینٹک ساخت

آئیے HTML ساخت سے شروع کرتے ہیں۔ جدید ویب ڈیولپمنٹ "سیمینٹک HTML" پر زور دیتا ہے – HTML عناصر کا استعمال جو واضح طور پر ان کے مقصد کو بیان کرتے ہیں، نہ کہ صرف ان کی ظاہری شکل۔ یہ آپ کی ایپلیکیشن کو اسکرین ریڈرز، سرچ انجنز، اور دیگر ٹولز کے لیے قابل رسائی بناتا ہے۔

سیمینٹک HTML کیوں اہم ہے: تصور کریں کہ آپ اپنے چیٹ ایپ کو کسی کو فون پر بیان کر رہے ہیں۔ آپ کہیں گے "یہاں ایک ہیڈر ہے جس میں عنوان ہے، ایک مین ایریا جہاں بات چیت ظاہر ہوتی ہے، اور نیچے ایک فارم ہے پیغامات ٹائپ کرنے کے لیے۔" سیمینٹک HTML ایسے عناصر استعمال کرتا ہے جو اس قدرتی وضاحت سے میل کھاتے ہیں۔

index.html بنائیں اس سوچے سمجھے ساختی مارک اپ کے ساتھ:

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

ہر HTML عنصر اور اس کے مقصد کو سمجھنا:

دستاویز کی ساخت

<!DOCTYPE html>: براؤزر کو بتاتا ہے کہ یہ جدید HTML5 ہے
<html lang="en">: صفحہ کی زبان اسکرین ریڈرز اور ترجمہ ٹولز کے لیے بتاتا ہے
<meta charset="UTF-8">: بین الاقوامی متن کے لیے مناسب کریکٹر انکوڈنگ کو یقینی بناتا ہے
<meta name="viewport"...>: صفحہ کو موبائل ریسپانسیو بناتا ہے زوم اور اسکیل کو کنٹرول کر کے

سیمینٹک عناصر

<header>: واضح طور پر اوپر والے سیکشن کی شناخت کرتا ہے جس میں عنوان اور وضاحت ہوتی ہے
<main>: بنیادی مواد کے علاقے کو نامزد کرتا ہے (جہاں بات چیت ہوتی ہے)
<form>: صارف کی ان پٹ کے لیے سیمینٹک طور پر درست، مناسب کی بورڈ نیویگیشن کو فعال کرتا ہے

قابل رسائی خصوصیات

role="log": اسکرین ریڈرز کو بتاتا ہے کہ یہ علاقہ پیغامات کی زمانی لاگ پر مشتمل ہے
aria-live="polite": اسکرین ریڈرز کو نئے پیغامات کو بغیر کسی مداخلت کے اعلان کرتا ہے
aria-label: فارم کنٹرولز کے لیے وضاحتی لیبل فراہم کرتا ہے
required: براؤزر کی تصدیق کرتا ہے کہ صارفین پیغام داخل کریں اس سے پہلے کہ بھیجیں

CSS اور JavaScript انضمام

class attributes: CSS کے لیے اسٹائلنگ ہکس فراہم کرتا ہے (جیسے، chat-container, input-group)
id attributes: JavaScript کو مخصوص عناصر تلاش کرنے اور ان میں ترمیم کرنے کی اجازت دیتا ہے
اسکرپٹ کی جگہ: JavaScript فائل آخر میں لوڈ ہوتی ہے تاکہ HTML پہلے لوڈ ہو

یہ ساخت کیوں کام کرتی ہے:

منطقی بہاؤ: ہیڈر → مین مواد → ان پٹ فارم قدرتی پڑھنے کے آرڈر سے میل کھاتا ہے
کی بورڈ قابل رسائی: صارفین تمام انٹرایکٹو عناصر کے ذریعے ٹیب کر سکتے ہیں
اسکرین ریڈر دوستانہ: بصری طور پر معذور صارفین کے لیے واضح لینڈ مارکس اور وضاحتیں
موبائل ریسپانسیو: ویوپورٹ میٹا ٹیگ ریسپانسیو ڈیزائن کو فعال کرتا ہے
پروگریسو انحانسمنٹ: کام کرتا ہے یہاں تک کہ اگر CSS یا JavaScript لوڈ ہونے میں ناکام ہو

انٹرایکٹو JavaScript شامل کرنا: جدید ویب ایپلیکیشن منطق

اب آئیے JavaScript بنائیں جو ہمارے چیٹ انٹرفیس کو زندہ کرے۔ ہم جدید JavaScript پیٹرنز استعمال کریں گے جو آپ پیشہ ورانہ ویب ڈیولپمنٹ میں دیکھیں گے، بشمول ES6 کلاسز، async/await، اور ایونٹ پر مبنی پروگرامنگ۔

جدید JavaScript آرکیٹیکچر کو سمجھنا

پروسیجرل کوڈ لکھنے کے بجائے (ایک سیریز کے فنکشنز جو ترتیب وار چلتے ہیں)، ہم ایک کلاس پر مبنی آرکیٹیکچر بنائیں گے۔ کلاس کو اشیاء بنانے کے لیے بلیو پرنٹ کے طور پر سمجھیں – جیسے ایک آرکیٹیکٹ کا بلیو پرنٹ متعدد گھروں کی تعمیر کے لیے استعمال کیا جا سکتا ہے۔

ویب ایپلیکیشنز کے لیے کلاسز کیوں استعمال کریں؟

تنظیم: تمام متعلقہ فعالیت کو ایک ساتھ گروپ کرتا ہے
دوبارہ استعمال: آپ ایک ہی صفحے پر متعدد چیٹ انسٹینسز بنا سکتے ہیں
برقرار رکھنے کی صلاحیت: مخصوص خصوصیات کو ڈیبگ اور ترمیم کرنا آسان ہے
پیشہ ورانہ معیار: یہ پیٹرن React، Vue، اور Angular جیسے فریم ورک میں استعمال ہوتا ہے

app.js بنائیں اس جدید، اچھی طرح سے منظم JavaScript کے ساتھ:

// app.js - Modern chat application logic

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

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

ہر JavaScript تصور کو سمجھنا

ES6 کلاس ساخت:

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

Async/Await پیٹرن:

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

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

ایونٹ پر مبنی پروگرامنگ: کسی چیز کے ہونے کا مسلسل چیک کرنے کے بجائے، ہم ایونٹس "سن" کرتے ہیں:

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

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

DOM Manipulation:

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

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

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

سیکیورٹی اور بہترین طریقے

XSS روک تھام:

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

یہ کیوں اہم ہے: اگر کوئی صارف <script>alert('hack')</script> ٹائپ کرتا ہے، تو یہ فنکشن یقینی بناتا ہے کہ یہ کوڈ کے طور پر چلنے کے بجائے متن کے طور پر ظاہر ہو۔

غلطی سے نمٹنا:

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

صارف کے تجربے کے تحفظات:

پر امید UI: صارف کا پیغام فوراً شامل کریں، سرور کے جواب کا انتظار نہ کریں
لوڈنگ اسٹیٹس یہ آرکیٹیکچر قابل توسیع ہے – آپ آسانی سے پیغام کی تدوین، فائل اپلوڈز، یا متعدد گفتگو کے تھریڈز جیسے فیچرز شامل کر سکتے ہیں بغیر بنیادی ڈھانچے کو دوبارہ لکھے۔

اپنے چیٹ انٹرفیس کو اسٹائل کرنا

اب ہم CSS کے ساتھ ایک جدید، دلکش چیٹ انٹرفیس بنائیں گے۔ اچھی اسٹائلنگ آپ کی ایپلیکیشن کو پیشہ ورانہ محسوس کراتی ہے اور مجموعی صارف تجربے کو بہتر بناتی ہے۔ ہم جدید CSS خصوصیات جیسے Flexbox، CSS Grid، اور کسٹم پراپرٹیز کا استعمال کریں گے تاکہ ایک ذمہ دار اور قابل رسائی ڈیزائن بنایا جا سکے۔

styles.css فائل بنائیں اور ان جامع اسٹائلز کو شامل کریں:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS آرکیٹیکچر کو سمجھنا:

استعمال کرتا ہے CSS کسٹم پراپرٹیز (ویریبلز) مستقل تھیمنگ اور آسان دیکھ بھال کے لیے
نافذ کرتا ہے Flexbox لے آؤٹ ذمہ دار ڈیزائن اور مناسب ترتیب کے لیے
شامل کرتا ہے ہموار اینیمیشنز پیغام کی ظاہری شکل کے لیے بغیر توجہ ہٹائے
فراہم کرتا ہے صارف پیغامات، AI جوابات، اور غلطی کی حالتوں کے درمیان بصری فرق
سپورٹ کرتا ہے ذمہ دار ڈیزائن جو ڈیسک ٹاپ اور موبائل دونوں پر کام کرتا ہے
مدنظر رکھتا ہے رسائی کو کم حرکت کی ترجیحات اور مناسب کنٹراسٹ تناسب کے ساتھ
پیش کرتا ہے ڈارک موڈ سپورٹ صارف کے سسٹم کی ترجیحات کی بنیاد پر

اپنے بیک اینڈ URL کو ترتیب دینا

آخری مرحلہ یہ ہے کہ اپنے جاوا اسکرپٹ میں BASE_URL کو اپنے بیک اینڈ سرور سے ملانے کے لیے اپ ڈیٹ کریں:

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

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

اپنے بیک اینڈ URL کا تعین کرنا:

مقامی ترقی: اگر فرنٹ اینڈ اور بیک اینڈ دونوں کو مقامی طور پر چلایا جا رہا ہو تو http://localhost:5000 استعمال کریں
کوڈ اسپیسز: پورٹس ٹیب میں اپنے بیک اینڈ URL کو تلاش کریں جب پورٹ 5000 کو عوامی بنایا جائے
پروڈکشن: ہوسٹنگ سروس پر تعیناتی کے وقت اپنے اصل ڈومین سے تبدیل کریں

💡 ٹیسٹنگ ٹپ: آپ اپنے بیک اینڈ کو براہ راست ٹیسٹ کر سکتے ہیں اپنے براؤزر میں روٹ URL پر جا کر۔ آپ کو اپنے FastAPI سرور سے خوش آمدید پیغام نظر آنا چاہیے۔

ٹیسٹنگ اور تعیناتی

اب جب کہ آپ نے فرنٹ اینڈ اور بیک اینڈ دونوں اجزاء بنا لیے ہیں، آئیے سب کچھ ایک ساتھ کام کرنے کی جانچ کریں اور اپنے چیٹ اسسٹنٹ کو دوسروں کے ساتھ شیئر کرنے کے لیے تعیناتی کے اختیارات کو دریافت کریں۔

مقامی ٹیسٹنگ ورک فلو

اپنی مکمل ایپلیکیشن کی جانچ کے لیے ان مراحل پر عمل کریں:

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

مرحلہ وار ٹیسٹنگ کا عمل:

اپنا بیک اینڈ سرور شروع کریں:

cd backend
source venv/bin/activate  # or venv\Scripts\activate on Windows
python api.py

API کام کر رہا ہے اس کی تصدیق کریں:
- اپنے براؤزر میں http://localhost:5000 کھولیں
- آپ کو اپنے FastAPI سرور سے خوش آمدید پیغام نظر آنا چاہیے
اپنا فرنٹ اینڈ کھولیں:
- اپنے فرنٹ اینڈ ڈائریکٹری پر جائیں
- اپنے ویب براؤزر میں index.html کھولیں
- یا بہتر ترقیاتی تجربے کے لیے VS Code کے Live Server ایکسٹینشن کا استعمال کریں
چیٹ کی فعالیت کی جانچ کریں:
- ان پٹ فیلڈ میں ایک پیغام ٹائپ کریں
- "Send" پر کلک کریں یا Enter دبائیں
- تصدیق کریں کہ AI مناسب جواب دیتا ہے
- کسی بھی جاوا اسکرپٹ کی غلطیوں کے لیے براؤزر کنسول چیک کریں

عام مسائل کا حل

مسئلہ	علامات	حل
CORS ایرر	فرنٹ اینڈ بیک اینڈ تک نہیں پہنچ سکتا	یقینی بنائیں کہ FastAPI CORSMiddleware مناسب طریقے سے ترتیب دیا گیا ہے
API کلید ایرر	401 غیر مجاز جوابات	اپنے `GITHUB_TOKEN` ماحول متغیر کو چیک کریں
کنکشن ریفیوزڈ	فرنٹ اینڈ میں نیٹ ورک کی غلطیاں	بیک اینڈ URL کی تصدیق کریں اور یہ کہ Flask سرور چل رہا ہے
کوئی AI جواب نہیں	خالی یا غلط جوابات	API کوٹہ یا توثیق کے مسائل کے لیے بیک اینڈ لاگز چیک کریں

عام ڈیبگنگ کے اقدامات:

چیک کریں براؤزر ڈیولپر ٹولز کنسول میں جاوا اسکرپٹ کی غلطیاں
تصدیق کریں نیٹ ورک ٹیب کامیاب API درخواستوں اور جوابات کو دکھاتا ہے
جائزہ لیں بیک اینڈ ٹرمینل آؤٹ پٹ Python کی غلطیوں یا API مسائل کے لیے
تصدیق کریں کہ ماحول متغیرات مناسب طریقے سے لوڈ اور قابل رسائی ہیں

GitHub Copilot ایجنٹ چیلنج 🚀

ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:

تفصیل: چیٹ اسسٹنٹ کو گفتگو کی تاریخ اور پیغام کی مستقل مزاجی شامل کر کے بہتر بنائیں۔ یہ چیلنج آپ کو چیٹ ایپلیکیشنز میں اسٹیٹ کو منظم کرنے اور ڈیٹا اسٹوریج کو بہتر صارف تجربے کے لیے نافذ کرنے کا طریقہ سمجھنے میں مدد دے گا۔

پرومپٹ: چیٹ ایپلیکیشن میں گفتگو کی تاریخ شامل کریں جو سیشنز کے درمیان برقرار رہے۔ چیٹ پیغامات کو لوکل اسٹوریج میں محفوظ کرنے، صفحہ لوڈ ہونے پر گفتگو کی تاریخ دکھانے، اور "Clear History" بٹن شامل کرنے کی فعالیت شامل کریں۔ نیز ٹائپنگ انڈیکیٹرز اور پیغام کے وقت کے نشانات نافذ کریں تاکہ چیٹ کا تجربہ زیادہ حقیقت پسندانہ ہو۔

ایجنٹ موڈ کے بارے میں مزید جانیں۔

اسائنمنٹ: اپنا ذاتی AI اسسٹنٹ بنائیں

اب آپ اپنا AI اسسٹنٹ نافذ کریں گے۔ صرف ٹیوٹوریل کوڈ کو نقل کرنے کے بجائے، یہ ایک موقع ہے کہ آپ ان تصورات کو لاگو کریں اور کچھ ایسا بنائیں جو آپ کی دلچسپیوں اور استعمال کے معاملات کی عکاسی کرے۔

پروجیکٹ کی ضروریات

آئیے آپ کے پروجیکٹ کو صاف، منظم ڈھانچے کے ساتھ ترتیب دیں:

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

بنیادی نفاذ کے کام

بیک اینڈ ترقی:

ہمارا FastAPI کوڈ لیں اور اسے اپنا بنائیں
ایک منفرد AI شخصیت بنائیں – شاید ایک مددگار کھانے پکانے کا اسسٹنٹ، ایک تخلیقی لکھنے کا ساتھی، یا ایک مطالعہ کا ساتھی؟
مضبوط ایرر ہینڈلنگ شامل کریں تاکہ آپ کی ایپ خراب نہ ہو جب چیزیں غلط ہو جائیں
واضح دستاویزات لکھیں کسی کے لیے جو آپ کے API کو سمجھنا چاہتا ہو

فرنٹ اینڈ ترقی:

ایک چیٹ انٹرفیس بنائیں جو بدیہی اور خوش آمدید محسوس ہو
صاف، جدید جاوا اسکرپٹ لکھیں جسے آپ دوسرے ڈویلپرز کو دکھانے پر فخر کریں گے
اپنے AI کی شخصیت کی عکاسی کرنے کے لیے کسٹم اسٹائلنگ ڈیزائن کریں – تفریحی اور رنگین؟ صاف اور کم سے کم؟ مکمل طور پر آپ پر منحصر ہے!
یقینی بنائیں کہ یہ فونز اور کمپیوٹرز دونوں پر بہترین کام کرتا ہے

ذاتی نوعیت کی ضروریات:

ایک منفرد نام اور شخصیت کا انتخاب کریں اپنے AI اسسٹنٹ کے لیے – شاید کچھ ایسا جو آپ کی دلچسپیوں یا آپ کے حل کرنے کے مسائل کی عکاسی کرے
بصری ڈیزائن کو اپنی مرضی کے مطابق بنائیں تاکہ آپ کے اسسٹنٹ کے انداز سے میل کھائے
ایک دلکش خوش آمدید پیغام لکھیں جو لوگوں کو چیٹ شروع کرنے پر آمادہ کرے
اپنے اسسٹنٹ کو مختلف قسم کے سوالات کے ساتھ ٹیسٹ کریں تاکہ یہ دیکھ سکیں کہ یہ کیسے جواب دیتا ہے

بہتری کے خیالات (اختیاری)

کیا آپ اپنے پروجیکٹ کو اگلے درجے پر لے جانا چاہتے ہیں؟ یہاں کچھ دلچسپ خیالات ہیں جنہیں آپ دریافت کر سکتے ہیں:

فیچر	تفصیل	مہارتیں جو آپ مشق کریں گے
پیغام کی تاریخ	صفحہ ریفریش کے بعد بھی گفتگو کو یاد رکھیں	لوکل اسٹوریج کے ساتھ کام کرنا، JSON ہینڈلنگ
ٹائپنگ انڈیکیٹرز	جواب کا انتظار کرتے وقت "AI ٹائپ کر رہا ہے..." دکھائیں	CSS اینیمیشنز، async پروگرامنگ
پیغام کے وقت کے نشانات	دکھائیں کہ ہر پیغام کب بھیجا گیا	تاریخ/وقت فارمیٹنگ، UX ڈیزائن
چیٹ ایکسپورٹ کریں	صارفین کو اپنی گفتگو ڈاؤن لوڈ کرنے دیں	فائل ہینڈلنگ، ڈیٹا ایکسپورٹ
تھیم سوئچنگ	لائٹ/ڈارک موڈ ٹوگل	CSS ویریبلز، صارف کی ترجیحات
وائس انپٹ	اسپیچ ٹو ٹیکسٹ فعالیت شامل کریں	ویب APIs، رسائی

ٹیسٹنگ اور دستاویزات

کوالٹی اشورنس:

اپنی ایپلیکیشن کو مختلف ان پٹ اقسام اور ایج کیسز کے ساتھ ٹیسٹ کریں
مختلف اسکرین سائزز پر ذمہ دار ڈیزائن کی تصدیق کریں
کی بورڈ نیویگیشن اور اسکرین ریڈرز کے ساتھ رسائی کی جانچ کریں
HTML اور CSS کی معیارات کی تعمیل کے لیے توثیق کریں

دستاویزات کی ضروریات:

README.md لکھیں جو آپ کے پروجیکٹ اور اسے چلانے کا طریقہ بیان کرے
اپنے چیٹ انٹرفیس کی کارروائی میں اسکرین شاٹس شامل کریں
کسی بھی منفرد خصوصیات یا حسب ضرورت کو دستاویز کریں جو آپ نے شامل کی ہیں
دیگر ڈویلپرز کے لیے واضح سیٹ اپ ہدایات فراہم کریں

جمع کرانے کے رہنما اصول

پروجیکٹ کی ڈیلیوریبلز:

مکمل پروجیکٹ فولڈر تمام سورس کوڈ کے ساتھ
README.md پروجیکٹ کی تفصیل اور سیٹ اپ ہدایات کے ساتھ
اسکرین شاٹس جو آپ کے چیٹ اسسٹنٹ کو کارروائی میں دکھاتے ہیں
مختصر عکاسی کہ آپ نے کیا سیکھا اور کن چیلنجز کا سامنا کیا

تشخیص کے معیار:

فعالیت: کیا چیٹ اسسٹنٹ توقع کے مطابق کام کرتا ہے؟
کوڈ کا معیار: کیا کوڈ اچھی طرح سے منظم، تبصرہ شدہ، اور برقرار رکھنے کے قابل ہے؟
ڈیزائن: کیا انٹرفیس بصری طور پر دلکش اور صارف دوست ہے؟
تخلیقی صلاحیت: آپ کا نفاذ کتنا منفرد اور ذاتی نوعیت کا ہے؟
دستاویزات: کیا سیٹ اپ ہدایات واضح اور مکمل ہیں؟

💡 کامیابی کا مشورہ: پہلے بنیادی ضروریات سے شروع کریں، پھر اضافی خصوصیات شامل کریں جب سب کچھ کام کر رہا ہو۔ جدید خصوصیات شامل کرنے سے پہلے ایک پالش شدہ بنیادی تجربہ بنانے پر توجہ مرکوز کریں۔

حل

اضافی چیلنجز

کیا آپ اپنے AI اسسٹنٹ کو اگلے درجے پر لے جانے کے لیے تیار ہیں؟ ان اعلی درجے کے چیلنجز کو آزمائیں جو AI انضمام اور ویب ترقی کی آپ کی سمجھ کو گہرا کریں گے۔

شخصیت کی حسب ضرورت

حقیقی جادو تب ہوتا ہے جب آپ اپنے AI اسسٹنٹ کو ایک منفرد شخصیت دیتے ہیں۔ مختلف سسٹم پرامپٹس کے ساتھ تجربہ کریں تاکہ خصوصی اسسٹنٹس بن سکیں:

پیشہ ورانہ اسسٹنٹ مثال:

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

تخلیقی لکھنے کے معاون کی مثال:

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

تکنیکی رہنما مثال:

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

فرنٹ اینڈ بہتری

اپنے چیٹ انٹرفیس کو ان بصری اور فعال بہتریوں کے ساتھ تبدیل کریں:

اعلی درجے کی CSS خصوصیات:

ہموار پیغام کی حرکت اور ٹرانزیشن نافذ کریں
CSS شیپس اور گریڈینٹس کے ساتھ کسٹم چیٹ ببل ڈیزائن شامل کریں
AI کے "سوچنے" کے وقت کے لیے ٹائپنگ انڈیکیٹر اینیمیشن بنائیں
ایموجی ری ایکشنز یا پیغام کی ریٹنگ سسٹم ڈیزائن کریں

جاوا اسکرپٹ بہتری:

کی بورڈ شارٹ کٹس شامل کریں (Ctrl+Enter بھیجنے کے لیے، Escape ان پٹ صاف کرنے کے لیے)
پیغام کی تلاش اور فلٹرنگ کی فعالیت نافذ کریں
گفتگو ایکسپورٹ فیچر بنائیں (ٹیکسٹ یا JSON کے طور پر ڈاؤن لوڈ کریں)
لوکل اسٹوریج میں آٹو سیو شامل کریں تاکہ پیغام کا نقصان نہ ہو

اعلی درجے کی AI انضمام

متعدد AI شخصیات:

ڈراپ ڈاؤن بنائیں مختلف AI شخصیات کے درمیان سوئچ کرنے کے لیے
صارف کی پسندیدہ شخصیت کو لوکل اسٹوریج میں محفوظ کریں
سیاق و سباق کی تبدیلی نافذ کریں جو گفتگو کے بہاؤ کو برقرار رکھے

سمارٹ جواب کی خصوصیات:

گفتگو کے سیاق و سباق کی آگاہی شامل کریں (AI پچھلے پیغامات کو یاد رکھتا ہے)
گفتگو کے موضوع کی بنیاد پر سمارٹ تجاویز نافذ کریں
عام سوالات کے لیے فوری جواب کے بٹن بنائیں

🎯 سیکھنے کا مقصد: یہ اضافی چیلنجز آپ کو جدید ویب ترقی کے نمونوں اور AI انضمام کی تکنیکوں کو سمجھنے میں مدد دیتے ہیں جو پروڈکشن ایپلیکیشنز میں استعمال ہوتے ہیں۔

خلاصہ اور اگلے مراحل

مبارک ہو! آپ نے کامیابی کے ساتھ ایک مکمل AI پاورڈ چیٹ اسسٹنٹ شروع سے بنایا۔ اس پروجیکٹ نے آپ کو جدید ویب ترقی کی ٹیکنالوجیز اور AI انضمام کے ساتھ عملی تجربہ دیا ہے – وہ مہارتیں جو آج کے ٹیک منظر نامے میں انتہائی قیمتی ہیں۔

آپ نے کیا حاصل کیا

اس سبق کے دوران، آپ نے کئی اہم ٹیکنالوجیز اور تصورات میں مہارت حاصل کی:

بیک اینڈ ترقی:

GitHub Models API کے ساتھ انضمام AI فعالیت کے لیے
RESTful API بنایا Flask کا استعمال کرتے ہوئے مناسب ایرر ہینڈلنگ کے ساتھ
محفوظ توثیق نافذ کی ماحول متغیرات کا استعمال کرتے ہوئے
CORS کو ترتیب دیا فرنٹ اینڈ اور بیک اینڈ کے درمیان کراس اوریجن درخواستوں کے لیے

فرنٹ اینڈ ترقی:

ذمہ دار چیٹ انٹرفیس بنایا سیمینٹک HTML کا استعمال کرتے ہوئے
جدید جاوا اسکرپٹ نافذ کیا async/await اور کلاس پر مبنی آرکیٹیکچر کے ساتھ
دلچسپ صارف انٹرفیس ڈیزائن کیا CSS Grid، Flexbox، اور اینیمیشنز کے ساتھ
رسائی کی خصوصیات شامل کیں اور ذمہ دار ڈیزائن کے اصول

فل اسٹیک انضمام:

فرنٹ اینڈ اور بیک اینڈ کو HTTP API کالز کے ذریعے جوڑا
ریئل ٹائم صارف تعاملات اور غیر متزامن ڈیٹا فلو کو سنبھالا
ایرر ہینڈلنگ اور صارف کی رائے کو ایپلیکیشن میں نافذ کیا
مکمل ایپلیکیشن ورک فلو کی جانچ کی صارف انپٹ سے AI جواب تک

کلیدی سیکھنے کے نتائج

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

اس پروجیکٹ نے آپ کو AI پاورڈ ایپلیکیشنز بنانے کے بنیادی اصولوں سے متعارف کرایا ہے، جو ویب ترقی کا مستقبل ہے۔ آپ اب سمجھتے ہیں کہ AI صلاحیتوں کو روایتی ویب ایپلیکیشنز میں کیسے ضم کیا جائے، ایسے صارف تجربات تخلیق کرتے ہوئے جو ذہین اور جوابدہ محسوس ہوں۔

پیشہ ورانہ اطلاقات

اس سبق میں آپ نے جو مہارتیں حاصل کی ہیں وہ جدید سافٹ ویئر ترقی کے کیریئرز میں براہ راست قابل اطلاق ہیں:

فل اسٹیک ویب ترقی جدید فریم ورک اور APIs کا استعمال کرتے ہوئے
AI انضمام ویب ایپلیکیشنز اور موبائل ایپس میں
API ڈیزائن اور ترقی
ایپلیکیشنز کی جانچ کے لیے پورٹ فارورڈنگ

Codespaces کیا فراہم کرتا ہے:

ختم کرتا ہے مقامی ماحول کی ترتیب اور کنفیگریشن کے مسائل
فراہم کرتا ہے مختلف ڈیوائسز پر مستقل ترقیاتی ماحول
شامل کرتا ہے ویب ڈیولپمنٹ کے لیے پہلے سے کنفیگر شدہ ٹولز اور ایکسٹینشنز
پیش کرتا ہے GitHub کے ساتھ ورژن کنٹرول اور تعاون کے لیے بے جوڑ انضمام

🚀 پرو ٹپ: Codespaces AI ایپلیکیشنز سیکھنے اور پروٹوٹائپنگ کے لیے بہترین ہے کیونکہ یہ خود بخود پیچیدہ ماحول کی ترتیب کو سنبھالتا ہے، جس سے آپ کو کنفیگریشن کے مسائل کے بجائے تعمیر اور سیکھنے پر توجہ مرکوز کرنے کا موقع ملتا ہے۔

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔

101 KiB Raw Blame History Unescape Escape

چیٹ اسسٹنٹ بنائیں AI کے ساتھ

AI کو سمجھنا: راز سے مہارت تک

"Generative AI" اصل میں کیا ہے؟

AI ماڈلز کیسے سیکھتے ہیں (سادہ ورژن)

GitHub Models کیوں؟

Python بیک اینڈ انٹیگریشن سیٹ اپ کرنا

بنیادی نفاذ کو سمجھنا

پیغام کے کرداروں کو سمجھنا: AI گفتگو کا فریم ورک

AI پیرامیٹرز کو سمجھنا: جواب کے رویے کو بہتر بنانا

Temperature (0.0 سے 2.0): تخلیقی صلاحیت کا ڈائل

Max Tokens (1 سے 4096+): جواب کی لمبائی کا کنٹرولر

Top_p (0.0 سے 1.0): فوکس پیرامیٹر

سب کچھ ایک ساتھ رکھنا: مختلف استعمال کے معاملات کے لیے پیرامیٹرز کے امتزاج

سسٹم پرامپٹس کا جادو: AI شخصیت کو پروگرام کرنا

سسٹم پرامپٹس کیوں اتنے طاقتور ہیں

مؤثر سسٹم پرامپٹس تیار کرنا: فن اور سائنس

سسٹم پرامپٹس کے ساتھ سیاق و سباق میں مثالیں

سسٹم پرامپٹس کو عمل میں دیکھنا

سسٹم پرامپٹس کے لیے جدید تکنیکیں

آپ کے چیٹ اسسٹنٹ کے لیے اس کا مطلب کیوں ہے

FastAPI کے ساتھ ویب API بنانا: آپ کا اعلیٰ کارکردگی AI مواصلاتی مرکز

درخواست-جواب کے بہاؤ کو سمجھنا

API آرکیٹیکچر کو سمجھنا

FastAPI ایپلیکیشن بنانا

CORS: ویب کا سیکیورٹی گارڈ سمجھنا

CORS کیا ہے اور یہ کیوں موجود ہے؟

آپ کے ترقیاتی ماحول میں CORS

CORS سیکیورٹی: ترقی بمقابلہ پیداوار

عام CORS منظرنامے اور حل

غلطی ہینڈلنگ اور تصدیق

اپنا بیک اینڈ سیٹ اپ اور چلانا

Python ماحول کی ترتیب

ماحولیاتی ترتیب: رازوں کو محفوظ رکھنا

ماحولیاتی متغیرات کیا ہیں؟

ماحولیاتی متغیرات کیوں اہم ہیں

آپ کی ماحولیاتی فائل ترتیب دینا

آپ کا GitHub پرسنل ایکسیس ٹوکن بنانا

Python میں ماحولیاتی متغیرات لوڈ کرنا

Git سیکیورٹی: .gitignore فائل

مختلف ماحول، مختلف راز

اپنا ترقیاتی سرور شروع کرنا: اپنے FastAPI کو زندہ کرنا

FastAPI سرور اسٹارٹ اپ کے عمل کو سمجھنا

جب سب کچھ کام کرے تو آپ کو کیا دیکھنا چاہیے

عام اسٹارٹ اپ مسائل کا حل

ترقی کے بہترین طریقے

GitHub Codespaces کے لیے ترتیب دینا: کلاؤڈ میں ترقی کو آسان بنائیں

Codespaces نیٹ ورکنگ کو سمجھنا

Codespaces ترتیب دینے کے مراحل

Codespace URLs کو سمجھنا

اپنے Codespace سیٹ اپ کی جانچ کرنا

Codespaces بمقابلہ مقامی ترقی

Codespace ترقی کے نکات

فرنٹ اینڈ چیٹ انٹرفیس بنانا: جہاں انسان AI سے ملتے ہیں

جدید فرنٹ اینڈ آرکیٹیکچر کو سمجھنا

فرنٹ اینڈ ڈیولپمنٹ کے تین ستون

جدید JavaScript آرکیٹیکچر کیوں اہم ہے

پروجیکٹ اسٹرکچر سیٹ اپ

HTML بنیاد بنانا: قابل رسائی کے لیے سیمینٹک ساخت

دستاویز کی ساخت

سیمینٹک عناصر

قابل رسائی خصوصیات

CSS اور JavaScript انضمام

انٹرایکٹو JavaScript شامل کرنا: جدید ویب ایپلیکیشن منطق

جدید JavaScript آرکیٹیکچر کو سمجھنا

ہر JavaScript تصور کو سمجھنا

سیکیورٹی اور بہترین طریقے

اپنے چیٹ انٹرفیس کو اسٹائل کرنا

اپنے بیک اینڈ URL کو ترتیب دینا

ٹیسٹنگ اور تعیناتی

مقامی ٹیسٹنگ ورک فلو

عام مسائل کا حل

GitHub Copilot ایجنٹ چیلنج 🚀

اسائنمنٹ: اپنا ذاتی AI اسسٹنٹ بنائیں

پروجیکٹ کی ضروریات

بنیادی نفاذ کے کام

بہتری کے خیالات (اختیاری)

ٹیسٹنگ اور دستاویزات

جمع کرانے کے رہنما اصول

حل

101 KiB

Raw Blame History Unescape Escape