Web-Dev-For-Beginners/translations/te/9-chat-project

AIతో చాట్ సహాయకుడిని నిర్మించడం

స్టార్ ట్రెక్‌లో క్రూ సిబ్బంది విమాన నౌక కంప్యూటర్‌తో సాదారణంగా చాటింగ్ చేస్తూ, క్లిష్టమైన ప్రశ్నలు అడిగి, ఆలోచనాపూరితమైన ప్రతిస్పందనలు పొందేవారని గుర్తుతెప్పుకోండి? 1960లలో శుద్ధ శాస్త్ర సంస్థా చిత్రం గా కనిపించినది ఇప్పుడు మీరు ఇప్పటికే తెలుసుకున్న వెబ్ సాంకేతికతల్ని ఉపయోగించి నిర్మించవచ్చు.

ఈ పాఠంలో, HTML, CSS, JavaScript మరియు కొంత బ్యాక్ ఎండ్ సమ్మిళితం ఉపయోగించి AI చాట్ సహాయకుడిని సృష్టిస్తాము. మీరు నేర్చుకుంటున్న అదే నైపుణ్యాలు ఎలా శక్తివంతమైన AI సేవలతో కనెక్ట్ అవుతాయో తెలుసుకుంటారు, అవి సందర్భాన్ని అర్థం చేసుకుని అర్థవంతమైన ప్రతిస్పందనలు రూపొందిస్తాయి.

AIని పెద్ద గ్రంథాలయాన్ని పొందుట వలెనన్ గమనించండి, అది సమాచారం కనుగొనేందుకుగానూ, మీ ప్రత్యేక ప్రశ్నలకు అనుగుణంగా సారాంశ రీతిలో సమాధానాలు రూపొందించగలుగుతుంది. వేల పేజీలను వెతకటానికి బదులు, మీరు ప్రత్యక్ష, సందర్భమయమైన ప్రతిస్పందనలు పొందగలుగుతారు.

సమ్మిళితం ప్రస్తుతానికి మీకు పరిచయమైన వెబ్ సాంకేతికతల ద్వారా జరుగుతుంది. HTML చాట్ ఇంటర్‌ఫేస్‌ను సృష్టిస్తుంది, CSS దృశ్య రూపకల్పనను నిర్వహిస్తుంది, JavaScript వినియోగదారు పరస్పర చర్యలను నిర్వహిస్తుంది మరియు బ్యాక్ ఎండ్ API ప్రతిదీ AI సేవలతో కనెక్ట్ చేస్తుంది. ఇది ఒక సంగీత సంస్థానం వలెనన్ గ భాగాలు కలిసి సింఫనీని రూపొందించడం పోలి ఉంటుంది.

మనం సహజ మానవ చాటింగ్ మరియు యంత్ర ప్రాసెసింగ్ మధ్యకు ఒక పొడవైన బ్రిడ్జ్‌ను నిర్మిస్తున్నారు. మీరు AI సేవల సమ్మిళితాన్ని సాంకేతికంగా అమలు చేయడమే కాకుండా, పరస్పర క్రియలను సహజంగా భావించే డిజైన్ నమూనాలు కూడా నేర్చుకుంటారు.

ఈ పాఠాంతం నాటికి, AI సమ్మిళితం ఒక రహస్య విధానం కాదని మరింత API లాంటిదిగా అనిపిస్తుంది, మీరు నేర్చుకుంటున్న ఆధ్యాత్మిక వెబ్ అభివృద్ధి సూత్రాలతో ChatGPT, Claude వంటివి నింపే ప్రాథమిక నమూనాలను అర్థం చేసుకుంటారు.

⚡ తదుపరి 5 నిమిషాల్లో మీరు చేయగలది

బిజీ డెవలపర్లు కొరకు వేగవంతమైన ప్రారంభ మార్గం

flowchart LR
    A[⚡ 5 నిమిషాలు] --> B[GitHub టోకెన్ పొందండి]
    B --> C[AI ప్లేగ్రౌండ్‌ను పరీక్షించండి]
    C --> D[Python కోడ్‌ను కాపీ చేయండి]
    D --> E[AI ప్రతిస్పందనలను చూడండి]

• 1వ నిమిషం: GitHub Models Playground ను సందర్శించి వ్యక్తిగత యాక్సెస్ టోకెన్ సృష్టించండి
• 2వ నిమిషం: ప్లేగ్రౌండ్ ఇంటర్‌ఫేస్‌లో నేరుగా AI పరస్పర చర్యలను పరీక్షించండి
• 3వ నిమిషం: "Code" ట్యాబ్‌ను క్లిక్ చేసి Python స్నిపెట్‌ను కాపీ చేసుకోండి
• 4వ నిమిషం: మీ టోకెన్‌తో స్థానికంగా కోడ్‌ను రన్ చేయండి: GITHUB_TOKEN=your_token python test.py
• 5వ నిమిషం: మీ స్వంత కోడ్ నుండి మీ మొదటి AI ప్రతిస్పందన రూపొందుతుంటుందని చూడండి

వేగవంతమైన పరీక్ష కోడ్:

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 అనువర్తన అభివృద్ధి ద్వారా మీ నేర్చుకునే ప్రయాణం

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: మీకు అవసరమైన విషయాలకు అనుగుణంగా స్నేహబద్ధమైన మిత్రుడు మీకు ఆసక్తికర విషయాలు చెబుతుంది

graph LR
    A[మీ ప్రశ్న] --> B[AI మోడల్]
    B --> C[పాటర్న్ గుర్తింపు]
    C --> D[విషయ ఉత్పత్తి]
    D --> E[సందర్భానుగుణ ప్రతిస్పందన]
    
    F[ప్రశిక్షణ డేటా<br/>పుస్తకాలు, వ్యాసాలు, వెబ్] --> B

AI మోడల్స్ ఎలా నేర్చుకుంటాయి (సరళీకృత వెర్షన్)

AI మోడల్స్ భారీ డేటాసెట్‌ల ద్వారా నేర్చుకుంటాయి, వాటిలో పుస్తకాలు, వ్యాసాలు, సంభాషణలు వుంటాయి. ఈ ప్రక్రియలో:

• వ్రాయబడిన సంభాషణలో ఆలోచనలు ఎలా నిర్మించబడ్డాయో
• ఏ పదాలు ఎక్కువగా కలిసి వుంటాయో
• సంభాషణలు చాలామంది ఎలా సాగుతాయో
• అధికారికం మరియు సాదారణ కమ్యూనికేషన్ మధ్యలో సందర్భ విభేదాలు

ఇది పురాతన భాషలను డికోడ్ చేసే పురావస్తు శాస్త్రజ్ఞుల విధానం లాంటిది: గ్రామర్, శబ్దకం, సాంస్కృతిక సందర్భాన్ని అర్థం చేసుకోవడానికి వేల ఉదాహరణలను విశ్లేషించి వాటిని ఆధారంగా కొత్త వచనాలను పఠించగలుగుతారు.

GitHub Models ఎందుకు?

మనం GitHub Models ఉపయోగిస్తున్నాము ఒక ప్రాక్టికల్ కారణం కోసం – ఇది మనం స్వంత AI ఇన్‌ఫ్రాస్ట్రక్చర్ ఏర్పాటు చేయాల్సిన అవసరం లేకుండా ఎంటర్‌ప్రైజ్ స్థాయి AIకి ప్రవేశాన్ని ఇవ్వగలదు (ఇప్పుడు మీరు దీన్ని చేయాలనుకోరాదు!). ఇది వాతావరణ API వాడడానికి పోలి ఉంటుంది, మీరు ప్రతి చోట వాతావరణ కేంద్రాలు ఏర్పాటు చేయకుండానే వాతావరణ అంచనాలు పొందగలుగుతారు.

ఇది అసలు "AI-అస్-సర్వీస్", మరియు ఉత్తమమైన విషయం? ప్రారంభించడానికి ఉచితం, అందువలన మీరు ప్రయోగాలు చేసే సమయంలో భారీ బిల్ గురించిన ఆందోళనలు లేదు.

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 ఒక పరీక్ష వేయు వాతావరణంగా పనిచేస్తుంది, అక్కడ మీరు వివిధ AI మోడల్స్‌తో ప్రయోగాలు చేసి వాటి సామర్థ్యాలను అర్థం చేసుకోగలుగుతారు.

🧠 AI అనువర్తన అభివృద్ధి పారిశ్రామిక వాతావరణం

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 కోడ్ తీసుకుంటే దాదాపు ఇలాగే ఉంటుందీ. మొదట కాస్త ఎక్కువగా అనిపించినా, దాన్ని భాగాల వారీగా చూద్దాం:

"""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 సంభాషణలో వివిధ "పాత్రలు" ఉంటాయి, ప్రతి ఒక్కటి ప్రత్యేక ఉద్దేశం కలిగివుంటుంది:

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: పూర్తిగా ప్రయోగాత్మక జాజ్, అనుకోని మార్పులతో (తీవ్రంగా అంచనా వేయలేని)

# చాలా ఊహించదగిన సమాధానాలు (నిజమైన ప్రశ్నల కోసం మంచిది)
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: వివరంగా ఉదాహరణలతో వివరణ

# చిన్నదిగా, సంక్షిప్తంగా సమాధానాలు
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: "నీలం", "మేఘం తూర్పు", "విస్తారమైన", "మారుతున్న", "అందమైన" వంటివి చెప్పొచ్చు

అన్ని పారామితర్ల సమ్మేళనం: వివిధ ఉపయోగాలకు

# వాస్తవమైన, సుసంగత సమాధానాల కోసం (ఉదాహరణకు డాక్యుమెంటేషన్ బాట్)
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
}

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. నిర్దిష్ట సూచనలు: వారు ఏమీ దృష్టి పెట్టాలి?

# ❌ అస్పష్టమైన వ్యవస్థ ప్రాంప్ట్
"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 వ్యక్తిత్వాలను సృష్టిస్తాయో చూద్దాం:

# ఉదాహరణ 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.
"""

సిస్టమ్ ప్రాంప్ట్‌లను ప్రాక్టికల్‌గా చూడడం

