OmniRoute/docs/i18n/ur/docs/frameworks/PLAYGROUND_STUDIO.md

Playground Studio (اردو)

🌐 Languages: 🇺🇸 English · 🇪🇹 am · 🇸🇦 ar · 🇦🇿 az · 🇧🇬 bg · 🇧🇩 bn · 🇨🇿 cs · 🇩🇰 da · 🇩🇪 de · 🇬🇷 el · 🇪🇸 es · 🇪🇪 et · 🇮🇷 fa · 🇫🇮 fi · 🇫🇷 fr · 🇮🇪 ga · 🇮🇳 gu · 🇳🇬 ha · 🇮🇱 he · 🇮🇳 hi · 🇭🇷 hr · 🇭🇺 hu · 🇦🇲 hy · 🇮🇩 id · 🇳🇬 ig · 🇮🇹 it · 🇯🇵 ja · 🇬🇪 ka · 🇰🇭 km · 🇮🇳 kn · 🇰🇷 ko · 🇱🇹 lt · 🇱🇻 lv · 🇮🇳 ml · 🇮🇳 mr · 🇲🇾 ms · 🇲🇹 mt · 🇲🇲 my · 🇳🇵 ne · 🇳🇱 nl · 🇳🇴 no · 🇮🇳 or · 🇮🇳 pa · 🇵🇭 phi · 🇵🇱 pl · 🇵🇹 pt · 🇧🇷 pt-BR · 🇷🇴 ro · 🇷🇺 ru · 🇱🇰 si · 🇸🇰 sk · 🇸🇮 sl · 🇷🇸 sr · 🇸🇪 sv · 🇰🇪 sw · 🇮🇳 ta · 🇮🇳 te · 🇹🇭 th · 🇹🇷 tr · 🇺🇦 uk-UA · 🇺🇿 uz · 🇻🇳 vi · 🇳🇬 yo · 🇨🇳 zh-CN · 🇹🇼 zh-TW

---

فیچر: Playground Studio — /dashboard/playground کے لیے متحد AI ٹیسٹنگ ورک اسپیس۔ پلانز: 17-playground-studio-redesign.plan.md + _orchestration/master-plan-group-C.md اسٹیٹس: v3.8.6 میں جاری کیا گیا

---

جائزہ

Playground Studio، /dashboard/playground کو ایک سادہ Monaco پر مبنی ایڈیٹر سے تبدیل کرکے مکمل خصوصیات والی ٹیسٹنگ ورک اسپیس بناتا ہے۔ یہ سابقہ page.tsx کو ایک PlaygroundStudio شیل سے بدل دیتا ہے، جو چار ٹیبز اور ایک مشترکہ کنفیگ پین رینڈر کرتا ہے۔

┌ Playground ──────────────────────────────────────────────────────────┐
│ [💬 چیٹ] [⚖ موازنہ] [{} API] [🔧 بلڈ]        142↑ 38↓ · $0.002 </>│
├──────────────────────────────────────────┬───────────────────────────┤
│  {فعال ٹیب کا مواد}                      │ ─ کنفیگ                  │
│                                          │ اینڈ پوائنٹ [چیٹ ∨]      │
│                                          │ ماڈل       [gpt-5.4 ∨]   │
│                                          │ سسٹم       [متنی خانہ]   │
│                                          │ ٹیمپ        ▕▕▔▔ 0.7     │
│                                          │ پری سیٹس [▾ لوڈ][محفوظ] │
│                                          │ [✨ پرامپٹ بہتر کریں]     │
└──────────────────────────────────────────┴───────────────────────────┘

---

ٹیبز

چیٹ ٹیب

ChatPlayground.tsx کو ملٹی ٹرن اسٹریمنگ ورک بینچ میں تبدیل کرتا ہے:

• MarkdownMessage.tsx کے ذریعے مکمل مارک ڈاؤن رینڈرنگ (کوڈ بلاکس، ٹیبلز، فہرستیں، لنکس)۔
• سسٹم پرامپٹ مشترکہ کنفیگ پین سے حاصل کیا جاتا ہے۔
• فی پیغام ٹوکن/لاگت (پرامپٹ + تکمیلی ٹوکنز)۔
• آخری جواب دوبارہ تیار کرنے کی سہولت۔
• SSE اسٹریمنگ کے ساتھ POST /v1/chat/completions کو بھیجتا ہے۔

