History

softchris 3f7ec0bbe8 🌐 Update translations via Co-op Translator		1 month ago
..
solution	🌐 Update translations via Co-op Translator	1 month ago
README.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

एआयसह चॅट असिस्टंट तयार करा

स्टार ट्रेकमध्ये जहाजाच्या संगणकाशी सहज संवाद साधत, जटिल प्रश्न विचारत आणि विचारपूर्वक उत्तर मिळवत असलेल्या क्रूची आठवण आहे का? 1960 च्या दशकातील विज्ञान कल्पनेप्रमाणे वाटणारी गोष्ट आता तुम्ही वेब तंत्रज्ञानाचा वापर करून तयार करू शकता.

या धड्यात, आपण HTML, CSS, JavaScript आणि काही बॅकएंड इंटिग्रेशन वापरून एआय चॅट असिस्टंट तयार करू. तुम्ही शिकत असलेल्या कौशल्यांचा उपयोग करून शक्तिशाली एआय सेवांशी कसे जोडले जाऊ शकते हे तुम्हाला समजेल, ज्या संदर्भ समजून घेऊन अर्थपूर्ण उत्तर तयार करू शकतात.

एआयला एका विशाल ग्रंथालयासारखे समजा जे केवळ माहिती शोधत नाही तर ती एकत्र करून तुमच्या विशिष्ट प्रश्नांसाठी सुसंगत उत्तर तयार करते. हजारो पृष्ठे शोधण्याऐवजी तुम्हाला थेट, संदर्भासह उत्तर मिळते.

हे इंटिग्रेशन परिचित वेब तंत्रज्ञानाच्या सहकार्याने होते. HTML चॅट इंटरफेस तयार करते, CSS व्हिज्युअल डिझाइन हाताळते, JavaScript वापरकर्ता संवाद व्यवस्थापित करते आणि बॅकएंड API सर्वकाही एआय सेवांशी जोडते. हे ऑर्केस्ट्राच्या वेगवेगळ्या विभागांनी एकत्रितपणे सिम्फनी तयार करण्यासारखे आहे.

आपण नैसर्गिक मानवी संवाद आणि मशीन प्रोसेसिंग यांच्यातील पूल तयार करत आहोत. तुम्ही एआय सेवा इंटिग्रेशनची तांत्रिक अंमलबजावणी आणि संवादांना अंतर्ज्ञानी वाटण्यासाठी डिझाइन पॅटर्न शिकाल.

या धड्याच्या शेवटी, एआय इंटिग्रेशन तुम्हाला रहस्यमय प्रक्रियेसारखे वाटणार नाही, तर तुम्ही काम करू शकणाऱ्या आणखी एका API सारखे वाटेल. तुम्ही ChatGPT आणि Claude सारख्या अॅप्लिकेशन्सना चालवणारे मूलभूत पॅटर्न समजून घ्याल, ज्यासाठी तुम्ही शिकत असलेल्या वेब डेव्हलपमेंट तत्त्वांचा उपयोग केला जातो.

तुमच्या पूर्ण प्रकल्पाचे स्वरूप असे दिसेल:

एआय समजून घेणे: रहस्यापासून प्रावीण्यापर्यंत

कोडमध्ये जाण्यापूर्वी, आपण काय काम करत आहोत ते समजून घेऊया. जर तुम्ही यापूर्वी API वापरले असतील, तर तुम्हाला मूलभूत पॅटर्न माहित आहे: विनंती पाठवा, प्रतिसाद मिळवा.

एआय API समान संरचनेचे अनुसरण करतात, परंतु डेटाबेसमधून पूर्व-संचयित डेटा पुनर्प्राप्त करण्याऐवजी, ते मोठ्या प्रमाणात मजकुरातून शिकलेल्या पॅटर्नवर आधारित नवीन प्रतिसाद तयार करतात. हे ग्रंथालयाच्या कॅटलॉग सिस्टम आणि अनेक स्रोतांमधून माहिती एकत्र करू शकणाऱ्या ज्ञानी ग्रंथपालामधील फरकासारखे आहे.

"जनरेटिव्ह एआय" म्हणजे काय?

रोसेटा स्टोनने ज्ञात आणि अज्ञात भाषांमधील पॅटर्न शोधून इजिप्शियन हायरोग्लिफिक्स समजून घेण्यास विद्वानांना कसे सक्षम केले, याचा विचार करा. एआय मॉडेल्स अशाच प्रकारे काम करतात – ते मोठ्या प्रमाणात मजकुरातील पॅटर्न शोधतात जेणेकरून भाषा कशी कार्य करते हे समजून घेता येईल आणि नंतर नवीन प्रश्नांना योग्य प्रतिसाद तयार करण्यासाठी त्या पॅटर्नचा वापर केला जातो.

याचे सोपे उदाहरण देतो:

पारंपरिक डेटाबेस: जसे तुमचा जन्म प्रमाणपत्र मागणे – तुम्हाला प्रत्येक वेळी एकच दस्तऐवज मिळतो
सर्च इंजिन: जसे ग्रंथपालाला मांजरींवरील पुस्तके शोधण्यास सांगणे – ते तुम्हाला उपलब्ध असलेले दाखवतात
जनरेटिव्ह एआय: जसे ज्ञानी मित्राला मांजरींबद्दल विचारणे – ते तुम्हाला तुमच्या गरजेनुसार सुसंगत माहिती सांगतात

graph LR
    A[Your Question] --> B[AI Model]
    B --> C[Pattern Recognition]
    C --> D[Content Generation]
    D --> E[Contextual Response]
    
    F[Training Data<br/>Books, Articles, Web] --> B

एआय मॉडेल्स कसे शिकतात (सोप्या भाषेत)

एआय मॉडेल्स मोठ्या प्रमाणात मजकुराच्या डेटासेट्सच्या संपर्कातून शिकतात ज्यामध्ये पुस्तके, लेख आणि संवादांचा समावेश असतो. या प्रक्रियेद्वारे, ते खालील गोष्टींमधील पॅटर्न ओळखतात:

लिखित संवादामध्ये विचार कसे रचले जातात
कोणते शब्द सामान्यतः एकत्र दिसतात
संवाद सामान्यतः कसे चालतात
औपचारिक आणि अनौपचारिक संवादातील संदर्भात्मक फरक

हे पुरातत्वज्ञ प्राचीन भाषा डिकोड कशा करतात यासारखे आहे: ते व्याकरण, शब्दसंग्रह आणि सांस्कृतिक संदर्भ समजून घेण्यासाठी हजारो उदाहरणांचे विश्लेषण करतात, शेवटी शिकलेल्या पॅटर्नचा वापर करून नवीन मजकूरांचे अर्थ लावण्यास सक्षम होतात.

GitHub Models का?

आम्ही GitHub Models वापरत आहोत कारण ते व्यावसायिक-स्तरीय एआयसाठी प्रवेश देते ज्यासाठी आपली स्वतःची एआय पायाभूत सुविधा सेट करण्याची आवश्यकता नाही (जे सध्या तुम्हाला करायचे नाही!). हे हवामान API वापरण्यासारखे आहे, स्वतः हवामान अंदाज करण्यासाठी सर्वत्र हवामान स्टेशन सेट करण्याऐवजी.

हे मूलतः "AI-as-a-Service" आहे, आणि सर्वात चांगली गोष्ट म्हणजे? सुरुवात करण्यासाठी ते विनामूल्य आहे, त्यामुळे तुम्ही मोठा खर्च न करता प्रयोग करू शकता.

graph LR
    A[Frontend Chat UI] --> B[Your Backend API]
    B --> C[GitHub Models API]
    C --> D[AI Model Processing]
    D --> C
    C --> B
    B --> A

आम्ही GitHub Models आमच्या बॅकएंड इंटिग्रेशनसाठी वापरणार आहोत, जे व्यावसायिक-स्तरीय एआय क्षमतांसाठी विकसक-अनुकूल इंटरफेस प्रदान करते. GitHub Models Playground हे एक चाचणी वातावरण आहे जिथे तुम्ही वेगवेगळ्या एआय मॉडेल्ससह प्रयोग करू शकता आणि कोडमध्ये अंमलबजावणी करण्यापूर्वी त्यांची क्षमता समजू शकता.

प्लेग्राउंड इतके उपयुक्त का आहे:

वेगवेगळे एआय मॉडेल्स जसे GPT-4o-mini, Claude आणि इतर (सर्व विनामूल्य!) वापरून पहा
तुमच्या कल्पना आणि प्रॉम्प्ट्स कोड लिहिण्यापूर्वी चाचणी करा
तुमच्या आवडत्या प्रोग्रामिंग भाषेत तयार कोड स्निपेट्स मिळवा
सेटिंग्ज बदलून पहा जसे सर्जनशीलता स्तर आणि प्रतिसादाची लांबी, त्याचा आउटपुटवर कसा परिणाम होतो ते पाहा

थोडा प्रयोग केल्यानंतर, फक्त "Code" टॅबवर क्लिक करा आणि तुमची प्रोग्रामिंग भाषा निवडा, ज्यामुळे तुम्हाला आवश्यक अंमलबजावणी कोड मिळेल.

Python बॅकएंड इंटिग्रेशन सेट करणे

आता Python वापरून एआय इंटिग्रेशन अंमलात आणूया. Python एआय अॅप्लिकेशन्ससाठी उत्कृष्ट आहे कारण त्याचा साधा सिंटॅक्स आणि शक्तिशाली लायब्ररी आहेत. आपण GitHub Models प्लेग्राउंडमधील कोडसह प्रारंभ करू आणि नंतर ते पुनर्रचना करून पुनर्वापरयोग्य, उत्पादन-तयार फंक्शनमध्ये बदलू.

