# एआयसह चॅट असिस्टंट तयार करा स्टार ट्रेकमध्ये जहाजाच्या संगणकाशी सहज संवाद साधत, जटिल प्रश्न विचारत आणि विचारपूर्वक उत्तर मिळवत असलेल्या क्रूची आठवण आहे का? 1960 च्या दशकातील विज्ञान कल्पनेप्रमाणे वाटणारी गोष्ट आता तुम्ही वेब तंत्रज्ञानाचा वापर करून तयार करू शकता. या धड्यात, आपण HTML, CSS, JavaScript आणि काही बॅकएंड इंटिग्रेशन वापरून एआय चॅट असिस्टंट तयार करू. तुम्ही शिकत असलेल्या कौशल्यांचा उपयोग करून शक्तिशाली एआय सेवांशी कसे जोडले जाऊ शकते हे तुम्हाला समजेल, ज्या संदर्भ समजून घेऊन अर्थपूर्ण उत्तर तयार करू शकतात. एआयला एका विशाल ग्रंथालयासारखे समजा जे केवळ माहिती शोधत नाही तर ती एकत्र करून तुमच्या विशिष्ट प्रश्नांसाठी सुसंगत उत्तर तयार करते. हजारो पृष्ठे शोधण्याऐवजी तुम्हाला थेट, संदर्भासह उत्तर मिळते. हे इंटिग्रेशन परिचित वेब तंत्रज्ञानाच्या सहकार्याने होते. HTML चॅट इंटरफेस तयार करते, CSS व्हिज्युअल डिझाइन हाताळते, JavaScript वापरकर्ता संवाद व्यवस्थापित करते आणि बॅकएंड API सर्वकाही एआय सेवांशी जोडते. हे ऑर्केस्ट्राच्या वेगवेगळ्या विभागांनी एकत्रितपणे सिम्फनी तयार करण्यासारखे आहे. आपण नैसर्गिक मानवी संवाद आणि मशीन प्रोसेसिंग यांच्यातील पूल तयार करत आहोत. तुम्ही एआय सेवा इंटिग्रेशनची तांत्रिक अंमलबजावणी आणि संवादांना अंतर्ज्ञानी वाटण्यासाठी डिझाइन पॅटर्न शिकाल. या धड्याच्या शेवटी, एआय इंटिग्रेशन तुम्हाला रहस्यमय प्रक्रियेसारखे वाटणार नाही, तर तुम्ही काम करू शकणाऱ्या आणखी एका API सारखे वाटेल. तुम्ही ChatGPT आणि Claude सारख्या अॅप्लिकेशन्सना चालवणारे मूलभूत पॅटर्न समजून घ्याल, ज्यासाठी तुम्ही शिकत असलेल्या वेब डेव्हलपमेंट तत्त्वांचा उपयोग केला जातो. तुमच्या पूर्ण प्रकल्पाचे स्वरूप असे दिसेल: ![चॅट अॅप इंटरफेस ज्यामध्ये वापरकर्ता आणि एआय असिस्टंटमधील संवाद दिसतो](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.mr.png) ## एआय समजून घेणे: रहस्यापासून प्रावीण्यापर्यंत कोडमध्ये जाण्यापूर्वी, आपण काय काम करत आहोत ते समजून घेऊया. जर तुम्ही यापूर्वी API वापरले असतील, तर तुम्हाला मूलभूत पॅटर्न माहित आहे: विनंती पाठवा, प्रतिसाद मिळवा. एआय API समान संरचनेचे अनुसरण करतात, परंतु डेटाबेसमधून पूर्व-संचयित डेटा पुनर्प्राप्त करण्याऐवजी, ते मोठ्या प्रमाणात मजकुरातून शिकलेल्या पॅटर्नवर आधारित नवीन प्रतिसाद तयार करतात. हे ग्रंथालयाच्या कॅटलॉग सिस्टम आणि अनेक स्रोतांमधून माहिती एकत्र करू शकणाऱ्या ज्ञानी ग्रंथपालामधील फरकासारखे आहे. ### "जनरेटिव्ह एआय" म्हणजे काय? रोसेटा स्टोनने ज्ञात आणि अज्ञात भाषांमधील पॅटर्न शोधून इजिप्शियन हायरोग्लिफिक्स समजून घेण्यास विद्वानांना कसे सक्षम केले, याचा विचार करा. एआय मॉडेल्स अशाच प्रकारे काम करतात – ते मोठ्या प्रमाणात मजकुरातील पॅटर्न शोधतात जेणेकरून भाषा कशी कार्य करते हे समजून घेता येईल आणि नंतर नवीन प्रश्नांना योग्य प्रतिसाद तयार करण्यासाठी त्या पॅटर्नचा वापर केला जातो. **याचे सोपे उदाहरण देतो:** - **पारंपरिक डेटाबेस**: जसे तुमचा जन्म प्रमाणपत्र मागणे – तुम्हाला प्रत्येक वेळी एकच दस्तऐवज मिळतो - **सर्च इंजिन**: जसे ग्रंथपालाला मांजरींवरील पुस्तके शोधण्यास सांगणे – ते तुम्हाला उपलब्ध असलेले दाखवतात - **जनरेटिव्ह एआय**: जसे ज्ञानी मित्राला मांजरींबद्दल विचारणे – ते तुम्हाला तुमच्या गरजेनुसार सुसंगत माहिती सांगतात ```mermaid graph LR A[Your Question] --> B[AI Model] B --> C[Pattern Recognition] C --> D[Content Generation] D --> E[Contextual Response] F[Training Data
Books, Articles, Web] --> B ``` ### एआय मॉडेल्स कसे शिकतात (सोप्या भाषेत) एआय मॉडेल्स मोठ्या प्रमाणात मजकुराच्या डेटासेट्सच्या संपर्कातून शिकतात ज्यामध्ये पुस्तके, लेख आणि संवादांचा समावेश असतो. या प्रक्रियेद्वारे, ते खालील गोष्टींमधील पॅटर्न ओळखतात: - लिखित संवादामध्ये विचार कसे रचले जातात - कोणते शब्द सामान्यतः एकत्र दिसतात - संवाद सामान्यतः कसे चालतात - औपचारिक आणि अनौपचारिक संवादातील संदर्भात्मक फरक **हे पुरातत्वज्ञ प्राचीन भाषा डिकोड कशा करतात यासारखे आहे**: ते व्याकरण, शब्दसंग्रह आणि सांस्कृतिक संदर्भ समजून घेण्यासाठी हजारो उदाहरणांचे विश्लेषण करतात, शेवटी शिकलेल्या पॅटर्नचा वापर करून नवीन मजकूरांचे अर्थ लावण्यास सक्षम होतात. ### GitHub Models का? आम्ही GitHub Models वापरत आहोत कारण ते व्यावसायिक-स्तरीय एआयसाठी प्रवेश देते ज्यासाठी आपली स्वतःची एआय पायाभूत सुविधा सेट करण्याची आवश्यकता नाही (जे सध्या तुम्हाला करायचे नाही!). हे हवामान API वापरण्यासारखे आहे, स्वतः हवामान अंदाज करण्यासाठी सर्वत्र हवामान स्टेशन सेट करण्याऐवजी. हे मूलतः "AI-as-a-Service" आहे, आणि सर्वात चांगली गोष्ट म्हणजे? सुरुवात करण्यासाठी ते विनामूल्य आहे, त्यामुळे तुम्ही मोठा खर्च न करता प्रयोग करू शकता. ```mermaid 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](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) हे एक चाचणी वातावरण आहे जिथे तुम्ही वेगवेगळ्या एआय मॉडेल्ससह प्रयोग करू शकता आणि कोडमध्ये अंमलबजावणी करण्यापूर्वी त्यांची क्षमता समजू शकता. ![GitHub Models AI Playground इंटरफेस ज्यामध्ये मॉडेल निवड आणि चाचणी क्षेत्र आहे](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.mr.png) **प्लेग्राउंड इतके उपयुक्त का आहे:** - **वेगवेगळे एआय मॉडेल्स** जसे GPT-4o-mini, Claude आणि इतर (सर्व विनामूल्य!) वापरून पहा - **तुमच्या कल्पना आणि प्रॉम्प्ट्स** कोड लिहिण्यापूर्वी चाचणी करा - **तुमच्या आवडत्या प्रोग्रामिंग भाषेत** तयार कोड स्निपेट्स मिळवा - **सेटिंग्ज बदलून पहा** जसे सर्जनशीलता स्तर आणि प्रतिसादाची लांबी, त्याचा आउटपुटवर कसा परिणाम होतो ते पाहा थोडा प्रयोग केल्यानंतर, फक्त "Code" टॅबवर क्लिक करा आणि तुमची प्रोग्रामिंग भाषा निवडा, ज्यामुळे तुम्हाला आवश्यक अंमलबजावणी कोड मिळेल. ![प्लेग्राउंड निवड ज्यामध्ये वेगवेगळ्या प्रोग्रामिंग भाषांसाठी कोड जनरेशन पर्याय आहेत](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.mr.png) ## Python बॅकएंड इंटिग्रेशन सेट करणे आता Python वापरून एआय इंटिग्रेशन अंमलात आणूया. Python एआय अॅप्लिकेशन्ससाठी उत्कृष्ट आहे कारण त्याचा साधा सिंटॅक्स आणि शक्तिशाली लायब्ररी आहेत. आपण GitHub Models प्लेग्राउंडमधील कोडसह प्रारंभ करू आणि नंतर ते पुनर्रचना करून पुनर्वापरयोग्य, उत्पादन-तयार फंक्शनमध्ये बदलू. ### बेस इंप्लिमेंटेशन समजून घेणे जेव्हा तुम्ही प्लेग्राउंडमधून Python कोड घेतात, तेव्हा तुम्हाला असे काहीतरी मिळेल. सुरुवातीला ते जास्त वाटत असल्यास काळजी करू नका – चला त्याचा तुकड्यांमध्ये अभ्यास करूया: ```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 टोकन वापरून प्रमाणीकरण करतो** (यावर नंतर अधिक!) - **आम्ही संवाद संरचित करतो** वेगवेगळ्या "भूमिका"सह – नाटकासाठी दृश्य सेट करण्यासारखे - **आम्ही एआयला विनंती पाठवतो** काही फाइन-ट्यूनिंग पॅरामीटर्ससह - **आम्ही प्रतिसाद मजकूर काढतो** परत आलेल्या सर्व डेटामधून ### संदेश भूमिकांचे महत्त्व: एआय संवाद फ्रेमवर्क एआय संवाद विशिष्ट संरचनेचा वापर करतात ज्यामध्ये वेगवेगळ्या "भूमिका" असतात ज्यांचे वेगवेगळे उद्देश असतात: ```python 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**: पूर्ण प्रयोगात्मक जॅझ अनपेक्षित वळणांसह (अत्यंत सर्जनशील) ```python # 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**: उदाहरणांसह सविस्तर स्पष्टीकरण ```python # 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**: "निळे", "ढगाळ", "विशाल", "बदलणारे", "सुंदर" इत्यादी म्हणू शकते ### सर्वकाही एकत्र ठेवणे: वेगवेगळ्या वापर प्रकरणांसाठी पॅरामीटर संयोजन ```python # 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 मध्ये वापरणे सोपे होते - **सारखे मॉडेल पॅरामीटर्स राखते** सुसंगत एआय वर्तनासाठी ### सिस्टम प्रॉम्प्ट्सचे जादू: एआय व्यक्तिमत्त्व प्रोग्रामिंग जर पॅरामीटर्स एआय कसे विचार करते ते नियंत्रित करत असतील, तर सिस्टम प्रॉम्प्ट्स एआय कोण आहे असे विचार करते ते नियंत्रित करतात. एआयसह काम करण्याचा हा प्रामाणिकपणे सर्वात रोमांचक भाग आहे – तुम्ही एआयला संपूर्ण व्यक्तिमत्त्व, तज्ज्ञ स्तर आणि संवाद शैली देत आहात. **सिस्टम प्रॉम्प्ट्स वेगवेगळ्या भूमिकांसाठी वेगवेगळ्या अभिनेत्यांना कास्ट करण्यासारखे आहेत**: एक सामान्य सहाय्यक असण्याऐवजी, तुम्ही वेगवेगळ्या परिस्थितींसाठी विशेष तज्ज्ञ तयार करू शकता. तुम्हाला संयमी शिक्षक हवा आहे? सर्जनशील कल्पनांचा साथीदार हवा आहे? व्यवसाय सल्लागार हवा आहे? फक्त सिस्टम प्रॉम्प्ट बदला! #### सिस्टम प्रॉम्प्ट्स इतके शक्तिशाली का आहेत येथे आकर्षक भाग आहे: एआय मॉडेल्स असंख्य संवादांवर प्रशिक्षित केले गेले आहेत जिथे लोक वेगवेगळ्या भूमिका आणि तज्ज्ञ स्तर स्वीकारतात. जेव्हा तुम्ही एआयला विशिष्ट भूमिका देता, तेव्हा ते सर्व शिकलेल्या पॅटर्न सक्रिय करणारे स्विच चालू करण्यासारखे आहे. **हे एआयसाठी पद्धत अभिनयासारखे आहे**: अभिनेत्याला सांगा "तुम्ही एक ज्ञानी वृद्ध प्राध्यापक आहात" आणि ते आपोआप त्यांची मुद्रा, शब्दसंग्रह आणि वर्तन समायोजित कसे करतात ते पहा. एआय भाषेच्या पॅटर्नसह काहीसे आश्चर्यकारकपणे समान करते. #### प्रभावी सिस्टम प्रॉम्प्ट्स तयार करणे: कला आणि विज्ञान **उत्कृष्ट सिस्टम प्रॉम्प्टची रचना:** 1. **भूमिका/ओळख**: एआय कोण आहे? 2. **तज्ज्ञता**: त्यांना काय माहित आहे? 3. **संवाद शैली**: ते कसे बोलतात? 4. **विशिष्ट सूचना**: त्यांना कशावर लक्ष केंद्रित करावे? ```python # ❌ 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." ``` #### संदर्भासह सिस्टम प्रॉम्प्ट्सचे उदाहरण चला वेगवेगळ्या सिस्टम प्रॉम्प्ट्स कसे पूर्णपणे वेगळ्या एआय व्यक्तिमत्त्व तयार करतात ते पाहूया: ```python # 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 सेवा**: बाह्य गणना आणि प्रतिसाद निर्मिती - **पर्यावरणीय व्हेरिएबल्स**: सुरक्षित कॉन्फिगरेशन आणि क्रेडेन्शियल्स संग्रह ### विनंती-प्रतिसाद प्रवाह समजून घेणे चला पाहूया जेव्हा वापरकर्ता संदेश पाठवतो तेव्हा काय होते: ```mermaid 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
Adds system prompt API->>AI: Sends formatted request AI->>API: Returns AI response Note over API: Processes response
Logs conversation API->>Frontend: {"response": "Hello! How can I help?"} Frontend->>User: Displays AI message ``` **प्रत्येक चरण समजून घेणे:** 1. **वापरकर्ता संवाद**: व्यक्ती चॅट इंटरफेसमध्ये टाइप करते 2. **फ्रंटएंड प्रक्रिया**: JavaScript इनपुट कॅप्चर करते आणि JSON म्हणून स्वरूपित करते 3. **API सत्यापन**: FastAPI Pydantic मॉडेल्स वापरून विनंती स्वयंचलितपणे सत्यापित करते 4. **AI एकत्रीकरण**: बॅकएंड संदर्भ (सिस्टम प्रॉम्प्ट) जोडतो आणि AI सेवेला कॉल करतो 5. **प्रतिसाद हाताळणी**: API AI प्रतिसाद प्राप्त करते आणि आवश्यक असल्यास ते बदलू शकते 6. **फ्रंटएंड प्रदर्शन**: JavaScript चॅट इंटरफेसमध्ये प्रतिसाद दर्शवते ### API आर्किटेक्चर समजून घेणे ```mermaid sequenceDiagram participant Frontend participant FastAPI participant AI Function participant GitHub Models Frontend->>FastAPI: POST /hello {"message": "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 कोड जोडा: ```python # api.py from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from llm import call_llm import logging # 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` हे "वेगळ्या उत्पत्ती" मानले जातात जरी ते एकाच संगणकावर असले तरी! ```python 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 सुरक्षा: विकास विरुद्ध उत्पादन ```python # 🚨 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 मध्ये योग्य त्रुटी हाताळणी कशी समाविष्ट आहे हे लक्षात घ्या: ```python # 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 विकास वातावरण सेट करूया. व्हर्च्युअल वातावरण म्हणजे मॅनहॅटन प्रोजेक्टच्या विभागीय दृष्टिकोनासारखे – प्रत्येक प्रकल्पाला विशिष्ट साधने आणि डिपेंडन्सीसह स्वतःची वेगळी जागा मिळते, विविध प्रकल्पांमधील संघर्ष टाळण्यासाठी. ```bash # 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 सुरू करण्यापूर्वी, वेब विकासातील सर्वात महत्त्वाचा धडा म्हणजे तुमची गुपिते खरोखर गुप्त कशी ठेवायची याबद्दल बोलणे आवश्यक आहे. पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित तिजोरीसारखे आहेत ज्यामध्ये फक्त तुमचा अॅप्लिकेशन प्रवेश करू शकतो. #### पर्यावरणीय व्हेरिएबल्स म्हणजे काय? **पर्यावरणीय व्हेरिएबल्स म्हणजे सुरक्षित ठेवण्याचे बॉक्स** – तुम्ही तुमची मौल्यवान सामग्री त्यात ठेवता आणि फक्त तुम्ही (आणि तुमचा अॅप) ती बाहेर काढण्यासाठी किल्ली असते. तुमच्या कोडमध्ये संवेदनशील माहिती थेट लिहिण्याऐवजी (जिथे अक्षरशः कोणीही ती पाहू शकतो), तुम्ही ती सुरक्षितपणे पर्यावरणात संग्रहित करता. **येथे फरक आहे:** - **चुकीचा मार्ग**: तुमचा पासवर्ड स्टिकी नोटवर लिहून तुमच्या मॉनिटरवर ठेवणे - **योग्य मार्ग**: तुमचा पासवर्ड सुरक्षित पासवर्ड व्यवस्थापकामध्ये ठेवणे ज्यामध्ये फक्त तुम्हाला प्रवेश आहे #### पर्यावरणीय व्हेरिएबल्स का महत्त्वाचे आहेत ```python # 🚨 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" ) ``` **जेव्हा तुम्ही गुपिते हार्डकोड करता तेव्हा काय होते:** 1. **आवृत्ती नियंत्रण प्रदर्शन**: तुमच्या Git रिपॉझिटरीमध्ये प्रवेश असलेल्या कोणालाही तुमचा API की दिसतो 2. **सार्वजनिक रिपॉझिटरी**: जर तुम्ही GitHub वर पुश केले, तर तुमचा की संपूर्ण इंटरनेटला दिसतो 3. **टीम शेअरिंग**: तुमच्या प्रकल्पावर काम करणाऱ्या इतर विकसकांना तुमच्या वैयक्तिक API कीचा प्रवेश मिळतो 4. **सुरक्षा उल्लंघन**: जर कोणी तुमचा API की चोरला, तर ते तुमचे AI क्रेडिट्स वापरू शकतात #### तुमची पर्यावरणीय फाइल सेट करणे तुमच्या बॅकएंड डिरेक्टरीमध्ये `.env` फाइल तयार करा. ही फाइल तुमची गुपिते स्थानिक पातळीवर संग्रहित करते: ```bash # .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 सेवांचा वापर करण्याची परवानगी देतो: **टोकन तयार करण्याचे चरण:** 1. **GitHub सेटिंग्जला जा** → Developer settings → Personal access tokens → Tokens (classic) 2. **"Generate new token (classic)" वर क्लिक करा** 3. **कालबाह्य तारीख सेट करा** (चाचणीसाठी 30 दिवस, उत्पादनासाठी जास्त) 4. **स्कोप्स निवडा**: "repo" आणि तुम्हाला आवश्यक असलेल्या इतर परवानग्या तपासा 5. **टोकन तयार करा** आणि ताबडतोब कॉपी करा (तुम्ही ते पुन्हा पाहू शकत नाही!) 6. **तुमच्या .env फाइलमध्ये पेस्ट करा** ```bash # Example of what your token looks like (this is fake!) GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R ``` #### Python मध्ये पर्यावरणीय व्हेरिएबल्स लोड करणे ```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 ला सांगते की कोणत्या फाइल्स कधीही ट्रॅक किंवा अपलोड करू नयेत: ```bash # .gitignore - Add these lines .env *.env .env.local .env.production __pycache__/ venv/ .vscode/ ``` **हे का महत्त्वाचे आहे**: एकदा तुम्ही `.env` `.gitignore` मध्ये जोडल्यावर, Git तुमची पर्यावरणीय फाइल दुर्लक्षित करेल, तुमची गुपिते GitHub वर अपलोड करण्याची चूक टाळेल. #### वेगवेगळ्या वातावरणासाठी वेगवेगळी गुपिते व्यावसायिक अॅप्लिकेशन्स वेगवेगळ्या वातावरणासाठी वेगवेगळ्या API की वापरतात: ```bash # .env.development GITHUB_TOKEN=your_development_token DEBUG=True # .env.production GITHUB_TOKEN=your_production_token DEBUG=False ``` **हे का महत्त्वाचे आहे**: तुम्हाला तुमच्या विकास प्रयोगांचा तुमच्या उत्पादन AI वापर कोट्यावर परिणाम होऊ नये, आणि वेगवेगळ्या वातावरणासाठी वेगवेगळ्या सुरक्षा स्तरांची आवश्यकता आहे. ### तुमचा विकास सर्व्हर सुरू करणे: तुमचा FastAPI जिवंत करणे आता रोमांचक क्षण आला आहे – तुमचा FastAPI विकास सर्व्हर सुरू करणे आणि तुमचे AI एकत्रीकरण जिवंत पाहणे! FastAPI Uvicorn वापरतो, जो Async Python अॅप्लिकेशन्ससाठी विशेषतः डिझाइन केलेला अतिशय वेगवान ASGI सर्व्हर आहे. #### FastAPI सर्व्हर स्टार्टअप प्रक्रिया समजून घेणे ```bash # 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` फाइलमधून ```python # 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 फाइल्समध्ये बदल केल्यावर स्वयंचलित रीलोडिंग प्रदान करतात. याचा अर्थ असा की आपल्याला कोड बदलून त्वरित चाचणी करता येते, सर्व्हर पुन्हा सुरू करण्याची गरज नाही. ```python # Enable hot reloading explicitly if __name__ == "__main__": app.run(host="0.0.0.0", port=5000, debug=True) # debug=True enables hot reload ``` **विकासासाठी लॉगिंग**: काय चालले आहे हे समजण्यासाठी लॉगिंग जोडा: ```python 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. आपला बॅकएंड सर्व्हर सुरू करा**: ```bash cd backend python api.py ``` आपल्याला परिचित FastAPI/Uvicorn स्टार्टअप संदेश दिसेल, परंतु लक्षात घ्या की ते Codespace वातावरणात चालत आहे. **2. पोर्ट दृश्यमानता कॉन्फिगर करा**: - VS Code च्या तळाच्या पॅनेलमध्ये "Ports" टॅब शोधा - यादीमध्ये पोर्ट 5000 शोधा - पोर्ट 5000 वर राईट-क्लिक करा - "Port Visibility" → "Public" निवडा **ते सार्वजनिक का करावे?** डीफॉल्टनुसार, Codespace पोर्ट्स खाजगी असतात (फक्त आपल्यासाठी प्रवेशयोग्य). ते सार्वजनिक केल्याने आपला फ्रंटएंड (जो ब्राउझरमध्ये चालतो) आपल्या बॅकएंडशी संवाद साधू शकतो. **3. आपला सार्वजनिक URL मिळवा**: पोर्ट सार्वजनिक केल्यानंतर, आपल्याला असा URL दिसेल: ``` https://your-codespace-name-5000.app.github.dev ``` **4. आपल्या फ्रंटएंड कॉन्फिगरेशन अपडेट करा**: ```javascript // 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. ब्राउझर डेव्हलपर टूल्ससह चाचणी करा**: ```javascript // 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 मध्ये थेट एन्व्हायर्नमेंट व्हेरिएबल्स सेट करू शकता: ```bash # 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 चालू असताना प्रवेशयोग्य राहतात **विकास कार्यप्रवाह**: 1. VS Code मध्ये कोड बदल करा 2. FastAPI स्वयंचलितपणे रीलोड होते (Uvicorn च्या रीलोड मोडमुळे) 3. सार्वजनिक URL द्वारे त्वरित बदलांची चाचणी करा 4. तयार झाल्यावर कमिट आणि पुश करा > 💡 **प्रो टिप**: विकासादरम्यान आपल्या Codespace बॅकएंड URL बुकमार्क करा. Codespace नावे स्थिर असल्याने, आपण समान Codespace वापरत असताना URL बदलणार नाही. ## फ्रंटएंड चॅट इंटरफेस तयार करणे: जिथे मानव AI शी संवाद साधतो आता आपण वापरकर्ता इंटरफेस तयार करू – जिथे लोक आपल्या AI सहायकाशी संवाद साधण्याचा मार्ग ठरतो. मूळ iPhone च्या इंटरफेसच्या डिझाइनप्रमाणे, आपण जटिल तंत्रज्ञान सहज आणि नैसर्गिक वापरासाठी बनवण्यावर लक्ष केंद्रित करत आहोत. ### आधुनिक फ्रंटएंड आर्किटेक्चर समजून घेणे आपले चॅट इंटरफेस "सिंगल पेज अॅप्लिकेशन" किंवा SPA असेल. जुन्या पद्धतीच्या दृष्टिकोनाऐवजी जिथे प्रत्येक क्लिक नवीन पृष्ठ लोड करते, आपले अॅप सहज आणि त्वरित अपडेट होते: **जुनी वेबसाइट्स**: जणू एखादे भौतिक पुस्तक वाचत आहात – आपण पूर्णपणे नवीन पृष्ठांवर जात आहात **आपले चॅट अॅप**: जणू आपला फोन वापरत आहात – सर्व काही सहजतेने वाहते आणि अपडेट होते ```mermaid 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 प्रतिसादांवर आधारित वेबपृष्ठ सामग्री गतिशीलपणे अपडेट करणे ### प्रोजेक्ट स्ट्रक्चर सेटअप फ्रंटएंड डिरेक्टरी तयार करा आणि ही संरचना ठेवा: ```text frontend/ ├── index.html # Main HTML structure ├── app.js # JavaScript functionality └── styles.css # Visual styling ``` **आर्किटेक्चर समजून घेणे:** - **रचना** HTML, JavaScript आणि CSS यांच्यात चिंता वेगवेगळ्या करते - **साधेपणा** नेव्हिगेट आणि बदलण्यासाठी सोपी फाइल संरचना राखते - **वेब विकास सर्वोत्तम पद्धतींचे अनुसरण करते** संघटन आणि टिकावासाठी ### HTML पाया तयार करणे: ऍक्सेसिबिलिटीसाठी सेमॅंटिक रचना आता HTML रचना तयार करूया. आधुनिक वेब विकास "सेमॅंटिक HTML" वर जोर देते – HTML घटक वापरणे जे त्यांच्या उद्देशाचे स्पष्टपणे वर्णन करतात, फक्त त्यांचे स्वरूप नाही. यामुळे आपले अॅप्लिकेशन स्क्रीन रीडर्स, सर्च इंजिन्स आणि इतर साधनांसाठी ऍक्सेसिबल बनते. **सेमॅंटिक HTML का महत्त्वाचे आहे**: कल्पना करा की आपण आपल्या चॅट अॅपचे वर्णन फोनवर कोणाला करत आहात. आपण म्हणाल "तेथे शीर्षकासह एक हेडर आहे, मुख्य क्षेत्र जिथे संभाषणे दिसतात, आणि संदेश टाइप करण्यासाठी तळाशी एक फॉर्म आहे." सेमॅंटिक HTML घटक नैसर्गिक वर्णनाशी जुळतात. `index.html` तयार करा आणि ही विचारपूर्वक संरचित मार्कअप वापरा: ```html AI Chat Assistant