موازنہ ٹیب

پراکسی کے لیے اہم امتیازی خصوصیت: 1 پرامپٹ کو زیادہ سے زیادہ 4 ماڈلز پر متوازی طور پر چلائیں۔

• زیادہ سے زیادہ 4 کالمز، جن میں سے ہر ایک /v1/chat/completions سے آزادانہ طور پر اسٹریم کرتا ہے۔
• کالمز شامل کرنے کے لیے + ماڈل شامل کریں بٹن (Cmd+K شارٹ کٹ)۔
• سب چلائیں ▶، Promise.all + فی کالم AbortController کے ذریعے تمام اسٹریمز کو بیک وقت شروع کرتا ہے۔
• عالمی سب منسوخ کریں تمام زیرِ عمل اسٹریمز کو منقطع کرتا ہے۔
• فی کالم ProviderMetrics حقیقی وقت میں TTFT، TPS، ٹوکنز اور تخمینی لاگت دکھاتا ہے۔
• میٹرکس پر "کلائنٹ سائیڈ تخمینہ" (D12) کا لیبل ہوتا ہے — پہلے SSE چنک سے پیمائش کی جاتی ہے۔

API ٹیب

ماہر صارفین کے لیے اصل Monaco ایڈیٹر کو 100% برقرار رکھتا ہے (D14):

• 10 اینڈ پوائنٹس: چیٹ کمپلیشنز، کمپلیشنز، ایمبیڈنگز، تصاویر، آڈیو، اسپیچ، ٹرانسکرپشنز، موڈریشنز، ری رینک، سرچ۔
• ملٹی موڈل فائل اپ لوڈ۔
• حقیقی وقت کے آؤٹ پٹ کے ساتھ SSE اسٹریمنگ۔
• ApiTab.tsx کے طور پر لپیٹا گیا ہے (لیزی لوڈڈ، ssr: false)۔

بلڈ ٹیب

ٹولز/فنکشن کالنگ اور اسٹرکچرڈ آؤٹ پٹ UI:

• ToolsBuilder.tsx — فی ٹول JSON اسکیما ایڈیٹر کے ساتھ tools[] شامل/ترمیم/حذف کریں۔ پیرامیٹرز کی ToolDefinitionSchema (Zod) کے ذریعے توثیق کرتا ہے۔
• StructuredOutputEditor.tsx — JSON موڈ ٹوگل + JSON اسکیما ایڈیٹر۔ جواب کی اسکیما کے مطابق StructuredOutputSchema (Zod) کے ذریعے توثیق کرتا ہے۔
• درخواست کو tools[] اور/یا response_format کے ساتھ /v1/chat/completions پر بھیجتا ہے۔

---

کنفیگ پین (مشترکہ)

StudioConfigPane.tsx — ہمیشہ نظر آتا ہے، سمیٹنے کے قابل۔

فیلڈ	کمپوننٹ	نوٹس
اینڈ پوائنٹ	<select>	PlaygroundEndpoint سے مطابقت رکھنے والے 10 اختیارات
ماڈل	<input>	آزاد متن، مثلاً openai/gpt-4o
سسٹم پرامپٹ	<textarea>	تمام ٹیبز میں فراہم کیا جاتا ہے
پیرامیٹرز	ParamSliders	temperature، max_tokens، top_p، presence/frequency penalty، seed، stop
پری سیٹس	PresetPicker	نام شدہ کنفیگ اسنیپ شاٹس لوڈ/محفوظ کریں (DB میں برقرار رکھے جاتے ہیں)
پرامپٹ بہتر بنائیں	ImprovePromptButton	کوٹہ انتباہی موڈل کھولتا ہے، /api/playground/improve-prompt کو کال کرتا ہے

اسٹیٹ کو PlaygroundStudio.tsx میں اوپر منتقل کیا جاتا ہے اور تمام ٹیبز کو فراہم کیا جاتا ہے۔ ٹیبز تبدیل کرنے سے کنفیگ اسٹیٹ برقرار رہتی ہے۔

