एआई-सर्च-पावर्ड पर्सनल असिस्टेंट ऐप कैसे बनाएं

इस लेख में हम आपको यह दिखाना चाहेंगे कि दो तकनीकों ( और ) को कैसे संयोजित किया जाए और एक लैंगचेन एंथ्रोपिक खोज-संचालित निजी सहायक कैसे बनाया जाए। डेवलपर्स के लिए अगला अवसर के साथ हमारा संयुक्त हैकथॉन है, जहां प्रत्येक प्रतिभागी को की नवीनतम तकनीक का उपयोग करके अपना स्वयं का बनाने का मौका मिलता है। यहां हम एआई के एक ऐसे अनुप्रयोग के बारे में बात करेंगे जो तेजी से महत्वपूर्ण होता जा रहा है: । हमारे हैकथॉन में प्रतिभागियों द्वारा अधिक से अधिक एआई उत्पाद बनाए जा रहे हैं। Google क्लाउड वर्टेक्स एआई Google क्लाउड एआई एप्लिकेशन खोज इंजन क्या है वह? खोज-संचालित निजी सहायक एक डिजिटल सहायक है जो उपयोगकर्ताओं को जैसे कार्यों में सहायता करने के लिए उपयोग करता है। ये सहायक विभिन्न स्रोतों से डेटा इकट्ठा करने और उसका विश्लेषण करने के लिए खोज एल्गोरिदम का उपयोग करते हैं, इसे उपयोगकर्ताओं के सामने उपयोगी और संक्षिप्त तरीके से प्रस्तुत करते हैं। जानकारी ढूंढने, आरक्षण करने, अनुस्मारक सेट करने और संदेश भेजने खोज इंजन तकनीक का खोज-संचालित निजी सहायकों के प्रमुख उदाहरण , , और हैं। ये सहायक सटीक और प्रासंगिक जानकारी प्रदान करने, कार्यों को पूरा करने और उपयोगकर्ता के साथ बातचीत करते समय अपनी प्रतिक्रियाओं को बेहतर बनाने के लिए अपनी खोज क्षमताओं का प्रभावी ढंग से उपयोग करते हैं। Google Assistant Siri Alexa Cortana एन्थ्रोपिक के क्लाउड का परिचय एंथ्रोपिक एक अनुसंधान संगठन है जो उन्नत एआई सिस्टम विकसित करने पर केंद्रित है। उनकी नवीनतम रचना, क्लाउड, एक अगली पीढ़ी का एआई सहायक है जिसे सहायक, ईमानदार और हानिरहित बनाया गया है। यह अत्याधुनिक मॉडल विभिन्न कार्यों में उच्च स्तर की विश्वसनीयता और पूर्वानुमान सुनिश्चित करता है। क्लाउड की प्रमुख विशेषताओं में शामिल हैं: बहुमुखी संवादी और पाठ प्रसंस्करण क्षमताएँ उपयोगकर्ता की सुरक्षा और गोपनीयता को बनाए रखना इसकी सर्वोच्च प्राथमिकता है क्लाउड के प्राथमिक उपयोग के मामले हैं: संक्षिप्तीकरण खोज रचनात्मक और सहयोगात्मक लेखन प्रश्नोत्तर कोडिंग सहायता ये विशेषताएं क्लाउड को विभिन्न अनुप्रयोगों के लिए एक आदर्श एआई टूल बनाती हैं, जो विभिन्न डोमेन के उपयोगकर्ताओं को सशक्त बनाती हैं। लैंगचेन का परिचय लैंगचेन एंड-टू-एंड भाषा मॉडल अनुप्रयोगों के निर्माण के लिए एक बहुमुखी उपकरण है। यह एक मजबूत ढांचा प्रदान करता है जो भाषा शिक्षण मॉडल (एलएलएम) बनाने, प्रबंधित करने और तैनात करने की प्रक्रिया को सरल बनाता है। एलएलएम उन्नत एआई मॉडल हैं जिन्हें विभिन्न भाषाओं और कार्यों में मानव-जैसे पाठ को समझने, उत्पन्न करने और हेरफेर करने के लिए डिज़ाइन किया गया है। लैंगचेन की प्रमुख विशेषताओं में शामिल हैं: एलएलएम के लिए संकेतों का कुशल प्रबंधन जटिल वर्कफ़्लो के लिए कार्यों की श्रृंखला बनाने की क्षमता एआई में राज्य जोड़ना, इसे पिछले इंटरैक्शन से जानकारी याद रखने की अनुमति देता है ये क्षमताएं विविध अनुप्रयोगों में भाषा मॉडल की क्षमता का दोहन करने के लिए लैंगचेन को एक शक्तिशाली और उपयोगकर्ता-अनुकूल मंच बनाती हैं। आवश्यक शर्तें पायथन का बुनियादी ज्ञान टाइपसिप्ट और/या रिएक्ट का बुनियादी ज्ञान एंथ्रोपिक के क्लाउड एपीआई तक पहुंच सर्पएपीआई की वेब खोज एपीआई तक पहुंच खाका प्रोजेक्ट प्रारंभ करना क्लाउड और लैंगचेन के साथ एआई असिस्टेंट ऐप के लिए फ्रंट-एंड का निर्माण प्रोजेक्ट फ़ाइलें लिखना एआई असिस्टेंट ऐप का परीक्षण बहस प्रोजेक्ट प्रारंभ करना app.py (फ्लास्क ऐप एंट्रीपॉइंट) 🐍 : आरंभ करने के लिए, सुनिश्चित करें कि आपके वातावरण में फ्लास्क स्थापित है। आप इसे उपयोग करके कर सकते हैं: फ्लास्क स्थापित करें pip pip install Flask : अपने प्रोजेक्ट के लिए एक नई निर्देशिका बनाएं और उस पर नेविगेट करें: एक नई निर्देशिका बनाएं mkdir claude-langchain cd claude-langchain : पायथन परियोजनाओं के साथ काम करते समय आभासी वातावरण का उपयोग करना एक अच्छा अभ्यास है। आप या अपनी पसंद के किसी अन्य टूल का उपयोग करके इसे बना सकते हैं: एक आभासी वातावरण स्थापित करें (वैकल्पिक) venv python -m venv venv source venv/bin/activate (Linux/Mac) venv\Scripts\activate (Windows) फ़ाइल बनाएँ: अपना फ्लास्क एप्लिकेशन कोड लिखने के लिए एक फ़ाइल बनाएँ: एक main.py main.py touch app.py # Linux/Mac echo.>app.py # Windows : अपने पसंदीदा कोड संपादक में फ़ाइल खोलें और निम्नलिखित कोड जोड़ें: अपना फ्लास्क एप्लिकेशन कोड लिखें main.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() : फ़ाइल सहेजें और अपने टर्मिनल/कमांड प्रॉम्प्ट में निम्नलिखित कमांड चलाएँ: फ्लास्क एप्लिकेशन चलाएँ main.py python main.py : अपना पसंदीदा वेब ब्राउज़र खोलें और पर नेविगेट करें। आपको "हैलो, वर्ल्ड!" देखना चाहिए वेबपेज पर प्रदर्शित. अपना ब्राउज़र खोलें http://127.0.0.1:5000/ और बस! आपने फ्लास्क प्रोजेक्ट को सफलतापूर्वक प्रारंभ कर लिया है और एक सरल एप्लिकेशन बनाया है। .env 🌏 : फ़ाइल के साथ पर्यावरण चर को आसानी से प्रबंधित करने के लिए, हम पैकेज का उपयोग करेंगे। साथ ही आइए भी इंस्टॉल करें। उपयोग करके दोनों पैकेज स्थापित करें: पायथन-डोटेनव और लैंगचैन स्थापित करें .env python-dotenv langchain pip pip install python-dotenv langchain एक फ़ाइल : अपने प्रोजेक्ट की रूट डायरेक्टरी में एक फ़ाइल बनाएँ: .env बनाएँ .env touch .env # Linux/Mac echo.>.env # Windows : अपने पसंदीदा कोड संपादक में फ़ाइल खोलें और अपने पर्यावरण चर जोड़ें। प्रत्येक वेरिएबल KEY=VALUE प्रारूप में एक नई लाइन पर होना चाहिए: पर्यावरण चर जोड़ें .env ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx कृपया ध्यान दें कि आपके पास मॉडल और की वेब खोज सेवा दोनों के लिए एपीआई कुंजी होनी चाहिए। एंथ्रोपिक के क्लाउड सर्पएपीआई : का उपयोग करके फ़ाइल से पर्यावरण चर लोड करने के लिए अपनी फ़ाइल को संशोधित करें। अपना इस प्रकार अपडेट करें: पर्यावरण चर लोड करें python-dotenv .env main.py main.py import os from flask import Flask from dotenv import load_dotenv load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() संस्करण नियंत्रण में फ़ाइल को : यह महत्वपूर्ण है कि संस्करण नियंत्रण में गुप्त कुंजियों जैसी संवेदनशील जानकारी साझा न करें। यदि आप Git का उपयोग कर रहे हैं, तो अपनी फ़ाइल में निम्न पंक्ति जोड़ें (यदि आपके पास यह नहीं है तो एक बनाएं): .env अनदेखा करें .gitignore .env अब, आपका फ्लास्क प्रोजेक्ट फ़ाइल से पर्यावरण चर का उपयोग करने के लिए सेट हो गया है। आप आवश्यकतानुसार अधिक वेरिएबल जोड़ सकते हैं और का उपयोग करके उन तक पहुंच सकते हैं। फ़ाइल को निजी रखना याद रखें और इसे कभी भी संस्करण नियंत्रण के लिए प्रतिबद्ध न करें। .env os.environ.get('KEY') .env क्लाउड और लैंगचेन के साथ एआई असिस्टेंट ऐप के लिए फ्रंट-एंड का निर्माण यह ट्यूटोरियल उन मध्यवर्ती उपयोगकर्ताओं के लिए डिज़ाइन किया गया है जिन्हें Node.js, npm, React और टाइपस्क्रिप्ट की बुनियादी समझ है। हम एक स्टैक का उपयोग करेंगे जिसमें स्टाइलिंग के लिए टेलविंड सीएसएस के साथ-साथ ये तकनीकें भी शामिल हैं। इस स्टैक को इसकी मजबूती, बहुमुखी प्रतिभा और इन प्रौद्योगिकियों के लिए मजबूत सामुदायिक समर्थन के लिए चुना गया था। इसके अलावा, हम एंथ्रोपिक के क्लाउड मॉडल और लैंगचेन, दो शक्तिशाली एआई प्रौद्योगिकियों को एकीकृत करेंगे जो हमारे ऐप को सटीक, मानव-जैसी टेक्स्ट प्रतिक्रियाएं उत्पन्न करने की अनुमति देंगे। Node.js और NPM स्थापित करना से अपने OS के लिए Node.js इंस्टॉलर डाउनलोड करें। आधिकारिक साइट Node.js और npm को स्थापित करने के लिए इंस्टॉलेशन संकेतों का पालन करें। अधिकांश उपयोगकर्ताओं के लिए LTS (दीर्घकालिक समर्थन) संस्करण अनुशंसित है। एक बार इंस्टॉल हो जाने पर, अपने टर्मिनल से Node.js और npm के संस्करणों की जांच करके इंस्टॉलेशन को सत्यापित करें: नोड -v एनपीएम -v परियोजना वातावरण की स्थापना क्रिएट रिएक्ट ऐप इंस्टॉल करना एक कमांड-लाइन उपयोगिता है जो एक नया रिएक्ट.जेएस एप्लिकेशन बनाने में हमारी सहायता करती है। हम इसे npm के माध्यम से विश्व स्तर पर स्थापित करेंगे: क्रिएट रिएक्ट ऐप (सीआरए) npm install -g create-react-app टाइपस्क्रिप्ट के साथ एक नया रिएक्ट प्रोजेक्ट बनाना हम नामक एक नया प्रोजेक्ट बनाने के लिए टाइपस्क्रिप्ट टेम्पलेट के साथ CRA का उपयोग करेंगे। ai-assistant-claude npx create-react-app ai-assistant-claude --template typescript यह कमांड हमारी वर्तमान निर्देशिका में नामक एक नई निर्देशिका बनाता है, जिसमें टाइपस्क्रिप्ट समर्थन के साथ एक नया रिएक्ट एप्लिकेशन होता है। ai-assistant-claude टेलविंडसीएसएस को एकीकृत करना टेलविंडसीएसएस स्थापित करना इस ट्यूटोरियल में अपनाए गए चरण पर आधारित हैं। अधिक नवीनतम निर्देशों के लिए इन दस्तावेज़ों का संदर्भ लें। आधिकारिक टेलविंड सीएसएस दस्तावेज़ीकरण हम TailwindCSS इंस्टॉल करके और अपने प्रोजेक्ट में लाइब्रेरी आरंभ करके शुरुआत करेंगे: npm install -D tailwindcss npx tailwindcss init टेम्पलेट पथ कॉन्फ़िगर करना इसके बाद, हम अपने टेम्पलेट पथों को फ़ाइल में जोड़कर कॉन्फ़िगर करते हैं। उन पंक्तियों को दर्शाता है जिन्हें आप जोड़ रहे हैं: tailwind.config.js ++ /** @type {import('tailwindcss').Config} */ module.exports = { -- content: [], ++ content: [ ++ "./src/**/*.{js,jsx,ts,tsx}", ++ ], theme: { extend: {}, }, plugins: [], } टेलविंड निर्देश जोड़ना अंत में, हम अपनी फ़ाइल में टेलविंड की प्रत्येक परत के लिए निर्देश जोड़ेंगे: ./src/index.css @tailwind @tailwind base; @tailwind components; @tailwind utilities; और वोइला! टेलविंड सीएसएस अब हमारे प्रोजेक्ट में एकीकृत हो गया है। आवश्यक पुस्तकालय स्थापित करना इससे पहले कि हम कोडिंग अनुभाग में आगे बढ़ें, आइए आवश्यक लाइब्रेरी जैसे कि , , और स्थापित करके अपनी तैयारियों को अंतिम रूप दें। fontawesome react-markdown axios react-hook-form आइकॉन के लिए फ़ॉन्टअद्भुत इंस्टॉल करना npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome मार्कडाउन सामग्री प्रस्तुत करने के लिए रिएक्ट मार्कडाउन स्थापित करना npm install --save react-markdown इन चरणों के पूरा होने के साथ, आपका प्रोजेक्ट सभी आवश्यक टूल और लाइब्रेरी के साथ सेट हो जाएगा। इसके बाद, हम एआई सहायक ऐप का निर्माण शुरू करेंगे जो सटीक और मानव-जैसी टेक्स्ट प्रतिक्रियाएं उत्पन्न करने के लिए एंथ्रोपिक के क्लाउड एपीआई और लैंगचेन का उपयोग करता है। समस्या निवारण यदि आपको इंस्टॉलेशन या सेटअप के दौरान कोई समस्या आती है, तो यहां कुछ सामान्य समाधान दिए गए हैं: Node.js या npm से संबंधित समस्याओं के लिए, उन्हें पुनः इंस्टॉल करने का प्रयास करें या आधिकारिक और दस्तावेज़ों की जाँच करें। Node.js npm यदि आपको क्रिएट रिएक्ट ऐप में समस्या आ रही है, तो सहायता के लिए देखें। सीआरए दस्तावेज़ टेलविंड सीएसएस समस्याओं के लिए, देखें। टेलविंड सीएसएस दस्तावेज़ किसी भी अन्य मुद्दे के लिए, संबंधित पुस्तकालयों के दस्तावेज़ देखें या अपने मुद्दों को StackOverflow या प्रासंगिक GitHub रिपॉजिटरी पर पोस्ट करें। प्रोजेक्ट फ़ाइलें लिखना इस अनुभाग में, हम फ्लास्क ऐप पर वापस जाएंगे जिसे हमने पहले आरंभ किया था और नए एंडपॉइंट जोड़ेंगे, जैसे और । ये हमारी सरल चैट और उन्नत चैट सुविधाओं (बाद वाले को Google खोज परिणामों द्वारा संचालित किया जा रहा है) के लिए अंतिम बिंदु के रूप में काम करेंगे। /ask /search आइए अपने आवश्यक मॉड्यूल आयात करके शुरुआत करें: from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) उपरोक्त अनुभाग सभी आवश्यक पैकेजों को आयात करता है और हमारे फ्लास्क एप्लिकेशन को आरंभ करता है। बैकएंड का विकास करना बुनियादी समापनबिंदु बनाना यह जांचने के लिए कि हमारा सर्वर सही ढंग से चल रहा है या नहीं, हम एक बुनियादी समापन बिंदु ( ) बनाकर शुरुआत करेंगे: / @app.route('/') def hello_world(): return 'Hello, World!' रूट यूआरएल पर जाकर, हमें "हैलो, वर्ल्ड!" प्रतिक्रिया मिलनी चाहिए, जो दर्शाता है कि हमारा सर्वर उम्मीद के मुताबिक चल रहा है। /ask एंडपॉइंट बनाना यह एंडपॉइंट हमारे एप्लिकेशन की मूल चैट सुविधा के लिए संदेशों को संसाधित करता है। यह अनुरोध से JSON डेटा पढ़ता है, संदेशों को संसाधित करता है, और एंथ्रोपिक के क्लाउड मॉडल और लैंगचेन का उपयोग करके प्रतिक्रिया उत्पन्न करता है। @app.route('/ask', methods=['POST']) def ask_assistant(): # The code for /ask endpoint goes here अनुरोध से संदेश निकालना सबसे पहले, हमें यह जांचना होगा कि क्या कोई डेटा प्रदान किया गया है और उसमें से संदेश निकालें। data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") प्रतिक्रिया उत्पन्न करना निम्नलिखित कोड खंड हमारी बातचीत को संरचित करने के लिए लैंगचेन के मॉडल और का उपयोग करके चैट प्रतिक्रिया उत्पन्न करता है। वार्तालाप इतिहास उपयोग करके संग्रहीत किया जाता है। ChatAnthropic() ChatPromptTemplate ConversationBufferMemory llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) प्रतिक्रिया भेज रहा हूँ प्रतिक्रिया उत्पन्न करने के बाद, हम परिणाम में नई पंक्तियाँ बदलते हैं और इसे JSON ऑब्जेक्ट के रूप में लौटाते हैं। print(result) return jsonify({"status": "success", "message": result}) /search समापनबिंदु बनाना समापन बिंदु के समान है लेकिन इसमें अधिक विस्तृत प्रतिक्रियाएँ प्रदान करने के लिए खोज कार्यक्षमता शामिल है। इस सुविधा को जोड़ने के लिए हम उपयोग करते हैं। /search /ask SerpAPIWrapper @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) फ्लास्क ऐप चलाना अंत में, हम अपने फ्लास्क ऐप को चलाने के लिए मानक बॉयलरप्लेट जोड़ते हैं। if __name__ == '__main__': app.run() बैकएंड का परीक्षण क्या सब कुछ ठीक रहा, यहां हमारा अंतिम बैकएंड कोड है। from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' @app.route('/ask', methods=['POST']) def ask_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) print(result) return jsonify({"status": "success", "message": result}) @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) if __name__ == '__main__': app.run() अब, आइए अपने ऐप का परीक्षण करें। इस कमांड के साथ बैकएंड ऐप चलाएं, कृपया यह भी सुनिश्चित करें कि हमारा वर्चुअल वातावरण सक्रिय है। flask run यदि हमारा टर्मिनल यह आउटपुट लौटाता है तो हमें पता चल जाएगा कि सब कुछ ठीक हो जाएगा। बिना किसी देरी के, आइए अपने दो समापन बिंदुओं, और परीक्षण करें। दोनों के बीच अंतर करने के लिए, आइए उनमें से प्रत्येक को समान पेलोड भेजें। अपना REST API परीक्षण और दस्तावेज़ीकरण सॉफ़्टवेयर खोलें, या केवल cURL का उपयोग करें। लेकिन इस ट्यूटोरियल में, मैं उपयोग करूंगा। /ask /search इनसोम्निया का आइए सबसे पहले निम्नलिखित पेलोड के साथ एंडपॉइंट को कॉल करें। मान लीजिए कि मैंने वीडियो गेम " " के सीक्वल के बारे में पूछा है। जिसका वह गलत उत्तर देगा। यह अपेक्षित है क्योंकि मॉडल के पास 2021 के अंत तक प्रशिक्षण कटऑफ है, जिसमें सीक्वल के बारे में अभी तक कोई घोषणा नहीं की गई है। /ask द लीजेंड ऑफ ज़ेल्डा: ब्रीथ ऑफ़ द वाइल्ड समापन बिंदु के बारे में क्या ख्याल है? यदि आप पहले से हमारे कोड पर ध्यान देते हैं, तो इस समापन बिंदु को एक अधिक परिष्कृत श्रृंखला के साथ नियंत्रित किया जाता है, जो एजेंट का उपयोग करता है। /search एजेंट का उपयोग करके, हम एआई को उसके अपने मॉडल की तुलना में अधिक उपकरण प्रदान करके निर्णय लेने में अधिक शक्ति दे सकते हैं, जैसा कि हमने पहले ही प्रदर्शित किया है, इसकी अपनी खामियां हैं। यह प्रदर्शित करने के लिए कि समापन बिंदु कैसे काम करता है, आइए इसे पहले के समान पेलोड के साथ कॉल करें। /search इस बार, इसने अच्छा काम किया! यह हुड के नीचे कैसे काम करता है? आइए हमारे टर्मिनल में आउटपुट देखें। दिलचस्प बात यह है कि इस बार एआई मॉडल ने तुरंत उत्तर नहीं दिया, बल्कि इस बात पर 'विचार' किया कि उत्तर देने के लिए क्या करना चाहिए। वेब खोज परिणाम से यह देखने के बाद कि "समाचार खोज के आधार पर, ऐसा लगता है कि यह द लीजेंड ऑफ ज़ेल्डा: टीयर्स ऑफ द किंगडम नामक सीक्वल की घोषणा की गई थी, इसका उत्तर देने का निर्णय लिया गया"। तो, उस तर्क के अनुसार, क्या हमें केवल समापन बिंदु का उपयोग नहीं करना चाहिए? चूँकि यह अधिक सटीक है, और इसलिए, अधिक स्मार्ट है? काफी नहीं। आम तौर पर, चैटबॉट-आधारित ऐप में, बॉट से पिछली बातचीत के संदर्भ को बनाए रखने की उम्मीद की जाती है, ताकि वह प्रतिक्रिया दे सके जैसे कि वह बातचीत के पूरे संदर्भ को 'याद' रखता है। आइए देखें कि क्या एंडपॉइंट ऐसा कर सकता है। /search /search आइए परीक्षण करें कि क्या समापन बिंदु वह याद कर सकता है जो हमने अभी उससे पूछा था। /search ऐसा इसलिए हुआ क्योंकि लैंगचेन लाइब्रेरी में मेमोरी चेन सुविधा है जिसका उपयोग पिछली बातचीत को बनाए रखने के लिए किया जा सकता है, वेब सर्वर और उस पर निर्मित REST API सेवा स्वाभाविक रूप से स्टेटलेस है। जिसका अर्थ है, वेब सर्वर प्रत्येक अनुरोध को एक नए अनुरोध के रूप में मानेगा। लेकिन, क्या हमने पिछली बातचीत को पेलोड के रूप में शामिल नहीं किया है? यह एक अच्छा सवाल है। पता चला, लैंगचेन में प्रयुक्त एजेंट श्रृंखला वर्तमान में रचित संकेतों को संभालने का समर्थन नहीं करती है, जिसमें उपयोगकर्ता और एआई दोनों के अनुरोध और प्रतिक्रियाएं शामिल हैं। हम इसका उपयोग मुख्य रूप से मॉडल के लिए उदाहरण वार्तालाप प्रदान करने, मॉडल को हमारी वांछित प्रतिक्रिया के अनुसार ट्यून करने के लिए करते हैं। दूसरी ओर, एजेंट एक ही निर्देश प्राप्त करके काम करता है और उसके चारों ओर अपनी विचार श्रृंखला विकसित करता है। यही कारण है कि, चाहे हमारी बातचीत कितनी भी लंबी क्यों न हो, एजेंट केवल नवीनतम अनुरोध का जवाब देगा। आइए अंतर पर ध्यान देने के लिए हमारे समापन बिंदु का परीक्षण करें। /ask इस बार, इसने अतिरिक्त संदर्भ के रूप में हमारी पिछली बातचीत का उपयोग करके उत्तर दिया! अब तक हमें एहसास हो गया था कि हमें अपना AI असिस्टेंट ऐप बनाने के लिए दोनों अंतिम बिंदुओं की आवश्यकता है। लेकिन हम पुराने लेकिन हमेशा याद रखने वाले एंडपॉइंट को भुलक्कड़ लेकिन संपूर्ण और अद्यतित एंडपॉइंट के साथ कैसे शामिल करते हैं? निस्संदेह, फ्रंट-एंड का निर्माण करके! /ask /search फ्रंटएंड का विकास करना App.tsx आइए प्रोजेक्ट निर्देशिका पर वापस जाएँ। इस प्रोजेक्ट में, हम अपने रिएक्ट घटकों को संशोधित करना शुरू करेंगे, जिसकी शुरुआत प्रवेश बिंदु फ़ाइल, से होगी। ai-assistant-claude App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; import { ChatClient } from './ChatClient'; function App() { return ( ); } export default App; उपरोक्त कोड स्निपेट में, हम घटक आयात करते हैं, जो अगले चरण में बनाया जाएगा। फिर हम घटक को तत्व में शामिल करते हैं। यह रिएक्ट घटकों का उपयोग करके हमारे एआई सहायक ऐप के लिए संरचना स्थापित करता है। ChatClient ChatClient.tsx import React, { useState } from 'react'; import { ChatInput } from './ChatInput'; import { ChatHistory } from './ChatHistory'; export interface Message { content: string; role: string; } export const ChatClient: React.FC = () => { const [messages, setMessages] = useState >([]); const [isLoading, setIsLoading] = useState(false) const handleSimpleChat = (message: string) => { // Send the message and past chat history to the backend // Update messages state with the new message let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/ask', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } setIsLoading(false) console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; const handleAdvancedChat = (message: string) => { // Trigger AI agent with Google Search functionality // Update messages state with the new message and AI response let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/search', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } console.log('Success:', data); setIsLoading(false) }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; return ( AI Assistant with Claude and LangChain ); }; यह घटक हमारे AI सहायक के लिए प्राथमिक उपयोगकर्ता इंटरफ़ेस के रूप में कार्य करता है। जैसा कि दिखाया गया है, इसमें वार्तालाप इतिहास प्रदर्शित करने के लिए एक घटक और टेक्स्ट इनपुट करने के लिए एक घटक शामिल है। ChatHistory ChatInput घटक घटक से इनपुट संसाधित करता है, इस इनपुट का उपयोग करके बैकएंड पर अनुरोध भेजता है, और फिर एक लोडिंग स्थिति प्रदर्शित करता है। यदि अनुरोध सफलतापूर्वक संसाधित हो जाता है, तो घटक बैकएंड से प्राप्त प्रतिक्रिया भी दिखाएगा। ChatInput ChatHistory.tsx import React from 'react'; import { ReactMarkdown } from 'react-markdown/lib/react-markdown'; import { Message } from './ChatClient'; interface ChatHistoryProps { messages: Array ; isLoading: boolean } export const ChatHistory: React.FC = ({ messages, isLoading }) => { return ( {messages.map((message, index) => ( {message.content} ))} {isLoading && ( {/* Put your desired loading content here */} Thinking... )} ); }; सौभाग्य से, टेलविंडसीएसएस जैसे सरल एनिमेशन के लिए अंतर्निहित उपयोगिता कक्षाएं प्रदान करता है। यह वर्ग सुरुचिपूर्ण ढंग से यह इंगित करने में मदद करता है कि अनुरोध प्रतिक्रिया की प्रतीक्षा कर रहा है। इस घटक में, हम "उपयोगकर्ता" और "सहायक" से संदेशों की स्थिति को भी अलग करते हैं। animate-pulse ChatInput.tsx import React, { useState } from 'react'; interface ChatInputProps { onSimpleChat: (message: string) => void; onAdvancedChat: (message: string) => void; } export const ChatInput: React.FC = ({ onSimpleChat, onAdvancedChat }) => { const [input, setInput] = useState(''); const handleInputChange = (event: React.ChangeEvent ) => { setInput(event.target.value); }; const handleSubmit = (handler: (message: string) => void) => { handler(input); setInput(''); }; return ( handleSubmit(onSimpleChat)} className="ml-2 px-4 py-2 font-semibold text-gray-600 bg-white dark:text-gray-400 dark:bg-gray-800 border border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" > Ask handleSubmit(onAdvancedChat)} className="ml-2 px-4 py-2 font-semibold text-white bg-blue-500 border border-blue-600 rounded-md hover:bg-blue-400 focus:outline-none" > Ask and Search ); }; अंत में, हमने अपने टेक्स्ट इनपुट में दो बटन जोड़े। पहले बटन का उपयोग एंडपॉइंट पर इनपुट भेजने के लिए किया जाता है, जो बिना किसी अतिरिक्त संवर्द्धन के एआई मॉडल का उपयोग करके इनपुट को संसाधित करता है। /ask यह समापन बिंदु संदर्भ-जागरूक है। दूसरा बटन, जिसे उचित रूप से "पूछें और खोजें" नाम दिया गया है, इनपुट को समापन बिंदु पर भेजता है। एआई मॉडल के माध्यम से इनपुट को संसाधित करने के अलावा, यदि स्थिति की आवश्यकता होती है तो यह बटन एआई-संचालित वेब खोज को भी ट्रिगर करता है। /search Index.html  -- React App ++ Claude AI Assistant You need to enable JavaScript to run this app. tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> अंतिम चरण के रूप में, हम अपने ऐप के शीर्षक को " " से " " में बदलकर पेज में अपडेट करते हैं। रिएक्ट ऐप क्लाउड एआई असिस्टेंट index.html package.json { "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": { अंत में, हम फ़ाइल में एक प्रॉक्सी कॉन्फ़िगरेशन जोड़ते हैं और इसे पर सेट करते हैं। यह हमें विभिन्न बंदरगाहों का उपयोग करने से उत्पन्न होने वाली CORS सीमाओं को बायपास करने में मदद करता है। package.json http://localhost:5000 एआई असिस्टेंट ऐप का परीक्षण परीक्षण शुरू करने के लिए, पहले सुनिश्चित करें कि बैकएंड ऐप (क्लाउड-लैंगचेन) पहले से चल रहा है। इसके बाद, डायरेक्टरी को फ्रंट-एंड ऐप (एआई-असिस्टेंट-क्लाउड) में बदलें और निम्नलिखित कमांड का उपयोग करके ऐप शुरू करें: npm start ऐप को बनने में कुछ समय लग सकता है. एक बार यह तैयार हो जाने पर, यह स्वचालित रूप से आपके ब्राउज़र में पर खुल जाएगा। localhost:3000 आइए संदर्भ जागरूकता और खोज सुविधा दोनों का परीक्षण करें! सबसे पहले, आइए एक और वीडियो गेम के बारे में पूछताछ करें जिसकी रिलीज़ अभी तक 2021 में घोषित नहीं की गई है - के नवीनतम याकुज़ा गेम की अगली कड़ी। इसके अतिरिक्त, हम पूछेंगे कि क्या इस गेम में पिछले गेम का प्रिय पात्र कज़ुमा किरयू शामिल है। ऐसा करने के लिए, " " बटन पर क्लिक करें। SEGA पूछें सोचने के लिए कुछ सेकंड दीजिए... हैरानी की बात यह है कि एआई ने गलत उत्तर दिया। याकुज़ा: लाइक ए ड्रैगन वास्तव में नवीनतम याकुज़ा गेम है लेकिन इसमें एक अलग नायक, इचिबन कासुगा है। आइए प्रश्न को दोबारा बदलें और इस बार " " बटन का उपयोग करें। पूछें और खोजें अब, AI को यह निर्णय लेने में अधिक समय लगा कि उसे वेब पर खोज करने की आवश्यकता है या नहीं। यह निर्धारित करने के बाद कि एक वेब खोज आवश्यक थी और एक संतोषजनक उत्तर पाने के बाद, इसने ग्राहक/फ्रंट-एंड को जानकारी लौटा दी। इस बार, इसका शीर्षक "लाइक ए ड्रैगन गैडेन: द मैन हू इरेज्ड हिज नेम" है, जिसमें वास्तव में काजुमा किरयू को नायक के रूप में दिखाया गया है। आकर्षक, है ना? एजेंट, एक बड़े भाषा मॉडल द्वारा संचालित, भविष्यवाणी करता है कि उपलब्ध संसाधनों (खोज) को देखते हुए कौन सी कार्रवाइयां आवश्यक हैं और एक संतोषजनक उत्तर प्रदान करता है। लैंगचेन मॉडल को कनेक्ट करना और "चेन", प्रॉम्प्ट (मॉडल के लिए निर्देश), और एजेंट और टूल जैसी अन्य सुविधाओं को आसान बनाता है। निष्कर्ष हमें उम्मीद है कि आपको यह ऐप बनाने और इन तकनीकों के बारे में सीखने में मज़ा आया होगा। गहराई से गोता लगाने में रुचि रखने वालों के लिए, आप और के लिए पूर्ण प्रोजेक्ट तक पहुंच सकते हैं। फ्रंट-एंड बैकएंड और यदि आप हमारे भागीदारों द्वारा महसूस की गई नवीनतम तकनीकों के साथ निर्माण करना चाहते हैं, तो अगली एआई चुनौती में हमारे साथ जुड़ें! *please see lablab.ai for all terms and conditions