बेस इंप्लिमेंटेशन समजून घेणे

जेव्हा तुम्ही प्लेग्राउंडमधून Python कोड घेतात, तेव्हा तुम्हाला असे काहीतरी मिळेल. सुरुवातीला ते जास्त वाटत असल्यास काळजी करू नका – चला त्याचा तुकड्यांमध्ये अभ्यास करूया:

"""Run this model in Python

> pip install openai
"""
import os
from openai import OpenAI

# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. 
# Create your PAT token by following instructions here: 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"],
)

```python
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 एआयशी संवाद साधण्यासाठी
आम्ही OpenAI क्लायंट सेट करतो GitHub च्या एआय सर्व्हर्सकडे निर्देशित करण्यासाठी
आम्ही GitHub टोकन वापरून प्रमाणीकरण करतो (यावर नंतर अधिक!)
आम्ही संवाद संरचित करतो वेगवेगळ्या "भूमिका"सह – नाटकासाठी दृश्य सेट करण्यासारखे
आम्ही एआयला विनंती पाठवतो काही फाइन-ट्यूनिंग पॅरामीटर्ससह
आम्ही प्रतिसाद मजकूर काढतो परत आलेल्या सर्व डेटामधून

संदेश भूमिकांचे महत्त्व: एआय संवाद फ्रेमवर्क

एआय संवाद विशिष्ट संरचनेचा वापर करतात ज्यामध्ये वेगवेगळ्या "भूमिका" असतात ज्यांचे वेगवेगळे उद्देश असतात:

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

हे नाटक दिग्दर्शित करण्यासारखे आहे:

सिस्टम भूमिका: अभिनेताासाठी स्टेज निर्देशांसारखे – एआयला कसे वागायचे, कोणत्या व्यक्तिमत्त्वाने उत्तर द्यायचे ते सांगते
वापरकर्ता भूमिका: अॅप्लिकेशन वापरणाऱ्या व्यक्तीचा प्रत्यक्ष प्रश्न किंवा संदेश
असिस्टंट भूमिका: एआयचे उत्तर (तुम्ही हे पाठवत नाही, पण ते संवाद इतिहासात दिसते)

वास्तविक जगातील उदाहरण: कल्पना करा की तुम्ही पार्टीत तुमच्या मित्राची ओळख करून देत आहात:

सिस्टम संदेश: "हा माझा मित्र सारा आहे, ती एक डॉक्टर आहे जी वैद्यकीय संकल्पना सोप्या भाषेत स्पष्ट करण्यात उत्कृष्ट आहे"
वापरकर्ता संदेश: "तुम्ही लसी कशा कार्य करतात ते स्पष्ट करू शकता का?"
असिस्टंट प्रतिसाद: सारा एक मैत्रीपूर्ण डॉक्टर म्हणून उत्तर देते, वकील किंवा शेफ म्हणून नाही

एआय पॅरामीटर्स समजून घेणे: प्रतिसाद वर्तनाचे फाइन-ट्यूनिंग

एआय API कॉलमधील संख्यात्मक पॅरामीटर्स मॉडेल प्रतिसाद कसे तयार करतात ते नियंत्रित करतात. हे सेटिंग्ज तुम्हाला वेगवेगळ्या वापर प्रकरणांसाठी एआयचे वर्तन समायोजित करण्याची परवानगी देतात:

तापमान (0.0 ते 2.0): सर्जनशीलता नियंत्रण

याचा उपयोग: एआयचे प्रतिसाद किती सर्जनशील किंवा अंदाजानुसार असतील ते नियंत्रित करते.

जॅझ संगीतकाराच्या इम्प्रोव्हायझेशन स्तरासारखे विचार करा:

तापमान = 0.1: प्रत्येक वेळी एकच धून वाजवणे (अत्यंत अंदाजानुसार)
तापमान = 0.7: काही चवदार बदलांसह ओळखण्यायोग्य राहणे (संतुलित सर्जनशीलता)
तापमान = 1.5: पूर्ण प्रयोगात्मक जॅझ अनपेक्षित वळणांसह (अत्यंत सर्जनशील)

# Very predictable responses (good for factual questions)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "What is 2+2?"}],
    temperature=0.1  # Will almost always say "4"
)

# Creative responses (good for brainstorming)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Write a creative story opening"}],
    temperature=1.2  # Will generate unique, unexpected stories
)

मॅक्स टोकन्स (1 ते 4096+): प्रतिसाद लांबी नियंत्रक

याचा उपयोग: एआयच्या प्रतिसादाची लांबी किती असावी यावर मर्यादा सेट करते.

टोकन्स साधारणतः शब्दांशी समतुल्य असतात (अंदाजे 1 टोकन = इंग्रजीतील 0.75 शब्द):

max_tokens=50: लहान आणि सोपे (जसे टेक्स्ट संदेश)
max_tokens=500: एक किंवा दोन परिच्छेद
max_tokens=2000: उदाहरणांसह सविस्तर स्पष्टीकरण

# Short, concise answers
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=100  # Forces a brief explanation
)

# Detailed, comprehensive answers  
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=1500  # Allows for detailed explanations with examples
)

Top_p (0.0 ते 1.0): फोकस पॅरामीटर

याचा उपयोग: एआय सर्वात संभाव्य प्रतिसादांवर किती लक्ष केंद्रित करते ते नियंत्रित करते.

एआयकडे मोठा शब्दसंग्रह आहे, प्रत्येक शब्द किती संभाव्य आहे यावर आधारित रँकिंग विचार करा:

top_p=0.1: फक्त टॉप 10% संभाव्य शब्द विचारात घेतो (अत्यंत लक्ष केंद्रित)
top_p=0.9: संभाव्य शब्दांपैकी 90% विचारात घेतो (जास्त सर्जनशील)
top_p=1.0: सर्वकाही विचारात घेतो (कमाल विविधता)

उदाहरणार्थ: जर तुम्ही विचारले "आकाश सामान्यतः..."

कमी top_p: जवळजवळ निश्चितपणे "निळे" म्हणेल
उच्च top_p: "निळे", "ढगाळ", "विशाल", "बदलणारे", "सुंदर" इत्यादी म्हणू शकते

सर्वकाही एकत्र ठेवणे: वेगवेगळ्या वापर प्रकरणांसाठी पॅरामीटर संयोजन

# For factual, consistent answers (like a documentation bot)
factual_params = {
    "temperature": 0.2,
    "max_tokens": 300,
    "top_p": 0.3
}

# For creative writing assistance
creative_params = {
    "temperature": 1.1,
    "max_tokens": 1000,
    "top_p": 0.9
}

# For conversational, helpful responses (balanced)
conversational_params = {
    "temperature": 0.7,
    "max_tokens": 500,
    "top_p": 0.8
}

हे पॅरामीटर का महत्त्वाचे आहेत हे समजून घेणे: वेगवेगळ्या अॅप्लिकेशन्सना वेगवेगळ्या प्रकारच्या प्रतिसादांची आवश्यकता असते. ग्राहक सेवा बॉटने सुसंगत आणि तथ्यात्मक असावे (कमी तापमान), तर सर्जनशील लेखन सहाय्यकाने कल्पक आणि विविध असावे (उच्च तापमान). या पॅरामीटर्स समजून घेणे तुम्हाला तुमच्या एआयच्या व्यक्तिमत्त्वावर आणि प्रतिसाद शैलीवर नियंत्रण देते.


**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back

> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.

### Creating a Reusable AI Function

Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:

```python
import asyncio
from openai import AsyncOpenAI

# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
    base_url="https://models.github.ai/inference",
    api_key=os.environ["GITHUB_TOKEN"],
)

async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
    """
    Sends a prompt to the AI model asynchronously and returns the response.
    
    Args:
        prompt: The user's question or message
        system_message: Instructions that define the AI's behavior and personality
    
    Returns:
        str: The AI's response to the prompt
    """
    try:
        response = await client.chat.completions.create(
            messages=[
                {
                    "role": "system",
                    "content": system_message,
                },
                {
                    "role": "user",
                    "content": prompt,
                }
            ],
            model="openai/gpt-4o-mini",
            temperature=1,
            max_tokens=4096,
            top_p=1
        )
        return response.choices[0].message.content
    except Exception as e:
        logger.error(f"AI API error: {str(e)}")
        return "I'm sorry, I'm having trouble processing your request right now."

# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
    """Synchronous wrapper for async AI calls."""
    return asyncio.run(call_llm_async(prompt, system_message))

या सुधारित फंक्शनचे समजून घेणे:

दोन पॅरामीटर्स स्वीकारते: वापरकर्त्याचा प्रॉम्प्ट आणि पर्यायी सिस्टम संदेश
सामान्य सहाय्यक वर्तनासाठी डीफॉल्ट सिस्टम संदेश प्रदान करते
योग्य Python प्रकाराच्या सूचनांचा वापर करते चांगल्या कोड दस्तऐवजीकरणासाठी
फक्त प्रतिसाद सामग्री परत करते, ज्यामुळे आमच्या वेब API मध्ये वापरणे सोपे होते
सारखे मॉडेल पॅरामीटर्स राखते सुसंगत एआय वर्तनासाठी

सिस्टम प्रॉम्प्ट्सचे जादू: एआय व्यक्तिमत्त्व प्रोग्रामिंग

