|
|
# កសាងជំនួយការជជែកជាមួយ AI
|
|
|
|
|
|
ចងចាំនៅក្នុង Star Trek ពេលក្រុមយោធាជជែកជាមួយកុំព្យូទ័រនាវាកូនសង្សាយ ដើម្បីសួរទៅវាអំពីសំណួរវិបស្សនៈ ហើយទទួលបានចម្លើយមានអត្ថន័យ? រឿងនិទានវិទ្យាសាស្ត្រពិតមួយដែលហៅថា science fiction នៅឆ្នាំ 1960 ឥឡូវនេះអ្នកអាចបង្កើតវាបានដោយប្រើបច្ចេកវិទ្យាវែបដែលអ្នកបានស្គាល់រួចហើយ។
|
|
|
|
|
|
នៅក្នុងមេរៀននេះ យើងនឹងបង្កើតជំនួយការជជែក AI ដោយប្រើ HTML, CSS, JavaScript និងការតភ្ជាប់ក្រោយម៉ាស៊ីនមួយខ្លះ។ អ្នកនឹងស្វែងរកវិធីដែលជំនាញដូចគ្នាដែលអ្នកបានរៀនអាចភ្ជាប់ទៅកាន់សេវាកម្ម AI ដ៏មានថាមពលដែលអាចយល់ន័យបរិបទ និងបង្កើតចម្លើយមានអត្ថន័យ។
|
|
|
|
|
|
គិតថា AI គឺដូចជាការចូលដំណើរការបណ្ណាល័យធំមួយ ដែលមិនត្រឹមតែរកព័ត៌មានប៉ុណ្ណោះទេ ប៉ុន្តែអាចសម្រួលវាចេញជាចម្លើយមានរចនាប័ទ្មដែលឆបគ្នាជាមួយសំណួររបស់អ្នក។ មិនចាំបាច់រកសៀវភៅរាប់ពាន់ទំព័រ អ្នកទទួលបានចម្លើយផ្ទាល់ ដែលមានបរិបទជាក់លាក់។
|
|
|
|
|
|
ការតភ្ជាប់ត្រូវបានប្រតិបត្តិតាមបច្ចេកវិទ្យាវែបដែលស្គាល់គ្នា។ HTML បង្កើតផ្ទាំងជជែក CSS គ្រប់គ្រងរចនាបថមើលឃើញ JavaScript គ្រប់គ្រងអន្តរកម្មអ្នកប្រើ ហើយ API ផ្នែកក្រោយភ្ជាប់គ្រប់យ៉ាងទៅកាន់សេវាកម្ម AI។ វាស្រដៀងនឹងវិធីដែលផ្នែកផ្សេងៗរបស់ឧបករណ៍តន្ត្រីធ្វើការជាមួយគ្នាដើម្បីបង្កើតតន្ត្រីសម្រង់។
|
|
|
|
|
|
យើងគ្រាន់តែបង្កើតស្ពានចូលរវាងការប្រាស្រ័យទាក់ទងដោយធម្មជាតិតាមមនុស្ស និង ការបំលែងដោយម៉ាស៊ីន។ អ្នកនឹងរៀនទាំងការប្រតិបត្តិផ្នែកបច្ចេកទេសនៃការតភ្ជាប់សេវាកម្ម AI និងលំនាំរចនាដែលធ្វើឲ្យអន្តរកម្មមានអារម្មណ៍ទាក់ទាញ។
|
|
|
|
|
|
នៅចុងបញ្ចប់មេរៀននេះ ការតភ្ជាប់ AI នឹងមិនមែនជាដំណើរការស្អប់ស្អើងទេ ប៉ុន្តែក្លាយជាតំណភ្ជាប់ API មួយទៀតដែលអ្នកអាចប្រើបាន។ អ្នកនឹងយល់លំនាំមូលដ្ឋានដែលបញ្ជូនកម្មវិធីដូចជា ChatGPT និង Claude យ៉ាងដូចគ្នា ដោយប្រើគោលការណ៍អភិវឌ្ឍន៍វែបដែលអ្នកបានរៀន។
|
|
|
|
|
|
## ⚡ អ្វីដែលអ្នកអាចធ្វើបាន ក្នុងរយៈពេល 5 នាទីក្រោយ
|
|
|
|
|
|
**ផ្លូវចាប់ផ្តើមលឿនសម្រាប់អ្នកអភិវឌ្ឍដែលរវល់**
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A[⚡ ៥ នាទី] --> B[ទទួលបានសញ្ញា GitHub]
|
|
|
B --> C[សាកល្បងលេង AI]
|
|
|
C --> D[ចម្លងកូដ Python]
|
|
|
D --> E[មើលចម្លើយ AI]
|
|
|
```
|
|
|
- **នាទីទី 1**៖ ទៅកាន់ [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ហើយបង្កើត token ចូលប្រើផ្ទាល់ខ្លួន
|
|
|
- **នាទីទី 2**៖ សាកល្បងអន្តរកម្ម AI ដោយផ្ទាល់នៅផ្ទាំងប្រើប្រាស់
|
|
|
- **នាទីទី 3**៖ ចុចផ្ទាំង "Code" ហើយចម្លង snippet Python
|
|
|
- **នាទីទី 4**៖ បើកបញ្ចូលកូដក្នុងម៉ាស៊ីនជាមួយ token របស់អ្នក៖ `GITHUB_TOKEN=your_token python test.py`
|
|
|
- **នាទីទី 5**៖ មើលចម្លើយ AI ផ្តើមបង្ហាញពីកូដរបស់អ្នក
|
|
|
|
|
|
**កូដសាកល្បងលឿន**៖
|
|
|
```python
|
|
|
import os
|
|
|
from openai import OpenAI
|
|
|
|
|
|
client = OpenAI(
|
|
|
base_url="https://models.github.ai/inference",
|
|
|
api_key="your_token_here"
|
|
|
)
|
|
|
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Hello AI!"}],
|
|
|
model="openai/gpt-4o-mini"
|
|
|
)
|
|
|
|
|
|
print(response.choices[0].message.content)
|
|
|
```
|
|
|
|
|
|
**ហេតុអ្វីវាសំខាន់**៖ ក្នុងរយៈពេល 5 នាទី អ្នកនឹងទទួលបានបទពិសោធន៍វេទមន្តនៃអន្តរកម្ម AI ដោយកម្មវិធី។ វាជាប្លុកសំណុំមូលដ្ឋានដែលបញ្ជូនកម្មវិធី AI ដែលអ្នកប្រើជានិច្ច។
|
|
|
|
|
|
នេះជាប្រាក់សារដ្ឋានរបស់គម្រោងដែលអ្នកអាចទទួលបាន៖
|
|
|
|
|
|
|
|
|
|
|
|
## 🗺️ យានដ្ឋានរៀនរបស់អ្នកតាមរយៈអភិវឌ្ឍន៍កម្មវិធី AI
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title ពីការអភិវឌ្ឍវេបទៅការរួមបញ្ចូល AI
|
|
|
section ការយល់ដឹងពីមូលដ្ឋាន AI
|
|
|
រកឃើញគំនិត AI បង្កើតថ្មី៖ 4: You
|
|
|
ស្វែងយល់ពីវេទិកាម៉ូដែល GitHub៖ 6: You
|
|
|
ជំនាញពាក្យបញ្ជា និងប៉ារ៉ាម៉ែត AI៖ 8: You
|
|
|
section ការរួមបញ្ចូលផ្នែកខាងសេវាកម្ម
|
|
|
សាងសង់ម៉ាស៊ីនមេ API Python៖ 5: You
|
|
|
អនុវត្តការហៅមុខងារ AI៖ 7: You
|
|
|
គ្រប់គ្រងប្រតិបត្តិការប្រតិកម្មមិន đồng bộ៖ 8: You
|
|
|
section ការអភិវឌ្ឍផ្នែកមុខងារ
|
|
|
បង្កើតចំណុចប្រទាក់ជជែកទំនើប៖ 6: You
|
|
|
ជំនាញទំនាក់ទំនងពេលវេលាពិត៖ 8: You
|
|
|
សាងសង់បទពិសោធន៍អ្នកប្រើប្រាស់ឆ្លាតវៃ៖ 9: You
|
|
|
section ការអនុវត្តវិជ្ជាជីវៈ
|
|
|
ដាក់ប្រព័ន្ធ AI ពេញលេញ៖ 7: You
|
|
|
បង្កើនគំរូប្រសិទ្ធភាព៖ 8: You
|
|
|
បង្កើតកម្មវិធីសម្របសម្រួលសម្រាប់ផលិតកម្ម៖ 9: You
|
|
|
```
|
|
|
**គោលដៅនៃការធ្វើដំណើររបស់អ្នក**៖ នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងបានបង្កើតកម្មវិធីដំណើរការជាមួយ AI មួយ ពេញលេញ ដោយប្រើបច្ចេកវិទ្យា និងលំនាំដដែលដែលជំនួយការហ្មត់ AI ម៉ូដទំនើបដូចជា ChatGPT, Claude និង Google Bard ប្រើ។
|
|
|
|
|
|
## ការយល់ដឹងអំពី AI: ពីអាថ៌កំបាំងទៅជាការគ្រប់គ្រង
|
|
|
|
|
|
មុនចូលទៅក្នុងកូដ យើងមកយល់ពីអ្វីដែលយើងកំពុងធ្វើការ។ ប្រសិនបើអ្នកធ្លាប់ប្រើ API មកហើយ អ្នកបានស្គាល់លំនាំមូលដ្ឋាន ៖ ផ្ញើសំណើ - ទទួលចម្លើយ។
|
|
|
|
|
|
API AI ធ្វើដូចគ្នា ប៉ុន្តេញិតចេញមិនមែនជាការយកទិន្នន័យដែលបានរក្សាទុកពីរាល់កន្លែងទេ តែបង្កើតចម្លើយថ្មីដោយផ្អែកលើលំនាំដែលបានរៀនពីអត្ថបទច្រើនណាស់។ គិតថាវាដូចជាផ្នែកខុសគ្នារវាងប្រព័ន្ធបញ្ជីសៀវភៅបណ្ណាល័យ និងបណ្ណាអ្នកបណ្ណាល័យមានចំណេះដឹង អាចសម្រួលព័ត៌មានពីប្រភពច្រើន។
|
|
|
|
|
|
### "AI បង្កើត" មានន័យយ៉ាងដូចម្តេច?
|
|
|
|
|
|
គិតពីរបៀប ដែល Rosetta Stone អនុញ្ញាតឲ្យអ្នកស្រាវជ្រាវយល់ភាសាជីវចារាជ្រិតអេហ្ស៊ីបត ដោយរកលំនាំរវាងភាសាដែលស្គាល់ និងមិនស្គាល់។ ម៉ូដែល AI ក៏ដូចជាមួយគ្នា – វារកលំនាំក្នុងអត្ថបទធំទូលាយដើម្បីយល់ភាសា បន្ទាប់មកប្រើលំនាំទាំងនេះសម្រាប់បង្កើតចម្លើយសមនឹងសំណួរថ្មី។
|
|
|
|
|
|
**យើងខ្ញុំបំបែកវាជាទូទៅ៖**
|
|
|
- **មូលដ្ឋានទិន្នន័យចាស់**៖ ដូចជាការស្នើសុំសញ្ញាបត្រកំណើត – អ្នកទទួលបានឯកសារដដែលគ្មានផ្លាស់ប្តូរ
|
|
|
- **ម៉ាស៊ីនស្វែងរក**៖ ដូចជាការស្នើសុំឲ្យបណ្ណាអ្នកផ្តល់សៀវភៅអំពីឆ្មា – ពួកគេសម្គាល់ និងបង្ហាញអ្វីដែលមាន
|
|
|
- **Generative AI**៖ ដូចជាស្នើសុំមិត្តរបស់អ្នកដែលមានចំណេះដឹងអំពីឆ្មា – ពួកគេច្រៀងអ្វីដែលគួរឱ្យចាប់អារម្មណ៍ដោយពាក្យរបស់ខ្លួន ដែលផ្គូផ្គងតាមអ្វីដែលអ្នកចង់ដឹង
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[សំណួររបស់អ្នក] --> B[ម៉ូដែល AI]
|
|
|
B --> C[ការទទួលស្គាល់គំរូ]
|
|
|
C --> D[ការបង្កើតមាតិកា]
|
|
|
D --> E[ការឆ្លើយតបមានបរិបទ]
|
|
|
|
|
|
F[ទិន្នន័យបណ្ដុះបណ្ដាល<br/>សៀវភៅ អត្ថបទ វេបសាយ] --> B
|
|
|
```
|
|
|
### របៀប AI ម៉ូដែលរៀន (ជាកំណែសាមញ្ញ)
|
|
|
|
|
|
AI ម៉ូដែលរៀនតាមការបង្ហាញឯកសារធំទូលាយដែលមានអត្ថបទពីសៀវភៅ, អត្ថបទ, និងការសន្ទនា។ តាមរបៀបនេះវាបង្កើតលំនាំ៖
|
|
|
- របៀបគំនិតត្រូវបានរៀបចំក្នុងការប្រាស្រ័យ
|
|
|
- ពាក្យណាដែលបង្ហាញជាទៀងទាត់
|
|
|
- របៀបសន្ទនាស្ទើរតែអនុវត្ត
|
|
|
- ហេតុផលបរិបទរវាងការប្រាស្រ័យផ្លូវការនិងមិនផ្លូវការ
|
|
|
|
|
|
**វាស្រដៀងនឹងរបៀបដែលអ្នកកក្សត្រាដោះស្រាយភាសាបុរាណ**៖ ពួកគេចាត់ផ្តល់ឧទាហរណ៍រាប់ពាន់ ដើម្បីយល់វេយ្យាករណ៍, ពាក្យសម្គាល់ និងបរិបទវប្បធម៌ នៅចុងក្រោយអាចបកស្រាយអត្ថបទថ្មីដោយប្រើលំនាំរៀន។
|
|
|
|
|
|
### ហេតុអ្វីជ្រើស GitHub Models?
|
|
|
|
|
|
យើងប្រើ GitHub Models ដោយហេតុផលពេញនិយម – វាផ្តល់ដល់យើងនូវការចូលដំណើរការ AI កម្រិតអាជីវកម្ម បើគ្មានការតំឡើងហេដ្ឋារចនាសម្ព័ន្ធ AI របស់ខ្លួន (ដែលជំនាញប្រាកដ អ្នកមិនចង់ធ្វើឥឡូវនេះទេ!)។ គិតថាវាដូចជាការប្រើ API អាកាសធាតុ មិនចាំបាច់តំឡើងស្ថានីយ៍អាកាសធាតុ។
|
|
|
|
|
|
វាជាពីរូបមន្ត "AI-as-a-Service" ហើយភាគច្រើនគឺឥតគិតថ្លៃចាប់ផ្តើម ដូច្នេះអ្នកអាចសាកល្បងដោយមិនបារម្ភពីវិក្កយបត្រ។
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[UI ជជែកមុខងារ] --> B[API ផ្នែកខាងត្រង់របស់អ្នក]
|
|
|
B --> C[API ទំរង់ GitHub]
|
|
|
C --> D[ដំណើរការម៉ូដែល AI]
|
|
|
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))
|
|
|
Understanding AI
|
|
|
Generative Models
|
|
|
ការទទួលស្គាល់រូបមន្ត
|
|
|
ការបង្កើតមាតិកា
|
|
|
ការយល់ដឹងបរិបទ
|
|
|
សមាសភាពចម្លើយ
|
|
|
AI Parameters
|
|
|
ការគ្រប់គ្រងសីតុណ្ហភាព
|
|
|
ចំណុចដែនកំណត់តូកិន
|
|
|
ការត្រង Top-p
|
|
|
ប្រព័ន្ធការហៅ
|
|
|
Backend Architecture
|
|
|
API Integration
|
|
|
ម៉ូឌែល GitHub
|
|
|
ការផ្ទៀងផ្ទាត់
|
|
|
ការដោះស្រាយសំណើ
|
|
|
ការគ្រប់គ្រងកំហុស
|
|
|
Python Infrastructure
|
|
|
ស្ថាបត្យកម្ម FastAPI
|
|
|
ប្រតិកម្មអាស៊ីនខ្នាត
|
|
|
សន្តិសុខបរិយាកាស
|
|
|
ការកំណត់ CORS
|
|
|
Frontend Experience
|
|
|
Chat Interface
|
|
|
បច្ចុប្បន្នភាពពេលវេលាប្រសព្វ
|
|
|
ប្រវត្តិសារ
|
|
|
មតិយោបល់អ្នកប្រើ
|
|
|
ស្ថានភាពបញ្ចូល
|
|
|
Modern Web Tech
|
|
|
ថ្នាក់ ES6
|
|
|
Async/Await
|
|
|
ការប្រើប្រាស់ DOM
|
|
|
ការគ្រប់គ្រងព្រឹត្តិការណ៍
|
|
|
Professional Patterns
|
|
|
Security Best Practices
|
|
|
ការគ្រប់គ្រងតូកិន
|
|
|
ការបញ្ជាក់បញ្ចូល
|
|
|
ការបង្ហាញ XSS
|
|
|
ជម្រះកំហុស
|
|
|
Production Readiness
|
|
|
ការបង្កើនសមត្ថភាព
|
|
|
ទីតាំងឆ្លើយតប
|
|
|
ការចូលដំណើរការ
|
|
|
យុទ្ធសាស្ដ្រពិនិត្យ
|
|
|
```
|
|
|
**គោលការណ៍មូលដ្ឋាន**៖ ការអភិវឌ្ឍកម្មវិធី AI បញ្ចូលជំនាញអភិវឌ្ឍវែបបែបចាស់ជាមួយការតភ្ជាប់សេវា AI ដើម្បីបង្កើតកម្មវិធីឆ្លាតវៃដែលមានអារម្មណ៍ធម្មជាតិ និងឆ្លើយតបលឿនចំពោះអ្នកប្រើ។
|
|
|
|
|
|
|
|
|
|
|
|
**អ្វីដែលធ្វើឲ្យផ្លេយក្រដាស់មានប្រយោជន៍ ៖**
|
|
|
- **សាកល្បង** ម៉ូដែល AI ផ្សេងៗដូចជា GPT-4o-mini, Claude និងផ្សេងទៀត (ទាំងអស់ឥតគិតថ្លៃ!)
|
|
|
- **សាកល្បង** គំនិត និងសេចក្តីផ្ដើមមុនសរសេរកូដណាមួយ
|
|
|
- **ទទួល** កូដអាចប្រើបានជាភាសាកម្មវិធីដែលអ្នកចូលចិត្ត
|
|
|
- **បត់បែន** ការកំណត់ដូចជា កម្រិតភាពច្នៃប្រឌិត និងប្រវែងចម្លើយ ដើម្បីមើលផលប៉ះពាល់
|
|
|
|
|
|
បន្ទាប់ពីលេងល្បែងលះ អ្នកគ្រាន់តែចុចផ្ទាំង "Code" ហើយជ្រើសភាសាកម្មវិធីដើម្បីទទួលបានកូដអនុវត្ត។
|
|
|
|
|
|
|
|
|
|
|
|
## ការតំឡើង Python សម្រាប់ការតភ្ជាប់ផ្នែកក្រោយ
|
|
|
|
|
|
ឥឡូវនេះ យើងអនុវត្តការតភ្ជាប់ AI ដោយប្រើ Python។ Python ល្អសម្រាប់កម្មវិធី AI ដោយសាររចនាសម្ព័ន្ធសាមញ្ញ និងបណ្ណាល័យមានថាមពល។ យើងចាប់ផ្តើមជាមួយកូដពី GitHub Models playground បន្ទាប់មកកំណត់រៀបចំមកជាឧទាហរណ៍មួយដែលអាចប្រើឡើងវិញនិងមានស្រេចសម្រាប់ផលិតកម្ម។
|
|
|
|
|
|
### ការយល់ដឹងអំពីអនុវត្តមូលដ្ឋាន
|
|
|
|
|
|
ពេលអ្នកចម្លងកូដ Python ពីផ្លេយក្រដាស់ អ្នកនឹងទទួលបានអ្វីមួយដូចនៅទីនេះ។ កុំបារម្ភ ប្រសិនបើវាហាក់ដូចច្រើនពេក – មកដើរមកវិញជាផ្នែកៗ៖
|
|
|
|
|
|
```python
|
|
|
"""Run this model in Python
|
|
|
|
|
|
> pip install openai
|
|
|
"""
|
|
|
import os
|
|
|
from openai import OpenAI
|
|
|
|
|
|
# ដើម្បីផ្ទៀងផ្ទាត់អត្តសញ្ញាណជាមួយម៉ូដែល អ្នកត្រូវការបង្កើតស្លាកសោការចូលប្រើផ្ទាល់ខ្លួន (PAT) នៅក្នុងការកំណត់ GitHub របស់អ្នក។
|
|
|
# បង្កើតស្លាកសោ PAT របស់អ្នកដោយអនុវត្តបញ្ជារណ៍នៅទីនេះ: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
|
|
|
client = OpenAI(
|
|
|
base_url="https://models.github.ai/inference",
|
|
|
api_key=os.environ["GITHUB_TOKEN"],
|
|
|
)
|
|
|
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": "",
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": "What is the capital of France?",
|
|
|
}
|
|
|
],
|
|
|
model="openai/gpt-4o-mini",
|
|
|
temperature=1,
|
|
|
max_tokens=4096,
|
|
|
top_p=1
|
|
|
)
|
|
|
|
|
|
print(response.choices[0].message.content)
|
|
|
```
|
|
|
|
|
|
**អ្វីកំពុងត្រូវបានអនុវត្តក្នុងកូដនេះ**៖
|
|
|
- **យើងនាំចូល** ឧបករណ៍ដែលត្រូវការ៖ `os` សម្រាប់អានអថេរបរិស្ថាន និង `OpenAI` សម្រាប់ទំនាក់ទំនង AI
|
|
|
- **យើងកំណត់** ម៉ាស៊ីនភ្ញៀវ OpenAI ទៅម៉ាស៊ីនបម្រើ AI របស់ GitHub ជំនួស OpenAI ទ្រង់ទ្រាយផ្ទាល់
|
|
|
- **យើងផ្ទៀងផ្ទាត់** ដោយប្រើ token GitHub ពិសេស (ពេលក្រោយនឹងពន្យល់!)
|
|
|
- **យើងរៀបចំសន្ទនា** ជាមួយតួ "roles" ផ្សេងៗ – គិតថាវាស្រដៀងនឹងរៀបចំឋានការណ៍លេង
|
|
|
- **យើងផ្ញើ** សំណើទៅ AI នឹងមានកំណត់បរិមាណមួយចំនួន
|
|
|
- **យើងយកចេញ** ព័ត៌មានចម្លើយពីទិន្នន័យដែលបានតបសង
|
|
|
|
|
|
### ការយល់ដឹងអំពីតួនាទីសារ៖ គំរូសន្ទនាអាជីវ AI
|
|
|
|
|
|
សន្ទនាអាជីវ AI ប្រើរចនាសម្ព័ន្ធជាមួយតួ "roles" ផ្សេងៗដែលមានគោលបំណងខុសគ្នា៖
|
|
|
|
|
|
```python
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": "You are a helpful assistant who explains things simply."
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": "What is machine learning?"
|
|
|
}
|
|
|
]
|
|
|
```
|
|
|
|
|
|
**គិតថាវាស្មើនឹងការបញ្ជូនឱ្យតួអង្គលេងរឿង**៖
|
|
|
- **តួនាទីប្រព័ន្ធ**៖ ដូចជាគន្លងលេងឲ្យតួអង្គ – ផ្ដល់ដល់ AI របៀបអប់រំ អាវុធ និងរបៀបឆ្លើយ
|
|
|
- **តួនាទីអ្នកប្រើ**៖ សំណួរឬសារពីមនុស្សប្រើកម្មវិធី
|
|
|
- **តួនាទីជំនួយការ**៖ ចម្លើយ AI (អ្នកមិនផ្ញើនេះទេ ប៉ុន្តែវាផ្ទុកនៅក្នុងប្រវត្តិសន្ទនា)
|
|
|
|
|
|
**អាថ៌កំបាំងក្នុងជីវិតពិត**៖ គិតថាអ្នកណែនាំមិត្តទៅសំណព្វម្នាក់នៅក្នុងប្រលោមលោក៖
|
|
|
- **សារប្រព័ន្ធ**៖ "នេះជាមិត្តស្រីខ្ញុំ Sarah គឺជាជំនួយការពេទ្យដែលល្អក្នុងការពន្យល់យ៉ាងងាយស្រួល"
|
|
|
- **សារអ្នកប្រើ**៖ "អ្នកអាចពន្យល់ពីរបៀបដែលវីធីសាស្ត្រពាក់ព័ន្ធទទួលបានវ៉ាក់សាំងដែរឬទេ?"
|
|
|
- **ចម្លើយជំនួយការ**៖ Sarah ឆ្លើយរៀបរាប់ក្នុងបែបជំនួយការពេទ្យមិត្តភាព មិនមែនជាខាងច្បាប់ឬចុងម្រាមស្រ្តីផ្ទះផាយ
|
|
|
|
|
|
### ការយល់ដឹងអំពីប៉ារ៉ាម៉ែត្ររបស់ AI៖ ការតំឡើងសកម្មភាពចម្លើយ
|
|
|
|
|
|
ប៉ារ៉ាម៉ែត្រខ្នាតលេខក្នុងការហៅ API AI គ្រប់គ្រងវិធីដែលម៉ូដែលបង្កើតចម្លើយ។ ការកំណត់ទាំងនេះ អនុញ្ញាតឲ្យអ្នកកែតម្រូវអាកប្បកិរិយា AI សម្រាប់បំណងប្រើខុសៗគ្នា។
|
|
|
|
|
|
#### អ្នកវាស់កម្រិតច្នៃប្រឌិត (Temperature 0.0 ទៅ 2.0)
|
|
|
|
|
|
**អ្វីដែលវាធ្វើ**៖ គ្រប់គ្រងថាតើចម្លើយ AI មានភាពច្នៃប្រឌិត ឬអាចអួតត្រង់ប៉ុណ្ណា។
|
|
|
|
|
|
**គិតថាវាស្រដៀងនឹងកម្រិតបង្កើតរបស់ музыការ jazz:**
|
|
|
- **Temperature = 0.1**៖ លេងតន្ត្រីតួស្រដៀងគ្នាទាំងឡាយ (អាចទស្សនាបានច្បាស់)
|
|
|
- **Temperature = 0.7**៖ បន្ថែមការបំលែងល្អៗ មិនបាត់បង់អត្តសញ្ញាណ (ច្នៃប្រឌិតត្រូវតុល្យ)
|
|
|
- **Temperature = 1.5**៖ Jazz ស្រាលពេញលេញ មានការប្រែប្រួលមិនចេះភ្លេច (មិនអាចទស្សនាបាន)
|
|
|
|
|
|
```python
|
|
|
# ចម្លើយដែលអាចទាយបានយ៉ាងច្បាស់ (ល្អសម្រាប់សំណួរព័ត៌មាន)
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "What is 2+2?"}],
|
|
|
temperature=0.1 # ជាញឹកញាប់នឹងនិយាយថា "4"
|
|
|
)
|
|
|
|
|
|
# ចម្លើយមានការច្នៃប្រឌិត (ល្អសម្រាប់ការស្ទ្រាយគំនិត)
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Write a creative story opening"}],
|
|
|
temperature=1.2 # នឹងបង្កើតរឿងរ៉ាវមិនធ្លាប់មាន និងមិនបានរំពឹងទុក
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### ខ្ទង់ Token អតិបរមា (Max Tokens 1 ទៅ 4096+)
|
|
|
|
|
|
**អ្វីដែលវាធ្វើ**៖ កំណត់កម្ពស់នៃប្រវែងចម្លើយ AI។
|
|
|
|
|
|
**គិតថា token ម្នាក់លើសលប់ជាសន្ទស្សន៍ពាក្យ** (ប្រហែល 1 token = 0.75 ពាក្យភាសាអង់គ្លេស)៖
|
|
|
- **max_tokens=50**៖ ខ្លីតូច និងផ្អែម (ដូចសារកាត់)
|
|
|
- **max_tokens=500**៖ មួយកថាខណ្ឌល្អ
|
|
|
- **max_tokens=2000**៖ ពន្យល់លម្អិតជាមួយឧទាហរណ៍
|
|
|
|
|
|
```python
|
|
|
# ចម្លើយខ្លី និងចំរូង
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Explain JavaScript"}],
|
|
|
max_tokens=100 # បង្ខំបង្ហាញអត្ថន័យដោយសង្ខេប
|
|
|
)
|
|
|
|
|
|
# ចម្លើយលំអិត និងទូលំទូលាយ
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Explain JavaScript"}],
|
|
|
max_tokens=1500 # អនុញ្ញាតឲ្យមានការពន្យល់លំអិតជាមួយនឹងឧទាហរណ៍
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### Top_p (0.0 ទៅ 1.0): ប៉ារ៉ាម៉ែត្រយកចិត្តទុកដាក់
|
|
|
|
|
|
**អ្វីដែលវាធ្វើ**៖ គ្រប់គ្រងថាតើ AI ផ្តោតលើចម្លើយដែលសាកសមបំផុត ប៉ុន្មាន។
|
|
|
|
|
|
**គិតថា AI មានវាក្យសព្ទជាច្រើន និងត្រូវបានរៀបចំតាមការជៀសវាងផ្នែកមួយ**៖
|
|
|
- **top_p=0.1**៖ គិតតែពាក្យ ១០% ខាងលើបំផុត (ផ្តោតខ្លាំង)
|
|
|
- **top_p=0.9**៖ គិតពាក្យ ៩០% (ច្នៃប្រឌិត)
|
|
|
- **top_p=1.0**៖ គិតពេញលេញ (ភាពចម្រុះខ្ពស់)
|
|
|
|
|
|
**ឧទាហរណ៍**៖ ប្រសិនបើអ្នកសួរ "មេឃធម្មតា..."
|
|
|
- **top_p តូច**៖ ជាប់ថ្លៃថា "ខៀវ"
|
|
|
- **top_p ខ្ពស់**៖ ក្រៅពី "ខៀវ" មាន "ពពក", "ធំ", "ផ្លាស់ប្តូរ", "ស្រស់ស្អាត" ហើយផ្សេងទៀត។
|
|
|
|
|
|
### រួមបញ្ចូលគ្នា៖ ប៉ារ៉ាម៉ែត្រចម្រុះសម្រាប់ការប្រើប្រាស់ខុសៗគ្នា
|
|
|
|
|
|
```python
|
|
|
# សម្រាប់ចម្លើយដែលមានរឿងត្រឹមត្រូវ និងមានសេចក្ដីណែនាំជាប្រចាំ (ដូចជាបុរេប្រឹក្សាឯកសារ)
|
|
|
factual_params = {
|
|
|
"temperature": 0.2,
|
|
|
"max_tokens": 300,
|
|
|
"top_p": 0.3
|
|
|
}
|
|
|
|
|
|
# សម្រាប់ជំនួយសរសេរច្នៃប្រឌិត
|
|
|
creative_params = {
|
|
|
"temperature": 1.1,
|
|
|
"max_tokens": 1000,
|
|
|
"top_p": 0.9
|
|
|
}
|
|
|
|
|
|
# សម្រាប់ចម្លើយមានសំណូក និងជួយបាន (មានការតុល្យភាព)
|
|
|
conversational_params = {
|
|
|
"temperature": 0.7,
|
|
|
"max_tokens": 500,
|
|
|
"top_p": 0.8
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```mermaid
|
|
|
quadrantChart
|
|
|
title ម៉ាទ្រីចធ្វើអវិជ្ជមានប៉ារ៉ាម៉ែត្ររបស់ AI
|
|
|
x-axis ការច្នៃប្រឌិតទាប --> ការច្នៃប្រឌិតខ្ពស់
|
|
|
y-axis ចម្លើយខ្លី --> ចម្លើយយូរ
|
|
|
|
|
|
quadrant-1 បណ្ដាញបង្កើតច្នៃប្រឌិត
|
|
|
quadrant-2 ការវិស্লেষលម្អិត
|
|
|
quadrant-3 ព័ត៌មានរហ័ស
|
|
|
quadrant-4 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**
|
|
|
- **រក្សាពត៌មានម៉ូដែលដូចគ្នា សម្រាប់អាកប្បកិរិយាត្រឹមត្រូវដោយឥតផ្លាស់ប្តូរ**
|
|
|
|
|
|
### វេទមន្ដសារប្រព័ន្ធ៖ ការបញ្ច programmation បុគ្គលិកភាព AI
|
|
|
|
|
|
ប្រសិនបើប៉ារ៉ាម៉ែត្រគ្រប់គ្រងវិធីដែល AI គិត ប៉ុន្តែសារប្រព័ន្ធគ្រប់គ្រងថា AI គិតថាវាគឺជាអ្នកណា។ នេះជាមួួយល្អៗសម្រាប់ការងារជាមួយ AI – អ្នកផ្តល់បុគ្គលិកភាពពេញលេញ ជំនាញ និងរបៀបប្រាស្រ័យរបស់ AI។
|
|
|
|
|
|
**គិតថាសារប្រព័ន្ធដូចជា ណែនាំតួអង្គតួផ្សេងៗសម្រាប់តួនាទីខុសគ្នា**៖ មិនមែនមានជំនួយការញឹកញាប់មួយទេ អ្នកអាចបង្កើតជំនាញជាក់លាក់សម្រាប់ស្ថានการณ์នីមួយៗ។ តើអ្នកត្រូវការអ្នកគ្រូព្យាបាលអត់? មិត្តភក្តិបង្កើតគំនិតច្នៃប្រឌិត? ឱបិកាយអាជីវកម្មមិនចូលចិត្តការលេងល្បិច? គ្រាន់តែកែសារប្រព័ន្ធ!
|
|
|
|
|
|
#### ហេតុអ្វីសារប្រព័ន្ធមានអំណាចខ្លាំង
|
|
|
|
|
|
អ្វីគួរឱ្យភ្ញាក់ផ្អើល៖ ម៉ូដែល AI ត្រូវបានបណ្តុះបណ្តាលលើសន្ទនាច្រើនដែលមនុស្សនិពន្ធតួនាទី និងជំនាញផ្សេងៗ។ ពេលអ្នកផ្តល់តួនាទីជាក់លាក់ឲ្យ AI វាស្រដៀងនឹងបើកការសកម្មការនៃលំនាំរៀនទាំងអស់។
|
|
|
|
|
|
**វាស្រដៀងនឹងការលេងតួរតួអង្គយ៉ាងជ្រាលជ្រៅ**៖ ប្រាប់តួអង្គថា "អ្នកជាគ្រូប៊ុយលែនចាស់ដែលមានចំណេះដឹង" ហើយមើលថាតួអង្គកែប្រែអាកប្បកិរិយា ពាក្យ និងរបៀបនិយាយ។ AI ក៏ធ្វើដូចគ្នានៅលើលំនាំភាសា។
|
|
|
|
|
|
#### ការបង្កើតសារប្រព័ន្ធដែលមានប្រសិទ្ធភាព៖ សិល្បៈ និងវិទ្យាសាស្ត្រ
|
|
|
|
|
|
**រចនាសម្ព័ន្ធសារប្រព័ន្ធល្អ**៖
|
|
|
1. **តួនាទី/អត្តសញ្ញាណ**៖ AI គឺជាយ៉ាងដូចម្តេច?
|
|
|
2. **ជំនាញ**៖ វាដឹងអ្វី?
|
|
|
3. **របៀបប្រាស្រ័យទាក់ទង**៖ វានិយាយយ៉ាងដូចម្តេច?
|
|
|
4. **សេចក្តីណែនាំជាក់លាក់**៖ វាគួរតែផ្តោតលើអ្វី?
|
|
|
|
|
|
```python
|
|
|
# ❌ សេចក្ដីបញ្ជាលំអៀងរបស់ប្រព័ន្ធ
|
|
|
"You are helpful."
|
|
|
|
|
|
# ✅ សេចក្ដីបញ្ជាលម្អិត និងមានប្រសិទ្ធភាពរបស់ប្រព័ន្ធ
|
|
|
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
|
|
|
```
|
|
|
|
|
|
#### ឧទាហរណ៍សារប្រព័ន្ធជាមួយបរិបទ
|
|
|
|
|
|
មកមើលថាសារប្រព័ន្ធផ្សេងៗបង្កើតបុគ្គលិកភាព AI ដែលខុសគ្នាគ្នា៖
|
|
|
|
|
|
```python
|
|
|
# ឧទាហរណ៍ទី 1: អ្នកគ្រូដែលមានអត់ធ្មត់
|
|
|
teacher_prompt = """
|
|
|
You are an experienced programming instructor who has taught thousands of students.
|
|
|
You break down complex concepts into simple steps, use analogies from everyday life,
|
|
|
and always check if the student understands before moving on. You're encouraging
|
|
|
and never make students feel bad for not knowing something.
|
|
|
"""
|
|
|
|
|
|
# ឧទាហរណ៍ទី 2: អ្នកសហការបង្កើតគំនិត
|
|
|
creative_prompt = """
|
|
|
You are a creative writing partner who loves brainstorming wild ideas. You're
|
|
|
enthusiastic, imaginative, and always build on the user's ideas rather than
|
|
|
replacing them. You ask thought-provoking questions to spark creativity and
|
|
|
offer unexpected perspectives that make stories more interesting.
|
|
|
"""
|
|
|
|
|
|
# ឧទាហរណ៍ទី 3: អ្នកប្រឹក្សាអាជីវកម្មយុទ្ធសាស្រ្ត
|
|
|
business_prompt = """
|
|
|
You are a strategic business consultant with an MBA and 20 years of experience
|
|
|
helping startups scale. You think in frameworks, provide structured advice,
|
|
|
and always consider both short-term tactics and long-term strategy. You ask
|
|
|
probing questions to understand the full business context before giving advice.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### មើលសារប្រព័ន្ធក្នុងសកម្មភាព
|
|
|
|
|
|
សាកល្បងសំណួរដូចគ្នាជាមួយសារប្រព័ន្ធផ្សេងៗ ដើម្បីឃើញភាពខុសគ្នាដ៏ច្បាស់លាស់៖
|
|
|
|
|
|
**សំណួរ**៖ "តើធ្វើដូចម្តេចដើម្បីគ្រប់គ្រងការផ្ទៀងផ្ទាត់អ្នកប្រើនៅក្នុងកម្មវិធីវែបរបស់ខ្ញុំ?"
|
|
|
|
|
|
```python
|
|
|
# ជាមួយការជំរុញពីគ្រូៈ
|
|
|
teacher_response = call_llm(
|
|
|
"How do I handle user authentication in my web app?",
|
|
|
teacher_prompt
|
|
|
)
|
|
|
# សំណើឆ្លើយតបផ្ទាល់: "សំណួរល្អណាស់! យើងមកបំបែកការផ្ទៀងផ្ទាត់អត្តសញ្ញាណជាជំហានសាមញ្ញ។
|
|
|
# គិតវាដូចជាអ្នកត្រួតពិនិត្យអត្តសញ្ញាណនៅក្លੱਬយប់ម្ដង..."
|
|
|
|
|
|
# ជាមួយការជំរុញពីអាជីវកម្មៈ
|
|
|
business_response = call_llm(
|
|
|
"How do I handle user authentication in my web app?",
|
|
|
business_prompt
|
|
|
)
|
|
|
# សំណើឆ្លើយតបផ្ទាល់: "ពីចំណុចមើលយុទ្ធសាស្ត្រមានសារៈសំខាន់ណាស់ចំពោះការផ្ទៀងផ្ទាត់អត្តសញ្ញាណសម្រាប់អ្នកប្រើប្រាស់
|
|
|
# ការជឿទុកចិត្ត និងការអនុលោមតាមស្តង់ដារជាអ្វីមួយ។ អនុញ្ញាតឲ្យខ្ញុំរៀបចំរចនាសម្ព័ន្ធដែលពិចារណាលើសុវត្ថិភាព,
|
|
|
# ប្រសិទ្ធភាពប្រើប្រាស់ និងការអាចពង្រីកបាន..."
|
|
|
```
|
|
|
|
|
|
#### ក្បូនវេទមន្តសារប្រព័ន្ធកម្រិតខ្ពស់
|
|
|
|
|
|
**1. ការកំណត់បរិបទ**៖ ផ្ដល់ព័ត៌មានផ្ទៃក្រោយឲ្យ AI
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are helping a junior developer who just started their first job at a startup.
|
|
|
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
|
|
|
Be encouraging and explain things step-by-step without being condescending.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
**2. ការរៀបចំលទ្ធផល**៖ ប្រាប់ AI របៀបរៀបចំចម្លើយ
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are a technical mentor. Always structure your responses as:
|
|
|
1. Quick Answer (1-2 sentences)
|
|
|
2. Detailed Explanation
|
|
|
3. Code Example
|
|
|
4. Common Pitfalls to Avoid
|
|
|
5. Next Steps for Learning
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
**3. ការកំណត់ការរឹតបន្តឹង**: កំណត់អ្វីដែល AI មិនគួរធ្វើ
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are a coding tutor focused on teaching best practices. Never write complete
|
|
|
solutions for the user - instead, guide them with hints and questions so they
|
|
|
learn by doing. Always explain the 'why' behind coding decisions.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### ហេតុអ្វីបានជា វាមានសារៈសំខាន់សម្រាប់ជំនួយការជជែករបស់អ្នក
|
|
|
|
|
|
ការយល់ដឹងពី system prompts ផ្ដល់ឱ្យអ្នកនូវថាមពលដ៏អស្ចារ្យក្នុងការបង្កើតជំនួយការជាតិ AI ជាពិសេស៖
|
|
|
- **កូនចៅសេវាកម្មអតិថិជន**: ជួយសោះ អត់ធ្មត់ យល់ដឹងគោលនយោបាយ
|
|
|
- **គ្រូបង្រៀន**: លើកទឹកចិត្ត ជំហាន់ដល់ជំហាន់ ពិនិត្យការយល់ដឹង
|
|
|
- **ដៃគូបង្កើតនិពន្ធ**: មានស្នាដៃ គ្រួសរលើគំនិត សួរថា "តើបើជា?"
|
|
|
- **អ្នកជំនាញបច្ចេកទេស**: ជាក់លាក់ ពិស្តារ សង្កត់ធ្ងន់ទៅលើសុវត្ថិភាព
|
|
|
|
|
|
**ចំណុចចម្បង**: អ្នកមិនត្រឹមតែចូលបម្រើ API AI តែប៉ុណ្ណោះទេ – អ្នកកំពុងបង្កើតបុគ្គលិកភាព AI ផ្ទាល់ខ្លួន ដែលបម្រើករណីប្រើជាក់លាក់របស់អ្នក។ នេះជាហេតុផលដែលកម្មវិធី AI សម័យថ្មី មានអារម្មណ៍បូកបន្ថែម និងមានប្រយោជន៍ជាងការដែលគេសំដៅទូទៅ។
|
|
|
|
|
|
### 🎯 ពិនិត្យទស្សនវិជ្ជាសិក្សា: ការកម្មវិធីបុគ្គលិកភាព AI
|
|
|
|
|
|
**ឈប់ និងគិត**: អ្នកទើបតែបានរៀនកម្មវិធីបុគ្គលិកភាព AI តាម system prompts។ នេះជជំនាញមូលដ្ឋានក្នុងការអភិវឌ្ឍកម្មវិធី AI សម័យថ្មី។
|
|
|
|
|
|
**ការវាយតម្លៃខ្លីៗដោយផ្ទាល់**៖
|
|
|
- តើអ្នកអាចពណ៌នាថា system prompts ខុសពីសារប្រើប្រាស់សារធម្មតាយ៉ាងដូចម្តេច?
|
|
|
- តើ temperature និង top_p មានភាពខុសគ្នាយ៉ាងដូចម្តេច?
|
|
|
- តើអ្នកនឹងបង្កើត system prompt សម្រាប់ករណីប្រើប្រាស់ជាក់លាក់ (ដូចជា គ្រូបង្រៀនកូដ) ដោយរបៀបណា?
|
|
|
|
|
|
**ការតភ្ជាប់ជាក់ស្តែង**: បច្ចេកទេស system prompt ដែលអ្នកបានរៀន មានការប្រើប្រាស់នៅក្នុងកម្មវិធី AI ដ៏ធំនានា - ចាប់ពីជំនួយ GitHub Copilot ដល់ចំណុចប្រទាក់ជជែក ChatGPT។ អ្នកកំពុងអភិវឌ្ឍលំនាំដូចជាក្រុមផលិតផល AI នៅក្រុមហ៊ុនបច្ចេកវិទ្យាធំៗ។
|
|
|
|
|
|
**សំណួរប្រកួតប្រជែង**: តើអ្នកអាចរចនាបុគ្គលិកភាព AI ផ្សេងៗសម្រាប់ប្រភេទអ្នកប្រើប្រាស់ផ្សេងៗ (អ្នកចាប់ផ្តើម ប្រៀបធៀបជាមួយអ្នកជំនាញ) ដោយរបៀបណា? សូមពិចារណាថា ពីរបៀបអនុវត្តតែមួយ AI មានសមត្ថភាពបម្រើចេញទៅកាន់អ្នកទស្សនាពីរបីតាមរយៈបច្ចេកទេស prompt។
|
|
|
|
|
|
## ការបង្កើត Web API ជាមួយ FastAPI: មជ្ឈមណ្ឌលចលនាថាមពលខ្ពស់សម្រាប់ការទំនាក់ទំនង AI របស់អ្នក
|
|
|
|
|
|
ឥឡូវសូមបង្កើតផ្នែកខាងក្រោយ (backend) ដែលភ្ជាប់ផ្នែកមុខ (frontend) របស់អ្នកទៅនឹងសេវាកម្ម AI។ យើងនឹងប្រើ FastAPI ដែលជា framework Python សម័យថ្មី ដែលល្អក្នុងការបង្កើត APIs សម្រាប់កម្មវិធី AI។
|
|
|
|
|
|
FastAPI ផ្តល់នូវអត្ថប្រយោជន៍ជាច្រើនសម្រាប់ប្រភេទគម្រោងនេះ៖ ការគាំទ្រអស៊ីន្ដ្រូណូស៊ី១ (async) សម្រាប់ដោះស្រាយសំណើរជាច្រើននៅពេលតែមួយ, ការបង្កើតឯកសារផ្ទាល់ API ស្វ័យប្រវត្តិ និងសមត្ថភាពធ្វើការលឿន។ ម៉ាស៊ីនម៉ាស៊ីន FastAPI របស់អ្នកបំរើជាមធ្យមភាព ដែលទទួលសំណើពីផ្នែកមុខ បង្ហាញចូលជាមួយសេវាកម្ម AI ហើយប្រាប់ត្រឡប់ចម្លើយដែលបានរៀបចំ។
|
|
|
|
|
|
### ហេតុអ្វីបានជាច្រើនប្រើ FastAPI សម្រាប់កម្មវិធី AI?
|
|
|
|
|
|
អ្នកប្រហែលជាកំពុងចង់ដឹង៖ "តើអាចទាក់ទង AI ត напрямую ពី JavaScript ផ្នែកមុខបានទេ?" ឬ "ហេតុអ្វីបានជាជ្រើស FastAPI មិនប្រើ Flask ឬ Django?" សំណួរល្អ!
|
|
|
|
|
|
**នេះជាហេតុផលដែល FastAPI ល្អសម្រាប់អ្វីដែលយើងកំពុងបង្កើត៖**
|
|
|
- **Async ដឹកនាំដោយលំនាំដើម**: អាចដោះស្រាយសំណើ AI ច្រើនជាមួយគ្នា ដោយគ្មានការកកិត
|
|
|
- **ឯកសារអេពីអាយ (API docs) ស្វ័យប្រវត្តិ**: បើក `/docs` ដើម្បីទទួលបានទំព័រឯកសារអេពីអាយដ៏ស្អាត និងអាចធ្វើតេស្តបានដោយឥតគិតថ្លៃ
|
|
|
- **ការត្រួតពិនិត្យស្វ័យប្រវត្តិ**: ចាប់កំហុសមុនពេលបញ្ហាបានកើតឡើង
|
|
|
- **លឿនភ្លាម**: ជារូបមន្ត Python រំឭកលឿនបំផុតមួយ
|
|
|
- **Python សម័យថ្មី**: ប្រើគ្រប់លក្ខណៈពិសេស Python ថ្មីៗ
|
|
|
|
|
|
**ហេតុអ្វីបានជាអ្នកត្រូវការផ្នែកខាងក្រោយ៖**
|
|
|
|
|
|
**សុវត្ថិភាព**: Key API AI របស់អ្នកដូចជាកូដសម្ងាត់មួយ – ប្រសិនបើអ្នកដាក់វានៅក្នុង JavaScript ផ្នែកមុខ ដែលគេអាចមើលកូដប្រភពគេហទំព័ររបស់អ្នក និងលួចប្រើ credits AI របស់អ្នក។ ផ្នែកខាងក្រោយរក្សាទុកសម្ងាត់យ៉ាងសុវត្ថិភាព។
|
|
|
|
|
|
**កំណត់ល្បឿននិងការគ្រប់គ្រង**: ផ្នែកខាងក្រោយអនុញ្ញាតឱ្យអ្នកគ្រប់គ្រងពីឥតឈប់ឈរពេលអ្នកប្រើប្រាស់ធ្វើសំណើ និងដាក់អោយមានការផ្ទៀងផ្ទាត់អ្នកប្រើ និងកំណត់ហេតុការប្រើប្រាស់។
|
|
|
|
|
|
**ដំណើរការទិន្នន័យ**: អ្នកប្រហែលចង់រក្សាទុកសន្ទស្សន៍ជជែក, កំចាត់មាតិកាមិនសមរម្យ, ឬបិទបញ្ចូលសេវាកម្ម AI ជាច្រើន។ ផ្នែកខាងក្រោយជាទីតាំងស្នាក់នៅរបស់តួលេខនេះ។
|
|
|
|
|
|
**រចនាសម្ព័ន្ធស្រដៀងនឹងម៉ូដែល client-server:**
|
|
|
- **Frontend**: ស្រទាប់ចំណុចប្រទាក់អ្នកប្រើប្រាស់សម្រាប់ចូលរួម
|
|
|
- **Backend API**: ស្រទាប់ដំណើរការសំណើ និងបញ្ជូន
|
|
|
- **សេវាកម្ម AI**: ការគណនា និងបង្កើតចម្លើយខាងក្រៅ
|
|
|
- **Environment Variables**: ការកំណត់រចនាសម្ព័ន្ធ និងរក្សាសម្ងាត់ដោយសុវត្ថិភាព
|
|
|
|
|
|
### យល់ដឹងពីចរន្តសំណើ-ចម្លើយ
|
|
|
|
|
|
មកតាមដានអ្វីកើតឡើងពេលអ្នកប្រើផ្ញើសារមួយ៖
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant User as 👤 អ្នកប្រើ
|
|
|
participant Frontend as 🌐 ផ្នែកមុខ
|
|
|
participant API as 🔧 មេម៉ាស៊ីន FastAPI
|
|
|
participant AI as 🤖 សេវាកម្ម AI
|
|
|
|
|
|
User->>Frontend: កំពុងវាយ "សួស្តី AI!"
|
|
|
Frontend->>API: POST /hello {"message": "សួស្តី AI!"}
|
|
|
Note over API: សម្រាប់ផ្ទៀងផ្ទាត់សំណើ<br/>បន្ថែមសៀវភៅប្រព័ន្ធ
|
|
|
API->>AI: ផ្ញើសំណើដែលបានរៀបចំទ្រង់ទ្រាយ
|
|
|
AI->>API: ត្រលប់ចម្លើយ AI
|
|
|
Note over API: ប្រតិបត្តិចម្លើយ<br/>កត់ត្រាការសម្ភាសន៍
|
|
|
API->>Frontend: {"response": "សួស្តី! ថ្ងៃនេះខ្ញុំអាចជួយដូចម្តេច?"}
|
|
|
Frontend->>User: បង្ហាញសារ AI
|
|
|
```
|
|
|
**យល់ដឹងពីជំហាននីមួយៗៈ**
|
|
|
1. **ការផ្គូមផ្គាត់អ្នកប្រើ**: មនុស្សវាយក្នុងចំណុចប្រទាក់ជជែក
|
|
|
2. **ដំណើរការផ្នែកមុខ**: JavaScript យកបញ្ចូល និងរៀបចំជារាង JSON
|
|
|
3. **ការត្រួតពិនិត្យ API**: FastAPI មើលសំណើដោយស្វ័យប្រវត្តិប្រើម៉ូដែល Pydantic
|
|
|
4. **ការបញ្ចូល AI**: ផ្នែកខាងក្រោយបន្ថែម context (system prompt) ហើយហៅសេវាកម្ម AI
|
|
|
5. **ដំណើរការចម្លើយ**: API ទទួលចម្លើយ AI ហើយអាចកែប្រែបានប្រសិនបើចាំបាច់
|
|
|
6. **បង្ហាញនៅផ្នែកមុខ**: JavaScript បង្ហាញចម្លើយនៅចំណុចប្រទាក់ជជែក
|
|
|
|
|
|
### យល់ដឹងអំពីរចនាសម្ព័ន្ធ API
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant Frontend
|
|
|
participant FastAPI
|
|
|
participant AI Function
|
|
|
participant GitHub Models
|
|
|
|
|
|
Frontend->>FastAPI: POST /hello {"message": "សួស្តី 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": "សួស្តី! តើខ្ញុំអាចជួយអ្វីបាន?"}
|
|
|
```
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A[ការបញ្ចូលរបស់អ្នកប្រើ] --> B[ការត្រួតពិនិត្យផ្នែកមុខ]
|
|
|
B --> C[សំណើ HTTP POST]
|
|
|
C --> D[ម៉ាស៊ីនបម្រើ FastAPI]
|
|
|
D --> E[ការត្រួតពិនិត្យ Pydantic]
|
|
|
E --> F[ការហៅមុខងារ AI]
|
|
|
F --> G[API ម៉ូឌែល GitHub]
|
|
|
G --> H[ការចំរូងចំរាស្សចម្លើយ]
|
|
|
H --> I[ចម្លើយ JSON]
|
|
|
I --> J[បន្ថែមផ្នែកមុខ]
|
|
|
|
|
|
subgraph "ស្រទាប់សន្តិសុខ"
|
|
|
K[មេឌីយ៉ូ CORS]
|
|
|
L[អថេរបរិស្ថាន]
|
|
|
M[ការដោះស្រាយកំហុស]
|
|
|
end
|
|
|
|
|
|
D --> K
|
|
|
F --> L
|
|
|
H --> M
|
|
|
```
|
|
|
### បង្កើតកម្មវិធី FastAPI
|
|
|
|
|
|
សូមបង្កើត API របស់យើងជាជំហានៗ។ បង្កើតឯកសារ `api.py` ដោយមានកូដ FastAPI ដូចខាងក្រោម៖
|
|
|
|
|
|
```python
|
|
|
# api.py
|
|
|
from fastapi import FastAPI, HTTPException
|
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
from pydantic import BaseModel
|
|
|
from llm import call_llm
|
|
|
import logging
|
|
|
|
|
|
# កំណត់កំណត់ការចុះបញ្ជី
|
|
|
logging.basicConfig(level=logging.INFO)
|
|
|
logger = logging.getLogger(__name__)
|
|
|
|
|
|
# បង្កើតកម្មវិធី FastAPI
|
|
|
app = FastAPI(
|
|
|
title="AI Chat API",
|
|
|
description="A high-performance API for AI-powered chat applications",
|
|
|
version="1.0.0"
|
|
|
)
|
|
|
|
|
|
# កំណត់ CORS
|
|
|
app.add_middleware(
|
|
|
CORSMiddleware,
|
|
|
allow_origins=["*"], # កំណត់ឱ្យសមរម្យសម្រាប់ផលិតកម្ម
|
|
|
allow_credentials=True,
|
|
|
allow_methods=["*"],
|
|
|
allow_headers=["*"],
|
|
|
)
|
|
|
|
|
|
# ម៉ូដែល Pydantic សម្រាប់ការផ្ទៀងផ្ទាត់ស្នើសុំ/ការឆ្លើយតប
|
|
|
class ChatMessage(BaseModel):
|
|
|
message: str
|
|
|
|
|
|
class ChatResponse(BaseModel):
|
|
|
response: str
|
|
|
|
|
|
@app.get("/")
|
|
|
async def root():
|
|
|
"""Root endpoint providing API information."""
|
|
|
return {
|
|
|
"message": "Welcome to the AI Chat API",
|
|
|
"docs": "/docs",
|
|
|
"health": "/health"
|
|
|
}
|
|
|
|
|
|
@app.get("/health")
|
|
|
async def health_check():
|
|
|
"""Health check endpoint."""
|
|
|
return {"status": "healthy", "service": "ai-chat-api"}
|
|
|
|
|
|
@app.post("/hello", response_model=ChatResponse)
|
|
|
async def chat_endpoint(chat_message: ChatMessage):
|
|
|
"""Main chat endpoint that processes messages and returns AI responses."""
|
|
|
try:
|
|
|
# ដកយក និងផ្ទៀងផ្ទាត់សារនេះ
|
|
|
message = chat_message.message.strip()
|
|
|
if not message:
|
|
|
raise HTTPException(status_code=400, detail="Message cannot be empty")
|
|
|
|
|
|
logger.info(f"Processing message: {message[:50]}...")
|
|
|
|
|
|
# ហៅសេវាកម្ម AI (ចំណាំ៖ ការហៅ call_llm គួរតែធ្វើជា async សម្រាប់ប្រសិទ្ធភាពល្អប្រសើរ)
|
|
|
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
|
|
|
|
|
|
logger.info("AI response generated successfully")
|
|
|
return ChatResponse(response=ai_response)
|
|
|
|
|
|
except HTTPException:
|
|
|
raise
|
|
|
except Exception as e:
|
|
|
logger.error(f"Error processing chat message: {str(e)}")
|
|
|
raise HTTPException(status_code=500, detail="Internal server error")
|
|
|
|
|
|
if __name__ == "__main__":
|
|
|
import uvicorn
|
|
|
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
|
|
|
```
|
|
|
|
|
|
**យល់ដឹងពីការអនុវត្ត FastAPI៖**
|
|
|
- **អញ្ចឹមចូល** FastAPI សម្រាប់មុខងារផ្នែកវែបសម័យថ្មី និង Pydantic សម្រាប់ការត្រួតពិនិត្យទិន្នន័យ
|
|
|
- **បង្កើត** ឯកសារអេពីអាយ ស្វ័យប្រវត្តិ (មាននៅ `/docs` ខណៈម៉ាស៊ីនដំណើរការ)
|
|
|
- **បើក** មធ្យោបាយ CORS middleware អនុញ្ញាតសំណើពីដែនផ្សេងៗ
|
|
|
- **កំណត់** ម៉ូដែល Pydantic សម្រាប់ការត្រួតពិនិត្យសំណើ/ចម្លើយ និងឯកសារអេពីអាយ
|
|
|
- **ប្រើ** endpoints async សម្រាប់សមត្ថភាពល្អជាមួយសំណើតែមួយពេល
|
|
|
- **អនុវត្ត** ស្ថានភាព HTTP និងដោះស្រាយកំហុសជាមួយ HTTPException
|
|
|
- **រួមបញ្ចូល** ការចុះកំណត់ហេតុដែលមានរចនាសម្ព័ន្ធសម្រាប់តាមដាន និងរកសុី
|
|
|
- **ផ្តល់** endpoint ឆែកសុខភាពសម្រាប់មើលស្ថានភាពសេវា
|
|
|
|
|
|
**អត្ថប្រយោជន៍សំខាន់ៗរបស់ FastAPI ប្រឆាំងនឹង framework ប្រពៃណី៖**
|
|
|
- **ការត្រួតពិនិត្យស្វ័យប្រវត្តិ**: ម៉ូដែល Pydantic រក្សាអនុភាពទិន្នន័យមុនដំណើរការ
|
|
|
- **ឯកសារជំនួសអន្តរកម្ម**: ហៅ `/docs` សម្រាប់ឯកសារអេពីអាយ ដែលផលិតដោយស្វ័យប្រវត្តិ និងអាចសាកល្បងបាន
|
|
|
- **ប្រើប្រភេទយ៉ាងត្រឹមត្រូវ**: ការសម្គាល់ប្រភេទ Python ជួយបញ្ចៀសកំហុសពេលរត់ និងបង្កើនគុណភាពកូដ
|
|
|
- **គាំទ្រ async**: ដោះស្រាយសំណើ AI ជាច្រើនដោយមិនរាំងខ្ទប់
|
|
|
- **សមត្ថភាពលឿន**: បង្កើនល្បឿនដំណើរការសំណើសម្រាប់កម្មវិធីពេលវេលាពិត
|
|
|
|
|
|
### យល់ដឹងអំពី CORS: អ្នកថែសុវត្ថិភាពនៃវែប
|
|
|
|
|
|
CORS (Cross-Origin Resource Sharing) ជាដូចជា អ្នកសន្តិសុខនៅអាគារ ដែលពិនិត្យមើលថា អ្នកទស្សនា ត្រូវបានអនុញ្ញាតឲ្យចូលក្នុងទេ។ តោះយើងយល់ថា ហេតុអ្វីវាសំខាន់ និងវាធ្វើឲ្យកម្មវិធីរបស់អ្នកមានផលប៉ះពាល់ដូចម្តេច។
|
|
|
|
|
|
#### CORS ទាំងអស់មានអ្វី ហើយហេតុអ្វីវាកើតមាន?
|
|
|
|
|
|
**បញ្ហា**: សូមចូរត្រួតពិនិត្យថា បើគេហទំព័រណាមួយអាចធ្វើសំណើទៅគេហទំព័របន្ទាប់របស់ធនាគារអ្នកដោយគ្មានការអនុញ្ញាតពីអ្នក។ នេះជាស្ថានភាពសុវត្ថិភាពពិបាកណាស់! មុំរក្សាទុកគេហទំព័ររក្សាបទបញ្ជាពីលំនាំនិងច្បាប់ "Same-Origin Policy"។
|
|
|
|
|
|
**Same-Origin Policy**: និយាយថា វែបប្រាក់ក្រុមហ៊ុនបានអនុញ្ញាតឲ្យគេហទំព័រធ្វើសំណើទៅដែនដូចគ្នា ព័រត (port) និងសេវាកម្ម (protocol) ដែលបានផ្ទុកលើមុន។
|
|
|
|
|
|
**គំរូជាក់ស្តែង**: ដូចជាជួរការពារអាគារអាផាតមិន – គ្រឹះសំណង់អនុញ្ញាតតែអ្នករស់នៅ (ដែនដូចគ្នា) ចូល។ ប្រសិនបើអ្នកចង់អោយមិត្តមកលេង (ដែនផ្សេង) អ្នកត្រូវប្រាប់អ្នកសន្តិសុខថាអាចអោយចូលបាន។
|
|
|
|
|
|
#### CORS នៅក្នុងបរិបទការអភិវឌ្ឍរបស់អ្នក
|
|
|
|
|
|
ក្នុងអំឡុងពេលអភិវឌ្ឍ ភ្នែកមុខ និងផ្នែកខាងក្រោយរបស់អ្នកដំណើរការលើព័រតផ្សេងៗគ្នា៖
|
|
|
- ផ្នែកមុខ៖ `http://localhost:3000` (ឬ file:// ប្រសិនបើបើក HTML ដោយផ្ទាល់)
|
|
|
- ផ្នែកខាងក្រោយ៖ `http://localhost:5000`
|
|
|
|
|
|
ទាំងនេះត្រូវបានគិតថាជា "ដែនផ្សេង" ទោះបីនៅលើកុំព្យូទ័រដូចគ្នា!
|
|
|
|
|
|
```python
|
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
|
|
|
app = FastAPI(__name__)
|
|
|
CORS(app) # វានិយាយបិត្តរុករកថា៖ "វាពិតជាល្អសម្រាប់ប្រភពដើមផ្សេងទៀតធ្វើការស្នើសុំទៅ API នេះ"
|
|
|
```
|
|
|
|
|
|
**ប្រតិបត្តិការដែលកំណត់ CORS វត្ថុសំខាន់៖**
|
|
|
- **បន្ថែម** header HTTP លើចម្លើយ API ដែលប្រាប់កម្មវិធីរុករកថា "សំណើលើដែនផ្សេងនេះត្រូវបានអនុញ្ញាត"
|
|
|
- **ដោះស្រាយ** សំណើ "preflight" (កម្មវិធីរុករកពេលខ្លះពិនិត្យការអនុញ្ញាតមុនផ្ញើសំណើពេញ)
|
|
|
- **ទប់ស្កាត់** បញ្ហា "blocked by CORS policy" ដែលចេញនៅក្នុងបង្អួច console របស់កម្មវិធីរុករក
|
|
|
|
|
|
#### សុវត្ថិភាព CORS៖ ការអភិវឌ្ឍ ទល់នឹង ផលិតកម្ម
|
|
|
|
|
|
```python
|
|
|
# 🚨 ការអភិវឌ្ឍ៖ អនុញ្ញាតដើមទាំងអស់ (ងាយស្រួលប៉ុន្តែមិនមានសុវត្ថិភាព)
|
|
|
CORS(app)
|
|
|
|
|
|
# ✅ ផលិតកម្ម៖ អនុញ្ញាតតែដែនផ្នែកមុខជាក់លាក់របស់អ្នក
|
|
|
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
|
|
|
|
|
|
# 🔒 អភិវឌ្ឍន៍ខ្ពស់៖ ដើមផ្សេងៗសម្រាប់បរិយាកាសផ្សេងៗ
|
|
|
if app.debug: # របៀបអភិវឌ្ឍ
|
|
|
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
|
|
|
else: # របៀបផលិតកម្ម
|
|
|
CORS(app, origins=["https://yourdomain.com"])
|
|
|
```
|
|
|
|
|
|
**ហេតុអ្វីវាសំខាន់**៖ នៅពេលអភិវឌ្ឍ `CORS(app)` គឺដូចជាចាក់បើកទ្វារចូលផ្ទះអោយទល់ – ស្រួលប្រើ ប៉ុន្តែមិនសុវត្ថិភាព។ នៅផលិតកម្ម អ្នកត្រូវកំណត់បានច្បាស់ថា គេហទំព័រណាអាចពិភាក្សាជាមួយ API របស់អ្នកបាន។
|
|
|
|
|
|
#### សកម្មភាព CORS ទូទៅ និងដំណោះស្រាយ
|
|
|
|
|
|
| សកម្មភាព | បញ្ហា | ដំណោះស្រាយ |
|
|
|
|----------|---------|----------|
|
|
|
| **អភិវឌ្ឍក្នុងជីវិតមូលដ្ឋាន** | ផ្នែកមុខមិនអាចទាក់ទងផ្នែកខាងក្រោយ | បន្ថែម CORSMiddleware ទៅ FastAPI |
|
|
|
| **GitHub Pages + Heroku** | ផ្នែកមុខដាក់បង្ហាញមិនអាចទាក់ទង API | បន្ថែម URL GitHub Pages របស់អ្នកទៅ CORS origins |
|
|
|
| **ដែនផ្ទាល់ខ្លួន** | កំហុស CORS នៅផលិតកម្ម | កែប្រែ CORS origins ឲ្យស្របវះដែនរបស់អ្នក |
|
|
|
| **កម្មវិធីទូរស័ព្ទ** | កម្មវិធីមិនទាក់ទងបានទៅ Web API | បន្ថែមដែនកម្មវិធីរបស់អ្នក ឬប្រើ `*` ដោយប្រុងប្រយ័ត្ន |
|
|
|
|
|
|
**ក្បាលថ្មី**៖ អ្នកអាចពិនិត្យ header CORS នៅក្នុង Developer Tools របស់កម្មវិធីរុករក នៅផ្នែកបណ្ដាញ (Network tab)។ សូមស្វែងរក header `Access-Control-Allow-Origin` ក្នុងចម្លើយ។
|
|
|
|
|
|
### ការដោះស្រាយកំហុស និងការត្រួតពិនិត្យ
|
|
|
|
|
|
សូមប្រុងប្រយ័ត្នមើលថា API របស់យើងរួមបញ្ចូលការដោះស្រាយកំហុសត្រឹមត្រូវ៖
|
|
|
|
|
|
```python
|
|
|
# ផ្ទៀងផ្ទាត់ថា យើងបានទទួលសារមួយ
|
|
|
if not message:
|
|
|
return jsonify({"error": "Message field is required"}), 400
|
|
|
```
|
|
|
|
|
|
**គោលការណ៍ត្រួតពិនិត្យសំខាន់ៗ៖**
|
|
|
- **ពិនិត្យ** ផ្ទាល់មើលវាលដែលត្រូវការ មុនដំណើរការសំណើ
|
|
|
- **ត្រឡប់** សារជំហានកំហុសមានន័យក្នុងទ្រង់ទ្រាយ JSON
|
|
|
- **ប្រើ** កូដស្ថាន HTTP ឲ្យសមរម្យ (400 សម្រាប់សំណើខូច)
|
|
|
- **ផ្តល់** មតិកែតម្រូវច្បាស់លាស់ ដើម្បីជួយអ្នកអភិវឌ្ឍផ្នែកមុខ ដោះស្រាយបញ្ហា
|
|
|
|
|
|
## ការតំឡើង និងដំណើរការផ្នែកខាងក្រោយរបស់អ្នក
|
|
|
|
|
|
ឥឡូវនេះពេលយើងមានការភ្ជាប់ AI និងម៉ាស៊ីន FastAPI រួចរាល់ សូមចាប់ផ្តើមដំណើរការទាំងអស់។ ដំណើរការតំឡើងរួមមានការដំឡើង Python dependencies ការកំណត់ environment variables និងចាប់ផ្តើមម៉ាស៊ីនអភិវឌ្ឍ។
|
|
|
|
|
|
### ការតំឡើងបរិស្ថាន Python
|
|
|
|
|
|
សូមតំឡើងបរិស្ថានអភិវឌ្ឍ Python របស់អ្នក។ បរិស្ថាននិរន្តរភាព (virtual environment) ដូចជាគម្រោង Manhattan Project ដែលសំគាល់តំបន់កំណត់ម៉ាស្ស្អូរមួយ – គម្រោងនីមួយៗមានលក្ខណៈផ្ទាល់ខ្លួន ជាមួយឧបករណ៍ និងផ្នែកគ្រប់គ្រាន់ដើម្បីបរិភោគដោយគ្មានការជួបប្រទៈផ្សេងគ្នា។
|
|
|
|
|
|
```bash
|
|
|
# នាវិកទៅឯកសារ backend របស់អ្នក
|
|
|
cd backend
|
|
|
|
|
|
# បង្កើតបរិយាកាសនិមិត្ត (ដូចជាបង្កើតបន្ទប់ស្អាតសម្រាប់គម្រោងរបស់អ្នក)
|
|
|
python -m venv venv
|
|
|
|
|
|
# បើកវា (Linux/Mac)
|
|
|
source ./venv/bin/activate
|
|
|
|
|
|
# លើ Windows, ប្រើ:
|
|
|
# venv\Scripts\activate
|
|
|
|
|
|
# តំឡើងវត្ថុល្អៗ
|
|
|
pip install openai fastapi uvicorn python-dotenv
|
|
|
```
|
|
|
|
|
|
**អ្វីដែលយើងទើបបញ្ចប់៖**
|
|
|
- **បង្កើត** ដុំ Python ផ្ទាល់ខ្លួន មិនប៉ះពាល់ទៅអ្វីផ្សេងទេ
|
|
|
- **បើកបរ** ដើម្បីភ្ជាប់ terminal រាជ្យដឹងថាត្រូវប្រើបរិស្ថាននេះ
|
|
|
- **ដំឡើង** មូលដ្ឋាន: OpenAI សម្រាប់ភាពអស្ចារ្យ AI, FastAPI សម្រាប់ Web API, Uvicorn ដើម្បីរៀបចំដំណើរការ ជាមួយ python-dotenv ដែលគ្រប់គ្រងសម្ងាត់យ៉ាងមុត
|
|
|
|
|
|
**ការពន្យល់ពី dependencies សំខាន់ៗ៖**
|
|
|
- **FastAPI**: Framework ម៉ូដឺន លឿនសម្រាប់ Web ជាមួយឯកសារអេពីអាយស្វ័យប្រវត្តិ
|
|
|
- **Uvicorn**: ម៉ាស៊ីន ASGI លឿនសម្រាប់ដំណើរការកម្មវិធី FastAPI
|
|
|
- **OpenAI**: ឡាយបราារីផ្លូវការសម្រាប់ GitHub Models និង OpenAI API
|
|
|
- **python-dotenv**: ឧបករណ៍ដំណើរការលំនាំបរិស្ថានពីឯកសារ .env
|
|
|
|
|
|
### ការកំណត់បរិស្ថាន៖ រក្សាសម្ងាត់ឱ្យមានសុវត្ថិភាព
|
|
|
|
|
|
មុនពេលចាប់ផ្តើម API យើង ត្រូវនិយាយអំពីមេរៀនសំខាន់មួយក្នុងការអភិវឌ្ឍវែប៖ របៀបរក្សាអោយសម្ងាត់របស់អ្នក ជាលំនាំពិតប្រាកដ។ Environment variables ដូចជា ទ្រនិចសុវត្ថិភាព មួយ ដែលកម្មវិធីរបស់អ្នកតែម្នាក់ឯងអាចចូលប្រើបាន។
|
|
|
|
|
|
#### តើ Environment Variables ជាអ្វី?
|
|
|
|
|
|
**សូមគិតថា environment variables ជាប្រអប់ដាក់វត្ថុមានតម្លៃ** – អ្នកដាក់វត្ថុមានតម្លៃរបស់អ្នកនៅក្នុងមួយ ហើយមានកូនសោរតែម្នាក់ឯងអ្នក (និងកម្មវិធីរបស់អ្នក) អាចបើកបាន។ ជំនួសការសរសេរព័ត៌មានសំងាត់ដោយផ្ទាល់ក្នុងកូដ (ដែលគេអាចមើលឃើញបានទាំងអស់) អ្នករក្សាទុកវាជាសុវត្ថិភាពក្នុងសេវា environment ។
|
|
|
|
|
|
**នេះជាការប្រៀបធៀប**៖
|
|
|
- **វិធីខុស**: សរសេរពាក្យសម្ងាត់លើក្រដាសខ្នាតតូច ហើយដាក់លើម៉ូនីទ័រ
|
|
|
- **វិធីត្រឹមត្រូវ**: រក្សាពាក្យសម្ងាត់ក្នុងកម្មវិធីគ្រប់គ្រងពាក្យសម្ងាត់ដែលមានសុវត្ថិភាព និងចូលបានតែអ្នក
|
|
|
|
|
|
#### ហេតុអ្វីបានជា Environment Variables មានសារៈសំខាន់
|
|
|
|
|
|
```python
|
|
|
# 🚨 កុំធ្វើបែបនេះទេ - សោ API មើលឃើញដោយមនុស្សគ្រប់គ្នា
|
|
|
client = OpenAI(
|
|
|
api_key="ghp_1234567890abcdef...", # មនុស្សណាមួយអាចលួចយកបាន!
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
|
|
|
# ✅ ប្រាកដថាដាក់សោ API គ្រប់គ្រាន់
|
|
|
client = OpenAI(
|
|
|
api_key=os.environ["GITHUB_TOKEN"], # មានតែកម្មវិធីរបស់អ្នកប៉ុណ្ណោះអាចចូលប្រើបាន
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**អ្វីកើតឡើងពេលអ្នកបញ្ចូលសម្ងាត់ក្នុងកូដ៖**
|
|
|
1. **ស្ថានភាព version control បង្ហាញ** : មនុស្សណាមួយដែលមានការចូលប្រើ Git repository របស់អ្នកទទួលបាន key API របស់អ្នក
|
|
|
2. **ឃ្លាំងសាធារណៈ**: ប្រសិនបើអ្នក push ទៅ GitHub ផ្ទុក key របស់អ្នកអាចមើលឃើញបានសកលលោក
|
|
|
3. **ចែករំលែកជាក្រុម**: អ្នកអភិវឌ្ឍផ្សេងទៀតដែលបង្កើតគម្រោង អាចប្រើប្រាស់ key API ផ្ទាល់ខ្លួនរបស់អ្នក
|
|
|
4. **រប្រហារព័ត៌មាន**: ប្រសិនបើនរណាខ្លះលួចបាន key API របស់អ្នក អ្នកនោះអាចប្រើប្រាស់ credits AI របស់អ្នកបាន
|
|
|
|
|
|
#### ការបង្កើតឯកសារ .env របស់អ្នក
|
|
|
|
|
|
បង្កើតឯកសារ `.env` ក្នុងថតផ្នែកខាងក្រោយរបស់អ្នក។ ឯកសារនេះរក្សាសម្ងាត់របស់អ្នកនៅតំបន់ក្នុងរយៈពេលអភិវឌ្ឍ៖
|
|
|
|
|
|
```bash
|
|
|
# ឯកសារ .env - អ្វីនេះមិនគួរត្រូវបានបញ្ចូលទៅ Git ទេ
|
|
|
GITHUB_TOKEN=your_github_personal_access_token_here
|
|
|
FASTAPI_DEBUG=True
|
|
|
ENVIRONMENT=development
|
|
|
```
|
|
|
|
|
|
**យល់ដឹងពីឯកសារ .env៖**
|
|
|
- **មួយសម្ងាត់ក្នុងមួយបន្ទាត់** ជាទ្រង់ទ្រាយ `KEY=value`
|
|
|
- **គ្មានចន្លោះ** នៅជុំវិញសញ្ញាទង្ស
|
|
|
- **គ្មានគូសពាក្យ** នៅជុំវិញតម្លៃ (ភាគច្រើន)
|
|
|
- **មតិយោបល់** ចាប់ផ្តើមជាមួយ `#`
|
|
|
|
|
|
#### ការបង្កើតកូដចូលផ្ទាល់ខ្លួន GitHub របស់អ្នក
|
|
|
|
|
|
កូដតំណាក់ផ្ទាល់ខ្លួន GitHub របស់អ្នកដូចជាពាក្យសម្ងាត់ពិសេស ដែលផ្តល់អនុសាសន៍កម្មវិធីរបស់អ្នកក្នុងការប្រើសេវា AI របស់ GitHub៖
|
|
|
|
|
|
**ជំហានលំអិតក្នុងការបង្កើត token៖**
|
|
|
1. **ចូលទៅ GitHub Settings** → Developer settings → Personal access tokens → Tokens (classic)
|
|
|
2. **ចុច "Generate new token (classic)"**
|
|
|
3. **កំណត់រយៈពេលផុតកំណត់** (30 ថ្ងៃសម្រាប់សាកល្បង ជាងនេះសម្រាប់ផលិតកម្ម)
|
|
|
4. **ជ្រើសយក scopes**: ពិនិត្យ "repo" និងសិទ្ធផ្សេងៗដែលអ្នកត្រូវការ
|
|
|
5. **បង្កើត token** ហើយចម្លងភ្លាម (អ្នកមិនអាចមើលវិញបានទេ!)
|
|
|
6. **បិទបញ្ចូលទៅឯកសារ .env របស់អ្នក**
|
|
|
|
|
|
```bash
|
|
|
# ឧទាហរណ៍នៃរូបរាងនៃស្លាកសញ្ញារបស់អ្នក (នេះគឺមិនពិត!)
|
|
|
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
|
|
|
```
|
|
|
|
|
|
#### ការផ្ទុក Environment Variables ក្នុង Python
|
|
|
|
|
|
```python
|
|
|
import os
|
|
|
from dotenv import load_dotenv
|
|
|
|
|
|
# បញ្ចូលអថេរបរិស្ថានពីឯកសារ .env
|
|
|
load_dotenv()
|
|
|
|
|
|
# ឥឡូវនេះអ្នកអាចចូលដំណើរការពួកវាបានយ៉ាងសុវត្ថិភាព
|
|
|
api_key = os.environ.get("GITHUB_TOKEN")
|
|
|
if not api_key:
|
|
|
raise ValueError("GITHUB_TOKEN not found in environment variables!")
|
|
|
|
|
|
client = OpenAI(
|
|
|
api_key=api_key,
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**អ្វីដែលកូដនេះធ្វើ៖**
|
|
|
- **ផ្ទុក** ឯកសារ .env ហើយធ្វើអោយអាចប្រើបានក្នុង Python
|
|
|
- **ពិនិត្យ** ថាតើ token ត្រូវការមានស្រាប់ (មានការដោះស្រាយកំហុសល្អ!)
|
|
|
- **បង្កើត** កំហុសច្បាស់លាស់ ប្រសិនបើ token ខ្វះ
|
|
|
- **ប្រើ** token នៅក្នុងសុវត្ថិភាព ដោយមិនបង្ហាញក្នុងកូដ
|
|
|
|
|
|
#### សុវត្ថិភាព Git៖ ឯកសារ .gitignore
|
|
|
|
|
|
ឯកសារ `.gitignore` របស់អ្នកប្រាប់ Git ថាតើឯកសារមួយណាដែលមិនគួរត្រូវតាមដាន ឬផ្ទុកឡើងលើ GitHub៖
|
|
|
|
|
|
```bash
|
|
|
# .gitignore - បន្ថែមបន្ទាត់ទាំងនេះ
|
|
|
.env
|
|
|
*.env
|
|
|
.env.local
|
|
|
.env.production
|
|
|
__pycache__/
|
|
|
venv/
|
|
|
.vscode/
|
|
|
```
|
|
|
|
|
|
**ហេតុអ្វីវាចាំបាច់**៖ ពេលអ្នកបញ្ចូល `.env` ទៅ `.gitignore` Git នឹងមិនរកឃើញឯកសារបរិស្ថានរបស់អ្នកទេ ដូច្នេះអ្នកនឹងមិនបង្កើតកំហុសដោយចៃដន្យផ្ទុកសម្ងាត់របស់អ្នកទៅ GitHub ទេ។
|
|
|
|
|
|
#### បរិបទផ្សេងៗ ការអភិវឌ្ឍ ដំណើរការ និងផលិតកម្ម មានសម្ងាត់ខុសគ្នា
|
|
|
|
|
|
```bash
|
|
|
# .env.development
|
|
|
GITHUB_TOKEN=your_development_token
|
|
|
DEBUG=True
|
|
|
|
|
|
# .env.production
|
|
|
GITHUB_TOKEN=your_production_token
|
|
|
DEBUG=False
|
|
|
```
|
|
|
|
|
|
**ហេតុអ្វីវាសំខាន់**៖ អ្នកមិនចង់ឲ្យការវាយតម្លៃការអភិវឌ្ឍខូចប៉ះពាល់ដល់បរិមាណការប្រើប្រាស់ AI ផលិតកម្ម និងចង់មានកម្រិតសុវត្ថភាពខុសគ្នាទៅតាមបរិបទណាមួយ។
|
|
|
|
|
|
### ចាប់ផ្តើមម៉ាស៊ីនអភិវឌ្ឍ៖ ផ្តល់ជីវិតដល់ FastAPI របស់អ្នក
|
|
|
|
|
|
ឥឡូវមានពេលវេលារីករាយ – ចាប់ផ្តើមម៉ាស៊ីនដំណើរការអភិវឌ្ឍ FastAPI របស់អ្នក ហើយមើលការភ្ជាប់ AI របស់អ្នកមានជីវិតឡើងវិញ! FastAPI ប្រើ Uvicorn ដែលជាម៉ាស៊ីន ASGI លឿនខ្លាំងសម្រាប់កម្មវិធី Python async ។
|
|
|
|
|
|
#### យល់ដឹងអំពីដំណើរការចាប់ផ្តើមម៉ាស៊ីន FastAPI
|
|
|
|
|
|
```bash
|
|
|
# វិធី ១: ប្រតិបត្តិការ Python ផ្ទាល់ (រួមមានការផ្ទុកឡើងវិញដោយស្វ័យប្រវត្តិ)
|
|
|
python api.py
|
|
|
|
|
|
# វិធី ២: ប្រើ Uvicorn ផ្ទាល់ (ត្រួតពិនិត្យបានច្រើនជាង)
|
|
|
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
|
|
```
|
|
|
|
|
|
ពេលដែលអ្នកដំណើរការបញ្ញាតិនេះ នេះគឺជាអ្វីដែលកើតឡើងនៅពីក្រោយឈើ:
|
|
|
|
|
|
**1. Python ផ្ទុកកម្មវិធី FastAPI របស់អ្នក**៖
|
|
|
- នាំចូលបណ្ណាល័យទាំងអស់ដែលត្រូវការ (FastAPI, Pydantic, OpenAI, ល។)
|
|
|
- ផ្ទុកអថេរបរិស្ថានពីឯកសារ `.env` របស់អ្នក
|
|
|
- បង្កើតអ实例កម្មវិធី FastAPI ជាមួយឯកសារឯកសារជម្រាបអំពីកម្មវិធីដោយស្វ័យប្រវត្តិ
|
|
|
|
|
|
**2. Uvicorn កំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនមេ ASGI**៖
|
|
|
- ចាក់ផ្លាស់ទៅតំបន់ 5000 ជាមួយសមត្ថភាពរៀបចំសំណើ async
|
|
|
- បង្កើតផ្លូវសំណើជាមួយការត្រួតពិនិត្យដោយស្វ័យប្រវត្តិ
|
|
|
- បើកការផ្លាស់ប្តូរឆាប់រហ័សសម្រាប់ការអភិវឌ្ឍន៍ (ចាប់ផ្តើមឡើងវិញនៅពេលមានការផ្លាស់ប្តូរឯកសារ)
|
|
|
- បង្កើតឯកសារព័ត៌មាន API អន្តរកម្ម
|
|
|
|
|
|
**3. ម៉ាស៊ីនមេចាប់ផ្តើមស្ដាប់**៖
|
|
|
- ត្រង់វាំងទ័ររបស់អ្នកបង្ហាញៈ `INFO: Uvicorn running on http://0.0.0.0:5000`
|
|
|
- ម៉ាស៊ីនមេទទួលបានសំណើ AI សមាសភាពច្រើនដោយសមង់
|
|
|
- API របស់អ្នកបានរៀបចំជាមួយឯកសារដែលមាននៅ `http://localhost:5000/docs`
|
|
|
|
|
|
#### អ្វីដែលអ្នកគួរមើលឃើញពេលដែលពីរត្រូវដំណើរការ
|
|
|
|
|
|
```bash
|
|
|
$ python api.py
|
|
|
INFO: Will watch for changes in these directories: ['/your/project/path']
|
|
|
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
|
|
|
INFO: Started reloader process [12345] using WatchFiles
|
|
|
INFO: Started server process [12346]
|
|
|
INFO: Waiting for application startup.
|
|
|
INFO: Application startup complete.
|
|
|
```
|
|
|
|
|
|
**ការយល់ដឹងអំពីលទ្ធផល FastAPI៖**
|
|
|
- **នឹងតាមដានការផ្លាស់ប្តូរ**៖ បើកជាដំណើរការចាប់ផ្តើមឡើងវិញសម្រាប់អភិវឌ្ឍន៍
|
|
|
- **Uvicorn កំពុងដំណើរការ**៖ ម៉ាស៊ីនមេ ASGI ដំណើរការជាប្រសើរ
|
|
|
- **ចាប់ផ្តើមដំណើរការរន្ធត់ឡើងវិញ**៖ កម្មវិធីតាមដានឯកសារសម្រាប់ចាប់ផ្តើមឡើងវិញដោយស្វ័យប្រវត្តិ
|
|
|
- **ការចាប់ផ្តើមកម្មវិធីបានបញ្ចប់**៖ កម្មវិធី FastAPI បានបង្កើតដោយជោគជ័យ
|
|
|
- **ឯកសារអន្តរកម្មមានស្រាប់**៖ ចូលទៅកាន់ `/docs` សម្រាប់ឯកសារព័ត៌មាន API ដោយស្វ័យប្រវត្តិ
|
|
|
|
|
|
#### សាកល្បង FastAPI របស់អ្នក៖ វិធីសាស្រ្តហាម្លែងចិត្តច្រើន
|
|
|
|
|
|
FastAPI ផ្ដល់នូវវិធីសាស្រ្តងាយស្រួលជាច្រើនសម្រាប់ធ្វើតេស្ត API របស់អ្នក រួមទាំងឯកសារអន្តរកម្មដោយស្វ័យប្រវត្តិ៖
|
|
|
|
|
|
**វិធីសាស្រ្ត 1: ឯកសារព័ត៌មាន API អន្តរកម្ម (ផ្ដល់អនុសាសន៍)**
|
|
|
1. បើកកម្មវិធីរុករករបស់អ្នកទៅកាន់ `http://localhost:5000/docs`
|
|
|
2. អ្នកនឹងឃើញ Swagger UI ជាមួយចំណុចចូលទាំងអស់របស់អ្នកបានបង្ហាញ
|
|
|
3. ចុចលើ `/hello` → "Try it out" → បញ្ចូលសារធ្វើតេស្ត → "Execute"
|
|
|
4. មើលចម្លើយដោយផ្ទាល់នៅក្នុងកម្មវិធីរុករកជាមួយទ្រង់ទ្រាយត្រឹមត្រូវ
|
|
|
|
|
|
**វិធីសាស្រ្ត 2: សាកល្បងមូលដ្ឋានកម្មវិធីរុករក**
|
|
|
1. ទៅកាន់ `http://localhost:5000` សម្រាប់ចំណុចចូលមូលដ្ឋាន
|
|
|
2. ទៅកាន់ `http://localhost:5000/health` ដើម្បីពិនិត្យសុខភាពម៉ាស៊ីនមេ
|
|
|
3. នេះបញ្ជាក់ថាម៉ាស៊ីនមេ FastAPI របស់អ្នកដំណើរការបានត្រឹមត្រូវ
|
|
|
|
|
|
**វិធីសាស្រ្ត 2: សាកល្បងបញ្ជារបញ្ជា (កម្រិតខ្ពស់)**
|
|
|
```bash
|
|
|
# សាកល្បងជាមួយ curl (ប្រសិនបើមាន)
|
|
|
curl -X POST http://localhost:5000/hello \
|
|
|
-H "Content-Type: application/json" \
|
|
|
-d '{"message": "Hello AI!"}'
|
|
|
|
|
|
# ការឆ្លើយតបដែលរំពឹងទុក៖
|
|
|
# {"response": "សួស្ដី! ខ្ញុំជាអ្នកជំនួយ AI របស់អ្នក។ តើខ្ញុំអាចជួយអ្វីបានខ្លះនៅថ្ងៃនេះ?"}
|
|
|
```
|
|
|
|
|
|
**វិធីសាស្រ្ត 3: ស្គ្រីប Python សម្រាប់សាកល្បង**
|
|
|
```python
|
|
|
# test_api.py - បង្កើតឯកសារនេះដើម្បីធ្វើតេស្ត API របស់អ្នក
|
|
|
import requests
|
|
|
import json
|
|
|
|
|
|
# សាកល្បងចំណុចចេញ API
|
|
|
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 | ពិនិត្យទ្រង់ទ្រាយសំណើឱ្យត្រូវនឹងសchema ដែលរំពឹងទុក |
|
|
|
| `HTTPException 422` | ប្រភេទមិនអាចដំណើរការ | ការត្រួតពិនិត្យសំណើបរាជ័យ ពិនិត្យ `/docs` សម្រាប់ទ្រង់ទ្រាយត្រឹមត្រូវ |
|
|
|
| `OpenAI API error` | ការផ្ទៀងផ្ទាត់សេវ AI បរាជ័យ | បញ្ជាក់ថា Token GitHub របស់អ្នកត្រឹមត្រូវ ហើយមានសិទ្ធិគ្រប់គ្រាន់ |
|
|
|
|
|
|
#### សីលធម៌ល្អសម្រាប់ការអភិវឌ្ឍ
|
|
|
|
|
|
**ការផ្លាស់ប្តូរឆាប់រហ័ស (Hot Reloading)**៖ FastAPI ជាមួយ Uvicorn ផ្ដល់នូវការចាប់ផ្តើមឡើងវិញដោយស្វ័យប្រវត្តិពេលអ្នករក្សាទុកការផ្លាស់ប្តូរកូដ Python របស់អ្នក។ នេះមានន័យថាអ្នកអាចកែប្រែកូដ និងសាកល្បងភ្លាមភ្លាមដោយមិនចាំបាច់ចាប់ផ្តើមឡើងវិញដោយដៃ។
|
|
|
|
|
|
```python
|
|
|
# បើកការផ្ទុកឡើងវិញបន្ទាន់ដោយពាក់ព័ន្ធ
|
|
|
if __name__ == "__main__":
|
|
|
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True បើកការផ្ទុកឡើងវិញបន្ទាន់
|
|
|
```
|
|
|
|
|
|
**កំណត់ហេតុសម្រាប់ការអភិវឌ្ឍ**៖ បន្ថែមកំណត់ហេតុដើម្បីយល់ពីអ្វីកើតឡើង៖
|
|
|
|
|
|
```python
|
|
|
import logging
|
|
|
|
|
|
# កំណត់ការចុះបញ្ជីសកម្មភាព
|
|
|
logging.basicConfig(level=logging.INFO)
|
|
|
logger = logging.getLogger(__name__)
|
|
|
|
|
|
@app.route("/hello", methods=["POST"])
|
|
|
def hello():
|
|
|
data = request.get_json()
|
|
|
message = data.get("message", "")
|
|
|
|
|
|
logger.info(f"Received message: {message}")
|
|
|
|
|
|
if not message:
|
|
|
logger.warning("Empty message received")
|
|
|
return jsonify({"error": "Message field is required"}), 400
|
|
|
|
|
|
try:
|
|
|
response = call_llm(message, "You are a helpful and friendly assistant.")
|
|
|
logger.info(f"AI response generated successfully")
|
|
|
return jsonify({"response": response})
|
|
|
except Exception as e:
|
|
|
logger.error(f"AI API error: {str(e)}")
|
|
|
return jsonify({"error": "AI service temporarily unavailable"}), 500
|
|
|
```
|
|
|
|
|
|
**ហេតុអ្វីបានជា កំណត់ហេតុមានប្រយោជន៍**៖ ក្នុងពេលការអភិវឌ្ឍ អ្នកអាចមើលឃើញច្បាស់ថាសំណើអ្វីខ្លះមក អ្វីដែល AI ឆ្លើយតប និងកន្លែងដែលកើតមានកំហុស។ វាធ្វើឱ្យការរកកំហុសរហ័សជាងមុន។
|
|
|
|
|
|
### កំណត់រចនាសម្ព័ន្ធសម្រាប់ GitHub Codespaces៖ ការអភិវឌ្ឍគ្រប់ពេលគ្រាន់តែបញ្ចេញនៅពពក
|
|
|
|
|
|
GitHub Codespaces គឺដូចជាម៉ាស៊ីនកុំព្យ៊ទ័រអភិវឌ្ឍមានសមត្ថភាពបំផុតនៅពពកដែលអ្នកអាចចូលប្រើពីកម្មវិធីរុករកណាមួយ។ ប្រសិនបើអ្នកកំពុងធ្វើការក្នុង Codespaces មានជំហានបន្ថែមមួយចំនួនដើម្បីធ្វើអោយ backend របស់អ្នកអាចចូលប្រើដោយផ្នែកមុខ។
|
|
|
|
|
|
#### ការយល់ដឹងអំពីបណ្តាញ Codespaces
|
|
|
|
|
|
នៅក្នុងបរិស្ថានអភិវឌ្ឍនៅលើក្នុងកុំព្យូទ័រផ្ទាល់ខ្លួន អ្វីៗរត់នៅលើកុំព្យូទ័រដូចគ្នា៖
|
|
|
- Backend: `http://localhost:5000`
|
|
|
- Frontend: `http://localhost:3000` (ឬ file://)
|
|
|
|
|
|
ក្នុង Codespaces បរិស្ថានអភិវឌ្ឍរបស់អ្នកដំណើរការនៅលើម៉ាស៊ីនមេ GitHub ដូច្នេះ "localhost" មានន័យខុសគ្នា។ GitHub បង្កើត URL សាធារណៈសម្រាប់សេវាកម្មរបស់អ្នកដោយស្វ័យប្រវត្តិ ប៉ុន្តែអ្នកត្រូវតែផ្លាស់ប្តូរតាមរយៈការកំណត់ត្រឹមត្រូវ។
|
|
|
|
|
|
#### ជំហានចុះចូលក្នុង Codespaces
|
|
|
|
|
|
**1. ចាប់ផ្តើមម៉ាស៊ីនមេ backend របស់អ្នក**៖
|
|
|
```bash
|
|
|
cd backend
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
អ្នកនឹងឃើញសារ Startup FastAPI/Uvicorn ដែលខុសគ្នាបន្តិច ប៉ុន្តែចាប់ផ្តើមនៅក្នុងបរិស្ថាន Codespace។
|
|
|
|
|
|
**2. កំណត់មើលឃើញព្រិលតំបន់(port visibility)**៖
|
|
|
- ស្វែងរកផ្ទាំង "Ports" នៅខាងក្រោម VS Code
|
|
|
- រកតំបន់ 5000 នៅក្នុងបញ្ជី
|
|
|
- ចុចមោទនភាពព្រិលចុចស្ដាំលើតំបន់ 5000
|
|
|
- ជ្រើស "Port Visibility" → "Public"
|
|
|
|
|
|
**ហេតុអ្វីបានចុះប្រកាស(public)?** ប្រភេទលំនាំដើម Ports នៅ Codespaces ជារបារម្ភឯកជន (គ្រាន់តែអ្នកអាចចូលមើល)។ ការចុះប្រកាសអោយសាធារណៈធ្វើអោយផ្នែកមុខដែលរត់នៅក្នុងកម្មវិធីរុករកអាចទំនាក់ទំនងទៅ backend របស់អ្នកបាន។
|
|
|
|
|
|
**3. ទទួល URL សាធារណៈរបស់អ្នក**៖
|
|
|
បន្ទាប់ពីចុះសាធារណៈ តំណភ្ជាប់ URL ដូចជា៖
|
|
|
```
|
|
|
https://your-codespace-name-5000.app.github.dev
|
|
|
```
|
|
|
|
|
|
**4. បន្ទាន់សម័យការកំណត់ផ្នែកមុខរបស់អ្នក**៖
|
|
|
```javascript
|
|
|
// នៅក្នុង app.js ផ្នែកមុខអ្នក, បន្ទាន់សម័យ BASE_URL:
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
#### ការយល់ដឹងអំពី URL Codespace
|
|
|
|
|
|
URL Codespace បំពេញទៅលើលំដាប់ដែលអាចទាយបាន៖
|
|
|
```
|
|
|
https://[codespace-name]-[port].app.github.dev
|
|
|
```
|
|
|
|
|
|
**លែងយកលំអិត៖**
|
|
|
- `codespace-name`: សម្គាល់តែមួយសម្រាប់ Codespace របស់អ្នក (ភាគច្រើនរួមមានឈ្មោះអ្នកប្រើ)
|
|
|
- `port`: លេខតំបន់ដែលសេវាកម្មរត់ (5000 សម្រាប់កម្មវិធី FastAPI របស់យើង)
|
|
|
- `app.github.dev`: ដែនហ្វឹកហាត់សម្រាប់កម្មវិធី Codespace របស់ GitHub
|
|
|
|
|
|
#### សាកល្បង Codespace របស់អ្នក
|
|
|
|
|
|
**1. សាកល្បង backend ដោយផ្ទាល់**៖
|
|
|
បើក URL សាធារណៈរបស់អ្នកក្នុងផ្ទាំងកម្មវិធីរុករកថ្មី។ អ្នកគួរតែឃើញ៖
|
|
|
```
|
|
|
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
|
|
|
```
|
|
|
|
|
|
**2. សាកល្បងជាមួយឧបករណ៍អភិវឌ្ឍកម្មវិធីរុករក**៖
|
|
|
```javascript
|
|
|
// បើកកុងសូលកម្មវិធីរកមើល ហើយសាកល្បង API របស់អ្នក
|
|
|
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
|
|
|
method: 'POST',
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
body: JSON.stringify({message: 'Hello from Codespaces!'})
|
|
|
})
|
|
|
.then(response => response.json())
|
|
|
.then(data => console.log(data));
|
|
|
```
|
|
|
|
|
|
#### Codespaces ប្រៀបធៀបនឹងការអភិវឌ្ឍលើកុំព្យូទ័រផ្ទាល់ខ្លួន
|
|
|
|
|
|
| ផ្នែក | ការអភិវឌ្ឍលើកុំព្យូទ័រផ្ទាល់ខ្លួន | GitHub Codespaces |
|
|
|
|--------|-------------------|-------------------|
|
|
|
| **ម៉ោងតម្រូវការ** | យូរ (ដំឡើង Python, សមាសភាព) | មិនយូរ (បរិស្ថានបានកំណត់រួច) |
|
|
|
| **ការចូលប្រើ URL** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
|
|
|
| **ការកំណត់តំបន់** | ស្វ័យប្រវត្តិ | ដោយដៃ (ធ្វើឱ្យតំបន់មានសាធារណៈ) |
|
|
|
| **ការរក្សាទុកឯកសារ** | ឧបករណ៍ក្នុងស្រុក | តាមរ៉េភូ GitHub |
|
|
|
| **ការសហការយ៉ាងងាយស្រួល** | ពិបាកចែករំលែកបរិស្ថាន | ងាយស្រួលចែករំលែកតំណ Codespace |
|
|
|
| **ការពឹងផ្អែកលើអ៊ិនធឺណិត** | សំរាប់ហៅ API AI តែប៉ុណ្ណោះ | ត្រូវការសម្រាប់គ្រប់អ្វីៗ |
|
|
|
|
|
|
#### ជំនួយ Codespace សម្រាប់ការអភិវឌ្ឍ
|
|
|
|
|
|
**អថេរបរិស្ថានក្នុង Codespaces**៖
|
|
|
ឯកសារ `.env` របស់អ្នកដំណើរការដូចគ្នានៅក្នុង Codespaces ប៉ុន្តែអ្នកអាចកំណត់អថេរបរិស្ថានដោយផ្ទាល់ក្នុង Codespace ផងដែរ៖
|
|
|
|
|
|
```bash
|
|
|
# កំណត់អថេរបរិយាកាសសម្រាប់សម័យបច្ចុប្បន្ន
|
|
|
export GITHUB_TOKEN="your_token_here"
|
|
|
|
|
|
# ឬបន្ថែមទៅក្នុង .bashrc របស់អ្នកសម្រាប់ការរក្សាទុក
|
|
|
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
|
|
|
```
|
|
|
|
|
|
**ការគ្រប់គ្រងតំបន់**៖
|
|
|
- Codespaces ស្វ័យប្រវត្តិរកមើលពេលកម្មវិធីរបស់អ្នកចាប់ផ្តើមស្ដាប់លើតំបន់មួយ
|
|
|
- អ្នកអាចបញ្ជូនប៉ុស្តិ៍ជាច្រើនក្នុងពេលតែមួយ (មានប្រយោជន៍បើអ្នកបន្ថែមមូលដ្ឋានទិន្នន័យ)
|
|
|
- តំបន់នៅសមត្ថភាពចូលប្រើតទៅរហូតដល់ Codespace របស់អ្នកកំពុងដំណើរការ
|
|
|
|
|
|
**លំដាប់ការងារអភិវឌ្ឍ**៖
|
|
|
1. កែប្រែកូដក្នុង VS Code
|
|
|
2. FastAPI ផ្លាស់ប្តូរបានដោយស្វ័យប្រវត្តិ (ដោយសាររបៀបចាប់ផ្តើមឡើងវិញរបស់ Uvicorn)
|
|
|
3. សាកល្បងការផ្លាស់ប្តូរបានភ្លាមៗតាមរយៈ URL សាធារណៈ
|
|
|
4. កំណត់ commit និង push នៅពេលដែលរួចរាល់
|
|
|
|
|
|
> 💡 **ជំនួយដ៏ល្អ**៖ កំណត់ bookmark ទៅ URL backend Codespace របស់អ្នកនៅពេលអភិវឌ្ឍ។ ព្រោះឈ្មោះ Codespace នៅស្ថិតស្ថេរដូច្នេះ URL នឹងមិនផ្លាស់ប្ដូរទេ ដល់ពេលដែលអ្នកកំពុងប្រើ Codespace ដូចគ្នា។
|
|
|
|
|
|
## បង្កើតផ្ទាំងផ្នែកមុខសម្រាប់ការជជែក៖ កន្លែងមនុស្សជួប AI
|
|
|
|
|
|
ឥឡូវនេះយើងនឹងបង្កើតផ្នែកផ្ទាំងបង្ហាញ – ផ្នែកដែលកំណត់របៀបដែលមនុស្សជួបប្រទៈជាមួយជំនួយការប្រព្រឹត្តការណ៍ AI របស់អ្នក។ ដូចជាការរៀបចំរចនាសម្ព័ន្ធ iPhone ដំបូងគេ យើងផ្ដោតលើការធ្វើឱ្យបច្ចេកវិទ្យាស្មុគស្មាញក្លាយទៅជាអារម្មណ៍ងាយស្រួល និងធម្មជាតិក្នុងការប្រើប្រាស់។
|
|
|
|
|
|
### ការយល់ដឹងអំពីរចនាសម្ព័ន្ធផ្នែកមុខទំនើប
|
|
|
|
|
|
ផ្នែកជជែករបស់យើងនឹងជាកម្មវិធី "Single Page Application" ឬ SPA។ ជំនួសបច្ចេកទេសចាស់ដែលបើកទំព័រថ្មីរៀងរាល់ពេលចុច អ្នកប្រើអាចទទួលបានការអាប់ដេតរលូន និងភ្លាមភ្លើយៈ
|
|
|
|
|
|
**គេហទំព័រចាស់ៗ**៖ ដូចការអានសៀវភៅផ្សេងៗ– អ្នកបិទទំព័រស្រាប់ហើយបើកទំព័រថ្មី
|
|
|
**កម្មវិធីជជែករបស់យើង**៖ ដូចប្រើទូរស័ព្ទ– អ្វីៗរាបរលូន និងបែបទំនងល្អ
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[អ្នកប្រើវាយសារ] --> B[JavaScript ចាប់យកការបញ្ចូល]
|
|
|
B --> C[ផ្ទៀងផ្ទាត់ និង ទ្រង់ទ្រាយទិន្នន័យ]
|
|
|
C --> D[ផ្ញើទៅ Backend API]
|
|
|
D --> E[បង្ហាញស្ថានភាពកំពុងផ្ទុក]
|
|
|
E --> F[ទទួលបានចម្លើយ AI]
|
|
|
F --> G[អាប់ដេតផ្ទៃប្រឹក្សាយផ្ទាល់]
|
|
|
G --> H[រួចរាល់សម្រាប់សារ القادمة]
|
|
|
```
|
|
|
```mermaid
|
|
|
classDiagram
|
|
|
class ChatApp {
|
|
|
+សាររបស់: HTMLElement
|
|
|
+សំណុំបែបបទ: HTMLElement
|
|
|
+បញ្ចូល: HTMLElement
|
|
|
+ប៊ូតុងបញ្ជូន: HTMLElement
|
|
|
+BASE_URL: string
|
|
|
+API_ENDPOINT: string
|
|
|
|
|
|
+constructor()
|
|
|
+initializeEventListeners()
|
|
|
+handleSubmit(event)
|
|
|
+callAPI(message)
|
|
|
+appendMessage(text, role)
|
|
|
+escapeHtml(text)
|
|
|
+scrollToBottom()
|
|
|
+setLoading(isLoading)
|
|
|
}
|
|
|
|
|
|
ChatApp --> DOM : គ្រប់គ្រង
|
|
|
ChatApp --> FastAPI : ផ្ញើការស្នើរសុំ
|
|
|
```
|
|
|
### បីស្នូលសំខាន់នៃការអភិវឌ្ឍផ្នែកមុខ
|
|
|
|
|
|
កម្មវិធីផ្នែកមុខទាំងអស់ – ចាប់តាំងពីគេហទំព័រងាយស្រួលទស្សនា ទៅដល់កម្មវិធីស្មុគស្មាញដូចជា Discord ឬ Slack – ត្រូវបានបង្កើតលើបច្ចេកវិទ្យាបីសំខាន់ៗ។ សូមគិតថាវាជាមូលដ្ឋាននៃអ្វីៗដែលអ្នកឃើញ និងអាចធ្វើប្រតិបត្តិការបានលើវា៖
|
|
|
|
|
|
**HTML (រចនាសម្ព័ន្ធ)**៖ នេះគឺជា יסודរបស់អ្នក
|
|
|
- កំណត់ថាធាតុអ្វីមាន (ប៊ូតុង, តំបន់អក្សរ, កុងតឺន័រ)
|
|
|
- ផ្ដល់ន័យដល់មាតិកា (នេះជាប្រធាន, នេះជារាបពិធី, ល។)
|
|
|
- បង្កើតរចនាសម្ព័ន្ធមូលដ្ឋានដែលអ្វីៗផ្សេងទៀតអាចសង់លើបន្ទាប់
|
|
|
|
|
|
**CSS (ការបង្ហាញ)**៖ នេះគឺជាអ្នករចនាផ្ទៃក្នុងរបស់អ្នក
|
|
|
- ធ្វើឱ្យអ្វីៗស្អាត (ពណ៌, ភាសាអក្សរ, រៀបចំផ្ទាំង)
|
|
|
- គ្រប់គ្រងទំហំអេក្រង់ផ្សេងៗ (ទូរស័ព្ទ ប្រូកថេប លើក)
|
|
|
- បង្កើតចលនា និងប្រតិកម្មខាងមើល
|
|
|
|
|
|
**JavaScript (អាកប្បកិរិយា)**៖ នេះគឺជាខួរក្បាលរបស់អ្នក
|
|
|
- ឆ្លើយតបទៅនឹងអ្វីដែលអ្នកប្រើធ្វើ (ចុច, វាយអក្សរ, រំកិល)
|
|
|
- ទំនាក់ទំនងទៅ backend របស់អ្នក និងធ្វើអាប់ដេតទំព័រ
|
|
|
- ធ្វើអោយអ្វីៗអាចប្រតិបត្តិបាន និងមានអន្តរកម្ម
|
|
|
|
|
|
**គិតថាវាដូចជារចនាសម្ព័ន្ធស្ថាបត្យកម្ម៖**
|
|
|
- **HTML**៖ គំនូសប្លង់ស្ថាបត្យកម្ម (កំណត់ទីតាំង និងទំនាក់ទំនង)
|
|
|
- **CSS**៖ រចនាសម្រស់ និងបរិយាកាស (រចនាបទភ្នែក និងបទពិសោធន៍អ្នកប្រើ)
|
|
|
- **JavaScript**៖ ប្រព័ន្ធយានយន្ត (មុខងារ និងអន្តរកម្ម)
|
|
|
|
|
|
### ហេតុអ្វីបានជារចនាសម្ព័ន្ធ JavaScript ទំនើបមានសារៈសំខាន់
|
|
|
|
|
|
កម្មវិធីជជែករបស់យើងនឹងប្រើលំនាំ JavaScript ទំនើបដែលអ្នកនឹងឃើញនៅក្នុងកម្មវិធីវិជ្ជាជីវៈ។ ការយល់ដឹងពីយុទ្ធសាស្រ្តទាំងនេះនឹងជួយអ្នកពេលអ្នកក្លាយជាអ្នកអភិវឌ្ឍ៖
|
|
|
|
|
|
**រចនាសម្ព័ន្ធផ្អែកលើថ្នាក់ (Class-Based Architecture)**៖ យើងនឹងរៀបចំកូដជាតំណាងថ្នាក់ ដែលដូចជាការបង្កើតគំនូសប្លង់សម្រាប់អចលនវត្ថុ
|
|
|
**Async/Await**៖ វិធីសាស្រ្តទំនើបសម្រាប់គ្រប់គ្រងប្រតិបត្តិការដែលចំណាយពេល (ដូចជាការហៅ API)
|
|
|
**កម្មវិធីបើកហេតុ (Event-Driven Programming)**៖ កម្មវិធីរបស់យើងឆ្លើយតបសកម្មភាពអ្នកប្រើ (ចុច, រាកាល់) មិនមែនរត់ក្នុងលំនាំរំកិល
|
|
|
**ការគ្រប់គ្រង DOM (DOM Manipulation)**៖ ធ្វើអាប់ដេតមាតិកាទំព័រតាមសកម្មភាពអ្នកប្រើ និងចម្លើយ API
|
|
|
|
|
|
### រៀបចំរចនាសម្ព័ន្ធគម្រោង
|
|
|
|
|
|
បង្កើតថត frontend ជាមួយរចនាសម្ព័ន្ធរៀបចំយ៉ាងម៉ត់ចត់៖
|
|
|
|
|
|
```text
|
|
|
frontend/
|
|
|
├── index.html # Main HTML structure
|
|
|
├── app.js # JavaScript functionality
|
|
|
└── styles.css # Visual styling
|
|
|
```
|
|
|
|
|
|
**ការយល់ដឹងអំពីរចនាសម្ព័ន្ធ៖**
|
|
|
- **ផ្ទះ**ការចាប់អារម្មណ៍រវាងរចនាសម្ព័ន្ធ (HTML), អាកប្បកិរិយា (JavaScript), និងការបង្ហាញ (CSS)
|
|
|
- **រក្សា**រចនាសម្ព័ន្ធឯកសារឆាប់យល់ និងងាយស្រួលប្តូរ
|
|
|
- **អនុវត្ត**សីលធម៌ល្អនៃការអភិវឌ្ឍគេហទំព័រ ដើម្បីងាយស្រួលគ្រប់គ្រង និងថែទាំ
|
|
|
|
|
|
### ការសាងសង់មូលដ្ឋាន HTML: រចនាសម្ព័ន្ធមានន័យសម្រាប់ភាពចូលដំណើរការ
|
|
|
|
|
|
ចាប់ផ្តើមជាមួយរចនាសម្ព័ន្ធ HTML។ ការអភិវឌ្ឍគេហទំព័រទំនើបលើកលែងនូវ "semantic HTML" – ប្រើធាតុ HTML ដែលពិពណ៌នាច្បាស់វត្ថុបំណង មិនមែនគ្រាន់តែរូបរាងទេ។ វាធ្វើអោយកម្មវិធីរបស់អ្នកអាចចូលដំណើរការដោយ screen readers, ម៉ាស៊ីនស្វែងរក និងឧបករណ៍ផ្សេងទៀត។
|
|
|
|
|
|
**ហេតុអ្វីបានជា semantic HTML មានសារៈសំខាន់**៖ ស្រមៃថា អ្នកពិពណ៌នាកម្មវិធីជជែករបស់អ្នកទៅភាគីម្នាក់តាមទូរស័ព្ទ។ អ្នកនិយាយថា "មានចំណុចខាងលើមួយដែលមានចំណងជើង, ផ្នែកចម្បងដែលមានការសន្ទនា, ហើយមានបែបទម្រង់នៅខាងក្រោមសម្រាប់វាយសារ"។ Semantic HTML ប្រើធាតុសមស្របដែលឆ្លុះបញ្ចាំងការពិពណ៌នាធម្មជាតិនេះ។
|
|
|
|
|
|
បង្កើត `index.html` ជាមួយមុខរបាំដែលរៀបចំយ៉ាងម៉ត់ចត់៖
|
|
|
|
|
|
```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">`**៖ បញ្ជាក់ភាសានៃទំព័រសម្រាប់ screen readers និងឧបករណ៍បកប្រែមួយចំនួន
|
|
|
- **`<meta charset="UTF-8">`**៖ បញ្ចាក់កូដតួអក្សរឲ្យបានត្រឹមត្រូវសម្រាប់អក្សរអន្ដរជាតិ
|
|
|
- **`<meta name="viewport"...>`**៖ ធ្វើអោយទំព័រត្រូវនឹងទំហំអេក្រង់ទូរស័ព្ទដោយគ្រប់គ្រងការស្កេលនិងបង្ហាញ
|
|
|
|
|
|
#### ធាតុមានន័យសំខាន់
|
|
|
- **`<header>`**៖ កំណត់ចំណុចខាងលើដែលមានចំណងជើង និងសេចក្តីពិពណ៌នា
|
|
|
- **`<main>`**៖ បង្ហាញផ្នែកមជ្ឈិម (កន្លែងមានការសន្ទនា)
|
|
|
- **`<form>`**៖ ម្យ៉ាងទៀត ដល់ការបញ្ចូលព័ត៌មានពីអ្នកប្រើ ដែលមានមនុស្សតាមផ្លូវក្តារចុចបានត្រឹមត្រូវ
|
|
|
|
|
|
#### លក្ខណៈអាចចូលដំណើរការបាន
|
|
|
- **`role="log"`**៖ ប្រាប់ screen readers ថាតំបន់នេះមានរកាតទិន្នន័យសារតាមលំដាប់ពេលវេលា
|
|
|
- **`aria-live="polite"`**៖ ប្រាប់ screen readers អំពីសារថ្មីដោយគ្មានការជ្រៀតជ្រែក
|
|
|
- **`aria-label`**៖ ផ្ដល់ស្លាកពិពណ៌នាសម្រាប់ការត្រួតពិនិត្យបែបទម្រង់
|
|
|
- **`required`**៖ រុករកផ្ទៀងផ្ទាត់ថាអ្នកប្រើបានបញ្ចូលសារមុនចុចបញ្ចូន
|
|
|
|
|
|
#### ការរួមបញ្ចូល CSS និង JavaScript
|
|
|
- **`class` លក្ខណៈ**៖ ផ្ដល់ទីតាំងសម្រាប់ CSS (ឧ. `chat-container`, `input-group`)
|
|
|
- **`id` លក្ខណៈ**៖ អនុញ្ញាតឱ្យ JavaScript រកឃើញ និងគ្រប់គ្រងធាតុជាក់លាក់
|
|
|
- **ទីតាំងស្គ្រីប**៖ ឯកសារ JavaScript ផ្ទុកនៅចុងក្រោយដើម្បីឲ្យ HTML ផ្ទុកជាដំបូង
|
|
|
|
|
|
**ហេតុអ្វីបានរចនាសម្ព័ន្ធនេះដំណើរការ៖**
|
|
|
- **លំដាប់ត្រឹមត្រូវ**៖ Header → ឯកសារមជ្ឈិម → បែបទម្រង់ ត្រូវនឹងលំដាប់អានធម្មជាតិ
|
|
|
- **ចូលដំណើរការតាមក្តារចុច**៖ អ្នកប្រើអាច tab តាមធាតុអាចប្រើបានទាំងអស់
|
|
|
- **សមត្ថភាពបង្រៀនសម្រាប់ screen reader**៖ សញ្ញាបានច្បាស់ និងពិពណ៌នាសម្រាប់អ្នកមានបញ្ហាត្រូវមើល
|
|
|
- **រចនាសម្ព័ន្ធឆ្លុះបញ្ចាំងទូរស័ព្ទ**៖ Meta viewport បានធ្វើឱ្យវារត់ល្អលើទូរស័ព្ទ
|
|
|
- **ការវិវឌ្ឍន៍ប្រកបដោយជំហាន**៖ បើ CSS ឬ JavaScript បរាជ័យ កម្មវិធីនៅតែដំណើរការ
|
|
|
|
|
|
### បន្ថែម JavaScript អន្តរកម្ម: តុល្យភាពកម្មវិធីវែបទំនើប
|
|
|
|
|
|
ឥឡូវនេះយើងសាងសង់ JavaScript ដែលនាំមុខផ្នែកជជែករបស់យើងរស់រវើក។ យើងនឹងប្រើលំនាំ JavaScript ទំនើបដែលអ្នកនឹងជួបប្រទៈនៅក្នុងការអភិវឌ្ឍគេហទំព័រផ្លូវការជាមួយ ES6 classes, async/await និងកម្មវិធីបើកហេតុ។
|
|
|
|
|
|
#### ការយល់ដឹងអំពីរចនាសម្ព័ន្ធ JavaScript ទំនើប
|
|
|
បច្ចុប្បន្នភាពប្រើប្រាស់សេដ្ឋកិច្ចកូដប្រតិបត្តិ (ជាស៊េរីតម្លៃដែលរត់តាមលំដាប់) យើងនឹងបង្កើត **ស្ថាបត្យកម្មផ្អែកលើថ្នាក់**។ គិតថាថ្នាក់មួយជាខ្នាតប្លង់សម្រាប់បង្កើតវត្ថុ — ដូចជាដំណើរការការគូរប្លង់របស់អ្នកសាងសង់អាចប្រើបានសម្រាប់សង់ផ្ទះច្រើន។
|
|
|
|
|
|
**ហេតុអ្វីបានជាប្រើថ្នាក់សម្រាប់កម្មវិធីវេប?**
|
|
|
- **រៀបចំ**៖ មុខងារទាក់ទងគ្នាទាំងអស់ត្រូវបានចងក្រងគ្នា
|
|
|
- **អាចប្រើឡើងវិញ**៖ អ្នកអាចបង្កើតរាជបទចម្ងាយច្រើននៅលើទំព័រដូចគ្នា
|
|
|
- **ងាយស្រួលថែទាំ**៖ ងាយស្រួលក្នុងការពិនិត្យកំហុស និងកែប្រែមុខងារពិសេសៗ
|
|
|
- **ស្តង់ដារជំនាញ**៖ គំរូនេះត្រូវបានប្រើក្នុងហ្រ្វេមវើកដូចជា React, Vue, និង Angular
|
|
|
|
|
|
បង្កើត `app.js` ជាមួយ JavaScript សម័យទំនើបដែលមានរចនាសម្ព័ន្ធល្អនេះ៖
|
|
|
|
|
|
```javascript
|
|
|
// app.js - ចំណោមកម្មវិធីជជែកទំនើប
|
|
|
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// ទទួលយកយោងទៅកាន់ធាតុ DOM ដែលយើងត្រូវតែបង្ហោះ
|
|
|
this.messages = document.getElementById("messages");
|
|
|
this.form = document.getElementById("chatForm");
|
|
|
this.input = document.getElementById("messageInput");
|
|
|
this.sendButton = document.getElementById("sendBtn");
|
|
|
|
|
|
// កំណត់ URL ក្រោយថ្មីរបស់អ្នកនៅទីនេះ
|
|
|
this.BASE_URL = "http://localhost:5000"; // បន្ទាន់សម័យយ៉ាងនេះសម្រាប់បរិយាកាសរបស់អ្នក
|
|
|
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
|
|
|
|
|
|
// តម្លើងអ្នកស្ដាប់ព្រឹត្តិការណ៍ពេលកម្មវិធីជជែកត្រូវបានបង្កើតឡើង
|
|
|
this.initializeEventListeners();
|
|
|
}
|
|
|
|
|
|
initializeEventListeners() {
|
|
|
// ស្ដាប់ព្រឹត្តិការណ៍ដាក់សំណុំទម្រង់ (ពេលអ្នកប្រើចុចបញ្ជូនឬចុច Enter)
|
|
|
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
|
|
// ក៏ស្ដាប់សោ Enter នៅក្នុងប្រអប់បញ្ចូលផងដែរ (UX ល្អជាង)
|
|
|
this.input.addEventListener("keypress", (e) => {
|
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
|
e.preventDefault();
|
|
|
this.handleSubmit(e);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
async handleSubmit(event) {
|
|
|
event.preventDefault(); // បញ្ឈប់កាលបរិច្ឆេទដើម្បីមិនអោយទំព័រត្រូវបានបំបាត់ឡើងវិញ
|
|
|
|
|
|
const messageText = this.input.value.trim();
|
|
|
if (!messageText) return; // កុំផ្ញើសារ ទទេ
|
|
|
|
|
|
// ផ្ដល់មតិនិយមអ្នកប្រើថាមានកំពុងកើតឡើងអ្វីមួយ
|
|
|
this.setLoading(true);
|
|
|
|
|
|
// បញ្ចូលសារអ្នកប្រើទៅក្នុងជជែកភ្លាមៗ (UI ប្រសើរ)
|
|
|
this.appendMessage(messageText, "user");
|
|
|
|
|
|
// សម្អាតប្រអប់បញ្ចូល ដោយដើម្បីឱ្យអ្នកប្រើអាចវាយសារបន្ទាប់
|
|
|
this.input.value = '';
|
|
|
|
|
|
try {
|
|
|
// ហៅ API AI ហើយរង់ចាំការឆ្លើយតប
|
|
|
const reply = await this.callAPI(messageText);
|
|
|
|
|
|
// បញ្ជូលការឆ្លើយតបពី AI ទៅក្នុងជជែក
|
|
|
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 {
|
|
|
// បើកមុខងារឡើងវិញគ្រប់ពេលបញ្ចប់ជោគជ័យឬបរាជ័យ
|
|
|
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";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ចាប់ផ្តើមកម្មវិធីជជែកពេលទំព័រផ្ទុកឡើង
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
new ChatApp();
|
|
|
});
|
|
|
```
|
|
|
|
|
|
#### ការយល់ដឹងអំពីគំនិត JavaScript នីមួយៗ
|
|
|
|
|
|
**រចនាសម្ព័ន្ធថ្នាក់ ES6**៖
|
|
|
```javascript
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// វានៅពេលអ្នកបង្កើតអ_INSTANCE ChatApp ថ្មីមួយ
|
|
|
// វាដូចជាអនុគមន៍ "setup" សម្រាប់ការជជែករបស់អ្នក
|
|
|
}
|
|
|
|
|
|
methodName() {
|
|
|
// វិធីសាស្ត្រជាអនុគមន៍ដែលស្ថិតនៅក្នុងថ្នាក់
|
|
|
// ពួកវាគឺអាចចូលប្រើគុណលក្ខណៈថ្នាក់ដោយប្រើ "this"
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**គំរូ Async/Await**៖
|
|
|
```javascript
|
|
|
// វិធីចាស់ (សំពាធបន្ទាប់):
|
|
|
fetch(url)
|
|
|
.then(response => response.json())
|
|
|
.then(data => console.log(data))
|
|
|
.catch(error => console.error(error));
|
|
|
|
|
|
// វិធីទំនើប (async/await):
|
|
|
try {
|
|
|
const response = await fetch(url);
|
|
|
const data = await response.json();
|
|
|
console.log(data);
|
|
|
} catch (error) {
|
|
|
console.error(error);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**កម្មវិធីដំណើរតាមព្រឹត្តិការណ៍**៖
|
|
|
ទៅវិញទៅមក មិនចាំបាច់ត្រួតពិនិត្យថាអ្វីមួយកើតឡើងជាប់ៗគ្នាទេ យើង "ស្ដាប់" ព្រឹត្តិការណ៍៖
|
|
|
```javascript
|
|
|
// ពេលបែបបទត្រូវបានផ្ញើ សូមរត់ handleSubmit
|
|
|
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
|
|
// ពេលចុចក្តារ Enter ក៏សូមរត់ handleSubmit ផងដែរ
|
|
|
this.input.addEventListener("keypress", (e) => { /* ... */ });
|
|
|
```
|
|
|
|
|
|
**ការគ្រប់គ្រង DOM**៖
|
|
|
```javascript
|
|
|
// បង្កើតធាតុថ្មី
|
|
|
const messageElement = document.createElement("div");
|
|
|
|
|
|
// កែប្រែគុណលក្ខណៈរបស់ពួកវា
|
|
|
messageElement.className = "message user";
|
|
|
messageElement.innerHTML = "Hello world!";
|
|
|
|
|
|
// បន្ថែមទៅកាន់ទំព័រ
|
|
|
this.messages.appendChild(messageElement);
|
|
|
```
|
|
|
|
|
|
#### សុវត្ថិភាព និងអនុវត្តិល្អបំផុត
|
|
|
|
|
|
**ការការពារ XSS**៖
|
|
|
```javascript
|
|
|
escapeHtml(text) {
|
|
|
const div = document.createElement('div');
|
|
|
div.textContent = text; // នេះធ្វើការជៀសវាង HTML ដោយស្វ័យប្រវត្តិ
|
|
|
return div.innerHTML;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ហេតុអ្វីគួរយកចិត្តទុកដាក់**៖ ប្រសិនបើអ្នកប្រើវាយ `<script>alert('hack')</script>` មុខងារនេះធានាថា វាត្រូវបង្ហាញជាអក្សរ មិនមែនបញ្ចូលជាកូដដំណើរការ។
|
|
|
|
|
|
**ការដោះស្រាយកំហុស**៖
|
|
|
```javascript
|
|
|
try {
|
|
|
const reply = await this.callAPI(messageText);
|
|
|
this.appendMessage(reply, "assistant");
|
|
|
} catch (error) {
|
|
|
// បង្ហាញកំហុសដែលងាយស្រួលសម្រាប់អ្នកប្រើប្រាស់ជំនួសការបំបែកកម្មវិធី
|
|
|
this.appendMessage("Sorry, I'm having trouble...", "error");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ការយល់ដឹងពីបទពិសោធន៍អ្នកប្រើ**៖
|
|
|
- **UI អង្គុយអារម្មណ៍ល្អ**៖ បន្ថែមសារអ្នកប្រើភ្លាមៗ កុំរង់ចាំសារពីម៉ាស៊ីនមេ
|
|
|
- **ស្ថានភាពកំពុងផ្ទុក**៖ បិទប៊ូតុង ហើយបង្ហាញ "កំពុងផ្ញើ..." នៅពេលរង់ចាំ
|
|
|
- **រត់រានរហ័ស**៖ រក្សាសារថ្មីៗឲ្យបង្ហាញចែង
|
|
|
- **បញ្ជាក់ការបញ្ចូល**៖ កុំផ្ញើសារទទេ
|
|
|
- **កាត់ខ្នាតក្តារចុច**៖ ត្រង់ Enter ជួយផ្ញើសារ (ដូចកម្មវិធីជជែកពិត)
|
|
|
|
|
|
#### ការយល់ដឹងអំពីដំណើរការកម្មវិធី
|
|
|
|
|
|
1. **ទំព័រត្រូវបានផ្ទុក** → ព្រឹត្តិការណ៍ `DOMContentLoaded` ផ្សាយ → បង្កើត `new ChatApp()`
|
|
|
2. **រចនាសម្ព័ន្ធដំណើរការ** → យកយោងធាតុ DOM → កំណត់អ្នកស្តាប់ព្រឹត្តិការណ៍
|
|
|
3. **អ្នកប្រើវាយសារ** → ចុច Enter ឬចុច Send → ដំណើរការ `handleSubmit`
|
|
|
4. **handleSubmit** → បញ្ជាក់ការបញ្ចូល → បង្ហាញស្ថានភាពកំពុងផ្ទុក → ហៅ API
|
|
|
5. **API ឆ្លើយតប** → បន្ថែមសារថ្មីពី AI ទៅជជែក → បើកនូវចំណុចអន្តរកម្មឡើងវិញ
|
|
|
6. **រួចរាល់សម្រាប់សារបន្ទាប់** → អ្នកប្រើអាចបន្តជជែក
|
|
|
|
|
|
ស្ថាបត្យកម្មនេះអាចពង្រីកបាន — អ្នកអាចបន្ថែមមុខងារ ដូចជា កែសម្រួលសារ អ្នកផ្ទុកឯកសារ ឬចន្លោះនៃសន្ទនាច្រើន ដោយមិនចាំបាច់សរសេរស្ថាបត្យកម្មស្នូលឡើងវិញ។
|
|
|
|
|
|
### 🎯 ពិនិត្យការសិក្សា៖ ស្ថាបត្យកម្មទាន់សម័យផ្នែកមុខថេប
|
|
|
|
|
|
**ការយល់ដឹងស្ថាបត្យកម្ម**៖ អ្នកបានអនុវត្តកម្មវិធីទំព័រតែមួយសម្រាប់ដំណើរការដោយប្រើគំរូ JavaScript ទំនើប។ នេះជាភាពអភិវឌ្ឍផ្នែកមុខមាត់កម្រិតជំនាញជាងមធ្យម។
|
|
|
|
|
|
**គំនិតសំខាន់ដែលបានខ្ពស់**៖
|
|
|
- **ស្ថាបត្យកម្មថ្នាក់ ES6**៖ រៀបចំគ្រោងនៃកូដដែលងាយថែទាំ
|
|
|
- **គំរូ Async/Await**៖ កម្មវិធីអាស៊ីនក្រោមសម័យទំនើប
|
|
|
- **កម្មវិធីដំណើរតាមព្រឹត្តិការណ៍**៖ រចនាបទឆ្លើយតបទាន់ចិត្តអ្នកប្រើ
|
|
|
- **អនុវត្តន៍សុវត្ថិភាពល្អបំផុត**៖ ការការពារXSS និងបញ្ជាក់ការបញ្ចូល
|
|
|
|
|
|
**ការតភ្ជាប់ឧស្សាហកម្ម**៖ គំរូដែលបានរៀន (ស្ថាបត្យកម្មថ្នាក់, ប្រតិបត្តការអាស៊ីន, ការគ្រប់គ្រង DOM) ជាបឋមសម្រាប់ហ្រ្វេមវើកទាន់សម័យដូចជា React, Vue, និង Angular។ អ្នកកំពុងបង្កើតជាមួយគំនិតស្ថាបត្យកម្មដូចគ្នាទៅនឹងការប្រើប្រាស់ក្នុងកម្មវិធីផលិតកម្ម។
|
|
|
|
|
|
**សំណួរបង្ហាញការត្រួតពិនិត្យ**៖ តើធ្វើដូចម្តេចដើម្បីពង្រីកកម្មវិធីជជែកនេះដើម្បីគ្រប់គ្រងសន្ទនាច្រើនឬការផ្ទៀងផ្ទាត់អ្នកប្រើ? ពិនិត្យការផ្លាស់ប្ដូរស្ថាបត្យកម្មដែលត្រូវការនិងរចនាសម្ព័ន្ធថ្នាក់នឹងអាចវិវត្តន៍ដូចម្តេច។
|
|
|
|
|
|
### ការតុបតែងចំណុចប្រយោជន៍របស់អ្នកជជែក
|
|
|
|
|
|
ឥឡូវនេះ យើងចង់បង្កើតចំណុចប្រយោជន៍ជជែកពិតសម័យទាន់ដែលមានមើលឃើញគួរឱ្យចាប់អារម្មណ៍ជាមួយ CSS។ ការតុបតែងល្អធ្វើឲ្យកម្មវិធីរបស់អ្នកមានរូបរាងជាជំនាញ និងប្រសើរឡើងនូវបទពិសោធន៍អ្នកប្រើ។ យើងប្រើលក្ខណៈទំនើបៗ រួមមាន Flexbox, CSS Grid, និងសម្បុរសម្បូរចំណុចប្ដូរដើម្បីរចនារូបបែបឆ្លាតវៃ និងងាយសម្បូរ។
|
|
|
|
|
|
បង្កើត `styles.css` ជាមួយស្ទីលបុព្វបទទាំងនេះ៖
|
|
|
|
|
|
```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` ក្នុង JavaScript របស់អ្នកឲ្យស្របតាមម៉ាស៊ីនបម្រើផ្នែកបិទក្រោយរបស់អ្នក៖
|
|
|
|
|
|
```javascript
|
|
|
// សម្រាប់ការអភិវឌ្ឍន៍ក្នុងតំបន់
|
|
|
this.BASE_URL = "http://localhost:5000";
|
|
|
|
|
|
// សម្រាប់ GitHub Codespaces (ជំនួសជាមួយ URL ពិតរបស់អ្នក)
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
**កំណត់ URL សម្រាប់ផ្នែកបិទក្រោយរបស់អ្នក៖**
|
|
|
- **អភិវឌ្ឍន៍ក្នុងស្រុក**៖ ប្រើ `http://localhost:5000` ប្រសិនបើចងក្រងផ្នែកមុខនិងខាងក្រោយនៅក្នុងកុំព្យូទ័រស្រុក
|
|
|
- **Codespaces**៖ ស្វែងរក URL ផ្នែកបិទក្រោយនៅក្នុងផ្ទាំង Ports បន្ទាប់ពីធ្វើឲ្យច្រក 5000 ជាសាធារណៈ
|
|
|
- **ផលិតកម្ម**៖ ប្តូរជាប្រអប់ដូមែនពិតប្រាកដរបស់អ្នកពេលបញ្ចូលទៅសេវាកម្មស្នាក់នៅ
|
|
|
|
|
|
> 💡 **កំណត់សម្គាល់សាកល្បង**៖ អ្នកអាចសាកល្បងផ្នែកបិទក្រោយដោយចូលទៅ URL ដើមផ្ទាល់ក្នុងកម្មវិធីរុករក។ អ្នកត្រូវឃើញសារស្វាគមន៍ពីម៉ាស៊ីនបម្រើ FastAPI របស់អ្នក។
|
|
|
|
|
|
|
|
|
|
|
|
## ការសាកល្បង និងការដាក់បង្ហាញ
|
|
|
|
|
|
ឥឡូវនេះដែលអ្នកមានផ្នែកមុខ និងផ្នែកបិទក្រោយរួចរាល់ អ្នកអាចសាកល្បងឲ្យកាន់តែល្អ បើយើងស្វែងយល់ពីជម្រើសដាក់បង្ហាញសម្រាប់ចែករំលែកជំនួយការជជែករបស់អ្នកទៅអ្នកដទៃ។
|
|
|
|
|
|
### ដំណើរការសាកល្បងក្នុងស្រុក
|
|
|
|
|
|
អនុវត្តជាដំណាក់កាលដូចខាងក្រោមដើម្បីសាកល្បងកម្មវិធីរួមរបស់អ្នក៖
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[ចាប់ផ្តើមម៉ាស៊ីនបម្រើផ្នែកបញ្ខូលក្រោយ] --> B[កំណត់អថេរបរិយា]
|
|
|
B --> C[សាកល្បងចំណុចចប់ API]
|
|
|
C --> D[បើកផ្ទាំងមុខក្នុងកម្មវិធីរុករក]
|
|
|
D --> E[សាកល្បងមុខងារសន្ទនា]
|
|
|
E --> F[ដោះស្រាយបញ្ហាណាមួយ]
|
|
|
```
|
|
|
**ដំណើរការសាកល្បងឯកត្តាម៖**
|
|
|
|
|
|
1. **ចាប់ផ្តើមម៉ាស៊ីនបម្រើផ្នែកបិទក្រោយ**៖
|
|
|
```bash
|
|
|
cd backend
|
|
|
source venv/bin/activate # ឬ venv\Scripts\activate លើ Windows
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
2. **ផ្ទៀងផ្ទាត់ថា API ធ្វើការ**៖
|
|
|
- បើក `http://localhost:5000` ក្នុងកម្មវិធីរុករក
|
|
|
- អ្នកគួរមានសារស្វាគមន៍ពីម៉ាស៊ីនបម្រើ FastAPI របស់អ្នក
|
|
|
|
|
|
3. **បើកផ្នែកមុខ**៖
|
|
|
- ចូលទៅថតផ្នែកមុខ
|
|
|
- បើក `index.html` នៅក្នុងកម្មវិធីរុករកវេប
|
|
|
- ឬប្រើកម្មវិធីពង្រីក Live Server របស់ VS Code សម្រាប់បទពិសោធន៍អភិវឌ្ឍល្អជាងនេះ
|
|
|
|
|
|
4. **សាកល្បងមុខងារជជែក**៖
|
|
|
- វាយសារចូលដោយប្រអប់បញ្ចូល
|
|
|
- ចុច "Send" ឬចុច Enter
|
|
|
- ផ្ទៀងផ្ទាត់ថា AI ឆ្លើយតបត្រឹមត្រូវ
|
|
|
- ត្រួតពិនិត្យគន្លងកម្មវិធី JavaScript នៅក្នុងកម្មវិធីរុករកសម្រាប់កំហុស
|
|
|
|
|
|
### ការដោះស្រាយបញ្ហាទូទៅ
|
|
|
|
|
|
| បញ្ហា | រោគសញ្ញា | ដំណោះស្រាយ |
|
|
|
|---------|----------|----------|
|
|
|
| **កំហុស CORS** | ផ្នែកមុខមិនអាចទំនាក់ទំនងផ្នែកបិទក្រោយ | ត្រូវប្រាកដថា FastAPI CORSMiddleware ត្រូវបានកំណត់យ៉ាងត្រឹមត្រូវ |
|
|
|
| **កំហុស API Key** | មិនបានអនុញ្ញាត 401 | ពិនិត្យអថេរបរិយាកាស `GITHUB_TOKEN` របស់អ្នក |
|
|
|
| **ការតភ្ជាប់ត្រូវបដិសេធ** | បញ្ហាបណ្តាញនៅផ្នែកមុខ | ផ្ទៀងផ្ទាត់ URL ផ្នែកបិទក្រោយ និងបើកម៉ាស៊ីនបម្រើ Flask បើក |
|
|
|
| **គ្មានការឆ្លើយតបពី AI** | សារទទេ ឬកំហុស | ពិនិត្យកំណត់ហេតុផ្នែកបិទក្រោយសម្រាប់កំណត់បរិមាណ API ឬបញ្ហាអនុញ្ញាត |
|
|
|
|
|
|
**ជំហានកែតម្រូវជារឿយៗ**៖
|
|
|
- **ពិនិត្យ** កុងសូលកម្មវិធីរុករកសម្រាប់កំហុស JavaScript
|
|
|
- **ផ្ទៀងផ្ទាត់** បណ្តាញសម្រាប់ការសំណើ API ជោគជ័យ និងប្រតិបត្ដិ
|
|
|
- **ពិនិត្យ** កំហុស Python លើផ្ទាំងបញ្ជារដ្ឋានផ្នែកបិទក្រោយ
|
|
|
- **បញ្ជាក់** អថេរបរិយាកាសត្រូវបានផ tải និងអាចប្រើបាន
|
|
|
|
|
|
## 📈 របៀបអភិវឌ្ឍកម្មវិធី AI របស់អ្នកដំណើរការ
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title ដំណើរការអភិវឌ្ឍកម្មវិធី AI ដោយពេញលេញ
|
|
|
|
|
|
section មូលដ្ឋាន AI
|
|
|
ការយល់ដឹងអំពី Generative AI
|
|
|
: ជំនាញទទួលស្គាល់លំនាំ
|
|
|
: បMastering ការគ្រប់គ្រងប៉ារ៉ាម៉ែត្រ AI
|
|
|
: រៀនបច្ចេកទេស prompt engineering
|
|
|
|
|
|
ការរួមបញ្ចូលម៉ូឌែល GitHub
|
|
|
: រុករកវេទិកាសេវា AI
|
|
|
: ដំណើរការសម្ងាត់ authentication
|
|
|
: បំប៉នប៉ារ៉ាម៉ែត្រ ម៉ូឌែល
|
|
|
|
|
|
section ការអភិវឌ្ឍខាងក្រោយ
|
|
|
រចនាសម្ព័ន្ធ Python API
|
|
|
: សាងសង់កម្មវិធី FastAPI
|
|
|
: អនុវត្តប្រតិបត្តិការចំរូង async
|
|
|
: បង្កើត endpoints សុវត្ថិភាព
|
|
|
|
|
|
ការរួមបញ្ចូលសេវា AI
|
|
|
: ការតភ្ជាប់ទៅ API នៃ AI ខាងក្រៅ
|
|
|
: គ្រប់គ្រងការកំណត់អត្រា
|
|
|
: អនុវត្ត error boundaries
|
|
|
|
|
|
section ជំនាញខាងមុខអ្នកប្រើ
|
|
|
លំនាំ JavaScript សម័យទំនើប
|
|
|
: បMastering រចនាសម្ព័ន្ធ class ES6
|
|
|
: អនុវត្តចរន្ត async/await
|
|
|
: សាងសង់មុខងារឆ្លើយតប
|
|
|
|
|
|
បទពិសោធន៍អ្នកប្រើពេលវេលាពិត
|
|
|
: បង្កើតមុខងារជជែក dynamic
|
|
|
: គ្រប់គ្រងស្ថានភាពកំពុងផ្ទុក
|
|
|
: បំប៉នប្រតិបត្តិការអ្នកប្រើ
|
|
|
|
|
|
section ត្រៀមប្រើប្រាស់ផលិតកម្ម
|
|
|
សុវត្ថិភាព និង ប្រសិទ្ធភាព
|
|
|
: អនុវត្តការគ្រប់គ្រង token សុវត្ថិភាព
|
|
|
: រារាំងចំណុចខ្សោយ XSS
|
|
|
: បំប៉នប្រសិទ្ធភាព API
|
|
|
|
|
|
ការចេញផ្សាយផ្នែកជំនាញ
|
|
|
: សាងសង់រចនាសម្ព័ន្ធអាចពង្រីក
|
|
|
: បង្កើតកូដថែរក្សាបាន
|
|
|
: បរិយាភាពឯកសារការអភិវឌ្ឍ
|
|
|
```
|
|
|
**🎓 សញ្ញាបត្ររូងចេញ**៖ អ្នកបានបង្កើតកម្មវិធី AI ពេញលេញដោយប្រើបច្ចេកវិទ្យានិងគំរូស្ថាបត្យកម្មដូចគ្នានៅក្នុងកម្មវិធីជំនួយ AI ទំនើប។ ជំនាញទាំងនេះជាចំណុចបញ្ចប់រវាងអភិវឌ្ឍន៍វេបផ្លូវការ និងការរួមបញ្ចូល AI បច្ចុប្បន្ន។
|
|
|
|
|
|
**🔄 សមត្ថភាពកម្រិតបន្ទាប់**៖
|
|
|
- ត្រៀមខ្លួនសម្រាប់ត្រៀមអនុវត្តហ្រ្វេមវើក AI (LangChain, LangGraph)
|
|
|
- មានផែនការបង្កើតកម្មវិធី AI ពហុមុខងារ (អត្ថបទ រូបភាព សំឡេង)
|
|
|
- អាចអនុវត្តបណ្ណាល័យទិន្នន័យវ៉ិចទ័រ និងប្រព័ន្ធស្វែងរក
|
|
|
- គ្រឹះបត់សម្រាប់សិក្សា ម៉ាស៊ីនរៀន និងសម្រួលគំរូ AI
|
|
|
|
|
|
## ការប្រកួតប្រជែង GitHub Copilot Agent 🚀
|
|
|
|
|
|
ប្រើម៉ូដ Agent ដើម្បីបញ្ចប់ប défiខាងក្រោម៖
|
|
|
|
|
|
**ការពិពណ៌នា៖** បង្កើតជំនួយការជជែកដោយបន្ថែមប្រវត្តិសន្ទនា និងការរក្សាសាររបស់អ្នកជាជម្លើយ។ ការប្រកួតនេះជួយអ្នកយល់ពីរបៀបគ្រប់គ្រងសភាពក្នុងកម្មវិធីជជែក និងអនុវត្តវិធីសាស្ត្រផ្ទុកទិន្នន័យសម្រាប់បទពិសោធន៍ប្រើល្អជាងនេះ។
|
|
|
|
|
|
**ស្នើសុំ៖** កែទំរង់កម្មវិធីជជែកឲ្យរួមបញ្ចូលប្រវត្តិសន្ទនាដែលរក្សាទុករវាងកំឡុងពេលប្រតិបត្តិការ។ បន្ថែមមុខងារសម្រាប់រក្សាទុកសារជជែកទៅក្នុង local storage បង្ហាញប្រវត្តិសន្ទនាពេលទំព័រត្រូវបានផ្ទុកឡើង និងបន្ថែមប៊ូតុង "Clear History"។ ក៏ចូលរួមបញ្ចូលសញ្ញាការវាយនិងស្លាបពេលវេលាសារដើម្បីធ្វើឲ្យបទពិសោធន៍ជជែកកាន់តែមានភាពជាក់ស្តែង។
|
|
|
|
|
|
សូមស្វែងយល់បន្ថែមអំពី [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) នៅទីនេះ។
|
|
|
|
|
|
## ភារកិច្ច៖ បង្កើតជំនួយការផ្ទាល់ខ្លួន AI របស់អ្នក
|
|
|
|
|
|
ឥឡូវនេះ អ្នកនឹងបង្កើតការអនុវត្តជំនួយការផ្ទាល់ខ្លួន AI របស់អ្នក។ ជំនួសការជូតខ្ទង់កូដសម្តែង ផ្ទាល់នេះជាឱកាសដើម្បីអនុវត្តគំនិតខណៈអ្នកកំពុងបង្កើតអ្វីដែលបង្ហាញពីចំណាប់អារម្មណ៍ និងការប្រើប្រាស់របស់អ្នក។
|
|
|
|
|
|
### តម្រូវការគម្រោង
|
|
|
|
|
|
ចូរតម្រង់គម្រោងអ្នកជាមួយរចនាសម្ព័ន្ធស្អាត រៀបរយ៖
|
|
|
|
|
|
```text
|
|
|
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 របស់អ្នកដំណើរការយ៉ាងដូចម្តេច
|
|
|
|
|
|
**អភិវឌ្ឍផ្នែកមុខ៖**
|
|
|
- **បង្កើត** ចំណុចប្រយោជន៍ជជែកដែលមានអារម្មណ៍ងាយយល់ និងស្វាគមន៍
|
|
|
- **សរសេរ** JavaScript ល្អទំនើបដែលអ្នកមានមោទនភាពបង្ហាញដល់អ្នកអភិវឌ្ឍន៍ផ្សេង
|
|
|
- **រចនា** ស្ទីលបុព្វបទផ្ទាល់ខ្លួន ដែលបង្ហាញបុគ្គលិកភាព AI របស់អ្នក – រីករាយ និងពណ៌មមេះ? ស្អាត និងតិចតួច? ជាអ្វីដែលអ្នកចង់បាន!
|
|
|
- **ធានា** វាដំណើរការល្អទាំងទូរស័ព្ទ និងកុំព្យូទ័រ
|
|
|
|
|
|
**តម្រូវការបុគ្គលិកភាព:**
|
|
|
- **ជ្រើសរើស** ឈ្មោះ និងបុគ្គលិកភាពផ្ទាល់ខ្លួនសម្រាប់ជំនួយការអេไអ៊ីរបស់អ្នក – ប្រហែលជារបស់ដែលបង្ហាញពីចំណាប់អារម្មណ៍ ឬបញ្ហាដែលអ្នកចង់ដោះស្រាយ
|
|
|
- **ប្ដូរស្ទីលរូបភាព** ឲ្យស្របតាមអារម្មណ៍របស់ជំនួយការ
|
|
|
- **សរសេរ** សារស្វាគមន៍ចាប់អារម្មណ៍ ដែលធ្វើឲ្យមនុស្សចង់ចាប់ផ្តើមជជែក
|
|
|
- **សាកល្បង** ជំនួយការរបស់អ្នកជាមួយសំណួរផ្សេងៗ ដើម្បីឲ្យឃើញបែបផែនដែលវាឆ្លើយតប
|
|
|
|
|
|
### គំនិតបន្ថែម (ជាជម្រើស)
|
|
|
|
|
|
ចង់អភិវឌ្ឍគម្រោងរបស់អ្នកទៅកម្រិតខ្ពស់ទៀតទេ? ទីនេះមានគំនិតគួរឱ្យផ្តួលចិត្ត៖
|
|
|
|
|
|
| មុខងារ | ការពណ៌នា | ជំនាញដែលអ្នកនឹងហាត់ប្រាណ |
|
|
|
|---------|-------------|------------------------|
|
|
|
| **ប្រវត្តិសារ** | ចងចាំសន្ទនានៅក្រោយកញ្ចក់ទំព័រ | ប្រើ localStorage, ដំណើរការជាមួយ JSON |
|
|
|
| **សញ្ញារាយការវាយ** | បង្ហាញ "AI កំពុងវាយ..." ខណៈរង់ចាំចម្លើយ | ចលនាមួយ CSS, កម្មវិធីអាស៊ីន |
|
|
|
| **វេលាសារផ្ញើ** | បង្ហាញពេលវេលាសារបានផ្ញើ | ការបំលែងកាលបរិច្ឆេទ/ម៉ោង, រចនាបទ UX |
|
|
|
| **នាំចេញជជែក** | អនុញ្ញាតឲ្យអ្នកប្រើទាញយកការសន្ទនា | ការគ្រប់គ្រងឯកសារ, ការនាំចេញទិន្នន័យ |
|
|
|
| **ប្ដូរម៉ូដ** | ប្ដូរម៉ូដភ្លឺ/ងងឹត | អថេរផ្ទាល់ខ្លួន CSS, ចំណូលចិត្តអ្នកប្រើ |
|
|
|
| **បញ្ចូលសំឡេង** | បន្ថែមមុខងារនិយាយទៅអត្ថបទ | Web APIs, ផ្នែកគាំទ្រអ្នកមានបញ្ហា |
|
|
|
|
|
|
### ការសាកល្បង និងឯកសារ
|
|
|
|
|
|
**ការធានាគុណភាព៖**
|
|
|
- **សាកល្បង** កម្មវិធីរបស់អ្នកជាមួយ input បំបែកជាច្រើនប្រភេទ និងករណីគាស់
|
|
|
- **ផ្ទៀងផ្ទាត់** រចនាបទឆ្លើយតបលើអេក្រង់ទំហំផ្សេងៗ
|
|
|
- **ពិនិត្យ** មាតិកការចូលទៅបានដោយក្តារចុច និងកម្មវិធីអានចេញសំឡេង
|
|
|
- **បញ្ជាក់** HTML និង CSS សម្រាប់ស្តង់ដារត្រឹមត្រូវ
|
|
|
|
|
|
**តម្រូវការឯកសារ៖**
|
|
|
- **សរសេរ** README.md ពិពណ៌នាគម្រោង និងរបៀបរត់វា
|
|
|
- **រួមបញ្ចូល** រូបថតអេក្រង់នៃចំណុចប្រយោជន៍ជជែក
|
|
|
- **ឯកសារពិសេស** មុខងារផ្សេងៗឬប្ដូរតាមបំណងដែលបានបន្ថែម
|
|
|
- **ផ្ដល់** ការណែនាំច្បាស់លាស់សម្រាប់អ្នកអភិវឌ្ឍន៍ផ្សេងទៀត
|
|
|
|
|
|
### គោលការណ៍ស្នើសុំ
|
|
|
|
|
|
**ឯកសារដែលត្រូវដាក់ស្នើ៖**
|
|
|
1. រោងចក្រគម្រោងពេញ លម្អិតគ្រប់កូដប្រភព
|
|
|
2. README.md ជាមួយការពិពណ៌នាគម្រោង និងការណែនាំការតំឡើង
|
|
|
3. រូបថតអេក្រង់បង្ហាញជំនួយការជជែករបស់អ្នកដំណើរការ
|
|
|
4. សេចក្តីសង្កេតសង្ខេបអំពីអ្វីដែលអ្នកបានរៀន និងបញ្ហាដែលបានប្រឈមមុខ
|
|
|
|
|
|
**ក្រមខណ្ឌវាយតម្លៃ៖**
|
|
|
- **មុខងារ**៖ ជំនួយការជជែកដំណើរការតាមអ្វីដែលត្រូវការទេ?
|
|
|
- **គុណភាពកូដ**៖ តើកូដរៀបចំបានល្អ មានប្រយោជន៍ និងងាយថែទាំ?
|
|
|
- **រចនា**៖ ទាន់សម័យ និងងាយប្រើ?
|
|
|
- **ច្នៃប្រឌិត**៖ តើការអនុវត្តរបស់អ្នកមានភាពប្លែក និងផ្ទាល់ខ្លួនយ៉ាងដូចម្តេច?
|
|
|
- **ឯកសារ**៖ ណែនាំការតំឡើងច្បាស់លាស់ និងពេញលេញ?
|
|
|
|
|
|
> 💡 **ប្រាប់ថាឈ្នះ**៖ ចាប់ផ្តើមជាមួយតម្រូវការមូលដ្ឋានជាមុន ជាបន្ទាប់បន្ថែមមុខងារបន្ថែមដើម្បីធានាថាអ្នកមានបទពិសោធន៍គ្រឹះល្អមុនបន្ថែមមុខងារខ្ពស់។
|
|
|
|
|
|
## ដំណោះស្រាយ
|
|
|
|
|
|
[Solution](./solution/README.md)
|
|
|
|
|
|
## ប défiខ្សែមួយបន្ថែម
|
|
|
|
|
|
ត្រៀមខ្លួនពង្រីកជំនួយការ AI របស់អ្នកទៅកម្រិតខ្ពស់ជាងមុន។ សាកល្បងប défiខ្សែមួយទាំងនេះដែលនឹងជ្រាបចិត្តអ្នកអំពីការរួមបញ្ចូល AI និងការអភិវឌ្ឍវេប។
|
|
|
|
|
|
### ការប្តូរបុគ្គលិកភាព
|
|
|
|
|
|
ភាពអស្ចារ្យពិតប្រាកដកើតមាននៅពេលអ្នកផ្តល់បុគ្គលិកភាពជាក់លាក់ជូនជំនួយការអៃអ៊ីរបស់អ្នក។ សាកល្បងនឹងប្រើ system prompts ផ្សេងៗដើម្បីបង្កើតជំនួយការជាច្រើនជាគំរូ៖
|
|
|
|
|
|
**ឧទាហរណ៍ជំនួយការជំនាញវិជ្ជាជីវៈ៖**
|
|
|
```python
|
|
|
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
|
|
|
```
|
|
|
|
|
|
**ឧទាហរណ៍ជំនួយការជំនួយការសរសេរកម្មវិធីច្នៃប្រឌិត៖**
|
|
|
```python
|
|
|
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
|
|
|
```
|
|
|
|
|
|
**ឧទាហរណ៍ជំនួយការបង្រៀនបច្ចេកទេស៖**
|
|
|
```python
|
|
|
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
|
|
|
```
|
|
|
|
|
|
### ការកែលម្អផ្នែកមុខ
|
|
|
|
|
|
បម្លែងចំណុចប្រយោជន៍ជជែករបស់អ្នកជាមួយការកែលម្អផ្លូវភេទ និងមុខងារខាងក្រោម៖
|
|
|
|
|
|
**លក្ខណៈពិសេស CSS ជាន់ខ្ពស់៖**
|
|
|
- **អនុវត្ត** ចលនារលូន និងផ្លាស់ប្តូរសារជាទម្រង់
|
|
|
- **បន្ថែម** រចនាបទពពកសារផ្ទាល់ខ្លួនជាមួយ CSS shapes និង gradients
|
|
|
- **បង្កើត** ចលនាសញ្ញាវាយសរសេរសម្រាប់ពេល AI កំពុង "គិត"
|
|
|
- **រចនា** ការឆ្លើយតបរ៉េអាក់ស្យុងអេមូជី ឬប្រព័ន្ធវាយតម្លៃសារ
|
|
|
|
|
|
**ការបន្ថែម JavaScript៖**
|
|
|
- **បន្ថែម** ប៊ូតុងកាត់ខ្នាតក្តារចុច (Ctrl+Enter សម្រាប់ផ្ញើ, Escape សម្រាប់សម្អាតបញ្ចូល)
|
|
|
- **អនុវត្ត** ស្វែងរកសារ និងការបូកសារ
|
|
|
- **បង្កើត** មុខងារនាំចេញសន្ទនា (ទាញយកជាអត្ថបទ ឬ JSON)
|
|
|
- **បន្ថែម** ការរក្សាទុកស្វ័យប្រវត្តិទៅ localStorage ដើម្បីការពារសារបាត់បង្វិល
|
|
|
|
|
|
### ការរួមបញ្ចូល AI ជាន់ខ្ពស់
|
|
|
|
|
|
**បុគ្គលិកភាព AI ច្រើន៖**
|
|
|
- **បង្កើត** ចុះជម្រើសសម្រាប់ផ្លាស់ប្តូរវិញរវាងបុគ្គលិកភាព AI ផ្សេងៗ
|
|
|
- **រក្សា** ពិសេសរបស់អ្នកប្រើនៅក្នុង localStorage
|
|
|
- **អនុវត្ត** ការផ្លាស់ប្ដូរបរិបទដែលរក្សារភាពតន្ត្រឹមក្នុងសន្ទនា
|
|
|
|
|
|
**មុខងារឆ្លើយតបឆ្លាតវៃ៖**
|
|
|
- **បន្ថែម** ការចងចាំបរិបទសន្ទនា (AI ចងចាំសារមុនៗ)
|
|
|
- **អនុវត្ត** ការផ្ដល់អនុសាសន៍ឆ្លាតវៃពីប្រធានបទសន្ទនា
|
|
|
- **បង្កើត** ប៊ូតុងឆ្លើយលឿនសម្រាប់សំណួរដែលគេប្រើជាញឹកញាប់
|
|
|
|
|
|
> 🎯 **គោលបំណងសិក្សា**៖ ប défiខ្សែមួយបន្ថែមនេះជួយអ្នកយល់ពីគំរូអភិវឌ្ឍន៍វេបកម្រិតខ្ពស់ និងបច្ចេកទេសរួមបញ្ចូល AI ដែលប្រើក្នុងកម្មវិធីផលិតកម្ម។
|
|
|
|
|
|
## សង្ខេបនិងជំហានបន្ទាប់
|
|
|
អបអរសាទរ! អ្នកបានបង្កើតជោគជ័យជំនួយការជជែកផ្អែកលើ AI ពេញលេញពីចាប់ផ្តើម។គម្រោងនេះបានផ្តល់បទពិសោធន៍អាជីពឱ្យអ្នកជាមួយបច្ចេកវិទ្យាការអភិវឌ្ឍគេហទំព័រសម័យទំនើប និងការរួមបញ្ចូល AI ដែលជាជំនាញដែលកាន់តែសំខាន់នៅក្នុងវិស័យបច្ចេកវិទ្យាបច្ចុប្បន្ន។
|
|
|
|
|
|
### អ្វីដែលអ្នកបានសម្រេច
|
|
|
|
|
|
នៅពេលវេលានេះ អ្នកបានចេះជំនាញនិងយល់ដឹងអំពីបច្ចេកវិទ្យាសំខាន់ៗ និងគំនិតមួយចំនួន៖
|
|
|
|
|
|
**ការអភិវឌ្ឍក្រោយបំផុត:**
|
|
|
- **រួមបញ្ចូល** ជាមួយ GitHub Models API សម្រាប់មុខងារ AI
|
|
|
- **បានបង្កើត** RESTful API ដោយប្រើ Flask ជាមួយការរៀបចំករណីកំហុសត្រឹមត្រូវ
|
|
|
- **អនុវត្ត** ការផ្ទៀងផ្ទាត់សុវត្ថិភាពដោយប្រើអថេរបរិយាកាស
|
|
|
- **កំណត់រចនាសម្ព័ន្ធ** CORS សម្រាប់ការស្នើរសុំពីប្រភពផ្សេងគ្នា រវាងមុខមាត់អ្នកប្រើ និងក្រោយបំផុត
|
|
|
|
|
|
**ការអភិវឌ្ឍមុខមាត់អ្នកប្រើ:**
|
|
|
- **បានបង្កើត** អនុស្សាវរីយ៍ជជែកដែលមានប្រតិកម្ម ខណៈប្រើ HTML ទំរង់ប្រើប្រាស់
|
|
|
- **អនុវត្ត** JavaScript សម័យទំនើប ជាមួយ async/await និងសំណុំថ្នាក់ជាស្ថានភាព
|
|
|
- **រចនា** រូបរាងអ្នកប្រើដ៏ទាក់ទាញ ដោយប្រើ CSS Grid, Flexbox និងចលនាវិជ្ជមាន
|
|
|
- **បន្ថែម** មុខងារចូលដំណើរការ និងគោលការណ៍រចនាដោយមានប្រតិកម្ម
|
|
|
|
|
|
**ការរួមបញ្ចូលជាសរុប:**
|
|
|
- **ភ្ជាប់** មុខមាត់អ្នកប្រើ និងក្រោយបំផុតតាមរយៈការហៅ API តាម HTTP
|
|
|
- **គ្រប់គ្រង** ប្រតិកម្មពេលវេលាពិត បើយោងតាមការផ្លាស់ប្តូរទិន្នន័យមិនសំរឹង
|
|
|
- **អនុវត្ត** ការគ្រប់គ្រងកំហុស និងមតិយោបល់ពីអ្នកប្រើក្នុងកម្មវិធីទាំងមូល
|
|
|
- **បានសាកល្បង** សៀវភៅដំណើរការគម្រោងពីការបញ្ចូលព័ត៌មានរបស់អ្នកប្រើ ដល់ការឆ្លើយតបពី AI
|
|
|
|
|
|
### លទ្ធផលការសិក្សាសំខាន់ៗ
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((ជំនាញកម្មវិធីជជែក AI))
|
|
|
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 ទៅក្នុងកម្មវិធីបណ្តាញបែបបុរាណ ដើម្បីបង្កើតបទពិសោធន៍អ្នកប្រើដែលគិតយ៉ាងច្បាស់លាស់ និងមានប្រតិកម្ម។
|
|
|
|
|
|
### ការអនុវត្តជំនាញវិជ្ជាជីវៈ
|
|
|
|
|
|
ជំនាញដែលអ្នកបានអភិវឌ្ឍនៅក្នុងមេរៀននេះអាចប្រើបានភ្លាមៗសម្រាប់ការប្រកបអាជីពអភិវឌ្ឍកម្មវិធីទំនើប៖
|
|
|
|
|
|
- **អភិវឌ្ឍគេហទំព័រពេញលេញ** ដោយប្រើរចនាសម្ព័ន្ធទំនើប និង API
|
|
|
- **រួមបញ្ចូល AI** ក្នុងកម្មវិធីបណ្តាញ និងកម្មវិធីទូរស័ព្ទចល័ត
|
|
|
- **រចនា និងអភិវឌ្ឍ API** សម្រាប់សំណង់សេវាកម្មតូចៗ
|
|
|
- **អភិវឌ្ឍផ្ទៃមុខអ្នកប្រើ** ដែលផ្តោតលើការចូលដំណើរការ និងរចនាគោលការណ៍ត្រួតពិនិត្យប្រតិកម្ម
|
|
|
- **អ្នកអភិវឌ្ឍ DevOps** រួមបញ្ចូលការកំណត់បរិយាកាស និងការចែកចាយ
|
|
|
|
|
|
### បន្តការជំនាញអភិវឌ្ឍ AI របស់អ្នក
|
|
|
|
|
|
**ជំហានសិក្សាដំបូងបន្ទាប់៖**
|
|
|
- **ស្វែងយល់** អំពីម៉ូឌែល AI និង API លម្អិតជាងនេះ (GPT-4, Claude, Gemini)
|
|
|
- **រៀន** អំពីបច្ចេកទេស prompt engineering ដើម្បីធ្វើឱ្យចម្លើយ AI ប្រសើរជាងមុន
|
|
|
- **សិក្សា** រចនាបទពិភាក្សានិងបទពិសោធន៍អ្នកប្រើ chatbot
|
|
|
- **ស្វែងរក** សុវត្ថិភាព AI, أخلاقيات, និងការអភិវឌ្ឍ AI តាមការទទួលខុសត្រូវ
|
|
|
- **បង្កើត** កម្មវិធីស្មុគស្មាញជាងនេះមានមេម៉ូរីការសន្ទនា និងការយល់ដឹងបរិបទ
|
|
|
|
|
|
**គំនិតគម្រោងកម្រិតខ្ពស់៖**
|
|
|
- បន្ទប់ជជែកមនុស្សច្រើនជាមួយការគ្រប់គ្រង AI
|
|
|
- កម្មវិធីជជែកសេវាអតិថិជនផ្អែកលើ AI
|
|
|
- ជំនួយការបង្រៀនតាមអប់រំពហុជាតិផ្ទាល់ខ្លួន
|
|
|
- មិត្តនិពន្ធច្នៃប្រឌិត ជាមួយបុគ្គលិកភាព AI ផ្សេងៗ
|
|
|
- ជំនួយការឯកសារបច្ចេកទេសសម្រាប់អ្នកអភិវឌ្ឍ
|
|
|
|
|
|
## ការចាប់ផ្តើមជាមួយ GitHub Codespaces
|
|
|
|
|
|
ចង់សាកល្បងគម្រោងនេះនៅក្នុងបរិយាកាសអភិវឌ្ឍនៅពពកមែនទេ? GitHub Codespaces ផ្តល់ការត្រៀមការអភិវឌ្ឍទូលំទូលាយនៅក្នុងកម្មវិធីរុករករបស់អ្នក ដែលល្អឥតខ្ចោះសម្រាប់ពិនិត្យចម្លើយកម្មវិធី AI ដោយមិនចាំបាច់រៀបចំបរិយាកាសក្នុងកុំព្យូទ័រផ្ទាល់ខ្លួន។
|
|
|
|
|
|
### ការតំឡើងបរិយាកាសអភិវឌ្ឍរបស់អ្នក
|
|
|
|
|
|
**ជំហានទី ១៖ បង្កើតពីគំរូ**
|
|
|
- **ចូលទៅ** នៅក្នុង [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
|
|
|
- **ចុច** "Use this template" នៅកន្លែងខាងលើស្ដាំ (ប្រាកដថាអ្នកបានចុះឈ្មោះក្នុង GitHub)
|
|
|
|
|
|
|
|
|
|
|
|
**ជំហានទី ២៖ បើក Codespaces**
|
|
|
- **បើក** ឃ្លាំងដែលអ្នកបានបង្កើតថ្មី
|
|
|
- **ចុច** ប៊ូតុង Code ពណ៌បៃតង ហើយជ្រើស "Codespaces"
|
|
|
- **ជ្រើស** "Create codespace on main" ដើម្បីចាប់ផ្តើមបរិយាកាសអភិវឌ្ឍរបស់អ្នក
|
|
|
|
|
|
|
|
|
|
|
|
**ជំហានទី ៣៖ កំណត់បរិយាកាស**
|
|
|
ពេល Codespace របស់អ្នកបង្ហាញ អ្នកនឹងមានសិទ្ធិប្រើ៖
|
|
|
- **កម្មវិធី Python, Node.js** និងឧបករណ៍អភិវឌ្ឍទាំងអស់បានដំឡើងរួច
|
|
|
- **ចំណុចប្រទាក់ VS Code** ជាមួយផ្នែកបន្ថែមសម្រាប់អភិវឌ្ឍវេបសាយ
|
|
|
- **ចូលប្រើ Terminal** សម្រាប់បើកម៉ាស៊ីនបម្រើក្រោយ និងមុខមាត់
|
|
|
- **ដំណើរការជញ្ជាំង Port forwarding** សម្រាប់សាកល្បងកម្មវិធីរបស់អ្នក
|
|
|
|
|
|
**អ្វីដែល Codespaces ផ្ដល់៖**
|
|
|
- **បំបាត់** បញ្ហាការតំឡើង និងកំណត់បរិយាកាសក្នុងកុំព្យូទ័រផ្ទាល់ខ្លួន
|
|
|
- **ផ្ដល់** បរិយាកាសអភិវឌ្ឍស៊ីមឆ្គងលើឧបករណ៍ជាច្រើន
|
|
|
- **រួមបញ្ចូល** ឧបករណ៍ និងផ្នែកបន្ថែមបានកំណត់រចនាសម្ព័ន្ធរួចសម្រាប់ការអភិវឌ្ឍវេប
|
|
|
- **ផ្ដល់** ការរួមបញ្ចូលជាមួយ GitHub សម្រាប់គ្រប់គ្រងកំណែ និងការសហការបានដោយងាយស្រួល
|
|
|
|
|
|
> 🚀 **គន្លឹះអ្នកជំនាញ**៖ Codespaces ល្អឥតខ្ចោះសម្រាប់រៀន និងសាកល្បងកម្មវិធី AI ពីព្រោះវាគ្រប់គ្រងការតំឡើងបរិយាកាសស្មុគស្មាញទាំងអស់ដោយស្វ័យប្រវត្តិ ហើយអ្នកអាចផ្តោតសំខាន់លើការបង្កើត និងសិក្សាជាជាងការដោះស្រាយបញ្ហាកំណត់បរិយាកាស។
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**ការបដិសេធ**៖
|
|
|
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលដែលយើងខិតខំសម្រាប់ភាពត្រឹមត្រូវ សូមយល់ឱ្យដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬភាពមិនត្រឹមត្រូវខ្លះ។ ឯកសារដើមដែលមាននៅភាសាដើមគួរត្រូវបានពិចារណាជា ប្រភពផ្លូវការដែលមានសុពលភាព។ សម្រាប់ព័ត៍មានសំខាន់ៗ យើងណែនាំឱ្យប្រើការបកប្រែដោយអ្នកជំនាញមនុស្ស។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំណា ឬការបកប្រែខុសទោលដែលកើតមានពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