---

ٹاپ بار

StudioTopBar.tsx:

• ٹیب سوئچر (role="tablist")۔
• TokenCostCounter — براہِ راست ٹوکن (↑/↓) اور تخمینی لاگت کا ڈسپلے۔
• کوڈ ایکسپورٹ بٹن (</>) — ExportCodeModal کھولتا ہے۔

---

کوڈ ایکسپورٹ موڈل

ExportCodeModal.tsx موجودہ PlaygroundState سے curl / Python / TypeScript اسنیپٹس بنانے کے لیے codeExport.ts استعمال کرتا ہے۔ API کلید کا پلیس ہولڈر ہمیشہ $OMNIROUTE_API_KEY ہوتا ہے (D11)۔

---

پرامپٹ امپروور

ImprovePromptButton.tsx → useImprovePrompt.ts → POST /api/playground/improve-prompt:

1. موڈل خبردار کرتا ہے کہ "کوٹہ استعمال ہوگا"۔
2. تصدیق پر، روٹ کو { system, prompt, model, tone } بھیجتا ہے۔
3. روٹ اندرونی طور پر promptImprover.META_SYSTEM_PROMPT کے ساتھ /v1/chat/completions کو کال کرتا ہے۔
4. { improvedSystem?, improvedPrompt?, tokensIn, tokensOut } واپس کرتا ہے۔
5. UI، کنفیگ پین کے سسٹم پرامپٹ اور چیٹ ٹیب کے یوزر پرامپٹ کو پیچ کرتا ہے۔

---

پری سیٹس