ఇది ఒకే ప్రశ్నను వివిధ సిస్టమ్ ప్రాంప్ట్‌లతో పరీక్షించి, నాటకీయ తేడాలను గమనించండి:

ప్రశ్న: "నా వెబ్ అనువర్తనంలో యూజర్ ప్రామాణీకరణ ఎలా నిర్వహించాలి?"

# ఉపాధ్యాయుల ప్రాంప్ట్‌తో:
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కి పూర్వ సమాచారమివ్వడం

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 ఎలా ప్రతిస్పందనలు నిర్మించాలో చెప్పండి

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 ఏం చేయకూడదో นิర్੍ధారించండి

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 సర్వీస్: బాహ్య గణన మరియు ప్రతిస్పందన ఉత్పత్తి
• పరిసర వేరియబుల్స్: భద్రత ఉన్న కాన్ఫిగరేషన్ మరియు సాక్సుల నిల్వ

అభ్యర్థన-ప్రతిస్పందన ప్రవాహం అర్థం చేసుకోవటం

ఒక యూజర్ సందేశం పంపినప్పుడు ఏమి జరుగుతుందో పర్యవేక్షిద్దాం:

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: అభ్యర్థనను ధ్రువీకరిస్తుంది<br/>సిస్టమ్ ప్రాంప్ట్ జతచేస్తుంది
    API->>AI: ఫార్మాటెడ్ అభ్యర్థనను పంపుతుంది
    AI->>API: AI ప్రతిస్పందనను అందిస్తుంది
    Note over API: ప్రతిస్పందనను ప్రక్రియ చేస్తుంది<br/>సంభాషణను లాగ్ చేస్తుంది
    API->>Frontend: {"response": "హలో! నేను ఎలా సహాయం చేయగలను?"}
    Frontend->>User: AI సందేశాన్ని ప్రదర్శిస్తుంది

ప్రతి దశ అర్థం చేసుకోవడం:

1. యూజర్ ఇంటరాక్షన్: వ్యక్తి చాట్ ఇంటర్‌ఫేస్‌లో టైపు చేస్తారు
2. ఫ్రాంట్‌ఎండ్ ప్రాసెసింగ్: జావాస్క్రిప్ట్ ఇన్‌పుట్‌ను JSONగా ఫార్మాట్ చేస్తుంది
3. API వాలిడేషన్: FastAPI ద్వారా పిడాంటిక్ మోడల్స్ ఉపయోగించి అభ్యర్థనను ఆటోమేటిక్‌గా చేకూర్చుకుంటుంది
4. AI ఇంటిగ్రేషన్: బ్యాక్‌ఎండ్ సిస్టమ్ ప్రాంప్ట్ జోడించి AI సేవను పిలుస్తుంది
5. ప్రతిస్పందన హ్యాండ్లింగ్: API AI స్పందనను స్వీకరించి అవసరమైతే మార్చుతుంది
6. ఫ్రాంట్ ఎండ్ ప్రదర్శన: జావాస్క్రిప్ట్ స్పందనను చాట్ ఇన్‌టర్ఫేస్‌లో చూపిస్తుంది

API ఆర్కిటెక్చర్ అర్థం చేసుకోవటం

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": "నమస్తే! నేను ఎలా సహాయం చేయగలను?"}

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 ఫైల్ క్రియేట్ చేయండి:

# 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

ఇవి ఒకే కంప్యూటర్ లో ఉన్నా "వేరు మూలాలు"గా పరిగణించబడతాయి!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # ఇది బ్రౌజర్లకు చెబుతుంది: "ఇతర మూలాలు ఈ API కి అభ్యర్థనలు చేయడం సరే"

CORS కాన్ఫిగరేషన్ ప్రాక్టీస్‌లో ఏమి చేస్తుంది:

• బ్రౌజర్లకు "ఈ క్రాస్-ఓరిజిన్ అభ్యర్థన అనుమతించబడింది" అని చెబుతూ ప్రత్యేక HTTP హెడర్లను API ప్రతిస్పందనలలో జోడిస్తుంది
• బ్రౌజర్లు అసలు అభ్యర్థన పంపేము ముందు మరల తనిఖీలు చేస్తుంటారు (preflight requests) వాటిని నిర్వహిస్తుంది
• మీ బ్రౌజర్ కన్సోల్ లో "blocked by CORS policy" అనే dreaded లోపం తలెత్తకుండా నిరోధిస్తుంది

CORS భద్రత: డెవలప్‌మెంట్ వర్సెస్ ప్రొడక్షన్

# 🚨 అభివృద్ధి: అన్ని మూలాలను అనుమతిస్తుంది (సౌకర్యవంతమైనది కానీ అసురక్షితం)
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 లో సరైన లోపాల నిర్వహణ ఉంటుందో గమనించండి:

# మేము సందేశం అందుకున్నామని నిర్ధారించండి
if not message:
    return jsonify({"error": "Message field is required"}), 400

ప్రధాన వాలిడేషన్ సూత్రాలు:

• అభ్యర్థనలను ప్రాసెస్ చేయకముందు అవసరమైన ఫీల్డ్స్ ఉన్నాయో లేదో తనిఖీ
• JSON ఫార్మాట్‌లో సార్గభరిత లోప సందేశాలు తిరిగి ఇస్తుంది
• సరైన HTTP స్థితి కోడ్‌లు ఉపయోగిస్తుంది (400 తప్పు అభ్యర్థనలకు)
• ఫ్రాంట్ ఎండ్ అభివృద్ధి దారులకు సహాయం చేయడానికి స్ఫష్టమైన ఫీడ్‌బ్యాక్ అందిస్తుంది

మీ బ్యాక్‌ఎండ్ సెటప్ మరియు ప్రారంభం

ఇప్పుడు మన AI ఇంటిగ్రేషన్ మరియు FastAPI సర్వర్ సిద్దంగా ఉన్నప్పుడు, అన్నిది నడిపిద్దాం. సెటప్ ప్రక్రియలో Python ఆధారాలు ఇన్స్టాల్ చేయడం, పరిసర వేరియబుళ్ళను కాన్ఫిగర్ చేయడం, మరియు డెవలప్‌మెంట్ సర్వర్ ప్రారంభించడం ఉంటుంది.

Python పరిసరాల సెటప్

మీ Python డెవలప్‌మెంట్ పరిసరాన్ని సెటప్ చేద్దాం. వర్చువల్ ఎన్విరాన్‌మెంట్లు మనహాటన్ ప్రాజెక్ట్ లో భాగాలాగా - ప్రతి ప్రాజెక్టుకు వేరే వేరే ప్రత్యేకమైన పరికరాలు మరియు ఆధారాలతో మనుగడ ఏర్పరచటం వల్ల విభేదాలు నివారుతాయి.

# మీ బ్యాక్‌ఎండ్ డైరెక్టరీకి నావిగేట్ చేయండి
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 ప్రారంభించకముందే వెబ్ అభివృద్ధిలో ఒక అత్యంత ముఖ్యమైన పాఠం గురించి మాట్లాడుకోవాలి: మీ రహస్యాలను నిజంగా రహస్యంగా ఎలా ఉంచాలి. పరిసర వేరియబుళ్ళు ఒక భద్రత గల ముఠా లాంటివి, వాటిని కేవలం మీ యాప్ మాత్రమే యాక్సెస్ చేయగలదు.

పరిసర వేరియబుళ్ళు అంటే ఏమిటి?

పరిసర వేరియబుళ్ళను ఒక సేఫ్టీ డిపాజిట్ బాక్స్ లాగా ఆలోచించండి – మీరు మీ విలువైన సామగ్రి అక్కడ ఉంచుతారు, మరియు మీకు మాత్రమే (మరియు మీ యాప్‌కు) దాన్ని వెలికి తెప్పడానికి తాళా ఉంది. సెన్సిటివ్ సమాచారాన్ని మీ కోడ్ నేరుగా వేయడం కాకుండా (అన్నీ చూసే అవకాశం ఉన్న), మీరు దాన్ని సురక్షితంగా పరిసరంలో నిల్వ చేస్తారు.

ఇది తేడా:

• తప్పుడు మార్గం: మీ పాస్‌వర్డ్‌ను స్టికీ నోటుపై రాసి మానిటర్ వద్ద ఉంచటం
• సరైన మార్గం: మీ పాస్‌వర్డ్‌ను కేవలం మీరు యాక్సెస్ చేయగల సురక్షిత పాస్‌వర్డ్ మేనేజర్‌లో ఉంచటం

పరిసర వేరియబుళ్ళు ఎందుకు ముఖ్యమైున్నాయో

# 🚨 ఇదాన్ని ఎప్పుడూ చేయకండి - 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 ఫైల్ క్రియేట్ చేయండి. ఈ ఫైల్ మీ రహస్యాలను స్థానికంగా నిల్వ చేస్తుంది:

# .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 ఫైలులో పేస్ట్ చేయండి

# మీ టోకెన్ ఎలా కనిపిస్తుందో ఉదాహరణ (ఇది నకిలీ!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R

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 కి ఏ ఫైళ్లు ట్రాక్ చేయకూడదో గానీ అప్లోడ్ చేయకూడదో చెప్పుతుంది:

# .gitignore - ఈ లైన్లు జోడించండి
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/

ఇది ఎందుకు అత్యవసరం: మీరు .envను .gitignoreలో జోడిస్తే, Git మీ పరిసర ఫైల్‌ను తప్పకుండా ఎగుమతి చేయకుండా నిరోధిస్తాడు, రహస్యాలను GitHubకి తప్పుచేస్తారు.

వేర్వేరు పరిసరాలు, వేర్వేరు రహస్యాలు

ప్రొఫెషనల్ అనువర్తనాలు వేర్వేరు పరిసరాలకు వేర్వేరు API కీలు ఉపయోగిస్తాయి:

# .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 సర్వర్ స్టార్టప్ ప్రక్రియను అర్థం చేసుకోవడం

# పద్ధతి 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

అన్నీ సరిగ్గా ఉన్నప్పుడు మీరు ఏమి చూడాలి

$ 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: కమాండ్ లైన్ పరీక్ష (అధునాతన)

