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

इस लेख में हम आपको यह दिखाना चाहेंगे कि दो तकनीकों ( लैंगचेन और एंथ्रोपिक ) को कैसे संयोजित किया जाए और एक खोज-संचालित निजी सहायक कैसे बनाया जाए।

हमारे हैकथॉन में प्रतिभागियों द्वारा अधिक से अधिक एआई उत्पाद बनाए जा रहे हैं। डेवलपर्स के लिए अगला अवसर Google क्लाउड वर्टेक्स एआई के साथ हमारा संयुक्त हैकथॉन है, जहां प्रत्येक प्रतिभागी को Google क्लाउड की नवीनतम तकनीक का उपयोग करके अपना स्वयं का एआई एप्लिकेशन बनाने का मौका मिलता है। यहां हम एआई के एक ऐसे अनुप्रयोग के बारे में बात करेंगे जो तेजी से महत्वपूर्ण होता जा रहा है: खोज इंजन ।

क्या है वह?

खोज-संचालित निजी सहायक एक डिजिटल सहायक है जो उपयोगकर्ताओं को जानकारी ढूंढने, आरक्षण करने, अनुस्मारक सेट करने और संदेश भेजने जैसे कार्यों में सहायता करने के लिए खोज इंजन तकनीक का उपयोग करता है। ये सहायक विभिन्न स्रोतों से डेटा इकट्ठा करने और उसका विश्लेषण करने के लिए खोज एल्गोरिदम का उपयोग करते हैं, इसे उपयोगकर्ताओं के सामने उपयोगी और संक्षिप्त तरीके से प्रस्तुत करते हैं।

खोज-संचालित निजी सहायकों के प्रमुख उदाहरण Google Assistant , Siri , Alexa और Cortana हैं। ये सहायक सटीक और प्रासंगिक जानकारी प्रदान करने, कार्यों को पूरा करने और उपयोगकर्ता के साथ बातचीत करते समय अपनी प्रतिक्रियाओं को बेहतर बनाने के लिए अपनी खोज क्षमताओं का प्रभावी ढंग से उपयोग करते हैं।

एन्थ्रोपिक के क्लाउड का परिचय

एंथ्रोपिक एक अनुसंधान संगठन है जो उन्नत एआई सिस्टम विकसित करने पर केंद्रित है। उनकी नवीनतम रचना, क्लाउड, एक अगली पीढ़ी का एआई सहायक है जिसे सहायक, ईमानदार और हानिरहित बनाया गया है। यह अत्याधुनिक मॉडल विभिन्न कार्यों में उच्च स्तर की विश्वसनीयता और पूर्वानुमान सुनिश्चित करता है।

क्लाउड की प्रमुख विशेषताओं में शामिल हैं:

• बहुमुखी संवादी और पाठ प्रसंस्करण क्षमताएँ

• उपयोगकर्ता की सुरक्षा और गोपनीयता को बनाए रखना इसकी सर्वोच्च प्राथमिकता है

  
  

क्लाउड के प्राथमिक उपयोग के मामले हैं:

• संक्षिप्तीकरण

• खोज

• रचनात्मक और सहयोगात्मक लेखन

• प्रश्नोत्तर

• कोडिंग सहायता

  
  

ये विशेषताएं क्लाउड को विभिन्न अनुप्रयोगों के लिए एक आदर्श एआई टूल बनाती हैं, जो विभिन्न डोमेन के उपयोगकर्ताओं को सशक्त बनाती हैं।

लैंगचेन का परिचय

लैंगचेन एंड-टू-एंड भाषा मॉडल अनुप्रयोगों के निर्माण के लिए एक बहुमुखी उपकरण है। यह एक मजबूत ढांचा प्रदान करता है जो भाषा शिक्षण मॉडल (एलएलएम) बनाने, प्रबंधित करने और तैनात करने की प्रक्रिया को सरल बनाता है। एलएलएम उन्नत एआई मॉडल हैं जिन्हें विभिन्न भाषाओं और कार्यों में मानव-जैसे पाठ को समझने, उत्पन्न करने और हेरफेर करने के लिए डिज़ाइन किया गया है।

लैंगचेन की प्रमुख विशेषताओं में शामिल हैं:

• एलएलएम के लिए संकेतों का कुशल प्रबंधन

• जटिल वर्कफ़्लो के लिए कार्यों की श्रृंखला बनाने की क्षमता

• एआई में राज्य जोड़ना, इसे पिछले इंटरैक्शन से जानकारी याद रखने की अनुमति देता है

  
  

