OmniRoute/docs/i18n/km/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 · 🇮🇳 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 · 🇵🇰 ur · 🇺🇿 uz · 🇻🇳 vi · 🇳🇬 yo · 🇨🇳 zh-CN · 🇹🇼 zh-TW

---

មុខងារ: Playground Studio — កន្លែងការងាររួមសម្រាប់សាកល្បង AI នៅ /dashboard/playground។ ផែនការ: 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 </>│
├──────────────────────────────────────────┬───────────────────────────┤
│  {ខ្លឹមសារផ្ទាំងសកម្ម}                   │ ─ ការកំណត់រចនាសម្ព័ន្ធ   │
│                                          │ ចំណុចបញ្ចប់ [chat ∨]      │
│                                          │ ម៉ូដែល       [gpt-5.4 ∨]  │
│                                          │ ប្រព័ន្ធ     [textarea]   │
│                                          │ សីតុណ្ហភាព   ▕▕▔▔ 0.7     │
│                                          │ កំណត់ជាមុន [▾ ផ្ទុក][រក្សាទុក]│
│                                          │ [✨ កែលម្អ prompt]         │
└──────────────────────────────────────────┴───────────────────────────┘

---

ផ្ទាំង

ផ្ទាំងជជែក

អភិវឌ្ឍ ChatPlayground.tsx ទៅជាកន្លែងការងារស្ទ្រីមពហុវេន៖

• ការបង្ហាញ markdown ពេញលេញតាមរយៈ MarkdownMessage.tsx (ប្លុកកូដ តារាង បញ្ជី និងតំណ)។
• prompt ប្រព័ន្ធត្រូវបានយកពីផ្ទាំងការកំណត់រចនាសម្ព័ន្ធរួម។
• ថូខិន/ថ្លៃចំណាយក្នុងមួយសារ (ថូខិន prompt + ថូខិនលទ្ធផល)។
• បង្កើតការឆ្លើយតបចុងក្រោយឡើងវិញ។
• ផ្ញើទៅ POST /v1/chat/completions ដោយប្រើការស្ទ្រីម SSE។

ផ្ទាំងប្រៀបធៀប

ចំណុចខុសប្លែកសំខាន់សម្រាប់ប្រូកស៊ី៖ ដំណើរការ prompt 1 លើម៉ូដែលរហូតដល់ 4 ក្នុងពេលដំណាលគ្នា។

• រហូតដល់ 4 ជួរឈរ ដែលជួរឈរនីមួយៗស្ទ្រីមដោយឯករាជ្យពី /v1/chat/completions។
• ប៊ូតុង + បន្ថែមម៉ូដែល (ផ្លូវកាត់ Cmd+K) សម្រាប់បន្ថែមជួរឈរ។
• ដំណើរការទាំងអស់ ▶ ចាប់ផ្តើមស្ទ្រីមទាំងអស់ក្នុងពេលដំណាលគ្នាតាមរយៈ Promise.all + AbortController ដាច់ដោយឡែកសម្រាប់ជួរឈរនីមួយៗ។
• បោះបង់ទាំងអស់ ជាសកលបញ្ឈប់រាល់ស្ទ្រីមដែលកំពុងដំណើរការ។
• ProviderMetrics តាមជួរឈរនីមួយៗបង្ហាញ TTFT, TPS, ថូខិន និងថ្លៃចំណាយប៉ាន់ស្មានក្នុងពេលជាក់ស្តែង។
• ម៉ែត្រត្រូវបានដាក់ស្លាកថា "ការប៉ាន់ស្មានខាងម៉ាស៊ីនភ្ញៀវ" (D12) — វាស់ចាប់ពីផ្នែកទិន្នន័យ SSE ដំបូង។

ផ្ទាំង API

រក្សាទុក 100% នៃកម្មវិធីកែសម្រួល Monaco ដើមសម្រាប់អ្នកប្រើប្រាស់កម្រិតខ្ពស់ (D14)៖

• ចំណុចបញ្ចប់ 10៖ chat completions, completions, embeddings, images, audio, speech, transcriptions, moderations, rerank, search។
• ការផ្ទុកឯកសារពហុមេឌៀឡើង។
• ការស្ទ្រីម SSE ជាមួយលទ្ធផលក្នុងពេលជាក់ស្តែង។
• ត្រូវបានរុំជា ApiTab.tsx (ផ្ទុកយឺត, ssr: false)។