जर पॅरामीटर्स एआय कसे विचार करते ते नियंत्रित करत असतील, तर सिस्टम प्रॉम्प्ट्स एआय कोण आहे असे विचार करते ते नियंत्रित करतात. एआयसह काम करण्याचा हा प्रामाणिकपणे सर्वात रोमांचक भाग आहे – तुम्ही एआयला संपूर्ण व्यक्तिमत्त्व, तज्ज्ञ स्तर आणि संवाद शैली देत आहात.

सिस्टम प्रॉम्प्ट्स वेगवेगळ्या भूमिकांसाठी वेगवेगळ्या अभिनेत्यांना कास्ट करण्यासारखे आहेत: एक सामान्य सहाय्यक असण्याऐवजी, तुम्ही वेगवेगळ्या परिस्थितींसाठी विशेष तज्ज्ञ तयार करू शकता. तुम्हाला संयमी शिक्षक हवा आहे? सर्जनशील कल्पनांचा साथीदार हवा आहे? व्यवसाय सल्लागार हवा आहे? फक्त सिस्टम प्रॉम्प्ट बदला!

सिस्टम प्रॉम्प्ट्स इतके शक्तिशाली का आहेत

येथे आकर्षक भाग आहे: एआय मॉडेल्स असंख्य संवादांवर प्रशिक्षित केले गेले आहेत जिथे लोक वेगवेगळ्या भूमिका आणि तज्ज्ञ स्तर स्वीकारतात. जेव्हा तुम्ही एआयला विशिष्ट भूमिका देता, तेव्हा ते सर्व शिकलेल्या पॅटर्न सक्रिय करणारे स्विच चालू करण्यासारखे आहे.

हे एआयसाठी पद्धत अभिनयासारखे आहे: अभिनेत्याला सांगा "तुम्ही एक ज्ञानी वृद्ध प्राध्यापक आहात" आणि ते आपोआप त्यांची मुद्रा, शब्दसंग्रह आणि वर्तन समायोजित कसे करतात ते पहा. एआय भाषेच्या पॅटर्नसह काहीसे आश्चर्यकारकपणे समान करते.

प्रभावी सिस्टम प्रॉम्प्ट्स तयार करणे: कला आणि विज्ञान

उत्कृष्ट सिस्टम प्रॉम्प्टची रचना:

भूमिका/ओळख: एआय कोण आहे?
तज्ज्ञता: त्यांना काय माहित आहे?
संवाद शैली: ते कसे बोलतात?
विशिष्ट सूचना: त्यांना कशावर लक्ष केंद्रित करावे?

# ❌ Vague system prompt
"You are helpful."

# ✅ Detailed, effective system prompt
"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."

संदर्भासह सिस्टम प्रॉम्प्ट्सचे उदाहरण

चला वेगवेगळ्या सिस्टम प्रॉम्प्ट्स कसे पूर्णपणे वेगळ्या एआय व्यक्तिमत्त्व तयार करतात ते पाहूया:

# Example 1: The Patient Teacher
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.
"""

# Example 2: The Creative Collaborator  
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.
"""