ये क्षमताएं विविध अनुप्रयोगों में भाषा मॉडल की क्षमता का दोहन करने के लिए लैंगचेन को एक शक्तिशाली और उपयोगकर्ता-अनुकूल मंच बनाती हैं।

आवश्यक शर्तें

• पायथन का बुनियादी ज्ञान
• टाइपसिप्ट और/या रिएक्ट का बुनियादी ज्ञान
• एंथ्रोपिक के क्लाउड एपीआई तक पहुंच
• सर्पएपीआई की वेब खोज एपीआई तक पहुंच

खाका

1. प्रोजेक्ट प्रारंभ करना
2. क्लाउड और लैंगचेन के साथ एआई असिस्टेंट ऐप के लिए फ्रंट-एंड का निर्माण
3. प्रोजेक्ट फ़ाइलें लिखना
4. एआई असिस्टेंट ऐप का परीक्षण

बहस

प्रोजेक्ट प्रारंभ करना

app.py (फ्लास्क ऐप एंट्रीपॉइंट) 🐍

1. फ्लास्क स्थापित करें : आरंभ करने के लिए, सुनिश्चित करें कि आपके वातावरण में फ्लास्क स्थापित है। आप इसे pip उपयोग करके कर सकते हैं:

    pip install Flask

   
   

2. एक नई निर्देशिका बनाएं : अपने प्रोजेक्ट के लिए एक नई निर्देशिका बनाएं और उस पर नेविगेट करें:

    mkdir claude-langchain cd claude-langchain

   
   

3. एक आभासी वातावरण स्थापित करें (वैकल्पिक) : पायथन परियोजनाओं के साथ काम करते समय आभासी वातावरण का उपयोग करना एक अच्छा अभ्यास है। आप venv या अपनी पसंद के किसी अन्य टूल का उपयोग करके इसे बना सकते हैं:

    python -m venv venv source venv/bin/activate (Linux/Mac) venv\Scripts\activate (Windows)

   
   

4. एक main.py फ़ाइल बनाएँ: अपना फ्लास्क एप्लिकेशन कोड लिखने के लिए एक main.py फ़ाइल बनाएँ:

    touch app.py # Linux/Mac echo.>app.py # Windows

   
   

5. अपना फ्लास्क एप्लिकेशन कोड लिखें : अपने पसंदीदा कोड संपादक में main.py फ़ाइल खोलें और निम्नलिखित कोड जोड़ें:

    from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run()

   
   

6. फ्लास्क एप्लिकेशन चलाएँ : main.py फ़ाइल सहेजें और अपने टर्मिनल/कमांड प्रॉम्प्ट में निम्नलिखित कमांड चलाएँ:

    python main.py

   
   

7. अपना ब्राउज़र खोलें : अपना पसंदीदा वेब ब्राउज़र खोलें और http://127.0.0.1:5000/ पर नेविगेट करें। आपको "हैलो, वर्ल्ड!" देखना चाहिए वेबपेज पर प्रदर्शित.

   
   

और बस! आपने फ्लास्क प्रोजेक्ट को सफलतापूर्वक प्रारंभ कर लिया है और एक सरल एप्लिकेशन बनाया है।

.env 🌏

1. पायथन-डोटेनव और लैंगचैन स्थापित करें : .env फ़ाइल के साथ पर्यावरण चर को आसानी से प्रबंधित करने के लिए, हम python-dotenv पैकेज का उपयोग करेंगे। साथ ही आइए langchain भी इंस्टॉल करें। pip उपयोग करके दोनों पैकेज स्थापित करें:

    pip install python-dotenv langchain

   
   

2. एक .env फ़ाइल बनाएँ : अपने प्रोजेक्ट की रूट डायरेक्टरी में एक .env फ़ाइल बनाएँ:

    touch .env # Linux/Mac echo.>.env # Windows

   
   

3. पर्यावरण चर जोड़ें : अपने पसंदीदा कोड संपादक में .env फ़ाइल खोलें और अपने पर्यावरण चर जोड़ें। प्रत्येक वेरिएबल KEY=VALUE प्रारूप में एक नई लाइन पर होना चाहिए:

    ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

   कृपया ध्यान दें कि आपके पास एंथ्रोपिक के क्लाउड मॉडल और सर्पएपीआई की वेब खोज सेवा दोनों के लिए एपीआई कुंजी होनी चाहिए।

   
   

4. पर्यावरण चर लोड करें : 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()

   
   