PresetPicker.tsx → usePresets.ts → /api/playground/presets/*:

• playground_presets SQLite ٹیبل میں محفوظ کیے جاتے ہیں (مائیگریشن 084_playground_presets.sql)۔
• ہر پری سیٹ یہ محفوظ کرتا ہے: name، endpoint، model، system، params_json، created_at۔
• CRUD: GET فہرست، POST تخلیق، GET /:id، PUT /:id، DELETE /:id۔

---

اسٹریم میٹرکس

useStreamMetrics.ts + streamMetrics.ts (خالص فنکشن):

• start() — درخواست کے آغاز کا وقت ریکارڈ کرتا ہے۔
• onFirstChunk() — TTFT ریکارڈ کرتا ہے۔
• onChunk(n) — تکمیلی ٹوکنز کی تعداد جمع کرتا ہے۔
• finish(usage?) — حتمی میٹرکس کا حساب لگاتا ہے: ttftMs، totalMs، tps، tokensIn، tokensOut، costUsd۔
• قیمتوں کا تعین src/lib/playground/types.ts میں موجود جامد ٹیبل سے ہوتا ہے ("تخمینی" کا لیبل لگا ہوا — D13)۔

---

بیک اینڈ روٹس

طریقہ	پاتھ	ہینڈلر
POST	/api/playground/improve-prompt	ImprovePromptRequestSchema کے ذریعے Zod توثیق کرتا ہے؛ میٹا پرامپٹ کے ساتھ /v1/chat/completions کو کال کرتا ہے
GET	/api/playground/presets	{ presets: PlaygroundPresetListItem[] } واپس کرتا ہے
POST	/api/playground/presets	پری سیٹ بناتا ہے؛ PlaygroundPresetCreateSchema کی توثیق کرتا ہے
GET	/api/playground/presets/:id	ایک پری سیٹ یا 404 واپس کرتا ہے
PUT	/api/playground/presets/:id	جزوی اپ ڈیٹ
DELETE	/api/playground/presets/:id	204

توثیق: اختیاری (REQUIRE_API_KEY)۔ خرابیاں buildErrorBody() کے ذریعے (سخت اصول #12)۔

---

کلیدی فائلیں

راستہ	مقصد
src/app/(dashboard)/dashboard/playground/PlaygroundStudio.tsx	شیل کمپوننٹ، ٹیب آرکیسٹریٹر
src/app/(dashboard)/dashboard/playground/components/StudioTopBar.tsx	ٹیبز + کاؤنٹر + ایکسپورٹ بٹن
src/app/(dashboard)/dashboard/playground/components/StudioConfigPane.tsx	مشترکہ کنفیگریشن پینل
src/app/(dashboard)/dashboard/playground/components/tabs/ChatTab.tsx	چیٹ ورک بینچ
src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx	متعدد ماڈلز کا موازنہ
src/app/(dashboard)/dashboard/playground/components/tabs/ApiTab.tsx	Monaco ایڈیٹر (محفوظ شدہ)
src/app/(dashboard)/dashboard/playground/components/tabs/BuildTab.tsx	ٹولز + ساخت یافتہ آؤٹ پٹ
src/app/(dashboard)/dashboard/playground/components/ExportCodeModal.tsx	کوڈ ایکسپورٹ موڈل
src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx	واحد موازنہ کالم
src/app/(dashboard)/dashboard/playground/components/ProviderMetrics.tsx	TTFT/TPS ڈسپلے
src/app/(dashboard)/dashboard/playground/hooks/useStreamMetrics.ts	کلائنٹ سائیڈ میٹرک ہُک
src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts	پری سیٹس CRUD ہُک
src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts	پرامپٹ بہتر بنانے کا ہُک
src/lib/playground/codeExport.ts	curl/Python/TS جنریٹر (Search Tools کے ساتھ مشترک)
src/lib/playground/promptImprover.ts	میٹا پرامپٹ بلڈر
src/lib/playground/streamMetrics.ts	خالص میٹرکس کا حساب
src/lib/db/playgroundPresets.ts	DB ماڈیول (CRUD)
src/app/api/playground/improve-prompt/route.ts	پرامپٹ بہتر بنانے کا REST روٹ
src/app/api/playground/presets/route.ts	پری سیٹس کی فہرست + تخلیق
src/app/api/playground/presets/[id]/route.ts	پری سیٹس حاصل/اپ ڈیٹ/حذف کرنا
src/lib/db/migrations/084_playground_presets.sql	DB مائیگریشن

---

مسائل کا حل

علامت	وجہ	حل
API ٹیب میں Monaco ایڈیٹر رینڈر نہیں ہو رہا	SSR نے Monaco لوڈ کیا	تصدیق کریں کہ ApiTab میں dynamic(..., { ssr: false }) استعمال ہوتا ہے
تقابلی اسٹریمز یکے بعد دیگرے چلتی ہیں	Promise.all کا غلط استعمال	تمام اسٹریمز کا آغاز ایک ہی Promise.all کال میں ڈسپیچ ہونا چاہیے
میٹرکس میں TTFT کی قدر null دکھائی دیتی ہے	پہلے حصے کا ہینڈلر منسلک نہیں ہے	چیک کریں کہ SSE ریڈر لوپ میں useStreamMetrics.onFirstChunk() کال ہوتا ہے
پری سیٹ محفوظ نہیں رہتا	DB مائیگریشن نہیں چلائی گئی	npm run db:migrate چلائیں یا سرور ری اسٹارٹ کریں (مائیگریشن آغاز پر خودکار طور پر چلتی ہے)
پرامپٹ بہتر بنانے پر 502 واپس آتا ہے	Config میں ماڈل سیٹ نہیں ہے	بہتر بنانے سے پہلے صارف کو Config پین میں ماڈل کا نام درج کرنا ہوگا
ایکسپورٹ کردہ کوڈ میں MISSING_API_KEY دکھائی دیتا ہے	پلیس ہولڈر شامل نہیں کیا گیا	codeExport.ts ہمیشہ API_KEY_PLACEHOLDER = "$OMNIROUTE_API_KEY" استعمال کرتا ہے

---

حوالہ جات

• جامع منصوبہ: _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• فیچر منصوبہ: _tasks/features-v3.8.6/refactorpages/17-playground-studio-redesign.plan.md
• کوڈ ایکسپورٹ: src/lib/playground/codeExport.ts
• پرامپٹ بہتر بنانے والا: src/lib/playground/promptImprover.ts
• Search Tools Studio: docs/frameworks/SEARCH_TOOLS_STUDIO.md