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

എഐ ഉപയോഗിച്ച് ഒരു ചാറ്റ് അസിസ്റ്റന്റ് നിർമിക്കുക

സ്റ്റാർ ട്രെക്കിൽ ക്രൂവിന് കപ്പലിന്റെ കമ്പ്യൂട്ടറോട് സ്വേച്ഛയായി സംഭാഷണം നടത്തും, സങ്കീർണ ചോദ്യങ്ങൾ ചോദിച്ച് ആലോചനാഭരിതമായ പ്രതികരണങ്ങൾ ലഭിക്കുന്നതു പോലെ ഓർമ്മയുണ്ടോ? 1960 കളിലെ ശുദ്ധമായ സയൻസ് ഫിക്ഷൻ പോലെ തോന്നിയതു ഇപ്പോൾ നിങ്ങൾ ഇതിനകം അറിയുന്ന വെബ് ടെക്നോളജികളെ ഉപയോഗിച്ച് നിർമ്മിക്കാൻ കഴിയും.

ഇവിടെ നമ്മൾ HTML, CSS, ജാവാസ്ക്രിപ്റ്റ്, ചില ബാക്ക്എൻഡ് ഇന്റഗ്രേഷൻ എന്നിവ ഉപയോഗിച്ച് എഐ ചാറ്റ് അസിസ്റ്റന്റ് സൃഷ്ടിക്കും. നിങ്ങൾ പഠിച്ചിട്ടുള്ള അതേ കഴിവുകൾ അധിക ശക്തിയുള്ള എഐ സേവനങ്ങളുമായി ബന്ധിപ്പിച്ച് പത്തിപ്പുത്തുള്ളാത്ത സംവാദങ്ങൾ മനസ്സിലാക്കി സാര്ഥകമായ പ്രതികരണങ്ങൾ സൃഷ്ടിക്കുന്ന വിധം കണ്ടെത്തും.

എഐയെ ഒരു വ്യാപക ഗ്രന്ഥശാല പോലെയാണ് കരുതുക, അത് വിവരങ്ങൾ കണ്ടെത്തുന്നതിൽ മാത്രമല്ല, നിജപ്പെടുത്തപ്പെട്ട നിങ്ങളുടെ പ്രത്യേക ചോദ്യങ്ങൾക്ക് യോജിക്കുന്ന സാരമുള്ള മറുപടികൾ സംയോജിപ്പിച്ചും നൽകുന്നു. ആയിരക്കണക്കിനു പக்கങ്ങൾ തിരയുന്നതിന് പകരം, നിങ്ങൾക്ക് നേരിട്ട്, പ്രസക്തമായ മറുപടികൾ ലഭിക്കും.

ഇന്റഗ്രേഷൻ പരിചിതമായ വെബ് ടെക്നോളജികൾ തമ്മില്‍ ചേർന്ന് നടക്കുന്നു. HTML ചാറ്റ് ഇന്റർഫേസ് സൃഷ്ടിക്കുന്നു, CSS ദൃശ്യമാധ്യമ രൂപകല്‍പ്പന കൈകാര്യം ചെയ്യുന്നു, ജാവാസ്ക്രിപ്റ്റ് ഉപയോക്തൃ ഇടപെടലുകൾ നിയന്ത്രിക്കുന്നു, പിന്നിൽ ഒരു API എല്ലാം എഐ സേവനങ്ങളുമായി ബന്ധിപ്പിക്കുന്നു. ഇത് ഓർക്കസ്റ്റ്രയുടെ വിവിധ бөліങ്ങളും ഏകോപിപ്പിച്ച് സംഗീതം സൃഷ്ടിക്കുന്നതുപോലെയാണ്.

നാം സ്വാഭാവികമായ മനുഷ്യസംവാദവും യന്ത്ര പ്രോസസ്സിംഗുമായുള്ള ഒരു പാലം രൂപപ്പെടുത്തുകയാണ്. എഐ സേവന സംയോജനത്തിന്റെ സാങ്കേതിക നടപ്പിലാക്കലും ഉപയോക്തൃ സൗഹൃദമായ സംവാദ രൂപകൽപ്പന മാതൃകകളും നിങ്ങൾ പഠിക്കും.

ഈ പാഠം അവസാനിക്കുമ്പോൾ, എഐ സംയോജനം ഒരു അനൗപചാരിക പ്രക്രിയയെന്നത് കുറവായി, മറ്റൊരു API പോലെ സുഗമമായി പ്രവർത്തിക്കുന്നതായി തോന്നും. ChatGPT, Claude പോലുള്ള ആപ്ലിക്കേഷനുകൾ പ്രവർത്തിപ്പിക്കുന്ന അടിസ്ഥാന മാതൃകകളും നിങ്ങൾക്കറിയാം, ഇതുവരെ പഠിച്ച വെബ് വികസന സിദ്ധാന്തങ്ങളുപയോഗിച്ച്.

⚡ അടുത്ത 5 മിനിറ്റിൽ നിങ്ങൾ ചെയ്യാവുന്നത്

ബിഐസി ഡവലപ്പർമാർക്കുള്ള ക്വിക്ക് സ്റ്റാർട്ട് മാർഗ്

flowchart LR
    A[⚡ 5 മിനിറ്റ്] --> B[GitHub ടോക്കൺ നേടുക]
    B --> C[AI പ്ലേഗ്രൗണ്ട് പരീക്ഷിക്കുക]
    C --> D[Python കോഡ് പകർത്തുക]
    D --> E[AI പ്രതികരണങ്ങൾ കാണുക]

• മിനിട്ട് 1: GitHub Models Playground സന്ദർശിച്ചു വ്യക്തിപരമായ ആക്സസ് ടോക്ക്ൺ സൃഷ്ടിക്കുക
• മിനിട്ട് 2: പ്ലേഗ്രൗണ്ട് ഇന്റർഫേസ് നേരിട്ട് എഐ സംവാദം പരീക്ഷിക്കുക
• മിനിട്ട് 3: "Code" ടാബിൽ ക്ലിക്ക് ചെയ്ത് പൈത്തൺ സ്നിപ്പെറ്റ് കോപ്പി ചെയ്യുക
• മിനിട്ട് 4: നിങ്ങളുടെ ടോക്കൺ ഉപയോഗിച്ച് കോഡ് ലൊക്കലായി റൺ ചെയ്യുക: GITHUB_TOKEN=your_token python test.py
• മിനിട്ട് 5: നിങ്ങളുടെ സ്വന്തം കോഡിൽ നിന്നുള്ള ആദ്യ എഐ പ്രതികരണം കാണുക

ദ്രുത പരീക്ഷണ കോഡ്:

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 മിനിറ്റിനുള്ളിൽ പ്രോഗ്രാമാറ്റിക് എഐ സംവാദത്തിന്റെ മായാജാലം നിങ്ങൾ അനുഭവിക്കും. ഇത് നിങ്ങൾ ഉപയോഗിക്കുന്ന എല്ലാ എഐ ആപ്ലിക്കേഷനുകളുടെ അടിസ്ഥാന വസ്തുവാണ്.

നിങ്ങളുടെ ഫിനിഷഡ് പ്രോജക്ട് ഹീറാണ്:

🗺️ എഐ ആപ്ലിക്കേഷൻ വികസനത്തിലൂടെ നിങ്ങളുടെ പഠനയാത്ര

journey
    title വെബ് ഡെവലപ്പ്മെന്‍റ് മുതല്‍ എഐ ഇന്റഗ്രേഷനാകും വരെ
    section എഐ അടിസ്ഥാനം മനസ്സിലാക്കല്‍
      ജനനാത്മക എഐ സങ്കല്‍പ്പങ്ങള്‍ കണ്ടെത്തുക: 4: You
      GitHub മോഡലുകള്‍ പ്ലാറ്റ്ഫോം പരിചയപ്പെടുക: 6: You
      എഐ പാരാമീറ്ററുകളും പ്രാംപ്റ്റുകളും പിടിക്കുക: 8: You
    section ബാക്ക്‌എന്‍ഡ് ഇന്റഗ്രേഷന്‍
      പൈത്തൺ എപിഐ സെര്‍വര്‍ നിര്‍മ്മിക്കുക: 5: You
      എഐ ഫങ്ക്ഷന്‍ കോള്‍ നടപ്പിലാക്കുക: 7: You
      അസിങ്ക് ഓപ്പറേഷനുകള്‍ കൈകാര്യം ചെയ്യുക: 8: You
    section ഫ്രണ്ട്‌എന്‍ഡ് ഡെവലപ്പ്മെന്റ്
      ആധുനിക ചാറ്റ് ഇന്റര്‍ഫേസ് സൃഷ്ടിക്കുക: 6: You
      റിയല്‍-ടൈം ഇന്റര്‍ക്ഷനുകള്‍ മാസ്റ്റര്‍ ചെയ്യുക: 8: You
      പ്രതികരണക്ഷമമായ ഉപയോക്തൃ അനുഭവം ഒരുക്കുക: 9: You
    section പ്രൊഫഷണല്‍ അപേക്ഷ
      പൂര്‍ണ്ണ എഐ സംവിധാനം ഡിപ്ലോയ്മെന്റ്: 7: You
      പ്രകടന മാതൃകകള്‍ മെച്ചപ്പെടുത്തുക: 8: You
      പ്ലാന്‍റേഷന്‍ റെഡിയായ ആപ്പ് സൃഷ്ടിക്കുക: 9: You

നിങ്ങളുടെ യാത്രയുടെ ലക്ഷ്യം: ഈ പാഠം അവസാനിയ്ക്കുമ്പോൾ ChatGPT, Claude, Google Bard പോലുള്ള ആധുനിക എഐ അസിസ്റ്റന്റുകളിൽ ഉപയോഗിക്കുന്ന അതേ സാങ്കേതികതകളും മാതൃകകളും ഉപയോഗിച്ച് സമ്പൂർണ്ണമായ എഐ-ബ്രഹ്മാണ്ഡ ആപ്ലിക്കേഷൻ നിങ്ങൾ സൃഷ്ടിച്ചിരിക്കും.

എഐ മനസ്സിലാക്കൽ: രഹസ്യത്തിന്ന് മേധാവിത്വത്തിലേക്ക്

കോഡ് നോക്കുന്നതിന് മുമ്പ് നമുക്ക് എന്താണ് ഞങ്ങൾ കൈകാര്യം ചെയ്യുന്നത് എന്നതെങ്ങനെ എന്നു മനസ്സിലാക്കാം. നിങ്ങൾ മുമ്പ് APIകൾ ഉപയോഗിച്ചതുപോലെ, അടിസ്ഥാന മാതൃക അറിയാം: ഒരു അഭ്യർത്ഥന അയയ്‌ക്കുന്നു, മറുപടി ലഭിക്കുന്നു.

എഐ APIകൾ സമാന ഘടന കൈക്കൊള്ളുന്നു, പക്ഷേ ഡാറ്റാബേസിൽ നിന്ന് മുൻകൂട്ടി സൂക്ഷിച്ച ഡാറ്റ പുനരുദ്ധരിക്കുന്നതിന് പകരം, അവ വമ്പിച്ച മൊത്ത ഗ്രന്ഥങ്ങളിൽ നിന്നുള്ള മാതൃകകൾ പഠിച്ച് പുതു മറുപടികൾ സൃഷ്ടിക്കുന്നു. ഇത് യാത്രോഗ്രന്ഥശാലയുടെ കാറ്റലോഗ് സംവിധാനം എന്നതും അറിവുള്ള ഗ്രന്ഥാതാളി, നിരവധി ഉറവിടങ്ങളിൽ നിന്നുള്ള വിവരങ്ങൾ സംയോജിപ്പിച്ച് വിശദീകരിക്കുന്നതിനുള്ള വ്യത്യാസം പോലെയാണ്.

"ജനറേറ്റീവ് എഐ" എന്റാന്ന്?

റോസറ്റാ സ്റ്റോൺ ശാസ്ത്രജ്ഞരെ ഈജിപ്ഷ്യൻ ഹയർോഗ്ലിഫിക്സ് മനസ്സിലാക്കാൻ സഹായിച്ചത് പോലെ, അറിയപ്പെടുന്ന ഭാഷകളും അറിയപ്പെടാത്ത ഭാഷകളും തമ്മിലുള്ള മാതൃക കണ്ടെത്തിയത് പോലെ. എഐ മോഡലുകൾ സമാന പാതയിലുളവായി പ്രവർത്തിക്കുന്നു - ഭാഷ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസ്സിലാക്കാൻ വമ്പിച്ച ഗ്രന്ഥങ്ങളിൽ നിന്നുള്ള മാതൃക കണ്ടെത്തി, പിന്നീട് ആ മാതൃകകൾ ഉപയോഗിച്ച് പുതിയ ചോദ്യങ്ങൾക്ക് യോജിച്ച മറുപടികൾ പിറുത്തുപിടിക്കുന്നു.

ഇതിന് സാധാരണ താരതമ്യം കാണാം:

• പരമ്പരാഗത ഡാറ്റാബേസ്: നിങ്ങളുടെ ജനനസഹിതം ചോദിക്കുന്നത് പോലെ – നിങ്ങൾക്കു എപ്പോഴും അതേ കागിതം ലഭിക്കും
• സെർച്ച് എഞ്ചിൻ: ഗ്രന്ഥാതാളിക്ക് പൂച്ചകളെക്കുറിച്ചുള്ള പുസ്തകങ്ങൾ കണ്ടെത്താൻ പറയുന്നത് – ലഭ്യമായത് കാണിക്കും
• ജനറേറ്റീവ് എഐ: അവബോധമുള്ള ഒരു സുഹൃത്തെ കേൾക്കുന്നത് – അവൻ സ്വയം പകർന്നോർത്തുള്ള വരികളിൽ നിന്ന് രസകരമായ വിവരങ്ങൾ പറയുന്നു, നിങ്ങൾക്കു្វേണ്ടത് വിശദമായി

graph LR
    A[നിങ്ങളുടെ ചോദ്യം] --> B[AI മോഡൽ]
    B --> C[പാറ്റേൺ തിരിച്ചറിയൽ]
    C --> D[സാധന സൃഷ്ടി]
    D --> E[സന്ദർഭപരമായ പ്രതികരണം]
    
    F[പരിശീലന ഡാറ്റ<br/>പുസ്തകങ്ങൾ, ലേഖനങ്ങൾ, വെബ്] --> B

എഐ മോഡലുകൾ എങ്ങനെ പഠിക്കുന്നു (സാധാരണ പതിപ്പ്)

എഐ മോഡലുകൾ വലിയ ഡാറ്റാസെറ്റുകളിൽ ഉള്ള പുസ്തകങ്ങൾ, ലേഖനങ്ങൾ, സംഭാഷണങ്ങൾ എന്നിവയിലൂടെ പഠിക്കുന്നു. ഇതിലൂടെ അവ:

• എഴുതിയ ഭാഷയിൽ ചിന്തകൾ എങ്ങനെ ഘടിപ്പിക്കപ്പെടുന്നു എന്ന് തിരിച്ചറിയുന്നു
• ഏതെല്ലാം പദങ്ങൾ സാധാരണയായി ഒപ്പം പ്രത്യക്ഷപ്പെടുന്നു എന്ന് കണ്ടെത്തുന്നു
• സംഭാഷണങ്ങൾ പ്രധാനമായും എങ്ങനെ പ്രവഹിക്കുന്നു എന്ന് മനസ്സിലാക്കുന്നു
• ഔപചാരികതയും അനൗപചാരികതയും ഉള്ള സംവാദങ്ങളിൽ ഉള്ള വ്യത്യാസങ്ങൾ തിരിച്ചറിയുന്നു