5. संस्करण नियंत्रण में .env फ़ाइल को अनदेखा करें : यह महत्वपूर्ण है कि संस्करण नियंत्रण में गुप्त कुंजियों जैसी संवेदनशील जानकारी साझा न करें। यदि आप Git का उपयोग कर रहे हैं, तो अपनी .gitignore फ़ाइल में निम्न पंक्ति जोड़ें (यदि आपके पास यह नहीं है तो एक बनाएं):

    .env

अब, आपका फ्लास्क प्रोजेक्ट .env फ़ाइल से पर्यावरण चर का उपयोग करने के लिए सेट हो गया है। आप आवश्यकतानुसार अधिक वेरिएबल जोड़ सकते हैं और os.environ.get('KEY') का उपयोग करके उन तक पहुंच सकते हैं। .env फ़ाइल को निजी रखना याद रखें और इसे कभी भी संस्करण नियंत्रण के लिए प्रतिबद्ध न करें।

क्लाउड और लैंगचेन के साथ एआई असिस्टेंट ऐप के लिए फ्रंट-एंड का निर्माण

यह ट्यूटोरियल उन मध्यवर्ती उपयोगकर्ताओं के लिए डिज़ाइन किया गया है जिन्हें Node.js, npm, React और टाइपस्क्रिप्ट की बुनियादी समझ है। हम एक स्टैक का उपयोग करेंगे जिसमें स्टाइलिंग के लिए टेलविंड सीएसएस के साथ-साथ ये तकनीकें भी शामिल हैं। इस स्टैक को इसकी मजबूती, बहुमुखी प्रतिभा और इन प्रौद्योगिकियों के लिए मजबूत सामुदायिक समर्थन के लिए चुना गया था। इसके अलावा, हम एंथ्रोपिक के क्लाउड मॉडल और लैंगचेन, दो शक्तिशाली एआई प्रौद्योगिकियों को एकीकृत करेंगे जो हमारे ऐप को सटीक, मानव-जैसी टेक्स्ट प्रतिक्रियाएं उत्पन्न करने की अनुमति देंगे।

Node.js और NPM स्थापित करना

1. आधिकारिक साइट से अपने OS के लिए Node.js इंस्टॉलर डाउनलोड करें।

2. Node.js और npm को स्थापित करने के लिए इंस्टॉलेशन संकेतों का पालन करें। अधिकांश उपयोगकर्ताओं के लिए LTS (दीर्घकालिक समर्थन) संस्करण अनुशंसित है।

3. एक बार इंस्टॉल हो जाने पर, अपने टर्मिनल से Node.js और npm के संस्करणों की जांच करके इंस्टॉलेशन को सत्यापित करें:

   नोड -v एनपीएम -v

परियोजना वातावरण की स्थापना

क्रिएट रिएक्ट ऐप इंस्टॉल करना

क्रिएट रिएक्ट ऐप (सीआरए) एक कमांड-लाइन उपयोगिता है जो एक नया रिएक्ट.जेएस एप्लिकेशन बनाने में हमारी सहायता करती है। हम इसे npm के माध्यम से विश्व स्तर पर स्थापित करेंगे:

 npm install -g create-react-app

टाइपस्क्रिप्ट के साथ एक नया रिएक्ट प्रोजेक्ट बनाना

हम ai-assistant-claude नामक एक नया प्रोजेक्ट बनाने के लिए टाइपस्क्रिप्ट टेम्पलेट के साथ CRA का उपयोग करेंगे।

 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 रिपॉजिटरी पर पोस्ट करें।

प्रोजेक्ट फ़ाइलें लिखना

इस अनुभाग में, हम फ्लास्क ऐप पर वापस जाएंगे जिसे हमने पहले आरंभ किया था और नए एंडपॉइंट जोड़ेंगे, जैसे /ask और /search । ये हमारी सरल चैट और उन्नत चैट सुविधाओं (बाद वाले को Google खोज परिणामों द्वारा संचालित किया जा रहा है) के लिए अंतिम बिंदु के रूप में काम करेंगे।

आइए अपने आवश्यक मॉड्यूल आयात करके शुरुआत करें:

 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

यदि हमारा टर्मिनल यह आउटपुट लौटाता है तो हमें पता चल जाएगा कि सब कुछ ठीक हो जाएगा।

बिना किसी देरी के, आइए अपने दो समापन बिंदुओं, /ask और /search परीक्षण करें। दोनों के बीच अंतर करने के लिए, आइए उनमें से प्रत्येक को समान पेलोड भेजें। अपना REST API परीक्षण और दस्तावेज़ीकरण सॉफ़्टवेयर खोलें, या केवल cURL का उपयोग करें। लेकिन इस ट्यूटोरियल में, मैं इनसोम्निया का उपयोग करूंगा।