ផ្ទាំងបង្កើត

UI សម្រាប់ការហៅ tools/function និងលទ្ធផលដែលមានរចនាសម្ព័ន្ធ៖

• ToolsBuilder.tsx — បន្ថែម/កែសម្រួល/លុប tools[] ជាមួយកម្មវិធីកែសម្រួល JSON schema សម្រាប់ tool នីមួយៗ។ ផ្ទៀងផ្ទាត់ parameters តាមរយៈ ToolDefinitionSchema (Zod)។
• StructuredOutputEditor.tsx — បិទបើក JSON mode + កម្មវិធីកែសម្រួល JSON schema។ ផ្ទៀងផ្ទាត់ការឆ្លើយតបទល់នឹង schema តាមរយៈ StructuredOutputSchema (Zod)។
• ផ្ញើសំណើទៅ /v1/chat/completions ជាមួយ tools[] និង/ឬ response_format។

ផ្ទាំងកំណត់រចនាសម្ព័ន្ធ (ប្រើរួម)

StudioConfigPane.tsx — បង្ហាញជានិច្ច និងអាចបង្រួមបាន។

វាល	សមាសភាគ	កំណត់ចំណាំ
Endpoint	<select>	ជម្រើស 10 ដែលត្រូវគ្នានឹង PlaygroundEndpoint
Model	<input>	អត្ថបទសេរី ឧ. openai/gpt-4o
System prompt	<textarea>	ត្រូវបានបញ្ចូលទៅក្នុងផ្ទាំងទាំងអស់
Parameters	ParamSliders	temperature, max_tokens, top_p, presence/frequency penalty, seed, stop
Presets	PresetPicker	ផ្ទុក/រក្សាទុក snapshot នៃការកំណត់រចនាសម្ព័ន្ធដែលមានឈ្មោះ (រក្សាទុកក្នុង DB)
Improve prompt	ImprovePromptButton	បើក modal ព្រមានអំពី quota ហើយហៅ /api/playground/improve-prompt

State ត្រូវបានលើកទៅ PlaygroundStudio.tsx ហើយបញ្ជូនចុះទៅផ្ទាំងទាំងអស់។ ការប្តូរផ្ទាំង រក្សា state នៃការកំណត់រចនាសម្ព័ន្ធ។

---

របារខាងលើ

StudioTopBar.tsx:

• ឧបករណ៍ប្តូរផ្ទាំង (role="tablist")។
• TokenCostCounter — ការបង្ហាញចំនួន token (↑/↓) ផ្ទាល់ និងតម្លៃប៉ាន់ស្មាន។
• ប៊ូតុងនាំចេញកូដ (</>) — បើក ExportCodeModal។

---

Modal នាំចេញកូដ

ExportCodeModal.tsx ប្រើ codeExport.ts ដើម្បីបង្កើត snippet សម្រាប់ curl / Python / TypeScript ពី PlaygroundState បច្ចុប្បន្ន។ Placeholder សម្រាប់ API key គឺតែងតែ $OMNIROUTE_API_KEY (D11)។

---

ឧបករណ៍កែលម្អ Prompt

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

1. Modal ព្រមានថា "នឹងប្រើប្រាស់ quota"។
2. នៅពេលបញ្ជាក់ វាផ្ញើ { system, prompt, model, tone } ទៅ route។
3. Route ហៅ /v1/chat/completions នៅខាងក្នុងដោយប្រើ promptImprover.META_SYSTEM_PROMPT។
4. ត្រឡប់ { improvedSystem?, improvedPrompt?, tokensIn, tokensOut }។
5. UI ធ្វើ patch លើ system prompt ក្នុងផ្ទាំងកំណត់រចនាសម្ព័ន្ធ និង user prompt ក្នុងផ្ទាំង Chat។

---

Preset

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

• រក្សាទុកក្នុងតារាង SQLite playground_presets (migration 084_playground_presets.sql)។
• Preset នីមួយៗរក្សាទុក៖ name, endpoint, model, system, params_json, created_at។
• CRUD៖ GET បញ្ជី, POST បង្កើត, GET /:id, PUT /:id, DELETE /:id។

