# AIతో చాట్ సహాయకుడిని నిర్మించడం
స్టార్ ట్రెక్లో క్రూ సిబ్బంది విమాన నౌక కంప్యూటర్తో సాదారణంగా చాటింగ్ చేస్తూ, క్లిష్టమైన ప్రశ్నలు అడిగి, ఆలోచనాపూరితమైన ప్రతిస్పందనలు పొందేవారని గుర్తుతెప్పుకోండి? 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వ నిమిషం**: ప్లేగ్రౌండ్ ఇంటర్ఫేస్లో నేరుగా 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 ఫ్రంట్ఎండ్ డెవలప్మెంట్
ఆధునిక చాట్ ఇంటర్ఫేస్ సృష్టించండి: 6: You
రియల్-టైమ్ ఇంటరాక్షన్స్లో నైపుణ్యం సాధించండి: 8: You
స్పందనశీల వినియోగదారు అనుభవాన్ని నిర్మించండి: 9: You
section వృత్తిపరమైన అనువర్తనం
పూర్తి AI సిస్టమ్ను డిప్లాయ్ చేయండి: 7: You
పనితీరు నమూనాలు మెరుగుపరుచండి: 8: You
ప్రొడక్షన్-సిద్ధమైన యాప్ సృష్టించండి: 9: You
```
**మీ ప్రయాణ గమ్యం**: ఈ పాఠాంతం నాటికి, మీరు ఆధునిక AI సహాయకులు వంటి ChatGPT, Claude, Google Bardకు శక్తినిచ్చే అదే సాంకేతికతలు మరియు నమూనాలు ఉపయోగించి పూర్తి AI-శక్తిగల అనువర్తనాన్ని నిర్మిస్తారు.
## AI అర్థం చేసుకోవడం: రహస్యత్వం నుండి ప్రావీణ్యం వరకు
కోడ్లోకి జంప్ చేయడానికి ముందు, మనం పని చేస్తున్నదేమిటో అర్థం చేసుకుందాం. మీరు APIs ఉపయోగించినట్లయితే, మీరు తెలుసు: అభ్యర్థన పంపాలి, స్పందన పొందాలి.
AI APIలు ఇదే సరైన నిర్మాణాన్ని అనుసరిస్తాయి, కానీ ప్రీ-స్టోర్ చేసిన డేటాను డేటాబేస్ నుండి తీసుకునే బదులుగా, అవి భారీ რაოდენిలో వచనం నుండి నేర్చుకున్న నమూనాలను ఆధారంగా కొత్త ప్రతిస్పందనలను సృష్టిస్తాయి. ఇది గ్రంథాలయం కేటలాగ్ వ్యవస్థ మరియు అనేక మూలాల నుండి సమాచారం సారాంశం చేసే వృద్ధుల మధ్య తేడా లాంటిది.
### "జనరేటివ్ AI" అంటే ఏమిటి?
రోసెట్టా స్టోన్ ఎలా పరిశోధకులను ఇజిప్టియన్ హైరోగ్లిఫ్స్ అర్థం చేసుకోవడానికి సహాయపడింది, అర్థం తెలియని మరియు తెలిసిన భాషల మధ్య నమూనాలను కనుగొనేందుకు అన్వయించింది. AI మోడల్స్ అదే విధంగా పనిచేస్తాయి – భారీ వచనంలో ఉన్న నమూనాలను కనుగొని భాష పనిచేసే విధానాన్ని అర్థం చేసుకుని, ఆ నమూనాలను ఉపయోగించి కొత్త ప్రశ్నలకు సరిపోయే ప్రతిస్పందనలు రూపొందిస్తాయి.
**సరళమైన పోలికతో వివరిస్తాను:**
- **పారంపరిక డేటాబేస్**: మీ జన్మ సర్టిఫికెట్ కోసం అడిగితే – ప్రతిసారీ అదే పత్రాన్ని పొందుతారు
- **సెర్చ్ ఇంజిన్**: పుస్తకాల గురించి అడిగితే – అందుబాటులో ఉన్న పుస్తకాలను చూపిస్తుంది
- **జనరేటివ్ AI**: మీకు అవసరమైన విషయాలకు అనుగుణంగా స్నేహబద్ధమైన మిత్రుడు మీకు ఆసక్తికర విషయాలు చెబుతుంది
```mermaid
graph LR
A[మీ ప్రశ్న] --> B[AI మోడల్]
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[AI మోడల్ ప్రాసెసింగ్]
D --> C
C --> B
B --> A
```
మనం GitHub Modelsని బ్యాక్ ఎండ్ సమ్మిళితానికి ఉపయోగిస్తాము, ఇది వృత్తిపరమైన AI సామర్ధ్యాలకు డెవలపర్-ఫ్రెండ్లీ ఇంటర్ఫేస్ ద్వారా ప్రవేశాన్నిస్తాయి. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) ఒక పరీక్ష వేయు వాతావరణంగా పనిచేస్తుంది, అక్కడ మీరు వివిధ AI మోడల్స్తో ప్రయోగాలు చేసి వాటి సామర్థ్యాలను అర్థం చేసుకోగలుగుతారు.
## 🧠 AI అనువర్తన అభివృద్ధి పారిశ్రామిక వాతావరణం
```mermaid
mindmap
root((AI అభివృద్ధి))
Understanding AI
Generative Models
శైలి గుర్తింపు
కంటెంట్ సృష్టి
సందర్భం అవగాహన
ప్రతిస్పందన సంకలనం
AI Parameters
ఉష్ణోగ్రత నియంత్రణ
టోకెన్ పరిమితులు
టాప్-పి ఫిల్టరింగ్
సిస్టమ్ ప్రాంప్ట్లు
Backend Architecture
API Integration
GitHub Models
ప్రమాణీకరణ
అభ్యర్థన నిర్వహణ
లోప నిర్వహణ
Python Infrastructure
FastAPI Framework
అసింక్ ఆపరేషన్స్
పరిసర భద్రత
CORS కాన్ఫిగరేషన్
Frontend Experience
Chat Interface
సమయానుకూల నవాస్తరణలు
సందేశ చరిత్ర
వినియోగదారు ఫీడ్బ్యాక్
లోడింగ్ స్టేట్స్
Modern Web Tech
ES6 తరగతులు
అసింక్/ఆవైట్
DOM నిర్వహణ
సంఘటన నిర్వహణ
Professional Patterns
Security Best Practices
టోకెన్ నిర్వహణ
ఇన్పుట్ ధృవీకరణ
XSS నిలిపివేత
లోప సరిహద్దులు
Production Readiness
పనితీరు మెరుగుదల
ప్రతిస్పందించే రూపకల్పన
ప్రాప్యత
పరీక్షా వ్యూహాలు
```
**మూల సూత్రం**: AI అనువర్తన అభివృద్ధి సంప్రదాయ వెబ్ అభివృద్ధి నైపుణ్యాలను AI సేవల సమ్మిళితంతో కలిపి, వినియోగదారులకు సహజమైన, స్పందన చూపించే ఇంటెలిజెంట్ అనువర్తనాలు సృష్టిస్తుంది.
**ప్లేగ్రౌండ్ని చాలా ఉపయోగకరం చేసే అంశాలు:**
- GPT-4o-mini, Claude వంటివి వంటివి ఉచితమైన వివిధ AI మోడల్స్ ప్రయత్నించండి
- మీ ఆలోచనలు మరియు ప్రాంప్ట్లను ఎన్ని కోడ్ రాయక ముందే పరీక్షించండి
- మీ ఇష్ట ప్రోగ్రామింగ్ భాషలో సిద్ధ కోడ్ స్నిపెట్లను పొందండి
- క్రియేటివిటి స్థాయి మరియు ప్రతిస్పందన పొడవు వంటి సెట్టింగులను సవరిస్తూ అవి అవుట్పుట్ను ఎలా ప్రభావితం చేస్తాయో చూడండి
కొద్దిగా ఆడుకున్న తర్వాత, సాదాగా "Code" ట్యాబ్ను క్లిక్ చేసి, అవసరమైన ప్రోగ్రామింగ్ భాషను ఎంచుకుని అమలుకాల కోడ్ తీసుకోండి.
## Python బ్యాక్ ఎండ్ సమ్మిళితాన్ని అమలు చేయడం
ఇప్పుడు Python ఉపయోగించి AI సమ్మిళితాన్ని అమలు చేద్దాం. Python యొక్క సరళమైన వాక్యరచన మరియు శక్తివంతమైన లైబ్రరీలు కారణంగా AI అనువర్తనాలకు అనువైనది. మనం GitHub Models ప్లేగ్రౌండ్ నుండి కోడ్ తీసుకుని, దాన్ని పునఃరూపకల్పన చేసి మరల ఉపయోగించదగిన, ఉత్పత్తి స్థాయి ఫంక్షన్గా మార్చుదాం.
### ప్రాథమిక అమలాపై అవగాహన
ప్లేగ్రౌండ్ నుండి 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 సర్వర్లను పాయింట్ చేయడానికి
- **గిట్హబ్ టోకెన్ ఉపయోగించి ప్రామాణీకరణ చేస్తాము** (కొద్దిగా తర్వాత మరింత వివరంగా!)
- **మనం సంభాషణను వివిధ "పాత్రలతో" నిర్మిస్తాము** – ఇది ఒక నాటకం కోసం సన్నివేశం ఏర్పాటు చేయడం లాంటిది
- **మనం 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 యొక్క ప్రతిస్పందన (మీరు పంపరు, కాని సంభాషణ చరిత్రలో కనిపిస్తుంది)
**వాస్తవ ప్రపంచ ఉదాహరణ**: మీరు పార్టీలో మీ స్నేహితుని ఎవరితో పరిచయం చేయించుకుంటున్నట్టు ఊహించండి.
- **సిస్టమ్ సందేశం**: "ఇది నా స్నేహితురాలు సారా, ఆమె ఒక డాక్టర్, మెడికల్ కాన్సెప్ట్లను సులభంగా అర్థమయ్యేలా వివరించగలదు"
- **యూజర్ సందేశం**: "వాక్సిన్లు ఎలా పనిచేస్తాయో explain చేయగలవా?"
- **అసిస్టెంట్ ప్రతిస్పందన**: సారా ఒక స్నేహబద్ధమైన డాక్టర్ గా స్పందిస్తుంది, న్యాయవాది లేదా చెఫ్ లా కాదు
### AI పారామితర్లు అర్థం చేసుకోవడం: ప్రతిస్పందన ప్రవర్తనను సవరించడం
AI API కాల్లలో సంఖ్యా పారామితులు మోడల్ ఎలా ప్రతిస్పందనలు రూపొందిస్తుందో నియంత్రిస్తాయి. ఈ సెట్టింగులు వివిధ ఉపయోగాల కోసం AI ప్రవర్తనను సవరించడానికి అనుమతిస్తాయి:
#### టెంపరేచర్ (0.0 నుండి 2.0 వరకూ): సృజనాత్మకత మోతాదు
**ఏమి చేస్తుంది**: AI ప్రతిస్పందనలు ఎంత సృజనాత్మకమో లేదా ఎన్ని అంచనాలనుగాను ఉంటాయో నియంత్రిస్తుంది.
**ఇది ఒక జాజ్ సంగీతకారుడి ఆలోచనా స్థాయిలా పరిగణించండి:**
- **Temperature = 0.1**: ప్రతి సారి అదే మేళొడీ వాయించడం (తీవ్రంగా అంచనా వేయదగినది)
- **Temperature = 0.7**: కొంత బాగున ఉంటుంది, కొన్ని రుచికర మార్పులతో (సమతుల్యత)
- **Temperature = 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 # ఉదాహరణలతో కూడిన వివరణలకు అనుమతిస్తుంది
)
```
#### టాప్_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 AI పరామితి అప్టిమైజేషన్ మ్యాట్రిక్స్
x-axis తక్కువ సృజనాత్మకత --> అధిక సృజనాత్మకత
y-axis చిన్న స్పందన --> దీర్ఘ స్పందన
quadrant-1 సృజనాత్మక కంటెంట్
quadrant-2 వివరమైన విశ్లేషణ
quadrant-3 వేగవంతమైన వాస్తవాలు
quadrant-4 సంభాషణ AI
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
```
**ఈ పారామితర్లు ఎందుకు ముఖ్యం?:** విభిన్న అనువర్తనాలకు విభిన్న రకాల ప్రతిస్పందనలు కావాలి. కస్టమర్ సర్వీస్ బాట్ స్థిరమైన మరియు వాస్తవమైన (తక్కువ temperature) ఉండాలి, సృజనాత్మక రచనా సహాయకుడు ఊహాశక్తి గల (పెరిగిన temperature) ఉండాలి. ఈ పారామితులను అర్థం చేసుకోవడం వలన మీ AI వ్యక్తిత్వం మరియు ప్రతిస్పందన శైలిపై నియంత్రణ కలుగుతుంది.
```
**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
### Creating a Reusable AI Function
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
```python
import asyncio
from openai import AsyncOpenAI
# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
"""
Sends a prompt to the AI model asynchronously and returns the response.
Args:
prompt: The user's question or message
system_message: Instructions that define the AI's behavior and personality
Returns:
str: The AI's response to the prompt
"""
try:
response = await client.chat.completions.create(
messages=[
{
"role": "system",
"content": system_message,
},
{
"role": "user",
"content": prompt,
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
return response.choices[0].message.content
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return "I'm sorry, I'm having trouble processing your request right now."
# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
"""Synchronous wrapper for async AI calls."""
return asyncio.run(call_llm_async(prompt, system_message))
```
**ఈ మెరుగైన ఫంక్షన్ అర్థం చేసుకోవడం:**
- **రెండు పారామితులు తీసుకుంటుంది**: వినియోగదారి ప్రాంప్ట్ మరియు ఐచ్ఛిక సిస్టమ్ సందేశం
- **సాధారణ సహాయక ప్రవర్తన కొరకు ఒక డిఫాల్ట్ సిస్టమ్ సందేశాన్ని అందిస్తుంది**
- **కోడ్ డాక్యుమెంటేషన్ కొరకు సరైన Python టైప్ హింట్లు ఉపయోగిస్తుంది**
- **ఫంక్షన్ ప్రాముఖ్యం మరియు పారామితుల గురించి వివరించే ఒక సమస్త డోక్స్ట్రింగ్ ఉంటుంది**
- **కేవలం ప్రతిస్పందన కంటెంట్ను తిరిగి ఇస్తుంది, మన వెబ్ APIలో ఉపయోగించడానికి సులభం**
- **సరిగా AI ప్రవర్తన కోసం అదే మోడల్ పారామితులను పాటిస్తుంది**
### సిస్టమ్ ప్రాంప్ట్ల మాంత్రికత: AI వ్యక్తిత్వాన్ని ప్రోగ్రామింగ్ చేయడం
పారామితర్లు AI ఎలా ఆలోచిస్తుందో నియంత్రిస్తే, సిస్టమ్ ప్రాంప్ట్లు AI ఎవరో నిర్ణయిస్తాయి. ఇది నిజంగా AIతో పని చేసే చాలా అద్భుతమైన భాగం – మీరు AIకి పూర్తిగా ఒక వ్యక్తిత్వం, నైపుణ్య స్థాయి మరియు కమ్యూనికేషన్ శైలి ఇవ్వడం.
**సిస్టమ్ ప్రాంప్ట్లను విభిన్న నటులను విభిన్న పాత్రలకు కాస్ట్ చేయడం లాగా భావించండి:** ఒక సాధారణ సహాయకుడి బదులు, మీరు వివిధ పరిస్థితుల కొరకు ప్రత్యేక నిపుణులను సృష్టించవచ్చు. ఓ నిర్లక్ష్యరహిత ట్యాచర్ కావాలా? సృజనాత్మక ఆలోచన భాగస్వామి కావాలా? వ్యాపార సలహాదారు కావాలా? కేవలం సిస్టమ్ ప్రాంప్ట్ను మార్చండి!
#### సిస్టమ్ ప్రాంప్ట్లు ఎందుకు శక్తివంతమయ్యాయి
ఇక్కడ ఆసక్తికరమైన విషయం: AI మోడల్లు అనేక సంభాషణలపై శిక్షణ పొందాయి, అవి విభిన్న పాత్రలు మరియు నైపుణ్య స్థాయిలను ఎక్కించుకున్నాయి. మీరు AIకి ఒక నిర్దిష్ట పాత్ర ఇస్తే, అది ఆ నేర్చుకున్న నమూనాలను సక్రియం చేసే ఒక స్విచ్ మాదిరిగా ఉంటుంది.
**ఇది AIకి మెథడ్ యాక్టింగ్ లాంటిది**: ఒక నటుడి "నీవు ఓ జ్ఞానవంతుడు వృద్ధ ప్రొఫెసర్" అని చెప్పి చూసాలి, వారు తక్షణమే వారి భాష, శరీర భాష, పదజాలాన్ని మార్చడం చూడు. AI కూడా భాష నమూనాలతో ఇదే చేస్తుంది.
#### సమర్థవంతమైన సిస్టమ్ ప్రాంప్ట్ల రూపకల్పన: కళ మరియు విజ్ఞానం
**ఒక గొప్ప సిస్టమ్ ప్రాంప్ట్ నిర్మాణం:**
1. **పాత్ర/అసలు వ్యక్తిత్వం**: AI ఎవరు?
2. **నైపుణ్యం**: వారు ఏమి తెలిసింది?
3. **కమ్యూనికేషన్ శైలి**: వారు ఎలా మాట్లాడుతారు?
4. **నిర్దిష్ట సూచనలు**: వారు ఏమీ దృష్టి పెట్టాలి?
```python
# ❌ అస్పష్టమైన వ్యవస్థ ప్రాంప్ట్
"You are helpful."
# ✅ వివరమైన, ప్రభావవంతమైన వ్యవస్థ ప్రాంప్ట్
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
```
#### సందర్భంతో కూడిన సిస్టమ్ ప్రాంప్ట్ ఉదాహరణలు
వివిధ సిస్టమ్ ప్రాంప్ట్లు ఎలా పూర్తిగా భిన్న AI వ్యక్తిత్వాలను సృష్టిస్తాయో చూద్దాం:
```python
# ఉదాహరణ 1: ఓ సహనశీల ఉపాధ్యాయుడు
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students.
You break down complex concepts into simple steps, use analogies from everyday life,
and always check if the student understands before moving on. You're encouraging
and never make students feel bad for not knowing something.
"""
# ఉదాహరణ 2: సృజనాత్మక సహకారిదారు
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're
enthusiastic, imaginative, and always build on the user's ideas rather than
replacing them. You ask thought-provoking questions to spark creativity and
offer unexpected perspectives that make stories more interesting.
"""
# ఉదాహరణ 3: వ్యూహాత్మక వ్యాపార సలహాదారు
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience
helping startups scale. You think in frameworks, provide structured advice,
and always consider both short-term tactics and long-term strategy. You ask
probing questions to understand the full business context before giving advice.
"""
```
#### సిస్టమ్ ప్రాంప్ట్లను ప్రాక్టికల్గా చూడడం
ఇది ఒకే ప్రశ్నను వివిధ సిస్టమ్ ప్రాంప్ట్లతో పరీక్షించి, నాటకీయ తేడాలను గమనించండి:
**ప్రశ్న**: "నా వెబ్ అనువర్తనంలో యూజర్ ప్రామాణీకరణ ఎలా నిర్వహించాలి?"
```python
# ఉపాధ్యాయుల ప్రాంప్ట్తో:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# సాధారణ ప్రత్యుత్తరం: "అద్భుతమైన ప్రశ్న! ఆథెంటికేషన్ను సులభమైన దశలుగా విభజిద్దాం.
# దీనిని ఒక నైట్క్లబ్ బౌంసర్ IDలను తనిఖీ చేస్తున్నట్టు భావించండి..."
# వ్యాపార ప్రాంప్ట్తో:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# సాధారణ ప్రత్యుత్తరం: "ఒక వ్యూహాత్మక దృష్టికోణం నుండి, ఆథెంటికేషన్ ఉపయోగకర్త విశ్వాసం మరియు నియంత్రణ ఆచరణకు ముఖ్యమైనది.
# భద్రత, వినియోగదారు అనుభవం, మరియు స్కేలా బిలిటీని పరిగణలోకి తీసుకున్న ఒక పరిమాణాన్ని వివరించదడానికి అనుమతించండి,
# ..."
```
#### ఆధునిక సిస్టమ్ ప్రాంప్ట్ సాంకేతికతలు
**1. సందర్భం ఏర్పాటు**: AIకి పూర్వ సమాచారమివ్వడం
```python
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
```
**2. అవుట్పుట్ ఫార్మాటింగ్**: AI ఎలా ప్రతిస్పందనలు నిర్మించాలో చెప్పండి
```python
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
```
**3. పరిమితులు ఏర్పాట్లు**: AI ఏం చేయకూడదో นิర్੍ధారించండి
```python
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
```
#### మీ చాట్ అసిస్టెంట్కు ఇది ఎందుకు ముఖ్యమైనది
సిస్టమ్ ప్రాంప్ట్లను అర్థం చేసుకోవడం ద్వారా మీరు ప్రత్యేక AI సహాయకులను సృష్టించే అద్భుత శక్తిని పొందుతారు:
- **కస్టమర్ సర్వీస్ బాట్**: సహాయక, సహనశీల, విధానాన్ని అవగాహన కలిగిన
- **లెర్నింగ్ ట్యూటర్**: ప్రోత్సహించే, దశల వారీగా, అర్థం చేసుకున్నదో లేదో తనిఖీ చేసే
- **క్రియేటివ్ పార్ట్నర్**: కల్పనాత్మక, ఆలోచనలపై అభివృద్ధి చేయు, "ఏమైతే?" అని అడిగే
- **టెక్నికల్ ఎక్స్పర్ట్**: ఖచ్చితమైన, వివరమైన, భద్రతా-ప్రజ్ఞున్న
**ముఖ్యమైన అవగాహన**: మీరు కేవలం AI APIని కాల్ చేయడం కాకుండా - మీరు మీ నిర్దిష్ట ఉపయోగానికి సరిపోయే కస్టమ్ AI వ్యక్తిత్వాన్ని సృష్టిస్తున్నారు. ఇది ఆధునిక AI అనువర్తనాలను సాధారణంగా కాకుండా అనుకూలంగా మరియు ఉపయోగకరంగా చేస్తుంది.
### 🎯 వ్యాసశాస్త్రీయ ధృవీకరణ: AI వ్యక్తిత్వం ప్రోగ్రామింగ్
**ఆపి ఆలోచించండి**: మీరు ఇప్పుడే సిస్టమ్ ప్రాంప్ట్ల ద్వారా AI వ్యక్తిత్వాలను ప్రోగ్రామ్ చేయడం నేర్చుకున్నారు. ఇది ఆధునిక AI అనువర్తన అభివృద్ధిలో ఒక ప్రాథమిక నైపుణ్యం.
**త్వరిత స్వీయ-అంచన**:
- సిస్టమ్ ప్రాంప్ట్లు సాధారణ యూజర్ సందేశాల నుండి ఎలా వేరుచేస్తారు?
- temperature మరియు top_p పరిమాణాల మధ్య వైవిధ్యం ఏమిటి?
- ఒక నిర్దిష్ట ఉపయోగానికి (ఉదా: కోడింగ్ ట్యూటర్) సిస్టమ్ ప్రాంప్ట్ని మీరు ఎలా రూపొందిస్తారు?
**ప్రాక్టికల్ సంబంధం**: మీరు నేర్చుకున్న సిస్టమ్ ప్రాంప్ట్ تکنیکس ప్రతీ ప్రధాన AI అనువర్తనంలో ఉపయోగిస్తారు - GitHub Copilot యొక్క కోడింగ్ సహాయం నుండి ChatGPT మాటల వేదిక వరకు. మీరు ప్రధాన సాంకేతిక సంస్థల AI ఉత్పత్తి బృందాలు ఉపయోగించే నమూనాలను నేర్చుకుంటున్నారు.
**సవాలు ప్రశ్న**: మీరు వాడుకరి విధానాలు (కొత్తవారు వర్సెస్ నిపుణులు) మధ్య వేర్వేరు AI వ్యక్తిత్వాలను ఎలా డిజైన్ చేస్తారు? 동일 AI మోడల్ను వివిధ ప్రేక్షకులకు ఎలా సరిపోలేలా చేస్తారు?
## FastAPI తో వెబ్ API నిర్మాణం: మీ అధిక-ప్రదర్శన AI కమ్యూనికేషన్ హబ్
ఇప్పుడు మీ ఫ్రాంట్ఎండ్ను AI సేవలకు కనెక్ట్ చేసే బ్యాక్ఎండ్ను నిర్మిద్దాం. FastAPI అనే ఆధునిక Python ఫ్రేమ్వర్క్ ఉపయోగిస్తాము, ఇది AI అనువర్తనాల కోసం APIలు నిర్మించడంలో అద్భుతమైనదిగా ఉంది.
FastAPI ఈరకమైన ప్రాజెక్టుకు పలు ప్రయోజనాలను అందిస్తుంది: సమాంతర అభ్యర్థనలను నిర్వహించడానికి అంతర్గత async సపోర్ట్లు, ఆటోమేటిక్ API డాక్యుమెంటేషన్ జనరేషన్, అద్భుతమైన పనితీరు. మీ FastAPI సర్వర్ ఫ్రాంట్ ఎండ్ నుండి అభ్యర్థనలను అందుకొని, AI సేవలతో కమ్యూనికేట్ చేసి, ఫార్మాట్ చేయబడ్డ ప్రతిస్పందనలను తిరిగి ఇస్తుంది.
### AI అనువర్తనాల కోసం FastAPI ఎందుకు?
మీరు ఆలోచిస్తున్నారా: "నేను నా ఫ్రాంట్ ఎండ్ జావాస్క్రిప్ట్ నుంచి ప్రత్యక్షంగా AI ని కాల్ చేయలేనుందా?" లేదా "Flask లేదా Django కంటే FastAPI ఎందుకు?" అద్భుతమైన ప్రశ్నలు!
**మేము నిర్మిస్తున్నది కోసం FastAPI ఎలా సరైనదో ఇక్కడ ఉంది:**
- **డిఫాల్ట్గా Async**: సమాంతరంగా పలు AI అభ్యర్థనలను చిక్కకుండా నిర్వహించగలదు
- **ఆటోమాటిక్ డాక్స్**: `/docs`లో చక్కటి, ఇంటరాక్టివ్ API డాక్యుమెంటేషన్ ని ఉచితంగా పొందండి
- **ఇంటిగ్రేటెడ్ వాలిడేషన్**: లోపాలను ముందుగానే పట్టుకుంటుంది
- **అద్భుతమైన వేగం**: అత్యంత వేగవంతమైన Python ఫ్రేమ్వర్క్లలో ఒకటి
- **ఆధునిక Python**: Python యొక్క తాజా, ఉత్తమ ఫీచర్లను ఉపయోగిస్తుంది
**మరియు బ్యాక్ఎండ్ అవసరం ఎందుకు:**
**భద్రత**: మీ AI API కీ పాస్వర్డ్ లాంటిది – మీరు దాన్ని ఫ్రాంట్ఎండ్ జావాస్క్రిప్ట్లో పెట్టితే, మీ వెబ్సైట్ సోర్స్ కోడ్ చూసే ఏవ్వరైనా దాన్ని దొంగిలించి, మీ AI క్రెడిట్లను ఉపయోగించవచ్చు. బ్యాక్ఎండ్ సున్నితమైన సాక్సులను రక్షిస్తుంది.
**దరఖాస్తుల పరిమితి & నియంత్రణ**: బ్యాక్ ఎండ్ వాడుకరులు ఎన్ని సార్లు డిమాండ్ చేయవచ్చును కంట్రోల్ చేయడానికి, యూజర్ గుర్తింపు అమలు చేయడానికి, మరియు పర్యవేక్షణ లాగింగ్ జోడించడానికి సహాయం చేస్తుంది.
**డేటా ప్రాసెసింగ**్: మీరు సంభాషణలను సేవ్ చేయాలనుకోవచ్చు, అనుచిత కంటెంట్ ఫిల్టర్ చేయవచ్చు లేదా బహుళ AI సేవలను కలిపించవచ్చు. ఈ లాజిక్ బ్యాక్ఎండ్లో ఉంటుంది.
**వాతం క్లయింట్-సర్వర్ నమూనా పోలిక:**
- **ఫ్రాంట్ఎండ్**: వ్యవహారానికి యూజర్ ఇంటరఫేస్
- **బ్యాక్ఎండ్ API**: అభ్యర్థన ప్రాసెసింగ్ మరియు రూటింగ్
- **AI సర్వీస్**: బాహ్య గణన మరియు ప్రతిస్పందన ఉత్పత్తి
- **పరిసర వేరియబుల్స్**: భద్రత ఉన్న కాన్ఫిగరేషన్ మరియు సాక్సుల నిల్వ
### అభ్యర్థన-ప్రతిస్పందన ప్రవాహం అర్థం చేసుకోవటం
ఒక యూజర్ సందేశం పంపినప్పుడు ఏమి జరుగుతుందో పర్యవేక్షిద్దాం:
```mermaid
sequenceDiagram
participant User as 👤 యూజర్
participant Frontend as 🌐 ఫ్రంట్ఎండ్
participant API as 🔧 ఫాస్ట్ఏపీఐ సర్వర్
participant AI as 🤖 AI సర్వీస్
User->>Frontend: టైప్ చేస్తోంది "హలో AI!"
Frontend->>API: POST /hello {"message": "హలో AI!"}
Note over API: అభ్యర్థనను ధ్రువీకరిస్తుంది సిస్టమ్ ప్రాంప్ట్ జతచేస్తుంది
API->>AI: ఫార్మాటెడ్ అభ్యర్థనను పంపుతుంది
AI->>API: AI ప్రతిస్పందనను అందిస్తుంది
Note over API: ప్రతిస్పందనను ప్రక్రియ చేస్తుంది సంభాషణను లాగ్ చేస్తుంది
API->>Frontend: {"response": "హలో! నేను ఎలా సహాయం చేయగలను?"}
Frontend->>User: AI సందేశాన్ని ప్రదర్శిస్తుంది
```
**ప్రతి దశ అర్థం చేసుకోవడం:**
1. **యూజర్ ఇంటరాక్షన్**: వ్యక్తి చాట్ ఇంటర్ఫేస్లో టైపు చేస్తారు
2. **ఫ్రాంట్ఎండ్ ప్రాసెసింగ్**: జావాస్క్రిప్ట్ ఇన్పుట్ను JSONగా ఫార్మాట్ చేస్తుంది
3. **API వాలిడేషన్**: FastAPI ద్వారా పిడాంటిక్ మోడల్స్ ఉపయోగించి అభ్యర్థనను ఆటోమేటిక్గా చేకూర్చుకుంటుంది
4. **AI ఇంటిగ్రేషన్**: బ్యాక్ఎండ్ సిస్టమ్ ప్రాంప్ట్ జోడించి AI సేవను పిలుస్తుంది
5. **ప్రతిస్పందన హ్యాండ్లింగ్**: API AI స్పందనను స్వీకరించి అవసరమైతే మార్చుతుంది
6. **ఫ్రాంట్ ఎండ్ ప్రదర్శన**: జావాస్క్రిప్ట్ స్పందనను చాట్ ఇన్టర్ఫేస్లో చూపిస్తుంది
### 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[ఫాస్ట్API రౌటర్]
D --> E[పైడాంటిక్ ధృవీకరణ]
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 ని అసింక్రోనస్ గా చేయాలి)
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 అమలు అర్థం చేసుకోవడం:**
- **Import**: ఆధునిక వెబ్ ఫ్రేమ్వర్క్ ఫంక్షనాలిటీ కోసం FastAPI, డేటా వాలిడేషన్ కోసం Pydantic
- **Create**: సర్వర్ ఎగ్జిక్యూట్ అయ్యేటప్పుడు `/docs`లో ఆటోమేటిక్ API డాక్యుమెంటేషన్
- **Enable**: CORS మధ్యవర్తి సాఫ్ట్వేర్ ఫ్రాంట్ ఎండ్ నుండి వచ్చిన రిక్వెస్ట్లను అనుమతిస్తుంది
- **Define**: ఆటోమేటిక్ అభ్యర్థన/ప్రతిస్పందన వెరిఫికేషన్ మరియు డాక్యుమెంటేషన్ కోసం Pydantic మోడల్స్
- **Use**: మెరుగైన పనితీరుకు అసింక్ ఎండ్పాయింట్లు
- **Implement**: సరైన HTTP స్థితి కోడ్లు, లోపాలను హ్యాండిల్ చేయడానికి HTTPException
- **Include**: పర్యవేక్షణ మరియు డీబగ్గింగ్ కోసం నిర్మిత లాగింగ్
- **Provide**: సేవ స్థితి కోసం హెల్త్ చెక్ ఎండ్పాయింట్
**సాంప్రదాయ ఫ్రేమ్వర్క్లపై FastAPI ముఖ్య ప్రయోజనాలు:**
- **ఆటోమేటిక్ వాలిడేషన్**: Pydantic మోడల్స్ డేటా సమగ్రతను ఖాయం చేస్తాయి
- **ఇంటరాక్టివ్ డాక్స్**: `/docs`కి వెళ్ళి టెస్టబుల్ API డాక్యుమెంటేషన్ పొందండి
- **టైపు సేఫ్టీ**: Python టైప్ సూచనలు రన్టైమ్ లోపాలను నివారిస్తాయి మరియు కోడ్ నాణ్యత మెరుగుపరుస్తాయి
- **ఆసింక్ సపోర్ట్**: సమాంతర అభ్యర్థనలను బ్లాక్ కాకుండా నిర్వహించగలదు
- **పనితీరు**: రియల్ టైమ్ అనువర్తనాల కోసం గణనీయంగా వేగవంతమైన ప్రాసెసింగ్
### CORS అర్థం చేసుకోవటం: వెబ్ భద్రతా గార్డు
CORS (Cross-Origin Resource Sharing) ఒక భవనంలో భద్రతా గార్డు లాంటిది, అతను ఎవరు భవనం ప్రవేశించడానికి అనుమతించబడినవర్వో తనిఖీ చేస్తాడు. ఎందుకు ఇది ముఖ్యం, మరియు మీ అనువర్తనంపై దాని ప్రభావం తెలుసుకుందాం.
#### CORS అంటే ఏమిటి, మరియు అది ఎందుకు ఉంది?
**సమస్య**: ఏదైనా వెబ్సైట్ అనుమతిలేకుండా మీ పక్కన ఉన్న బ్యాంకు వెబ్సైట్కు మీ తరపున అభ్యర్థనలు పంపితే? అది భద్రతా ప్రమాదం! బ్రౌజర్లు డిఫాల్ట్గా "సేమ్-ఓరిజిన్ పాలసీ" ద్వారా దీన్ని నివారిస్తాయి.
**సేమ్-ఓరిజిన్ పాలసీ**: బ్రౌజర్లు వెబ్ పేజిలను మాత్రమే అదే డొమైన్, పోర్టు, ప్రోటోకాల్పైన సైట్ నుంచి లోడ్ అయ్యే అభ్యర్థనలను అనుమతిస్తాయి.
**వాస్తవ ప్రపంచంగా భావించండి**: ఇది అపార్ట్మెంట్ భవన భద్రత వలే – ఒక్కొక్క ఇంటి (అదే మూలం) వారు భవనంలో ప్రవేశం పొందగలరు. మీరు మిత్రుని (వేరు మూలం) సందర్శనకు అనుమతించాలంటే భద్రతా గార్డుకు స్పష్టం చేయాలి.
#### డెవలప్మెంట్ ఎన్విరాన్మెంట్లో CORS
డెవలప్మెంట్ సమయంలో, ఫ్రాంట్ఎండ్ మరియు బ్యాక్ఎండ్ వేరే పోర్ట్లలో నడుస్తాయి:
- ఫ్రాంట్ఎండ్: `http://localhost:3000` (లేదా ఫైల్:// ద్వారా HTML నేరుగా ఓపెన్ చేస్తే)
- బ్యాక్ఎండ్: `http://localhost:5000`
ఇవి ఒకే కంప్యూటర్ లో ఉన్నా "వేరు మూలాలు"గా పరిగణించబడతాయి!
```python
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # ఇది బ్రౌజర్లకు చెబుతుంది: "ఇతర మూలాలు ఈ API కి అభ్యర్థనలు చేయడం సరే"
```
**CORS కాన్ఫిగరేషన్ ప్రాక్టీస్లో ఏమి చేస్తుంది:**
- బ్రౌజర్లకు "ఈ క్రాస్-ఓరిజిన్ అభ్యర్థన అనుమతించబడింది" అని చెబుతూ ప్రత్యేక HTTP హెడర్లను API ప్రతిస్పందనలలో జోడిస్తుంది
- బ్రౌజర్లు అసలు అభ్యర్థన పంపేము ముందు మరల తనిఖీలు చేస్తుంటారు (preflight requests) వాటిని నిర్వహిస్తుంది
- మీ బ్రౌజర్ కన్సోల్ లో "blocked by CORS policy" అనే dreaded లోపం తలెత్తకుండా నిరోధిస్తుంది
#### 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 చేరుకోలేకపోవడం | మీ యాప్ డొమైన్ జోడించండి లేదా జాగ్రత్తగా `*` ఉపయోగించండి |
**ప్రొ ప్రామ్**: మీరు బ్రౌజర్ డెవలపర్ టూల్స్ లో నెట్వర్క్ ట్యాబ్ క్రింద 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 డెవలప్మెంట్ పరిసరాన్ని సెటప్ చేద్దాం. వర్చువల్ ఎన్విరాన్మెంట్లు మనహాటన్ ప్రాజెక్ట్ లో భాగాలాగా - ప్రతి ప్రాజెక్టుకు వేరే వేరే ప్రత్యేకమైన పరికరాలు మరియు ఆధారాలతో మనుగడ ఏర్పరచటం వల్ల విభేదాలు నివారుతాయి.
```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 సెట్టింగ్స్ కు వెళ్లి** → డెవలపర్ సెట్టింగ్స్ → వ్యక్తిగత యాక్సెస్ టోకెన్స్ → టోకెన్స్ (క్లాసిక్)
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 అభ్యర్థనలను నిర్వహించగలదు
- మీ API ఆటోమేటిక్ డాక్స్తో సిద్ధంగా ఉంది: `http://localhost:5000/docs`
#### అన్నీ సరిగ్గా ఉన్నప్పుడు మీరు ఏమి చూడాలి
```bash
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
```
**FastAPI అవుట్పుట్ను అర్థం చేసుకోవడం:**
- **మార్పుల కోసం వాచ్ చేస్తుంది**: అభివృద్ధి కోసం ఆటో రీలోడ్ సక్రియం
- **Uvicorn నడుస్తోంది**: స్వల్ప-కాలిక ASGI సర్వర్ పనిచేస్తోంది
- **రిలోడర్ ప్రాసెస్ ప్రారంభించబడింది**: ఆటోమేటిక్ రీస్టార్ట్ కోసం ఫైల్ వాచర్
- **యాప్ స్టార్టప్ పూర్తయింది**: FastAPI ఆప్ విజయవంతంగా ప్రారంభించబడింది
- **ఇంటరాక్టివ్ డాక్స్ అందుబాటులో ఉన్నాయి**: ఆటో API డాక్యుమెంటేషన్ కోసం `/docs` సందర్శించండి
#### మీ FastAPI ని పరీక్షించే బహుళ శక్తివంతమైన విధానాలు
FastAPI మీ API ను పరీక్షించడానికి అనేక సౌకర్యవంతమైన మార్గాలను అందిస్తుంది, వాటిలో ఆటోమేటిక్ ఇంటరాక్టివ్ డాక్యుమెంటేషన్ కూడా ఉంటుంది:
**విధానం 1: ఇంటరాక్టివ్ API డాక్యుమెంటేషన్ (అనుకూలించబడింది)**
1. మీ బ్రౌజర్లో `http://localhost:5000/docs` కి వెళ్లండి
2. అన్ని ఎండ్పాయింట్లును డాక్యుమెంట్ చేసిన Swagger UI కనిపిస్తుంది
3. `/hello` పై క్లిక్ చేయండి → "Try it out" → ఒక పరీక్ష సందేశం కొరకు ఎంటర్ చేయండి → "Execute"
4. బ్రౌజర్ లోనే సరిగ్గా ఫార్మాట్ చేయబడిన స్పందనను చూడండి
**విధానం 2: ప్రాథమిక బ్రౌజర్ పరీక్ష**
1. ప్రాథమిక ఎండ్పాయింట్ కోసం `http://localhost:5000` కి వెళ్లండి
2. సర్వర్ హెల్త్ తనిఖీ కోసం `http://localhost:5000/health` కి వెళ్లండి
3. ఇది మీ FastAPI సర్వర్ సక్రమంగా నడుస్తున్నదని నిర్ధారిస్తుంది
**విధానం 2: కమాండ్ లైన్ పరీక్ష (అధునాతన)**
```bash
# కర్ల్ తో పరీక్షించండి (లభ్యమైతే)
curl -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 ఎంతటి స్పందన ఇస్తుందో, ఎక్కడ ఎర్రర్లు వస్తున్నాయో సరిగ్గా చూడవచ్చు. ఇది డిబగ్గింగ్ ను వేగవంతం చేస్తుంది.
### GitHub Codespaces కోసం కాన్ఫిగరేషన్: క్లౌడ్ అభివృద్ధి సులభమైంది
GitHub Codespaces అనేది ఒక శక్తివంతమైన క్లౌడ్ అభివృద్ధి కంప్యూటర్ లాంటిది, మీరు ఎక్కడినుండి అయినా బ్రౌజర్ ద్వారా యాక్సెస్ చేసుకోవచ్చు. మీరు Codespaces లో పనిచేస్తున్నట్లయితే, మీ బ్యాక్ఎండ్ను ముందువైపు (ఫ్రంట్ఎండ్) కు యాక్సెస్ చేయడానికి కొన్ని అదనపు దశలను చేయాలి.
#### Codespaces నెట్వర్కింగ్ ని అర్థం చేసుకోవడం
స్థానిక అభివృద్ధి వాతావరణంలో, అన్నీ ఒకే కంప్యూటర్లో నడుస్తాయి:
- బ్యాక్ఎండ్: `http://localhost:5000`
- ఫ్రంట్ఎండ్: `http://localhost:3000` (లేదా file://)
Codespaces లో, మీ అభివృద్ధి వాతావరణం GitHub సర్వర్లలో నడుస్తుంది, అందునా "localhost" యొక్క అర్థం వేరుగా ఉంటుంది. GitHub మీ సేవలకు పబ్లిక్ URLs ను ఆటోమేటిగ్గా సృష్టిస్తుంది, కానీ మీరు వాటిని సరైన రీతిలో కాన్ఫిగర్ చేయాలి.
#### 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 URLs అర్థం చేసుకోవడం
Codespace URLs ఈ విధంగా ఉంటాయి:
```
https://[codespace-name]-[port].app.github.dev
```
**దీనిని కొట్టిచెప్పడం:**
- `codespace-name`: మీ Codespace కి ప్రత్యేక గుర్తింపు (సాధారణంగా మీ యూజర్నేమ్ కూడ ఉంటుంది)
- `port`: మీ సేవ నడుస్తున్న పోర్ట్ నంబర్ (మన FastAPI యాప్ కోసం 5000)
- `app.github.dev`: GitHub యొక్క Codespace అప్లికేషన్ డొమెయిన్
#### మీ 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 vs స్థానిక అభివృద్ధి
| అంశం | స్థానిక అభివృద్ధి | GitHub Codespaces |
|--------|-------------------|-------------------|
| **సెట్టప్ సమయం** | ఎక్కువ (Python, డిపెండెన్సీలు ఇన్స్టాల్ చేయాలి) | వెంటనే (పూర్వనిర్దిష్ట వాతావరణం) |
| **URL యాక్సెస్** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
| **పోర్ట్ కాన్ఫిగరేషన్** | ఆటోమేటిక్ | మాన్యువల్ (పోర్ట్లు పబ్లిక్ చేయాలి) |
| **ఫైల్ నిల్వ** | స్థానిక యంత్రం | GitHub రిపోజిటరీ |
| **కలబంది** | వాతావరణం పంచుకోవడం కష్టం | Codespace లింక్ పంచుకోవడం సులభం |
| **ఇంటర్నెట్ ఆధారిత** | కేవలం AI API కాల్స్ కొరకు | అన్నీ కోసం అవసరం |
#### Codespace అభివృద్ధి చిట్కాలు
**Codespaces లో వాతావరణ మార్పులు**:
మీ `.env` ఫైల్ Codespaces లో అదేవిధంగా పనిచేస్తుంది, కానీ మీరు వాతావరణ మార్పులను డైరెక్ట్ గా కూడా సెటప్ చేయవచ్చు:
```bash
# ప్రస్తుత సెషన్ కోసం వాతావరణ వేరియబుల్ సెట్ చేయండి
export GITHUB_TOKEN="your_token_here"
# లేదా దీర్ఘకాలికానికి మీ .bashrc లో జత చేయండి
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
```
**పోర్ట్ నిర్వహణ**:
- Codespaces మీ అప్లికేషన్ పోర్ట్పై వినికిడి ప్రారంభిస్తే ఆటోమేటిగ్గా గుర్తిస్తుంది
- మీరు సరిగా ఉంటే బహుళ పోర్ట్లను ఒకేసారి ఫార్వర్డ్ చేయవచ్చు (అనంతరం డేటాబేస్ చేర్చితే ఉపయోగకరము)
- Codespace నడుస్తుండగా పోర్టులు యాక్స Achilles అందుబాటులో ఉంటాయి
**అభివృద్ధి పనితీరు**:
1. VS Code లో కోడ్ మార్చండి
2. FastAPI ఆటోమేటిక్ రీలోడ్ అవుతుంది (Uvicorn రీలోడ్ మోడ్ వల్ల)
3. మార్పులు వెంటనే పబ్లిక్ URL ద్వారా పరీక్షించండి
4. అవసరమైతే కమిట్ చేసి పుష్ చేయండి
> 💡 **ప్రో చిట్కా**: అభివృద్ధి సమయంలో మీ Codespace బ్యాక్ఎండ్ URL ను బుక్మార్క్ చేయండి. Codespace పేర్లు స్థిరంగా ఉంటాయి కనుక, మీరు అదే Codespace ఉపయోగిస్తే URL మారదు.
## ఫ్రంట్ఎండ్ చాట్ ఇంటర్ఫేస్ సృష్టించడం: మనుషులు AIతో ఎలా కలుస్తారు
ఇప్పుడు మనం యూజర్ ఇంటర్ఫేస్ ను నిర్మిస్తాము – ఇది ప్రజలు మీ AI సాయ హోదాతో ఎలా సంభాషిస్తారో నిర్ధారిస్తుంది. అసలు iPhone ఇంటర్ఫేస్ డిజైన్ లాగా, క్లిష్ట సాంకేతికతను సహజమైన మరియు సులభంగా ఉపయోగపడే విధంగా తయారు చేయడమే లక్ష్యం.
### ఆధునిక ఫ్రంట్ఎండ్ ఆర్కిటెక్చర్ అర్థం చేసుకోవడం
మన చాట్ ఇంటర్ఫేస్ "సింగిల్ పేజ్ అప్లికేషన్" (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 నమూనాలు ఉంటాయి. ఈ భావనలను అర్థం చేసుకోవడం మీ అభివృద్ధిని మెరుగుపరుస్తుంది:
**క్లాస్-ఆధారిత ఆర్కిటెక్చర్**: మన కోడ్ ను క్లాస్లుగా ఏర్పాటు చేస్తాము, ఇది ఆబ్జెక్టులకు శిల్ప పత్రాల్లా ఉంటుంది
**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 ఎందుకు ముఖ్యం**: మీరు ఫోన్లో మీ చాట్ యాప్ ఎలా ఉందో ఎవరికైనా వివరించాలంటే, "మీదున్నది హెడర్ టైటిల్ తో, conversations కనిపించే ప్రధాన ప్రాంతం, దాని దిగువ భాగంలో సందేశాల టైపు కోసం ఫారం" అని చెప్తారు. సేమాంటిక్ HTML అటువంటి సహజ వివరణకు సరిపోయే ఎలిమెంట్లను వాడుతుంది.
ఇలా ఒక `index.html` సృష్టించండి, దీని నిర్మాణం ఆలోచనాత్మకంగా ఉండాలి:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**ప్రతి HTML ఎలిమెంట్ మరియు దాని ప్రయోజనాన్ని అర్థం చేసుకోండి:**
#### డాక్యుమెంట్ నిర్మాణం
- **``**: బ్రౌజర్కు ఇది ఆధునిక HTML5 అని చెబుతుంది
- **``**: పేజీ భాషను స్క్రీన్ రీడర్లు మరియు అనువాద టూల్స్ కోసం స్పష్టమైనట్లు
- **``**: అంతర్జాతీయ టెక్స్ట్ యొక్క సరిగ్గా అంకిత అక్షర సంకేతకరణ
- **``**: మొబైల్ రెస్పాన్సివ్ కావడానికి జూమ్ మరియు స్కేల్ నియంత్రణ
#### సేమాంటిక్ ఎలిమెంట్లు
- **``**: మెలకువ మరియు వివరణ తో టాప్ సెక్షన్ని స్పష్టం చేస్తుంది
- **``**: ప్రధాన కంటెంట్ ప్రాంతాన్ని సూచిస్తుంది (ఇక్కడ సంభాషణలు జరుగుతాయి)
- **`