आइए सबसे पहले निम्नलिखित पेलोड के साथ /ask एंडपॉइंट को कॉल करें। मान लीजिए कि मैंने वीडियो गेम " द लीजेंड ऑफ ज़ेल्डा: ब्रीथ ऑफ़ द वाइल्ड " के सीक्वल के बारे में पूछा है। जिसका वह गलत उत्तर देगा। यह अपेक्षित है क्योंकि मॉडल के पास 2021 के अंत तक प्रशिक्षण कटऑफ है, जिसमें सीक्वल के बारे में अभी तक कोई घोषणा नहीं की गई है।

/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 ( <div> <ChatClient/> </div> ); } export default App;

उपरोक्त कोड स्निपेट में, हम ChatClient घटक आयात करते हैं, जो अगले चरण में बनाया जाएगा। फिर हम <ChatClient/> घटक को <div> तत्व में शामिल करते हैं। यह रिएक्ट घटकों का उपयोग करके हमारे एआई सहायक ऐप के लिए संरचना स्थापित करता है।

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<Array<Message>>([]); 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 ( <div className="h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center"> <div className='flex flex-col items-center gap-2'> <h1 className='text-white text-xl'>AI Assistant with Claude and LangChain</h1> <div className="w-full max-w-md h-[80vh] bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden flex flex-col"> <ChatHistory messages={messages} isLoading={isLoading} /> <ChatInput onSimpleChat={handleSimpleChat} onAdvancedChat={handleAdvancedChat} /> </div> </div> </div> ); };

यह घटक हमारे 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<Message>; isLoading: boolean } export const ChatHistory: React.FC<ChatHistoryProps> = ({ messages, isLoading }) => { return ( <div className="p-4 h-full overflow-y-auto"> {messages.map((message, index) => ( <div key={index} className={`mb-3 ${ message.role === 'user' ? 'text-right' : 'text-left' }`} > <ReactMarkdown className={`inline-block px-3 py-2 rounded-md ${ index % 2 === 0 ? 'bg-gray-300 dark:bg-gray-700' : 'bg-blue-200 dark:bg-blue-900' }`} > {message.content} </ReactMarkdown> </div> ))} {isLoading && ( <div className="mb-3 text-left"> <ReactMarkdown className="inline-block px-3 py-2 rounded-md bg-blue-200 dark:bg-blue-900 animate-pulse" > {/* Put your desired loading content here */} Thinking... </ReactMarkdown> </div> )} </div> ); };

सौभाग्य से, टेलविंडसीएसएस animate-pulse जैसे सरल एनिमेशन के लिए अंतर्निहित उपयोगिता कक्षाएं प्रदान करता है। यह वर्ग सुरुचिपूर्ण ढंग से यह इंगित करने में मदद करता है कि अनुरोध प्रतिक्रिया की प्रतीक्षा कर रहा है। इस घटक में, हम "उपयोगकर्ता" और "सहायक" से संदेशों की स्थिति को भी अलग करते हैं।

ChatInput.tsx

 import React, { useState } from 'react'; interface ChatInputProps { onSimpleChat: (message: string) => void; onAdvancedChat: (message: string) => void; } export const ChatInput: React.FC<ChatInputProps> = ({ onSimpleChat, onAdvancedChat }) => { const [input, setInput] = useState(''); const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { setInput(event.target.value); }; const handleSubmit = (handler: (message: string) => void) => { handler(input); setInput(''); }; return ( <div className="flex p-4 border-t border-gray-200 dark:border-gray-700"> <input type="text" value={input} onChange={handleInputChange} placeholder="Type your message..." className="flex-grow px-3 py-2 rounded-md bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-100 focus:outline-none" /> <button onClick={() => 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 </button> <button onClick={() => 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 </button> </div> ); };

अंत में, हमने अपने टेक्स्ट इनपुट में दो बटन जोड़े। पहले बटन का उपयोग /ask एंडपॉइंट पर इनपुट भेजने के लिए किया जाता है, जो बिना किसी अतिरिक्त संवर्द्धन के एआई मॉडल का उपयोग करके इनपुट को संसाधित करता है।

यह समापन बिंदु संदर्भ-जागरूक है। दूसरा बटन, जिसे उचित रूप से "पूछें और खोजें" नाम दिया गया है, इनपुट को /search समापन बिंदु पर भेजता है। एआई मॉडल के माध्यम से इनपुट को संसाधित करने के अलावा, यदि स्थिति की आवश्यकता होती है तो यह बटन एआई-संचालित वेब खोज को भी ट्रिगर करता है।

Index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> -- <title>React App</title> ++ <title>Claude AI Assistant</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>

अंतिम चरण के रूप में, हम अपने ऐप के शीर्षक को " रिएक्ट ऐप " से " क्लाउड एआई असिस्टेंट " में बदलकर index.html पेज में अपडेट करते हैं।

package.json

 { "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": {

अंत में, हम package.json फ़ाइल में एक प्रॉक्सी कॉन्फ़िगरेशन जोड़ते हैं और इसे http://localhost:5000 पर सेट करते हैं। यह हमें विभिन्न बंदरगाहों का उपयोग करने से उत्पन्न होने वाली CORS सीमाओं को बायपास करने में मदद करता है।

एआई असिस्टेंट ऐप का परीक्षण

परीक्षण शुरू करने के लिए, पहले सुनिश्चित करें कि बैकएंड ऐप (क्लाउड-लैंगचेन) पहले से चल रहा है।

इसके बाद, डायरेक्टरी को फ्रंट-एंड ऐप (एआई-असिस्टेंट-क्लाउड) में बदलें और निम्नलिखित कमांड का उपयोग करके ऐप शुरू करें:

 npm start

ऐप को बनने में कुछ समय लग सकता है. एक बार यह तैयार हो जाने पर, यह स्वचालित रूप से आपके ब्राउज़र में localhost:3000 पर खुल जाएगा।

आइए संदर्भ जागरूकता और खोज सुविधा दोनों का परीक्षण करें! सबसे पहले, आइए एक और वीडियो गेम के बारे में पूछताछ करें जिसकी रिलीज़ अभी तक 2021 में घोषित नहीं की गई है - SEGA के नवीनतम याकुज़ा गेम की अगली कड़ी। इसके अतिरिक्त, हम पूछेंगे कि क्या इस गेम में पिछले गेम का प्रिय पात्र कज़ुमा किरयू शामिल है। ऐसा करने के लिए, " पूछें " बटन पर क्लिक करें।

सोचने के लिए कुछ सेकंड दीजिए...

हैरानी की बात यह है कि एआई ने गलत उत्तर दिया। याकुज़ा: लाइक ए ड्रैगन वास्तव में नवीनतम याकुज़ा गेम है लेकिन इसमें एक अलग नायक, इचिबन कासुगा है। आइए प्रश्न को दोबारा बदलें और इस बार " पूछें और खोजें " बटन का उपयोग करें।

अब, AI को यह निर्णय लेने में अधिक समय लगा कि उसे वेब पर खोज करने की आवश्यकता है या नहीं। यह निर्धारित करने के बाद कि एक वेब खोज आवश्यक थी और एक संतोषजनक उत्तर पाने के बाद, इसने ग्राहक/फ्रंट-एंड को जानकारी लौटा दी।

इस बार, इसका शीर्षक "लाइक ए ड्रैगन गैडेन: द मैन हू इरेज्ड हिज नेम" है, जिसमें वास्तव में काजुमा किरयू को नायक के रूप में दिखाया गया है।

आकर्षक, है ना? एजेंट, एक बड़े भाषा मॉडल द्वारा संचालित, भविष्यवाणी करता है कि उपलब्ध संसाधनों (खोज) को देखते हुए कौन सी कार्रवाइयां आवश्यक हैं और एक संतोषजनक उत्तर प्रदान करता है। लैंगचेन मॉडल को कनेक्ट करना और "चेन", प्रॉम्प्ट (मॉडल के लिए निर्देश), और एजेंट और टूल जैसी अन्य सुविधाओं को आसान बनाता है।

निष्कर्ष

हमें उम्मीद है कि आपको यह ऐप बनाने और इन तकनीकों के बारे में सीखने में मज़ा आया होगा। गहराई से गोता लगाने में रुचि रखने वालों के लिए, आप फ्रंट-एंड और बैकएंड के लिए पूर्ण प्रोजेक्ट तक पहुंच सकते हैं।

और यदि आप हमारे भागीदारों द्वारा महसूस की गई नवीनतम तकनीकों के साथ निर्माण करना चाहते हैं, तो अगली एआई चुनौती में हमारे साथ जुड़ें!

*please see lablab.ai for all terms and conditions