പ്രാചീന ഭാഷകൾ കവരുന്ന പുരാവി ശാസ്ത്രജ്ഞൻമാർക്ക് സമാനമാണ്: അവർ ശരിയായ വ്യാകരണം, വാക്കുതേടുകൾ, സാംസ്‌കാരിക പശ്ചാത്തലം മനസ്സിലാക്കാൻ ആയിരക്കണക്കിനം ഉദാഹരണങ്ങൾ പഠിച്ച് പുതിയ എഴുത്തരേഖകൾ വ്യാഖ്യാനിക്കാൻ ആണിഷ്ടപെട്ടു.

എന്തുകൊണ്ടാണ് GitHub Models?

നാം GitHub Models ഉപയോഗിക്കുന്നത് പ്രായോഗിക കാരണമാണ് – ഒരു സ്വന്തമായ എഐ സംവിധാനമില്ലാതെ എന്റർപ്രൈസ്-തലത്തിലുള്ള എഐ പ്രവേശനം ലഭിക്കുന്നതിനും (നിങ്ങൾ ഇപ്പോൾ അത് ചെയ്യാൻ ആഗ്രഹിച്ചില്ല!) ഇത് ഉപകാരപ്പെടും. വേതർ API ഉപയോഗിച്ച് കാലാവസ്ഥ അനുഭവിക്കാൻ പകരം എല്ലായിടത്തും കാലാവസ്ഥ സ്റ്റേഷനുകൾ സ്ഥാപിക്കാൻ ശ്രമിക്കുന്നതുപോലെയാണ്.

ഇത് അടിസ്ഥാനമായാണ് "AI-as-a-Service". ഏറ്റവും മികച്ചതു? ആരംഭിക്കാൻ مفت ഉണ്ട്, അതിനാൽ വലിയ ചെലവ് പേടിക്കാതെ പരീക്ഷിക്കാം.

graph LR
    A[ഫ്രണ്ട്‌എൻഡ് ചാറ്റ് UI] --> B[നിങ്ങളുടെ ബാക്ക്‌എൻഡ് API]
    B --> C[GitHub മോഡൽസ് API]
    C --> D[AI മോഡൽ പ്രോസസ്സിംഗ്]
    D --> C
    C --> B
    B --> A

നാം ബാക്ക്എൻഡ് ഇന്റഗ്രേഷനായി GitHub Models ഉപയോഗിക്കും, ഇത് ഡവലപ്പർ സൗഹൃദ ഇന്റർഫേസിലൂടെ പ്രൊഫഷണൽ ഗ്രേഡ് എഐ കഴിവുകൾ ലഭ്യമാക്കുന്നു. GitHub Models Playground ഒരു പരീക്ഷണ പരിസ്ഥിതി പോലെയാണ്, ഇവിടെ വിവിധ എഐ മോഡലുകളുമായി പരീക്ഷണം നടത്താനും അവയുടെ കഴിവുകൾ മനസ്സിലാക്കാനും കഴിയും.

🧠 എഐ ആപ്ലിക്കേഷൻ വികസന പരിസ്ഥിതി

mindmap
  root((AI വികസനം))
    Understanding AI
      Generative Models
        نمൂനശീലം തിരിച്ചറിയൽ
        ഉള്ളടക്ക സൃഷ്ടി
        കോൺട്കസ്റ്റ് മനസിലാക്കൽ
        പ്രതികരണം സംയോജനം
      AI Parameters
        താപനില നിയന്ത്രണം
        ടോക്കൺ പരിധികൾ
        ടോപ്പ്-p ഫിൽട്ടറിംഗ്
        സിസ്റ്റം പ്രോമ്പ്റ്റുകൾ
    Backend Architecture
      API Integration
        GitHub മോഡലുകൾ
        പ്രമാണീകരണം
        അഭ്യർത്ഥന കൈകാര്യം ചെയ്യൽ
        പിശക് മാനേജ്‌മെന്റ്
      Python Infrastructure
        FastAPI ഫ്രെയിംവർക്കി
        അസിങ്ക് പ്രവർത്തനങ്ങൾ
        പരിസ്ഥിതി സുരക്ഷ
        CORS കോൺഫിഗറേഷൻ
    Frontend Experience
      Chat Interface
       实时 അപ്ഡേറ്റുകൾ
        സന്ദേശ ചരിത്രം
        ഉപയോക്തൃ പ്രതികരണം
        ലോഡിംഗ് സ്റ്റേറ്റുകൾ
      Modern Web Tech
        ES6 ക്ലാസ്സുകൾ
        അസിങ്ക്/അവേറ്റ്
        DOM മാനിപ്പുലേഷൻ
        ഇവന്റ് ഹാൻഡ്ലിംഗ്
    Professional Patterns
      Security Best Practices
        ടോക്കൺ മാനേജ്മെന്റ്
        ഇൻപുട്ട് വാലിഡേഷൻ
        XSS തടസം
        പിശക് ബൗണ്ടറികൾ
      Production Readiness
        പ്രകടനം ഓപ്റ്റിമൈസേഷൻ
        റിസ്പോൺസി ഡിസ്‌ൈനിംഗ്
        ആക്സസിബിലിറ്റി
        ടെസ്റ്റിങ് തന്ത്രങ്ങൾ

അടിസ്ഥാന സിദ്ധാന്തം: എഐ ആപ്ലിക്കേഷൻ വികസനം പരമ്പരാഗത വെബ് ഡവലപ്പ്മെന്റ് കഴിവുകളെ എഐ സേവന സംയോജനത്തോടെ സംയോജിപ്പിക്കുന്നു, ഉപയോക്താവിന് സ്വാഭാവികവും പ്രതികരണശീലമുള്ളതുമായ ബുദ്ധിമുട്ടില്ലാത്ത ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നു.

പ്ലേഗ്രൗണ്ട് ഇത്രയും ഉപകാരത്തിന് ഇടയായത് എന്തുകൊണ്ട്:

• വിഭിന്ന എഐ മോഡലുകൾ പോലുള്ള GPT-4o-mini, Claude തുടങ്ങിയവ പരീക്ഷിക്കാൻ (ഇവ എല്ലാവും मुफ़ത്!)
• നിങ്ങളുടെ ആശയങ്ങളും പ്രോപ്റ്റുകളും എഴുതുന്നതിനു മുമ്പ് ടെസ്റ്റുചെയ്യാൻ
• പ്രോഗ്രാമിങ് ഭാഷകളിൽ ഉപയോഗിക്കാൻ തയാറായ കോഡ് സ്നിപ്പെറ്റുകൾ ലഭിക്കാൻ
• നിർമ്മിതിയുടെ സൃഷ്ടിപരത്വം, മറുപടി നീളം മുതലായ സെറ്റിങ്ങുകൾ മാറ്റിമറിച്ച് ഫലത്തിന് എങ്ങനെ ബാധിക്കുന്നു എന്ന് കാണാൻ

കുറച്ച് കളിച്ച് കഴിഞ്ഞാൽ "Code" ടാബിൽ ക്ലിക്ക് ചെയ്ത് നിങ്ങളുടെ പ്രോഗ്രാമിങ് ഭാഷ തിരഞ്ഞെടുക്കുക, തുടർനടപടികൾക്കുള്ള കോഡ് ലഭിക്കും.

പൈത്തൺ ബാക്ക്എൻഡ് ഇന്റഗ്രേഷൻ സജ്ജമാക്കൽ

ഇപ്പോൾ പൈത്തൺ ഉപയോഗിച്ച് എഐ സംയോജനം നടപ്പിലാക്കാം. പൈത്തൺ ലളിതമായ വാക്യസംരചനത്തിലും ശക്തമായ ലൈബ്രറികളിലും നന്നായതിനാൽ എഐ ആപ്ലിക്കേഷനുകൾക്ക് മികച്ചതാണ്. ഞങ്ങൾ GitHub Models പ്ലേग्रൗണ്ടിൽ നിന്ന് കോഡ് എടുത്ത് അതിനെ പുനരാവർത്തനം ചെയ്ത് പ്രൊഡക്ഷൻ ഘടനയിലുള്ള ഫംഗ്ഷനാക്കി മാറ്റാം.

അടിസ്ഥാന നടപ്പിലാക്കലിന്റെ സങ്കൽപം

പ്ലേഗ്രൗണ്ടിൽ നിന്നുള്ള പൈത്തൺ കോഡ് എടുക്കുമ്പോൾ ഇങ്ങനെ ആയിരിക്കും. ആദ്യം ബുദ്ധിമുട്ടേണ്ട, ഓരോ ഭാഗവും ഒന്നിനൊന്ന് കണ്ട് മനസ്സിലാക്കാം:

"""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യും എഐയുമായി സംഭാഷണം നടത്താൻ OpenAIഉം
• GitHub എഐ സെർവർകൾക്ക് പോയിന്റ് ചെയ്യുന്ന OpenAI ക്ലയന്റ് സജ്ജമാക്കുന്നു
• GitHub ടോക്കൺ ഉപയോഗിച്ച് അംഗീകാരം നൽകുന്നു (കുറ്റി കുറേക്കാൾ പറയാം!)
• സംഭാഷണം അവലംബിച്ചിരിക്കുന്നത് വ്യത്യസ്ത "റോളുകൾ" ആണെന്ന് കാഴ്ചവെക്കുന്നു – നാടകം ഒരുങ്ങുന്നതുപോലെ
• ഏറെ സുതാര്യമായ പാരാമീറ്ററുകളോടെ എഐക്ക് അഭ്യർത്ഥന അയക്കുന്നു
• മറുപടി പ്രാപ്തമാക്കുന്നതിന് പിഴത്തി വിവരങ്ങളിൽനിന്നും പ്രതികരണ എഴുതിയ വാചകം പ്രാപിക്കുന്നു

സന്ദേശ റോൾസ് മനസ്സിലാക്കൽ: എഐ സംഭാഷണ ഘടന

എഐ സംഭാഷണങ്ങൾ പ്രത്യേക ഘടനയുള്ളവയാണ്, വ്യത്യസ്ത "റോളുകൾ" ഉണ്ട്, ഓരോന്നും യഥാർത്ഥ പ്രാധാന്യം ഉള്ളതും:

messages=[
    {
        "role": "system",
        "content": "You are a helpful assistant who explains things simply."
    },
    {
        "role": "user", 
        "content": "What is machine learning?"
    }
]

നാടക സംവിധാനം പോലെ കരുതുക:

• സിസ്റ്റം റോൾ: അഭിനേതാവിന് മഞ്ചൂരീപ്രദർശനം നൽകുന്ന പോലെ – എഐക്ക് പെരുമാറേണ്ട വിധം, വ്യക്തിത്വം, മറുപടി ശൈലി അറിയിക്കുന്നു
• ഉപയോക്തൃ റോൾ: ആപ്ലിക്കേഷൻ ഉപയോഗിക്കുന്ന വ്യക്തിയുടെ ചോദ്യമോ സന്ദേശമോ
• അസിസ്റ്റന്റ് റോൾ: എഐയുടെ മറുപടി (ഇത് നിങ്ങൾ അയയ്ക്കുന്നില്ല, എന്നാൽ സംഭാഷണചരിത്രത്തിൽ വച്ചു കാണപ്പെടും)

വാസ്തവ ലോക ഉദാഹരണം: കൂട്ടത്തിൽ നിങ്ങളുടെ സുഹൃത്തെ പരിചയപ്പെടുത്തുന്നതുപോലെ:

• സിസ്റ്റം സന്ദേശം: "ഇவர் എന്റെ സുഹൃത്ത് സാറാ, ഇവർ ഒരു ഡോക്ടറാണ്,വൈദ്യശാസ്ത്രം ലളിതമായി വിശദീകരിക്കാനും കഴിയും"
• ഉപയോക്തൃ സന്ദേശം: "വാക്സിനുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് വിശദീകരിക്കാമോ?"
• അസിസ്റ്റന്റ് മറുപടി: സാറാ ഒരു പ്രിയപ്പെട്ട ഡോക്ടറായി പ്രതികരിക്കുന്നു, അഭിഭാഷകയോ ഷെഫ് ആകാതെ

എഐ പാരാമീറ്ററുകൾ മനസ്സിലാക്കൽ: മറുപടി പെരുമാറ്റം ഫൈൻ-ട്യൂൺ ചെയ്യൽ

എഐ API കോൾസിലെ സംഖ്യാത്മക പാരാമീറ്ററുകൾ മോഡൽ എങ്ങനെ മറുപടി സൃഷ്ടിക്കുമെന്ന് നിയന്ത്രിക്കുന്നു. വ്യത്യസ്ത പ്രയോഗങ്ങൾക്കായി എഐ പെരുമാറ്റം ക്രമീകരിക്കാൻ ഈ സെറ്റിംഗുകൾ സഹായിക്കുന്നു:

Temperature (0.0 മുതൽ 2.0 വരെ): സൃഷ്ടിപരത്വത്തിന്റെ ഡയൽ

എന്താണ് ചെയ്യുന്നത്: എഐയുടെ മറുപടികൾ എത്ര സൃഷ്ടിപരവും പ്രവചനീയവുമായിരിക്കും എന്നത് നിയന്ത്രിക്കുന്നു.

ജാസ് സങ്കേതജ്ഞന്റെ സ്വരാഭിനയത്തിന് സമാനമായി:

• 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  # വ്യത്യസ്തവും പ്രതീക്ഷിക്കാത്തതുമായ കഥകൾ സൃഷ്ടിക്കും
)

Max Tokens (1 മുതൽ 4096+ വരെ): മറുപടി നീളം നിയന്ത്രകന്‍

എന്താണ് ചെയ്യുന്നത്: എഐ മറുപടി എത്ര ദൈർഘ്യമാകണമെന്ന നിശ്ചയം.

ടോക്കണുകൾ സാധാരണമെന്നാണ് വാക്കുകൾ എന്നതുമായി താരതമ്യം ചെയ്യപ്പെടുന്നത് (പ്രായോഗികമായി 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  # ഉദാഹരണങ്ങളോടെയുള്ള വിശദമായ വിശദീകരണങ്ങൾക്ക് അവസരം നൽകുന്നു
)

Top_p (0.0 മുതൽ 1.0 വരെ): ശ്രദ്ധ ഭേദഗതി

എന്താണ് ചെയ്യുന്നത്: ഏറ്റവും സാധ്യതാ കൈവരബാധനമുള്ള പദങ്ങൾ എത്ര സാധാരണമായി കണക്കാക്കണമെന്ന് നിയന്ത്രിക്കുന്നു.

വളരെയധികം വാക്കുകളിൽ നിന്നുള്ള ഒരു ക്രമീകരിതപ്പെട്ട വാക്കുകോഷം എയർ, കൂടാത, ഉയർന്ന സാധ്യത ഉള്ളവകൾക്കായി ഷോർട്ട് ലിസ്റ്റ് തിരഞ്ഞെടുക്കുന്നു:

• 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 എഐ പാർമീറ്റർ ഓപ്റ്റിമൈസേഷൻ മാട്രിക്‌സ്
    x-axis കുറവ് സൃഷ്‌ടിപ്പാട് --> ഉയർന്ന സൃഷ്‌ടിപ്പാട്
    y-axis കുറഞ്ഞ പ്രതികരണം --> ദീർഘ പ്രതികരണം
    
    quadrant-1 സൃഷ്‌ടിപരമായ ഉള്ളടക്കം
    quadrant-2 വിശദമായ വിശകലനം
    quadrant-3 വേഗത്തിലുള്ള വസ്തുതകൾ
    quadrant-4 സംവാദാത്മക എഐ
    
    Documentation Bot: [0.2, 0.3]
    Customer Service: [0.4, 0.4]
    General Assistant: [0.7, 0.5]
    Creative Writer: [0.9, 0.9]
    Brainstorming Tool: [0.8, 0.8]

ഈ പാരാമീറ്ററുകൾ എന്തുകൊണ്ട് പ്രധാനമെന്നു മനസ്സിലാക്കുക: വ്യത്യസ്ത ആപ്ലിക്കേഷൻ ഉദ്ദേശ്യങ്ങൾ വ്യത്യസ്തമായ പ്രതിപാദനങ്ങൾ വേണം. ഒരു കസ്റ്റമർ സർവീസ് ബോട്ട് സ്ഥിരതയും വസ്തുനിഷ്ഠതയും വേണം (കുറഞ്ഞ temperature), ഹൈമാനസിക രചന അസിസ്റ്റന്റ് സൃഷ്ടിപരവും വൈവിധ്യമാർന്നതുമായ വേണം (ഉയർന്ന temperature). ഈ പാരാമീറ്ററുകൾ അറിയുന്നത് നിങ്ങളുടെ എഐയുടെ വ്യക്തിത്വത്തെയും മറുപടി ശൈലിയെയും നിയന്ത്രിക്കാൻ സഹായിക്കും.

**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))

ഈ മെച്ചപ്പെട്ട ഫംഗ്ഷൻ മനസ്സിലാക്കുക:

• രണ്ട് പാരാമീറ്ററുകൾ സ്വീകരിക്കുന്നു: ഉപയോക്തൃ പ്രോംപ്റ്റും ഐച്ഛിക സിസ്റ്റം സന്ദേശവും
• സാധാരണ സിസ്റ്റം സന്ദേശം നൽകുന്നു: പൊതുവായ അസിസ്റ്റന്റ് പെരുമാറ്റത്തിനായി
• ബഹുതരം പൈത്തൺ ടൈപ്പ് ഹിങ്ക്‌സ് ഉപയോഗിക്കുന്നു: നല്ല കോഡ് ഡോക്യുമെന്റേഷനായി
• വ്യത്യസ്ത ഡോക്സ്ട്രിംഗ് ഉൾപ്പെടുത്തുന്നു: ഫംഗ്ഷന്റെ ഉദ്ദേശം, പാരാമീറ്ററുകൾ വിശദീകരിക്കാൻ
• ഉപരിതലത്തിൽ മറുപടി ഉള്ളടക്കം മാത്രം തിരിച്ചയയ്‌ക്കുന്നു: വെബ് APIയിൽ എളുപ്പത്തിൽ ഉപയോഗിക്കാം
• മോഡൽ പാരാമീറ്ററുകൾ മനസ്സിലാക്കി സ്ഥിരത കാത്തുസൂക്ഷിക്കുന്നു

സിസ്റ്റം പ്രോംപ്റ്റുകളുടെ മായാജാലം: എഐ വ്യക്തിത്വം പ്രോഗ്രാമിംഗ്

പാരാമീറ്ററുകൾ എഐ എങ്ങനെ ചിന്തിക്കും എന്ന് നിയന്ത്രിക്കുന്നുവെങ്കിൽ, സിസ്റ്റം പ്രോംപ്റ്റുകൾ എഐ ആരെന്നു തീരുമാനിക്കുന്നു. ഇത് എഐ-യുമായി പ്രവർത്തിക്കുമ്പോൾ ഏറ്റവും രസകരമായ ഭാഗങ്ങളിൽ ഒന്ന് ആണ് – നിങ്ങൾ എഐയെ മുഴുവൻ വ്യക്തിത്വവും വിദഗ്ധതയും സംവാദശൈലിയും നൽകുന്നു.

വിവിധ അഭിനയപരിപാടികൾക്കായി വ്യത്യസ്ത അഭിനേതാക്കളെ തേടുന്നതുപോലെ സിസ്റ്റം പ്രോംപ്റ്റുകൾ: ഒന്നിനുമുപരി സാധാരണ അസിസ്റ്റന്റ്‌ തന്നെയുള്ളതിൽ, നിങ്ങൾ വ്യത്യസ്ത സാഹചര്യങ്ങൾക്ക് പ്രത്യേക വിദഗ്‌ധർ സൃഷ്ടിക്കാം. സഹനശീലമുള്ള അധ്യാപകൻ വേണേ? സൃഷ്ടിപരമായ ആശയമനസ്സിലാക്കുന്ന കൂട്ടുകാരൻ വേണേ? ബിസിനസ് ഉപദേശകൻ വേണേ? സിസ്റ്റം പ്രോംപ്റ്റ് മാറ്റിച്ചേരുക!

സിസ്റ്റം പ്രോംപ്റ്റുകൾക്ക് ഈത്ര ശക്തിയുണ്ടാകുന്നതിനുള്ള കാരണം

കൊതിക്കുന്നത് ഇതാണ്: എഐ മോഡലുകൾ അനവധി സംഭാഷണങ്ങളിൽ വ്യത്യസ്ത വേഷവും വിദഗ്ധതാ നിലവാരവും സ്വീകരിക്കുന്നവരെ പാഠപുസ്തകമായാണ് പരിശീലനമെടുത്തത്. നിങ്ങൾ എഐക്ക് ഒരു പ്രത്യേക വേഷം നൽകി, അത് ആ പാഠപുസ്തക മാതൃകകൾ മുഴുവൻ സജീവമാക്കുന്ന സ്വിച്ച് പോലെയാണ്.

ഇത് എഐക്കായുള്ള മെതഡ്ആക്ടിംഗ് പോലെയാണ്: ഒരുത്തനെ "നീ ഒരു ജ്ഞാനാർജ്ജിതൻ പ്രൊഫസർ ആണ്" എന്ന് പറയുമ്പോൾ എങ്ങനെ automática ആയി അവൻ തനിക്ക് അനുയോജ്യമായ നിലപാടും പദങ്ങൾ ഉപയോഗിക്കുകയും പെരുമാറുകയും ചെയ്യുന്നു. എഐ സുഗമമായി അതേ മാതൃകയിൽ പ്രവർത്തിക്കുന്നു.

ഫലപ്രദമായ സിസ്റ്റം പ്രോംപ്റ്റുകൾ തയ്യാറാക്കൽ: കലയും ശാസ്ത്രവും

ഒരു മികച്ച സിസ്റ്റം പ്രോംപ്റ്റിന്റെ ഘടന:

1. റോൾ/ഐഡന്റിറ്റി: എഐ ആരാണ്?
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."

പ്രസംഗശൈലിയും പശ്ചാത്തലവുമായി സിസ്റ്റം പ്രോംപ്റ്റ് ഉദാഹരണങ്ങൾ

വിവിധ സിസ്റ്റം പ്രോംപ്റ്റുകൾ എഐയുടെ വ്യക്തിത്വം എങ്ങനെ പൂര്‍ണമായും മാറ്റും എന്ന് കാണാം:

# ഉദാഹരണം 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.
"""

സിസ്റ്റം പ്രോംപ്റ്റുകൾ പ്രയോഗത്തിൽ കാണുക

ഒരേ ചോദ്യവുമായി വ്യത്യസ്ത സിസ്റ്റം പ്രോംപ്റ്റുകൾ പരീക്ഷിച്ച് വലിയ വ്യത്യാസങ്ങൾ കാണുക:

ചോദ്യമാറ്റം: "എന്റെ വെബ് ആപ്ലിക്കേഷനിൽ ഉപയോക്തൃ സ്ഥിരീകരണം എങ്ങനെ കൈകാര്യം ചെയ്യാം?"

# അധ്യാപക_prompt:
teacher_response = call_llm(
    "How do I handle user authentication in my web app?",
    teacher_prompt
)
# സാധാരണ പ്രതികരണം: "നല്ല ചോദ്യം! ഞങ്ങൾ प्रमाणीकरणം സരളമായ ഘട്ടങ്ങളിലേക്ക് വിഭജിക്കാം.
# ഇത് ഒരു ക്ലബ് ബൗൺസർ ഐഡികൾ പരിശോധിക്കുന്നതുപോലെ തോന്നുക..."

# ബിസിനസ്സ്_prompt:
business_response = call_llm(
    "How do I handle user authentication in my web app?", 
    business_prompt
)
# സാധാരണ പ്രതികരണം: "മേധാവിത്വപരമായ കാഴ്‌ചയിൽ നിന്ന്, प्रमाणीकरणം ഉപയോക്തൃ
# വിശ്വാസത്തിനും നിയമാനുസരണത്തിനുമുള്ള നിർണ്ണായകമാണ്. സുരക്ഷ,
# ഉപയോക്തൃ അനുഭവം, വിപുലീകരണക്ഷമത എന്നിവ പരിഗണിച്ച് ഒരു രൂപരേഖ ഞാൻ വാക്കാം..."

ഉയർന്ന തലത്തിലുള്ള സിസ്റ്റം പ്രോംപ്റ്റ് നൈപുണ്യങ്ങൾ

1. പശ്ചാത്തലം സജ്ജമാക്കൽ: എഐക്ക് സാമീപ്യമുള്ള വിവരം നൽകുക

system_prompt = """
You are helping a junior developer who just started their first job at a startup. 
They know basic HTML/CSS/JavaScript but are new to backend development and databases. 
Be encouraging and explain things step-by-step without being condescending.
"""

2. Output Formatting: AI പ്രതികരണങ്ങൾ എങ്ങനെ ഘടിപ്പിക്കണമെന്നതിനെക്കുറിച്ച് പറയും

system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation 
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""

3. Constraint Setting: AI ചെയ്യാവതല്ലാത്ത കാര്യങ്ങൾ നിർവചിക്കുക

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 പരാമീറ്ററുകൾ തമ്മിലുള്ള വ്യതിയാനം എന്താണ്?
• പ്രത്യേക ഉപയോഗത്തിനായി (ഉദാ: കോഡിംഗ് അധ്യാപകൻ) സിസ്റ്റം പ്രാമ്പ്റ്റ് എങ്ങനെ സൃഷ്‌ടിക്കും?

യാഥാർഥ്യ വിവരവിനിമയം: നിങ്ങൾ പഠിച്ച സിസ്റ്റം പ്രമ്പ്റ്റ് സാങ്കേതികവിദ്യകൾ GitHub Copilot ന്റെ കോഡിംഗ് സഹായം മുതൽ ChatGPT ന്റെ സംവാദ_INTERFACE വരെ എല്ലാ പ്രധാന AI ആപ്ലിക്കേഷനുകളിലും ഉപയോഗിക്കപ്പെടുന്നു. ആ പ്രമുഖ ടെക് കമ്പനികളിലെ AI ഉൽപ്പന്ന സംഘങ്ങൾ ഉപയോഗിക്കുന്ന രീതികളാണ് നിങ്ങൾ അഭ്യസിക്കുന്നത്.

പ്രശ്നം: വ്യത്യസ്ത ഉപയോക്തൃ തരങ്ങൾ (ആരംഭകർ vs വിദഗ്ദ്ധർ)ക്കായി വ്യത്യസ്ത AI വ്യക്തിത്വങ്ങൾ എങ്ങനെ രൂപകൽപ്പന ചെയ്യാം? ഒരേ അടിസ്ഥാന AI മോഡലിന് വ്യത്യസ്ത പ്രേക്ഷകരെ സേവിക്കാൻ prompt എഞ്ചിനീയറിങ്ങിലൂടെ ഇതിനെ എങ്ങനെ നയിക്കാമെന്നു പരിഗണിക്കുക.

FastAPI ഉപയോഗിച്ച് വെബ് API നിർമ്മാണം: നിങ്ങളുടെ ഉയർന്ന പ്രകടന AI സംവാദ കേന്ദ്രം

ഇപ്പോൾ നമ്മൾ പ്രോ前്റ്endt ന് AI സേവനങ്ങൾ ബന്ധിപ്പിക്കുന്ന ബാക്ക്എൻഡ് നിർമ്മിക്കാം. AI ആപ്ലിക്കേഷനുകൾക്ക് API നിർമ്മാണത്തിൽ മികവുറ്റ ആധുനിക പൈതൺ ഫ്രെയിംവർക്കായ FastAPI നാം ഉപയോഗിക്കും.

FastAPI ഈ തരം പ്രോജക്ടുകൾക്ക് ചില പ്രധാന ഗുണങ്ങൾ നൽകുന്നു: സമകാലിക അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്‌യാനുള്ള സ built്‌മിത async പിന്തുണ, ഓട്ടോമാറ്റിക് API ഡോക്യൂമെൻറേഷൻ സൃഷ്‌ടിക്കൽ, നല്ല പ്രകടനം. നിങ്ങളുടെ FastAPI സെർവർ ഫ്രോണ്ട്എൻഡിൽ നിന്ന് അഭ്യർത്ഥനകൾ സ്വീകരിച്ച് AI സേവനങ്ങളുമായി സംവദിച്ച് ഫോർമാറ്റ് ചെയ്ത പ്രതികരണങ്ങൾ തിരിച്ചുകൊടുക്കുന്ന ഒരു ഇടനിലക്കാരനായി പ്രവർത്തിക്കും.

AI ആപ്ലിക്കേഷനുകൾക്കായി എന്തിന് FastAPI?

നിങ്ങൾക്ക് ആശങ്കയുണ്ടാകാം: "ഞാൻ നേരിട്ട് എന്റെ ഫ്രോണ്ട്എൻഡ് ജാവാസ്ക്രിപ്റ്റിൽ നിന്നു AI വിളിക്കാനാകില്ലേ?" അല്ലെങ്കിൽ "Flask അല്ലെങ്കിൽ Django ലഭ്യമാകുമ്പോൾ FastAPI എന്തിനാണ്?" നല്ല ചോദ്യങ്ങൾ!

ഇതാ നമുക്ക് FastAPI യാണ് ഞങ്ങൾ നിർമ്മിക്കുന്നതിനു ഏറ്റവും അനുയോജ്യം ആകാനുള്ള കാരണങ്ങൾ:

• സ്വാഭാവിക async: ഒരേ സമയം അനേകം AI അഭ്യർത്ഥനകൾ നടത്തുന്നതിന് ക്രമരഹിതമാക്കാതെ
• ഓട്ടോ ഡോക്സ്: /docs സന്ദർശിച്ചാൽ സൗജന്യമായി സ്‌ളിക്, ഇന്ററാക്റ്റീവ് API ഡോക്യൂമെന്റേഷൻ ലഭിക്കും
• സ്റ്റാറ്റിക് പരിശോധന: പ്രശ്നങ്ങൾ ഉണ്ടാകുന്നതിനു മുൻപ് പിഴവുകൾ പിടികൂടുന്നു
• വേഗതയിൽ പെട്ടതാണ്: പൈതൺ ഫ്രെയിംവർക്കുകളിൽ ഒന്ന് ഏറ്റവും വേഗമുള്ളത്
• ആധുനിക പൈതൺ: ഏറ്റവും പുതിയ പൈതൺ സവിശേഷതകൾ മുഴുവനും ഉപയോഗിക്കുന്നു