AI Chat Assistant

Ask me anything!

``` **प्रत्येक HTML घटक आणि त्याचा उद्देश समजून घेणे:** #### दस्तऐवज रचना - **``**: ब्राउझरला हे आधुनिक HTML5 आहे हे सांगते - **``**: स्क्रीन रीडर्स आणि भाषांतर साधनांसाठी पृष्ठ भाषा निर्दिष्ट करते - **``**: आंतरराष्ट्रीय मजकुरासाठी योग्य कॅरेक्टर एन्कोडिंग सुनिश्चित करते - **``**: झूम आणि स्केल नियंत्रित करून पृष्ठ मोबाइल-प्रतिसादक्षम बनवते #### सेमॅंटिक घटक - **`
`**: शीर्षक आणि वर्णनासह शीर्ष विभाग स्पष्टपणे ओळखतो - **`
`**: प्राथमिक सामग्री क्षेत्र नियुक्त करते (जिथे संभाषणे होतात) - **`
`**: वापरकर्ता इनपुटसाठी सेमॅंटिकदृष्ट्या योग्य, योग्य कीबोर्ड नेव्हिगेशन सक्षम करते #### ऍक्सेसिबिलिटी वैशिष्ट्ये - **`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 वापरा: ```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 = `
${this.escapeHtml(text)} ${new Date().toLocaleTimeString()}
`; 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 क्लास संरचना**: ```javascript 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 पॅटर्न**: ```javascript // 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` तयार करा आणि खालील संपूर्ण स्टाइल्स वापरा: ```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` अद्यतनित करणे हा अंतिम टप्पा आहे, जो तुमच्या बॅकएंड सर्व्हरशी जुळतो: ```javascript // 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 सर्व्हरकडून स्वागत संदेश दिसायला हवा. ## चाचणी आणि तैनाती आता तुमच्याकडे फ्रंटएंड आणि बॅकएंड घटक तयार आहेत, चला सर्वकाही एकत्र कार्य करते याची चाचणी करूया आणि तुमचा चॅट असिस्टंट इतरांसोबत शेअर करण्यासाठी तैनाती पर्याय एक्सप्लोर करूया. ### स्थानिक चाचणी कार्यप्रवाह तुमचे संपूर्ण अॅप्लिकेशन चाचणी करण्यासाठी खालील चरणांचे अनुसरण करा: ```mermaid 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] ``` **चरण-दर-चरण चाचणी प्रक्रिया:** 1. **तुमचा बॅकएंड सर्व्हर सुरू करा**: ```bash cd backend source venv/bin/activate # or venv\Scripts\activate on Windows 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 अनधिकृत प्रतिसाद | तुमच्या `GITHUB_TOKEN` पर्यावरण व्हेरिएबल तपासा | | **कनेक्शन नाकारले** | फ्रंटएंडमध्ये नेटवर्क त्रुटी | बॅकएंड URL आणि Flask सर्व्हर चालू आहे याची खात्री करा | | **AI प्रतिसाद नाही** | रिक्त किंवा त्रुटी प्रतिसाद | API कोटा किंवा प्रमाणीकरण समस्यांसाठी बॅकएंड लॉग तपासा | **सामान्य डीबगिंग चरण:** - **तपासा** ब्राउझर डेव्हलपर टूल्स कन्सोलमध्ये जावास्क्रिप्ट त्रुटी - **तपासा** नेटवर्क टॅब यशस्वी API विनंत्या आणि प्रतिसाद दर्शवते - **पुनरावलोकन करा** बॅकएंड टर्मिनल आउटपुट Python त्रुटी किंवा API समस्यांसाठी - **पुष्टी करा** पर्यावरण व्हेरिएबल्स योग्यरित्या लोड केले आहेत आणि प्रवेशयोग्य आहेत ## GitHub Copilot Agent Challenge 🚀 Agent मोड वापरून खालील आव्हान पूर्ण करा: **वर्णन:** संभाषण इतिहास आणि संदेश टिकवून ठेवण्याची सुविधा जोडून चॅट असिस्टंट सुधारित करा. हे आव्हान तुम्हाला चॅट अॅप्लिकेशन्समध्ये स्टेट कसे व्यवस्थापित करायचे आणि चांगल्या वापरकर्ता अनुभवासाठी डेटा स्टोरेज कसे अंमलात आणायचे हे समजून घेण्यास मदत करेल. **प्रॉम्प्ट:** चॅट अॅप्लिकेशनमध्ये संभाषण इतिहास समाविष्ट करण्यासाठी सुधारित करा जो सत्रांदरम्यान टिकून राहतो. चॅट संदेश स्थानिक स्टोरेजमध्ये सेव्ह करण्याची सुविधा जोडा, पृष्ठ लोड झाल्यावर संभाषण इतिहास प्रदर्शित करा आणि "Clear History" बटण समाविष्ट करा. तसेच टायपिंग इंडिकेटर्स आणि संदेश टाइमस्टॅम्प्स अंमलात आणा जेणेकरून चॅट अनुभव अधिक वास्तववादी होईल. [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या. ## असाइनमेंट: तुमचा वैयक्तिक AI असिस्टंट तयार करा आता तुम्ही तुमचा स्वतःचा AI असिस्टंट अंमलात आणण्याची वेळ आली आहे. फक्त ट्यूटोरियल कोडची पुनरावृत्ती करण्याऐवजी, ही संधी संकल्पना लागू करण्याची आहे, जे तुम्हाला तुमच्या स्वतःच्या आवडी आणि वापर प्रकरणे प्रतिबिंबित करणारे काहीतरी तयार करण्याची परवानगी देते. ### प्रकल्प आवश्यकता तुमचा प्रकल्प स्वच्छ, व्यवस्थित संरचनेसह सेट करूया: ```text 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 लिहा** तुमच्या प्रकल्पाचे वर्णन आणि ते कसे चालवायचे - **तुमच्या चॅट इंटरफेसची कृतीत स्क्रीनशॉट समाविष्ट करा** - **तुम्ही जोडलेली कोणतीही अद्वितीय वैशिष्ट्ये किंवा सानुकूलने दस्तऐवजीकृत करा** - **इतर विकसकांसाठी स्पष्ट सेटअप सूचना प्रदान करा** ### सबमिशन मार्गदर्शक तत्त्वे **प्रकल्प वितरित:** 1. सर्व स्त्रोत कोडसह संपूर्ण प्रकल्प फोल्डर 2. README.md प्रकल्पाचे वर्णन आणि सेटअप सूचना 3. तुमच्या चॅट असिस्टंटची कृतीत स्क्रीनशॉट 4. तुम्ही काय शिकलात आणि तुम्हाला कोणत्या आव्हानांचा सामना करावा लागला यावर थोडक्यात विचार **मूल्यांकन निकष:** - **कार्यक्षमता**: चॅट असिस्टंट अपेक्षेप्रमाणे कार्य करते का? - **कोड गुणवत्ता**: कोड चांगल्या प्रकारे आयोजित, टिप्पणी केलेला आणि देखभाल करण्यायोग्य आहे का? - **डिझाइन**: इंटरफेस व्हिज्युअली आकर्षक आणि वापरण्यास सुलभ आहे का? - **सर्जनशीलता**: तुमची अंमलबजावणी किती अद्वितीय आणि वैयक्तिकृत आहे? - **दस्तऐवजीकरण**: सेटअप सूचना स्पष्ट आणि संपूर्ण आहेत का? > 💡 **यशस्वी टिप**: प्रथम मूलभूत आवश्यकता पूर्ण करण्यास सुरुवात करा, नंतर सर्वकाही कार्य करत असल्यावर सुधारणा जोडा. प्रगत वैशिष्ट्ये जोडण्यापूर्वी एक पॉलिश कोर अनुभव तयार करण्यावर लक्ष केंद्रित करा. ## समाधान [समाधान](./solution/README.md) ## बोनस आव्हाने तुमचा AI असिस्टंट पुढील स्तरावर नेण्यासाठी तयार आहात? AI एकत्रीकरण आणि वेब विकासाची सखोल समजून घेण्यासाठी तुम्हाला मदत करणारी ही प्रगत आव्हाने आजमावून पहा. ### व्यक्तिमत्व सानुकूलन तुमच्या AI असिस्टंटला एक अद्वितीय व्यक्तिमत्व दिल्यावर खरी जादू होते. विशेष सहाय्यक तयार करण्यासाठी वेगवेगळ्या सिस्टम प्रॉम्प्टसह प्रयोग करा: **व्यावसायिक सहाय्यक उदाहरण:** ```python call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.") ``` **सर्जनशील लेखन सहाय्यक उदाहरण:** ```python call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.") ``` **तांत्रिक मार्गदर्शक उदाहरण:** ```python 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 एकत्रीकरणाचा प्रत्यक्ष अनुभव दिला आहे – आजच्या तंत्रज्ञानाच्या लँडस्केपमध्ये अधिकाधिक मौल्यवान कौशल्ये. ### तुम्ही काय साध्य केले आहे या धड्यादरम्यान, तुम्ही अनेक महत्त्वाच्या तंत्रज्ञान आणि संकल्पनांमध्ये प्राविण्य मिळवले आहे: **बॅकएंड विकास:** - **GitHub Models API सह एकत्रित केले** AI कार्यक्षमतेसाठी - **Flask वापरून RESTful API तयार केले** योग्य त्रुटी हाताळणीसह - **सुरक्षित प्रमाणीकरण अंमलात आणले** पर्यावरण व्हेरिएबल्स वापरून - **CORS कॉन्फिगर केले** फ्रंटएंड आणि बॅकएंड दरम्यान क्रॉस-ऑरिजिन विनंत्यांसाठी **फ्रंटएंड विकास:** - **सामान्य HTML वापरून प्रतिसादक्षम चॅट इंटरफेस तयार केला** - **आधुनिक जावास्क्रिप्ट अंमलात आणले** async/await आणि वर्ग-आधारित आर्किटेक्चरसह - **CSS Grid, Flexbox आणि अॅनिमेशनसह आकर्षक वापरकर्ता इंटरफेस डिझाइन केले** - **प्रवेशयोग्यता वैशिष्ट्ये आणि प्रतिसादक्षम डिझाइन तत्त्वे जोडली** **पूर्ण-स्टॅक एकत्रीकरण:** - **HTTP - **पोर्ट फॉरवर्डिंग** तुमच्या अ‍ॅप्लिकेशन्सची चाचणी करण्यासाठी **Codespaces काय प्रदान करते:** - स्थानिक वातावरण सेटअप आणि कॉन्फिगरेशन समस्यांचे **निर्मूलन करते** - विविध उपकरणांवर एकसंध विकास वातावरण **प्रदान करते** - वेब विकासासाठी पूर्व-कॉन्फिगर केलेली साधने आणि विस्तारांचा **समावेश करते** - आवृत्ती नियंत्रण आणि सहकार्यासाठी GitHub सोबत अखंड एकत्रीकरण **प्रदान करते** > 🚀 **प्रो टिप**: Codespaces AI अ‍ॅप्लिकेशन्स शिकणे आणि प्रोटोटाइपिंगसाठी उत्तम आहे कारण ते सर्व क्लिष्ट वातावरण सेटअप आपोआप हाताळते, ज्यामुळे तुम्ही कॉन्फिगरेशन समस्यांऐवजी बांधणी आणि शिकण्यावर लक्ष केंद्रित करू शकता. --- **अस्वीकरण**: हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.