# కర్ల్ తో పరీక్షించండి (లభ్యమైతే)
curl -X POST http://localhost:5000/hello \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello AI!"}'

# ఆశించిన ప్రతిస్పందన:
# {"response": "హలో! నేను మీ AI సహాయకుడు. నేను ఈ రోజు ఎలా సహాయం చేయగలను?"}

విధానం 3: 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తో ఆటోమేటిక్ రీలోడ్ అందిస్తుంది. అంటే మీ కోడ్ మార్చి వెంటనే పరీక్షించొచ్చు, మాన్యువల్ రీస్టార్ట్ అవసరం లేదు.

# హాట్ రిలోడింగ్‌ను స్పష్టంగా ప్రారంభించండి
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True హాట్ రీలోడ్‌ని ప్రారంభిస్తుంది

అభివృద్ధి కోసం లాగింగ్: ఏం జరుగుతుందో అర్థం చేసుకోవడానికి లాగింగ్ జోడించండి:

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. మీ బ్యాక్‌ఎండ్ సర్వర్‌ను ప్రారంభించండి:

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. మీ ఫ్రంట్‌ఎండ్ కాన్ఫిగరేషన్ అప్డేట్ చేయండి:

// మీ ఫ్రంట్‌ఎండ్ 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. బ్రౌజర్ డెవలపర్ టూల్స్ తో పరీక్షించండి:

// బ్రౌజర్ కన్సోల్ ను తెరిచి మీ 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 లో అదేవిధంగా పనిచేస్తుంది, కానీ మీరు వాతావరణ మార్పులను డైరెక్ట్ గా కూడా సెటప్ చేయవచ్చు:

# ప్రస్తుత సెషన్ కోసం వాతావరణ వేరియబుల్ సెట్ చేయండి
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) అంటారు. పాత తరహా విధానం లో ప్రతి క్లిక్ కొత్త పేజీ లోడ్ అయితే, మన యాప్ సడలిగా మరియు వెంటనే అప్డేట్ అవుతుంది:

పాత వెబ్‌సైట్లు: ఒక పుస్తకం చదువుతున్నట్లే – కొత్త పేజీకి మారడం
మన చాట్ యాప్: మీ ఫోన్ వాడుతున్నట్లే – అన్నీ ప్రావహిస్తూ, వెంటనే మారుతూ ఉంటాయి

graph TD
    A[వినియోగదారు సందేశం టైపు చేస్తారు] --> B[జావాస్క్రిప్ట్ ఇన్‌పుట్‌ను పట్టుకున్నది]
    B --> C[డేటా ధృవీకరించి రూపకల్పన]
    C --> D[బ్యాక్‌ఎండ్ API కి పంపండి]
    D --> E[లోడింగ్ స్థితిని ప్రదర్శించు]
    E --> F[AI ప్రత్యుత्तरాన్ని స్వీకరించు]
    F --> G[చాట్ ఇంటర్‌ఫేస్‌ని అప్‌డేట్ చెయ్యి]
    G --> H[తదుపరి సందేశం కోసం సిద్ధంగా ఉన్నది]

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 స్పందనల ఆధారంగా వెబ్‌పేజీ కంటెంట్‌ను డైనమిక్ గా అప్‌డేట్ చేస్తుంది

ప్రాజెక్ట్ నిర్మాణం సెటప్

క్రింద చూపిన నిర్మాణంతో ఒక ఫ్రంట్‌ఎండ్ డైరెక్టరీ సృష్టించండి:

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 సృష్టించండి, దీని నిర్మాణం ఆలోచనాత్మకంగా ఉండాలి:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat Assistant</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="chat-container">
        <header class="chat-header">
            <h1>AI Chat Assistant</h1>
            <p>Ask me anything!</p>
        </header>
        
        <main class="chat-messages" id="messages" role="log" aria-live="polite">
            <!-- Messages will be dynamically added here -->
        </main>
        
        <form class="chat-form" id="chatForm">
            <div class="input-group">
                <input 
                    type="text" 
                    id="messageInput" 
                    placeholder="Type your message here..." 
                    required
                    aria-label="Chat message input"
                >
                <button type="submit" id="sendBtn" aria-label="Send message">
                    Send
                </button>
            </div>
        </form>
    </div>
    <script src="app.js"></script>
</body>
</html>

ప్రతి HTML ఎలిమెంట్ మరియు దాని ప్రయోజనాన్ని అర్థం చేసుకోండి:

డాక్యుమెంట్ నిర్మాణం

• <!DOCTYPE html>: బ్రౌజర్‌కు ఇది ఆధునిక HTML5 అని చెబుతుంది
• <html lang="en">: పేజీ భాషను స్క్రీన్ రీడర్లు మరియు అనువాద టూల్స్ కోసం స్పష్టమైనట్లు
• <meta charset="UTF-8">: అంతర్జాతీయ టెక్స్ట్ యొక్క సరిగ్గా అంకిత అక్షర సంకేతకరణ
• <meta name="viewport"...>: మొబైల్ రెస్పాన్సివ్ కావడానికి జూమ్ మరియు స్కేల్ నియంత్రణ

సేమాంటిక్ ఎలిమెంట్లు

• <header>: మెలకువ మరియు వివరణ తో టాప్ సెక్షన్‌ని స్పష్టం చేస్తుంది
• <main>: ప్రధాన కంటెంట్ ప్రాంతాన్ని సూచిస్తుంది (ఇక్కడ సంభాషణలు జరుగుతాయి)
• <form>: యూజర్ ఇన్‌పుట్ కోసం సేమాంటిక్ పద్ధతిలో సరైనది, కీబోర్డ్ నావిగేషన్ సులభతరం

యాక్ససిబిలిటీ లక్షణాలు

• role="log": స్క్రీన్ రీడర్లకు ఇది సందర్భక్రమంలో సందేశాల లాగ్ అని తెలియజేస్తుంది
• aria-live="polite": కొత్త సందేశాలను స్క్రీన్ రీడర్లకు మధ్యలో విఘటన లేకుండా తెలియజేస్తుంది
• aria-label: ఫారం కంట్రోల్స్ కోసం వివరణాత్మక లేబుళ్లను అందిస్తుంది
• required: వినియోగదారులు సందేశం ఎంటర్ చేయడానికి ముందు బ్రౌజర్ ధృవీకరిస్తుంది

CSS మరియు JavaScript సమీకరణ

• class అట్రిబ్యూట్లు: CSS కోసం శైలీకరించేందుకు హుక్స్ అందిస్తాయి (ఉదా: chat-container, input-group)
• id అట్రిబ్యూట్లు: JavaScript కు నిర్దిష్ట ఎలిమెంట్లు కనుగొనడానికి సహాయం
• స్క్రిప్ట్ స్థానం: JavaScript ఫైల్ చివర లోడ్ అవుతుంది, కాబట్టి HTML ముందుగా లోడ్ అవుతుంది

ఈ నిర్మాణం ఎందుకు పని చేస్తుంది:

• లాజికల్ ఫ్లో: హెడర్ → ప్రధాన కంటెంట్ → ఇన్‌పుట్ ఫారం సహజ చదువు క్రమంతో సరిపోతుంది
• కీబోర్డ్ యాక్ససిబుల్: యూజర్లు అన్ని ఇంటరాక్టివ్ ఎలిమెంట్లలో టాబ్ చేయవచ్చు
• స్క్రీన్ రీడర్ స్నేహపూర్వకమైన: దృష్టిహీనులకు క్లియర్ ల్యాండ్మార్కులు మరియు వివరణలు
• మొబైల్ రెస్పాన్సివ్: viewport మెటా ట్యాగ్ రెస్పాన్సివ్ డిజైన్ నింపుతుంది
• ప్రోగ్రెసివ్ ఎन्हాన్స్‌మెంట్: CSS లేదా JavaScript లో లోడ్ విఫలమైతే కూడా పని చేస్తుంది

ఇంటరాక్టివ్ JavaScript జోడించడం: ఆధునిక వెబ్ అప్లికేషన్ తర్కం

ఇప్పుడు మన చాట్ ఇంటర్‌ఫేస్‌ను జివంతం చేసే జావాస్క్రిప్ట్‌ను రూపొందిద్దాం. మీరు వృత్తి వైవిధ్య వెబ్ డెవలప్మెంట్‌లో చూడబోయే ఆధునిక జావాస్క్రిప్ట్ ప్యాటర్న్స్‌ను ఉపయోగిస్తాం, అందులో ES6 తరగతులు, async/await, మరియు ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ ఉంటాయి.

ఆధునిక జావాస్క్రిప్ట్ నిర్మాణాన్ని అర్థం చేసుకోవడం

ప్రాసీజ్రల్ కోడ్ (క్రమంగా నడిచే ఫంక్షన్‌ల సిరీస్) రాయడంనాటికంటే, మనం తరగతి ఆధారిత నిర్మాణం సృష్టిస్తాం. తరగతి అనగా ఆబ్జెక్టులు సృష్టించడానికి బ్లూప్రింట్ లా ఉంటుంది – ఇలాగే ఒక ఆర్కిటెక్ట్ బ్లూప్రింట్ ని ఉపయోగించి అనేక ఇళ్లను నిర్మించవచ్చు.

వెబ్ అప్లికేషన్‌ల కోసం తరగతులు ఎందుకు ఉపయోగిస్తారు?

• సంస్థీకరణ: అన్ని సంబంధిత ఫంక్షనాలిటీలను ఒక చోట సమూహపరచడం
• పునర్వినియోగం: ఒకే పేజీలో అనేక చాట్ ఉదాహరణలను సృష్టించవచ్చు
• నిర్వహణసులభత: నిర్దిష్ట ఫీచర్లను డీబగ్ చేయడం మరియు మార్చడం సులభం
• వృత్తిపరమైన ప్రమాణం: ఈ ప్యాటర్న్ React, Vue, Angular లాంటి ఫ్రేమ్‌వర్క్స్‌లో ఉపయోగిస్తారు

ఈ ఆధునిక, బాగా నిర్మించిన జావాస్క్రిప్ట్‌తో app.js సృష్టించండి:

// app.js - ఆధునిక చాట్ అప్లికేషన్ లాజికా

class ChatApp {
    constructor() {
        // మాడిఫై చేయాల్సిన DOM అంశాల రిఫరెన్సులను పొందండి
        this.messages = document.getElementById("messages");
        this.form = document.getElementById("chatForm");
        this.input = document.getElementById("messageInput");
        this.sendButton = document.getElementById("sendBtn");
        
        // మీ బ్యాక్‌ఎండ్ URL ఇక్కడ కాన్ఫిగర్ చేయండి
        this.BASE_URL = "http://localhost:5000"; // మీ వాతావరణానికి ఇది అప్‌డేట్ చేయండి
        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
        
        // చాట్ యాప్ సృష్టించినప్పుడు ఈవెంట్ శ్రోతలను సెట్ చేయండి
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        // ఫారం సమర్పణ కోసం వినిపించండి (యూజర్ Send క్లిక్ చేసినప్పుడు లేదా Enter నొక్కినప్పుడు)
        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
        
        // ఇన్‌పుట్ ఫీల్డ్‌లో Enter కీకి కూడా వినిపించండి (మంచి UX కోసం)
        this.input.addEventListener("keypress", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                this.handleSubmit(e);
            }
        });
    }
    
    async handleSubmit(event) {
        event.preventDefault(); // ఫారం పేజీని రిఫ్రెష్ చేయకుండా నిరోధించండి
        
        const messageText = this.input.value.trim();
        if (!messageText) return; // ఖాళీ సందేశాలు పంపొద్దు
        
        // ఏదైనా జరుగుతోందని యూజర్‌కి ఫీడ్బ్యాక్ ఇవ్వండి
        this.setLoading(true);
        
        // యూజర్ సందేశాన్ని వెంటనే చాట్‌లో జోడించండి (ఆశావాదక UI)
        this.appendMessage(messageText, "user");
        
        // యూజర్ తదుపరి సందేశం టైప్ చేర్పు కోసం ఇన్‌పుట్ ఫీల్డ్ క్లియర్ చేయండి
        this.input.value = '';
        
        try {
            // AI API ని కాల్ చేసి స్పందన కోసం వేచి ఉండండి
            const reply = await this.callAPI(messageText);
            
            // AI స్పందనను చాట్‌లో చేర్చండి
            this.appendMessage(reply, "assistant");
        } catch (error) {
            console.error('API Error:', error);
            this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
        } finally {
            // విజయవంతమయినా లేదా విఫలమయినా ఇంటర్‌ఫేస్ మళ్లీ సಕ್ರియం చేయండి
            this.setLoading(false);
        }
    }
    
    async callAPI(message) {
        const response = await fetch(this.API_ENDPOINT, {
            method: "POST",
            headers: { 
                "Content-Type": "application/json" 
            },
            body: JSON.stringify({ message })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data.response;
    }
    
    appendMessage(text, role) {
        const messageElement = document.createElement("div");
        messageElement.className = `message ${role}`;
        messageElement.innerHTML = `
            <div class="message-content">
                <span class="message-text">${this.escapeHtml(text)}</span>
                <span class="message-time">${new Date().toLocaleTimeString()}</span>
            </div>
        `;
        
        this.messages.appendChild(messageElement);
        this.scrollToBottom();
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    scrollToBottom() {
        this.messages.scrollTop = this.messages.scrollHeight;
    }
    
    setLoading(isLoading) {
        this.sendButton.disabled = isLoading;
        this.input.disabled = isLoading;
        this.sendButton.textContent = isLoading ? "Sending..." : "Send";
    }
}

// పేజీ లోడ్‌ అయ్యే సమయంలో చాట్ అప్లికేషన్‌ను ప్రారంభించండి
document.addEventListener("DOMContentLoaded", () => {
    new ChatApp();
});

ప్రతి జావాస్క్రిప్ట్ కాన్సెప్ట్ అర్థం చేసుకోవడం

ES6 తరగతి నిర్మాణం:

class ChatApp {
    constructor() {
        // మీరు కొత్త ChatApp ఉదాహరణను సృష్టించినప్పుడు ఇది నడుస్తుంది
        // మీ చాట్ కోసం ఇది "సెట్టప్" ఫంక్షన్ లాగా ఉంటుంది
    }
    
    methodName() {
        // మెథడ్స్ అనేవి తరగతికి చెందే ఫంక్షన్‌లు
        // అవి "this" ను ఉపయోగించి తరగతి లక్షణాలకు ప్రవేశించవచ్చు
    }
}

Async/Await ప్యాటర్న్:

// పాత విధానం (కాల్‌బ్యాక్ హెల్):
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// ఆధునిక విధానం (అసింక్/అవేట్):
try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error(error);
}

ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్: ఏదైనా జరిగింది లేదా లేదన్నది సజీవంగా తనిఖీ చేయడం కాకుండా, మనం ఈవెంట్ల కోసం "వినకం" చేస్తాం:

// ఫారమ్ సమర్పించినపుడు, handleSubmit ను నడిపించండి
this.form.addEventListener("submit", (e) => this.handleSubmit(e));

// ఎంటర్ కీ నొక్కినపుడు కూడా handleSubmit ను నడిపించండి
this.input.addEventListener("keypress", (e) => { /* ... */ });

DOM మానిప్యులేషన్:

// కొత్త మూలకాలు సృష్టించండి
const messageElement = document.createElement("div");

// వాటి లక్షణాలను మార్చండి
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";

// పేజీకి జోడించండి
this.messages.appendChild(messageElement);

భద్రత మరియు ఉత్తమ ప్రారంబాలు

XSS నివారణ:

escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;  // ఇది ఆటోమేటిక్‌గా HTML ను తప్పిస్తుంది
    return div.innerHTML;
}

ఇది ఎందుకు ముఖ్యం: యూజర్ <script>alert('hack')</script> టైప్ చేస్తే, ఈ ఫంక్షన్ అది కోడ్‌గా అమలవ్వకుండా టెక్స్ట్‌లా చూపిస్తుంది.

దోషాల నిర్వహణ:

try {
    const reply = await this.callAPI(messageText);
    this.appendMessage(reply, "assistant");
} catch (error) {
    // యాప్ బ్రేక్ కాకుండా వినియోగదారులకు స్నేహపూర్వకమైన లోపాన్ని చూపించండి
    this.appendMessage("Sorry, I'm having trouble...", "error");
}

యూజర్ అనుభవ దృష్టి కోణం:

• ఆప్టిమిస్టిక్ UI: యూజర్ సందేశాన్ని వెంటనే జత చేయండి, సర్వర్ స్పందన కోసం వేచిచూడకండి
• లోడింగ్ స్థితులు: బటన్లను డిసేబుల్ చేసి, "Sending..." చూపించండి
• ఆటో-స్క్రోల్: తాజా సందేశాలు కనిపించ도록 ఉంచండి
• ఇన్‌పుట్ వెరిఫికేషన్: ఖాళీ సందేశాలు పంపవద్దు
• కీబోర్డ్ షార్ట్‌కట్‌లు: ఎంటర్ కీ ఇన్పుట్ పంపేలా పనిచేస్తుంది (యథార్థ చాట్లా)

అప్లికేషన్ ప్రవాహం అర్థం చేసుకోవడం

1. పేజీ లోడ్ అవుతుంది → DOMContentLoaded ఈవెంట్ వస్తుంది → new ChatApp() సృష్టించబడుతుంది
2. కన్స్ట్రక్టర్ నడుస్తుంది → DOM ఎలిమెంట్లను పొందుతుంది → ఈవెంట్ లిసనర్స్ సెట్ చేస్తుంది
3. యూజర్ సందేశం టైప్ చేస్తుంది → ఎంటర్ లేదా సेंड్ క్లిక్ చేస్తే → handleSubmit నడుస్తుంది
4. handleSubmit → ఇన్‌పుట్ వెరిఫై చేస్తుంది → లోడింగ్ చూపిస్తుంది → API పిలుస్తుంది
5. API స్పందిస్తుంది → AI సందేశం చాట్‌లో జత చేస్తుంది → ఇంటర్‌ఫేస్ రీ-ఎనేబుల్ అవుతుంది
6. తదుపరి సందేశానికి సిద్ధం → యూజర్ చాట్ కొనసాగించవచ్చు

ఈ నిర్మాణం స్కేలబుల్ – సందేశం ఎడిట్ చేయడం, ఫైల్ అప్లోడ్స్ లేదా బహుళ సంభాషణ థ్రెడ్‌లు వంటి ఫీచర్లను సహజంగానే జోడించవచ్చు కోర్ స్ట్రక్చర్ రీరైట్ చేయకుండా.

🎯 పాఠశాల పరీక్ష: ఆధునిక ఫ్రంట్ ఎండ్ నిర్మాణం

నిర్మాణం అర్థం చేసుకోవడం: మీరు ఆధునిక జావాస్క్రిప్ట్ ప్యాటర్న్స్ ఉపయోగించి పూర్తి సింగిల్ పేజ్ అప్లికేషన్ ను అమలు చేశారు. ఇది వృత్తి స్థాయి ఫ్రంట్ ఎండ్ డెవలప్‌మెంట్ ని సూచిస్తుంది.

ప్రధాన కాన్సెప్టులు పూర్తయ్యాయి:

• ES6 తరగతి నిర్మాణం: వ్యవస్థీకృత, నిర్వహణ సులభమైన కోడ్ స్ట్రక్చర్
• Async/Await ప్యాటర్న్స్: ఆధునిక అసంక్రోనస్ ప్రోగ్రామింగ్
• ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్: ప్రతిస్పందించే యూజర్ ఇంటర్‌ఫేస్ డిజైన్
• భద్రత ఉత్తమ పద్ధతులు: XSS నివారణ, ఇన్‌పుట్ వెరిఫికేషన్

