এই নিবন্ধে আমরা আপনাকে দেখাতে চাই কিভাবে দুটি প্রযুক্তি ( LangChain এবং Anthropic ) একত্রিত করা যায় এবং একটি অনুসন্ধান-চালিত ব্যক্তিগত সহকারী তৈরি করা যায়।
আমাদের হ্যাকাথনে অংশগ্রহণকারীরা আরও বেশি বেশি AI পণ্য তৈরি করছে। ডেভেলপারদের জন্য পরবর্তী সুযোগ হল Google Cloud Vertex AI- এর সাথে আমাদের যৌথ হ্যাকাথন, যেখানে প্রতিটি অংশগ্রহণকারীর Google ক্লাউডের সর্বশেষ প্রযুক্তি ব্যবহার করে তাদের নিজস্ব AI অ্যাপ্লিকেশন তৈরি করার সুযোগ রয়েছে। এখানে আমরা AI এর একটি অ্যাপ্লিকেশন সম্পর্কে কথা বলব যা আরও বেশি গুরুত্বপূর্ণ হচ্ছে: সার্চ ইঞ্জিন ।
একটি অনুসন্ধান-চালিত ব্যক্তিগত সহকারী হল একটি ডিজিটাল সহকারী যা ব্যবহারকারীদের তথ্য খোঁজা, সংরক্ষণ করা, অনুস্মারক সেট করা এবং বার্তা পাঠানোর মতো কাজগুলিতে সহায়তা করতে সার্চ ইঞ্জিন প্রযুক্তি ব্যবহার করে। এই সহকারীরা বিভিন্ন উত্স থেকে ডেটা সংগ্রহ এবং বিশ্লেষণ করতে অনুসন্ধান অ্যালগরিদম ব্যবহার করে, এটি ব্যবহারকারীদের কাছে একটি দরকারী এবং সংক্ষিপ্ত পদ্ধতিতে উপস্থাপন করে।
অনুসন্ধান-চালিত ব্যক্তিগত সহকারীর বিশিষ্ট উদাহরণ হল Google সহকারী , সিরি , আলেক্সা এবং কর্টানা । এই সহকারীরা সঠিক এবং প্রাসঙ্গিক তথ্য প্রদান, সম্পূর্ণ কাজগুলি, এবং ব্যবহারকারীর সাথে যোগাযোগ করার সাথে সাথে তাদের প্রতিক্রিয়া উন্নত করতে তাদের অনুসন্ধান ক্ষমতাগুলি কার্যকরভাবে ব্যবহার করে।
নৃতাত্ত্বিক একটি গবেষণা সংস্থা যা উন্নত এআই সিস্টেমের বিকাশের উপর দৃষ্টি নিবদ্ধ করে। তাদের সর্বশেষ সৃষ্টি, Claude, একটি পরবর্তী প্রজন্মের AI সহকারী যা সহায়ক, সৎ এবং নিরীহ হওয়ার জন্য ডিজাইন করা হয়েছে। এই অত্যাধুনিক মডেলটি বিভিন্ন কাজে উচ্চ মাত্রার নির্ভরযোগ্যতা এবং পূর্বাভাসযোগ্যতা নিশ্চিত করে।
ক্লডের মূল বৈশিষ্ট্যগুলির মধ্যে রয়েছে:
বহুমুখী কথোপকথন এবং পাঠ্য প্রক্রিয়াকরণ ক্ষমতা
ব্যবহারকারীর নিরাপত্তা এবং গোপনীয়তা বজায় রাখা তার সর্বোচ্চ অগ্রাধিকার
ক্লডের প্রাথমিক ব্যবহারের ক্ষেত্রে হল:
সারসংক্ষেপ
অনুসন্ধান করুন
সৃজনশীল এবং সহযোগিতামূলক লেখা
প্রশ্নোত্তর
কোডিং সহায়তা
এই বৈশিষ্ট্যগুলি বিভিন্ন ডোমেন জুড়ে ব্যবহারকারীদের ক্ষমতায়নের জন্য ক্লাউডকে একটি আদর্শ AI টুল তৈরি করে।
ল্যাংচেইন হল এন্ড-টু-এন্ড ল্যাঙ্গুয়েজ মডেল অ্যাপ্লিকেশন তৈরির জন্য একটি বহুমুখী টুল। এটি একটি শক্তিশালী কাঠামো প্রদান করে যা ভাষা শেখার মডেল (LLMs) তৈরি, পরিচালনা এবং স্থাপনের প্রক্রিয়াকে সহজ করে। এলএলএম হল উন্নত এআই মডেল যা বিভিন্ন ভাষা এবং কাজে মানুষের মতো পাঠ্য বোঝার, তৈরি করা এবং ম্যানিপুলেট করার জন্য ডিজাইন করা হয়েছে।
এলএলএম-এর জন্য প্রম্পটগুলির দক্ষ ব্যবস্থাপনা
জটিল কর্মপ্রবাহের জন্য কাজের চেইন তৈরি করার ক্ষমতা
AI-তে স্থিতি যোগ করা, এটিকে পূর্ববর্তী মিথস্ক্রিয়া থেকে তথ্য মনে রাখার অনুমতি দেয়
এই ক্ষমতাগুলি ল্যাংচেইনকে একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব প্ল্যাটফর্ম করে তুলেছে বিভিন্ন অ্যাপ্লিকেশনে ভাষার মডেলের সম্ভাবনাকে কাজে লাগানোর জন্য।
ফ্লাস্ক ইনস্টল করুন : শুরু করতে, নিশ্চিত করুন যে আপনার পরিবেশে ফ্লাস্ক ইনস্টল করা আছে। আপনি 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/ এ নেভিগেট করুন। আপনি দেখতে হবে "হ্যালো, বিশ্ব!" ওয়েবপেজে প্রদর্শিত হয়।
এবং এটাই! আপনি সফলভাবে একটি ফ্লাস্ক প্রকল্প শুরু করেছেন এবং একটি সাধারণ অ্যাপ্লিকেশন তৈরি করেছেন।
python-dotenv এবং langchain ইনস্টল করুন : একটি .env
ফাইলের সাহায্যে এনভায়রনমেন্ট ভেরিয়েবল সহজে পরিচালনা করতে, আমরা python-dotenv
প্যাকেজটি ব্যবহার করব। একই সময়ে, আসুন langchain
ইনস্টল করি। pip
ব্যবহার করে উভয় প্যাকেজ ইনস্টল করুন:
pip install python-dotenv langchain
একটি .env
ফাইল তৈরি করুন: আপনার প্রকল্পের রুট ডিরেক্টরিতে একটি .env
ফাইল তৈরি করুন:
touch .env # Linux/Mac echo.>.env # Windows
এনভায়রনমেন্ট ভেরিয়েবল যোগ করুন : আপনার প্রিয় কোড এডিটরে .env
ফাইলটি খুলুন এবং আপনার এনভায়রনমেন্ট ভেরিয়েবল যোগ করুন। প্রতিটি ভেরিয়েবল একটি নতুন লাইনে থাকা উচিত, ফর্ম্যাটে KEY=VALUE:
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
অনুগ্রহ করে মনে রাখবেন যে আপনার কাছে Anthropic এর Claude মডেল এবং SerpAPI এর ওয়েব অনুসন্ধান পরিষেবার জন্য উভয় API কী থাকতে হবে।
এনভায়রনমেন্ট ভেরিয়েবল লোড করুন : 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()
সংস্করণ নিয়ন্ত্রণে .env
ফাইলটিকে উপেক্ষা করুন : সংস্করণ নিয়ন্ত্রণে গোপন কীগুলির মতো সংবেদনশীল তথ্য ভাগ না করা গুরুত্বপূর্ণ৷ আপনি যদি গিট ব্যবহার করেন তবে আপনার .gitignore
ফাইলে নিম্নলিখিত লাইনটি যোগ করুন (আপনার কাছে এটি না থাকলে একটি তৈরি করুন):
.env
এখন, আপনার ফ্লাস্ক প্রকল্পটি .env
ফাইল থেকে পরিবেশ ভেরিয়েবল ব্যবহার করার জন্য সেট আপ করা হয়েছে। আপনি প্রয়োজন অনুসারে আরও ভেরিয়েবল যোগ করতে পারেন এবং os.environ.get('KEY')
ব্যবহার করে তাদের অ্যাক্সেস করতে পারেন। .env
ফাইলটি ব্যক্তিগত রাখতে মনে রাখবেন এবং এটিকে সংস্করণ নিয়ন্ত্রণে কখনই প্রতিশ্রুতি দেবেন না।
এই টিউটোরিয়ালটি মধ্যবর্তী ব্যবহারকারীদের জন্য ডিজাইন করা হয়েছে যাদের Node.js, npm, প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট সম্পর্কে প্রাথমিক ধারণা রয়েছে। আমরা স্টাইলিংয়ের জন্য Tailwind CSS সহ এই প্রযুক্তিগুলি অন্তর্ভুক্ত করে এমন একটি স্ট্যাক ব্যবহার করব। এই স্ট্যাকটিকে এর দৃঢ়তা, বহুমুখিতা এবং এই প্রযুক্তিগুলির জন্য শক্তিশালী সম্প্রদায় সমর্থনের জন্য বেছে নেওয়া হয়েছিল। উপরন্তু, আমরা Anthropic's Claude মডেল এবং LangChain, দুটি শক্তিশালী AI প্রযুক্তিকে একীভূত করব যা আমাদের অ্যাপকে সঠিক, মানুষের মতো পাঠ্য প্রতিক্রিয়া তৈরি করতে দেবে।
অফিসিয়াল সাইট থেকে আপনার OS এর জন্য Node.js ইনস্টলারটি ডাউনলোড করুন।
Node.js এবং npm ইনস্টল করার জন্য ইনস্টলেশন প্রম্পট অনুসরণ করুন। LTS (দীর্ঘমেয়াদী সমর্থন) সংস্করণ অধিকাংশ ব্যবহারকারীদের জন্য সুপারিশ করা হয়.
একবার ইনস্টল হয়ে গেলে, আপনার টার্মিনাল থেকে Node.js এবং npm-এর সংস্করণগুলি পরীক্ষা করে ইনস্টলেশনটি যাচাই করুন:
নোড -v npm -v
ক্রিয়েট রিঅ্যাক্ট অ্যাপ (CRA) হল একটি কমান্ড-লাইন ইউটিলিটি যা আমাদেরকে একটি নতুন React.js অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। আমরা npm এর মাধ্যমে বিশ্বব্যাপী এটি ইনস্টল করব:
npm install -g create-react-app
ai-assistant-claude
নামে একটি নতুন প্রকল্প তৈরি করতে আমরা Typescript টেমপ্লেটের সাথে CRA ব্যবহার করব।
npx create-react-app ai-assistant-claude --template typescript
এই কমান্ডটি আমাদের বর্তমান ডিরেক্টরিতে ai-assistant-claude
নামে একটি নতুন ডিরেক্টরি তৈরি করে, যেখানে টাইপস্ক্রিপ্ট সমর্থন সহ একটি নতুন প্রতিক্রিয়া অ্যাপ্লিকেশন রয়েছে।
এই টিউটোরিয়ালে অনুসরণ করা পদক্ষেপগুলি অফিসিয়াল Tailwind CSS ডকুমেন্টেশনের উপর ভিত্তি করে। আরও আপ-টু-ডেট নির্দেশাবলীর জন্য এই নথিগুলি পড়ুন।
আমরা 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
নির্দেশাবলী যোগ করব:
@tailwind base; @tailwind components; @tailwind utilities;
আর ভয়েলা! Tailwind CSS এখন আমাদের প্রোজেক্টে একত্রিত হয়েছে।
আমরা কোডিং বিভাগে এগিয়ে যাওয়ার আগে, আসুন প্রয়োজনীয় লাইব্রেরিগুলি যেমন 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
এই পদক্ষেপগুলি সম্পন্ন হওয়ার সাথে সাথে, আপনার প্রকল্পটি সমস্ত প্রয়োজনীয় সরঞ্জাম এবং লাইব্রেরির সাথে সেট আপ করা হয়েছে। এর পরে, আমরা AI সহকারী অ্যাপ তৈরি করা শুরু করব যা সঠিক এবং মানুষের মতো পাঠ্য প্রতিক্রিয়া তৈরি করার জন্য Anthropic's Claude API এবং LangChain ব্যবহার করে।
আপনি যদি ইনস্টলেশন বা সেটআপের সময় কোনো সমস্যায় পড়েন, তাহলে এখানে কয়েকটি সাধারণ সমাধান রয়েছে:
অন্য কোনো সমস্যার জন্য, সংশ্লিষ্ট লাইব্রেরির ডকুমেন্টেশনের সাথে পরামর্শ করুন বা আপনার সমস্যাগুলি 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")
রেসপন্স জেনারেট করা হচ্ছে
নিম্নলিখিত কোড সেগমেন্ট আমাদের কথোপকথন গঠন করতে LangChain এর 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 ব্যবহার করুন। কিন্তু এই টিউটোরিয়ালে, আমি Insomnia ব্যবহার করব।
আসুন প্রথমে নিম্নলিখিত পেলোড সহ /ask
এন্ডপয়েন্টে কল করি। ধরা যাক আমি ভিডিও গেম " দ্য লিজেন্ড অফ জেল্ডা: ব্রেথ অফ দ্য ওয়াইল্ড " এর সিক্যুয়াল সম্পর্কে জিজ্ঞাসা করেছি। যা এটি ভুল উত্তর দেবে। এটি প্রত্যাশিত কারণ 2021 সালের শেষ পর্যন্ত মডেলটির প্রশিক্ষণ কাটঅফ রয়েছে, যেখানে এখনও সিক্যুয়াল সম্পর্কে কোনও ঘোষণা ছিল না।
কিভাবে /search
শেষ বিন্দু সম্পর্কে? আপনি যদি আগে থেকে আমাদের কোডটি লক্ষ্য করেন, তাহলে এই এন্ডপয়েন্টটি আরও পরিশীলিত চেইন দিয়ে পরিচালিত হয়, যা এজেন্টকে ব্যবহার করে।
এজেন্ট ব্যবহার করে, আমরা AI কে সিদ্ধান্ত নেওয়ার ক্ষেত্রে আরও শক্তি দিতে পারি, এটিকে শুধুমাত্র তার নিজস্ব মডেলের চেয়ে আরও বেশি সরঞ্জাম সরবরাহ করে, যা আমরা ইতিমধ্যেই দেখিয়েছি, এর নিজস্ব ত্রুটি রয়েছে।
/search
এন্ডপয়েন্ট কিভাবে কাজ করে তা প্রদর্শন করতে, আগের মতো একই পেলোড দিয়ে এটিকে কল করা যাক।
এই সময়, এটা সুন্দরভাবে কাজ! এটা কিভাবে ফণা অধীনে কাজ করে? আমাদের টার্মিনালে আউটপুট দেখি।
মজার ব্যাপার হল, এই সময় এআই মডেলটি এখনই উত্তর দেয়নি, তবে উত্তর দেওয়ার জন্য কী করতে হবে তা নিয়ে 'বিবেচনা' বলে মনে হচ্ছে। এটি ওয়েব অনুসন্ধান ফলাফল থেকে পর্যবেক্ষণ করার পরে উত্তর দেওয়ার সিদ্ধান্ত নিয়েছে যে "সংবাদ অনুসন্ধানের উপর ভিত্তি করে, এটি দ্য লিজেন্ড অফ জেল্ডা: টিয়ার্স অফ দ্য কিংডম ঘোষণা করা হয়েছিল" নামে একটি সিক্যুয়ালের মতো দেখাচ্ছে।
সুতরাং, যে যুক্তি দ্বারা, আমরা শুধুমাত্র তারপর /search
শেষ পয়েন্ট ব্যবহার করা উচিত নয়? এটা আরো সঠিক, এবং তাই, স্মার্ট? পুরোপুরি না। সাধারণত, একটি চ্যাটবট-ভিত্তিক অ্যাপে, বটটি পূর্ববর্তী কথোপকথনের প্রেক্ষাপট বজায় রাখবে বলে আশা করা হয়, যাতে এটি কথোপকথনের পুরো প্রসঙ্গটিকে 'মনে রাখে' এমনভাবে প্রতিক্রিয়া প্রদান করতে পারে। আসুন দেখি /search
শেষ পয়েন্ট ঠিক এটি করতে পারে কিনা।
আসুন পরীক্ষা করি যে /search
এন্ডপয়েন্টটি আমরা এইমাত্র যা জিজ্ঞাসা করেছি তা স্মরণ করতে পারে কিনা।
এটি ঘটেছে কারণ ল্যাংচেইন লাইব্রেরিতে মেমরি চেইন বৈশিষ্ট্য রয়েছে যা অতীতের কথোপকথন, ওয়েব সার্ভার বজায় রাখতে ব্যবহার করা যেতে পারে এবং এটিতে নির্মিত REST API পরিষেবাটি সহজাতভাবে রাষ্ট্রহীন। যার অর্থ, ওয়েব সার্ভার প্রতিটি অনুরোধকে একটি নতুন অনুরোধ হিসাবে বিবেচনা করবে।
কিন্তু, আমরা কি আগের কথোপকথনগুলিকে পেলোড হিসাবে অন্তর্ভুক্ত করিনি? এটা একটা ভালো প্রশ্ন. দেখা যাচ্ছে, LangChain-এ ব্যবহৃত এজেন্ট চেইন বর্তমানে কম্পোজড প্রম্পট পরিচালনা করা সমর্থন করে না, যেটিতে ব্যবহারকারী এবং AI উভয়ের অনুরোধ এবং প্রতিক্রিয়া উভয়ই থাকে। আমরা প্রধানত মডেলের জন্য উদাহরণ কথোপকথন প্রদান করতে এটি ব্যবহার করি, আমাদের পছন্দসই প্রতিক্রিয়ার জন্য মডেলটিকে আরও টিউন করে।
অন্যদিকে, এজেন্ট একটি একক নির্দেশ পেয়ে কাজ করে এবং এর চারপাশে চিন্তার চেইন তৈরি করে। যে কারণে, আমাদের কথোপকথন যতই দীর্ঘ হোক না কেন, এজেন্ট শুধুমাত্র সর্বশেষ অনুরোধে সাড়া দেবে।
আসুন পার্থক্য লক্ষ্য করার জন্য আমাদের /ask
endpoint পরীক্ষা করি।
এইবার, এটি আমাদের অতীতের কথোপকথনগুলিকে যুক্ত প্রসঙ্গ হিসাবে ব্যবহার করে উত্তর দিয়েছে! এতক্ষণে আমরা বুঝতে পেরেছি যে আমাদের এআই অ্যাসিস্ট্যান্ট অ্যাপ তৈরি করতে আমাদের উভয় প্রান্তেরই প্রয়োজন। কিন্তু কিভাবে আমরা পুরানো কিন্তু সর্বদা মনে রাখতে /ask
শেষ পয়েন্টের সাথে ভুলে যাওয়া কিন্তু পুঙ্খানুপুঙ্খ এবং আপ-টু-ডেট /search
শেষপয়েন্ট উভয়কেই অন্তর্ভুক্ত করব? অবশ্যই ফ্রন্ট-এন্ড নির্মাণ করে!
আসুন 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
উপাদান আমদানি করি, যা পরবর্তী ধাপে তৈরি করা হবে। তারপরে আমরা একটি <div>
উপাদানের মধ্যে <ChatClient/>
উপাদান অন্তর্ভুক্ত করি। এটি প্রতিক্রিয়া উপাদান ব্যবহার করে আমাদের AI সহকারী অ্যাপের কাঠামো সেট আপ করে।
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
কম্পোনেন্ট থেকে ইনপুট প্রসেস করে, এই ইনপুট ব্যবহার করে ব্যাকএন্ডে অনুরোধ পাঠায় এবং তারপর একটি লোডিং স্ট্যাটাস দেখায়। অনুরোধটি সফলভাবে প্রক্রিয়া করা হলে, উপাদানটি ব্যাকএন্ড থেকে প্রাপ্ত প্রতিক্রিয়াও দেখাবে।
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> ); };
সৌভাগ্যবশত, TailwindCSS সাধারণ অ্যানিমেশনের জন্য অন্তর্নির্মিত ইউটিলিটি ক্লাস অফার করে, যেমন animate-pulse
। এই ক্লাসটি সুন্দরভাবে নির্দেশ করে যে একটি অনুরোধ একটি প্রতিক্রিয়ার জন্য অপেক্ষা করছে। এই উপাদানটিতে, আমরা "ব্যবহারকারী" এবং "সহকারী" থেকে বার্তাগুলির অবস্থানের পার্থক্যও করি।
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
এন্ডপয়েন্টে পাঠায়। এআই মডেলের মাধ্যমে ইনপুট প্রক্রিয়াকরণের পাশাপাশি, পরিস্থিতির প্রয়োজন হলে এই বোতামটি এআই-চালিত ওয়েব অনুসন্ধানকেও ট্রিগার করে।
<!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
পৃষ্ঠায় আমাদের অ্যাপের শিরোনামটিকে " প্রতিক্রিয়া অ্যাপ " থেকে " ক্লাউড এআই সহকারী "-তে পরিবর্তন করে আপডেট করি।
{ "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": {
অবশেষে, আমরা package.json
ফাইলে একটি প্রক্সি কনফিগারেশন যোগ করি এবং এটিকে http://localhost:5000
এ সেট করি। এটি আমাদের বিভিন্ন পোর্ট ব্যবহার করার ফলে উদ্ভূত CORS সীমাবদ্ধতা বাইপাস করতে সাহায্য করে।
পরীক্ষা শুরু করতে, প্রথমে নিশ্চিত করুন যে ব্যাকএন্ড অ্যাপ (ক্লাউড-ল্যাংচেইন) ইতিমধ্যেই চলছে।
এরপরে, ডিরেক্টরিটিকে ফ্রন্ট-এন্ড অ্যাপে পরিবর্তন করুন (AI-assistant-claude) এবং নিম্নলিখিত কমান্ডটি ব্যবহার করে অ্যাপটি শুরু করুন:
npm start
অ্যাপটি তৈরি হতে কিছুটা সময় লাগতে পারে। এটি প্রস্তুত হয়ে গেলে, এটি স্বয়ংক্রিয়ভাবে আপনার ব্রাউজারে localhost:3000
এ খুলবে।
প্রসঙ্গ সচেতনতা এবং অনুসন্ধান বৈশিষ্ট্য উভয় পরীক্ষা করা যাক! প্রথমে, আসুন অন্য একটি ভিডিও গেম সম্পর্কে অনুসন্ধান করা যাক যার মুক্তি এখনও 2021 সালে ঘোষণা করা হয়নি – SEGA দ্বারা সর্বশেষ ইয়াকুজা গেমের সিক্যুয়াল। উপরন্তু, আমরা জিজ্ঞাসা করব যে এই গেমটিতে আগের গেমগুলির প্রিয় চরিত্র Kazuma Kiryu বৈশিষ্ট্য রয়েছে কিনা। এটি করতে, " জিজ্ঞাসা করুন " বোতামে ক্লিক করুন৷
ভাবতে কয়েক সেকেন্ড সময় দিন...
আশ্চর্যজনকভাবে, এআই ভুল উত্তর দিয়েছে। ইয়াকুজা: ড্রাগনের মতো এটি প্রকৃতপক্ষে সর্বশেষ ইয়াকুজা গেম তবে এতে ভিন্ন নায়ক ইচিবান কাসুগা অভিনয় করেছেন। চলুন প্রশ্নটি পুনরায় বর্ণনা করা যাক এবং এইবার " জিজ্ঞাসা করুন এবং অনুসন্ধান করুন " বোতামটি ব্যবহার করুন৷
এখন, AI ওয়েবে অনুসন্ধানের প্রয়োজন কিনা তা সিদ্ধান্ত নিতে বেশি সময় নিয়েছে। একটি ওয়েব অনুসন্ধান প্রয়োজনীয় ছিল তা নির্ধারণ করার পরে এবং একটি সন্তোষজনক উত্তর খুঁজে পাওয়ার পরে, এটি ক্লায়েন্ট/ফ্রন্ট-এন্ডে তথ্য ফেরত দেয়।
এইবার, এটি "লাইক এ ড্রাগন গাইডেন: দ্য ম্যান হু ইরাজড হিজ নেম" শিরোনাম ফিরিয়ে দেয়, যা প্রকৃতপক্ষে নায়ক হিসেবে কাজুমা কিরিউকে দেখায়।
আকর্ষণীয়, তাই না? এজেন্ট, একটি বৃহৎ ভাষার মডেল দ্বারা চালিত, উপলব্ধ সংস্থানগুলি (অনুসন্ধান) দেওয়া হলে কী কী পদক্ষেপ প্রয়োজন তা ভবিষ্যদ্বাণী করে এবং একটি সন্তোষজনক উত্তর প্রদান করে। LangChain মডেল, প্রম্পট (মডেলের নির্দেশাবলী) এবং অন্যান্য বৈশিষ্ট্য যেমন এজেন্ট এবং সরঞ্জামগুলির সাথে সংযোগ করা এবং "চেইন" করা সহজ করে তোলে।
আমরা আশা করি আপনি এই অ্যাপটি তৈরি করতে এবং এই প্রযুক্তিগুলি সম্পর্কে শিখতে উপভোগ করেছেন৷ যারা গভীরভাবে ডাইভিং করতে আগ্রহী তাদের জন্য, আপনি ফ্রন্ট-এন্ড এবং ব্যাকএন্ডের জন্য সম্পূর্ণ প্রকল্পটি অ্যাক্সেস করতে পারেন।
এবং আপনি যদি আমাদের অংশীদারদের দ্বারা উপলব্ধি করা সর্বশেষ প্রযুক্তিগুলির সাথে তৈরি করতে চান, তাহলে পরবর্তী AI চ্যালেঞ্জে আমাদের সাথে যোগ দিন!
*please see lablab.ai for all terms and conditions