|
|
# AIயுடன் கூடிய ஒரு உரையாடல் உதவியாளரை உருவாக்குதல்
|
|
|
|
|
|
1960களில் ஸ்டார் ட்ரெக் படத்தில் экиப் அணி கப்பலின் கணினியுடன் சளையாக உரையாடி, சிக்கலான கேள்விகளை கேட்டு ஆழமான பதில்களைப் பெறுகின்றனர் என்று நினைத்தீர்களா? 1960களின்纯ியல் கற்பனை போன்று தெரிந்தது இப்போது நீங்கள் ஏற்கனவே அறிந்துள்ள வலை தொழில்நுட்பங்களைப் பயன்படுத்தி உருவாக்க முடியும்.
|
|
|
|
|
|
இந்த பாடத்தில், நாங்கள் HTML, CSS, JavaScript மற்றும் சில பின்னணி ஒருமை பணிகளைப் பயன்படுத்தி AI உரையாடல் உதவியாளரை உருவாக்குவோம். நீங்கள் கற்றுக்கொண்ட அதே திறன்கள், குறித்த சூழலைப் புரிந்து, பொருத்தமான பதில்களை உருவாக்கக்கூடிய சக்திவாய்ந்த AI சேவைகளுடன் எப்படி இணைக்கப்படுகின்றன என்று கண்டுபிடிப்பீர்கள்.
|
|
|
|
|
|
AI என்பது தகவலை மட்டும் தேடி கண்டுபிடிப்பதல்ல, அதை உங்கள் குறிப்பிட்ட கேள்விகளுக்கு ஏற்ப ஒழுங்குபடுத்தப்பட்ட பதில்களாக உருவாக்கும் ஒரு விரிவான நூலகத்தைப் பெறுவது போன்றதாக நினைத்துக் கொள்ளுங்கள். ஆயிரக்கணக்கான பக்கங்கள் வழியே தேடுவதற்குப் பதிலாக நீங்கள் நேரடி மற்றும் சூழல்பூர்வ பதில்களைப் பெறுவீர்கள்.
|
|
|
|
|
|
இந்த ஒருங்கிணைவு தெரிந்த வலை தொழில்நுட்பங்கள் மூலமாக நிகழ்கிறது. HTML உரையாடல் இடைமுகத்தை உருவாக்குகிறது, CSS காட்சியமைப்பை கையாள்கிறது, JavaScript பயனர் தொடர்புகளை நிர்வகிக்கிறது, மற்றும் பின்னணி API அனைத்தையும் AI சேவைகளுடன் இணைக்கிறது. இது ஒரு இசைக்குழுவின் வெவ்வேறு பகுதிகள் ஒன்றிணைந்து இசை உருவாக்கும் போல் உள்ளது.
|
|
|
|
|
|
நாம் இயற்கை மனித தொடர்புக்கும் முறைமையான கணினி செயல்பாட்டுக்கும் இடையில் ஒரு பாலம் கட்டிக்கொண்டு இருக்கிறோம். நீங்கள் AI சேவைகள் ஒருங்கிணைப்பின் தொழில்நுட்ப அமலாக்கத்தையும், தொடர்புகளை உணர்வுக்குரியதாகக் காட்டும் வடிவமைப்பு முறைப்பாடுகளையும் கற்றுக்கொள்வீர்கள்.
|
|
|
|
|
|
இந்த பாடத்தின் கடைசியில், AI ஒருங்கிணைவு ஒரு மர்மமான செயல்முறை போல் அல்லாமல், நீங்கள் வேலை செய்வதற்கான மற்றொரு API போல உணர வேண்டியதாய் இருக்கும். நீங்கள் ChatGPT மற்றும் Claude போன்ற பயன்பாடுகளை இயக்கும் அடிப்படை மாதிரிகளை அறிந்து கொள்வீர்கள், அதே வலை மேம்பாட்டு கொள்கைகளைப் பயன்படுத்தி.
|
|
|
|
|
|
## ⚡ அடுத்த 5 நிமிடங்களில் நீங்கள் செய்யக்கூடியவை
|
|
|
|
|
|
**பிஸியான டெவலப்பர்கள் குழப்பமின்றி தொடங்கும் வழி**
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A[⚡ 5 நிமிடங்கள்] --> 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) சென்று தனிப்பட்ட அணுகல் டோக்கனை உருவாக்கவும்
|
|
|
- **நிமிடம் 2**: Playground இடைமுகத்தில் நேரடியாக AI தொடர்புகளை சோதிக்கவும்
|
|
|
- **நிமிடம் 3**: "Code" டாப் கிளிக் செய்து Python குறியீட்டை பிரதிபதிக்கவும்
|
|
|
- **நிமிடம் 4**: உங்கள் டோக்கன் கொண்டு கோடை உள்ளூரில் இயக்கவும்: `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 பின்னணி ஒருங்கிணைப்பு
|
|
|
Python API சேவையகத்தை கட்டமைக்கவும்: 5: You
|
|
|
AI செயல்பாட்டு அழைப்புகளை அமல்படுத்தவும்: 7: You
|
|
|
அகினசிவான செயல்பாடுகளை கையாளுதல்: 8: You
|
|
|
section முன் முனை மேம்பாடு
|
|
|
சமய.chat இடைமுகம் உருவாக்கவும்: 6: You
|
|
|
நேரடி தொடர்புகளை ஆக்கபூர்வமாக கையாளவும்: 8: You
|
|
|
பதிலளிக்கும் பயனர் அனுபவத்தை கட்டமைக்கவும்: 9: You
|
|
|
section தொழில்முறை பயன்பாடு
|
|
|
முழுமையான AI அமைப்பை அமல்படுத்தவும்: 7: You
|
|
|
செயல்திறன் மாதிரிகளை மேம்படுத்தவும்: 8: You
|
|
|
உற்பத்தி தயாரான பயன்பாட்டை உருவாக்கவும்: 9: You
|
|
|
```
|
|
|
**உங்கள் பயணக் குறிக்கோள்**: இந்த பாடத்திற்க்கு முடிவில், நண்பர்களான ChatGPT, Claude, மற்றும் Google Bard போன்ற நவீன AI உதவியாளர்களை இயக்கும் அதே தொழில்நுட்பங்களையும் முறைப்பாடுகளையும் பயன்படுத்தி ஒரு முழுமையான AI இயக்கப்பட்ட பயன்பாட்டை உருவாக்கி முடிப்பீர்கள்.
|
|
|
|
|
|
## AIஐ புரிந்துகொள்வது: மர்மத்திலிருந்து திறமைக்கு
|
|
|
|
|
|
குறியீட்டிற்கு முன், நாம் என்னோடு பணியாற்றுகிறோம் என்பதைப் புரிந்துகொள்ளலாம். நீங்கள் முன்பே APIகளைப் பயன்படுத்தியிருந்தால், அடிப்படை முறைப்படி: ஒரு கோரிக்கை அனுப்பி பதில் பெறுவது என்பதை அறிவீர்கள்.
|
|
|
|
|
|
AI APIகள் அதே பொதுவான அமைப்பைப் பின்பற்றுகின்றன, ஆனால் தரவுத்தளத்தில் முன்பே சேமிக்கப்பட்ட தரவை தேர்வு செய்வதற்குப் பதிலாக, அது மிகப்பெரிய உரை தரவுகளிலிருந்து கற்றுமிகுந்த வார்த்தை முறைமைகள் அடிப்படையில் புதிய பதில்களை உருவாக்குகிறது. இது நூலகக் கையேடு மற்றும் அறிவுள்ள நூலகருக்கு இடையேயான வித்தியாசம் போன்று உள்ளது - நூலகர் பல மூலங்களிலிருந்து தகவலை இணைத்து புரிந்துகொள்ள முடியும்.
|
|
|
|
|
|
### "பெருக்கம் செய்கAI" என்றால் என்ன?
|
|
|
|
|
|
ரோசெட்டா ஸ்டோன் என்றும் அழைக்கப்படும் பழங்கால செருகிப்பொதிவுகளை அறிந்த பேரா訳ர்களுக்கு புதிய மொழி ஐயத்தைக் கற்றுக்கொள்ள உதவியது போன்றது. AI மாதிரிகள் அதேபோல் பணிபுரிகின்றன - ஒட்டுமொத்த உரைகளில் முறைமைகளை கண்டறிந்து மொழி செயல்பாடு எவ்வாறு இருப்பதைச் புரிந்து கொண்டே, அந்த முறைமைகளைக் கொண்டு புதிய கேள்விகளுக்கு பொருத்தமான பதில்களை உருவாக்குகின்றன.
|
|
|
|
|
|
**எனக்கு இது எளிய ஒப்புமையாக ஒழுங்குபடுத்தக்கூடியது:**
|
|
|
- **சம்பிரதாய தரவுத்தளம்**: உங்கள் பிறப்புச் சான்றிதழைப் கேட்டல் போல - நீங்கள் எப்போதும் அதே ஆவணத்தைக் பெறுவீர்கள்
|
|
|
- **தேடல் இயந்திரம்**: நூலகரிடமிருந்து பூனைகள் பற்றிய புத்தகங்கள் தேடுவது போல – அவர்கள் கிடைக்கும் அனைத்தையும் காட்டுவார்கள்
|
|
|
- **பெருக்கம் செய்கAI**: அறிவுள்ள நண்பரைப் பற்றிப் பேசுவது போல – உங்கள் கேள்விக்கு ஏற்ப தனது சொந்த வார்த்தைகளில் சுவாரஸ்யமான தகவல்களை பகிர்கிறார்
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[உங்கள் கேள்வி] --> B[க مصنوعية நுண்ணறிவு மாதிரி]
|
|
|
B --> C[வடிவம் அறிதல்]
|
|
|
C --> D[உள்ளடக்க உருவாக்கம்]
|
|
|
D --> E[சார்புடைய பதில்]
|
|
|
|
|
|
F[பயிற்சி தரவு<br/>புத்தகங்கள், கட்டுரைகள், இணைய] --> B
|
|
|
```
|
|
|
### AI மாதிரிகள் எப்படி கற்கின்றன (எளிய விளக்கம்)
|
|
|
|
|
|
AI மாதிரிகள் நூல்கள், கட்டுரைகள் மற்றும் உரையாடல்களிடமிருந்து படித்த மிகப்பெரிய தரவுத்தொகுப்புகளைப் பயன்படுத்தி கற்றுக்கொள்ளும். இதன் மூலம், அவை பின்வரும் முறைமைகளை அடையாளம் காண்கின்றன:
|
|
|
- எழுத்துச் தொடர்பில் எண்ணங்கள் எவ்வாறு அமைந்துள்ளன
|
|
|
- எது எப்பொழுது பொதுவாக சேர்வதாக இருக்கிறது
|
|
|
- உரையாடல்கள் பொதுவாக எப்படி உருட்டுகின்றன
|
|
|
- நேர்த்தியான மற்றும் நடுத்தர உரையாடல்களில் ஏற்பட்ட வேறுபாடுகள்
|
|
|
|
|
|
**இது போன்றது தொல்லியல் ஆராய்ச்சியாளர்கள் பழங்கால மொழிகளைச் சொல்லிசொல்லும் முறையில் புரிந்து கொள்வது**: ஆயிரக்கணக்கான எடுத்துக்காட்டுகளை பகுக்கி இலக்கணம், சொற்பொருள் மற்றும் பண்பாட்டு சூழலைப் புரிந்து, புதிய உரைகளை அந்தக் கற்றுமை முறைமைகளைக் கொண்டு விளக்கத் திரும்ப இயல்படுகின்றனர்.
|
|
|
|
|
|
### ஏன் GitHub Models?
|
|
|
|
|
|
நாம் GitHub Models ஐப்பயன்படுத்துகிறோம், ஏனெனில் இது எங்கள் சொந்த AI அடிப்படையை ஏற்படுத்தாமல் (நீங்கள் அதை இப்போது செய்ய விரும்பமாட்டீர்கள்!) தொழில்துறை நிலை AIக்கு அணுகலை அளிக்கிறது. இது வானிலை API ஒன்றை உங்கள் சொந்த உள்ளூர்தொடர்புகளை அமைப்பது போல அல்லாமல் பயன்படுத்துவதால் மென்மையானது.
|
|
|
|
|
|
இது ஒரு விதத்தில் "AI-சிறப்புச் சேவை" ஆகும், மற்றும் சிறந்த பகுதி என்னவென்றால்? தொடங்குவதற்கு இலவசம், அதனால் நோக்கம் இருக்காமல் செலவு இலக்கு இல்லாமல் பரிசோதனை செய்யலாம்.
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[முன் முனையச் சந்தை UI] --> B[உங்கள் பின் முனைய API]
|
|
|
B --> C[GitHub மாதிரிகள் API]
|
|
|
C --> D[ஏ.ஐ மாதிரி செயலாக்கம்]
|
|
|
D --> C
|
|
|
C --> B
|
|
|
B --> A
|
|
|
```
|
|
|
நாம் GitHub Models ஐ பின்னணி ஒருங்கிணைப்பிற்கு பயன்படுத்துவோம், இது ஒருபுறம் தொழில்நுட்ப ரீதியாக திறனுடைய AI திறன்களை, மற்றும் மேம்படுத்திய பயன்பாட்டின் விளக்கத்தை வழங்குகிறது. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) என்பது நீங்கள் பல AI மாதிரிகளையும் சோதித்து, அவற்றின் திறன்களை புரிந்து கொண்டுவிட்டு கோடிங்கில் அமல்படுத்தவைக்க உதவும் இடமாகும்.
|
|
|
|
|
|
## 🧠 AI பயன்பாட்டு வளர்ச்சி சூழல்
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((AI Development))
|
|
|
Understanding AI
|
|
|
Generative Models
|
|
|
Pattern Recognition
|
|
|
Content Generation
|
|
|
Context Understanding
|
|
|
Response Synthesis
|
|
|
AI Parameters
|
|
|
Temperature Control
|
|
|
Token Limits
|
|
|
Top-p Filtering
|
|
|
System Prompts
|
|
|
Backend Architecture
|
|
|
API Integration
|
|
|
GitHub Models
|
|
|
Authentication
|
|
|
Request Handling
|
|
|
Error Management
|
|
|
Python Infrastructure
|
|
|
FastAPI Framework
|
|
|
Async Operations
|
|
|
Environment Security
|
|
|
CORS Configuration
|
|
|
Frontend Experience
|
|
|
Chat Interface
|
|
|
Real-time Updates
|
|
|
Message History
|
|
|
User Feedback
|
|
|
Loading States
|
|
|
Modern Web Tech
|
|
|
ES6 Classes
|
|
|
Async/Await
|
|
|
DOM Manipulation
|
|
|
Event Handling
|
|
|
Professional Patterns
|
|
|
Security Best Practices
|
|
|
Token Management
|
|
|
Input Validation
|
|
|
XSS Prevention
|
|
|
Error Boundaries
|
|
|
Production Readiness
|
|
|
Performance Optimization
|
|
|
Responsive Design
|
|
|
Accessibility
|
|
|
Testing Strategies
|
|
|
```
|
|
|
**மூலம் கோட்பாடு**: AI பயன்பாட்டு வளர்ச்சி பாரம்பரிய வலை மேம்பாட்டுத் திறன்களுடன் AI சேவைகள் ஒருங்கிணைப்பைப் பொருத்தி, இயற்கை மற்றும் சுறுசுறுப்பான பயன்பாடுகளை உருவாக்குகிறது.
|
|
|
|
|
|
|
|
|
|
|
|
**Playground யைப் பயனுள்ளதாக 만드는வைகள்:**
|
|
|
- GPT-4o-mini, Claude மற்றும் பிற AI மாதிரிகளை சோதிக்கவும் (இல்லையெனில் இலவசம்!)
|
|
|
- உங்கள் எண்ணங்களையும் குறிப்புகளையும் குறியீடு எழுதுவதற்கு முன் சோதிக்கவும்
|
|
|
- உங்கள் விருப்பத்திற்கேற்ற மொழியில் தயாரான குறியீடுகளைப் பெறு
|
|
|
- படைப்பாற்றல் நிலை மற்றும் பதில் நீளம் போன்ற அமைப்புகளை மாற்றி அவை வெளியீட்டிற்கு எப்படி பாதிப்பை ஏற்படுத்துகிறதென்று பார்
|
|
|
|
|
|
சிறிது விளையாடிவிட்டு, "Code" டாப் கிளிக் செய்து உங்கள் நிரல் மொழியைத் தேர்வுசெய்து அமலாக்க குறியீட்டை பெறலாம்.
|
|
|
|
|
|
|
|
|
|
|
|
## பைதான் பின்தள ஒருமை அமல்படுத்தல்
|
|
|
|
|
|
இப்போது Python மூலம் AI ஒருங்கிணைப்பை செயல்படுத்துவோம். Python அதன் எளிய ஒழுங்கு மற்றும் சக்திவாய்ந்த நூலகங்களுக்காக AI பயன்பாடுகளுக்கு சிறந்தது. நாம் GitHub Models Playground இலிருந்து குறியீட்டைப் பெற்று அதை மீண்டும் பயன்படுத்தக்கூடிய, தயாரிப்பு தரமான செயல்பாட்டைப் போற்றுவோம்.
|
|
|
|
|
|
### அடிப்படை செயல்பாட்டை புரிந்துகொள்வது
|
|
|
|
|
|
Playground இலிருந்து Python குறியீட்டை எடுக்கும்போது, இதைப்போன்ற ஒன்றைப் பெறுவீர்கள். முதலில் அதிகமாக தெரிந்தால் கவலைப்பட வேண்டாம் – அதனை ஒருசில துண்டுகளில் இணைந்து எடுத்துச் செல்லலாம்:
|
|
|
|
|
|
```python
|
|
|
"""Run this model in Python
|
|
|
|
|
|
> pip install openai
|
|
|
"""
|
|
|
import os
|
|
|
from openai import OpenAI
|
|
|
|
|
|
# மாதிரியை அங்கீகரிப்பதற்கு, உங்கள் GitHub அமைப்புகளில் தனிப்பட்ட அணுகல் குறியீட்டை (PAT) உருவாக்க வேண்டும்.
|
|
|
# உங்கள் 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` மற்றும் AI உடன் பேச `OpenAI`
|
|
|
- **நாம் அமைத்துக்கொள்கிறோம்** OpenAI கிளையண்டை நேரடி OpenAIக்கு பதிலாக GitHub AI சேவைகள் நோக்கி
|
|
|
- **நாம் அங்கீகாரம் அளிக்கிறோம்** ஒரு தனிப்பட்ட GitHub டோக்கன் இடமிருந்து (அதனை பற்றி பின்னர்!)
|
|
|
- **நாம் உரையாடலை அமைக்கிறோம்** வெவ்வேறு "பாத்திரங்களுடன்" – இது ஒரு நாடக காட்சியை அமைப்பது போன்றது
|
|
|
- **நாம் AIக்கு** கேட்டறிக்கையை அனுப்புகிறோம் சில முறைமையமைக்கும் அளவைகளுடன்
|
|
|
- **நாம் பெறுகிறோம்** அனைத்து தரவிலிருந்தும் உண்மையான பதில் உரையை
|
|
|
|
|
|
### செய்தி பாத்திரங்களைப் புரிந்துகொள்வது: AI உரையாடல் கட்டமைப்பு
|
|
|
|
|
|
AI உரையாடல்கள் தனித்த "பாத்திரங்கள்" பயந்து அமைகின்றன, அவை தனித்த தேவைகளை மேற்கொள்கின்றன:
|
|
|
|
|
|
```python
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": "You are a helpful assistant who explains things simply."
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": "What is machine learning?"
|
|
|
}
|
|
|
]
|
|
|
```
|
|
|
|
|
|
**இது நாடகம் நடத்துவது போல இருக்கிறது:**
|
|
|
- **அமைப்பு பாத்திரம்**: நடிகருக்கான மேடை வழிகாட்டி – AI எப்படி நடந்து கொள்ள வேண்டும், என்ன தன்மை கொண்டவராக வேண்டும், எப்படி பதிலளிக்க வேண்டும் என்பதைக் கூறுகிறது
|
|
|
- **பயனர் பாத்திரம்**: உங்கள் பயன்பாட்டை பயன்படுத்தும் நபரின் கேள்வி அல்லது செய்தி
|
|
|
- **உதவியாளர் பாத்திரம்**: AI வழங்கும் பதில் (இதை நீங்கள் அனுப்பமாட்டீர்கள், ஆனால் உரையாடல் வரலாற்றில் காணப்படுகிறது)
|
|
|
|
|
|
**உண்மையான உலகுக் காணொளி**: நீங்கள் ஒரு நண்பரை ஒரு கூட்டத்தில் அறிமுகப்படுத்துகிறீர்கள் என்று நினைத்தால்:
|
|
|
- **அமைப்பு செய்தி**: "இவர் என் நண்பர் சரா, அவர்ப் பெரிய மருத்துவர்; மருத்துவக் கருத்துகளை எளிமையாக விளக்க சிறந்தவர்"
|
|
|
- **பயனர் செய்தி**: " தடுப்பூசிகள் எப்படி வேலை செய்கின்றன என்று விளக்க முடியுமா?"
|
|
|
- **உதவியாளர் பதில்**: சரா அன்புடன் மருத்துவராக பதிலளிக்கிறார்; வழக்கறிஞராய் அல்லது சமையல்காரராக அல்ல
|
|
|
|
|
|
### AI அளவுகோல்களைப் புரிந்துகொள்வது: பதிலளிக்கும் பாணி சரிசெய்தல்
|
|
|
|
|
|
AI API அழைப்புகளில் உள்ள எண் அடிப்படையிலான அளவுகோல்கள் மாதிரி பதில்களை எப்படி உருவாக்குமென்பதை கட்டுப்படுத்தும். இந்த அமைப்புகள் வெவ்வேறு பயன்பாடுகளுக்கு AI நடத்தையை மாற்ற அனுமதிக்கின்றன:
|
|
|
|
|
|
#### வெப்பநிலை (0.0 முதல் 2.0 வரை): படைப்பாற்றல் கட்டுப்பாடு
|
|
|
|
|
|
**அது என்ன செய்கிறது**: AI பதில்கள் எவ்வளவு படைக்கோள் அல்லது முன்கூட்டியே நினைத்தவையாக இருக்க வேண்டும் என்பதை கட்டுப்படுத்துகிறது.
|
|
|
|
|
|
**இது ஒரு ஜாஸ் இசைப்பாட்டாளரின் உருக்கமாட்டின் அளவைக் காட்டுவதாக நினைக்கவும்:**
|
|
|
- **வெப்பநிலை = 0.1**: ஒரே அதே மெல்லிசையை ஒவ்வொரு முறையும் வாசித்தல் (மிகவும் கணிப்பாயிருக்கும்)
|
|
|
- **வெப்பநிலை = 0.7**: சிறிது வகைமாற்றிகளுடன் நடுநிலை படைப்பாற்றல்
|
|
|
- **வெப்பநிலை = 1.5**: முழுமையான பரிசோதனை ஜாஸ், எதிர்பாராத திருப்பங்களுடன் (மிகவும் கணிப்பாய் அல்லாதது)
|
|
|
|
|
|
```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 # தனித்துவமான, எதிர்பாராத கதைகள் உருவாக்கும்
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### மிக அதிக அளவு குறியீடுகள் (1 முதல் 4096+): பதில் நீளம் கட்டுப்பாடு
|
|
|
|
|
|
**அது என்ன செய்கிறது**: AI பதிலின் நீளத்திற்கு வரம்பை அளிக்கிறது.
|
|
|
|
|
|
**குறியீடுகளை சுட்டிக்காட்டுகையில் அவற்றை சுமார் வார்த்தைகளாகக் கருதுங்கள்** (சுமார் 1 குறியீடு = ஆங்கிலத்தில் 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**: மிக அதிக வாய்ப்பு உள்ள 10% வார்த்தைகளே கருதி பதில் (மிகவும் கவனமுடன்)
|
|
|
- **top_p=0.9**: 90% சாத்தியமான வார்த்தைகளைக் கருதுதல் (மேலும் படைப்பாற்றல்)
|
|
|
- **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 எഐ அளவுரு மேம்பாட்டு அட்டவணை
|
|
|
x-axis குறைந்த படைப்பாற்றல் --> உயர் படைப்பாற்றல்
|
|
|
y-axis குறுகிய பதில் --> நீண்ட பதில்
|
|
|
|
|
|
quadrant-1 படைப்பாற்றல் உள்ளடக்கம்
|
|
|
quadrant-2 விரிவான பகுப்பாய்வு
|
|
|
quadrant-3 சீக்கிரம் உண்மைகள்
|
|
|
quadrant-4 உரையாடல் எஐ
|
|
|
|
|
|
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]
|
|
|
```
|
|
|
**இந்த அளவுகோல்கள் ஏன் முக்கியம் என்பதைக் கண்டறிதல்**: வெவ்வேறு பயன்பாடுகள் வெவ்வேறு வகையான பதில்களை வேண்டுகின்றன. வாடிக்கையாளர் சேவை பாட்டி உறுதிப்படுத்தல் மற்றும் உண்மையான பதில்களை எதிர்பார்க்கும் (குறைந்த வெப்பநிலை) ஆனால் படைப்பாற்றல் எழுத்தாளர் ஒரு நினைவுப்படைவாய்ந்த மற்றும் வித்தியாசமான பாணியை எதிர்பார்க்கும் (அதிக வெப்பநிலை). இந்த அளவுகோல்களைப் புரிந்துகொள்வது AI உடன் உங்கள் மூல காரணிகளையும் பதிலளிக்கும் பாணியையும் கட்டுப்படுத்து.
|
|
|
|
|
|
```
|
|
|
|
|
|
**Here's what's happening in this code:**
|
|
|
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
|
|
|
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
|
|
|
- **We authenticate** using a special GitHub token (more on that in a minute!)
|
|
|
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
|
|
|
- **We send** our request to the AI with some fine-tuning parameters
|
|
|
- **We extract** the actual response text from all the data that comes back
|
|
|
|
|
|
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
|
|
|
|
|
|
### Creating a Reusable AI Function
|
|
|
|
|
|
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
|
|
|
|
|
|
```python
|
|
|
import asyncio
|
|
|
from openai import AsyncOpenAI
|
|
|
|
|
|
# Use AsyncOpenAI for better performance
|
|
|
client = AsyncOpenAI(
|
|
|
base_url="https://models.github.ai/inference",
|
|
|
api_key=os.environ["GITHUB_TOKEN"],
|
|
|
)
|
|
|
|
|
|
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
|
|
|
"""
|
|
|
Sends a prompt to the AI model asynchronously and returns the response.
|
|
|
|
|
|
Args:
|
|
|
prompt: The user's question or message
|
|
|
system_message: Instructions that define the AI's behavior and personality
|
|
|
|
|
|
Returns:
|
|
|
str: The AI's response to the prompt
|
|
|
"""
|
|
|
try:
|
|
|
response = await client.chat.completions.create(
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": system_message,
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": prompt,
|
|
|
}
|
|
|
],
|
|
|
model="openai/gpt-4o-mini",
|
|
|
temperature=1,
|
|
|
max_tokens=4096,
|
|
|
top_p=1
|
|
|
)
|
|
|
return response.choices[0].message.content
|
|
|
except Exception as e:
|
|
|
logger.error(f"AI API error: {str(e)}")
|
|
|
return "I'm sorry, I'm having trouble processing your request right now."
|
|
|
|
|
|
# Backward compatibility function for synchronous calls
|
|
|
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
|
|
|
"""Synchronous wrapper for async AI calls."""
|
|
|
return asyncio.run(call_llm_async(prompt, system_message))
|
|
|
```
|
|
|
|
|
|
**இந்த மேம்பட்ட செயல்பாட்டைக் கற்றுக்கொள்வது:**
|
|
|
- **ரெண்டு அளவுருக்களைக் பெறுக**: பயனரின் கேள்வி மற்றும் விருப்ப அமைப்பு செய்தி
|
|
|
- **பொதுவான அமைப்பு செய்தி** இரண்டு வழங்குகிறது உதவியாளரின் பொது நடத்தைக்காக
|
|
|
- **Python வகுப்புருவ வணிகங்களை** அளிக்கிறது, குறியீட்டு ஆவணத்திற்கான மேம்பாடு
|
|
|
- **விருப்பமான செயற்திட்ட விளக்கத்தைக் கொண்டுள்ளதோடு**
|
|
|
- **முற்றிலும் பதில் உள்ளடக்கத்தையே** மட்டுமே மாற்றிக் கொள்கிறது, நமது வலை API ஐ எளிதாக்க
|
|
|
- **மற்றும் ஒரே மாதிரிப் பெயர்பொறிகளை** பயன்படுத்தியுள்ளதன் மூலம் AI நடத்தையானது நிலைத்திருக்கிறது
|
|
|
|
|
|
### அமைப்பு செய்திகளின் அதிசயம்: AI தன்மையை நிர்ணயம் செய்தல்
|
|
|
|
|
|
அளவுகோல்கள் AI எப்படி சிந்திக்கும் என்பதை நிர்வகிக்கும்; அமைப்பு செய்திகள் AI யார் என்று சிந்திக்க வைக்கின்றன. உண்மையில் இது AIயுடன் வேலை செய்வதில் மிகவும் கவர்ச்சியான பகுதியாகும் - நீங்கள் AIக்கு முழுமையான தன்மை, அனுபவ நிலை மற்றும் தொடர்பு பாணியை பரிசளிக்கிறீர்கள்.
|
|
|
|
|
|
**நடிகர்களுக்கு வெவ்வேறு வேடங்களில் வேடமிடுவது போல் அமைப்பு செய்திகளைபற்றி எண்ணுங்கள்**: ஒரு பொதுவான உதவியாளரை வைத்திருக்காமல், நீங்கள் வெவ்வேறு சூழல்களுக்கான சிறப்பு நிபுணர்களை உருவாக்கலாம். பொறுமையான ஆசிரியர் விரும்புகிறீர்களா? படைப்பாற்றல் மூளைstorm நண்பர்? கடுமையான வணிக ஆலோசகர்? அமைப்பு செய்தியை மட்டும் மாற்றுங்கள்!
|
|
|
|
|
|
#### அமைப்பு செய்திகள் இவ்வளவு சக்திமிக்கதென்பது ஏன்
|
|
|
|
|
|
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
|
|
|
)
|
|
|
# பொது பதில்: "சிறந்த கேள்வி! அத்துணை உறுதிப்பாட்டைப் படிகள் அடிப்படையில் பிரிப்போம்.
|
|
|
# இதைப் nightclub பாதுகாவலர் அடையாள அட்டை சோதிப்பதுபோல எண்ணுங்கள்..."
|
|
|
|
|
|
# வணிக முன்னோட்டத்துடன்:
|
|
|
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. Output Formatting**: கேட்பவருக்கான பதில்களின் அமைப்பை 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. Constraint Setting**: AI செய்யக் கூடாது என்பவற்றை வரையறுக்கவும்
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are a coding tutor focused on teaching best practices. Never write complete
|
|
|
solutions for the user - instead, guide them with hints and questions so they
|
|
|
learn by doing. Always explain the 'why' behind coding decisions.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### உங்கள் உரையாடல் உதவியாளர் காரணமாக இது ஏன் முக்கியம்
|
|
|
|
|
|
கணினி செயலாற்றல் தொடக்கங்கள் உங்கள் சிறப்பு AI உதவியாளர்களை உருவாக்குவதற்கு அதிஉயர்ந்த அதிகாரம் தருகிறது:
|
|
|
- **வாடிக்கையாளர் சேவை பாட்டி**: உதவிகரமான, பொறுமையான, கொள்கை அறிவாளர்
|
|
|
- **கல்வி பயிற்றுனர்**: ஊக்குவிக்கிற, படி படியான, புரிதலைச் சரிபார்க்கும்
|
|
|
- **சமர்பணியாளர்**: கற்பனைமிக்க, எண்ணங்களை மேம்படுத்தும், "என்னவாகிறது?" என்று கேட்கும்
|
|
|
- **தொழில்நுட்ப நிபுணர்**: துல்லியமான, விரிவான, பாதுகாப்பு குறித்த கவனமான
|
|
|
|
|
|
**முக்கிய அறிமுகம்**: நீங்கள் வெறும் AI API-யை அழைக்கவில்லை – நீங்கள் உங்கள் குறிப்பிட்ட பயன்பாட்டுக்கு ஏற்ற தனிப்பயன் AI தன்மையை உருவாக்குகிறீர்கள். இதுவே நவீன AI பயன்பாடுகளை பொதுவானவையாக அல்லாமல் தனித்துவமான மற்றும் பயனுள்ளதாக உணர வைக்கிறது.
|
|
|
|
|
|
### 🎯 கல்வித் தகவல்: AI தன்மையாக்குதல் நிரல்பாகம்
|
|
|
|
|
|
**நின்று சிந்தியுங்கள்**: நீங்கள் ஏற்கனவே முறைமை தொடக்கங்களின் மூலம் AI தன்மைகளை நிரல் எழுத கற்றுக்கொண்டீர்கள். இது நவீன AI பயன்பாட்டு அபிவிருத்தியில் அடிப்படையான திறனாகும்.
|
|
|
|
|
|
**விரைவான சுய மதிப்பீடு**:
|
|
|
- முறைமை தொடக்கங்கள் சாதாரண பயனர் செய்திகளிடமிருந்து எவ்வாறு வேறுபடுகின்றன என்று நீங்கள் விளக்கமளிக்க முடியுமா?
|
|
|
- வெப்பநிலை மற்றும் top_p அளவுருக்கள் இடையேயான வேறுபாடு என்ன?
|
|
|
- குறிப்பிட்ட பயன்பாட்டுக்கு (குறியீடு பயிற்றுநர் போன்றதற்கு) முறைமை தொடக்கத்தை எப்படி உருவாக்குவீர்கள்?
|
|
|
|
|
|
**உண்மையான உலக இணைப்பு**: நீங்கள் கற்ற முறைமை தொடக்கக் கலைகளும் AI-ன் முக்கிய பயன்பாடுகளில் பயன்படுத்தப்படுகின்றன - GitHub Copilot-ன் குறியீட்டு உதவியிலிருந்து ChatGPT-ன் உரையாடல் இடைமுகத்திற்கும். பெரும் தொழில்நுட்ப நிறுவனங்களில் AI தயாரிப்பு அணிகள் பயன்படுத்தும் அதே மாதிரிகளை நீங்கள் கற்றுக் கொண்டுள்ளீர்கள்.
|
|
|
|
|
|
**பயிற்சி கேள்வி**: விவசாயிகள் மற்றும் நிபுணர்கள் போன்ற வெவ்வேறு பயனர் வகைகளுக்கு வெவ்வேறு AI தன்மைகளை எப்படி வடிவமைப்பீர்கள்? ஒரே அடிப்படை AI மாதிரியுடன் வெவ்வேறு மக்கள் குழுக்களை என்ன வகையில் தொலைத்தொடர்பு கலை (prompt engineering) மூலம் சேவை செய்ய முடியும் என்பதை பரிசீலியுங்கள்.
|
|
|
|
|
|
## FastAPI உடன் வலை API கட்டமைக்கல்: உங்கள் அதிவேக AI தொடர்பு மையம்
|
|
|
|
|
|
இப்போது உங்கள் முன் முனைப்பு மற்றும் AI சேவைகளை இணைக்கும் பின்புறத்தைக் கட்டமைப்போம். நாங்கள் FastAPI-யைப் பயன்படுத்துவோம், இது நவீன Python கட்டமைப்பு ஆகும் மற்றும் AI பயன்பாடுகளுக்கான API-களை சிறப்பாக கட்டமைக்கிறது.
|
|
|
|
|
|
FastAPI இந்த வகைத் திட்டத்திற்கு பல நன்மைகளை வழங்குகிறது: ஒரே நேரத்தில் கோரிக்கைகளை கையாள async ஆதரவு, தானியங்கி API ஆவண உமிழ்வு மற்றும் சிறந்த செயல்திறன். உங்கள் FastAPI சர்வர் முன் முனை நோக்கி வரும் கோரிக்கைகளைப் பெற்று, AI சேவைகளுடன் தொடர்பு கொண்டு, வடிவமைக்கப்பட்ட பதில்களை வழங்கும் இடைக்கால இடமாக செயல்படுகிறது.
|
|
|
|
|
|
### AI பயன்பாடுகளுக்கான FastAPI-ஐ ஏன் தேர்வு செய்ய வேண்டும்?
|
|
|
|
|
|
நீங்கள் யோசிக்கலாம்: "நான் AI-யை நேரடியாக என் முன் முனை JavaScript-இல் அழைக்க முடியாது?" அல்லது "Flask, Django-வுக்கு பதிலாக FastAPI ஏன்?" சிறந்த கேள்விகள்!
|
|
|
|
|
|
**இங்கே FastAPI நமக்கு ஏற்ற காரணங்கள்:**
|
|
|
- **இயல்புநிலை async**: ஒரே நேரத்தில் பல AI கோரிக்கைகளை நிறுத்தாமல் கையாளும் திறன்
|
|
|
- **தானியங்கி ஆவணங்கள்**: `/docs`-ஐப் பார்வையிடுக மற்றும் அற்புதமான, இடையிடை API ஆவணங்களை இலவசமாகப் பெறுக
|
|
|
- **உள்ளமைவு சரிபார்ப்பு**: பிழைகளை முன்கூட்டியே பிடிக்கும்
|
|
|
- **விசித்திரமாக வேகம் மிகுந்தது**: Python கட்டமைப்புகளுக்குள் மிக வேகமான ஒன்று
|
|
|
- **நவீன Python**: Python இன் அண்மையில் வந்த சிறந்த அம்சங்களை பயன்படுத்துகிறது
|
|
|
|
|
|
**மற்றும் நமக்கு பின்புறம் தேவைப்படுவதற்கான காரணம்:**
|
|
|
|
|
|
**பாதுகாப்பு**: உங்கள் AI API விசை கடவுச்சொல் போன்றது – நீங்கள் அதை முன் முனை JavaScript-இல் வைத்தால், உங்கள் வலைத்தள மூலக் குறியீட்டை பார்ப்பவர்கள் அதை திருடி உங்கள் AI கிரெடிட்ஸைப் பயன்படுத்தலாம். பின்புறம் நுண்ணறிவு சான்றுகளை பாதுகாப்பாக வைத்திருக்கிறது.
|
|
|
|
|
|
**கட்டுப்பாடு மற்றும் இரேட்டிங்**: பின்புறம் பயனர்கள் எவ்வளவு முறை கோரிக்கை செய்யலாம் என்பதை நீங்கள் கட்டுப்படுத்த, பயனர் அங்கீகாரம் செய்ய மற்றும் பயன்பாட்டை கண்காணிக்க லாகிங் சேர்க்க உதவுகிறது.
|
|
|
|
|
|
**தரவு செயலாக்கம்**: உரையாடலை சேமிக்க, பொருந்தாத உள்ளடக்கத்தை வடிகட்ட அல்லது பல AI சேவைகளைக் கொக்கியூன்றக ஆகியவற்றை செய்ய பின்புறம் இவை நடைபெறும்.
|
|
|
|
|
|
**இந்த அமைப்பு ஒரு கிளையன்ட்-செர்வர் மாதிரியைப் போன்றது:**
|
|
|
- **முன் முனைப்பு**: பயனர் இடைமுக அடுக்கு
|
|
|
- **பின்புற API**: கோரிக்கை கையாளும் மற்றும் வழித்தட அமைப்பு அடுக்கு
|
|
|
- **AI சேவை**: வெளிப்புற கணினி மற்றும் பதில் உருவாக்கம்
|
|
|
- **சுற்றுப்புற மாறிலிகள்**: பாதுகாப்பான வரையறைகளும் சான்றுகளும்
|
|
|
|
|
|
### கோரிக்கை-பதில் ஓட்டத்தைப் புரிந்து கொள்வது
|
|
|
|
|
|
பயனர் ஒரு செய்தி அனுப்பும்போது என்ன நடக்கிறது என்பதை பின்தொடர்வோம்:
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant User as 👤 பயனர்
|
|
|
participant Frontend as 🌐 முன்னணி
|
|
|
participant API as 🔧 FastAPI சேவையகம்
|
|
|
participant AI as 🤖 எஐ சேவை
|
|
|
|
|
|
User->>Frontend: "வணக்கம் எஐ!" என்று தட்டச்சு செய்கிறார்
|
|
|
Frontend->>API: POST /hello {"message": "வணக்கம் எஐ!"}
|
|
|
Note over API: கோரிக்கையை சரிபார்க்கிறது<br/>கணினி உத்தரவைக் சேர்க்கிறது
|
|
|
API->>AI: வடிவமைக்கப்பட்ட கோரிக்கையை அனுப்புகிறது
|
|
|
AI->>API: எஐ பதிலை அளிக்கிறது
|
|
|
Note over API: பதிலை செயலாக்குகிறது<br/>சந்திப்பை பதிவு செய்கிறது
|
|
|
API->>Frontend: {"response": "வணக்கம்! எப்படி உதவலாம்?"}
|
|
|
Frontend->>User: எஐ செய்தியை காட்சி படுத்துகிறது
|
|
|
```
|
|
|
**ஒவ்வொரு படியும் புரிந்து கொள்வது:**
|
|
|
1. **பயனர் தொடர்பு**: ஒருவர் உரையாடல் இடைமுகத்தில் உரை தட்டச்சு செய்கிறது
|
|
|
2. **முன் முனை கையாளல்**: JavaScript உள்ளீட்டை JSON வடிவில் மாற்றுகிறது
|
|
|
3. **API சரிபார்ப்பு**: FastAPI Pydantic மாதிரிகள் மூலம் கோரிக்கையை தானாக சரிபார்க்கிறது
|
|
|
4. **AI ஒருங்கிணைப்பு**: பின்புறம் சூழல் (முறைமை தொடக்கம்) சேர்க்கப்பட்டு 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[GitHub மாதிரிகள் API]
|
|
|
G --> H[பதில் செயலாக்கம்]
|
|
|
H --> I[JSON பதில்]
|
|
|
I --> J[முன்னணி புதுப்பிப்பு]
|
|
|
|
|
|
subgraph "பாதுகாப்பு அடுக்கு"
|
|
|
K[CORS மத்திகை]
|
|
|
L[பருவ நிலை மாறிகள்]
|
|
|
M[பிழை நிர்வாகம்]
|
|
|
end
|
|
|
|
|
|
D --> K
|
|
|
F --> L
|
|
|
H --> M
|
|
|
```
|
|
|
### FastAPI பயன்பாட்டை உருவாக்குதல்
|
|
|
|
|
|
API-யை படி படியாக கட்டிக்கொள். கீழ்காணும் FastAPI குறியீட்டுடன் `api.py` என்ற கோப்பை உருவாக்கவும்:
|
|
|
|
|
|
```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** இணைப்பு மூலம் நவீன வலை கட்டமைப்பின் செயல்பாடுகளைக் கொண்டு வருதல் மற்றும் தரவு சரிபார்ப்பு
|
|
|
- **தானியங்கி API ஆவணங்களை உருவாக்குதல்** (`/docs`-இல் கிடைக்கும் சர்வர் இயங்கும் போது)
|
|
|
- **CORS மிடில்வேரை இயக்குதல்** வேறு தோற்றங்கள் கொண்ட முன் முனை கோரிக்கைகளை அனுமதிக்க
|
|
|
- **கோரிக்கை/பதில் சரிபார்ப்பு மற்றும் ஆவணங்களுக்கான Pydantic மாதிரிகள் வரையறுத்தல்**
|
|
|
- **சிறந்த செயல்திறனை நோக்கிய async முடிச்சுகளை பயன்படுத்துதல்**
|
|
|
- **HTTP நிலை குறியீடுகள் மற்றும் பிழை கையாளுதல் HTTPException மூலம் செயல்படுத்து**
|
|
|
- **கண்காணிப்பு மற்றும் பிழைத்திருத்தத்திற்கு கட்டமைக்கப்பட்ட பதிவு பதிவேற்றம்**
|
|
|
- **சேவை நிலையை கண்காணிக்க ஆரோக்கியச் சோதனை முடிச்சுக்கள்**
|
|
|
|
|
|
**பாரம்பரிய கட்டமைப்புகளுக்கு FastAPI-யின் முக்கிய நன்மைகள்:**
|
|
|
- **தானியங்கி சரிபார்ப்பு**: Pydantic மாதிரிகள் தரவு அச்சுற்றுப்பமாக செயலாக்கத்திற்கு முன் உறுதிப்படுத்தும்
|
|
|
- **இடையிடை ஆவணங்கள்**: `/docs`-இல் தானாக உருவான, சோதிக்கக்கூடிய API ஆவணங்களைப் பார்க்கவும்
|
|
|
- **வகை பாதுகாப்பு**: Python வகை குறிப்புகள் நேரடி பிழைகளைக் குறைத்து குறியீட்டு தரத்தை மேம்படுத்தும்
|
|
|
- **Async ஆதரவு**: ஒரே நேரத்தில் பல AI கோரிக்கைகளை தடையின்றி கையாளும்
|
|
|
- **செயல்திறன்**: நேரடி பயன்பாடுகளுக்காக கோரிக்கைகள் வேகமாக செயலாக்கப்படுகின்றன
|
|
|
|
|
|
### CORS: வலை பாதுகாப்பு காவலர்
|
|
|
|
|
|
CORS (Cross-Origin Resource Sharing) என்பது ஒரு கட்டிடத்தில் பார்வையாளர்கள் நுழைய அனுமதிக்கப்படுகிறார்கள் என்று பார்த்துக்கொள்ளும் பாதுகாப்பு காவலரைப் போன்றது. இது உங்கள் பயன்பாட்டை எப்படி பாதிக்கிறது என்பதையும் புரிந்து கொள்வோம்.
|
|
|
|
|
|
#### CORS என்ன மற்றும் அது ஏன் உள்ளது?
|
|
|
|
|
|
**சிக்கல்**: உங்கள் வங்கியின் வலைத்தளத்திற்கு எந்த ஒரு வலைத்தளமும் உங்கள் அனுமதியின்றி உங்கள் சார்பாக கோரிக்கைகள் செய்யும் போது அது ஒரு பாதுகாப்புக் குறைபாடாக அதிகரிக்கும்! உலாவிகள் இதைக் காக்கும் விதமாக "Same-Origin Policy" ஐ இயல்புநிலையாக பயன்படுத்துகின்றன.
|
|
|
|
|
|
**Same-Origin Policy**: உலாவிகள் ஒரு வலைப்பக்கத்தை அதே டொமைன், போர்ட் மற்றும் நெறிமுறை கொண்ட வலைத்தளத்திலிருந்து மட்டுமே கோரிக்கைகள் செய்ய அனுமதிக்கின்றன.
|
|
|
|
|
|
**உண்மை உலக உவமை**: இது குடியிருப்பு கட்டிட பாதுகாப்பைப் போன்றது – அங்கு ஒரே குடியிருப்பவர்கள் (அதே தோற்றம்) மட்டுமே கட்டிடம் செல்ல முடியும். நண்பர் (வேறு தோற்றம்) வர வேண்டும் என்றால், பாதுகாப்பு காவலர் அனுமதிக்க வேண்டும்.
|
|
|
|
|
|
#### உங்கள் அபிவிருத்தி சூழலில் CORS
|
|
|
|
|
|
அபிவிருத்தி நேரத்தில் உங்கள் முன் முனை மற்றும் பின்புறம் வெவ்வேறு போர்ட்களில் இயங்குகின்றன:
|
|
|
- முன் முனை: `http://localhost:3000` (அல்லது நேரடியாக HTML திறக்கும் போது file://)
|
|
|
- பின்புறம்: `http://localhost:5000`
|
|
|
|
|
|
இவை ஒரே கணினியில் இருந்தாலும் "வேறுபட்ட தோற்றங்கள்" என கருதப்படுகின்றன!
|
|
|
|
|
|
```python
|
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
|
|
|
app = FastAPI(__name__)
|
|
|
CORS(app) # இது உலாவிகளுக்கு சொல்லுகிறது: "வேறு மூலங்களும் இந்த APIக்கு கோரிக்கைகள் செய்யலாம்"
|
|
|
```
|
|
|
|
|
|
**CORS அமைப்பு நடைமுறையில் என்ன செய்கிறது:**
|
|
|
- **API பதில்களில் சிறப்பு HTTP தலைப்புகளைச் சேர்க்கிறது, இது உலாவிகளுக்கு "இந்த வெவ்வேறு தோற்ற கோரிக்கை அனுமதிக்கப்படுகிறது" என்பதை தெரிவிக்கிறது**
|
|
|
- **"Preflight" கோரிக்கைகளை கையாள்கிறது (உலாவிகள் சில நேரங்களில் உண்மையான கோரிக்கைக்கு முன் அனுமதியை பரிசோதிக்கிறது)**
|
|
|
- **உங்கள் உலாவியில் "CORS கொள்கையின் தரவால் தடைக்கப்பட்டது" என்ற பிழையை தடுக்கும்**
|
|
|
|
|
|
#### 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 நிலைமைகள் மற்றும் தீர்வுகள்
|
|
|
|
|
|
| நிலைமை | சிக்கல் | தீர்வு |
|
|
|
|----------|---------|----------|
|
|
|
| **உள்ளூர் அபிவிருத்தி** | முன் முனை பின்புறத்தை அணுக முடியாது | FastAPI-யில் CORSMiddleware சேர்க்கவும் |
|
|
|
| **GitHub Pages + Heroku** | பிரயோஜனப்படுத்திய முன் முனை API-யை அணுக முடியாது | உங்கள் GitHub Pages URL ஐ CORS தோற்றங்களில் சேர்க்கவும் |
|
|
|
| **சுயமான டொமைன்** | தயாரிப்பில் CORS பிழைகள் | உங்கள் டொமைனை பொருந்தும் வகையில் CORS தோற்றங்களை புதுப்பிக்கவும் |
|
|
|
| **மொபைல் செயலி** | செயலி வலை API-யை அணுக வீற்றிருக்காது | உங்கள் செயலி டொமைன் சேர்க்கவும் அல்லது கவனமாக `*` பயன்படுத்தவும் |
|
|
|
|
|
|
**திறமையான ஆலோசனை**: உலாவியின் Developer Tools இல் நிழல் தாவலில் CORS தலைப்புகளைப் பார்க்கலாம். பதிலில் `Access-Control-Allow-Origin` போன்ற தலைப்புகளைத் தேடுங்கள்.
|
|
|
|
|
|
### பிழைக் கையாளல் மற்றும் சரிபார்ப்பு
|
|
|
|
|
|
எப்போதும் நமது API உரிய பிழை கையாளலைச் சேர்த்துள்ளது கவனிக்கவும்:
|
|
|
|
|
|
```python
|
|
|
# நாங்கள் ஒரு செய்தியை பெற்றிருக்கிறோம் என்பதை சரிபார்க்கவும்
|
|
|
if not message:
|
|
|
return jsonify({"error": "Message field is required"}), 400
|
|
|
```
|
|
|
|
|
|
**முக்கிய சரிபார்ப்பு நெறிமுறைகள்:**
|
|
|
- **கோரிக்கைகள் செயலாக்கத்திற்கு முன் தேவையான புலங்களை சரிபார்க்கிறது**
|
|
|
- **JSON வடிவில் அர்த்தமுள்ள பிழை செய்திகள் வழங்குகிறது**
|
|
|
- **சரி HTTP நிலை குறியீடுகள் (கெட்ட கோரிக்கைக்கு 400) பயன்படுத்துகிறது**
|
|
|
- **முன் முனை அபிவிருத்தாளர்களுக்கு தெளிவான மறுமொழியை வழங்குகிறது**
|
|
|
|
|
|
## உங்கள் பின்புறத்தை அமைத்து இயக்குதல்
|
|
|
|
|
|
நாம் AI ஒருங்கிணைப்பு மற்றும் FastAPI சர்வரை தயார் செய்துள்ளோம், இப்போது அனைத்தையும் இயக்கு. அமைப்பில் Python சார்ந்த சார்பு தொகுதிகள் நிறுவுதல், சுற்றுப்புற மாறிலிகள் வடிவமைத்தல் மற்றும் அபிவிருத்தி சர்வர் துவக்குதல் உள்ளன.
|
|
|
|
|
|
### Python சுற்றுச்சூழல் அமைப்பு
|
|
|
|
|
|
Python அபிவிருத்தி சூழலை அமைப்போம். மெய்ப்பிப்பகங்கள் (virtual environments) Manhattan திட்டத்தின் பிரிக்கப்பட்ட அணுகுமுறையைப் போன்றவை – ஒவ்வொரு திட்டத்துக்கும் தனித்தனியான சூழல், கருவிகள் மற்றும் சார்புகள்; இதனால் திட்டங்களுக்கு இடையேயும் முரண்பாடுகள் தவிர்க்கப்படுகின்றன.
|
|
|
|
|
|
```bash
|
|
|
# உங்கள் பேக்எண்ட் அடைவை நோக்கிச் செல்க
|
|
|
cd backend
|
|
|
|
|
|
# ஒரு மெய்யமைப்பை உருவாக்குக (உங்கள் திட்டத்திற்கான சுத்தமான அறையை உருவாக்குவது போன்று)
|
|
|
python -m venv venv
|
|
|
|
|
|
# அதனை செயல்படுத்துக (லினக்ஸ்/மேக்)
|
|
|
source ./venv/bin/activate
|
|
|
|
|
|
# விண்டோஸில், இதைப் பயன்படுத்துக:
|
|
|
# venv\Scripts\activate
|
|
|
|
|
|
# நல்ல பொருட்களை நிறுவுக
|
|
|
pip install openai fastapi uvicorn python-dotenv
|
|
|
```
|
|
|
|
|
|
**நாம் இப்போது செய்ததை**
|
|
|
- **தனித்த Python வளையை உருவாக்கினோம், இதில் வேறு எந்த சூழலையும் பாதிக்காமல் தொகுதிகள் நிறுவலாம்**
|
|
|
- **தெர்மினலில் இந்த ஆனநிலை இயங்க எச்சரிக்கப்பட்டது**
|
|
|
- **அத்தியாவசியங்களை நிறுவினோம்: OpenAI AI க்கு, FastAPI வலை APIக்கு, Uvicorn இயக்கவும், python-dotenv பாதுகாப்பான இரகசிய மேலாண்மைக்கு**
|
|
|
|
|
|
**முக்கிய சார்புகளை விளக்குதல்:**
|
|
|
- **FastAPI**: நவீன, வேகமான வலை கட்டமைப்பு மற்றும் தானியங்கி API ஆவணம் உடன்
|
|
|
- **Uvicorn**: FastAPI பயன்பாடுகளை இயக்கும் மிக வேகமான ASGI சர்வர்
|
|
|
- **OpenAI**: GitHub மாடல்கள் மற்றும் OpenAI API ஒருங்கிணைப்புக்கான அதிகாரபூர்வ நூலகம்
|
|
|
- **python-dotenv**: .env கோப்புகளில் இருந்து சுற்றுப்புற மாறிலிகளை பாதுகாப்புடன் ஏற்றும்
|
|
|
|
|
|
### சுற்றுப்புற அமைப்பு: இரகசியங்களை பாதுகாக்கும்
|
|
|
|
|
|
நமது API-யைத் தொடங்குவதற்கு முன், வலை அபிவிருத்தியில் மிகவும் முக்கியமான பாடம் ஒன்று பற்றி பேச வேண்டும்: உங்கள் இரகசியங்களை உண்மையிலேயே எப்படி மறைக்க வேண்டும். சுற்றுப்புற மாறிலிகள் என்பது பாதுகாப்பான வால்ட் போன்றது, அதில் உங்கள் பயன்பாடு மட்டுமே அணுக முடியும்.
|
|
|
|
|
|
#### சுற்றுப்புற மாறிலிகள் என்றால் என்ன?
|
|
|
|
|
|
**சுற்றுப்புற மாறிலிகளை பாதுகாப்பான வைர அஞ்சலகப் பெட்டியைப் போல நினைக்கவும்** – அங்கே உங்கள் மதிப்பு பொருட்களை வைக்கிறீர்கள், மட்டும் நீங்கள் (மற்றும் உங்கள் செயலி) அதைப் பெற கீ-வை வைத்திருக்கிறீர்கள். நேரடியாக குறியீட்டில் இரகசிய தகவலை எழுதி வைக்காமல் (எங்கு யாரும் பார்க்கக்கூடியது), அதை சுற்றுப்புறத்தில் பாதுகாப்பாக வைக்கிறீர்கள்.
|
|
|
|
|
|
**வேறுபாடு இவ்வாறு உள்ளது:**
|
|
|
- **தவறான வழி**: உங்கள் கடவுச்சொல்லை ஸ்டிக்கி நோட்டில் எழுதி திரையில் ஒட்டுவது
|
|
|
- **சரி வழி**: உங்கள் கடவுச்சொல்லை பாதுகாப்பான கடவுச்சொல் மேலாளரில் வைப்பது
|
|
|
|
|
|
#### சுற்றுப்புற மாறிலிகள் ஏன் முக்கியம்
|
|
|
|
|
|
```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. **நுண்ணறிவு கட்டுப்பாடு வெளிப்பாடுகள்**: உங்கள் Git-அணுகலில் அனைவரும் உங்கள் API விசையைப் பார்க்க முடியும்
|
|
|
2. **பொது ரெப்போசிடரிகள்**: GitHub-க்கு அனுப்பினால், உங்கள் விசை இணையத்தில் அனைவரும் காணலாம்
|
|
|
3. **அணி பகிர்வு**: ஒரே திட்டத்தில் பணியாற்றும் மற்றவரும் உங்கள் தனிப்பட்ட API விசையைப் பெறுவர்
|
|
|
4. **பாதுகாப்புக் களவுகள்**: API விசை திருடப்பட்டால், அவர்கள் உங்கள் AI கிரெடிட்ஸைப் பயன்படுத்துகிறார்கள்
|
|
|
|
|
|
#### உங்கள் சுற்றுப்புற கோப்பை அமைத்தல்
|
|
|
|
|
|
`.env` என்ற கோப்பை உங்கள் பின்புறமாக உள்ள கோப்புறையில் உருவாக்குங்கள். இக்கோப்பு உங்கள் இரகசியங்களை உள்ளே வைத்திருக்கும்:
|
|
|
|
|
|
```bash
|
|
|
# .env கோப்பு - இதை Git இற்கு யாரும் சேர்க்க கூடாது
|
|
|
GITHUB_TOKEN=your_github_personal_access_token_here
|
|
|
FASTAPI_DEBUG=True
|
|
|
ENVIRONMENT=development
|
|
|
```
|
|
|
|
|
|
**.env கோப்பைப் புரிந்து கொள்வது:**
|
|
|
- **ஒவ்வொரு வரியிலும் ஒரு இரகசியம்**, `KEY=value` வடிவில்
|
|
|
- **சமமாக்கல் சின்ன்வு சுற்றிலும் இடைவெளி கூடாது**
|
|
|
- **மதிப்புகளுக்கு சாவடி ("") தேவையில்லை (முழுமையாக பொதுவாக)**
|
|
|
- **கருத்துக்கள்** தொடக்கம் வரி `#` கொண்டு
|
|
|
|
|
|
#### உங்கள் GitHub தனிப்பட்ட அணுகல் குறியீட்டை உருவாக்குதல்
|
|
|
|
|
|
GitHub குறிப்பிட்ட குறியீடு உங்கள் பயன்பாட்டுக்கு GitHub-ன் AI சேவைகளைப் பயன்படுத்த அனுமதி தரும் தனிப்பட்ட கடவுச்சொல் போல:
|
|
|
|
|
|
**தொகுப்பாக குறியீடு உருவாக்க நடவடிக்கைகள்:**
|
|
|
1. **GitHub அமைப்புகள் செல்** → Developer settings → Personal access tokens → Tokens (classic)
|
|
|
2. **"Generate new token (classic)" கிளிக் செய்க**
|
|
|
3. **காலாவதி அமைக்கவும்** (சோதனைக்கு 30 நாட்கள், தயாரிப்புக்கு நீண்ட காலம்)
|
|
|
4. **உட்பிரிவுகளை தேர்வு செய்க**: "repo" மற்றும் தேவையான பிற அனுமதிகளை குறிக்கவும்
|
|
|
5. **குறியீட்டை உருவாக்கி உடனே நகல் எடுக்கவும் (மீண்டும் காண முடியாது!)**
|
|
|
6. **உங்கள் .env கோப்பில் ஒட்டவும்**
|
|
|
|
|
|
```bash
|
|
|
# உங்கள் டோக்கன் எப்படி இருக்கும் என்பதன் உதாரணம் (இது போலி!)
|
|
|
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
|
|
|
```
|
|
|
|
|
|
#### 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-க்கு கிடைக்கச்செய்கிறது**
|
|
|
- **தேவைப்பட்ட குறியீடு உள்ளது என்பதை சரிபார்க்கிறது (சிறந்த பிழை கையாளல்!)**
|
|
|
- **குறியீடு இல்லாதால் தெளிவான பிழையை எழுப்புகிறது**
|
|
|
- **குறியீட்டை பாதுகாப்பாக பயன்படுத்துகிறது, குறியீட்டில் வெளியிடாது**
|
|
|
|
|
|
#### Git பாதுகாப்பு: .gitignore கோப்பு
|
|
|
|
|
|
`.gitignore` கோப்பு Git-க்கு எந்த கோப்புகளை கவனிக்க வேண்டாமென சொல்லும்:
|
|
|
|
|
|
```bash
|
|
|
# .gitignore - இந்த வரிகளைக் காண்பிக்கவும்
|
|
|
.env
|
|
|
*.env
|
|
|
.env.local
|
|
|
.env.production
|
|
|
__pycache__/
|
|
|
venv/
|
|
|
.vscode/
|
|
|
```
|
|
|
|
|
|
**இது ஏன் அவசியம்**: `.env`-ஐ `.gitignore`-இல் சேர்ப்பதால், Git உங்கள் சுற்றுப்புற கோப்பை புறக்கணித்து உங்கள் இரகசியங்கள் தவறவிட்டு GitHub-க்கு அனுப்பப்படாமல் தடுக்கும்.
|
|
|
|
|
|
#### வேறுபட்ட சூழல்கள், வேறுபட்ட இரகசியங்கள்
|
|
|
|
|
|
தொழில்முறை செயலிகள் வேறுபட்ட சூழல்களுக்கு வேறுபட்ட API விசைகளை பயன்படுத்துகின்றன:
|
|
|
|
|
|
```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 சேவையகத்தை பயன்படுத்துகிறது, இது குறிப்பாக async Python பயன்பாடுகளுக்காக வடிவமைக்கப்பட்டுள்ளது.
|
|
|
|
|
|
#### FastAPI சேவையகத் தொடக்க செயல்முறையை புரிந்து கொள்வது
|
|
|
|
|
|
```bash
|
|
|
# முறை 1: நேரடி Python செயல்பாடு (தானாக மீள்பதிவு செய்யும் வசதி உடன்)
|
|
|
python api.py
|
|
|
|
|
|
# முறை 2: Uvicorn ஐ நேரடியாக பயன்படுத்தல் (மேலும் கட்டுப்பாடு)
|
|
|
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
|
|
```
|
|
|
|
|
|
இந்தக் கட்டளையை நீங்கள் இயக்கும் போது, பின்னணி செயல்பாடுகள் இங்கேயிருக்கின்றன:
|
|
|
|
|
|
**1. Python உங்கள் FastAPI பயன்பாட்டை ஏற்றுகிறது**:
|
|
|
- தேவையான அனைத்து நூலகங்களையும் இறக்குமதிசெய்கிறது (FastAPI, Pydantic, OpenAI போன்றவை)
|
|
|
- உங்கள் `.env` கோப்பிலிருந்து சுற்றுச்சூழல் மாறிலிகளை ஏற்றுகிறது
|
|
|
- தானாக உருவாகும் ஆவணங்களுடன் FastAPI பயன்பாட்டு எடுத்துக்காட்டை உருவாக்குகிறது
|
|
|
|
|
|
**2. Uvicorn ASGI சேவையகத்தை கட்டமைக்கிறது**:
|
|
|
- async வினவலை கையாளும் திறனுடன், போர்ட் 5000ஐ பிணைக்கிறது
|
|
|
- தானாக சரிபார்ப்புடன் வினவை வழிமாற்றத்தை ஏற்படுத்துகிறது
|
|
|
- அபிவிருத்திக்கு ஹாட் ரிலோட்ஸை இயக்குகிறது (கோப்புகள் மாற்றப்பட்டால் மீண்டும் துவங்கும்)
|
|
|
- தொடர்புடைய API ஆவணங்களை உருவாக்குகிறது
|
|
|
|
|
|
**3. சேவையகம் கேட்க தொடங்குகிறது**:
|
|
|
- உங்கள் டெர்மினல் இவ்வாறு காட்டும்: `INFO: Uvicorn running on http://0.0.0.0:5000`
|
|
|
- சேவையகம் பல இணைந்து உள்ள AI வினவல்களை கையாள முடியும்
|
|
|
- தானாக உருவாக்கப்பட்ட ஆவணங்கள் `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 பல வசதியான வழிகளை வழங்குகிறது, அதில் தானாக உருவாகும் தொடர்புடைய ஆவணங்களும் அடங்கும்:
|
|
|
|
|
|
**முறை 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 -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 மாதிரிக்கு பொருந்தவில்லை | உங்கள் வேண்டுகோள் வடிவம் எதிர்பார்க்கப்படும் வடிவத்துடன் பொருந்துகிறதா எனச் சரிபார்க்கவும் |
|
|
|
| `HTTPException 422` | செயல்படுத்த இயலாத உருவாக்கம் | வேண்டுகோள் சோதனையில் தவறு, சரியான வடிவத்திற்கு `/docs` ஐ பார்வையிடவும் |
|
|
|
| `OpenAI API error` | AI சேவை அங்கீகாரத்தில் பிழை | உங்கள் GitHub டோக்கன் சரியானதா மற்றும் ஏற்ற பிறப்புரிமைகள் உள்ளதா என உறுதி செய்யவும் |
|
|
|
|
|
|
#### அபிவிருத்தி சிறந்த நடைமுறைகள்
|
|
|
|
|
|
**ஹாட் ரிலோடிங்**: Python கோப்புகளை சேமிக்கும் பொழுது FastAPI மற்றும் Uvicorn தானாக மீள்பூட்டலை வழங்குகின்றன. இதனால் உங்கள் குறியீட்டை திருத்தி உடனுக்குடன் சோதிக்க முடியும், தங்களே மீண்டும் துவக்க தேவையில்லை.
|
|
|
|
|
|
```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 எதை பதிலளிக்கிறது, கோளாறுகள் எங்கு வந்துள்ளன என்று jūs தெளிவாகக் காணலாம். இது பிழைத்திருத்தத்தை விரைவாக்குகிறது.
|
|
|
|
|
|
### GitHub Codespaces க்கான கட்டமைப்பு: கிளவுட் அபிவிருத்தி எளிதாக்கப்பட்டது
|
|
|
|
|
|
GitHub Codespaces என்பது எந்த உலாவியிடமிருந்தும் அணுகக்கூடிய கிளவுட் உள்ளிலுள்ள சக்திவாய்ந்த அபிவிருத்தி கணினி போன்றது. Codespaces இல் வேலை பார்க்க உங்கள் பின்னணி முன் நிறுத்தத்துடன் சரியாக இணைக்க சில اضافي படிகளும் தேவை.
|
|
|
|
|
|
#### Codespaces நெட்வொர்க் புரிந்து கொள்வது
|
|
|
|
|
|
ஒரு உள்ளூர் அபிவிருத்தி சூழலில் எல்லாம் ஒரே கணினியில் இயங்குகிறது:
|
|
|
- Backend: `http://localhost:5000`
|
|
|
- Frontend: `http://localhost:3000` (அல்லது file://)
|
|
|
|
|
|
Codespaces இல், உங்கள் அபிவிருத்தி சூழல் GitHub சேவையகங்களில் இயங்கும், எனவே "localhost" என்பதற்கு வேறு பொருள் உண்டு. GitHub தானாக உங்கள் சேவைகளுக்கு பொதுபயன்பாட்டு URLகளை உருவாக்குகிறது, எனினும் நீங்கள் அவைகளை சரிசெய்ய வேண்டும்.
|
|
|
|
|
|
#### Codespaces கட்டமைப்புக்கான படிப்படியாக வழிகாட்டல்
|
|
|
|
|
|
**1. உங்கள் பின்னணி சேவையகத்தை தொடங்கு**:
|
|
|
```bash
|
|
|
cd backend
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
FastAPI/Uvicorn தொடக்கச் செய்தி Codespace சூழலில் இயங்குவதை நீங்கள் காண்பீர்கள்.
|
|
|
|
|
|
**2. போர்ட் பாக்கி நிலைமை அமைக்க**:
|
|
|
- VS Code கீழ் பகுதியில் "Ports" தாவலைத் தேடவும்
|
|
|
- 5000 போர்ட்டைப் பட்டியலில் கண்டுபிடிக்கவும்
|
|
|
- போர்ட் 5000ஐ வலது கிளிக் செய்யவும்
|
|
|
- "Port Visibility" → "Public" ஐ தேர்ந்தெடுக்கவும்
|
|
|
|
|
|
**ஏன் பொதுவாக்க வேண்டும்?** Codespace போர்ட்டுகள் இயல்பாக தனிப்பட்டவை (நீங்கள் மட்டுமே அணுகலாம்). பொதுவாக்க மேசையால் உங்கள் முன்னணி (உலாவியில் இயங்கும்) உங்கள் பின்னணியுடன் தொடர்பு கொள்ள முடியும்.
|
|
|
|
|
|
**3. உங்கள் பொது URLஐப் பெறுக**:
|
|
|
போர்ட்டை பொதுவாக்கிய பிறகு, உங்களுக்கு கீழ்க்காணும் மாதிரியான URL தோன்றும்:
|
|
|
```
|
|
|
https://your-codespace-name-5000.app.github.dev
|
|
|
```
|
|
|
|
|
|
**4. உங்கள் முன்னணி கட்டமைப்பை புதுப்பிக்கவும்**:
|
|
|
```javascript
|
|
|
// உங்கள் முன் முனை app.js இல், BASE_URL ஐ புதுப்பிக்கவும்:
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
#### Codespace URLகள் பற்றி அறிவது
|
|
|
|
|
|
Codespace URLகள் முன்கூட்டியே கணிக்கப்பட்ட முறையில் இருக்கும்:
|
|
|
```
|
|
|
https://[codespace-name]-[port].app.github.dev
|
|
|
```
|
|
|
|
|
|
**இதன் உட்பிரிவுகள்:**
|
|
|
- `codespace-name`: உங்கள் Codespace தனித்தகுதி அடையாளம் (பொதுவாக உங்கள் பயனர்பெயர் உட்பட உள்ளது)
|
|
|
- `port`: உங்கள் சேவையின் இயக்க போர்ட் எண் (FastAPI பயன்பாட்டிற்கு 5000)
|
|
|
- `app.github.dev`: Codespace பயன்பாடுகளுக்கான GitHub டொமைன்
|
|
|
|
|
|
#### Codespace அமைப்பை சோதனை செய்தல்
|
|
|
|
|
|
**1. பின்னணியை நேரடியாகச் சோதிக்கவும்**:
|
|
|
பொது URLஐ புதிய உலாவி தாவலில் திறக்கவும். கீழ்காணும் தோற்றத்தை காண வேண்டும்:
|
|
|
```
|
|
|
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
|
|
|
```
|
|
|
|
|
|
**2. உலாவி அபிவிருத்தி கருவிகள் மூலம் சோதிக்கவும்**:
|
|
|
```javascript
|
|
|
// உலாவி கன்சோலை திறந்து உங்கள் API ஐ சோதிக்கவும்
|
|
|
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
|
|
|
method: 'POST',
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
body: JSON.stringify({message: 'Hello from Codespaces!'})
|
|
|
})
|
|
|
.then(response => response.json())
|
|
|
.then(data => console.log(data));
|
|
|
```
|
|
|
|
|
|
#### Codespaces மற்றும் உள்ளூர் அபிவிருத்தி ஒப்பீடு
|
|
|
|
|
|
| அம்சம் | உள்ளூர் அபிவிருத்தி | GitHub Codespaces |
|
|
|
|--------|-------------------|-------------------|
|
|
|
| **அமைப்பு நேரம்** | நீண்டது (Python, சார்புகளைக் நிறுவுதல்) | உடனடி (முன்பே கட்டமைக்கப்பட்ட சூழல்) |
|
|
|
| **URL அணுகல்** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
|
|
|
| **போர்ட் கட்டளைமைப்பு** | தானாக இயங்கும் | கைமுறையால் (போர்ட்டை பொதுவாக்கவும்) |
|
|
|
| **கோப்பு நிலைத்தன்மை** | உள்ளூர்மேஷின் | GitHub சேமிப்பகங்கள் |
|
|
|
| **ஒத்துழைப்பு** | சூழலைப் பகிர்வது கடினம் | Codespace இணைப்பை எளிதில் பகிரலாம் |
|
|
|
| **இணையத் தேவையுடையது** | AI API அழைப்புகளுக்கு மட்டும் | எல்லாவற்றுக்கும் தேவை |
|
|
|
|
|
|
#### Codespace அபிவிருத்தி குறிப்புகள்
|
|
|
|
|
|
**Codespaces இல் சுற்றுச்சூழல் மாறிகள்**:
|
|
|
உங்கள் `.env` கோப்பு Codespaces இலும் அதேவிதமாக இயங்கும், இன்னும் கூட Codespace உடனடியாக சுற்றுச்சூழல் மாறிகளை அமைக்க முடியும்:
|
|
|
|
|
|
```bash
|
|
|
# தற்போதைய அமர்வுக்கான சுற்றுச்சூழல் மாறியை அமைக்கவும்
|
|
|
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 செய்யவும்
|
|
|
|
|
|
> 💡 **நுட்பக் குறிப்பு**: அபிவிருத்தி நடைபெறும் போதெல்லாம் உங்கள் Codespace பின்னணி URL ஐ புக் மார்க் செய்யுங்கள். Codespace பெயர்கள் நிலைத்த நிலையைவைத்திருப்பதால், அதே Codespace பயன்படுத்தும் வரை URL மாறாது.
|
|
|
|
|
|
## முன்னணி சந்தை இடைமுகம் உருவாக்குதல்: மனிதர்கள் AI ஐ சந்திக்கும் இடம்
|
|
|
|
|
|
இப்போது நாம் பயனர் இடைமுகத்தை உருவாக்கப் போகிறோம் – இது உங்கள் AI உதவியாளருடன் மக்கள் எப்படி தொடர்பு கொள்கிறார்கள் என்பதைக் காட்டும் பகுதி. இயங்கும் iPhone இன் இடைமுக வடிவமைப்பைப் போலவே, நுட்பமான தொழில்நுட்பங்களை உடல்சார் மற்றும் இயல்பானதாக மாற்ற கவனம் செலுத்துகிறோம்.
|
|
|
|
|
|
### நவீன முன்னணி கட்டமைப்பை புரிந்து கொள்வது
|
|
|
|
|
|
எங்கள் சந்தை இடைமுகம் "ஒரே பக்கம் பயன்பாடான" (Single Page Application - SPA) ஈடுபாட்டை பெற்றது. பழைய முறையைப் போல ஒவ்வொரு கிளிக்கிலும் புதிய பக்கம் ஏற்றப் பிறகு, எங்கள் செயலி மென்மையாகவும் விரைவாகவும் புதுப்பிக்கிறது:
|
|
|
|
|
|
**பழைய வலைத்தளங்கள்**: புத்தகம் வாசிப்பதைப் போல – புதிய பக்கங்கள் போட்டுவைக்கிறீர்கள்
|
|
|
**எங்கள் சந்தை செயலி**: உங்கள் தொலைபேசியைப் பயன்படுத்துவது போல் – அனைத்தும் சிலமாகவும் துரிதமாகவும் அப்டேட் ஆகிறது
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[பயனர் செய்தி உருவாக்குகிறார்] --> B[ஜாவாஸ்கிரிப்ட் உள்ளீட்டை பிடிக்கிறது]
|
|
|
B --> C[தரவை சரிபார்த்து வடிவமைக்கவும்]
|
|
|
C --> D[பின்புற API க்கு அனுப்பு]
|
|
|
D --> E[ஏற்று நிலையை காட்டவும்]
|
|
|
E --> F[AI பதிலை பெறுக]
|
|
|
F --> G[சாட் இடைமுகத்தை புதுப்பிக்கவும்]
|
|
|
G --> H[அடுத்த செய்திக்கு தயாராக உள்ளது]
|
|
|
```
|
|
|
```mermaid
|
|
|
classDiagram
|
|
|
class ChatApp {
|
|
|
+messages: HTMLElement
|
|
|
+form: HTMLElement
|
|
|
+input: HTMLElement
|
|
|
+sendButton: HTMLElement
|
|
|
+BASE_URL: string
|
|
|
+API_ENDPOINT: string
|
|
|
|
|
|
+constructor()
|
|
|
+initializeEventListeners()
|
|
|
+handleSubmit(event)
|
|
|
+callAPI(message)
|
|
|
+appendMessage(text, role)
|
|
|
+escapeHtml(text)
|
|
|
+scrollToBottom()
|
|
|
+setLoading(isLoading)
|
|
|
}
|
|
|
|
|
|
ChatApp --> DOM : மாற்றுகிறது
|
|
|
ChatApp --> FastAPI : கோரிக்கைகளை அனுப்புகிறது
|
|
|
```
|
|
|
### முன்னணி அபிவிருத்தியின் மூன்று தூண்கள்
|
|
|
|
|
|
எந்த முன்னணி பயன்பாடு – எளிய வலைத்தளங்களிலிருந்தும் Discord அல்லது Slack போலக் கடுமையான செயலிகளிலுள்ளவையும் – மூன்று அடிப்படை தொழில்நுட்பங்களின் மீதும் கட்டப்பட்டுள்ளது. இவை வலைப்பக்கத்தில் நீங்கள் பார்க்கும் மற்றும் தொடர்பு கொள்வதற்கான அடித்தளத்திலிருக்கும்:
|
|
|
|
|
|
**HTML (கட்டமைப்பு)**: இது உங்கள் அடித்தளம்
|
|
|
- எவை எவற்றுள் உள்ளன என்பதை தீர்மானிக்கிறது (பட்டன்கள், உரை பகுதிகள், கட்டானர்கள்)
|
|
|
- உள்ளடக்கத்திற்கு பொருள் கொடுக்கிறது (இது தலைப்பு, இது படிவம் என்று)
|
|
|
- மற்ற அனைத்தும் இதன் அடிப்படையில் கட்டப்பட்டது
|
|
|
|
|
|
**CSS (காட்சியமைப்பு)**: உங்கள் உட்புற வடிவமைப்பாளர்
|
|
|
- அனைத்தும் அழகாக காட்சியளிக்க செய்வது (நிறங்கள், எழுத்துருக்கள், அமைப்புகள்)
|
|
|
- வேறுபட்ட திரை அளவுகோல்களை கையாள்கிறது (தொலைபேசி, லேப்டாப், டாப்லெட்)
|
|
|
- மென்மையான அனிமேஷன் மற்றும் காட்சிப்படுத்தலை உருவாக்குகிறது
|
|
|
|
|
|
**JavaScript (நடத்தை)**: இது உங்கள் மூளை
|
|
|
- பயனர்கள் செய்யும் செயல்களுக்கு (கிளிக்குகள், முதிரட்டல்கள், ஸ்க்ரோல் செய்தல்) பதிலளிக்கிறது
|
|
|
- உங்கள் பின்னணியுடன் தொடர்பு கொண்டு பக்கத்தை புதுப்பிக்கிறது
|
|
|
- அனைத்தையும் தொடர்புடைய, இயக்களிக்கும் வண்ணமாக மாற்றுகிறது
|
|
|
|
|
|
**இதனை கட்டிடக்கலை வடிவமைப்பாக நினைத்துக் கொள்ளுங்கள்:**
|
|
|
- **HTML**: கட்டிட ரேகைப் படம் (இடங்களையும் தொடர்புகளையும் வரையறுக்கிறது)
|
|
|
- **CSS**: அழகும் சூழலும் வடிவமைப்பு (காட்சியியல் மற்றும் பயனர் அனுபவம்)
|
|
|
- **JavaScript**: இயந்திர அமைப்புகள் (செயல்திறன் மற்றும் தொடர்பின்மை)
|
|
|
|
|
|
### நவீன JavaScript கட்டமைப்பின் முக்கியத்துவம்
|
|
|
|
|
|
எங்கள் சந்தை செயலி நீங்கள் தொழில்முறை பயன்பாடுகளில் காணப் பெறும் நவீன JavaScript மாதிரிகளைக் பயன்படுத்தும். இ கருத்துக்களைப் புரிந்து கொள்வதால் நீங்கள் ஒரு மேம்பட்ட அபிவிருத்தியாளராக வளர உதவும்:
|
|
|
|
|
|
**வகுப்புத் தொழில்நுட்ப கட்டமைப்பு**: எங்கள் குறியீட்டை வகுப்புகளாக (classes) ஒழுங்குபடுத்துவோம், இது பொருட்களுக்கு வரைபடங்களை உருவாக்குவதற்கு ஒப்பாகும்
|
|
|
**Async/Await**: நேரத்தை எடுத்துக் கொள்ளும் செயல்களை (API அழைப்புகள் போன்ற) நவீன முறையில் கையாள்வது
|
|
|
**ஈவெண்ட் சார்ந்த திட்டமிடல்**: எங்கள் செயலி, செல்லுபடியான செயல்களில் (கிளிக்குகள், விசை அழுத்தல்) பதிலளிப்பதுதான்; இடைவெளியின்றி ஓடுவதில்லை
|
|
|
**DOM மாற்றம்**: பயனர் தொடர்புகளின் மற்றும் API பதில்களின் அடிப்படையில் பக்க உள்ளடக்கத்தை சீரமைத்தல்
|
|
|
|
|
|
### திட்ட கட்டமைப்பு அமைத்தல்
|
|
|
|
|
|
இந்த அமைப்புடைய முன்னணி அடைவை உருவாக்குக:
|
|
|
|
|
|
```text
|
|
|
frontend/
|
|
|
├── index.html # Main HTML structure
|
|
|
├── app.js # JavaScript functionality
|
|
|
└── styles.css # Visual styling
|
|
|
```
|
|
|
|
|
|
**கட்டமைப்பைப் புரிந்து கொள்வது:**
|
|
|
- கட்டமைப்பு (HTML), நடத்தை (JavaScript), காட்சியமைப்பு (CSS) ஆகியவற்றுக்கு இடையேயான பொறுப்புகளை பிரிக்கிறது
|
|
|
- எளிமையான கோப்பமைப்பை பேணுகிறது, பார்க்கவும் திருத்தவும் எளிதாக
|
|
|
- அமைப்பு மற்றும் பராமரிப்புக்கு சிறந்த வலை அபிவிருத்தி நடைமுறைகளை பின்பற்றுகிறது
|
|
|
|
|
|
### HTML அடித்தளத்தை கட்டமைத்தல்: கிடைக்கும் வசதி நினைவில் வைத்து செமாண்டிக் கட்டமைப்பு
|
|
|
|
|
|
HTML அமைப்போடு வேலை தொடங்குவோம். நவீன வலை அபிவிருத்தி "செமாண்டிக் HTML" ஐ வலியுறுத்துகிறது – HTML கூறுகளை அவை செய்யும் பணியின் அடிப்படையில் பயன்படுத்துதல், தோற்றத்தை மட்டும் சார்ந்தவையல்ல. இது உங்கள் பயன்பாட்டை திரைக்காணிகள் உள்ளனர், தேடுபொறிகள் மற்றும் பிற கருவிகளுக்கு அணுகக்கூடியதாக மாற்றுகிறது.
|
|
|
|
|
|
**செமாண்டிக் HTML முக்கியத்துவம்**: உங்கள் சந்தை செயலியை ஒரு நபருக்கு தொலைபேசியில் விளக்கினால் "தலைப்புடன் கூடிய மேல்தளம், உரையாடல்கள் நடைபெறும் முதன்மை பகுதி, கீழே செய்தி தட்டச்சு செய்யும் படிவம்" என்று சொல்லுவீர்கள். செமாண்டிக் HTML அப்படியேயே கூறுகளைப் பயன்படுத்துகிறது.
|
|
|
|
|
|
`index.html` ஐ இந்த கவனமாக கட்டமைக்கப்பட்ட குறியீட்டுடன் உருவாக்குங்கள்:
|
|
|
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>AI Chat Assistant</title>
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="chat-container">
|
|
|
<header class="chat-header">
|
|
|
<h1>AI Chat Assistant</h1>
|
|
|
<p>Ask me anything!</p>
|
|
|
</header>
|
|
|
|
|
|
<main class="chat-messages" id="messages" role="log" aria-live="polite">
|
|
|
<!-- Messages will be dynamically added here -->
|
|
|
</main>
|
|
|
|
|
|
<form class="chat-form" id="chatForm">
|
|
|
<div class="input-group">
|
|
|
<input
|
|
|
type="text"
|
|
|
id="messageInput"
|
|
|
placeholder="Type your message here..."
|
|
|
required
|
|
|
aria-label="Chat message input"
|
|
|
>
|
|
|
<button type="submit" id="sendBtn" aria-label="Send message">
|
|
|
Send
|
|
|
</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<script src="app.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
**ஒவ்வொரு HTML கூறின் நோக்கும் அதன் நோக்கம்**:
|
|
|
|
|
|
#### ஆவண கட்டமைப்பு
|
|
|
- **`<!DOCTYPE html>`**: உலாவியை இது நவீன HTML5 எனச் சொல்லுவது
|
|
|
- **`<html lang="en">`**: மொழி குறியீட்டை குறிப்பிடுகிறது, திரைக்காணிகள் மற்றும் மொழி பெயர்ப்பர்களுக்கான உதவி
|
|
|
- **`<meta charset="UTF-8">`**: சர்வதேச எழுத்துக்களுக்கு சரியான எழுத்துக் குறியாக்கத்தை வழங்குகிறது
|
|
|
- **`<meta name="viewport"...>`**: மொபைல் சாதனங்களில் பக்கம் சரியாக காணப்பட உதவும் (ஜூம் மற்றும் அளவு நிர்வகிப்பு)
|
|
|
|
|
|
#### செமாண்டிக் கூறுகள்
|
|
|
- **`<header>`**: தலைப்பு மற்றும் விளக்கத்துடன் மேல்தடதத்தை தெளிவாக குறிக்கிறது
|
|
|
- **`<main>`**: முதன்மை உள்ளடக்க பகுதியை (உரையாடல்கள் இருக்கும்) அமைக்கிறது
|
|
|
- **`<form>`**: பயனர் உள்ளீட்டிற்கு செமாண்டிக் முறையில் பொருத்தமானது, விசைப்பலகை வழிசெலுத்தலுக்கு உதவும்
|
|
|
|
|
|
#### அணுகும் வசதிகள்
|
|
|
- **`role="log"`**: திரைக்காணிகளுக்கு இவ்விடம் பகுதியில் செய்திகள் வரிசையாக இருக்கிறது என்பதை அறிவிக்கிறது
|
|
|
- **`aria-live="polite"`**: புதிய செய்திகள் திரைக்காணிகளுக்கு தகர்ப்படாமல் அறிவிக்கப்படுகின்றன
|
|
|
- **`aria-label`**: படிவக் கட்டுப்பாடுகளுக்கான விளக்கக் குறிச்சொற்கள்
|
|
|
- **`required`**: பயனர் செய்தி உள்ளிடவில்லையெனில் உலாவி கண்டறிந்து அனுப்பாதது உரியவாறு சரிபார்க்கும்
|
|
|
|
|
|
#### CSS மற்றும் JavaScript ஒருங்கிணைப்பு
|
|
|
- **`class` பணியிடங்கள்**: CSSக்கு அழகுப்பயன்பாட்டைக்கான அடிகள் வழங்கும் (உதா., `chat-container`, `input-group`)
|
|
|
- **`id` பணியிடங்கள்**: குறிப்பிட்ட கூறுகளை JavaScript மூலம் கண்டுபிடித்து மாற்ற உதவும்
|
|
|
- **ஸ்கிரிப்டுக்களை இடம்**: HTML முதலில் ஏற்றப்படுவதற்காக JavaScript கோப்புகள் கடைசியில் ஏற்றப்படும்
|
|
|
|
|
|
**இவைகளை ஏன் இந்த அமைப்பாக செய்யது?**
|
|
|
- **தர்க்கமான வரிசை**: தலைப்பு → முதன்மை உள்ளடக்கம் → உள்ளீட்டு படிவம் இயல்பான வாசிப்பு ஒழுங்கு
|
|
|
- **விசைப் பலகை அணுகல்**: பயனர்கள் அனைத்தும் தொடர்பு கூறுகளின் மேல் தொடர்ந்து விசைப்பலகையில் சഞ്ചரிக்க முடியும்
|
|
|
- **திரைக்காணி நட்பு**: தெளிவான அடையாளங்கள் மற்றும் விளக்கங்கள் பார்வை குறைப்பாளிகளுக்கு
|
|
|
- **மொபைல் ஒத்துழைப்பு**:Viewport மேட்டாவுடன் பதிலளிக்கும் வடிவமைப்பு
|
|
|
- **நோக்கம் மேம்பாடு**: CSS அல்லது JavaScript தோல்வியளித்தாலும் இயங்கும்
|
|
|
|
|
|
### தொடர்புடைய JavaScript சேர்க்கல்: நவீன வலை செயலி கருவிகள்
|
|
|
|
|
|
இப்போது நமது சிறப்புச் சட்டார்த்தத்தை உயிர்ப்பிக்க ஜாவாஸ்கிரிப்ட்டை கட்டமைக்கலாம். ES6 வகுப்புகள், async/await மற்றும் நிகழ்வு சார்ந்த நிரலாக்கத்தை உள்ளடக்கிய, நீங்கள் தொழிற் துறை வலை மேம்பாட்டில் சந்திக்கும் நவீன ஜாவாஸ்கிரிப்ட் மேற்கொண்டுள்ளோம்.
|
|
|
|
|
|
#### நவீன ஜாவாஸ்கிரிப்ட் கட்டமைப்பை புரிந்து கொள்வது
|
|
|
|
|
|
வழக்கமான நிரலை எழுதுவதற்கு பதிலாக (ஒரு வரிசையில் இயக்கப்படும் பக்க்தான நிரல்கள்), நாமெ ஒரு **வகுப்பு அடிப்படையிலான கட்டமைப்பை** உருவாக்குவோம். ஒரு வகுப்பு என்பது பொருட்களை உருவாக்கும் ஒருவகை படிவமாக கருதுங்கள் – ஒரு கட்டிடக்கலைஞரின் வரைபடத்தை பயன்படுத்தி பல வீடுகள் கட்டப்படுவது போல்.
|
|
|
|
|
|
**ஏன் வலைப் பயன்பாடுகளுக்கு வகுப்புக்கள் பயன்படுத்த வேண்டும்?**
|
|
|
- **அமைப்பு**: அனைத்து தொடர்புடைய செயல்பாடுகளும் ஒன்றாக குழுவாக ஏக்கப்படும்
|
|
|
- **மீண்டும் பயன்பாடு**: ஒரே பக்கத்தில் பல சேட்டுக்காட்டு உதாரணங்களை உருவாக்கலாம்
|
|
|
- **பராமரிப்பு**: குறிப்பிட்ட அம்சங்களை எளிதில் பிழை நீக்கவும் மாற்றவும் முடியும்
|
|
|
- **தொழில்துறை நிலை**: React, Vue, Angular போன்ற கட்டமைப்புகளில் இந்த முறை பயன்படுத்தப்படுகிறது
|
|
|
|
|
|
இந்த நவீன, நன்கு கட்டமைந்த ஜாவாஸ்கிரிப்ட்டுடன் `app.js` உருவாக்கவும்:
|
|
|
|
|
|
```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 விசையையும் கேட்டு கொள்ளவும் (மேலும் நல்ல பயனர் அனுபவம்)
|
|
|
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 {
|
|
|
// AI API ஐ அழைத்து பதிலுக்காக காத்திருக்கவும்
|
|
|
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();
|
|
|
});
|
|
|
```
|
|
|
|
|
|
#### ஒவ்வொரு ஜாவாஸ்கிரிப்ட் கருதுகோளும் புரிந்து கொள்வது
|
|
|
|
|
|
**ES6 வகுப்பு கட்டமைப்பு**:
|
|
|
```javascript
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// நீங்கள் புதிய ChatApp உதாரணத்தை உருவாக்கும் போது இதை இயக்குகிறது
|
|
|
// உங்கள் உரையாடலுக்கான "அமைப்பு" செயல்பாட்டை போன்றது
|
|
|
}
|
|
|
|
|
|
methodName() {
|
|
|
// முறைகள் என்பது வகுப்பிற்கு சொந்தமான செயல்பாடுகள்
|
|
|
// அவைகள் "this" ஐ பயன்படுத்தி வகுப்பு பண்புகளை அணுக முடியும்
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Async/Await முறை**:
|
|
|
```javascript
|
|
|
// பழைய வழி (callback அக்கடப்பு):
|
|
|
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 அழுத்துதல் அல்லது அனுப்பும் பொத்தானை அழுத்தல் → `handleSubmit` இயங்குகிறது
|
|
|
4. **handleSubmit** → உள்ளீட்டை சரிபார்க்கிறது → பொதுவான நிலையை காட்டுகிறது → API-ஐ அழைக்கிறது
|
|
|
5. **API பதில் அளிக்கின்றது** → AI செய்தியை சேட்டுக்குள் சேர்க்கிறது → இடைமுகத்தை மீண்டும் ஆக்குகிறது
|
|
|
6. **அடுத்து செய்திக்கு தயார்** → பயனர் தொடர்ந்தும் சேட்டிங் செய்ய முடியும்
|
|
|
|
|
|
இந்த கட்டமைப்பு விரிவாக்கக்கூடியது – செய்தி திருத்தம், கோப்பு பதிவேற்றங்கள் அல்லது பல உரையாடல் பரப்புகள் போன்ற அம்சங்களை இதனுடைய அடிப்படையை மறுபடியும் எழுதாமல் சேர்க்கலாம்.
|
|
|
|
|
|
### 🎯 கல்வி சரிபார்ப்பு: நவீன முன்னணி கட்டமைப்பு
|
|
|
|
|
|
**கட்டமைப்புப் புரிதல்**: நீங்கள் நவீன ஜாவாஸ்கிரிப்ட் முறைகள் கொண்டு முழுமையான ஒரே பக்க பயன்பாட்டை உருவாக்கினீர்கள். இது தொழில்துறைநிலை முன்னணி மேம்பாட்டை குறிக்கிறது.
|
|
|
|
|
|
**முக்கிய எண்ணங்கள் கற்றுக்கொண்டீர்கள்**:
|
|
|
- **ES6 வகுப்பு கட்டமைப்பு**: ஒழுங்கமைக்கப்பட்ட, பராமரிக்கக்கூடிய குறியீட்டு அமைப்பு
|
|
|
- **Async/Await முறைகள்**: நவீன அசிங்க்ரொனஸ் நிரலாக்கம்
|
|
|
- **நிகழ்வு சார்ந்த நிரலாக்கம்**: குரல் வலுவான பயனர் இடைமுக வடிவமைப்பு
|
|
|
- **பாதுகாப்பு சிறந்த நடைமுறைகள்**: XSS தடுப்பு மற்றும் உள்ளீடு சரிபார்ப்பு
|
|
|
|
|
|
**தொழில்துறை தொடர்பு**: நீங்கள் கற்றுக் கொண்டுள்ள கட்டமைப்புகள் (வகுப்பு அடிப்படையிலான கட்டமைப்பு, அசிங்க் செயலாக்கங்கள், DOM மாற்றங்கள்) React, Vue, Angular போன்ற நவீன கட்டமைப்புகளின் அடித்தளமாகும். நீங்கள் தயாரிப்பு பயன்பாடுகளில் பயன்படுத்தப்படும் அதே கட்டமைப்பு சிந்தனை மூலம் உருவாக்கி வருகிறீர்கள்.
|
|
|
|
|
|
**பரிசீலனை கேள்வி**: இந்த சேட் செயலியை பல உரையாடல்கள் அல்லது பயனர் அங்கீகாரம் கையாள எப்படி வளர்க்கிறீர்கள்? தேவையான கட்டமைப்பு மாற்றங்கள் மற்றும் வகுப்பு அமைப்பு எவ்வாறு மாறும் என்பதை பரிசீலியுங்கள்.
|
|
|
|
|
|
### உங்கள் சேட் இடைமுகத்தை அலங்கரிப்பது
|
|
|
|
|
|
இப்போது CSS மூலம் நவீன, கண்ணுக்கு அழகான சேட் இடைமுகத்தை உருவாக்குவோம். சிறந்த அலங்காரங்கள் உங்கள் பயன்பாட்டை தொழில்முறைபடுத்தி, முழுமையான பயனர் அனுபவத்தை மேம்படுத்தும். நாங்கள் Flexbox, CSS Grid மற்றும் தனிப்பயன் பண்புகளை பயன்படுத்தி பதிலளிக்கும், அணுகல் சாத்தியமான வடிவமைப்பை உருவாக்குவோம்.
|
|
|
|
|
|
இந்த விரிவான CSS ஐ கொண்ட `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
|
|
|
// உள்ளூர் வளர்ச்சிக்காக
|
|
|
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**: போர்ட் 5000 ஐ பொது அணுகம Scope பின் போர்டு பீர்களில் பின்புற URL காணலாம்
|
|
|
- **தயாரிப்பு**: ஹோஸ்டிங் சேவையில் துவங்கும்போது உங்கள் உண்மையான டொமைன் மேலோட்டமாக மாற்றவும்
|
|
|
|
|
|
> 💡 **சோதனை குறிப்பு**: உங்களது பின்புறத்தை நேரடியாக உலாவியில் அடைய root URL-ஐ செல்லத் தயார். உங்கள் FastAPI சேவையகம் வழங்கும் வணக்கம் செய்தியைக் காணலாம்.
|
|
|
|
|
|
|
|
|
|
|
|
## சோதனை மற்றும் வெளியீடு
|
|
|
|
|
|
இப்போது நீங்கள் முன்னணி மற்றும் பின்புற கூறுகளையும் கட்டியுள்ளீர்கள், அனைத்து பகுதிகளும் ஒருங்கிணைக்க இயலும் என்று சோதித்து, உங்கள் சேட் உதவியாளரை மற்றவர்களுடன் பகிர வரும் வெளியீட்டு விருப்பைகளை ஆராயலாம்.
|
|
|
|
|
|
### உள்ளூராட்சி சோதனை பணிச்செயல்
|
|
|
|
|
|
உங்கள் முழுமையான பயன்பாட்டை சோதிப்பதற்கான படிகளை பின்பற்றவும்:
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[பின்னணி சேவையகத்தை துவக்கு] --> B[சூழல் மாறிலிகளை அமைக்கு]
|
|
|
B --> C[API இறுதிப்புள்ளிகளை சோதனை செய்]
|
|
|
C --> D[முன்காட்சியை உலாவியில் திற]
|
|
|
D --> E[செருகி செயல்பாட்டை சோதனை செய்]
|
|
|
E --> F[யாரும் பிரச்சனைகள் இருந்தால் காண்]
|
|
|
```
|
|
|
**படி படியாக சோதனை செயல்:**
|
|
|
|
|
|
1. **உங்கள் பின்புற சர்வரைக் கொடுக்கவும்**:
|
|
|
```bash
|
|
|
cd backend
|
|
|
source venv/bin/activate # அல்லது Windows இல் venv\Scripts\activate
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
2. **API இயங்குகிறதா என்று உறுதி செய்யவும்**:
|
|
|
- உலாவியில் `http://localhost:5000` திறக்கவும்
|
|
|
- உங்கள் FastAPI சர்வர் வழங்கும் வரவேற்பு செய்தியை காண வேண்டும்
|
|
|
|
|
|
3. **முன்னணியை திறக்கவும்**:
|
|
|
- உங்கள் முன்னணி அடைவுக்கு செல்லவும்
|
|
|
- உலாவியில் `index.html` திறக்கவும்
|
|
|
- அல்லது மேம்பாட்டிற்கு VS Code-இன் Live Server விரிவாக்கத்தை பயன்படுத்தவும்
|
|
|
|
|
|
4. **சேட் செயல்பாடை சோதிக்கவும்**:
|
|
|
- உள்ளீடு புலத்தில் செய்தி தட்டச்சு செய்யவும்
|
|
|
- "அனுப்பு" கிளிக் செய்யவும் அல்லது Enter அழுத்தவும்
|
|
|
- AI சரியாக பதிலளிக்கிறதா என்பதை சரி பாருங்கள்
|
|
|
- உலா Developer Console-ல் எந்த JS பிழைகள் உள்ளதா நோக்கவும்
|
|
|
|
|
|
### பொதுவான பிரச்சினைகள் தீர்வு
|
|
|
|
|
|
| பிரச்சனை | அறிகுறிகள் | தீர்வு |
|
|
|
|---------|----------|----------|
|
|
|
| **CORS பிழை** | முன்னணி பின்புறத்திற்கு செல்ல முடியாது | FastAPI CORSMiddleware சரியாக அமைக்கப்பட்டது என உறுதி செய்யவும் |
|
|
|
| **API விசை பிழை** | 401 அனுமதியற்ற பதில்கள் | `GITHUB_TOKEN` சுற்றுச்சூழல் மாறிலியை சரிபார்க்கவும் |
|
|
|
| **இணைப்பு மறுக்கப்பட்டது** | முன்னணி வலைப்பின்னலில் பிழைகள் | பின்புற URL சரி மற்றும் Flask சர்வர் இயங்குகிறது என்பதை உறுதி செய்யவும் |
|
|
|
| **AI பதில் இல்லை** | காலியான அல்லது பிழை பதில்கள் | API க்கான அங்கு பயன்பாடு மற்றும் அங்கீகாரம் பிரச்சனைகளைக் கண்டறிய பின்புற லோக்கள் பரிசீலனை செய்யவும் |
|
|
|
|
|
|
**பொதுவான பிழைத் திருத்த படிகள்:**
|
|
|
- **உரல்** உலா Developer Tools Console-ல் ஜாவாஸ்கிரிப்ட் பிழைகளை பரிசீலிக்கவும்
|
|
|
- **சரி பாருங்கள்** நெட்வொர்க் முனை API கோரிக்கைகள் மற்றும் பதில்கள் வெற்றிகரமாகக்காணுகின்றன என்பதை
|
|
|
- **மேலோட்டம் விடவும்** பைதான் பிழைகள் மற்றும் API பிரச்சனைகள் பின்புற டெர்மினலில் உள்ளதா என்று
|
|
|
- **உறுதி செய்யவும்** சுற்றுச்சூழல் மாறிலிகள் சரியான முறையில் ஏற்றப்பட்டுள்ளன மற்றும் அணுகக்கூடியவை
|
|
|
|
|
|
## 📈 உங்கள் AI பயன்பாட்டு மேம்பாட்டு சிறந்த காலக் கட்டம்
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title முழுமையான AI செயலி உருவாக்க பயணம்
|
|
|
|
|
|
section AI அடித்தளம்
|
|
|
உருவாக்கும் AI ஐப் புரிந்துகொள்ளுதல்
|
|
|
: வடிவமைப்பு பாராமேட்டர் உணர்தல்
|
|
|
: AI அளவுருக்களை நான் அறிதல்
|
|
|
: ப்ராம்ட் பொறியியல் தொழில்நுட்பங்கள் கற்றுக்கொள்ளுதல்
|
|
|
|
|
|
GitHub மாதிரிகள் ஒருங்கிணைத்தல்
|
|
|
: AI சேவை தளங்களை நடைமுறைப்படுத்தல்
|
|
|
: பாதுகாப்பான அங்கீகாரம் கையாளுதல்
|
|
|
: மாதிரி அளவுருக்களை மேம்படுத்தல்
|
|
|
|
|
|
section பின்தள மேம்பாடு
|
|
|
Python API கட்டமைப்பு
|
|
|
: FastAPI செயலிகள் கட்டுதல்
|
|
|
: அசிங்க் செயல்பாடுகளை செயல்படுத்தல்
|
|
|
: பாதுகாப்பான இறுதிப் புள்ளிகளை உருவாக்கல்
|
|
|
|
|
|
AI சேவை ஒருங்கிணைத்தல்
|
|
|
: வெளி AI API களை இணைத்தல்
|
|
|
: விகித வரம்பை கையாளுதல்
|
|
|
: பிழை எல்லைகளை செயல்படுத்தல்
|
|
|
|
|
|
section முன்தளத்தில் தேர்ச்சி
|
|
|
நவீன JavaScript வடிவமைப்புகள்
|
|
|
: ES6 வகுப்பு கட்டமைப்பில் தேர்ச்சி பெற்றல்
|
|
|
: அசிங்க்/அவைட் தொழில்முறைகளை செயல்படுத்தல்
|
|
|
: பொறுப்பு மிக்க இடைமுகங்களை கட்டுதல்
|
|
|
|
|
|
நேரடி பயனர் அனுபவம்
|
|
|
: இயக்கமுள்ள உரையாட்டுக் இடைமுகங்களை உருவாக்கல்
|
|
|
: எடுக்கும் நிலைகளை கையாளுதல்
|
|
|
: பயனர் பரஸ்பரங்களை மேம்படுத்தல்
|
|
|
|
|
|
section தயாரிப்பு தயார் நிலை
|
|
|
பாதுகாப்பு & செயல்திறன்
|
|
|
: பாதுகாப்பான டோக்கன் மேலாண்மையை செயல்படுத்தல்
|
|
|
: XSS கோளாறுகளை தடுப்பதற்கான முயற்சி
|
|
|
: API செயல்திறனை மேம்படுத்தல்
|
|
|
|
|
|
தொழிலைத்திறன் வாய்ந்த நகர்த்தல்
|
|
|
: விரிவாக்கக்கூடிய கட்டமைப்புகளை உருவாக்கல்
|
|
|
: பராமரிக்கக் கூடிய குறியீட்டை உருவாக்கல்
|
|
|
: மேம்பாட்டுத் தொகுப்புகளை ஆவணப்படுத்தல்
|
|
|
```
|
|
|
**🎓 பட்டப்படிப்பு முன்னணி**: நீங்கள் நவீன AI உதவியாளர்களை இயக்கும் அதே தொழில்நுட்பங்களுடன் மற்றும் கட்டமைப்பு முறைகளுடன் முழுமையான AI இயக்கப்பட்ட பயன்பாட்டை வெற்றிகரமாக கட்டினீர்கள். இந்தத் திறமைகள் பாரம்பரிய வலை மேம்பாட்டுக்கும் நவீன AI ஒருங்கிணைப்புக்கும் மைய இடத்தில் உள்ளன.
|
|
|
|
|
|
**🔄 அடுத்த நிலை திறன்கள்**:
|
|
|
- முன்னேற்ற AI கட்டமைப்புகள் (LangChain, LangGraph) ஆராய தயாராகவும்
|
|
|
- பன்முக AI பயன்பாடுகள் (உரை, படம், குரல்) உருவாக்க உருவாகவும்
|
|
|
- வெக்டர் டேட்டாபேஸ்கள் மற்றும் மீட்டெடுக்கும் முறைமைகள் செயல்படுத்த தயாராகவும்
|
|
|
- மெஷின் கற்றல் மற்றும் AI மாதிரி நுணுக்கமயமாக்கல் அடித்தளம் அமைக்கவும்
|
|
|
|
|
|
## GitHub Copilot முகவர் சவால் 🚀
|
|
|
|
|
|
Agent முறையைப் பயன்படுத்தி பின்வரும் சவாலை நிறைவேற்றவும்:
|
|
|
|
|
|
**விளக்கம்:** உரையாடல் வரலாறு மற்றும் செய்தி நிலைத்தன்மையைச் சேர்க்கும் மூலமாக சேட் உதவியாளரை மேம்படுத்தவும். இது சேட் செயலிகளில் நிலையை நிர்வகிப்பது மற்றும் சிறந்த பயனர் அனுபவத்திற்கு தரவுத்தள சேமிப்பை ஏற்கனவே கையாள உதவும்.
|
|
|
|
|
|
**கோரிக்கை:** உரையாடல் வரலாறை அமர்த்தி அமர்ச்சி இடைவெளிகளுக்கு இடையில் நிலைத்திருக்க ஏற்படுத்தவும். உள்ளூர் நினைவகத்தில் சேட் செய்திகள் சேமிப்பு செயல் சேர்க்கவும், பக்கம் ஏற்றும்போது உரையாடல் வரலாற்றை காண்பிக்கவும் மற்றும் "வரலாறு அழிக்க" பொத்தானை சேர்க்கவும். மேலும் தட்டச்சு கூறுகள் மற்றும் செய்தி நேர சுவடுகளைச் செயல்படுத்தி உரையாடல் அனுபவத்தை மீள்பார்க்கக்கூடியதாக்கவும்.
|
|
|
|
|
|
மேலும் [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 எப்படித் தானென விளக்கும் தெளிவான ஆவணங்களை எழுதவும்
|
|
|
|
|
|
**முன்னணி மேம்பாடு:**
|
|
|
- அழகான மற்றும் பொருந்தக்கூடிய சேட் இடைமுகத்தை கட்டுங்கள்
|
|
|
- புரவலர்களுக்கு காட்சிப்படுத்த பெருமையாக இருக்கும் நவீன, சுத்தமான ஜாவாஸ்கிரிப்டை எழுதவும்
|
|
|
- உங்கள் AI நபர்மேடை பிரதிபலிக்கும் தனிப்பயன் அலங்காரத்தை வடிவமைக்கவும் – மகிழ்ச்சியான மற்றும் வண்ணமயமாகவா? சுத்தமான குறைந்தபட்சமாகவா? அது முழுக்க உங்களுக்கே!
|
|
|
- அது மொபைல்களிலும் கணினிகளிலும் சிறப்பாக இயங்குவதை உறுதி செய்யவும்
|
|
|
|
|
|
**தனிப்பட்ட தேவைகள்:**
|
|
|
- உங்கள் AI உதவியாளருக்கு தனித்துவமான பெயர் மற்றும் நபர்மேடையைக் தேர்வு செய்யவும் – உங்கள் விருப்பங்கள் அல்லது தீர்க்க விரும்பும் பிரச்சனைகளை பிரதிபலிப்பதாக இருக்கலாம்
|
|
|
- உதவியாளரின் ஆவியுடன் பொருந்த தினசரி வடிவமைப்பை தனிப்பயனாக்கவும்
|
|
|
- மக்கள் உரையாடத் தொடங்க விரும்பும் ஒரு மனம் மகிழ்ச்சியான வரவேற்பு செய்திகள் எழுதவும்
|
|
|
- வேறுபட்ட கேள்விகளுடன் உங்கள் உதவியாளரை சோதித்து அது எப்படி பதிலளிக்கிறதோ பாருங்கள்
|
|
|
|
|
|
### மேம்படுத்தல் யோசனைகள் (விருப்பமானவை)
|
|
|
|
|
|
நீங்கள் உங்கள் திட்டத்தை அடுத்த கட்டத்துக்கு கொண்டு செல்வதா? இங்கே சில பொழுதுபோக்கான யோசனைகள்:
|
|
|
|
|
|
| அம்சம் | விளக்கம் | நீங்கள் பயிற்சி பெறப்போகும் திறன்கள் |
|
|
|
|---------|-------------|------------------------|
|
|
|
| **செய்தி வரலாறு** | பக்கம் புதுப்பிக்கப்பட்டபோது கூட உரையாடல் நினைவிருக்க | localStorage, JSON கையாளல் |
|
|
|
| **தட்டச்சு குறிப்புகள்** | பதில்களை காத்திருக்கும்போது "AI தட்டச்சு செய்கிறது..." காட்டவும் | CSS ஊசலாட்டங்கள், async நிரலாக்கம் |
|
|
|
| **செய்தி நேர சுவடுகள்** | ஒவ்வொரு செய்தியும் எப்போது அனுப்பப்பட்டது காட்டவும் | தேதி/நேர வடிவமைப்பு, UX வடிவமைப்பு |
|
|
|
| **சேட் ஏற்றுமதி** | பயனர்கள் உரையாடலை பதிவிறக்கலாம் | கோப்பு கையாளல், தரவு ஏற்றுமதி |
|
|
|
| **தீம் மாற்று** | வெளிர்/அন্ধকার நிலை மாற்றம் | CSS மாறிலிகள், பயனர் விருப்பங்கள் |
|
|
|
| **குரல் உள்ளீடு** | பேச்சை உரை into மாற்றும் செயல்பாடு | வலை API கள், அணுகல் திறன் |
|
|
|
|
|
|
### சோதனை மற்றும் ஆவணப்படுத்தல்
|
|
|
|
|
|
**தர உறுதி:**
|
|
|
- உங்கள் செயலியை பலவித உள்ளீடுகளுடன் மற்றும் குறுக்குவழி வழக்குகளுடன் சோதிக்கவும்
|
|
|
- பதிலளிக்கும் வடிவமைப்பு வெவ்வேறு திரை அளவுகளிலும் செயல்படுவதை உறுதி செய்க
|
|
|
- விசை போட்டை வழிசெயல் மற்றும் ஸ்க்ரீன் ரீடர்கள் கொண்டு அணுகுதற்கான பொருத்தத்தைக் கண்டு பிடிக்கவும்
|
|
|
- HTML மற்றும் CSS உரிமைத்திற்கான தரவுக்கு சரிபார்க்கவும்
|
|
|
|
|
|
**ஆவணப்படுத்தல் தேவைகள்:**
|
|
|
- உங்கள் திட்டத்தை மற்றும் அதனை இயக்குவதற்கான வழிமுறைகளை விளக்கும் README.md எழுதவும்
|
|
|
- செயல்பாட்டில் உங்கள் சேட் இடைமுகத்தின் ஸ்கிரீன்சாட்களைச் சேர்க்கவும்
|
|
|
- நீங்கள் சேர்த்த உள்ள தனித்துவ அம்சங்கள் மற்றும் தனிப்பயனாக்கல்களை ஆவணப்படுத்தவும்
|
|
|
- மற்ற ப்ரவலர்களுக்கான தெளிவான அமைப்பு வழிமுறைகளை வழங்கவும்
|
|
|
|
|
|
### சமர்ப்பிப்பு வழிகாட்டுதல்கள்
|
|
|
|
|
|
**திட்ட ஒப்படைகள்:**
|
|
|
1. அனைத்து மூலக் கோப்புகளுடன் முழுநிலைத் திட்ட அடைவு
|
|
|
2. README.md - திட்ட விளக்கம் மற்றும் அமைப்புத்தெரிவுகள்
|
|
|
3. உங்கள் சேட் உதவியாளரை செயல்பாட்டில் காட்டும் ஸ்கிரீன்ஷாட்கள்
|
|
|
4. நீங்கள் கற்றுக்கொண்டது மற்றும் எதிர்கொள்ள வேண்டிய சவால்களை விரிவாக வெளிப்படுத்தல்
|
|
|
|
|
|
**மதிப்பீட்டு அளவுருக்கள்:**
|
|
|
- **செயல்பாடு**: சேட் உதவியாளர் எதிர்பார்க்கப்படுவதுபோல் செயல்படுகிறதா?
|
|
|
- **குறியீட்டு தரம்**: குறியீடு நன்கு ஒழுங்குபடுத்தப்பட்டதா, கருத்துடைந்தது, பராமரிப்புக்கு ஏற்றதா?
|
|
|
- **வடிவமைப்பு**: இடைமுகம் கண்ணுக்கு இனிமையானதும் பயனர் இடைவாடல் மிகச்சிரமமற்றதுமா?
|
|
|
- **படைப்பாற்றல்**: உங்கள் செயல்பாடு எவ்வளவு தனித்துவமானது மற்றும் தனிப்பட்டது?
|
|
|
- **ஆவணப்படுத்தல்**: அமைப்பு வழிமுறைகள் தெளிவானவையாகவும் முழுமையாக இருக்கின்றனவா?
|
|
|
|
|
|
> 💡 **வெற்றி குறிப்புக்கள்**: முதலில் அடிப்படைக் தேவைகளை நிறைவேற்றுங்கள், பின்னர் அனைத்து செயல்பாடும் வேலை செய்தபின் மேம்படுத்துக. உயர்தர மைய செயல்பாட்டைக் குறித்து கவனம் செலுத்தி பின்னர் பரிணாம அம்சங்களைச் சேர்க்கவும்.
|
|
|
|
|
|
## தீர்வு
|
|
|
|
|
|
[Solution](./solution/README.md)
|
|
|
|
|
|
## கூடுதல் சவால்கள்
|
|
|
|
|
|
உங்கள் AI உதவியாளரை அடுத்த கட்டத்திற்கு எடுத்துச் செல்ல தயாரா? AI ஒருங்கிணைப்பு மற்றும் வலை மேம்பாட்டில் உங்கள் அறிவை ஆழமாக்கும் இந்த மேம்பட்ட சவால்களை முயற்சிக்கவும்.
|
|
|
|
|
|
### நபர்மேடை தனிப்பயன்பாடு
|
|
|
|
|
|
உங்கள் AI உதவியாளருக்கு தனித்துவமான நபர்மேடையை நீங்கள் கொடுத்தபோது உண்மையான மாயாஜாலம் நிகழ்கிறது.வித்தியாசமான ஸிஸ்டம் ப்ராம்ப்ப்ட்களைத் தயார் செய்து, சிறப்பு உதவியாளர்களை உருவாக்க முயற்சிக்கவும்:
|
|
|
|
|
|
**தொழில்முறை உதவியாளர் எடுத்துக்காட்டு:**
|
|
|
```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 வடிவங்களும் கலந்தோல்களும் கொண்ட தனிப்பயன் சேட் பபிள் வடிவமைப்பைச் சேர்க்கவும்
|
|
|
- AI "சிந்தித்தல்" போது தட்டச்சு கூறு ஊசலாட்டத்தை உருவாக்கவும்
|
|
|
- எமோஜி எதிர்வினைகள் அல்லது செய்தி மதிப்பீட்டு முறையை வடிவமைக்கவும்
|
|
|
|
|
|
**ஜாவாஸ்கிரிப்ட் மேம்பாடுகள்:**
|
|
|
- விசைகோட்டுகள் சேர்க்கவும் (Send க்காக Ctrl+Enter, உள்ளீட்டை அழிக்க Escape)
|
|
|
- செய்தி தேடல் மற்றும் வடிகட்டல் செயல்பாட்டை செயல்படுத்தவும்
|
|
|
- உரையாடல் ஏற்றுமதி அம்சத்தைச் (உரை அல்லது JSON ஆக பதிவிறக்க) உருவாக்கவும்
|
|
|
- செய்தி இழப்பைத் தடுக்கும் வகையில் உள்ளூர் நினைவகத் தானாகச் சேமிப்பையும் வழங்கவும்
|
|
|
|
|
|
### மேம்பட்ட AI ஒருங்கிணைப்பு
|
|
|
|
|
|
**பல AI நபர்மேடைகள்:**
|
|
|
- வெவ்வேறு AI நபர்மேடைகளுக்கிடையே மாற்றுவதற்கு drop-down பட்டியலை உருவாக்கவும்
|
|
|
- பயனர் விருப்பமான நபர்மேடையை localStorage-ல் சேமிக்கவும்
|
|
|
- உரையாடல் ஓட்டத்தை பராமரிக்கும் சூழல் மாற்றங்களை செயல்படுத்தவும்
|
|
|
|
|
|
**புலமைமிக்க பதில் அம்சங்கள்:**
|
|
|
- உரையாடல் சூழல் விழிப்புணர்வு (AI முன்னைய செய்திகள் நினைவுகூர்தல்) சேர்க்கவும்
|
|
|
- உரையாடல் தலைப்பின் அடிப்படையில் **சுயமாக பரிந்துரைகளை** அமல்படுத்தவும்
|
|
|
- பொதுவான கேள்விகளுக்கான **விரைவு பதில் பொத்தான்களை உருவாக்கவும்**
|
|
|
|
|
|
> 🎯 **கற்றல் இலக்கு**: இந்த கூடுதல் சவால்கள் உங்களுக்கு நவீன வலை மேம்பாட்டு மாதிரிகள் மற்றும் உற்பத்தி பயன்பாடுகளில் பயன்படுத்தப்படும் ஏஐ ஒருங்கிணைப்பு தொழில்நுட்பங்களை புரிந்து கொள்ள உதவுகின்றன.
|
|
|
|
|
|
## சுருக்கமும் அடுத்த படிகளும்
|
|
|
|
|
|
வாழ்த்துக்கள்! நீங்கள் வெற்றிகரமாக தொடக்கம் முதல் முழுமையாக ஏஐ செயல்படுத்தப்பட்ட உரையாடல் உதவியாளரை கட்டியுள்ளீர்கள். இந்த திட்டம் உங்களுக்கு நவீன வலை மேம்பாட்டு தொழில்நுட்பங்கள் மற்றும் ஏஐ ஒருங்கிணைப்பு தொடர்பான நேரடி அனுபவத்தைக் கொடுத்துள்ளது – இது இன்றைய தொழில்நுட்ப துறையில் நாள்மணி மதிப்பிடப்படுகிறது.
|
|
|
|
|
|
### நீங்கள் அடைந்த செயல்திறன்
|
|
|
|
|
|
இந்த பாடம் முழுவதும், பல முக்கிய தொழில்நுட்பங்கள் மற்றும் கொள்கைகளை நீங்கள் சிறந்து கற்றுக்கொண்டுள்ளீர்கள்:
|
|
|
|
|
|
**பின்புற வளர்ச்சி:**
|
|
|
- ஏஐ செயல்பாட்டிற்காக GitHub Models API-யுடன் **இணைப்பு செய்தல்**
|
|
|
- சரியான பிழை கையாளலை கொண்ட Flask மூலம் RESTful API-யை **கட்டமைத்தல்**
|
|
|
- சுற்றுச்சூழல் மாறிகளைப் பயன்படுத்தி பாதுகாப்பான அங்கீகாரத்தை **வழங்குதல்**
|
|
|
- முன்னணி மற்றும் பின்புறத்துக்கு இடையில் கோர்ஸை **அமைத்தல்**
|
|
|
|
|
|
**முன்னணி வளர்ச்சி:**
|
|
|
- அர்த்தமுள்ள HTML பயன்படுத்தி பதிலளிக்கும் உரையாடல் இடைமுகத்தை **உருவாக்குதல்**
|
|
|
- async/await மற்றும் வகுப்பு அடிப்படையிலான கட்டமைப்புடன் நவீன JavaScript-ஐ **நிகழ்த்துதல்**
|
|
|
- CSS Grid, Flexbox மற்றும் அனிமேஷன்களுடன் ஈர்க்கக்கூடிய பயனர் இடைமுகத்தை **வடிவமைத்தல்**
|
|
|
- அணுகல் வசதிகள் மற்றும் பதிலளிக்கும் வடிவமைப்பு கொள்கைகளை **சேர்த்தல்**
|
|
|
|
|
|
**முழுமையான ஒருங்கிணைப்பு:**
|
|
|
- HTTP API அழைப்புகளின் மூலம் முன்னணி மற்றும் பின்புறத்தை **இணைத்தல்**
|
|
|
- நேரடி பயனர் தொடர்புகள் மற்றும் அசிங்கிரோனஸ் தரவு ஓட்டத்தை **கையாண்டல்**
|
|
|
- முழு செயலியில் பிழை கையாளுதல் மற்றும் பயனர் கருத்தை **உருவாக்குதல்**
|
|
|
- பயனர் உள்ளீட்டிலிருந்து ஏஐ பதிலளிப்பவரை முழுமையாக செயலியை **சோதித்தல்**
|
|
|
|
|
|
### முக்கிய கற்றல் முடிவுகள்
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((AI Chat App Skills))
|
|
|
API Integration
|
|
|
Authentication
|
|
|
Error Handling
|
|
|
Async Programming
|
|
|
Web Development
|
|
|
HTML5 Semantics
|
|
|
Modern CSS
|
|
|
ES6+ JavaScript
|
|
|
User Experience
|
|
|
போர்த்தியான வடிவமைப்பு
|
|
|
அணுகல் ஏற்பாடு
|
|
|
நேரடி மாறுதல்
|
|
|
AI Understanding
|
|
|
Prompt Engineering
|
|
|
Model Parameters
|
|
|
Conversation Flow
|
|
|
```
|
|
|
இந்தத் திட்டம் உங்களுக்கு ஏஐ இயக்கிய பயன்பாடுகளை கட்டியெழுப்புவதற்கான அடித்தளங்களை அறிமுகம் செய்துள்ளது, இது வலை வளர்ச்சியின் எதிர்காலத்தை பிரதிபலிக்கிறது. நீங்கள் எப்போது ஆன்மீகமிக்க மற்றும் பதிலளிக்கும் பயனர் அனுபவங்களை உருவாக்குவது எளிதாக்கும் வகையில் பாரம்பரிய வலை பயன்பாடுகளில் AI திறன்களை ஒருங்கிணைப்பது எப்படி என்பதைத் தெளிவாக புரிந்துகொண்டுள்ளீர்கள்.
|
|
|
|
|
|
### தொழிலை நோக்கிய பயன்பாடுகள்
|
|
|
|
|
|
இந்த பாடத்தில் நீங்கள் பெற்ற திறன்கள் நேரடியான முறையில் நவீன மென்பொருள் மேம்பாட்டு தொழில்முறைகளுக்கு பொருந்தும்:
|
|
|
|
|
|
- நவீன கட்டமைப்புகள் மற்றும் API களை பயன்படுத்தி **முழு ஸ்டாக் வலை மேம்பாடு**
|
|
|
- வலை பயன்பாடுகள் மற்றும் மொபைல் செயலிகளுக்கு **ஏஐ ஒருங்கிணைப்பு**
|
|
|
- மைக்ரோசெர்வீசஸ் கட்டுமானங்களுக்கான **API வடிவமைப்பு மற்றும் மேம்பாடு**
|
|
|
- அணுகல் வசதிகளும் பதிலளிக்கும் வடிவமைப்புகளும் கொண்ட **பயனர் இடைமுகம் மேம்பாடு**
|
|
|
- சுற்றுச்சூழல் அமைப்பும் வெளியீடும் உட்பட **DevOps நடைமுறைகள்**
|
|
|
|
|
|
### உங்கள் ஏஐ மேம்பாட்டு பயணத்தை தொடருங்கள்
|
|
|
|
|
|
**அடுத்த கற்றல் படிகள்:**
|
|
|
- மேம்பட்ட ஏஐ மாதிரிகள் மற்றும் API களை (GPT-4, Claude, Gemini) **ஆராயவும்**
|
|
|
- சிறந்த ஏஐ பதில்களுக்கு முனைப்பளிப்பதற்கான தொழில்நுட்பங்களை **கற்றுக்கொள்ளவும்**
|
|
|
- உரையாடல் வடிவமைப்பும் உரையாடல் உதவியாளர் பயனர் அனுபவக் கொள்கைகளும் **படிக்கவும்**
|
|
|
- ஏஐ பாதுகாப்பு, நெறிமுறைகள் மற்றும் பொறுப்பான ஏஐ மேம்பாட்டு நடைமுறைகளை **ஆராயவும்**
|
|
|
- உரையாடல் நினைவு மற்றும் உள்ளடக்கத் தெரிதல் கொண்ட மேலும் நுட்ப பயன்பாடுகளை **கட்டியெழுப்பவும்**
|
|
|
|
|
|
**மேம்பட்ட திட்ட யோசனைகள்:**
|
|
|
- ஏஐ மாடரேஷன் கொண்ட பன்முக உரையாடல் அறைகள்
|
|
|
- ஏஐ இயக்கிய வாடிக்கையாளர் சேவை உரையாடல் உதவியாளர்கள்
|
|
|
- தனிப்பயனாக்கப்பட்ட கற்றலுடன் கல்வி டியூட்டோரிங் உதவியாளர்கள்
|
|
|
- பல்வேறு ஏஐ தனிமொழிகளுடன் புத்தக எழுத்து கூட்டாளர்கள்
|
|
|
- வளர்ப்பாளர்களுக்கான தொழில்நுட்ப ஆவண உதவியாளர்கள்
|
|
|
|
|
|
## GitHub Codespaces உடன் துவக்கம்
|
|
|
|
|
|
இந்தத் திட்டத்தை மேகத்தில் உள்ள மேம்பாட்டு சூழலில் முயற்சிக்க விரும்புகிறீர்களா? GitHub Codespaces உலாவியில் முழுமையான மேம்பாட்டு அமைப்பை வழங்குகிறது, உங்களுக்கு ஏஐ செயல்பாடுகளை உள்ளூர் அமைப்பு தேவையின்றி சிறப்பாக சோதனை செய்ய உதவும்.
|
|
|
|
|
|
### உங்கள் மேம்பாட்டு சூழலை அமைத்தல்
|
|
|
|
|
|
**படி 1: வடிவமைப்பிலிருந்து உருவாக்கவும்**
|
|
|
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) என்ற இடத்திற்கு **ஓடவும்**
|
|
|
- மேல் வலது மூலையில் "Use this template" என்பதைக் **கிளிக் செய்யவும்** (GitHub-இல் உள்நுழைந்திருப்பதை உறுதி செய்யவும்)
|
|
|
|
|
|
|
|
|
|
|
|
**படி 2: Codespaces விரும்பவும்**
|
|
|
- இன்று உருவாக்கிய ரெப்போவை **திறக்கவும்**
|
|
|
- பச்சை "Code" பொத்தானை அழுத்தி "Codespaces" ஐ தேர்ந்தெடுக்கவும்
|
|
|
- உங்கள் மேம்பாட்டு சூழலை துவக்க "Create codespace on main" ஐ **தேர்ந்தெடுக்கவும்**
|
|
|
|
|
|
|
|
|
|
|
|
**படி 3: சூழல் அமைப்பு**
|
|
|
Codespace ஏற்றியவுடன், நீங்கள் பெறுவீர்கள்:
|
|
|
- முன்னர் நிறுவப்பட்ட Python, Node.js மற்றும் அனைத்து தேவையான மேம்பாட்டு கருவிகள்
|
|
|
- வலை மேம்பாட்டுக்கான விரிவுரைகள் கொண்ட VS Code இடைமுகம்
|
|
|
- பின்புற மற்றும் முன்னணி சர்வர்களை இயக்குவதற்கான டெர்மினல் அணுகல்
|
|
|
- உங்கள் பயன்பாடுகளை சோதிக்க போர்ட் முன்கூட்டிய அனுமதி
|
|
|
|
|
|
**Codespaces வழங்கும் வசதிகள்:**
|
|
|
- உள்ளூர் சுற்றுச்சூழல் அமைப்பையும் அமைப்பதில் பிரச்சினைகளையும் நீக்குகிறது
|
|
|
- பல சாதனங்களில் ஒரே மாதிரியான வள வளர்ப்பு சூழலை வழங்குகிறது
|
|
|
- வலை மேம்பாட்டிற்கான முன்கூட்டிய கருவிகள் மற்றும் விரிவுரைகளை உள்ளடக்கியது
|
|
|
- பதிப்பு கட்டுப்பாடு மற்றும் ஒத்துழைப்பு க்கான GitHub உடன் இணக்கமானது
|
|
|
|
|
|
> 🚀 **திறமையான குறிப்பு**: Codespaces ஏஐ பயன்பாடுகளை கற்றல் மற்றும் முன்மாதிரியாக செயல்படுத்த சிறந்தது, ஏனெனில் இது அனைத்து சிக்கலான சூழல் அமைப்பையும் தானாகவே கையாள்கிறது, ஆகையால் நீங்கள் கட்டமைப்பு சிக்கல்களை பயப்படாமல் உருவாக்குவதும் கற்றுக்கொள்ளதையும் கவனிக்க முடியும்.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**குறிப்புரை**:
|
|
|
இந்த ஆவணம் AI மொழி மாற்று சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்துடன் பணியாற்றினாலும், தானியங்கி மொழி மாற்றங்களில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனித்து கொள்ளவும். இதன் இயல்புநிலை மொழியை உள்ளடக்கிய மூல ஆவணம் தான் அதிகாரபூர்வ ஆதாரம் எனக் கருத்தில் கொள்ள வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழி மாற்றம் காரணமாக ஏற்படும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்கமாட்டோம்.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