പശ്ചാത്തലം ആവശ്യമുള്ള കാരണം:

സുരക്ഷ: നിങ്ങളുടെ AI API കീ ഒരു പാസ്വേഡുപോലെയാണ് – അതു ഫ്രോണ്ട്എൻഡ് ജാവാസ്ക്രിപ്റ്റിൽ ഇടുകയാണെങ്കിൽ, നിങ്ങളുടെ സൈറ്റിന്റെ സോഴ്സ് കോഡ് കാണുന്ന ഏവർക്കും അത് മോഷ്ടിക്കാൻ കഴിയും, നിങ്ങളുടെ AI ക്രെഡിറ്റുകള്‍ പ്രസ്സിദ്ധീകരിക്കാൻ കഴിയും. ബാക്ക്എൻഡ് ഈ രഹസ്യ വിവരങ്ങൾ സുരക്ഷിതമാക്കുന്നുണ്ട്.

റേറ്റ് ലിമിറ്റിങ്ങും നിയന്ത്രണവും: എത്രവട്ടം ഉപയോക്താക്കൾ അഭ്യർത്ഥനകൾക്ക് സാധിക്കണെന്ന് നിയന്ത്രിക്കാൻ, ഉപയോക്തൃ തിരിച്ചറിവ് നടപ്പിലാക്കാൻ, ഉപയോഗം ട്രാക്ക് ചെയ്യാനുളള രജിസ്റ്റര്‍ ഇങ്ങനെ ബാക്ക്എൻഡ് നൽകുന്നു.

ഡാറ്റ പ്രോസസ്സിങ്: സംഭാഷണങ്ങൾ സേവ് ചെയ്യാനോ, അപുolyക്തമായ ഉള്ളടക്കം തിരിച്ചു കാണാനോ, അനേകം AI സേവനങ്ങൾ സംയോജിപ്പിക്കാനോ നിങ്ങൾക്ക് കഴിയും. ഇതേതന്നെ ബാക്ക്എൻഡാണ്.

വ്യവസ്ഥിതത്തിൻറെ മാതൃക:

• ഫ്രോണ്ട്എൻഡ്: ഉപയോക്തൃ ഇന്റർഫേസ് ലെയർ
• ബാക്ക്എൻഡ് API: അഭ്യർത്ഥന പ്രോസസ്സിങ്, റൂട്ടിംഗ്
• AI സേവനം: ബാഹ്യ കംപ്യൂട്ടേഷൻ, പ്രതികരണ നിർമാണം
• പരിസ്ഥിതി വ്യത്യാസങ്ങൾ: സുരക്ഷിത കോൺഫിഗറേഷൻ, ക്രെഡൻഷ്യൽ സംഭരണം

അഭ്യർത്ഥന-പ്രതികരണം പ്രവാഹം മനസ്സിലാക്കൽ

ഉപയോക്താവ് ഒരു സന്ദേശം അയച്ചാൽ എന്ത് സംഭവിക്കുന്നു കാണാം:

sequenceDiagram
    participant User as 👤 ഉപയോക്താവ്
    participant Frontend as 🌐 ഫ്രണ്ട്‌എൻഡ്
    participant API as 🔧 ഫാസ്റ്റ്എപി ഐ സർവർ
    participant AI as 🤖 എ.ഐ സേവനം
    
    User->>Frontend: പോലിചെയ്യുന്നു "ഹലോ എ.ഐ!"
    Frontend->>API: പോസ്റ്റ് /hello {"message": "ഹലോ എ.ഐ!"}
    Note over API: അഭ്യർത്ഥന പരിശോധിക്കുന്നു<br/>സിസ്റ്റം പ്രാമ്പ്റ്റ് ചേർക്കുന്നു
    API->>AI: ഫോർമാറ്റ് ചെയ്ത അഭ്യർത്ഥനം അയയ്ക്കുന്നു
    AI->>API: എ.ഐ പ്രതികരണം തിരിച്ചയയ്ക്കുന്നു
    Note over API: പ്രതികരണം പ്രോസസ്സ് ചെയ്യുന്നു<br/>സംവാദം രേഖപ്പെടുത്തുന്നു
    API->>Frontend: {"response": "ഹലോ! എങ്ങനെ സഹായിക്കാമായിരുന്നു?"}
    Frontend->>User: എ.ഐ സന്ദേശം പ്രദർശിപ്പിക്കുന്നു

ഓരോ ഘട്ടവും മനസ്സിലാക്കൽ:

1. ഉപയോക്തൃ ഇടപെടൽ: ആളുകൾ ചാറ്റ് ഇന്റർഫേസിൽ ടൈപ്പ് ചെയ്യുന്നു
2. ഫ്രോണ്ട്എൻഡ് പ്രോസസ്സിങ്: ജാവാസ്ക്രിപ്റ്റ് ഇൻപുട്ട് JSON ആക്കി രൂപപ്പെടുത്തുന്നു
3. API പരിശോധന: FastAPI Pydantic മോഡലുകൾ ഉപയോഗിച്ച് ഓട്ടോമാറ്റിക് പരിശോധന നടത്തുന്നു
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 പോസ്റ്റ് അഭ്യർത്ഥന]
    C --> D[ഫാസ്റ്റ്എപിഐ റൂട്ടർ]
    D --> E[പൈഡാന്റിക് പരിശോധന]
    E --> F[എഐ ഫംഗ്ഷൻ കോൾ]
    F --> G[ഗിത്‌ഹബ് മോഡലുകൾ 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__)

# ഫാസ്റ്റ്എപിഐ അപ്ലിക്കേഷൻ സൃഷ്ടിക്കുക
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=["*"],
)

# ആവശ്യവും പ്രതികരണവും പരിശോദനയ്ക്കായി പൈഡാന്റിക് മോഡലുകൾ
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 നടപ്പാക്കലിന്റെ മനസ്സിലാക്കൽ:

• FastAPI ന്റെ ആധുനിക വെബ് ഫ്രെയിംവർക്ക് ഫംഗ്ഷനാലിറ്റി, Pydantic ഉപയോഗിച്ച് ഡാറ്റാ പരിശോധക
• ഓട്ടോമാറ്റിക് API ഡോക്യൂമെന്റേഷൻ സൃഷ്‌ടിക്കുന്നു (/docsൽ ലഭ്യമാണ്)
• CORS മിഡിൽവെയർ അനുവദിച്ച് വ്യത്യസ്ത ഉറവിടങ്ങളിൽ നിന്നുള്ള ഫ്രോണ്ട്എൻഡ് അഭ്യർത്ഥനകൾക്ക് അനുമതി നൽകുന്നു
• ഓട്ടോമാറ്റിക് അഭ്യർത്ഥന/പ്രതികരണം പരിശോധിക്കുന്നതിന് Pydantic മോഡലുകൾ നിർവചിക്കുന്നു
• സമകാലിക അഭ്യർത്ഥനകൾക്കും മികച്ച പ്രകടനത്തിനും async എന്റ്പോയിൻറുകൾ ഉപയോഗിക്കുന്നു
• HTTPException ഉപയോഗിച്ച് ശരിയായ HTTP നിലകോഡ്, പിഴവുകൾ കൈകാര്യം ചെയ്യുന്നു
• നിരീക്ഷണത്തിനും ഡീബഗിനും ഘടനാപരമായ ലോഗ്ഗിംഗ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്
• സേവന നില പരിശോധിക്കാൻ ഹെൽത്ത് ചെക്ക് എന്റ്പോയിൻറ് നൽകുന്നു

പാരമ്പര്യ ഫ്രെയിംവർക്കുകളിൽ നിന്ന് FastAPI യുടെ പ്രധാന ഗുണങ്ങൾ:

• ഓട്ടോമാറ്റിക് പരിശോധന: Pydantic മോഡലുകൾ ഡാറ്റയുടെ വിശ്വാസ്യത ഉറപ്പാക്കുന്നു
• ഇന്ററാക്റ്റീവ് ഡോക്സ്: /docs ൽ സ്വയം സൃഷ്ടിക്കപ്പെട്ട പരീക്ഷണ API ഡോക്യൂമെന്റേഷൻ
• ടൈപ്പ് സുരക്ഷ: പൈതൺ ടൈപ്പുകൾ റൺടൈം പിഴവുകൾ കുറയ്ക്കുകയും കോഡ് ഗുണമേന്മ മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു
• async പിന്തുണ: ഒരേ സമയം അനേകം AI അഭ്യർത്ഥനകൾ തടസ്സമില്ലാതെ കൈകാര്യം ചെയ്യുന്നു
• പ്രകടനം: യഥാർത്ഥസമയം ആപ്ലിക്കേഷനുകൾക്കായി വളരെ വേഗത്തിലുള്ള അഭ്യർത്ഥന പ്രോസസ്സിങ്

CORS മനസ്സിലാക്കൽ: വെബിന്റെ സുരക്ഷാ ഗാർഡ്

CORS (Cross-Origin Resource Sharing) ഒരു കെട്ടിടത്തിലെ സുരക്ഷാ ഗാർഡിനെപ്പോലെ ആണ്, സന്ദർശകർ പ്രവേശിക്കാനാവുന്നതാണോ എന്ന് പരിശോധിക്കുന്നു. ഇതിന്റെ പ്രാധാന്യവും നിങ്ങളുടെ അപ്ലിക്കേഷനിൽ എങ്ങനെ പ്രവർത്തിക്കുന്നുമാണ് നോക്കുക.

CORS എന്താണ്, എന്തുകൊണ്ടാണ് ഇത് വേണ്ടത്?

പ്രശ്നം: ഏതെങ്കിലും വെബ്സൈറ്റ് നിങ്ങളുടെ ബാങ്ക് വെബ്സൈറ്റിലേക്ക് നിങ്ങളുടെ അനുമതിയില്ലാതെ അഭ്യർത്ഥനകൾ ചെയ്താൽ നിങ്ങളുടെ സുരക്ഷ നിരീക്ഷണം എന്താകും! ബ്രൗസറുകൾ ഇതു തടയാൻ "Same-Origin Policy" എന്ന നയം പിന്തുടരുന്നു.

Same-Origin നയം: ബ്രൗസറുകൾ വെബ് പേജുകൾക്ക് അതേ ഡൊമെയ്ൻ, പോർട്ട്, പ്രോട്ടോക്കോൾ എന്നിവയിൽ നിന്നുള്ള അഭ്യർത്ഥനകൾ മാത്രമേ അനുവദിക്കൂ.

യാഥാർത്ഥ്യ ഉദാഹരണം: ഇത് ഫ്‌ളാറ്റ് കെട്ടിടത്തിന്റെ സുരക്ഷ പോലെയാണ് – താമസക്കാർ (അത് പോലെ origin ഉള്ളവർ) മാത്രമേ കെട്ടിടത്തിലേക്ക് പ്രവേശനം ഉള്ളൂ. നിങ്ങൾക്ക് ഒരു സുഹൃത്ത് (വ്യത്യസ്ത origin) സന്ദർശിക്കണമെങ്കിൽ സുരക്ഷയ്ക്ക് നിര്ദ്ദേശം നൽകണം.

നിങ്ങളുടെ വികസന പരിസരത്ത് CORS

വികസന ഘട്ടത്തിൽ ഫ്രോണ്ട്എൻഡ്, ബാക്ക്എൻഡ് വ്യത്യസ്ഥ പോർട്ടുകളിലാണ് പ്രവർത്തിക്കുന്നത്:

• ഫ്രോണ്ട്എൻഡ്: http://localhost:3000 (അбо HTML നേരിട്ട് തുറക്കുമ്പോൾ file://)
• ബാക്ക്എൻഡ്: http://localhost:5000

ഇവ ഒരേ കമ്പ്യൂട്ടറിൽ ആയിട്ടും "വ്യത്യസ്ത origin" ആയി കണക്കാക്കപ്പെടുന്നു!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # ഇത് ബ്രൗസറുകളെ പറയുന്നു: "മറ്റ് ഉറവിടങ്ങൾ ഈ API-ലേക്ക് അഭ്യർത്ഥനകൾ ചെയ്യുന്നതിന് sorunilla"

CORS കോൺഫിഗറേഷൻ ഉപയോഗിക്കുമ്പോൾ സംഭവിക്കുന്നത്:

• API പ്രതികരണങ്ങളിൽ പ്രത്യേക HTTP ഹെഡറുകൾ ചേർക്കുന്നു, ബ്രൗസറുകൾക്ക് "ഈ ക്രോസ്-ഓറിജിൻ അഭ്യർത്ഥന അനുവദനീയമാണ്" എന്ന് അറിയിക്കാൻ
• "പ്രിഫ്‌ലൈറ്റ്" അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നു (ബ്രൗസറുകൾ ചിലപ്പോൾ മുഖ്യ അഭ്യർത്ഥന അയയ്ക്കുന്നതിനു മുമ്പ് അനുവാദം പരിശോധിക്കുന്നു)
• ബ്രൗസർ കണ്ട്രോളിൽ dreaded "blocked by CORS policy" പിഴവ് തടയുന്നു

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 CORSMiddleware-യിലെ origins-ലേക്ക് ചേർക്കുക
കസ്റ്റം ഡൊമെയ്ൻ	ഉത്പാദനത്തിൽ CORS പിഴവുകൾ	നിങ്ങളുടെ ഡൊമെയിൻ CORSMiddleware origins-ലേക്ക് പുതുക്കുക
മൊബൈൽ ആപ്പ്	ആപ്പ് വെബ് API-യിലേയ്ക്ക് പഠിക്കാൻ കഴിയുന്നില്ല	നിങ്ങളുടെ ആപ്പ് ഡൊമെയ്ന് ചേർക്കുക അല്ലെങ്കിൽ * കരുതിയുള്ള ഉപയോഗം

പ്രൊ ടിപ്പ്: നിങ്ങളുടെ ബ്രൗസറിന്റെ ഡെവലപ്പർ ടൂളുകളിൽ നെറ്റ്‌വർക്ക് ടാബിൽ CORS ഹെഡറുകൾ പരിശോധിക്കാം. Access-Control-Allow-Origin പോലുള്ള ഹെഡറുകൾ മറുപടിയിൽ കാണുക.

പിഴവ് കൈകാര്യം ചെയ്യലും പരിശോധനയും

നമ്മുടെ API ഉചിതമായ പിഴവ് കൈകാര്യം ചെയ്യൽ ഉൾക്കൊള്ളുന്നതാണ്:

# ഞങ്ങൾ ഒരു സന്ദേശം സ്വീകരിച്ചതെന്നത് സാധൂകരിക്കുക
if not message:
    return jsonify({"error": "Message field is required"}), 400

പ്രധാന പരിശോധന നിഗമനങ്ങൾ:

• ആവശ്യമായ ഫീൽഡുകൾ പരിശോധന അഭ്യർത്ഥന പ്രോസസ്സിംഗ് മുമ്പായി
• ഇന്ത്യരം പിഴവുമെസേജുകൾ JSON ആയി മടക്കം
• സംഭവിക്കുന്ന HTTP നില സുരക്ഷകൾ (400 - തെറ്റായ അഭ്യർത്ഥനകൾ)
• ഫ്രോണ്ട്എൻഡ് ഡെവലപ്പർമാർക്ക് ഡീബഗ്ഗിങ്ങിന് വ്യക്തമായ ഫീഡ്ബാക്ക് നൽകൽ

നിങ്ങളുടെ ബാക്ക്എൻഡ് സജ്ജമാക്കി പ്രവർത്തിപ്പിക്കൽ