# Example 3: The Strategic Business Advisor
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.
"""

सिस्टम प्रॉम्प्ट

आम्ही जे तयार करत आहोत त्यासाठी FastAPI का योग्य आहे:

डिफॉल्टने Async: एकाच वेळी अनेक AI विनंत्या हाताळू शकते, अडचण न येता
स्वयंचलित दस्तऐवज: /docs ला भेट द्या आणि सुंदर, परस्परसंवादी API दस्तऐवजीकरण पृष्ठ विनामूल्य मिळवा
अंतर्गत सत्यापन: समस्या होण्यापूर्वी त्रुटी पकडते
अतिशय वेगवान: Python च्या सर्वात जलद फ्रेमवर्कपैकी एक
आधुनिक Python: Python च्या सर्व नवीनतम आणि उत्कृष्ट वैशिष्ट्यांचा वापर करते

आणि आम्हाला बॅकएंड का आवश्यक आहे:

सुरक्षा: तुमचा AI API की हा पासवर्डसारखा आहे – जर तुम्ही तो फ्रंटएंड JavaScript मध्ये ठेवला, तर तुमच्या वेबसाइटचा सोर्स कोड पाहणारा कोणीही तो चोरू शकतो आणि तुमचे AI क्रेडिट्स वापरू शकतो. बॅकएंड संवेदनशील क्रेडेन्शियल्स सुरक्षित ठेवतो.

रेट लिमिटिंग आणि नियंत्रण: बॅकएंड तुम्हाला वापरकर्ते किती वेळा विनंत्या करू शकतात हे नियंत्रित करण्यास, वापरकर्ता प्रमाणीकरण लागू करण्यास आणि वापर ट्रॅक करण्यासाठी लॉगिंग जोडण्यास अनुमती देते.

डेटा प्रक्रिया: तुम्हाला संभाषणे जतन करायची असतील, अयोग्य सामग्री फिल्टर करायची असेल किंवा अनेक AI सेवा एकत्र करायच्या असतील. बॅकएंडमध्ये ही लॉजिक राहते.

आर्किटेक्चर क्लायंट-सर्व्हर मॉडेलसारखे आहे:

फ्रंटएंड: संवादासाठी वापरकर्ता इंटरफेस स्तर
बॅकएंड API: विनंती प्रक्रिया आणि रूटिंग स्तर
AI सेवा: बाह्य गणना आणि प्रतिसाद निर्मिती
पर्यावरणीय व्हेरिएबल्स: सुरक्षित कॉन्फिगरेशन आणि क्रेडेन्शियल्स संग्रह

विनंती-प्रतिसाद प्रवाह समजून घेणे

चला पाहूया जेव्हा वापरकर्ता संदेश पाठवतो तेव्हा काय होते:

sequenceDiagram
    participant User as 👤 User
    participant Frontend as 🌐 Frontend
    participant API as 🔧 FastAPI Server
    participant AI as 🤖 AI Service
    
    User->>Frontend: Types "Hello AI!"
    Frontend->>API: POST /hello {"message": "Hello AI!"}
    Note over API: Validates request<br/>Adds system prompt
    API->>AI: Sends formatted request
    AI->>API: Returns AI response
    Note over API: Processes response<br/>Logs conversation
    API->>Frontend: {"response": "Hello! How can I help?"}
    Frontend->>User: Displays AI message

प्रत्येक चरण समजून घेणे:

वापरकर्ता संवाद: व्यक्ती चॅट इंटरफेसमध्ये टाइप करते
फ्रंटएंड प्रक्रिया: JavaScript इनपुट कॅप्चर करते आणि JSON म्हणून स्वरूपित करते
API सत्यापन: FastAPI Pydantic मॉडेल्स वापरून विनंती स्वयंचलितपणे सत्यापित करते
AI एकत्रीकरण: बॅकएंड संदर्भ (सिस्टम प्रॉम्प्ट) जोडतो आणि AI सेवेला कॉल करतो
प्रतिसाद हाताळणी: API AI प्रतिसाद प्राप्त करते आणि आवश्यक असल्यास ते बदलू शकते
फ्रंटएंड प्रदर्शन: JavaScript चॅट इंटरफेसमध्ये प्रतिसाद दर्शवते

API आर्किटेक्चर समजून घेणे

sequenceDiagram
    participant Frontend
    participant FastAPI
    participant AI Function
    participant GitHub Models
    
    Frontend->>FastAPI: POST /hello {"message": "Hello 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": "Hello! How can I help?"}

FastAPI अॅप्लिकेशन तयार करणे

चला आपले API चरण-दर-चरण तयार करूया. api.py नावाची फाइल तयार करा आणि खालील FastAPI कोड जोडा:

# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Create FastAPI application
app = FastAPI(
    title="AI Chat API",
    description="A high-performance API for AI-powered chat applications",
    version="1.0.0"
)

# Configure CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Configure appropriately for production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Pydantic models for request/response validation
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:
        # Extract and validate message
        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]}...")
        
        # Call AI service (note: call_llm should be made async for better performance)
        ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
        
        logger.info("AI response generated successfully")
        return ChatResponse(response=ai_response)
        
    except HTTPException:
        raise
    except Exception as e:
        logger.error(f"Error processing chat message: {str(e)}")
        raise HTTPException(status_code=500, detail="Internal server error")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)

FastAPI अंमलबजावणी समजून घेणे:

आयात करते FastAPI आधुनिक वेब फ्रेमवर्क कार्यक्षमतेसाठी आणि Pydantic डेटा सत्यापनासाठी
स्वयंचलित API दस्तऐवजीकरण तयार करते (सर्व्हर चालू असताना /docs वर उपलब्ध)
CORS मिडलवेअर सक्षम करते विविध उत्पत्तीमधून फ्रंटएंड विनंत्या अनुमती देण्यासाठी
Pydantic मॉडेल्स परिभाषित करते स्वयंचलित विनंती/प्रतिसाद सत्यापन आणि दस्तऐवजीकरणासाठी
Async एंडपॉइंट्स वापरते एकाच वेळी अनेक विनंत्या हाताळण्यासाठी चांगली कार्यक्षमता
योग्य HTTP स्थिती कोड आणि त्रुटी हाताळणी अंमलात आणते HTTPException सह
संरचित लॉगिंग समाविष्ट करते मॉनिटरिंग आणि डीबगिंगसाठी
सेवा स्थितीचे निरीक्षण करण्यासाठी हेल्थ चेक एंडपॉइंट प्रदान करते

पारंपरिक फ्रेमवर्कच्या तुलनेत FastAPI चे मुख्य फायदे:

स्वयंचलित सत्यापन: Pydantic मॉडेल्स प्रक्रिया करण्यापूर्वी डेटा अखंडता सुनिश्चित करतात
परस्परसंवादी दस्तऐवज: स्वयंचलित, चाचणीयोग्य API दस्तऐवजीकरणासाठी /docs ला भेट द्या
टाइप सुरक्षा: Python टाइप हिन्ट्स रनटाइम त्रुटी टाळतात आणि कोड गुणवत्ता सुधारतात
Async समर्थन: एकाच वेळी अनेक AI विनंत्या अडथळा न येता हाताळा
कार्यक्षमता: रिअल-टाइम अॅप्लिकेशन्ससाठी लक्षणीय वेगवान विनंती प्रक्रिया

CORS समजून घेणे: वेबचा सुरक्षा रक्षक

CORS (Cross-Origin Resource Sharing) म्हणजे इमारतीतील सुरक्षा रक्षकासारखे आहे जो पाहुण्यांना प्रवेश करण्याची परवानगी आहे की नाही हे तपासतो. चला समजून घेऊया की याचा तुमच्या अॅप्लिकेशनवर कसा परिणाम होतो.

CORS म्हणजे काय आणि ते का अस्तित्वात आहे?

समस्या: कल्पना करा की कोणतीही वेबसाइट तुमच्या परवानगीशिवाय तुमच्या बँकेच्या वेबसाइटवर विनंत्या करू शकते. ते सुरक्षा संकट असेल! ब्राउझर "समान-उत्पत्ती धोरण" द्वारे हे डिफॉल्टने प्रतिबंधित करतात.

समान-उत्पत्ती धोरण: ब्राउझर फक्त वेब पृष्ठांना त्याच डोमेन, पोर्ट आणि प्रोटोकॉलवर विनंत्या करण्याची परवानगी देतात जिथून ते लोड केले गेले.

वास्तविक जगातील उपमा: हे अपार्टमेंट इमारतीच्या सुरक्षेसारखे आहे – फक्त रहिवासी (समान उत्पत्ती) डिफॉल्टने इमारतीमध्ये प्रवेश करू शकतात. जर तुम्हाला मित्राला (वेगळ्या उत्पत्ती) भेट देऊ द्यायचे असेल, तर तुम्हाला स्पष्टपणे सुरक्षा सांगणे आवश्यक आहे की ते ठीक आहे.

तुमच्या विकासाच्या वातावरणातील CORS

विकासादरम्यान, तुमचा फ्रंटएंड आणि बॅकएंड वेगवेगळ्या पोर्टवर चालतो:

फ्रंटएंड: http://localhost:3000 (किंवा file:// जर HTML थेट उघडत असाल)
बॅकएंड: http://localhost:5000

हे "वेगळ्या उत्पत्ती" मानले जातात जरी ते एकाच संगणकावर असले तरी!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"

CORS कॉन्फिगरेशन प्रत्यक्षात काय करते:

विशेष HTTP हेडर्स API प्रतिसादांमध्ये जोडते जे ब्राउझरला सांगतात "ही क्रॉस-उत्पत्ती विनंती अनुमत आहे"
"प्रीफ्लाइट" विनंत्या हाताळते (कधीकधी ब्राउझर वास्तविक विनंती पाठवण्यापूर्वी परवानग्या तपासतात)
तुमच्या ब्राउझर कन्सोलमधील "CORS धोरणाद्वारे अवरोधित" त्रुटी टाळते

CORS सुरक्षा: विकास विरुद्ध उत्पादन

# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)

# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])

# 🔒 Advanced: Different origins for different environments
if app.debug:  # Development mode
    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else:  # Production mode
    CORS(app, origins=["https://yourdomain.com"])

हे का महत्त्वाचे आहे: विकासामध्ये, CORS(app) म्हणजे तुमचा दरवाजा अनलॉक ठेवण्यासारखे आहे – सोयीस्कर पण सुरक्षित नाही. उत्पादनामध्ये, तुम्हाला अचूकपणे निर्दिष्ट करायचे आहे की कोणत्या वेबसाइट्स तुमच्या API शी संवाद साधू शकतात.

सामान्य CORS परिस्थिती आणि उपाय

परिस्थिती	समस्या	उपाय
स्थानिक विकास	फ्रंटएंड बॅकएंडपर्यंत पोहोचू शकत नाही	FastAPI मध्ये CORSMiddleware जोडा
GitHub Pages + Heroku	तैनात फ्रंटएंड API पर्यंत पोहोचू शकत नाही	CORS उत्पत्तीमध्ये तुमचा GitHub Pages URL जोडा
कस्टम डोमेन	उत्पादनात CORS त्रुटी	CORS उत्पत्ती तुमच्या डोमेनशी जुळवून अद्यतनित करा
मोबाइल अॅप	अॅप वेब API पर्यंत पोहोचू शकत नाही	तुमच्या अॅपचा डोमेन जोडा किंवा काळजीपूर्वक `*` वापरा

प्रो टिप: तुम्ही तुमच्या ब्राउझरच्या डेव्हलपर टूल्समध्ये नेटवर्क टॅब अंतर्गत CORS हेडर्स तपासू शकता. प्रतिसादामध्ये Access-Control-Allow-Origin सारखे हेडर्स शोधा.

त्रुटी हाताळणी आणि सत्यापन

आमच्या API मध्ये योग्य त्रुटी हाताळणी कशी समाविष्ट आहे हे लक्षात घ्या:

# Validate that we received a message
if not message:
    return jsonify({"error": "Message field is required"}), 400

मुख्य सत्यापन तत्त्वे:

आवश्यक फील्ड्ससाठी तपासते विनंत्या प्रक्रिया करण्यापूर्वी
अर्थपूर्ण त्रुटी संदेश JSON स्वरूपात परत करते
योग्य HTTP स्थिती कोड वापरते (वाईट विनंत्यांसाठी 400)
फ्रंटएंड विकसकांना समस्या डीबग करण्यात मदत करण्यासाठी स्पष्ट अभिप्राय प्रदान करते

तुमचा बॅकएंड सेट करणे आणि चालवणे

आता आमच्याकडे आमची AI एकत्रीकरण आणि FastAPI सर्व्हर तयार आहे, चला सर्व काही चालवूया. सेटअप प्रक्रियेमध्ये Python डिपेंडन्सी इंस्टॉल करणे, पर्यावरणीय व्हेरिएबल्स कॉन्फिगर करणे आणि तुमचा विकास सर्व्हर सुरू करणे समाविष्ट आहे.

Python पर्यावरण सेटअप

तुमचे Python विकास वातावरण सेट करूया. व्हर्च्युअल वातावरण म्हणजे मॅनहॅटन प्रोजेक्टच्या विभागीय दृष्टिकोनासारखे – प्रत्येक प्रकल्पाला विशिष्ट साधने आणि डिपेंडन्सीसह स्वतःची वेगळी जागा मिळते, विविध प्रकल्पांमधील संघर्ष टाळण्यासाठी.

# Navigate to your backend directory
cd backend

# Create a virtual environment (like creating a clean room for your project)
python -m venv venv

# Activate it (Linux/Mac)
source ./venv/bin/activate

# On Windows, use:
# venv\Scripts\activate

# Install the good stuff
pip install openai fastapi uvicorn python-dotenv

आम्ही काय केले:

आमचा स्वतःचा छोटासा Python बबल तयार केला जिथे आम्ही पॅकेजेस इंस्टॉल करू शकतो इतर कोणत्याही गोष्टीवर परिणाम न करता
ते सक्रिय केले जेणेकरून आमचा टर्मिनल या विशिष्ट वातावरणाचा वापर करेल
आवश्यक गोष्टी इंस्टॉल केल्या: OpenAI AI साठी, FastAPI वेब API साठी, Uvicorn ते प्रत्यक्षात चालवण्यासाठी आणि python-dotenv सुरक्षित गुपित व्यवस्थापनासाठी

मुख्य डिपेंडन्सी स्पष्ट केल्या:

FastAPI: आधुनिक, जलद वेब फ्रेमवर्क स्वयंचलित API दस्तऐवजीकरणासह
Uvicorn: FastAPI अॅप्लिकेशन्स चालवणारा अतिशय वेगवान ASGI सर्व्हर
OpenAI: GitHub मॉडेल्स आणि OpenAI API एकत्रीकरणासाठी अधिकृत लायब्ररी
python-dotenv: .env फाइल्समधून सुरक्षित पर्यावरणीय व्हेरिएबल्स लोड करणे

पर्यावरणीय कॉन्फिगरेशन: गुपित सुरक्षित ठेवणे

API सुरू करण्यापूर्वी, वेब विकासातील सर्वात महत्त्वाचा धडा म्हणजे तुमची गुपिते खरोखर गुप्त कशी ठेवायची याबद्दल बोलणे आवश्यक आहे. पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित तिजोरीसारखे आहेत ज्यामध्ये फक्त तुमचा अॅप्लिकेशन प्रवेश करू शकतो.

पर्यावरणीय व्हेरिएबल्स म्हणजे काय?

पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित ठेवण्याचे बॉक्स – तुम्ही तुमची मौल्यवान सामग्री त्यात ठेवता आणि फक्त तुम्ही (आणि तुमचा अॅप) ती बाहेर काढण्यासाठी किल्ली असते. तुमच्या कोडमध्ये संवेदनशील माहिती थेट लिहिण्याऐवजी (जिथे अक्षरशः कोणीही ती पाहू शकतो), तुम्ही ती सुरक्षितपणे पर्यावरणात संग्रहित करता.

येथे फरक आहे:

चुकीचा मार्ग: तुमचा पासवर्ड स्टिकी नोटवर लिहून तुमच्या मॉनिटरवर ठेवणे
योग्य मार्ग: तुमचा पासवर्ड सुरक्षित पासवर्ड व्यवस्थापकामध्ये ठेवणे ज्यामध्ये फक्त तुम्हाला प्रवेश आहे

पर्यावरणीय व्हेरिएबल्स का महत्त्वाचे आहेत

# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
    api_key="ghp_1234567890abcdef...",  # Anyone can steal this!
    base_url="https://models.github.ai/inference"
)

# ✅ DO THIS - API key stored securely
client = OpenAI(
    api_key=os.environ["GITHUB_TOKEN"],  # Only your app can access this
    base_url="https://models.github.ai/inference"
)

जेव्हा तुम्ही गुपिते हार्डकोड करता तेव्हा काय होते:

आवृत्ती नियंत्रण प्रदर्शन: तुमच्या Git रिपॉझिटरीमध्ये प्रवेश असलेल्या कोणालाही तुमचा API की दिसतो
सार्वजनिक रिपॉझिटरी: जर तुम्ही GitHub वर पुश केले, तर तुमचा की संपूर्ण इंटरनेटला दिसतो
टीम शेअरिंग: तुमच्या प्रकल्पावर काम करणाऱ्या इतर विकसकांना तुमच्या वैयक्तिक API कीचा प्रवेश मिळतो
सुरक्षा उल्लंघन: जर कोणी तुमचा API की चोरला, तर ते तुमचे AI क्रेडिट्स वापरू शकतात

तुमची पर्यावरणीय फाइल सेट करणे

तुमच्या बॅकएंड डिरेक्टरीमध्ये .env फाइल तयार करा. ही फाइल तुमची गुपिते स्थानिक पातळीवर संग्रहित करते:

# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development

.env फाइल समजून घेणे:

प्रत्येक ओळीत एक गुपित KEY=value स्वरूपात
समान चिन्हाभोवती कोणतेही स्पेस नाहीत
मूल्यांभोवती कोट्स आवश्यक नाहीत (सामान्यतः)
टिप्पण्या # ने सुरू होतात

तुमचा GitHub वैयक्तिक प्रवेश टोकन तयार करणे

तुमचा GitHub टोकन म्हणजे एक विशेष पासवर्ड आहे जो तुमच्या अॅप्लिकेशनला GitHub च्या AI सेवांचा वापर करण्याची परवानगी देतो:

टोकन तयार करण्याचे चरण:

GitHub सेटिंग्जला जा → Developer settings → Personal access tokens → Tokens (classic)
"Generate new token (classic)" वर क्लिक करा
कालबाह्य तारीख सेट करा (चाचणीसाठी 30 दिवस, उत्पादनासाठी जास्त)
स्कोप्स निवडा: "repo" आणि तुम्हाला आवश्यक असलेल्या इतर परवानग्या तपासा
टोकन तयार करा आणि ताबडतोब कॉपी करा (तुम्ही ते पुन्हा पाहू शकत नाही!)
तुमच्या .env फाइलमध्ये पेस्ट करा

# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R

Python मध्ये पर्यावरणीय व्हेरिएबल्स लोड करणे

import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Now you can access them securely
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
    raise ValueError("GITHUB_TOKEN not found in environment variables!")

client = OpenAI(
    api_key=api_key,
    base_url="https://models.github.ai/inference"
)

हा कोड काय करतो:

तुमची .env फाइल लोड करतो आणि Python ला व्हेरिएबल्स उपलब्ध करतो
आवश्यक टोकन अस्तित्वात आहे का ते तपासते (चांगली त्रुटी हाताळणी!)
टोकन गहाळ असल्यास स्पष्ट त्रुटी उचलते
कोडमध्ये उघड न करता टोकन सुरक्षितपणे वापरते

Git सुरक्षा: .gitignore फाइल

तुमची .gitignore फाइल Git ला सांगते की कोणत्या फाइल्स कधीही ट्रॅक किंवा अपलोड करू नयेत:

# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/

हे का महत्त्वाचे आहे: एकदा तुम्ही .env .gitignore मध्ये जोडल्यावर, Git तुमची पर्यावरणीय फाइल दुर्लक्षित करेल, तुमची गुपिते GitHub वर अपलोड करण्याची चूक टाळेल.

वेगवेगळ्या वातावरणासाठी वेगवेगळी गुपिते

व्यावसायिक अॅप्लिकेशन्स वेगवेगळ्या वातावरणासाठी वेगवेगळ्या API की वापरतात:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
GITHUB_TOKEN=your_production_token
DEBUG=False

हे का महत्त्वाचे आहे: तुम्हाला तुमच्या विकास प्रयोगांचा तुमच्या उत्पादन AI वापर कोट्यावर परिणाम होऊ नये, आणि वेगवेगळ्या वातावरणासाठी वेगवेगळ्या सुरक्षा स्तरांची आवश्यकता आहे.

तुमचा विकास सर्व्हर सुरू करणे: तुमचा FastAPI जिवंत करणे

आता रोमांचक क्षण आला आहे – तुमचा FastAPI विकास सर्व्हर सुरू करणे आणि तुमचे AI एकत्रीकरण जिवंत पाहणे! FastAPI Uvicorn वापरतो, जो Async Python अॅप्लिकेशन्ससाठी विशेषतः डिझाइन केलेला अतिशय वेगवान ASGI सर्व्हर आहे.

FastAPI सर्व्हर स्टार्टअप प्रक्रिया समजून घेणे

# Method 1: Direct Python execution (includes auto-reload)
python api.py

# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload

जेव्हा तुम्ही हा आदेश चालवता, तेव्हा मागील बाजूस काय होते:

1. Python तुमचे FastAPI अॅप्लिकेशन लोड करते:

आवश्यक सर्व लायब्ररी आयात करते (FastAPI, Pydantic, OpenAI, इ.)
तुमच्या .env फाइलमधून

# test_api.py - Create this file to test your API
import requests
import json

# Test the API endpoint
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}

response = requests.post(url, json=data)
if response.status_code == 200:
    result = response.json()
    print("AI Response:", result['response'])
else:
    print("Error:", response.status_code, response.text)

सामान्य स्टार्टअप समस्यांचे निराकरण

त्रुटी संदेश	याचा अर्थ काय	कसे दुरुस्त करावे
`ModuleNotFoundError: No module named 'fastapi'`	FastAPI स्थापित केलेले नाही	आपल्या व्हर्च्युअल एन्व्हायर्नमेंटमध्ये `pip install fastapi uvicorn` चालवा
`ModuleNotFoundError: No module named 'uvicorn'`	ASGI सर्व्हर स्थापित केलेले नाही	आपल्या व्हर्च्युअल एन्व्हायर्नमेंटमध्ये `pip install uvicorn` चालवा
`KeyError: 'GITHUB_TOKEN'`	एन्व्हायर्नमेंट व्हेरिएबल सापडले नाही	आपल्या `.env` फाइल आणि `load_dotenv()` कॉल तपासा
`Address already in use`	पोर्ट 5000 व्यस्त आहे	पोर्ट 5000 वापरणारे इतर प्रोसेस बंद करा किंवा पोर्ट बदला
`ValidationError`	विनंती डेटा Pydantic मॉडेलशी जुळत नाही	आपली विनंती अपेक्षित स्कीमाशी जुळते का ते तपासा
`HTTPException 422`	प्रक्रिया न करता येणारी एंटिटी	विनंतीची पडताळणी अयशस्वी झाली, योग्य फॉर्मॅटसाठी `/docs` तपासा
`OpenAI API error`	AI सेवा प्रमाणीकरण अयशस्वी	आपला GitHub टोकन योग्य आहे आणि त्याला योग्य परवानग्या आहेत का ते तपासा

विकासासाठी सर्वोत्तम पद्धती

हॉट रीलोडिंग: FastAPI आणि Uvicorn आपल्याला Python फाइल्समध्ये बदल केल्यावर स्वयंचलित रीलोडिंग प्रदान करतात. याचा अर्थ असा की आपल्याला कोड बदलून त्वरित चाचणी करता येते, सर्व्हर पुन्हा सुरू करण्याची गरज नाही.

# Enable hot reloading explicitly
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload

विकासासाठी लॉगिंग: काय चालले आहे हे समजण्यासाठी लॉगिंग जोडा:

import logging

# Set up 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. आपल्या फ्रंटएंड कॉन्फिगरेशन अपडेट करा:

// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

Codespace URLs समजून घेणे

Codespace URLs एक अंदाजे पॅटर्न अनुसरतात:

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

याचे विश्लेषण:

codespace-name: आपल्या Codespace साठी एक अद्वितीय ओळखकर्ता (सामान्यतः आपल्या युजरनेमसह)
port: पोर्ट क्रमांक ज्यावर आपली सेवा चालत आहे (आपल्या FastAPI अॅपसाठी 5000)
app.github.dev: Codespace अॅप्ससाठी GitHub चे डोमेन

आपल्या Codespace सेटअपची चाचणी करणे

1. बॅकएंड थेट चाचणी करा: आपला सार्वजनिक URL नवीन ब्राउझर टॅबमध्ये उघडा. आपल्याला हे दिसले पाहिजे:

Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.

2. ब्राउझर डेव्हलपर टूल्ससह चाचणी करा:

// Open browser console and test your 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, dependencies स्थापित करा)	त्वरित (पूर्व-कॉन्फिगर केलेले वातावरण)
URL प्रवेश	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
पोर्ट कॉन्फिगरेशन	स्वयंचलित	मॅन्युअल (पोर्ट्स सार्वजनिक करा)
फाइल टिकाव	स्थानिक मशीन	GitHub रेपॉजिटरी
सहकार्य	वातावरण शेअर करणे कठीण	Codespace लिंक सहज शेअर करा
इंटरनेट अवलंबित्व	फक्त AI API कॉलसाठी	सर्व गोष्टींसाठी आवश्यक

Codespace विकास टिप्स

Codespaces मध्ये एन्व्हायर्नमेंट व्हेरिएबल्स: आपली .env फाइल Codespaces मध्ये तशीच कार्य करते, परंतु आपण Codespace मध्ये थेट एन्व्हायर्नमेंट व्हेरिएबल्स सेट करू शकता:

# Set environment variable for the current session
export GITHUB_TOKEN="your_token_here"

# Or add to your .bashrc for persistence
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc

पोर्ट व्यवस्थापन:

Codespaces आपले अॅप्लिकेशन पोर्टवर ऐकायला सुरुवात करताच स्वयंचलितपणे शोधते
आपण एकाच वेळी एकाधिक पोर्ट्स फॉरवर्ड करू शकता (जर आपण नंतर डेटाबेस जोडला तर उपयुक्त)
पोर्ट्स आपल्या Codespace चालू असताना प्रवेशयोग्य राहतात

विकास कार्यप्रवाह:

VS Code मध्ये कोड बदल करा
FastAPI स्वयंचलितपणे रीलोड होते (Uvicorn च्या रीलोड मोडमुळे)
सार्वजनिक URL द्वारे त्वरित बदलांची चाचणी करा
तयार झाल्यावर कमिट आणि पुश करा

💡 प्रो टिप: विकासादरम्यान आपल्या Codespace बॅकएंड URL बुकमार्क करा. Codespace नावे स्थिर असल्याने, आपण समान Codespace वापरत असताना URL बदलणार नाही.

फ्रंटएंड चॅट इंटरफेस तयार करणे: जिथे मानव AI शी संवाद साधतो

आता आपण वापरकर्ता इंटरफेस तयार करू – जिथे लोक आपल्या AI सहायकाशी संवाद साधण्याचा मार्ग ठरतो. मूळ iPhone च्या इंटरफेसच्या डिझाइनप्रमाणे, आपण जटिल तंत्रज्ञान सहज आणि नैसर्गिक वापरासाठी बनवण्यावर लक्ष केंद्रित करत आहोत.

आधुनिक फ्रंटएंड आर्किटेक्चर समजून घेणे

आपले चॅट इंटरफेस "सिंगल पेज अॅप्लिकेशन" किंवा SPA असेल. जुन्या पद्धतीच्या दृष्टिकोनाऐवजी जिथे प्रत्येक क्लिक नवीन पृष्ठ लोड करते, आपले अॅप सहज आणि त्वरित अपडेट होते:

जुनी वेबसाइट्स: जणू एखादे भौतिक पुस्तक वाचत आहात – आपण पूर्णपणे नवीन पृष्ठांवर जात आहात आपले चॅट अॅप: जणू आपला फोन वापरत आहात – सर्व काही सहजतेने वाहते आणि अपडेट होते

graph TD
    A[User Types Message] --> B[JavaScript Captures Input]
    B --> C[Validate & Format Data]
    C --> D[Send to Backend API]
    D --> E[Display Loading State]
    E --> F[Receive AI Response]
    F --> G[Update Chat Interface]
    G --> H[Ready for Next Message]

फ्रंटएंड विकासाचे तीन स्तंभ

प्रत्येक फ्रंटएंड अॅप्लिकेशन – साध्या वेबसाइट्सपासून Discord किंवा Slack सारख्या जटिल अॅप्सपर्यंत – तीन मुख्य तंत्रज्ञानावर आधारित असते. त्यांना आपण वेबवर दिसणाऱ्या आणि संवाद साधणाऱ्या प्रत्येक गोष्टीचा पाया समजतो:

HTML (रचना): हा आपला पाया आहे

कोणते घटक अस्तित्वात आहेत हे ठरवते (बटण, टेक्स्ट एरिया, कंटेनर)
सामग्रीला अर्थ देते (हे हेडर आहे, हे फॉर्म आहे, इ.)
मूलभूत रचना तयार करते ज्यावर सर्वकाही तयार होते

CSS (प्रस्तुतीकरण): हा आपला अंतर्गत डिझायनर आहे

सर्वकाही सुंदर बनवते (रंग, फॉन्ट्स, लेआउट्स)
वेगवेगळ्या स्क्रीन आकारांशी जुळवून घेते (फोन vs लॅपटॉप vs टॅबलेट)
गुळगुळीत अॅनिमेशन आणि व्हिज्युअल फीडबॅक तयार करते

JavaScript (वर्तन): हा आपला मेंदू आहे

वापरकर्त्याने काय केले यावर प्रतिक्रिया देते (क्लिक्स, टायपिंग, स्क्रोलिंग)
आपल्या बॅकएंडशी संवाद साधते आणि पृष्ठ अपडेट करते
सर्वकाही परस्परसंवादी आणि गतिशील बनवते

याला आर्किटेक्चरल डिझाइनप्रमाणे विचार करा:

HTML: संरचनात्मक ब्लूप्रिंट (स्पेस आणि नातेसंबंध परिभाषित करणे)
CSS: सौंदर्य आणि पर्यावरणीय डिझाइन (व्हिज्युअल शैली आणि वापरकर्ता अनुभव)
JavaScript: यांत्रिक प्रणाली (कार्यशीलता आणि परस्परसंवाद)

आधुनिक JavaScript आर्किटेक्चर का महत्त्वाचे आहे

आपले चॅट अॅप्लिकेशन आधुनिक JavaScript पॅटर्न वापरेल जे आपल्याला व्यावसायिक अॅप्लिकेशन्समध्ये दिसतील. हे संकल्पना समजून घेणे आपल्याला एक विकसक म्हणून वाढण्यास मदत करेल:

क्लास-आधारित आर्किटेक्चर: आपण आपला कोड वर्गांमध्ये आयोजित करू, जे वस्तूंसाठी ब्लूप्रिंट तयार करण्यासारखे आहे Async/Await: वेळ घेणाऱ्या ऑपरेशन्स हाताळण्याचा आधुनिक मार्ग (जसे की API कॉल्स) इव्हेंट-ड्रिव्हन प्रोग्रामिंग: आपले अॅप वापरकर्त्याच्या क्रियांसाठी (क्लिक्स, की प्रेस) प्रतिसाद देते, लूपमध्ये चालत नाही DOM Manipulation: वापरकर्त्याच्या संवाद आणि 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 विशिष्ट घटक शोधण्यासाठी आणि हाताळण्यासाठी सक्षम करते
स्क्रिप्ट प्लेसमेंट: JavaScript फाइल शेवटी लोड केली जाते जेणेकरून HTML प्रथम लोड होईल

ही रचना का कार्य करते:

तार्किक प्रवाह: हेडर → मुख्य सामग्री → इनपुट फॉर्म नैसर्गिक वाचन क्रमाशी जुळतो
कीबोर्ड ऍक्सेसिबल: वापरकर्ते सर्व परस्परसंवादी घटकांमधून टॅब करू शकतात
स्क्रीन रीडर फ्रेंडली: व्हिज्युअली इम्पेअर्ड वापरकर्त्यांसाठी स्पष्ट लँडमार्क्स आणि वर्णने
मोबाइल प्रतिसादक्षम: व्ह्यूपोर्ट मेटा टॅग प्रतिसादात्मक डिझाइन सक्षम करते
प्रोग्रेसिव्ह एन्हांसमेंट: CSS किंवा JavaScript लोड करण्यात अयशस्वी झाले तरी कार्य करते

परस्परसंवादी JavaScript जोडणे: आधुनिक वेब अॅप्लिकेशन लॉजिक

आता JavaScript तयार करूया जे आपले चॅट इंटरफेस जिवंत करते. आम्ही व्यावसायिक वेब विकासात आपल्याला भेटणारे आधुनिक JavaScript पॅटर्न वापरू, ज्यामध्ये ES6 क्लासेस, async/await, आणि इव्हेंट-ड्रिव्हन प्रोग्रामिंग समाविष्ट आहे.

आधुनिक JavaScript आर्किटेक्चर समजून घेणे

प्रक्रियात्मक कोड लिहिण्याऐवजी (एकमेकांच्या क्रमाने चालणाऱ्या फंक्शन्सची मालिका), आम्ही क्लास-आधारित आर्किटेक्चर तयार करू. वर्ग म्हणजे वस्तू तयार करण्यासाठी ब्लूप्रिंट आहे – जसे की आर्किटेक्टचा ब्लूप्रिंट एकाधिक घरे तयार करण्यासाठी वापरला जाऊ शकतो.

वेब अॅप्लिकेशन्ससाठी वर्ग का वापरावे?

संघटन: सर्व संबंधित कार्यक्षमता एकत्रित केली जाते
पुनर्वापरयोग्यता: आपण एकाच पृष्ठावर एकाधिक चॅट उदाहरणे तयार करू शकता
देखभालक्षमता: विशिष्ट वैशिष्ट्ये डीबग आणि बदलणे सोपे
व्यावसायिक मानक: React, Vue, आणि Angular सारख्या फ्रेमवर्कमध्ये हा पॅटर्न वापरला जातो

app.js तयार करा आणि हा आधुनिक, चांगल्या प्रकारे संरचित JavaScript वापरा:

// app.js - Modern chat application logic

class ChatApp {
    constructor() {
        // Get references to DOM elements we'll need to manipulate
        this.messages = document.getElementById("messages");
        this.form = document.getElementById("chatForm");
        this.input = document.getElementById("messageInput");
        this.sendButton = document.getElementById("sendBtn");
        
        // Configure your backend URL here
        this.BASE_URL = "http://localhost:5000"; // Update this for your environment
        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
        
        // Set up event listeners when the chat app is created
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        // Listen for form submission (when user clicks Send or presses Enter)
        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
        
        // Also listen for Enter key in the input field (better UX)
        this.input.addEventListener("keypress", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                this.handleSubmit(e);
            }
        });
    }
    
    async handleSubmit(event) {
        event.preventDefault(); // Prevent form from refreshing the page
        
        const messageText = this.input.value.trim();
        if (!messageText) return; // Don't send empty messages
        
        // Provide user feedback that something is happening
        this.setLoading(true);
        
        // Add user message to chat immediately (optimistic UI)
        this.appendMessage(messageText, "user");
        
        // Clear input field so user can type next message
        this.input.value = '';
        
        try {
            // Call the AI API and wait for response
            const reply = await this.callAPI(messageText);
            
            // Add AI response to chat
            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 {
            // Re-enable the interface regardless of success or failure
            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";
    }
}

// Initialize the chat application when the page loads
document.addEventListener("DOMContentLoaded", () => {
    new ChatApp();
});

प्रत्येक JavaScript संकल्पना समजून घेणे

ES6 क्लास संरचना:

class ChatApp {
    constructor() {
        // This runs when you create a new ChatApp instance
        // It's like the "setup" function for your chat
    }
    
    methodName() {
        // Methods are functions that belong to the class
        // They can access class properties using "this"
    }
}

Async/Await पॅटर्न:

// Old way (callback hell):
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Modern way (async/await):
try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error(error);
}

**इव्हेंट-ड्रिव्ह ही आर्किटेक्चर स्केलेबल आहे – तुम्ही सहजपणे संदेश संपादन, फाइल अपलोड्स किंवा एकाधिक संभाषण थ्रेड्स सारख्या वैशिष्ट्ये जोडू शकता, मुख्य संरचना पुन्हा लिहिण्याची गरज नाही.

तुमच्या चॅट इंटरफेसचे स्टाइलिंग

आता 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 अद्यतनित करणे हा अंतिम टप्पा आहे, जो तुमच्या बॅकएंड सर्व्हरशी जुळतो:

// For local development
this.BASE_URL = "http://localhost:5000";

// For GitHub Codespaces (replace with your actual URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

तुमचा बॅकएंड URL निश्चित करणे:

स्थानिक विकास: जर तुम्ही फ्रंटएंड आणि बॅकएंड स्थानिकपणे चालवत असाल तर http://localhost:5000 वापरा
Codespaces: पोर्ट 5000 सार्वजनिक केल्यानंतर पोर्ट्स टॅबमध्ये तुमचा बॅकएंड URL शोधा
प्रोडक्शन: होस्टिंग सेवेमध्ये तैनात करताना तुमच्या वास्तविक डोमेनसह बदला

💡 चाचणी टिप: तुम्ही तुमच्या ब्राउझरमध्ये रूट URL ला भेट देऊन तुमचा बॅकएंड थेट चाचणी करू शकता. तुम्हाला तुमच्या FastAPI सर्व्हरकडून स्वागत संदेश दिसायला हवा.

चाचणी आणि तैनाती

आता तुमच्याकडे फ्रंटएंड आणि बॅकएंड घटक तयार आहेत, चला सर्वकाही एकत्र कार्य करते याची चाचणी करूया आणि तुमचा चॅट असिस्टंट इतरांसोबत शेअर करण्यासाठी तैनाती पर्याय एक्सप्लोर करूया.

स्थानिक चाचणी कार्यप्रवाह

तुमचे संपूर्ण अॅप्लिकेशन चाचणी करण्यासाठी खालील चरणांचे अनुसरण करा:

graph TD
    A[Start Backend Server] --> B[Configure Environment Variables]
    B --> C[Test API Endpoints]
    C --> D[Open Frontend in Browser]
    D --> E[Test Chat Functionality]
    E --> F[Debug Any Issues]

चरण-दर-चरण चाचणी प्रक्रिया:

तुमचा बॅकएंड सर्व्हर सुरू करा:

cd backend
source venv/bin/activate  # or venv\Scripts\activate on Windows
python api.py

API कार्यरत आहे याची खात्री करा:
- तुमच्या ब्राउझरमध्ये http://localhost:5000 उघडा
- तुम्हाला तुमच्या FastAPI सर्व्हरकडून स्वागत संदेश दिसायला हवा
तुमचा फ्रंटएंड उघडा:
- तुमच्या फ्रंटएंड डिरेक्टरीमध्ये जा
- तुमच्या वेब ब्राउझरमध्ये index.html उघडा
- किंवा चांगल्या विकास अनुभवासाठी VS Code चा Live Server विस्तार वापरा
चॅट कार्यक्षमता चाचणी करा:
- इनपुट फील्डमध्ये संदेश टाइप करा
- "Send" वर क्लिक करा किंवा Enter दाबा
- AI योग्य प्रतिसाद देत आहे याची खात्री करा
- कोणत्याही जावास्क्रिप्ट त्रुटींसाठी ब्राउझर कन्सोल तपासा

सामान्य समस्यांचे निराकरण

समस्या	लक्षणे	उपाय
CORS त्रुटी	फ्रंटएंड बॅकएंडपर्यंत पोहोचू शकत नाही	FastAPI CORSMiddleware योग्यरित्या कॉन्फिगर केले आहे याची खात्री करा
API की त्रुटी	401 अनधिकृत प्रतिसाद	तुमच्या `GITHUB_TOKEN` पर्यावरण व्हेरिएबल तपासा
कनेक्शन नाकारले	फ्रंटएंडमध्ये नेटवर्क त्रुटी	बॅकएंड URL आणि Flask सर्व्हर चालू आहे याची खात्री करा
AI प्रतिसाद नाही	रिक्त किंवा त्रुटी प्रतिसाद	API कोटा किंवा प्रमाणीकरण समस्यांसाठी बॅकएंड लॉग तपासा

सामान्य डीबगिंग चरण:

तपासा ब्राउझर डेव्हलपर टूल्स कन्सोलमध्ये जावास्क्रिप्ट त्रुटी
तपासा नेटवर्क टॅब यशस्वी API विनंत्या आणि प्रतिसाद दर्शवते
पुनरावलोकन करा बॅकएंड टर्मिनल आउटपुट Python त्रुटी किंवा API समस्यांसाठी
पुष्टी करा पर्यावरण व्हेरिएबल्स योग्यरित्या लोड केले आहेत आणि प्रवेशयोग्य आहेत

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: संभाषण इतिहास आणि संदेश टिकवून ठेवण्याची सुविधा जोडून चॅट असिस्टंट सुधारित करा. हे आव्हान तुम्हाला चॅट अॅप्लिकेशन्समध्ये स्टेट कसे व्यवस्थापित करायचे आणि चांगल्या वापरकर्ता अनुभवासाठी डेटा स्टोरेज कसे अंमलात आणायचे हे समजून घेण्यास मदत करेल.

प्रॉम्प्ट: चॅट अॅप्लिकेशनमध्ये संभाषण इतिहास समाविष्ट करण्यासाठी सुधारित करा जो सत्रांदरम्यान टिकून राहतो. चॅट संदेश स्थानिक स्टोरेजमध्ये सेव्ह करण्याची सुविधा जोडा, पृष्ठ लोड झाल्यावर संभाषण इतिहास प्रदर्शित करा आणि "Clear History" बटण समाविष्ट करा. तसेच टायपिंग इंडिकेटर्स आणि संदेश टाइमस्टॅम्प्स अंमलात आणा जेणेकरून चॅट अनुभव अधिक वास्तववादी होईल.

agent mode बद्दल अधिक जाणून घ्या.

असाइनमेंट: तुमचा वैयक्तिक AI असिस्टंट तयार करा

आता तुम्ही तुमचा स्वतःचा AI असिस्टंट अंमलात आणण्याची वेळ आली आहे. फक्त ट्यूटोरियल कोडची पुनरावृत्ती करण्याऐवजी, ही संधी संकल्पना लागू करण्याची आहे, जे तुम्हाला तुमच्या स्वतःच्या आवडी आणि वापर प्रकरणे प्रतिबिंबित करणारे काहीतरी तयार करण्याची परवानगी देते.

प्रकल्प आवश्यकता

तुमचा प्रकल्प स्वच्छ, व्यवस्थित संरचनेसह सेट करूया:

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

मुख्य अंमलबजावणी कार्ये

बॅकएंड विकास:

आमचा FastAPI कोड घ्या आणि तो तुमचा स्वतःचा बनवा
एक अद्वितीय AI व्यक्तिमत्व तयार करा – कदाचित एक उपयुक्त स्वयंपाक सहाय्यक, एक सर्जनशील लेखन भागीदार किंवा एक अभ्यास साथीदार?
मजबूत त्रुटी हाताळणी जोडा जेणेकरून गोष्टी चुकीच्या झाल्यास तुमचे अॅप तुटणार नाही
स्पष्ट दस्तऐवजीकरण लिहा ज्यामुळे कोणीही तुमचा API कसा कार्य करतो हे समजू शकेल

फ्रंटएंड विकास:

एक चॅट इंटरफेस तयार करा जो अंतर्ज्ञानी आणि स्वागतार्ह वाटतो
स्वच्छ, आधुनिक जावास्क्रिप्ट लिहा जे तुम्ही इतर विकसकांना अभिमानाने दाखवू शकता
कस्टम स्टाइलिंग डिझाइन करा जे तुमच्या AI च्या व्यक्तिमत्वाचे प्रतिबिंबित करते – मजेदार आणि रंगीत? स्वच्छ आणि किमान? पूर्णपणे तुमच्यावर अवलंबून आहे!
याची खात्री करा की ते फोन आणि संगणकांवर उत्तम प्रकारे कार्य करते

वैयक्तिकरण आवश्यकता:

एक अद्वितीय नाव आणि व्यक्तिमत्व निवडा तुमच्या AI असिस्टंटसाठी – कदाचित असे काहीतरी जे तुमच्या आवडी किंवा तुम्हाला सोडवायच्या समस्या प्रतिबिंबित करते
दृश्य डिझाइन सानुकूलित करा तुमच्या असिस्टंटच्या वायबशी जुळण्यासाठी
एक आकर्षक स्वागत संदेश लिहा जो लोकांना चॅटिंग सुरू करण्याची इच्छा निर्माण करतो
तुमच्या असिस्टंटला वेगवेगळ्या प्रकारच्या प्रश्नांसह चाचणी करा ते कसे प्रतिसाद देते हे पाहण्यासाठी

सुधारणा कल्पना (ऐच्छिक)

तुमचा प्रकल्प पुढील स्तरावर नेऊ इच्छिता? एक्सप्लोर करण्यासाठी येथे काही मजेदार कल्पना आहेत:

वैशिष्ट्य	वर्णन	तुम्ही सराव कराल अशा कौशल्ये
संदेश इतिहास	पृष्ठ रीफ्रेश झाल्यानंतरही संभाषण लक्षात ठेवा	localStorage सह काम करणे, JSON हाताळणी
टायपिंग इंडिकेटर्स	प्रतिसादाची वाट पाहत असताना "AI टायपिंग आहे..." दर्शवा	CSS अॅनिमेशन, असिंक्रोनस प्रोग्रामिंग
संदेश टाइमस्टॅम्प्स	प्रत्येक संदेश कधी पाठवला गेला ते दर्शवा	तारीख/वेळ स्वरूपन, UX डिझाइन
चॅट निर्यात करा	वापरकर्त्यांना त्यांचे संभाषण डाउनलोड करू द्या	फाइल हाताळणी, डेटा निर्यात
थीम स्विचिंग	लाइट/डार्क मोड टॉगल	CSS व्हेरिएबल्स, वापरकर्ता प्राधान्ये
व्हॉइस इनपुट	स्पीच-टू-टेक्स्ट कार्यक्षमता जोडा	वेब APIs, प्रवेशयोग्यता

चाचणी आणि दस्तऐवजीकरण

गुणवत्ता हमी:

तुमचे अॅप्लिकेशन विविध इनपुट प्रकार आणि एज केससह चाचणी करा
तपासा प्रतिसादक्षम डिझाइन वेगवेगळ्या स्क्रीन आकारांवर कार्य करते
तपासा कीबोर्ड नेव्हिगेशन आणि स्क्रीन रीडर्ससह प्रवेशयोग्यता
HTML आणि CSS वैध करा मानकांचे पालन करण्यासाठी

दस्तऐवजीकरण आवश्यकता:

README.md लिहा तुमच्या प्रकल्पाचे वर्णन आणि ते कसे चालवायचे
तुमच्या चॅट इंटरफेसची कृतीत स्क्रीनशॉट समाविष्ट करा
तुम्ही जोडलेली कोणतीही अद्वितीय वैशिष्ट्ये किंवा सानुकूलने दस्तऐवजीकृत करा
इतर विकसकांसाठी स्पष्ट सेटअप सूचना प्रदान करा

सबमिशन मार्गदर्शक तत्त्वे

प्रकल्प वितरित:

सर्व स्त्रोत कोडसह संपूर्ण प्रकल्प फोल्डर
README.md प्रकल्पाचे वर्णन आणि सेटअप सूचना
तुमच्या चॅट असिस्टंटची कृतीत स्क्रीनशॉट
तुम्ही काय शिकलात आणि तुम्हाला कोणत्या आव्हानांचा सामना करावा लागला यावर थोडक्यात विचार

मूल्यांकन निकष:

कार्यक्षमता: चॅट असिस्टंट अपेक्षेप्रमाणे कार्य करते का?
कोड गुणवत्ता: कोड चांगल्या प्रकारे आयोजित, टिप्पणी केलेला आणि देखभाल करण्यायोग्य आहे का?
डिझाइन: इंटरफेस व्हिज्युअली आकर्षक आणि वापरण्यास सुलभ आहे का?
सर्जनशीलता: तुमची अंमलबजावणी किती अद्वितीय आणि वैयक्तिकृत आहे?
दस्तऐवजीकरण: सेटअप सूचना स्पष्ट आणि संपूर्ण आहेत का?

💡 यशस्वी टिप: प्रथम मूलभूत आवश्यकता पूर्ण करण्यास सुरुवात करा, नंतर सर्वकाही कार्य करत असल्यावर सुधारणा जोडा. प्रगत वैशिष्ट्ये जोडण्यापूर्वी एक पॉलिश कोर अनुभव तयार करण्यावर लक्ष केंद्रित करा.

समाधान

बोनस आव्हाने

तुमचा AI असिस्टंट पुढील स्तरावर नेण्यासाठी तयार आहात? AI एकत्रीकरण आणि वेब विकासाची सखोल समजून घेण्यासाठी तुम्हाला मदत करणारी ही प्रगत आव्हाने आजमावून पहा.

व्यक्तिमत्व सानुकूलन

तुमच्या AI असिस्टंटला एक अद्वितीय व्यक्तिमत्व दिल्यावर खरी जादू होते. विशेष सहाय्यक तयार करण्यासाठी वेगवेगळ्या सिस्टम प्रॉम्प्टसह प्रयोग करा:

व्यावसायिक सहाय्यक उदाहरण:

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

सर्जनशील लेखन सहाय्यक उदाहरण:

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

तांत्रिक मार्गदर्शक उदाहरण:

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

फ्रंटएंड सुधारणा

तुमच्या चॅट इंटरफेसला या दृश्य आणि कार्यात्मक सुधारणा करून रूपांतरित करा:

प्रगत CSS वैशिष्ट्ये:

गुळगुळीत संदेश अॅनिमेशन आणि ट्रान्झिशन्स अंमलात आणा
CSS आकार आणि ग्रेडियंटसह कस्टम चॅट बबल डिझाइन जोडा
AI "विचार करत आहे" असताना टायपिंग इंडिकेटर अॅनिमेशन तयार करा
इमोजी प्रतिक्रिया किंवा संदेश रेटिंग प्रणाली डिझाइन करा

जावास्क्रिप्ट सुधारणा:

कीबोर्ड शॉर्टकट जोडा (Ctrl+Enter पाठवण्यासाठी, इनपुट साफ करण्यासाठी Escape)
संदेश शोध आणि फिल्टरिंग कार्यक्षमता अंमलात आणा
संभाषण निर्यात वैशिष्ट्य तयार करा (टेक्स्ट किंवा JSON म्हणून डाउनलोड करा)
संदेश गमावणे टाळण्यासाठी स्थानिक स्टोरेजमध्ये ऑटो-सेव्ह जोडा

प्रगत AI एकत्रीकरण

एकाधिक AI व्यक्तिमत्वे:

ड्रॉपडाउन तयार करा वेगवेगळ्या AI व्यक्तिमत्वांमध्ये स्विच करण्यासाठी
वापरकर्त्याचे प्राधान्य व्यक्तिमत्व स्थानिक स्टोरेजमध्ये सेव्ह करा
संभाषण प्रवाह राखणारे संदर्भ स्विचिंग अंमलात आणा

स्मार्ट प्रतिसाद वैशिष्ट्ये:

संभाषण संदर्भ जागरूकता जोडा (AI मागील संदेश लक्षात ठेवते)
संभाषण विषयावर आधारित स्मार्ट सूचना अंमलात आणा
सामान्य प्रश्नांसाठी जलद प्रतिसाद बटणे तयार करा

🎯 शिकण्याचे उद्दिष्ट: ही बोनस आव्हाने तुम्हाला प्रॉडक्शन अॅप्लिकेशन्समध्ये वापरल्या जाणाऱ्या प्रगत वेब विकास पद्धती आणि AI एकत्रीकरण तंत्र समजून घेण्यास मदत करतात.

सारांश आणि पुढील पावले

अभिनंदन! तुम्ही स्क्रॅचपासून AI-सक्षम चॅट असिस्टंट यशस्वीरित्या तयार केला आहे. या प्रकल्पाने तुम्हाला आधुनिक वेब विकास तंत्रज्ञान आणि AI एकत्रीकरणाचा प्रत्यक्ष अनुभव दिला आहे – आजच्या तंत्रज्ञानाच्या लँडस्केपमध्ये अधिकाधिक मौल्यवान कौशल्ये.

तुम्ही काय साध्य केले आहे

या धड्यादरम्यान, तुम्ही अनेक महत्त्वाच्या तंत्रज्ञान आणि संकल्पनांमध्ये प्राविण्य मिळवले आहे: