# 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[பயிற்சி தரவு புத்தகங்கள், கட்டுரைகள், இணைய] --> 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: கோரிக்கையை சரிபார்க்கிறது கணினி உத்தரவைக் சேர்க்கிறது
API->>AI: வடிவமைக்கப்பட்ட கோரிக்கையை அனுப்புகிறது
AI->>API: எஐ பதிலை அளிக்கிறது
Note over API: பதிலை செயலாக்குகிறது சந்திப்பை பதிவு செய்கிறது
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
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**ஒவ்வொரு HTML கூறின் நோக்கும் அதன் நோக்கம்**:
#### ஆவண கட்டமைப்பு
- **``**: உலாவியை இது நவீன HTML5 எனச் சொல்லுவது
- **``**: மொழி குறியீட்டை குறிப்பிடுகிறது, திரைக்காணிகள் மற்றும் மொழி பெயர்ப்பர்களுக்கான உதவி
- **``**: சர்வதேச எழுத்துக்களுக்கு சரியான எழுத்துக் குறியாக்கத்தை வழங்குகிறது
- **``**: மொபைல் சாதனங்களில் பக்கம் சரியாக காணப்பட உதவும் (ஜூம் மற்றும் அளவு நிர்வகிப்பு)
#### செமாண்டிக் கூறுகள்
- **``**: தலைப்பு மற்றும் விளக்கத்துடன் மேல்தடதத்தை தெளிவாக குறிக்கிறது
- **``**: முதன்மை உள்ளடக்க பகுதியை (உரையாடல்கள் இருக்கும்) அமைக்கிறது
- **`