നമുക്ക് AI സംയോജനം, FastAPI സെർവർ എല്ലാം സജ്ജമാക്കിയതിന് ശേഷം എല്ലാം പ്രവർത്തിപ്പിക്കാം. സജ്ജീകരണ prosess Python ആശ്രിതങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യൽ, പരിസ്ഥിതി വ്യത്യാസങ്ങൾ കോൺഫിഗർ ചെയ്യൽ, ഡെവലപ്പ്മെന്റ് സെർവർ ആരംഭിക്കൽ എന്നിവ ഉൾപ്പെടുന്നു.

പൈതൺ പരിസ്ഥിതി സജ്ജമാക്കൽ

നിങ്ങളുടെ Python ഡെവലപ്പ്മെന്റ് പരിസ്ഥിതി സജ്ജമാക്കാം. വിർച്വൽ പരിസ്ഥിതികൾ മാൻഹാറ്റൻ പ്രോജക്ടിന്റെ വിഭാഗീകരിച്ച സമീപനത്തോട് పోలിയാണ് – ഓരോ പ്രോജക്ടിനും പ്രത്യേക ഡിപ്പെൻഡൻസികളുള്ള സ്വതന്ത്ര സ്ഥലം, വിവിധ പ്രോജക്റ്റുകൾ തമ്മിൽ സംഘർഷം ഒഴിവാക്കുന്നു.

# നിങ്ങളുടെ ബാക്ക്‌എൻഡ് ഡയറക്ടറിയിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക
cd backend

# ഒരു വിർച്വൽ എൻവയോൺമെന്റ് സൃഷ്ടിക്കുക (നിങ്ങളുടെ പ്രോജക്റ്റിന് ഒരു ശുചിത്വ മുറി സൃഷ്ടിക്കുന്നതുപോലെ)
python -m venv venv

# അത് സജീവമാക്കുക (Linux/Mac)
source ./venv/bin/activate

# Windows-ൽ, ഉപയോഗിക്കുക:
# venv\Scripts\activate

# നല്ല സാധനങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യുക
pip install openai fastapi uvicorn python-dotenv

നാം ഇപ്പോഴത്തെ കുറിച്ചത്:

• ഇനി വേറെയെന്തിനും ബാധിക്കാതെ പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യാവുന്ന ചെറിയ Python ബബ്ബിൾ സൃഷ്‌ടിച്ചു
• ആക്ടിവേറ്റ് ചെയ്‌തു, ടേർമിനൽ ഈ പ്രത്യേക പരിസ്ഥിതി ഉപയോഗിക്കാൻ അറിയിച്ചു
• ആവശ്യങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്തു: OpenAI (AI മാജിക്ക്), FastAPI (വെബ് API), Uvicorn (റെസർവർ പ്രവർത്തിപ്പിക്കാൻ), python-dotenv (രഹസ്യ സുരക്ഷിതമാക്കൽ)

പ്രധാന ആശ്രിതങ്ങൾ വിശദീകരണം:

• FastAPI: ആധുനിക, വേഗമുള്ള വെബ് ഫ്രെയിംവർക്ക്, ഓട്ടോ API ഡോക്
• Uvicorn: അതിവേഗ ASGI സർവർ, FastAPI ആപ്ലിക്കേഷൻങൾ പ്രവർത്തിപ്പിക്കുന്നു
• OpenAI: GitHub മോഡലുകൾക്കും OpenAI API സംയോജനത്തിനും ഔദ്യോഗിക ലൈബ്രറി
• python-dotenv: .env ഫയലുകളിൽ നിന്ന് പരിസ്ഥിതി വ്യത്യാസങ്ങൾ സുരക്ഷിതമായി ലോഡ് ചെയ്യുന്നു

പരിസ്ഥിതി ക്രമീകരണം: രഹസ്യങ്ങൾ സുരക്ഷിതമായ നിലനിർത്തൽ

API ആരംഭിക്കുന്നതിന് മുമ്പ് വെബ് വികസനത്തിലെ ഏറ്റവും പ്രധാന പാഠങ്ങളിൽ ഒന്ന് ചർച്ച ചെയ്യേണ്ടതുണ്ട്: രഹസ്യവിവരങ്ങൾ എങ്ങനെ യഥാർത്ഥത്തിൽ രഹസ്യമാക്കി സൂക്ഷിക്കണം. പരിസ്ഥിതി വ്യത്യാസങ്ങൾ ഒരു സുരക്ഷിത വാൾട്ട് പോലെയാണ്, നിങ്ങളുടെ ആപ്ലിക്കേഷന മാത്രമേ ആക്സസ് ചെയ്യൂ.

പരിസ്ഥിതി വ്യത്യാസങ്ങൾ എന്തൊന്ന്?

പരിസ്ഥിതി വ്യത്യാസങ്ങളെ സുരക്ഷിത കേസിടുപ്പുപോലെ കരുതുക - വിലയേറിയവ ഇവിടെ സൂക്ഷിക്കുന്നു, മാത്രമേ നിങ്ങൾക്കും നിങ്ങളുടെ ആപ്പിനും കീ ഉളളൂ. രഹസ്യ വിവരങ്ങൾ നേരിട്ട് കോഡിൽ എഴുതുന്നതിനുപകരം (അവിടെ Literally ആരും കാണാവുന്നതാണ്) സുരക്ഷിതമായി സ്റ്റോർ ചെയ്യുന്നു.

ഇതിൽ വ്യത്യാസം:

• തെറ്റായ വഴി: പാസ്‌വേഡ് സ്റ്റിക്കി നോട്ടിൽ എഴുതി സ്ക്രീനിന് മുകളിൽ ഒട്ടിക്കുക
• തെറ്റില്ലാത്ത വഴി: പാസ്‌വേഡ്സ് മാനേജർ ഉപയോഗിച്ച് സൂക്ഷിക്കുക, നിങ്ങൾ മാത്രമേ അവക്ക് ആക്സസ് ഉണ്ടായിരിക്കൂ

പരിസ്ഥിതി വ്യത്യാസം എന്തുകൊണ്ടാണ് പ്രധാനപ്പെട്ടത്

# 🚨 ഇതൊ absolute ഹിതം ചിലവഴിക്കരുത് - API കി എല്ലാവർക്കും görünabilen
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. ടീം പങ്കിടൽ: മറ്റ് ഡെവലപ്പർമാർക്കും നിങ്ങളുടെ വ്യക്തിഗത കീ ലഭിക്കും
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 Settings → Developer settings → Personal access tokens → Tokens (classic)
2. "Generate new token (classic)" ക്ലിക്ക് ചെയ്യുക
3. കാലാവധി (30 ദിവസം പരീക്ഷണത്തിന്, ഉത്പാദനത്തിന് കൂടുതൽ) ക്രമീകരിക്കുക
4. ആവശ്യമായ സ്കോപ്പുകൾ തിരഞ്ഞെടുക്കുക: "repo" ഉൾപ്പെടെ
5. ടോക്കൺ സൃഷ്‌ടിച്ച് ഉടനെ പേസ്റ്റ് ചെയ്യുക (.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 ഫയൽ ലോഡ് ചെയ്ത് പൈതണിൽ വെരിables ലഭ്യമാക്കുന്നു
• ആവശ്യമായ ടോക്കൺ ഉണ്ട് എന്ന് പരിശോധിക്കുന്നു (ശ്രേഷ്ഠപ്പെട്ട പിഴവ് കൈകാര്യം!)
• ടോക്കൺ ഇല്ലെങ്കിൽ വ്യക്തമായ പിഴവ് ഉയരാൻ ഇടയാക്കുന്നു
• കോഡ് വെളിപ്പെടുത്താതെ ടോക്കൺ സുരക്ഷിതമായി ഉപയോഗിക്കുന്നു

Git സുരക്ഷ: .gitignore ഫയൽ

.gitignore ഫയൽ Git-ന് ഏതെല്ലാം ഫയലുകൾ ട്രാക്ക് ചെയ്യരുത് എന്ന് പറയുന്നു:

# .gitignore - ഈ വരികൾ ചേർക്കുക
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/

ഇതിന്റെ പ്രാധാന്യമേന്തെന്നാൽ: .env ഫയൽ .gitignore ലിസ്റ്റിൽ ചേർത്താൽ Git അവ അപ്‌ലോഡ് ചെയ്യുന്നത് ഒഴിവാക്കുന്നു, രഹസ്യങ്ങൾ GitHub-യിൽ അനുദിനമാണ്.

വ്യത്യസ്ത പരിസ്ഥിതികൾ, വ്യത്യസ്ത രഹസ്യങ്ങൾ

പ്രൊഫഷണൽ ആപ്ലിക്കേഷനുകൾ വ്യത്യസ്ത പരിസ്ഥിതികൾക്കായി വ്യത്യസ്ത API കീകൾ ഉപയോഗിക്കുന്നു:

# .എൻവി.ഡെവലപ്പ്മെന്റ്
GITHUB_TOKEN=your_development_token
DEBUG=True

# .എൻവി.പ്രൊഡക്ഷൻ
GITHUB_TOKEN=your_production_token
DEBUG=False

ഇതിന്റെ പ്രാധാന്യം: നിങ്ങളുടെ ഡെവലപ്പ്മെന്റ് പരീക്ഷണങ്ങൾ ഉത്പാദന AI ഉപയോഗത്തിനും ക്രെഡിറ്റ് കണക്കിലുമുള്ള ബാധ ചുരുക്കാൻ, വ്യത്യസ്ത സുരക്ഷാ നിലവാരങ്ങൾ നിർവഹിക്കാൻ ഉപകരിക്കും.

നിങ്ങളുടെ ഡെവലപ്പ്മെന്റ് സെർവർ തുടങ്ങൽ: FastAPI ജീവൻകൊടുക്കുന്നു

ഇപ്പോൾ രസകരമായ ഘട്ടം വരുന്നു – നിങ്ങളുടെ FastAPI ഡെവലപ്മെന്റ് സർവറാരംഭിച്ച് നിങ്ങളുടെ AI ഇന്റഗ്രേഷൻ ജീവന്തമാവുന്നത് കാണുക! FastAPI ഉപയോഗിക്കുന്നത് Uvicorn ആണു്, ഒരു അതിവേഗ ASGI സർവർ, പ്രത്യേകിച്ച് async Python ആപ്പ്ലിക്കേഷനുകൾക്കായി രൂപകൽപ്പന ചെയ്തതു്.

FastAPI സർവർ സ്റ്റാർട്ടപ്പ് പ്രോസസ്സ് മനസ്സിലാക്കുക

# വിധി 1: നേരിട്ട് പൈതൺ നടപ്പാക്കൽ (ഓട്ടോ-റിലോഡ് ഉൾപ്പെടുന്നു)
python api.py

# വിധി 2: Uvicorn നേരിട്ട് ഉപയോഗിക്കൽ (കൂടുതൽ നിയന്ത്രണം)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload

നിങ്ങൾ ഈ കമാൻഡ് റൺചെയ്യുമ്പോൾ, പിന്നിൽ സംഭവിക്കുന്നത് ഇതാണ്:

1. Python നിങ്ങളുടെ FastAPI അപ്ലിക്കേഷൻ ലോഡ് ചെയ്യുന്നു:

• ആവശ്യമുള്ള എല്ലാം ലൈബ്രറികൾ ഇറക്കുമതി ചെയ്യുന്നു (FastAPI, Pydantic, OpenAI മുതലായവ)
• നിങ്ങളുടെ .env ഫയലിൽ നിന്നുള്ള എൻവയർമെന്റ് വെരിയബിളുകൾ ലോഡ് ചെയ്യുന്നു
• സ്വയം രേഖപ്പെടുത്തൽ (automatic documentation) ഉള്ള 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": "ഹലോ! ഞാൻ നിങ്ങളുടെ എഐ അസിസ്റ്റന്റാണ്. ഇന്ന് ഞാൻ എങ്ങനെ സഹായിക്കാമെന്ന് പറയൂ?"}

മെത്തഡ് 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)

സാധാരണ സ്റ്റാർട്ടപ്പ് പ്രശ്നങ്ങൾ പരിഹരിക്കുന്ന വിധം

Error Message	What It Means	How to Fix
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 മോഡലിന് വേണ്ടി ശരിയായ ഫോർമാറ്റിൽ അല്ല	നിങ്ങളുടെ അഭ്യർത്ഥന ഫോർമാറ്റ് Schema-യ്ക്ക് അനുയോജ്യമാണോ എന്ന് പരിശോധിക്കുക
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 നിങ്ങളുടെ സർവീസുകൾക്കായി പബ്ലിക് URLകൾ സ്വയം സൃഷ്ടിക്കുന്നു, പക്ഷേ അവ ശരിയായി കോൺഫിഗർ ചെയ്യേണ്ടതുണ്ട്.

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 URLകൾ മനസ്സിലാക്കുക

Codespace URLകൾ predictable pattern പിന്തുടരുന്നു:

https://[codespace-name]-[port].app.github.dev

ഇതിന്റെ വിശദാംശങ്ങൾ:

• codespace-name: നിങ്ങളുടെ Codespace നുള്ള ഒരു അനന്യത തിരിച്ചറിയൽ (സാധാരണ നിങ്ങളുടെ യൂസർനെയിം ഉൾപ്പെടുന്നു)
• port: നിങ്ങളുടെ സർവീസ് ഓടുന്ന പോർട്ട് നമ്പർ (5000 നമ്മുടെ FastAPI ആപ്പിന്)
• 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 ൽ Environment Variables: നിങ്ങളുടെ .env ഫയൽ Codespaces ലേക്ക് കടത്താം, കൂടാതെ Codepaces ല്‍ നേരിട്ട് എൻവയർമെന്റ് വെരിയബിളുകൾ സെറ്റ് ചെയ്യാം:

# നിലവിലെ സെഷനിനായി പരിസ്ഥിതി വേരിയബിൾ ക്രമീകരിക്കുക
export GITHUB_TOKEN="your_token_here"

# സ്ഥിരതയ്ക്ക് നിങ്ങളുടെ .bashrc-യിലേക്കും ചേർക്കുക
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc

Port മാനേജ്മെന്റ്:

• Codespaces നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പോർട്ടിൽ ലിസൻ ചെയ്യുന്നത് കണ്ടെത്തുന്നു
• നിങ്ങൾക്ക് ഒരേസമയം പല പോർട്ടുകളും ഫോർവേഡ് ചെയ്യാവുന്നതാണ് (മുൻപ് ഡാറ്റാബേസ് ചേർക്കുമ്പോൾ ഉപകാരപ്രദം)
• Codespace പ്രവർത്തിക്കുന്നോടെ പോർട്ടുകൾ ആക്‌സസിബിൾ ആയിരിക്കും

ഡെവലപ്മെന്റ് വർക്ക്‌ഫ്ലോ:

1. VS Codeയിൽ കോഡ് മാറ്റങ്ങൾ ചെയ്യുക
2. FastAPI ഓട്ടോ-റീലോഡ് ചെയ്യും (Uvicorn റീലോഡ് മോഡ് മൂലം)
3. പൊതു URL വഴിയായി ഉടനെ മാറ്റങ്ങൾ ടെസ്റ്റ് ചെയ്യുക
4. സജ്ജമായാൽ കോമിറ്റ് ചെയ്ത് പുഷ് ചെയ്യുക

💡 പ്രോ ടിപ്പ്: ഡെവലപ്മെന്റിനിടെ നിങ്ങളുടെ Codespace ബാക്ക്‌എൻഡ് URL ബുക്ക് മാർക്ക് ചെയ്യുക. Codespace നാമങ്ങൾ സ്ഥിരമായതിനാൽ, ഒരേ Codespace ഉപയോഗിക്കുമ്പോൾ URL മാറില്ല.

ഫ്രണ്ട്‌എൻഡ് ചാറ്റ് ഇന്റർഫേസ് സൃഷ്ടിക്കൽ: മനുഷ്യരും AIയും കാണുന്ന ഇടം

ഇപ്പൊഴത്തെ നാം ഉപയോഗകർ എങ്ങനെ നിങ്ങളുടെ AI അസിസ്റ്റന്റുമായി ഇടപഴകുന്നുവെന്ന് നിർണയിക്കുന്ന UI യെ നിർമിക്കും. اصل iPhone ഇന്റർഫേസ് രൂപകൽപ്പന പോലുള്ള, സങ്കീർണ്ണ സാങ്കേതികവിദ്യ സൗഹൃദവും സ്വാഭാവികവുമാക്കാൻ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു.

ആധുനിക ഫ്രണ്ട്‌എൻഡ് ആർക്കിടെക്ചർ മനസ്സിലാക്കുക

നമ്മുടെ ചാറ്റ് ഇന്റർഫേസ് ഒരു "Single Page Application" അല്ലെങ്കിൽ SPA ആണെന്ന് വിളിക്കും. ഹ്രസ്വകാലം ഓരോ ക്ലിക്കിലും പുതിയ പേജ് ലോഡാക്കുന്നത് മറികടന്ന്, ആപ്പ് തൽক্ষണവും മൃദുവായി അപ്ഡേറ്റ് ചെയ്യും:

പഴയ വെബ്രൈറ്റുകൾ: ഒരു ശാരീരിക പുസ്തകം വായിക്കുന്നതുപോലെ – പൂർണ്ണമായ പുതിയ പേജുകളിലേക്ക് മാറ്റപ്പെടുന്നത്
നമ്മുടെ ചാറ്റ് ആപ്പ്: ഫോണിൽ പ്രവർത്തിക്കുന്നതുപോലെ – എല്ലാം സുതാര്യമായി പ്രവഹിക്കുന്നു

graph TD
    A[ഉപയോക്താവ് സന്ദേശം ടൈപ്പ് ചെയ്യുന്നു] --> B[JavaScript ഇൻപുട്ട് പിടിക്കുന്നു]
    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: അവർ‌ണ സംവിധാനങ്ങൾ (പ്രവൃത്തി, ഇന്ററാക്ടിവിറ്റി)

ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ആർക്കിടെക്ചറിന്റെ പ്രാധാന്യം

നമ്മുടെ ചാറ്റ് ആപ്പ് പ്രൊഫഷണൽ ആപ്ലിക്കേഷനുകളിൽ കാണുന്ന ആധുനിക ജാവാസ്ക്രിപ്റ്റ് മാതൃകകൾ ഉപയോഗിക്കും.Developer ആയി വളരുന്നതിൽ ഈ ആശയങ്ങളെ മനസ്സിലാക്കുക സഹായിക്കും:

ക്ലാസ്-അധിഷ്ഠിത ആർക്കിടെക്ചർ: ഞങ്ങൾ കോഡ് ക്ലാസ്സുകളിൽ സംഘട്ടിപ്പിക്കും, അവ ഒബ്ജക്റ്റുകൾക്കുള്ള ബ്ളൂപ്രിന്റ് പോലെയാണ്
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 പ്രാധാന്യം: നിങ്ങളുടെ ചാറ്റ് ആപ്പ് ഫോൺ വഴി ആരെയെങ്കിലും വിവരണം ചെയ്യുന്ന പോലെ ചിന്തിക്കുക. "ഒരു ഹെഡർ ഉണ്ടു് ടൈറ്റിലുമായ്,ത്തിനത് ചർച്ചകൾ നടക്കുന്ന പ്രാഥമിക പ്രദേശം ഉണ്ട്, ഒടുവിൽ മെസേജ് ടൈപ്പിക്കാൻ ഫॉर्म് ഉണ്ട്." സെമാന്റിക് 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-ന് പ്രത്യേക ഘടകങ്ങൾ കണ്ടെത്താനും മാനിപ്പുലേറ്റ് ചെയ്യാനും സഹായിക്കുന്നു
• സ്ക്രിപ്റ്റ് സ്ഥാനം: ജാവാസ്ക്രിപ്റ്റ് ഫയൽ അവസാനത്തിൽ ലോഡ് ചെയ്യുന്നു, അപ്പോൾ HTML ആദ്യം ലോഡാകും

ഈ ഘടനയെല്ലാം ഐശ്വര്യം:

• താർകിക പ്രവാഹം: ഹെഡർ → മെയിൻ ഉള്ളടക്കം → ഇൻപുട്ട് ഫോം സ്വാഭാവിക വായന കൃത്യമായി അനുസരിക്കുന്നു
• കീയോഡിന്റെ ആക്‌സസിബിലിറ്റി: ഉപയോക്താക്കൾക്ക് എല്ലാ ഇന്ററാക്ടീവ് ഘടകങ്ങളും ടാബിലൂടെ ചുറ്റണം സാധിക്കും
• സ്ക്രീൻ റീഡർ സൗഹൃദം: ദൃശ്യപരമായി പരിമിതരായവർക്കു് വ്യക്തമായ ലാൻഡ്‌മാർക്കുകളും വിവരണങ്ങളും
• മൊബൈല്‍ റെസ്പോൺസീവ്: viewport മെറ്റാ ടാഗ് റെസ്പോൺസീവ് ഡിസൈൻ സാധ്യമാക്കുന്നു
• പ്രോഗ്രസ്സീവ് എന്ഹാൻസ്മെന്റ്: CSS അല്ലെങ്കിൽ JavaScript ലോഡാകാതിരുന്നാലും പ്രവർത്തിക്കും

ഇന്ററാക്ടീവ് JavaScript കൂട്ടിച്ചേർക്കൽ: ആധുനിക വെബ് ആപ്ലിക്കേഷൻ ലജിക്ക്

നമുക്ക് ഇപ്പോൾ നമ്മുടെ ചാർട്ട് ഇന്റർഫേസ് ജീവനുള്ളതാക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് നിർമ്മിക്കാം. പ്രൊഫഷണൽ വെബ് ഡെവലപ്പ്മെന്റിൽ you'd കാണുന്ന ആധുനിക ജാവാസ്ക്രിപ്റ്റ് പാറ്റേണുകൾ ഉപയോഗിക്കാം, օրինակ 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() {
        // ഫോം സമർപ്പണത്തിന് (ഉപയോക്താവ് senda അമർത്തുമ്പോഴും 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));

// Enter കീ അമർത്തുമ്പോഴും 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..." കാണിക്കുക കാത്തിരിക്കുമ്പോൾ
• ഓട്ടോ-സ്ക്രോൾ: ഏറ്റവും പുതിയ സന്ദേശങ്ങൾ പ്രദർശനത്തിൽ സൂക്ഷിക്കുക
• ഇൻപുട്ട് സാധുത പരിശോധിക്കൽ: ശൂന്യമായ സന്ദേശങ്ങൾ അയക്കരുത്
• കീബോർഡ് ഷോർട്ട്‌കടുകൾ: Enter കീ സന്ദേശങ്ങൾ അയക്കൽ (പ്രകൃതിയിലെ ചാറ്റ് ആപ്ലിക്കേഷനുപോലെ)

ആപ്ലിക്കേഷൻ പ്രവാഹം മനസ്സിലാക്കൽ

1. പേജ് ലോഡ് ചെയ്യുന്നു → DOMContentLoaded ഇവന്റ് ഫയർ ചെയ്യുന്നു → new ChatApp() സൃഷ്ടിക്കുന്നു
2. കൺസ്ട്രക്ടർ പ്രവർത്തിക്കുന്നു → DOM എലമെന്റ് റഫറൻസുകൾ സ്വീകരിക്കുന്നു → ഇവന്റ് ലിസനറുകൾ ക്രമീകരിക്കുന്നു
3. ഉപയോക്താവ് സന്ദേശം ടൈപ്പ് ചെയ്യുന്നു → Enter അമർത്തുന്നു അല്ലെങ്കിൽ Send ക്ലിക്ക് ചെയ്യുന്നു → handleSubmit പ്രവർത്തിക്കുന്നു
4. handleSubmit → ഇൻപുട്ട് സാധുത പരിശോധിക്കുന്നു → ലോഡിങ് സ്റ്റേറ്റ് കാണിക്കുന്നു → API വിളിക്കുന്നു
5. API മറുപടി നൽകുന്നു → AI സന്ദേശം ചാറ്റിൽ ചേർക്കുന്നു → ഇന്റർഫേസ് വീണ്ടും സജീവമാക്കുന്നു
6. അടുത്ത സന്ദേശത്തിനായി തയ്യാറാണ് → ഉപയോക്താവ് തുടർച്ചയായി ചാറ്റ് ചെയ്യാം

ഈ ആർക്കിടെക്ചർ സ്കെയിലബിൾ ആണ് – സന്ദേശം തിരുത്തൽ, ഫയൽ അപ്ലോഡ്, അല്ലെങ്കിൽ ബഹുസംവാദ ത്രെഡുകൾ പോലുള്ള ഫീച്ചറുകൾ ആധാര ഘടന എഴുതാതെയും കൂട്ടിച്ചേർക്കാൻ കഴിയും.

🎯 പാഠപുസ്തക പരിശോധന: ആധുനിക ഫ്രണ്ട്‌എൻഡ് ആർക്കിടെക്ചർ

ആർക്കിടെക്ചർ മനസ്സിലാക്കൽ: നിങ്ങൾ ആധുനിക ജാവാസ്ക്രിപ്റ്റ് പാറ്റേണുകളും ഉപയോഗിച്ച് പൂർണ്ണമായ സിംഗിൾ-പേജ് ആപ്ലിക്കേഷൻ നടപ്പിലാക്കിയിട്ടുണ്ട്. ഇത് പ്രൊഫഷണൽ-തലത്തിലുള്ള ഫ്രണ്ട്‌എൻഡ് ഡെവലപ്പ്മെന്റിന്റെ പ്രതീകം ആണ്.

പ്രധാന ആശയങ്ങൾ കൈവശം വച്ചിട്ടുണ്ട്:

• ES6 ക്ലാസ് ആർക്കിടെക്ചർ: സംരചിതവും നന്നായി പരിപാലിക്കാവുന്നതുമായ കോഡ് ഘടന
• Async/Await പാറ്റേണുകൾ: ആധുനിക അസിങ്ക്രോണസ് പ്രോഗ്രാമ്മിംഗ്
• ഇവന്റ്-ഡ്രിവൻ പ്രോഗ്രാമിങ്ങ്: പ്രതികരണശీలമായ ഉപയോക്തൃ ഇന്റർഫേസ് ഡിസൈൻ
• സുരക്ഷാ മികച്ച രീതികൾ: XSS പ്രതിരോധവും ഇൻപുട്ട് പരിശോധനയും

ഘടനാ ബന്ധം: നിങ്ങൾ പഠിച്ച പാറ്റേണുകൾ (ക്ലാസ് അധിഷ്ഠിത ആർക്കിടെക്ചർ, അസിങ്ക് ഓപ്പറേഷനുകൾ, DOM മാനിപ്പുലേഷൻ) മോഡേൺ ഫ്രെയിംവർക്കുകൾ ആയ React, Vue, Angular എന്നിവയുടെ അടിസ്ഥാനമാണ്. നിർമ്മിക്കുന്നതു തന്നെ പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷനുകളിൽ ഉപയോഗിക്കുന്ന ഘടനാപരമായ ചിന്തനയോടെയാണ്.

പരിശോധന ചോദ്യവും: പല സംവാദങ്ങളായും ഉപയോക്തൃ प्रमाणीകৰণവും കൈകാര്യം ചെയ്യാൻ ഈ ചാറ്റ് ആപ്ലിക്കേഷൻ എങ്ങനെ വികസിപ്പിച്ചെടുക്കും? ആവശ്യമായ ആർക്കിടെക്ചർ മാറ്റങ്ങളും ക്ലാസ് സ്ട്രക്ചർ എങ്ങനെ മാറും എന്ന് വിശകലനം ചെയ്യൂ.

നിങ്ങളുടെ ചാറ്റ് ഇന്റർഫേസ് സ്റ്റൈലിംഗ്

ഇപ്പോൾ നമുക്ക് CSS ഉപയോഗിച്ച് ആധുനികവും ദൃശ്യപരവും ചാറ്റ് ഇന്റർഫേസ് സൃഷ്ടിക്കാം. മികച്ച സ്റ്റൈലിംഗ് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫഷണൽ തോന്നുകയും ഉപയോക്തൃ体验 മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു. ഞങ്ങൾ Flexbox, CSS Grid, കസ്റ്റം പ്രോപ്പർട്ടീസ് പോലുള്ള ആധുനിക 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 കസ്റ്റം പ്രോപ്പർട്ടീസ് (വേരിയബിളുകൾ) സിസ്റ്റം രൂപകല്പനയും ലളിതമായ പരിപാലനത്തിനും
• നിർവ്വഹിക്കുന്നു Flexbox ലേ ഔട്ട്, പ്രതികരണക്ഷമമായ ഡിസൈൻക്കും ശരിയായ അലൈന്മെന്റിനും
• ഉള്ളടക്കം ചെയ്യുന്നു സന്ദേശം പ്രത്യക്ഷപ്പെട്ടതിന് സ്മൂത്ത് അനിമേഷൻ, ചിലപ്പോൾ ശ്രദ്ധ വിടാതെ
• ചെറുതായി വ്യത്യാസം നൽകുന്നു ഉപയോക്തൃ സന്ദേശങ്ങൾ, 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 ഉപയോഗിക്കുക
• കോഡ്സ്പേസസ്: തുറന്ന 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 gebruik ചെയ്യുക
   python api.py
   

2. API പ്രവർത്തിക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക:

   • http://localhost:5000 ബ്രൗസറിൽ തുറക്കുക
   • നിങ്ങളുടെ FastAPI സെർവറിന്റെ സ്വാഗതസന്ദേശം കാണണം

3. ഫ്രണ്ട്‌എൻഡ് തുറക്കുക:

   • ഫ്രണ്ട്‌എൻഡ് ഡയറക്ടറിയിലേക്ക് പോകുക
   • index.html വീക്ഷിക്കുക
   • അല്ലെങ്കിൽ VS Code ന്റെ Live Server എക്സ്റ്റൻഷൻ ഉപയോഗിക്കുക മികച്ച ഡെവലപ്പ്മെന്റ് അനുഭവത്തിനായി

4. ചാറ്റ് ഫംഗ്ഷണാലിറ്റി പരീക്ഷിക്കുക:

   • ഇൻപുട്ട് ഫീൽഡ്​യിൽ സന്ദേശം ടൈപ്പ് ചെയ്യുക
   • "Send" ക്ലിക്ക് ചെയ്യുക അല്ലെങ്കില് Enter അമർത്തുക
   • AI യെ ശരിയായി പ്രതികരിക്കുന്നത് പരിശോധിക്കുക
   • ജാവാസ്ക്രിപ്റ്റ് പിശക് ഉണ്ടോ എന്ന് ബ്രൗസർ കോൺസോൾ പരിശോധിക്കുക

സാധാരണ പ്രശ്നങ്ങൾ പരിഹരിക്കൽ

പ്രശ്നം	ലക്ഷ്യങ്ങളോ	പരിഹാരമോ
CORS പിശക്	ഫ്രണ്ട്‌എൻഡ് ബാക്ക്‌എൻഡ് കണക്റ്റ് ചെയ്യാൻ കഴിയുന്നില്ല	FastAPI CORSMiddleware ശരിയായി കോൺഫിഗർ ചെയ്തിട്ടുണ്ടോ 확인 ചെയ്യുക
API കീ പിശക്	401 അനുദ EmpfangRespones	നിങ്ങളുടെ GITHUB_TOKEN എൻവയോൺമെന്റ് വേരിയബിൾ പരിശോധിക്കുക
കണക്ഷൻ നിരസിച്ചു	നെറ്റ്‌വർക്കിലെ പിശകുകൾ	ബാക്ക്‌എൻഡ് URL ശരിയാണോ, Flask സെർവർ പ്രവർത്തിക്കാനാണോ പരിശോധിക്കുക
AI മറുപടി ഇല്ല	ശൂന്യമോ പിശക് മറുപടിയോ	API അവകാശ പ്രശ്നങ്ങൾക്കായുള്ള ബാക്ക്‌എൻഡിന്റെ ലോഗുകൾ പരിശോധിക്കുക

സാധാരണ ഡീബഗ്ഗിംഗ് നടപടികൾ:

• ബ്രൗസർ ഡെവലപ്പർ ടൂൾസ് കോൺസോൾ ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ പരിശോധിക്കുക
• നെറ്റ്‌വർക്ക് ടാബിൽ API അഭ്യർത്ഥനകളും മറുപടികളും വിജയകരമാണെന്ന് സ്ഥിരീകരിക്കുക
• ബാക്ക്‌എൻഡ് ടെർമിനൽ ഔട്ട്‌പുട്ട് പൈഥൺ പിശകുകൾക്ക് പരിശോധിക്കുക
• എൻവയോൺമെന്റ് വേരിയബിളുകൾ ശരിയായി ലോഡ് ചെയ്യപ്പെട്ടുവോ എന്ന് ഉറപ്പാക്കുക

📈 നിങ്ങളുടെ AI ആപ്ലിക്കേഷൻ ഡെവലപ്പ്മെന്റ് മാസ്റ്ററി ടൈംലൈൻ

timeline
    title പൂർണ AI അപ്ലിക്കേഷൻ ഡെവലപ്പ്മെന്റ് യാത്ര
    
    section AI ആധാരങ്ങൾ
        Understanding Generative AI
            : പാറ്റേൺ തിരിച്ചറിയൽ സങ്കൽപങ്ങൾ മനസ്സിലാക്കുക
            : AI പാരാമീറ്റർ നിയന്ത്രണം മേൽനോട്ടം
            : പ്രൊംപ്റ്റ് എഞ്ചിനീയറിംഗ് സാങ്കേതികവിദ്യകൾ പഠിക്കുക
        
        GitHub Models Integration
            : AI സർവീസ് പ്ലാറ്റ്ഫോമുകൾ നാവിഗേറ്റ് ചെയ്യുക
            : സുരക്ഷിതമായ 인증 കൈകാര്യം ചെയ്യുക
            : മോഡൽ പാരാമീറ്ററുകൾ മികച്ചതാക്കുക
    
    section Backend Development
        Python API Architecture
            : ഫാസ്റ്റ്‌API അപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുക
            : അസിങ്ക് ഓപ്പറേഷനുകൾ നടപ്പിലാക്കുക
            : സുരക്ഷിത എന്റ്പോയിന്റുകൾ സൃഷ്‌ടിക്കുക
        
        AI Service Integration
            : തത്ക്കാല AI APIs ൽ ബന്ധിപ്പിക്കുക
            : റേറ്റ് ലിമിറ്റിംഗ് കൈകാര്യം ചെയ്യുക
            : പിശക് പരിധികൾ നടപ്പിലാക്കുക
    
    section Frontend Mastery
        Modern JavaScript Patterns
            : ES6 ക്ലാസ് ആർക്കിടെക്ചർ മേൽനോട്ടം
            : അസിങ്ക്/അവൈറ്റ് ഫ്ലോകൾ നടപ്പിലാക്കുക
            : പ്രതികരണം ഉള്ള ഇന്റർഫേസുകൾ നിർമ്മിക്കുക
        
        Real-time User Experience
            : ഡൈനാമിക് ചാറ്റ് ഇന്റർഫേസുകൾ സൃഷ്‌ടിക്കുക
            : ലോഡിംഗ് സ്റ്റേറ്റ്‌സ് കൈകാര്യം ചെയ്യുക
            : ഉപയോക്തൃ ഇടപെടലുകൾ മികച്ചതാക്കുക
    
    section Production Readiness
        Security & Performance
            : സുരക്ഷിത ടോക്കൺ മാനേജ്മെന്റ് നടപ്പിലാക്കുക
            : XSS ദുര്‍ബലതകൾ തടയുക
            : API പ്രകടനം മികച്ചതാക്കുക
        
        Professional Deployment
            : സ്‌കേലബിൾ ആർക്കിടെക്ചറുകൾ നിർമ്മിക്കുക
            : പരിപാലനയോഗ്യമായ കോഡ് സൃഷ്‌ടിക്കുക
            : ഡെവലപ്പ്മെന്റ് പ്രക്രിയകൾ ഡോക്യുമെന്റുചെയ്യുക

🎓 ബിരുദദാന കുർസ്ച്വാസം: ആധുനിക AI അസിസ്റ്റന്റുകൾക്ക് കരുത്തുനൽകുന്ന അതേ തെക്‌നോളജി, ആർക്കിടെക്ചർ പാറ്റേണുകൾ ഉപയോഗിച്ച് നിങ്ങൾ ഒരു പൂർണ്ണമായ AI-പവർഡ് ആപ്ലിക്കേഷൻ നന്നായി സൃഷ്ടിച്ചിരിക്കുന്നു. ഈ കഴിവുകൾ പരമ്പരാഗത വെബ് ഡെവലപ്പ്മെന്റും നൂതന AI സംയോജനവും ഏറ്റുമുട്ടുന്ന കാഠിന്യത്തിലാണ്.

🔄 അടുത്ത തലം കഴിവുകൾ:

• ആധುನിക AI ഫ്രെയിംവർക്കുകൾ (LangChain, LangGraph) പഠിക്കാൻ സജ്ജമായിരിക്കുന്നു
• മൾട്ടി-മോഡൽ AI ആപ്ലിക്കേഷനുകൾ (ടെക്സ്റ്റ്, ചിത്രം, ശബ്ദം) നിർമ്മിക്കാൻ തയ്യാറാണ്
• വെക്റ്റർ ഡാറ്റാബേസുകളും റിട്രീവൽ സിസ്റ്റങ്ങളുമുയർത്താൻ കഴിയും
• മെഷീൻ ലർണിംഗ്, AI മോഡൽ ഫൈൻ-ട്യൂണിംഗ് അടിസ്ഥാനങ്ങൾ കീഴടക്കിയിരിക്കുന്നു

GitHub Copilot ഏജൻറ് ചലഞ്ച് 🚀

എജൻറ് മോഡ് ഉപയോഗിച്ച് താഴെ പറയുന്ന ചലഞ്ച് പൂർത്തിയാക്കൂ:

വിവരണം: ചാറ്റ് അസിസ്റ്റന്റിനെ വികസിപ്പിച്ച് സംഭാഷണ ചരിത്രവും സന്ദേശ സംരംഭത്വവും ചേർക്കുക. ഇത് ചാറ്റ് ആപ്ലിക്കേഷനുകളിലെ സ്റ്റേറ്റ് മാനേജുമെന്റ്, ഡാറ്റ സംഭരണത്തിൽ മനസ്സിലാക്കലിന് സഹായിക്കും.

ഉദ്ദേശ്യം: സംഭാഷണ ചരിത്രം സെഷനുകൾക്കിടയിൽ നിലനിർത്തുന്നതുപോലെ ചാറ്റ് ആപ്ലിക്കേഷൻ മാറ്റുക. ലൊക്കൽ സ്റ്റോറേജിൽ സന്ദേശങ്ങൾ സേവ് ചെയ്യാനുള്ള ഫംഗ്ഷണാലിറ്റി ചേർക്കുക. പേജ് ലോഡ് ചെയ്യുമ്പോൾ സംഭാഷണ ചരിത്രം പ്രദർശിപ്പിക്കുക. "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 അനിമേഷൻസ്, അസിങ്ക് പ്രോഗ്രാമിങ്ങ്
സന്ദേശ ടൈംസ്റ്റാമ്പുകൾ	ഓരോ സന്ദേശവും അയച്ച സമയം പ്രദർശിപ്പിക്കുക	തീയതി/സമയം ഫോർമാറ്റിംഗും UX ഡിസൈനും
ചാറ്റ് എക്സ്പോർട്ട്	ഉപയോക്താക്കൾക്ക് അവരുടെ സംഭാഷണം ഡൗൺലോഡ് ചെയ്യാം	ഫയൽ മാനേജുമെന്റ്, ഡാറ്റ എക്സ്പോർട്ട്
തീം സ്വിച്ച്	ലൈറ്റ്/ഡാർക്ക് മോഡ് ടോഗിൾ	CSS വേരിയബിളുകൾ, ഉപയോക്തൃ ഇഷ്ടം
വോയ്സ് ഇൻപുട്ട്	വാചകത്തോട് സംസാരിച്ച് ടെക്സ്റ്റായി മാറ്റൽ	വെബ് APIകൾ, ആക്‌സസിബിലിറ്റി

ടെസ്റ്റിംഗും ഡോക്യുമെന്റേഷനും

ഗുണനിലവാര ഉറപ്പിക്കൽ:

• വിവിധ ഇൻപുട്ട് തരംകളും എട്ജ് കേസുകളും ഉപയോഗിച്ച് ആപ്ലിക്കേഷൻ പരിശോധിക്കുക
• വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ പ്രതികരണക്ഷമമായ ഡിസൈൻ സാധൂകരിക്കുക
• കീബോർഡ് നവിഗേഷനും സ്ക്രീൻ റീഡറുകളും ഉപയോഗിച്ച് ആക്‌സസിബിലിറ്റി പരിശോധിക്കുക
• HTML, CSS സ്റ്റാൻഡേർഡുകൾ പാലിക്കുന്നത് സ്ഥിരീകരിക്കുക

ഡോക്യുമെന്റേഷൻ ആവശ്യകതകൾ:

• നിങ്ങളുടെ പ്രോജക്ടും അതുള്ള എങ്ങനെ ഓടിക്കാം എന്നതും വിശദീകരിക്കുന്ന README.md എഴുതുക
• ചാറ്റ് ഇന്റർഫേസിന്റെ പ്രവർത്തനങ്ങളെ കാണിക്കുന്ന സ്ക്രീൻഷോട്ടുകൾ ഉൾപ്പെടുത്തുക
• മറ്റെന്നു ചേർത്തിട്ടുള്ള ഏതെങ്കിലും വ്യത്യസ്ത ഫീച്ചറുകൾ അല്ലെങ്കിൽ ഇഷ്ടാനുസൃതമാക്കൽ വിശദീകരിക്കുക
• മറ്റ് ഡെവലപ്പർമാർക്കായി സമ്പൂർണ്ണ സജ്ജീകരണ നിർദ്ദേശങ്ങൾ നൽകുക

സമർപ്പണ മാർഗ്ഗനിർദ്ദേശങ്ങൾ

പ്രോജക്ട് സമർപ്പണങ്ങൾ:

1. മുഴുവൻ സോഴ്‌സ് കോഡുകളുള്ള പ്രോജക്ട് ഫോൾഡർ
2. പ്രോജക്ട് വിവരണവും സജ്ജീകരണ നിർദ്ദേശങ്ങളും ഉൾപ്പെട്ട README.md
3. നിങ്ങളുടെ ചാറ്റ് അസിസ്റ്റന്റ് പ്രവർത്തനക്ഷമമായ സ്ക്രീൻഷോട്ടുകൾ
4. നിങ്ങൾ പഠിച്ചതും നേരിടുന്ന സവിശേഷ വെല്ലുവിളികളും കുറിക്കുന്ന ഒരു ലഘു പ്രതിബിംബനം

മൂല്യനിർണ്ണയ മാനദണ്ഡങ്ങൾ:

• പ്രവൃത്തിത്തരം: ചാറ്റ് അസിസ്റ്റന്റ് പ്രതീക്ഷിക്കപ്പെട്ടപ്രകാരം പ്രവർത്തിക്കുമോ?
• കോഡ് ഗുണമേന്മ: കോഡ് നന്നായി സംഘടി​ത്തുകയും വിശദീകരിക്കുകയും പരിപാലിക്കാവുന്നതായിരിക്കുമോ?
• ഡിസൈൻ: ഇന്റർഫേസ് ദൃശ്യപരവും സൗഹൃദപരവുമാണോ?
• ക്രിയേറ്റിവിറ്റി: നിർമ്മിതിയിലെ വ്യത്യസ്തതയും വ്യക്തിഗത ആവിഷ്ക്കാരവും എത്രമാത്രം?
• ഡോക്യുമെന്റേഷൻ: സജ്ജീകരണ നിർദ്ദേശങ്ങൾ വ്യക്തവും പൂർണവുമായിരിക്കുന്നു?

💡 ** വിജയം ലഭിക്കുന്ന നിർദ്ദേശം**: ആദ്യം അടിസ്ഥാന ആവശ്യകതകൾ പൂർത്തിയാക്കൂ, പിന്നെ എല്ലാ കാര്യങ്ങളും പ്രവർത്തി स्थापितിച്ച ശേഷം മെച്ചപ്പെടുത്തലുകൾ ചേർക്കൂ. പരിപൂർണ്ണമായ പ്രധാന അനുഭവം സൃഷ്ടിക്കാനുള്ള ശ്രമം മുൻപിൽ വെക്കൂ, തുടർന്ന് ആധുനിക ഫീച്ചറുകൾ ചേർക്കുക.

പരിഹാരവും

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 ആയി ഡൗൺലോഡാകാൻ)
• സന്ദേശ നഷ്ടം തടയാൻ ഓട്ടോ-സേവ് localStorage ഉപയോഗിച്ച് നടപ്പാക്കുക

ആധുനിക AI സംയോജനം

പല AI വ്യക്തിത്വങ്ങൾ:

• വ്യത്യസ്ത AI വ്യക്തിത്വങ്ങൾ തെരഞ്ഞെടുക്കാൻ ഡ്രോപ്പ്ഡൗൺ സൃഷ്ടിക്കുക
• ഉപയോക്താവിന്റെ ഇഷ്ടപ്പെട്ട വ്യക്തിത്വം localStorage സംരക്ഷിക്കുക
• സംഭാഷണ പ്രവാഹം നിലനിർത്തുന്ന കോൺടെക്സ്റ്റ് സ്വിച്ച് നടപ്പാക്കുക

സ്മാർട്ട് മറുപടി ഫീച്ചറുകൾ:

• സമ്പ്രദായം വീതിച്ച്: AIക്കു മുൻപുള്ള സന്ദേശങ്ങൾ ഓർമ്മയിലുണ്ടായിരിക്കണം
• സംവാദ വിഷയം അടിസ്ഥാനമാക്കി സ്മാർട്ട് സജഷനുകൾ നിർമിക്കുക
• പൊതുവായ ചോദ്യങ്ങൾക്ക് വേഗത്തിലുള്ള മറുപടി ബട്ടണുകൾ സൃഷ്ടിക്കുക

🎯 അധ്യയന ലക്ഷ്യം: ഈ ബോണസ് ചാലഞ്ചുകൾ നിങ്ങളെ പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷനുകളിൽ ഉപയോഗിക്കുന്ന ആധുനിക വെബ് ഡെവലപ്പ്മെന്റ് മുറുബാട്ടുകളും AI ഇന്റഗ്രേഷൻ സാങ്കേതിക വിദ്യകളും മനസിലാക്കാൻ സഹായിക്കുന്നു.

സംക്ഷേപവും അടുത്ത ഘട്ടങ്ങളും

പുതിയതായി! നിങ്ങൾ പൂർണ്ണമായും എഐ സജീവമായ ചാറ്റ് അസിസ്റ്റന്റിനെ പൂർത്തിയായി നിർമ്മിച്ചു. ഈ പ്രോജക്ട് നിങ്ങളെ ആധുനിക വെബ് ഡെവലപ്പ്മെന്റ് സാങ്കേതിക വിദ്യകളിലേക്കും AI ഇന്റഗ്രേഷനിലേക്കും വാങ്ങിലേറ്റുപരിചയത്തോടെ സമ്പന്നനാക്കി – ഇന്നത്തെ ടെക്ക് മേഖലയിൽ ധാരാളം മൂല്യമർഹിക്കുന്ന കഴിവുകൾ.

നിങ്ങൾ നേടിയ നേട്ടങ്ങൾ

ഈ പാഠത്തിൽ, നിങ്ങൾ നിരവധി പ്രധാന സാങ്കേതികവിദ്യകളും ആശയങ്ങളും അഭ്യസിച്ചു:

ബാക്ക്‌എൻഡ് ഡെവലപ്പ്മെന്റ്:

• AI പ്രവര്‍ത്തനത്തിനായി GitHub മോഡല്സ് API-യുമായി ഇന്റഗ്രേറ്റ് ചെയ്തിരിക്കുന്നു
• Flask ഉപയോഗിച്ച് പിഴവ് കൈകാര്യം ചെയ്യലുള്ള RESTful API നിർമിച്ചു
• പരിസ്ഥിതി വ്യത്യാസങ്ങളെ ഉപയോഗിച്ച് വിശ്വസനീയമായ ആധികാരീകരണം നിർവഹിച്ചു
• ഫ്രണ്ട്‌എൻഡ്, ബാക്ക്‌എൻഡ് കേന്ദ്രമായി പരസ്പരം cross-origin അഭ്യർത്ഥനകൾക്കായി CORS കണ്ഫിഗർ ചെയ്തു

ഫ്രണ്ട്‌എൻഡ് ഡെവലപ്പ്മെന്റ്:

• സെമാന്റിക് HTML ഉപയോഗിച്ച് പ്രതികരിക്കുന്ന ചാറ്റ് ഇന്റർഫേസ് സൃഷ്ടിച്ചു
• async/await, ക്ലാസ് അടിസ്ഥാനത്തിലുള്ള ഘടന ഉപയോഗിച്ച് ആധുനിക ജാവാസ്ക്രിപ്റ്റ് നിർവഹിച്ചു
• CSS Grid, Flexbox, ആനിമേഷനുകൾ ഉപയോഗിച്ച് മനോഹരമായ ഉപയോക്തൃ ഇന്റർഫേസ് ഡിസൈൻ ചെയ്തു
• ആക്‌സസിബിലിറ്റി ഫീച്ചറുകളും പ്രതികരിക്കുന്ന ഡിസൈൻ സിദ്ധാന്തങ്ങളും കൂടാതെ ചേർത്തു

ഫുൾ-സ്റ്റാക്ക് ഇന്റഗ്രേഷൻ:

• HTTP API കോളുകൾ വഴി ഫ്രണ്ട്‌എൻഡും ബാക്ക്‌എൻഡും കണക്‌റ്റ് ചെയ്തു
• യഥാർത്ഥ സമയ ഉപയോക്തൃ ഇടപെടലുകളും അസിങ്ക്രോൺ ഡാറ്റ ഫ്ലോസും കൈകാര്യം ചെയ്തു
• അപ്ലിക്കേഷനിൽ പിഴവ് കൈകാര്യം ചെയ്യലും ഉപയോക്തൃ പ്രതികരണവും നടപ്പാക്കി
• ഉപയോക്തൃ ഇൻപുട്ട് മുതൽ AI പ്രതികരണമുവരെ സമഗ്രമായ അപ്ലിക്കേഷൻ പ്രവാഹം പരീക്ഷിച്ചു

പ്രധാന പഠന ഫലങ്ങൾ

mindmap
  root((AI ചാറ്റ് ആപ്പ് കഴിവുകൾ))
    API സംയോജനം
      പ്രാമാണീകരണം
      പിശക് കൈകാര്യം ചെയ്യൽ
      അസിങ്ക് പ്രോഗ്രാമിംഗ്
    വെബ് വികസനം
      HTML5 അർത്ഥരൂപം
      മോഡേൺ CSS
      ES6+ ജാവാസ്ക്രിപ്റ്റ്
    ഉപയോക്തൃ അനുഭവം
      പ്രതികരണ രൂപകൽപ്പന
      ആക്‌സസിബിലിറ്റി
      റിയൽ-ടൈം ഇടപെടല്
    AI മനസ്സിലാക്കൽ
      പ്രൊംപ്റ്റ് എഞ്ചിനീയറിംഗ്
      മോഡൽ പാരാമീറ്ററുകൾ
      സംഭാഷണ ഫ്ലോ

ഈ പ്രോജക്ട് AI-സജ്ജമായ അപ്ലിക്കേഷനുകൾ നിർമിക്കുന്ന അടിസ്ഥാനങ്ങൾ നിങ്ങളെ പരിചയപ്പെടുത്തി, ഇത് വെബ് ഡെവലപ്പ്മെന്റിന്റെ ഭാവിയാണ്. പരമ്പരാഗത വെബ് അപ്ലിക്കേഷനുകളിൽ AI കഴിവുകൾ ക്രമീകരിക്കുന്നതും, ബുദ്ധിമുട്ടില്ലാതെ പ്രതികരിക്കുന്ന മനോഹരമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നതും നിങ്ങൾക്ക് ഇപ്പോൾ മനസ്സിലായി.

പ്രൊഫഷണൽ അപ്ലിക്കേഷനുകൾ

ഈ പാഠത്തിൽ നിങ്ങൾ വികസിപ്പിച്ചെടുത്ത കഴിവുകൾ ആധുനിക സോഫ്റ്റ്‌വെയർ വികസന കരിയറുകളിൽ നേരിട്ട് പ്രയോഗിക്കാൻ സാധിക്കും:

• ആധുനിക ഫ്രെയിംവർക്ക്, API ഉപയോഗിച്ച് фുൾ-സ്റ്റാക്ക് വെബ് ഡെവലപ്പ്മെന്റ്
• വെബ് ആപ്ലിക്കേഷനുകളിലും മൊബൈൽ ആപ്പുകളിലും AI ഇന്റഗ്രേഷൻ
• മൈക്രോസർവീസ് ആർക്കിടെക്ചറുകൾക്കായി API ഡിസൈൻ, ഡെവലപ്പ്മെന്റ്
• ആക്‌സസിബിലിറ്റിക്കും പ്രതികരണശീലത്തിന്നും ആധാരംകൊണ്ട് ഉപയോക്തൃ ഇന്റർഫേಸ್ ഡെവലപ്പ്മെന്റ്
• പരിസ്ഥിതി ക്രമീകരണവും വിന്യാസവും ഉൾപ്പെടെയുള്ള ഡെവ്‌ഓപ്‌സ് പ്രാക്റ്റീസുകൾ

നിങ്ങളുടെ AI ഡെവലപ്പ്മെന്റ് യാത്ര തുടർക്കുക

അടുത്ത പഠന ഘട്ടങ്ങൾ:

• കൂടുതൽ വികസിത AI മോഡലുകളും APIകൾ (GPT-4, Claude, Gemini) അന്വേഷിക്കുക
• മികച്ച AI പ്രതികരണങ്ങൾക്ക് പ്രോമ്പ്റ്റ് എഞ്ചിനీరിംഗ് സാങ്കേതിക വിദ്യകൾ കണ്ടെത്തുക
• സംവാദ രൂപകല്പനയും ചാറ്റ്ബോട്ട് ഉപയോക്തൃ അനുഭവ സിദ്ധാന്തങ്ങളും പഠിക്കുക
• AI സുരക്ഷ, നയം, ഉത്തരവാദിത്വപരമായ AI വികസനം പരിശോധിക്കുക
• സംവാദ സ്മരണയും സാന്ദർഭിക ബോധവുമുള്ള കൂടുതൽ സങ്കീർണമായ അപ്ലിക്കേഷനുകൾ നിർമിക്കുക

അധ്യാപന പ്രോജക്ട് ആശയങ്ങൾ:

• ഉദിച്ചു 多ഉപയോക്തൃ ചാറ്റ് മുറികൾ AI മോദറേഷൻയോടുകൂടി
• AI സജീവമായ ഉപഭോക്തൃ സേവന ചാറ്റ്ബോട്ടുകൾ
• വ്യക്തിഗത പഠനവുമായി വിദ്യാഭ്യാസ ട്യൂട്ടറിങ് അസിസ്റ്റന്റുകൾ
• വ്യത്യസ്ത AI വ്യക്തിത്വങ്ങളോടെയുള്ള സൃഷ്ടിപരമായ എഴുത്തുകാരൻ കൂട്ടുകാരുമായി
• ഡെവലപ്പർമാർക്കായി സാങ്കേതിക ഡോക്യുമെന്റേഷൻ അസിസ്റ്റന്റുകൾ

GitHub Codespaces ഉപയോഗിച്ച് ആരംഭിക്കുന്നത്

ഈ പ്രോജക്ട് ക്ലൗഡ് ഡെവലപ്പ്മെന്റ് പരിസരത്തിൽ ശ്രമിക്കാനായി ആഗ്രഹമുള്ളോ? GitHub Codespaces ബ്രൗസറിലുള്ള പൂർണ്ണ ഡെവലപ്പ്മെന്റ് ക്രമീകരണമാണ് നൽകുന്നത്, ലൊക്കൽ ക്രമീകരണം വേണ്ടാതെയുള്ള AI ആപ്ലിക്കേഷനുകൾ പരീക്ഷിക്കാൻ അനുയോജ്യം.

നിങ്ങളുടെ ഡെവലപ്പ്മെന്റ് പരിസരം ക്രമീകരിക്കൽ

പടിയൊന്ന്: ടെംപ്ലേറ്റിൽ നിന്നെന്ന് സൃഷ്ടിക്കുക

• Web Dev For Beginners repository സന്ദർശിക്കുക
• മുകളിൽ-दക്ഷിണ കോണിൽ "Use this template" ക്ലിക്കുചെയ്യുക (GitHub ലോഗിൻ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക)

പടിയൊന്ന്: Codespaces തുറക്കുക

• പുതിയതായി സൃഷ്ടിച്ച റിപോസിറ്ററി തുറക്കുക
• പച്ച "Code" ബട്ടൺ ക്ലിക്ക് ചെയ്ത് "Codespaces" തിരഞ്ഞെടുക്കുക
• "Create codespace on main" തിരഞ്ഞെടുക്കുക നിങ്ങളുടെ ഡെവലപ്പ്മെന്റ് പരിസരം ആരംഭിക്കാൻ

പടിയൊന്ന്: പരിസരം ക്രമീകരിക്കൽ നിങ്ങളുടെ Codespace ലോഡാകുമ്പോൾ ലഭ്യമാകും:

• മുൻ-ഇൻസ്റ്റാൾ ചെയ്ത Python, Node.js, മറ്റു ആവശ്യമായ ഡെവലപ്പ്മെന്റ് ഉപകരണങ്ങൾ
• വെബ് ഡെവലപ്പ്മെന്റിനുള്ള VS Code ഇന്റർഫേസ്, വിപുലീകരണങ്ങൾ
• ബാക്ക്‌എൻഡ്, ഫ്രണ്ട്‌എൻഡ് സർവറുകൾ പ്രവർത്തിപ്പിക്കാൻ ടെർമിനൽ പ്രവേശനം
• അപ്ലിക്കേഷനുകൾ പരീക്ഷിക്കാൻ പോർട്ട് ഫോർവർഡിംഗ്

Codespaces നൽകുന്നത്:

• ലൊക്കൽ പരിസരം ക്രമീകരണവും സജ്ജീകരണ പ്രശ്നങ്ങളും ഇല്ലാതാക്കുന്നു
• വിവിധ ഉപകരണങ്ങളിൽ സ്ഥിരം ഡെവലപ്പ്മെന്റ് പരിസരം നൽകുന്നു
• വെബ് ഡെവലപ്പ്മെന്റിനുള്ള മുൻകൂട്ടി ക്രമീകരിച്ച ഉപകരണങ്ങളും വിപുലീകരണങ്ങളും ഉൾപ്പെടുന്നു
• GitHub സഹിതം പതിപ്പ് നിയന്ത്രണത്തിനും സഹകരണത്തിനും സ്ലീം ഇന്റഗ്രേഷൻ നൽകുന്നു

🚀 പ്രൊ ടിപ്പ്: കോഡ്സ്പേസുകൾ AI അപ്ലിക്കേഷനുകൾ പഠിക്കാനും പ്രോട്ടോടൈപ്പ് ചെയ്യാനും ഏറ്റവും അനുയോജ്യമാണ്, കാരണം ഇത് എല്ലാ സങ്കീർണ പരിസ്ഥിതി ക്രമീകരണവും സ്വയമേവ കൈകാര്യം ചെയ്ത് നിങ്ങളെ നിർമ്മാണത്തിനും പഠനത്തിനുമായി കേന്ദ്രീകരിക്കാൻ അനുവദിക്കുന്നു, ക്രമീകരണ പ്രശ്നനിവാരണത്തിലേക്ക് അല്ല.

---

ബന്ധമുക്തി: ഈ ഡോക്യുമെന്റ് എ.ഐ. തർജ്ജുമാ സേവനമായ Co-op Translator ഉപയോഗിച്ചാണ് തർജ്ജമ ചെയ്തിരിക്കുന്നത്. ഞങ്ങൾ കൃത്യതയ്ക്കായി പരിശ്രമിക്കുന്നെങ്കിലും, ഓട്ടോമാറ്റഡ് തർജ്ജുമകളിൽ പിശകുകളോ അന്നിശ്ചിതത്വങ്ങളോ ഉണ്ടാകാവുന്നതാണ്. പ്രാഥമിക ഭാഷയിൽ ഉള്ള ഒറിജിനൽ ഡോക്യുമെന്റ് ഔദ്യോഗികമായ സ്രോതസ്സായിരിക്കണമെന്ന് ശ്രദ്ധിക്കുക. നിർണായക വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജുമ നിർമ്മിതം ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ തർജ്ജുമ ഉപയോഗത്തിൽനിന്നും ഉദ്ഭവിക്കുന്ന ധാരണാപരമായ തെറ്റുകൾക്കോ പിശകുകൾക്കോ ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിക്കില്ല.