దిగ్గజ అనుసంధానం: మీరు నేర్చుకున్న ప్యాటర్న్స్ (తరగతి ఆధారిత నిర్మాణం, అసంక్రోనస్ ఆపరేషన్స్, DOM మానిప్యులేషన్) ఆధునిక React, Vue, Angular వంటి ఫ్రేమ్‌వర్క్స్ యొక్క ప్రాథమికమైనవి. మీరు ఉత్పత్తి అప్లికేషన్లలో ఉపయోగించే ఆర్కిటెక్చరల్ ఆలోచనలతో నిర్మిస్తున్నారు.

పరిశీలన ప్రశ్న: ఈ చాట్ అప్లికేషన్‌ను బహుళ సంభాషణలు లేదా యూజర్ ధృవీకరణను నిర్వహించేటలా ఎలా విస్తరించేది? ఆర్కిటెక్చర్‌లో ఏ మార్పులు అవసరమవుతాయ్ మరియు తరగతి నిర్మాణం ఎలా అభివృద్ధి చెందుతుంది?

మీ చాట్ ఇంటర్‌ఫేస్‌ను డిజైన్ చేయడం

ఇప్పుడు CSS తో ఆధునిక, దృష్టిని ఆకర్షించే చాట్ ఇంటర్‌ఫేస్‌ను సృష్టిద్దాం. మంచి స్టైలింగ్ మీ అప్లికేషన్‌ను వృత్తి స్థాయిగా భావింపజేస్తుంది మరియు యూజర్ అనుభవాన్ని మెరుగుపరుస్తుంది. మనం ఆధునిక CSS ఫీచర్లు, ఫ్లెక్స్బాక్స్, CSS గ్రిడ్, మరియు కస్టమ్ ప్రాపర్టీలు, రెస్పాన్సివ్, యాక్ససిబుల్ డిజైన్ కోసం ఉపయోగిస్తాం.

ఈ సమగ్ర శైలులతో styles.css సృష్టించండి:

/* styles.css - Modern chat interface styling */

:root {
    --primary-color: #2563eb;
    --secondary-color: #f1f5f9;
    --user-color: #3b82f6;
    --assistant-color: #6b7280;
    --error-color: #ef4444;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.chat-container {
    width: 100%;
    max-width: 800px;
    height: 600px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    text-align: center;
}

.chat-header h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.chat-header p {
    opacity: 0.9;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--secondary-color);
}

.message {
    display: flex;
    max-width: 80%;
    animation: slideIn 0.3s ease-out;
}

.message.user {
    align-self: flex-end;
}

.message.user .message-content {
    background: var(--user-color);
    color: white;
    border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
}

.message.assistant {
    align-self: flex-start;
}

.message.assistant .message-content {
    background: white;
    color: var(--text-primary);
    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
    border: 1px solid #e2e8f0;
}

.message.error .message-content {
    background: var(--error-color);
    color: white;
    border-radius: var(--border-radius);
}

.message-content {
    padding: 12px 16px;
    box-shadow: var(--shadow);
    position: relative;
}

.message-text {
    display: block;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-time {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

.chat-form {
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

#messageInput {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

#messageInput:focus {
    border-color: var(--primary-color);
}

#messageInput:disabled {
    background: #f8fafc;
    opacity: 0.6;
    cursor: not-allowed;
}

#sendBtn {
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 80px;
}

#sendBtn:hover:not(:disabled) {
    background: #1d4ed8;
}

#sendBtn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .chat-container {
        height: calc(100vh - 20px);
        border-radius: 8px;
    }
    
    .message {
        max-width: 90%;
    }
    
    .input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    #messageInput {
        width: 100%;
    }
    
    #sendBtn {
        width: 100%;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .message {
        animation: none;
    }
    
    * {
        transition: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .chat-container {
        background: #1e293b;
        color: #f1f5f9;
    }
    
    .chat-messages {
        background: #0f172a;
    }
    
    .message.assistant .message-content {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }
    
    .chat-form {
        background: #1e293b;
        border-color: #475569;
    }
    
    #messageInput {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }
}

CSS నిర్మాణం అర్థం చేసుకోవడం:

• వినియోగం CSS కస్టమ్ ప్రాపర్టీస్ (వెరియబుల్స్) సమసమాయిక థీమింగ్ మరియు సులభ నిర్వహణ కొరకు
• అమలు ఫ్లెక్స్బాక్స్ లేఅవుట్ రెస్పాన్సివ్ డిజైన్ మరియు సరైన అలైన్‌మెంట్ కొరకు
• సమaves* సందేశం దర్శనానికి సాఫ్ట్ యానిమేషన్లు, ఉంటూ కానీ దృష్టి బదిలీ కాకుండా
• నివేదన యూజర్ సందేశాలు, AI ప్రతిస్పందనలు, లోపాల స్టేట్లు మధ్య దృశ్య భేదాలు
• భాగస్వామ్యం డెస్క్‌టాప్ మరియు మొబైల్ పరికరాల్లో పనిచేసే రెస్పాన్సివ్ డిజైన్
• గమనిక హ్రాసమైన మోషన్ ప్రాధాన్యతలు మరియు సరైన కాన్ట్రాస్ట్ రేషియోస్ తో యాక్ససిబిలిటీ
• ఆఫర్ డార్క్ మోడ్ సరిపోలిక యూజర్ సిస్టమ్ ప్రాధాన్యతల ఆధారంగా

మీ బ్యాక్‌ఎండ్ URL ని కాన్ఫిగర్ చేయడం

చివరి దశ, జావాస్క్రిప్ట్‌లో BASE_URLని మీ బ్యాక్‌ఎండ్ సర్వర్‌కు సరిపడేలా నవీకరించడం:

// స్థానిక అభివృద్ధికి
this.BASE_URL = "http://localhost:5000";

// GitHub Codespaces కోసం (మీ అసలు URL తో మార్చండి)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

మీ బ్యాక్‌ఎండ్ URL నిర్ణయించడం:

• లోకల్ డెవలప్‌మెంట్: ఫ్రంట్ ఎండ్ మరియు బ్యాక్ ఎండ్ రెండూ స్థానికంగా నడుస్తే http://localhost:5000 ఉపయోగించండి
• Codespaces: పోర్ట్ 5000 ని పబ్లిక్ చేయడానంతరం పోర్ట్స్ ట్యాబ్‌లో మీ బ్యాక్‌ఎండ్ URL కనిపిస్తుంది
• ప్రొడక్షన్: హోస్టింగ్ సర్వీస్‌కి మీ అసలు డొమైన్‌తో ఇన్‌స్టాల్ చేసినప్పుడు మార్చండి

💡 పరీక్ష సూచన: మీ బ్యాక్‌ఎండ్‌ను ప్రత్యక్షంగా బ్రౌజర్‌లో రూట్ URLలోకి వెళ్లి పరీక్షించవచ్చు. మీ FastAPI సర్వర్ యొక్క స్వాగత సందేశం కనిపించాలి.

పరీక్ష మరియు డిప్లాయ్‌మెంట్

ఇప్పుడు మీకు ఫ్రంట్ ఎండ్ మరియు బ్యాక్ ఎండ్ రాబోయిన భాగాలు ఉన్నాయి, అవి కలిసి పనిచేస్తున్నాయా అని పరీక్షిద్దాం, మరియు ఇతరులతో మీ చాట్ అసిస్టెంట్‌ను పంచుకోవడానికి డిప్లాయ్‌మెంట్ ఎంపికలను పరిశీలిద్దాం.

లోకల్ టెస్టింగ్ వర్క్‌ఫ్లో

మీ పూర్తి అప్లికేషన్‌ని పరీక్షించేందుకు ఈ దశలను అనుసరించండి:

graph TD
    A[బ్యాక్ఎండ్ సర్వర్ ప్రారంభించండి] --> B[పర్యావరణ వేరియబుల్స్‌ను కన్ఫిగర్ చేయండి]
    B --> C[API ఎండ్‌పాయింట్లను పరీక్షించండి]
    C --> D[బ్రౌజర్‌లో ఫ్రంట్‌ఎండ్ తెరవండి]
    D --> E[చాట్ పనితీరును పరీక్షించండి]
    E --> F[ఏమైనా సమస్యలను డీబగ్ చేయండి]

దశల వారీగా పరీక్షా ప్రక్రియ:

1. మీ బ్యాక్ ఎండ్ సర్వర్‌ను ప్రారంభించండి:

   cd backend
   source venv/bin/activate  # లేదా Windowsలో venv\Scripts\activate
   python api.py
   

2. API పనిచేస్తుందో లేదో ధృవీకరించండి:

   • బ్రౌజర్‌లో http://localhost:5000 ఓపెన్ చేయండి
   • మీ FastAPI సర్వర్ నుండి స్వాగత సందేశం కనిపించాలి

3. మీ ఫ్రంట్ ఎండ్ ఓపెన్ చేయండి:

   • మీ ఫ్రంట్ ఎండ్ డైరెక్టరీకి వెళ్లి
   • index.html ను మీ వెబ్ బ్రౌజర్‌లో ఓపెన్ చేయండి
   • లేదా బెటర్ డెవలప్‌మెంట్ అనుభవానికి VS Code యొక్క లైవ్ సర్వర్ ఎక్స్‌టెన్షన్ ఉపయోగించండి

4. చాట్ ఫంక్షనాలిటీని పరీక్షించండి:

   • ఇన్‌పుట్ ఫీల్డ్‌లో సందేశం టైప్ చేయండి
   • "Send" క్లిక్ చేయండి లేదా ఎంటర్ నొక్కండి
   • AI సరైన ప్రతిస్పందన ఇస్తుందో చూసుకోండి
   • జావాస్క్రిప్ట్ లోపాలు ఉన్నాయా బ్రౌజర్ కన్సోల్ ద్వారా తనిఖీ చేయండి

సాధారణ సమస్యలకు పరిష్కారాలు