---

Metrics នៃ Stream

useStreamMetrics.ts + streamMetrics.ts (អនុគមន៍សុទ្ធ):

• start() — កត់ត្រាពេលចាប់ផ្តើម request។
• onFirstChunk() — កត់ត្រា TTFT។
• onChunk(n) — បូកសរុបចំនួន completion token។
• finish(usage?) — គណនា metrics ចុងក្រោយ៖ ttftMs, totalMs, tps, tokensIn, tokensOut, costUsd។
• តម្លៃពីតារាងថេរក្នុង src/lib/playground/types.ts (ដាក់ស្លាកថា "បានប៉ាន់ស្មាន" — D13)។

---

Route ខាង Backend

Method	Path	Handler
POST	/api/playground/improve-prompt	ផ្ទៀងផ្ទាត់ ImprovePromptRequestSchema ដោយ Zod; ហៅ /v1/chat/completions ជាមួយ meta-prompt
GET	/api/playground/presets	ត្រឡប់ { presets: PlaygroundPresetListItem[] }
POST	/api/playground/presets	បង្កើត preset; ផ្ទៀងផ្ទាត់ PlaygroundPresetCreateSchema
GET	/api/playground/presets/:id	ត្រឡប់ preset មួយ ឬ 404
PUT	/api/playground/presets/:id	ធ្វើបច្ចុប្បន្នភាពដោយផ្នែក
DELETE	/api/playground/presets/:id	204

Auth៖ ជាជម្រើស (REQUIRE_API_KEY)។ Error តាមរយៈ 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	Hook ម៉ែត្រិកផ្នែកម៉ាស៊ីនភ្ញៀវ
src/app/(dashboard)/dashboard/playground/hooks/usePresets.ts	Hook CRUD សម្រាប់ការកំណត់ជាមុន
src/app/(dashboard)/dashboard/playground/hooks/useImprovePrompt.ts	Hook កែលម្អប្រូមต์
src/lib/playground/codeExport.ts	កម្មវិធីបង្កើត curl/Python/TS (ប្រើរួមជាមួយឧបករណ៍ស្វែងរក)
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

---

ការដោះស្រាយបញ្ហា

រោគសញ្ញា	មូលហេតុ	ដំណោះស្រាយ
កម្មវិធីកែសម្រួល Monaco មិនបង្ហាញនៅក្នុងផ្ទាំង API	SSR បានផ្ទុក Monaco	ផ្ទៀងផ្ទាត់ថា ApiTab ប្រើ dynamic(..., { ssr: false })
ស្ទ្រីមប្រៀបធៀបដំណើរការតាមលំដាប់	ការប្រើប្រាស់ Promise.all មិនត្រឹមត្រូវ	ការចាប់ផ្ដើមស្ទ្រីមទាំងអស់ត្រូវតែបញ្ជូនក្នុងការហៅ Promise.all តែមួយ
ម៉ែត្របង្ហាញ TTFT ជា null	កម្មវិធីដោះស្រាយចំណែកទិន្នន័យដំបូងមិនបានតភ្ជាប់	ពិនិត្យថា useStreamMetrics.onFirstChunk() ត្រូវបានហៅក្នុងរង្វិលជុំកម្មវិធីអាន SSE
ការកំណត់ជាមុនមិនត្រូវបានរក្សាទុក	មិនបានដំណើរការការផ្លាស់ប្ដូរ DB	ដំណើរការ npm run db:migrate ឬចាប់ផ្ដើមម៉ាស៊ីនមេឡើងវិញ (ការផ្លាស់ប្ដូរដំណើរការដោយស្វ័យប្រវត្តិនៅពេលចាប់ផ្ដើម)
ការកែលម្អប្រអប់បញ្ចូលត្រឡប់ 502	ម៉ូដែលមិនបានកំណត់នៅក្នុងការកំណត់	អ្នកប្រើត្រូវបញ្ចូលឈ្មោះម៉ូដែលក្នុងផ្ទាំងការកំណត់ មុនពេលធ្វើការកែលម្អ
កូដនាំចេញបង្ហាញ 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