సమస్య	లక్షణాలు	పరిష్కారం
CORS లోపం	ఫ్రంట్ ఎండ్ బ్యాక్ ఎండ్‌కి చేరలేకపోవడం	FastAPI CORSMiddleware సరిగ్గా కాన్ఫిగర్ చేయబడిందా చూడండి
API కీ లోపం	401 Unauthorized స్పందనలు	GITHUB_TOKEN వాతావరణ మారు దశ నిర్ధారించండి
కనెక్షన్ త్యజనము	ఫ్రంట్ ఎండ్‌లో నెట్‌వర్క్ లోపాలు	బ్యాక్ ఎండ్ URL పరిశీలించి Flask సర్వర్ నడుస్తోందా చూడండి
AI స్పందన లేనితనం	ఖాళీ లేదా లోపపరిచే స్పందనలు	API క్వోటా లేదా ధృవీకరణ సమస్యల కోసం బ్యాక్ ఎండ్ లాగ్స్ చూడండి

సాధారన డీబగ్గింగ్ దశలు:

• బ్రౌజర్ డెవలపర్ టూల్స్ కన్సోల్లో జావాస్క్రిప్ట్ లోపాలు తనిఖీ చేయండి
• నెట్‌వర్క్ ట్యాబ్ లో API అభ్యర్థనలు విజయవంతమయినాయా విమర్శించండి
• బ్యాక్ ఎండ్ టెర్మినల్ అవుట్‌పుట్ లో పాథాన్ లోపాలు లేదా API సమస్యలు గమనించండి
• పరిసర వేరియబుల్స్ సరిగ్గా లోడ్ అయ్యాయా నిర్ధారించండి

📈 మీ AI అప్లికేషన్ అభివృద్ధి నైపుణ్యం సమయం

timeline
    title పూర్తి AI అప్లికేషన్ అభివృద్ధి ప్రయాణం
    
    section AI ఆధారాలు
        Generative AI ను అర్థం చేసుకోవడం
            : నమూనా గుర్తింపు సంయోజనాలను అవగాహన చేసుకోండి
            : AI పారామీటర్ నియంత్రణలో నిపుణులు అవ్వండి
            : ప్రాంప్ట్ ఇంజనీరింగ్ సాంకేతికతలను నేర్చుకోండి
        
        GitHub మోడల్స్ సమగ్రత
            : AI సేవా వేదికలను నావిగేట్ చేయండి
            : సురక్షితంగా ప్రమాణీకరణను నిర్వహించండి
            : మోడల్ పారామీటర్లను ఆప్టిమైజ్ చేయండి
    
    section బ్యాక్ ఎండ్ అభివృద్ధి
        Python API వాస్తవికీరణ
            : FastAPI అప్లికేషన్‌లను నిర్మించండి
            : అసంక్రామిక ఆపరేషన్లను అమలు చేయండి
            : సురక్షిత ఎండ్‌పాయింట్లను సృష్టించండి
        
        AI సేవల సమగ్రత
            : బాహ్య AI API లకు కనెక్ట్ అవ్వండి
            : రేట్ పరిమితులను నిర్వహించండి
            : లోపాల సమీకరణలను అమలు చేయండి
    
    section ఫ్రంట్ ఎండ్ నైపుణ్యం
        ఆధునిక JavaScript నమూనాలు
            : ES6 క్లాసు నిర్మాణంలో నైపుణ్యం పొందండి
            : అసంక్రామిక/అవైట్ ఫ్లోలను అమలు చేయండి
            : ప్రతిస్పందన ఇంటర్ఫేస్‌లను నిర్మించండి
        
        రియల్ టైమ్ వినియోగదారుల అనుభవం
            : డైనమిక్ ఛాట్ ఇంటర్ఫేస్‌లను సృష్టించండి
            : లోడ్ అవుతున్న స్థితులను నిర్వహించండి
            : వినియోగదారుల పరస్పర చర్యలను ఆప్టిమైజ్ చేయండి
    
    section ఉత్పత్తి సన్నాహకత
        భద్రత & పనితీరు
            : సురక్షిత టోకెన్ నిర్వహణను అమలు చేయండి
            : XSS దుర్వినియోగాలను నివారించండి
            : API పనితీరును ఆప్టిమైజ్ చేయండి
        
        ప్రొఫెషనల్ డిప్లాయ్‌మెంట్
            : స్కేలబుల్ వాస్తవికీరణలను రూపొందించండి
            : పరిరక్షించదగిన కోడ్‌ను రూపొందించండి
            : అభివృద్ధి ప్రక్రియలను డాక్యుమెంట్ చేయండి

🎓 డిగ్రీ సాధన: మీరు ఆధునిక AI అసిస్టెంట్స్‌ని శక్తివంతం చేసే అదే సాంకేతికతలు మరియు నిర్మాణపు నమూనాలను ఉపయోగించి పూర్తి AI-పవర్డెడ్ అప్లికేషన్‌ని విజయవంతంగా నిర్మించారు. ఈ నైపుణ్యాలు సంప్రదాయ వెబ్ డెవలప్‌మెంట్ మరియు ఆధునిక AI సమన్వయంతో కూడిన అవగాహనను సూచిస్తాయి.

🔄 తదుపరి స్థాయి సామర్థ్యాలు:

• అధునిక AI ఫ్రేమ్‌వర్క్‌లు (LangChain, LangGraph) అన్వేషణకు సిద్ధం
• బహుముఖ AI అప్లికేషన్లు (టెక్స్ట్, ఇమేజ్, వాయిస్) సృష్టించడానికి సన్నద్ధం
• వెక్టర్ డేటాబేస్‌లు మరియు రిట్రీవల్ సిస్టమ్స్ అమలు చేయడానికి సామర్థ్యం
• మెషీన్ లెర్నింగ్ మరియు AI మోడల్ ఫైన్-ట్యూనింగ్‌కు పునాదులు సెట్

GitHub Copilot ఏజెంట్ సవాలు 🚀

Agent మోడ్ ఉపయోగించి ఈ సవాలను పూర్తి చేయండి:

వివరణ: సంభాషణ చరిత్ర మరియు సందేశ ధృవపత్రతని జోడించడం ద్వారా చాట్ అసిస్టెంట్‌ను మెరుగుపరచండి. ఈ సవాల ద్వారా మీరు చాట్ అప్లికేషన్‌లలో స్టేట్‌ను ఎలా నిర్వహించవలసినది మరియు మెరుగైన యూజర్ అనుభవం కోసం డేటా నిల్వ ఎలా అమలు చేయాలో అర్థం చేసుకుంటారు.

ప్రాంప్ట్: సంభాషణ చరిత్రను సెషన్ల మధ్య నిల్వ చేయాల్సిన విధంగా చాట్ అప్లికేషన్‌ను సవరించండి. చాట్ సందేశాలను లోకల్ స్టోరేజ్‌లో సేవ్ చేసే విధానాన్ని జోడించండి, పేజీ లోడ్ అయినప్పుడు సంభాషణ చరిత్రను చూపించండి, మరియు "Clear History" బటన్‌ను చేర్చండి. అలాగే టైపింగ్ సూచికలు మరియు సందేశ సమయ స్టాంప్లను అమలు చేసి చాట్ అనుభవాన్ని మరింత వాస్తవంగా చేయండి.

ఇక్కడ agent mode గురించి మరింత తెలుసుకోండి.

అసైన్‌మెంట్: మీ వ్యక్తిగత AI అసిస్టెంట్‌ని నిర్మించుకోండి

ఇప్పుడు మీరు మీ స్వంత AI అసిస్టెంట్ అమలును సృష్టించబోతున్నారు. ట్యుటోరియల్ కోడ్‌ను పునరావృతం చేయడం కాకుండా, మీరు నేర్చుకున్న కాన్సెప్ట్‌లను వర్తింప జేసే, మీ ఆసక్తులు మరియు ఉపయోగ విధానాలను ప్రతిబింబించే ఏదైనా సృష్టించే అవకాశం ఇది.

ప్రాజెక్ట్ అవసరాలు

మీ ప్రాజెక్ట్‌ను ఒక శుభ్రమైన, వ్యవస్థీకృత నిర్మాణంతో సెట్ చేయండి:

my-ai-assistant/
├── backend/
│   ├── api.py          # Your FastAPI server
│   ├── llm.py          # AI integration functions
│   ├── .env            # Your secrets (keep this safe!)
│   └── requirements.txt # Python dependencies
├── frontend/
│   ├── index.html      # Your chat interface
│   ├── app.js          # The JavaScript magic
│   └── styles.css      # Make it look amazing
└── README.md           # Tell the world about your creation

ప్రాముఖ్య అమలుకి పనులు

బ్యాక్ ఎండ్ అభివృద్ధి:

• మన FastAPI కోడ్‌ను తీసుకుని మీ స్వంతదిగా మార్చుకోండి
• ప్రత్యేక AI వ్యక్తిత్వం సృష్టించండి – సహాయక వంట సహాయకుడు, సృజనాత్మక రచనా భాగస్వామి, లేదా అధ్యయన స్నేహితుడు?
• స్థిరమైన దోష నిర్వహణ జోడించి, యాప్ లోపాల వల్ల క్రాష్ కాకుండా చూడండి
• మీ API ఎలా పనిచేస్తుంది అనేదిని అర్థం చేసుకునే వారి కోసం క్లియర్ డాక్యుమెంటేషన్ రాయండి

ఫ్రంట్ ఎండ్ అభివృద్ధి:

• సులభమైన, ఆహ్లాదకరమైన చాట్ ఇంటర్‌ఫేస్ నిర్మించండి
• మీరు ఇతర డెవలపర్లకు ప్రదర్శించడానికి గర్వపడే మోడర్న్ జావాస్క్రిప్ట్ రాయండి
• మీ AI వ్యక్తిత్వాన్ని ప్రతిబింబించే కస్టమ్ స్టైలింగ్ డిజైన్ చేయండి – సరదాగా, రంగురంగులా? శుభ్రమైన, కనిష్టంగా? పూర్తిగా మీ పై ఆధారపడి ఉంటుంది!
• ఫోన్‌లు మరియు కంప్యూటర్లు రెండింటిపై బాగ్గా పనిచేస్తున్నదని ధృవీకరించండి

వ్యక్తిగతీకరణ అవసరాలు:

• మీ AI అసిస్టెంట్ కోసం ప్రత్యేక పేరు మరియు వ్యక్తిత్వాన్ని ఎంచుకోండి – మీ ఆసక్తులు లేదా పరిష్కరించాలనుకునే సమస్యలను ప్రతిబింబించే ఏదైనా కావచ్చు
• మీ అసిస్టెంట్ స్పృహకు సరిపోయే దృష్టి డిజైన్‌ను అనుకూలీకరించండి
• మందైన استقبال సందేశాన్ని రాయండి, అది చాట్ ప్రారంభించాలని మనసుకు కోరుకునేలా ఉండాలి
• మీ అసిస్టెంట్‌ను వివిధ రకాల ప్రశ్నలతో పరీక్షించి, అది ఎలా స్పందిస్తుందో చూడండి

అభివృద్ధి ఆలోచనలు (ఐచ్చిక)

మీ ప్రాజెక్ట్‌ను మరింత మెరుగుపరచాలనుకుంటున్నారా? ఇక్కడ కొన్ని సరదా ఆలోచనలు ఉన్నాయి:

లక్షణం	వివరణ	మీరు సాధించే నైపుణ్యాలు
సందేశ చరితం	పేజీ రీఫ్రెష్ అయినా సంభాషణలను గుర్తుంచుకోవడం	localStorage, JSON నిర్వహణ
టైపింగ్ సూచికలు	"AI టైపింగ్... " ని ప్రత్యక్షంగా చూపించడం	CSS యానిమేషన్‌లు, అసింక్ ప్రోగ్రామింగ్
సందేశ సమయ స్టాంపులు	ప్రతి సందేశం పంపిన సమయాన్ని చూపించడం	తేదీ/సమయ ఫార్మాటింగ్, యూజర్ అనుభవ డిజైన్
చాట్ ఎక్స్‌పోర్ట్	యూజర్లు తమ సంభాషణను డౌన్‌లోడ్ చేసుకోవడం	ఫైల్ హ్యాండ్లింగ్, డేటా ఎగుమతి
థీమ్ మార్పిడి	లైట్/డార్క్ మోడ్ టాగ్ల్	CSS వేరియబుల్స్, యూజర్ అలవాట్లు
వాయిస్ ఇన్‌పుట్	స్పీచ్-టు-టెక్స్ట్ ఫీచర్ జోడించడం	Web APIs, యాక్ససిబిలిటీ

పరీక్ష మరియు డాక్యుమెంటేషన్

నాణ్యత నిర్ధారణ:

• వివిధ ఇన్‌పుట్ రకాలతో మరియు ఎడ్జ్ కేసులతో మీ అప్లికేషన్‌ను పరీక్షించండి
• వివిధ స్క్రీన్ పరిమాణాలలో రెస్పాన్సివ్ డిజైన్ ఎలా పనిచేస్తుంది చూడండి
• కీబోర్డ్ నావిగేషన్ మరియు స్క్రీన్ రీడర్‌లతో యాక్ససిబిలిటీ తనిఖీ చేయండి
• HTML మరియు CSS ను ప్రమాణాల ప్రకారం ధృవీకరించండి

డాక్యుమెంటేషన్ అవసరాలు:

• README.md రాయండి, ఇందులో మీ ప్రాజెక్ట్ వివరాలు మరియు రన్ చేయడం ఎలా అనే వివరాలు ఉండాలి
• చాట్ ఇంటర్‌ఫేస్ పని చేస్తున్న స్క్రీన్‌షాట్లు జోడించండి
• మీరు జోడించిన ఏవైనా ప్రత్యేక ఫీచర్లు లేదా అనుకూలీకరణలను డాక్యుమెంట్ చేయండి
• ఇతర డెవలపర్లకు క్లియర్ సెటప్ సూచనలను అందించండి

సమర్పణ మార్గదర్శకాలు

ప్రాజెక్ట్ సమర్పణలు:

1. సర్వ సోర్స్ కోడ్‌తో పూర్తి ప్రాజెక్ట్ ఫోల్డర్
2. ప్రాజెక్ట్ వివరణ మరియు సెటప్ సూచనలతో README.md
3. మీ చాట్ అసిస్టెంట్ క్రియాశీలతను చూపించే స్క్రీన్‌షాట్లు
4. మీరు నేర్చుకున్నది మరియు ఎదుర్కొన్న సవాళ్లపై ఒక చిన్న ప్రతిబింబం

మూల్యాంకన ప్రమాణాలు:

• ఫంక్షనాలిటీ: చాట్ అసిస్టెంట్ ఆశించినట్లుగా పనిచ ves్తుందా?
• కోడ్ నాణ్యత: కోడ్ బాగుగా ఆర్గనైజ్ అయి, వ్యాఖ్యానాలు ఉంటూ, నిర్వహణ సులభమై ఉందా?
• డిజైన్: ఇంటర్‌ఫేస్ దృష్టిని ఆకర్షించే, యూజర్-ఫ్రెండ్లీనా?
• సృజనాత్మకత: మీ అమలు ఎంత ప్రత్యేకం మరియు వ్యక్తిగతీకృతమై ఉందో?
• డాక్యుమెంటేషన్: సెటప్ సూచనలు స్పష్టంగా, పూర్తి స్పందించాయా?

💡 విజయ సూచన: మొదట ప్రాథమిక అవసరాలను పూర్తి చేయండి, తర్వాత అన్ని సరి అయిన తర్వాత అభివృద్ధి జోడించండి. అగ్రగామి ఫీచర్లు జోడించే ముందు శుద్ధమైన ప్రాథమిక అనుభవం సృష్టించడంపై దృష్టి పెట్టండి.

సమాధానం

Solution

బోనస్ సవాళ్లు

మీ AI అసిస్టెంట్‌ను తదుపరి స్థాయికి తీసుకెళ్లేందుకు సిద్ధమా? AI సమన్వయాన్ని మరియు వెబ్ డెవలప్‌మెంట్‌ను మరింత లోతుగా అర్థం చేసుకునే ఈ ప్రగతిశీల సవాళ్లను ప్రయత్నించండి.

వ్యక్తిత్వాన్ని అనుకూలీకరించడం

సత్య మంత్రం మీ AI అసిస్టెంట్‌కు ప్రత్యేక వ్యక్తిత్వం ఇవ్వడంలో ఉంటుంది. విభిన్న సిస్టమ్ ప్రాంప్ట్‌లతో ప్రత్యేక సహాయకులను సృష్టించండి:

వృత్తిపరుడైన అసిస్టెంట్ ఉదాహరణ:

call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")

సృజనాత్మక రచనా సహాయకుడు ఉదాహరణ:

call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")

సాంకేతిక మెంటార్ ఉదాహరణ:

call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")

ఫ్రంట్ ఎండ్ అభివృద్ధులు

ఈ దృష్టి మరియు కార్యకలాప అభివృద్ధులతో మీ చాట్ ఇంటర్‌ఫేస్‌ను మార్చండి:

అధునిక CSS ఫీచర్లు:

• సాఫీ సందేశ యానిమేషన్‌లు మరియు మార్పిడులను అమలు చేయండి
• CSS ఆకారాలు మరియు గ్రాడియెంట్లతో కస్టమ్ చాట్ బబుల్ డిజైన్లు జోడించండి
• AI "ఆలోచిస్తూ ఉంది" టైపింగ్ సూచిక యానిమేషన్ సృష్టించండి
• ఎమోజీ ప్రతిస్పందనలు లేదా సందేశ రేటింగ్ సిస్టమ్ డిజైన్ చేయండి

జావాస్క్రిప్ట్ అభివృద్ధులు:

• కీబోర్డ్ షార్ట్‌కట్‌లు జోడించండి (Ctrl+Enter పంపడానికి, Escape ఇన్‌పుట్ క్లియర్ చేయడానికి)
• సందేశ సందర్భం శోధన మరియు ఫిల్టరింగ్ ఫంక్షనాలిటీ అమలు చేయండి
• సంభాషణ ఎగుమతి ఫీచర్ (టెక్స్ట్ లేదా JSONగా డౌన్‌లోడ్) సృష్టించండి
• లోకల్ స్టోరేజ్ కి ఆటో-సేవ్ జోడించి సందేశ నష్టం నివారించండి

అధునిక AI సమన్వయం

బహుళ AI వ్యక్తిత్వాలు:

• వేర్వేరు AI వ్యక్తిత్వాలు మార్చుకునే డ్రాప్‌డౌన్ సృష్టించండి
• యూజర్ ఇష్టమైన వ్యక్తిత్వాన్ని localStorage లో సేవ్ చేయండి
• సంభాషణ ప్రవాహం ఉంచే సందర్భ మార్పిడి అమలు చేయండి

స్మార్ట్ స్పందన ఫీచర్లు:

• సంభాషణ సందర్భ అవగాహన (AI మునుపటి సందేశాలను గుర్తుంచుతుంది)
• చర్చాప్రసంగ విషయంపై స్మార్ట్ సూచనలను అమలు చేయండి
• ఆమని ప్రశ్నల కోసం త్వరిత సమాధాన బటన్లను సృష్టించండి

🎯 అభ్యాస లక్ష్యం: ఈ అదనపు సవాళ్లు మీకు ప్రొడక్షన్ అప్లికేషన్లలో ఉపయోగించే ఆధునిక వెబ్ డెవలప్మెంట్ నమూనాలు మరియు AI సంయోజన సాంకేతికతలను అర్థం చేసుకోవడంలో సహాయపడతాయి.

సారాంశం మరియు తదుపరి దశలు

అభినందనలు! మీరు ప్రారంభం నుండీ పూర్తి AI-చాలిత చాట్ సహాయకాన్ని విజయవంతంగా నిర్మించారు. ఈ ప్రాజెక్ట్ మీకు ఆధునిక వెబ్ డెవలప్మెంట్ సాంకేతికతలు మరియు AI సంయోజన అనుభవాన్ని అందించింది – ఇవి నేటి టెక్ ప్రపంచంలో మరింత విలువైన నైపుణ్యాలు.

మీరు సాధించినవి

ఈ పాఠంలో మీరు అనేక ముఖ్యమైన సాంకేతికతలు మరియు భావాలపై నైపుణ్యం సాధించారు:

బ్యాక్‌ఎండ్ డెవలప్మెంట్:

• AI ఫంక్షనాలిటీ కోసం GitHub మోడల్స్ API తో సంయోజించారు
• సరైన లోప నిర్వహణతో Flask ఉపయోగించి RESTful API ను తయారుచేశారు
• వాతావరణ వేరియబుల్స్ ఉపయోగించి సురక్షిత ప్రామాణీకరణను అమలు చేశారు
• ఫ్రంట్‌ఎండ్ మరియు బ్యాక్‌ఎండ్ మధ్య క్రాస్-ఒరిజిన్ అభ్యర్థనల కోసం CORS ను రాహదారి కల్పించారు

ఫ్రంట్‌ఎండ్ డెవలప్మెంట్:

• సెమాంటిక్ HTML ఉపయోగించి స్పందనాత్మక చాట్ ఇంటర్‌ఫేస్‌ను సృష్టించారు
• async/await మరియు క్లాస్-ఆధారిత నిర్మాణంతో ఆధునిక జావాస్క్రిప్ట్‌ని అమలు చేశారు
• CSS Grid, Flexbox మరియు అనిమేషన్లతో ఆకర్షణీయ వినియోగదార ఇంటర్‌ఫేస్ డిజైన్ తయారుచేశారు
• యాక్సెసిబిలిటీ లక్షణాలు మరియు స్పందనాత్మక డిజైన్ సూత్రాలను చేర్చారు

ఫుల్-స్టాక్ ఇంటిగ్రేషన్:

• HTTP API కాల్స్ ద్వారా ఫ్రంట్‌ఎండ్ మరియు బ్యాక్‌ఎండ్‌ను కనెక్ట్ చేశారు
• రియల్ టైం వినియోగదారు చర్యలు మరియు అసింక్రనస్ డేటా ప్రవాహాన్ని నిర్వహించారు
• అనువర్తనం మొత్తంలో లోప నిర్వహణ మరియు వినియోగదారు ఫీడ్బ్యాక్‌ను అమలు చేశారు
• వినియోగదారు ఇన్‌పుట్ నుంచి AI స్పందన వరకు పూర్తి అప్లికేషన్ వర్క్‌ఫ్లోను పరీక్షించారు

ముఖ్యమైన అభ్యాస ఫలితాలు

mindmap
  root((AI చాట్ యాప్ నైపుణ్యాలు))
    API సంయోజనం
      గుర్తింపు
      లోపం నిర్వహణ
      అసింక్రోనస్ ప్రోగ్రామింగ్
    వెబ్ అభివృద్ధి
      HTML5 సిమాంటిక్స్
      ఆధునిక CSS
      ES6+ జావాస్క్రిప్ట్
    వినియోగదారు అనుభవం
      స్పందనాత్మక డిజైన్
      ప్రాప్యత
      నిజ-సమయం పరస్పర చర్య
    AI అర్థం చేసుకోవడం
      ప్రాంప్ట్ ఇంజనీరింగ్
      మోడల్ పారామీటర్లు
      సంభాషణ ప్రవాహం

ఈ ప్రాజెక్ట్ మీకు AI-చాలిత అప్లికేషన్లు నిర్మాణానికి అవసరమైన మూలసూత్రాలను పరిచయం చేస్తుంది, ఇవి వెబ్ డెవలప్మెంట్ భవిష్యత్తు సూచిస్తాయి. మీరు ఇప్పుడు సాంప్రదాయ వెబ్ అప్లికేషన్లలో AI సామర్థ్యాలను ఎలా సంవేశపరచాలో అర్థం చేసుకున్నారు, ఇది తెలివైన మరియు స్పందనాత్మక వినియోగదార అనుభవాలను సృష్టిస్తుంది.

వృత్తిపరమైన ఉపయోగాలు

ఈ పాఠంలో మీరు అభివృద్ధి చేసిన నైపుణ్యాలు ఆధునిక సాఫ్ట్‌వేర్ అభివృద్ధి వృత్తులకు నేరుగా వర్తిస్తాయి:

• ఆధునిక ఫ్రేమ్‌వర్క్‌లు మరియు APIలతో ఫుల్-స్టాక్ వెబ్ డెవలప్మెంట్
• వెబ్ అప్లికేషన్లు మరియు మొబైల్ యాప్స్‌లో AI సంయోజన
• మైక్రోసర్వీసులు నిర్మాణాల కోసం API రూపకల్పన మరియు అభివృద్ధి
• యాక్సెసిబిలిటీ మరియు స్పందనాత్మక డిజైన్పై దృష్టి సారించిన యూజర్ ఇంటర్‌ఫేస్ అభివృద్ధి
• వాతావరణ కాన్ఫిగర్వేషన్ మరియు డిప్లాయ్‌మెంట్‌ సహా DevOps ఆచరణలు

మీ AI డెవలప్మెంట్ ప్రయాణం కొనసాగింపు

తదుపరి అభ్యాస దశలు:

• మరింత అధునాతన AI మోడల్స్ మరియు APIలను అన్వేషించండి (GPT-4, Claude, Gemini)
• మెరుగైన AI స్పందనల కోసం ప్రాంప్ట్ ఇంజనీరింగ్ సాంకేతికతలను శిక్షణ పొందండి
• సంభాషణ డిజైన్ మరియు చాట్‌బాట్ వినియోగదార అనుభవ సూత్రాలను అధ్యయనం చేయండి
• AI భద్రత, నీతి, మరియు బాధ్యతాయుత AI అభివృద్ధి పద్ధతులను పరిశీలించండి
• సంభాషణ జ్ఞాపకం మరియు సందర్భ అవగాహనతో మరింత సంక్లిష్ట అనువర్తనాలను తయారుచేయండి

అధునాతన ప్రాజెక్ట్ ఐడియాలు:

• బహుళ వినియోగదారుల చాట్ రూములు AI మోడరేషన్‌తో
• AI ప్రసక్తి కలిగిన కస్టమర్ సర్వీస్ చాట్‌బాట్లు
• వ్యక్తిగత అభ్యాసం కలిగిన విద్యా ఉపాధ్యాయ సహాయకులు
• వేర్వేరు AI persoonlijkیاتతో సృజనాత్మక రచనా సహకారులు
• అభివృద్ధిదారుల కోసం సాంకేతిక డాక్యుమెంటేషన్ సహాయకులు

GitHub Codespaces తో ప్రారంభించండి

మీరు ఈ ప్రాజెక్టును క్లౌడ్ అభివృద్ధి వాతావరణంలో ప్రయత్నించాలనుకుంటారా? GitHub Codespaces మీ బ్రౌజర్‌లో పూర్తి అభివృద్ధి సెటప్‌ను అందిస్తుంది, దీని ద్వారా స్థానిక సెటప్ అవసరాల లేని AI అప్లికేషన్లతో ప్రయోగాలు చేయవచ్చు.

మీ అభివృద్ధి వాతావరణం సృష్టించడం

దశ 1: టెంప్లేట్ నుండి సృష్టించండి

• Web Dev For Beginners repository కు నావిగేట్ అవ్వండి
• పై-కుడి మూలలో "Use this template" పై క్లిక్ చేయండి (GitHubలో లాగిన్ అయి ఉండాలి)

దశ 2: Codespaces ప్రారంభం

• మీ కొత్తగా సృష్టించిన రిపాజిటరీని తొక్కండి
• ఆకుపచ్చ "Code" బటన్‌పై క్లిక్ చేయండి మరియు "Codespaces" ను ఎంచుకోండి
• "Create codespace on main"ని ఎంచుకొని అభివృద్ధి వాతావరణాన్ని ప్రారంభించండి

దశ 3: వాతావరణం కాన్ఫిగరేషన్
మీ Codespace లోడ్ అయిన వెంటనే, మీరు పొందగలిగేది:

• ముందుగా ఇన్‌స్టాల్ చేయబడ్డ Python, Node.js, మరియు అవసరమైన అన్ని అభివృద్ధి పరికరాలు
• వెబ్ డెవలప్మెంట్ కోసం VS Code ఇంటర్‌ఫేస్ మరియు ఎక్స్‌టెన్షన్లు
• బ్యాక్‌ఎండ్ మరియు ఫ్రంట్‌ఎండ్ సర్వర్లను నిర్వహించడానికి టెర్మినల్ యాక్సెస్
• మీ అప్లికేషన్లను పరీక్షించడానికి పోర్ట్ ఫార్వర్డింగ్

Codespaces అందించేది:

• స్థానిక వాతావరణ సెటప్ మరియు కాన్ఫిగరేషన్ సమస్యలను తొలగిస్తుంది
• విభిన్న పరికరాల మీద సమాన అభ్యాస వాతావరణాన్ని అందిస్తుంది
• వెబ్ డెవలప్మెంట్ కోసం ముందుగా కాన్ఫిగర్ చేయబడ్డ పరికరాలు, ఎక్స్‌టెన్షన్లను కల్గిస్తుంది
• GitHub తో సంయోజన సౌకర్యాన్ని అందిస్తుంది, వెర్షన్ కంట్రోల్ మరియు సహకారం కోసం

🚀 ప్రో చిట్కా: Codespaces AI అప్లికేషన్లను నేర్చుకోవడం మరియు మోడలింగ్ చేయడానికి అనువైనది, ఎందుకంటే ఇది సమస్త సంక్లిష్ట వాతావరణ సెటప్‌ను స్వయంచాలకంగా నిర్వహిస్తుంది, మీరు నిర్మాణం మరియు అభ్యాసంపై ఎక్కువగా దృష్టి పెట్టవచ్చు.

---

అస్పష్టం:
ఈ దస్తావేజును AI అనువాద సేవ Co-op Translator ఉపయోగించి అనువదించబడింది. మనం ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో లోపాలు లేదా తప్పిదాలు ఉండవచ్చును. మూల భాషలో ఉన్న అసలు దస్తావేజే అధికారిక మరియు నమ్మకమైన మూలం గా పరిగణించాలి. కీలకమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదాన్ని సూచించబడుతుంది. ఈ అనువాదం వలన కలిగే ఏవైనా అపార్థాలు లేదా తప్పుడు అర్థాలు గురించి మేము బాధ్యత వహించము.