কম্পিউটার টিউটোরিয়াল

Upstash এবং Node.js দিয়ে একটি রিয়েল-টাইম আর্টিকেল রেকমেন্ডেশন ইঞ্জিন তৈরি করুন

আপনি কি Google বা Perplexity.ai ব্যবহার করেছেন? আপনি কি আশ্চর্য হন যে তারা কীভাবে সর্বশেষতম এবং অনলাইন নিবন্ধগুলির লিঙ্কগুলি অন্তর্ভুক্ত করে এমন অনুসন্ধান ফলাফলগুলি দেখাতে সক্ষম হয়? ঠিক আছে, এই নির্দেশিকাতে আপনি শিখবেন কীভাবে আপনার নিজের মতো একটি সিস্টেম তৈরি করবেন। আপনি শিখবেন কীভাবে এমন একটি সিস্টেম তৈরি করতে হয় যা আপনি এটির ক্রমবর্ধমান জ্ঞান ব্যাঙ্কে যোগ করা নিবন্ধগুলির লিঙ্কগুলির উপর ভিত্তি করে সুপারিশ তৈরি করতে সক্ষম৷

পূর্বশর্ত

আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

  • Node.js 18 বা তার পরে
  • একটি Upstash অ্যাকাউন্ট
  • একটি OpenAI অ্যাকাউন্ট
  • একটি Fly.io অ্যাকাউন্ট

টেক স্ট্যাক

প্রযুক্তি বিবরণ UpstashServerless ডাটাবেস প্ল্যাটফর্ম। আপনি ভেক্টর এমবেডিং এবং মেটাডেটা সঞ্চয় করার জন্য Upstash ভেক্টর ব্যবহার করতে যাচ্ছেন। ওয়েব স্ট্যান্ডার্ডের উপর ফোকাস সহ ফুল-স্ট্যাক ওয়েব অ্যাপ্লিকেশন তৈরির জন্য RemixFramework। উন্নত AI প্রযুক্তির বিকাশের উপর দৃষ্টি নিবদ্ধ করে ওপেনএআইএএন কৃত্রিম বুদ্ধিমত্তা গবেষণা ল্যাব। ল্যাংচেইন ফ্রেমওয়ার্ক মডেল AIVKA-এর দ্বারা চালিত ওপেন সোর্স ল্যাঙ্গুয়েজ অ্যাপ্লিকেশন তৈরির জন্য। AI-চালিত ইউজার ইন্টারফেস তৈরির জন্য। কাস্টম ডিজাইন তৈরির জন্য TailwindCSSCSS ফ্রেমওয়ার্ক। আপনার ব্যবহারকারীদের কাছাকাছি পূর্ণ স্ট্যাক অ্যাপস এবং ডাটাবেস চালানোর জন্য Fly.ioA প্ল্যাটফর্ম। সামঞ্জস্যপূর্ণ কোড শৈলীর জন্য প্রেটিয়ারঅপিনিনেটেড কোড ফর্ম্যাটার।

পদক্ষেপ

এই নির্দেশিকাটি সম্পূর্ণ করতে এবং আপনার নিজস্ব নিবন্ধ সুপারিশ সিস্টেম স্থাপন করতে, আপনাকে এই পদক্ষেপগুলি অনুসরণ করতে হবে:

  • একটি OpenAI টোকেন তৈরি করুন
  • একটি আপস্ট্যাশ ভেক্টর সূচক তৈরি করুন
  • প্রকল্প সেট আপ করুন
  • OpenAI API ক্লায়েন্টকে ইনস্ট্যান্টিয়েট করুন
  • OpenAI API এম্বেডিংস ক্লায়েন্ট তৈরি করুন
  • Upstash ভেক্টর ক্লায়েন্ট তৈরি করুন
  • একটি প্রসঙ্গ API এন্ডপয়েন্ট তৈরি করুন
  • একটি চ্যাট API এন্ডপয়েন্ট তৈরি করুন
  • Fly.io তে স্থাপন করুন
  • রেফারেন্স
  • উপসংহার

একটি OpenAI টোকেন তৈরি করুন

OpenAI API ব্যবহার করে, আপনি নিবন্ধগুলির ভেক্টর এম্বেডিং পেতে এবং AI ব্যবহার করে চ্যাটবট প্রতিক্রিয়া তৈরি করতে সক্ষম হন। OpenAI API-তে যে কোনো অনুরোধের জন্য একটি অনুমোদন টোকেন প্রয়োজন। টোকেন পেতে, আপনার OpenAI অ্যাকাউন্টের API কীগুলিতে নেভিগেট করুন এবং নতুন গোপন কী তৈরি করুন-এ ক্লিক করুন বোতাম OPENAI_API_KEY হিসাবে পরবর্তীতে ব্যবহারের জন্য এই টোকেনটি অনুলিপি করুন এবং নিরাপদে সংরক্ষণ করুন পরিবেশ পরিবর্তনশীল।

একটি আপস্ট্যাশ ভেক্টর সূচক তৈরি করুন

একবার আপনি একটি Upstash অ্যাকাউন্ট তৈরি করে এবং লগ ইন করলে, ভেক্টর ট্যাবে যান এবং সূচী তৈরি করুন-এ ক্লিক করুন একটি ভেক্টর সূচক তৈরি করা শুরু করতে।

Upstash এবং Node.js দিয়ে একটি রিয়েল-টাইম আর্টিকেল রেকমেন্ডেশন ইঞ্জিন তৈরি করুন

আপনার পছন্দের সূচী নাম লিখুন (বলুন, article ) এবং ভেক্টরের মাত্রা 1536-এ সেট করুন।

Upstash এবং Node.js দিয়ে একটি রিয়েল-টাইম আর্টিকেল রেকমেন্ডেশন ইঞ্জিন তৈরি করুন

এখন, সংযোগ পর্যন্ত নিচে স্ক্রোল করুন বিভাগে, এবং .env ক্লিক করুন বোতাম বিষয়বস্তু অনুলিপি করুন, এবং আপনার অ্যাপ্লিকেশনে আরও ব্যবহার করার জন্য নিরাপদ কোথাও সংরক্ষণ করুন৷

Upstash এবং Node.js দিয়ে একটি রিয়েল-টাইম আর্টিকেল রেকমেন্ডেশন ইঞ্জিন তৈরি করুন

প্রকল্প সেট আপ করুন

সেট আপ করতে, শুধু অ্যাপ রেপো ক্লোন করুন এবং এতে যা আছে তা শিখতে এই নির্দেশিকাটি অনুসরণ করুন। প্রকল্পটি ক্লোন করতে, একটি টার্মিনালে নিম্নলিখিতটি চালান:

# Clone the project
git clone https://github.com/rishi-raj-jain/article-recommendation-system
cd article-recommendation-system
 
# Install the dependencies
pnpm install

একবার আপনি রেপো ক্লোন করলে, একটি .env তৈরি করুন ফাইল আপনি উপরের বিভাগে প্রাপ্ত গোপন কী যোগ করতে যাচ্ছেন।

.env ফাইলে নিম্নলিখিত কী থাকা উচিত:

# .env
 
# OpenAI API Key
OPENAI_API_KEY="sk-..."
 
# Upstash Vector Keys
UPSTASH_VECTOR_REST_URL="https://...-us1-vector.upstash.io"
UPSTASH_VECTOR_REST_TOKEN="...="

এটি সম্পন্ন করার সাথে, কনফিগারেশন সেট আপ আপনার শেষে সম্পূর্ণ হয়। আপনি এখন আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি কার্যকর করে এবং localhost:3000-এ গিয়ে অ্যাপ্লিকেশনটি কার্যকর দেখতে পারেন।

pnpm run build && pnpm run start

কোডের প্রাসঙ্গিক অংশগুলি বোঝার জন্য অনুসরণ করুন যা আপনাকে সফলভাবে আপনার নিজস্ব নিবন্ধ সুপারিশ সিস্টেম তৈরি করতে দেয়।

OpenAI API ক্লায়েন্টকে ইনস্ট্যান্টিয়েট করুন

openai সহ প্যাকেজ, আপনি সময় বাঁচাতে পারবেন এবং কোডের কয়েকটি লাইনের মধ্যে OpenAI REST API-এর সাথে ইন্টারঅ্যাক্ট করতে পারবেন। নিম্নলিখিত কোডের সাথে, আমরা চ্যাট সমাপ্তির প্রতিক্রিয়া তৈরি করতে আরও ব্যবহারের জন্য OpenAI API ক্লায়েন্ট লাইব্রেরি চালু করেছি৷

// File: app/lib/openai/completion.server.ts
 
import OpenAI from 'openai'
 
// Instantiate class to generate text completion using the OpenAI API
export default new OpenAI({
 apiKey: process.env.OPENAI_API_KEY,
})

দ্রষ্টব্য:.server.ts যোগ করে রিমিক্সের একটি ফাইলে, আপনি নিশ্চিত করতে পারবেন যে এটির কোড জোর করে আউট করা হয়েছে ক্লায়েন্ট সাইড বান্ডেলের।

OpenAI API এম্বেডিংস ক্লায়েন্ট তৈরি করুন

@langchain/openai সহ প্যাকেজ, আপনি OpenAIEmbeddings ব্যবহার করতে পারবেন একটি প্রদত্ত পাঠ্যের ভেক্টর এমবেডিং তৈরি করার জন্য ক্লাস। যেকোনো LangChain ভেক্টর স্টোরের সাথে মিলিত হলে, OpenAIEmbeddings ক্লাস আপনাকে প্রতিটি ভেক্টর এম্বেডিং তৈরি এবং সন্নিবেশ করার প্রক্রিয়া থেকে বাঁচায়। নিম্নোক্ত কোডের সাহায্যে, আমরা আরও ব্যবহারের জন্য ওপেনএআইইএমবেডিংস ক্লাসটি চালু করেছি যাতে হুডের নিচে ভেক্টর এম্বেডিং তৈরি করা যায়।

// File: app/lib/openai/embedding.server.ts
 
import { OpenAIEmbeddings } from '@langchain/openai'
 
// Instantiate class to generate embeddings using the OpenAI API
export default new OpenAIEmbeddings({
 modelName: 'text-embedding-3-small',
 openAIApiKey: process.env.OPENAI_API_KEY,
})

Upstash ভেক্টর ক্লায়েন্ট তৈরি করুন

@upstash/vector ব্যবহার করা হচ্ছে এবং @langchain/community/vectorstores/upstash প্যাকেজ, আপনি আপনার রিমিক্স অ্যাপ্লিকেশনে একটি সংযোগহীন ক্লায়েন্ট তৈরি করতে সক্ষম যা আপনাকে একটি Upstash ভেক্টর সূচক থেকে ভেক্টর এম্বেডিং সঞ্চয় করতে, মুছে ফেলতে এবং অনুসন্ধান করতে দেয়৷

// File: app/lib/upstash/vectorStore.server.ts
 
import embeddings from '~/lib/openai/embedding.server'
import { Index as UpstashIndex } from '@upstash/vector'
import { UpstashVectorStore } from '@langchain/community/vectorstores/upstash'
 
// Instantiate the Upstash Vector Index
const index = new UpstashIndex({
 url: process.env.UPSTASH_VECTOR_REST_URL as string,
 token: process.env.UPSTASH_VECTOR_REST_TOKEN as string,
})
 
// Instantiate the Upstash Vector Store that'll create and save embeddings
export default new UpstashVectorStore(embeddings, { index })

একটি প্রসঙ্গ API এন্ডপয়েন্ট তৈরি করুন

আপনি যখন রিমিক্স অ্যাপ্লিকেশান চালাবেন, আপনি একটি টেক্সট বক্স দেখতে পাবেন যেটি একটি ইনপুট হিসাবে একাধিক নিবন্ধের URL গ্রহণ করছে৷ ভবিষ্যতে ব্যবহারকারীর অনুসন্ধানে ব্যক্তিগতকৃত প্রতিক্রিয়া তৈরি করার জন্য এই নিবন্ধগুলি চ্যাটবটের জ্ঞানে যোগ করতে হবে। এই বিভাগে, আপনি শিখবেন কিভাবে প্রসঙ্গ এন্ডপয়েন্ট (app/routes/api_.context.tsx ) সেই একাধিক নিবন্ধের URL গুলিকে গ্রহণ করার জন্য, তাদের বিষয়বস্তু আনতে, তাদের ভেক্টর এম্বেডিং তৈরি করতে এবং গতিশীলভাবে Upstash ভেক্টর সূচকে সংরক্ষণ করার জন্য সেট আপ করা হয়েছে৷

// File: app/routes/api_.context.tsx
 
import { Document } from 'langchain/document'
import { ActionFunctionArgs } from '@remix-run/node'
import vectorServer from '~/lib/vector/vectorStore.server'
import { CheerioWebBaseLoader } from 'langchain/document_loaders/web/cheerio'
 
export const action = async ({ request }: ActionFunctionArgs) => {
 const formData = await request.formData()
 // Check if any article link are present in the form submission
 const articlesToEmbed = formData.get('articles') as string
 if (articlesToEmbed) {
 // Create the documents to be added to the Upstash Vector Store
 const documents: any[] = []
 await Promise.all(
 articlesToEmbed.split(',').map(async (link) => {
 // Use the link to render in the search results
 // Parse the link using Cheerio
 const loader = new CheerioWebBaseLoader(link.trim())
 const scraper = await loader.scrape()
 // Get the content of title tag to render in the search results
 const name = scraper('title').html()
 // Get the page content as string
 const pageContent = scraper.text()
 // Create metadata object to be inserted in the vector store
 const metadata = { link, name }
 documents.push(new Document({ pageContent, metadata }))
 }),
 )
 // Creating embeddings from the provided documents along with metadata
 // and add them to Upstash database
 await vectorServer.addDocuments(documents.filter(Boolean))
 }
}

উপরের রিমিক্স অ্যাকশনে, POST-এ উপস্থিত ফর্ম ডেটা কনটেক্সট এন্ডপয়েন্টে (/api/context ) পার্স করা হয়। আরও, কমা (,) দ্বারা পৃথক করা নিবন্ধ লিঙ্কগুলির সেটের উপর একটি লুপ রয়েছে যা নিম্নলিখিতগুলি করে:

  • একটি pageContent তৈরি করে নিবন্ধের ওয়েবপৃষ্ঠা থেকে আনা পাঠ্য বিষয়বস্তু হিসাবে পরিবর্তনশীল
  • একটি name তৈরি করে নিবন্ধের ওয়েবপৃষ্ঠার শিরোনাম হিসাবে পরিবর্তনশীল
  • পাঠ্য বিষয়বস্তু, রেফারেন্স এবং নিবন্ধের নাম সহ একটি ল্যাংচেইন ডকুমেন্ট তৈরি করে (new Document({ pageContent, metadata }) )
  • প্রতিটি নথিকে বিশ্বব্যাপী documents যোগ করে অ্যারে

অবশেষে, সমস্ত নথি গ্লোবাল documents-এ সংরক্ষিত আপস্ট্যাশ ভেক্টর সূচকে অ্যারে ঢোকানো হয়। হুডের নীচে, প্রতিটি নথির জন্য ভেক্টর এম্বেডিংগুলি এটির pageContent ব্যবহার করে তৈরি করা হয় সম্পত্তি।

একটি চ্যাট API এন্ডপয়েন্ট তৈরি করুন

এই বিভাগে, আপনি শিখবেন কিভাবে চ্যাট এপিআই এন্ডপয়েন্ট (app/routes/api_.chat.tsx ) সার্চ ইঞ্জিন তৈরি করার জন্য সেট আপ করা হয়েছে যেমন ব্যবহারকারীর অনুসন্ধানের সাথে প্রাসঙ্গিক নিবন্ধগুলির সুপারিশ সম্বলিত প্রতিক্রিয়াগুলি। একটি প্রদত্ত ভেক্টর সূচক থেকে নিকটতম শীর্ষ-কে ভেক্টরগুলি খুঁজে বের করে অনুসন্ধানের সাথে প্রাসঙ্গিক নিবন্ধগুলি পাওয়া যায়৷ আরও, ভেক্টরের মেটাডেটা থেকে শিরোনাম এবং লিঙ্কগুলি প্রসঙ্গ হিসাবে OpenAI API-তে প্রেরণ করা হয়। এটি চ্যাটবটকে ব্যবহারকারীর অনুসন্ধানে সাড়া দেওয়ার সাথে বাহ্যিক লিঙ্ক হিসাবে নিবন্ধগুলি অন্তর্ভুক্ত করার অনুমতি দেয়। জিনিসগুলিকে সহজ করার জন্য, আমরা এটিকে আরও ভাগে ভাগ করব:

সাদৃশ্য অনুসন্ধান ব্যবহার করে প্রাসঙ্গিক ভেক্টর এম্বেডিং খুঁজুন

প্রতিটি ব্যবহারকারীর অনুসন্ধানের জন্য নিবন্ধগুলির সম্পূর্ণ জ্ঞান ব্যাঙ্কের পুনর্বিবেচনা করা একটি ব্যয়বহুল অপারেশন৷ ব্যবহারকারীর অনুসন্ধানের সাথে (যদি) অত্যন্ত প্রাসঙ্গিক শীর্ষ 3টি নিবন্ধে এটিকে স্কোপ করতে, আপনার Upstash ভেক্টর সূচকে বিদ্যমান ভেক্টরের সেটটি জিজ্ঞাসা করুন। আরও, ভেক্টরগুলিকে রাখতে ফিল্টার করুন যেগুলির এমবেডিংগুলি ব্যবহারকারীর অনুসন্ধানের ভেক্টর এম্বেডিংয়ের সাথে কমপক্ষে 70% সাদৃশ্য স্কোর বহন করে৷

// File: app/routes/api_.chat.tsx
 
import vectorServer from '~/lib/upstash/vectorStore.server'
import type { ActionFunctionArgs } from '@remix-run/node'
 
export const action = async ({ request }: ActionFunctionArgs) => {
 
 // Set of messages between user and chatbot
 const { messages = [] } = await request.json()
 
 // Get the latest question stored in the last message of the chat array
 const searchQuery = messages[messages.length - 1].content
 
 // Perform Similarity Search using the Upstash Vector Store
 const queryResult = await vectorServer.similaritySearchWithScore(searchQuery, 3)
 
 // Filter the records with confidence score > 70% and
 // set the metadata as response to render search results
 const results = queryResult.filter((i) => i[1] >= 0.7).map((i) => i[0].metadata)
 
 // Proceed to create a response
}

চ্যাটবটের জন্য সিস্টেম প্রসঙ্গ এবং নির্দেশাবলী তৈরি করুন

এখন যেহেতু আপনি অত্যন্ত প্রাসঙ্গিক ভেক্টরের সেট পেয়েছেন, আপনি চান যে চ্যাটবট ব্যবহারকারীর অনুসন্ধানে সাড়া দেওয়ার আগে সংশ্লিষ্ট নিবন্ধগুলি জানুক এবং উল্লেখ করুক। OpenAI এর gpt-3.5-turbo দিয়ে এটি করতে মডেল, সিস্টেম হিসাবে ভূমিকা বৈশিষ্ট্য সহ একটি বার্তা বস্তু তৈরি করুন এবং নিম্নলিখিত নির্দেশাবলী ধারণ করার জন্য বিষয়বস্তু সম্পত্তি:

  • চ্যাটবটকে গুগলের মতো সাড়া দেওয়া উচিত
  • চ্যাটবট নিশ্চিত হওয়া উচিত যে প্রতিক্রিয়াটি মার্কডাউন ফর্ম্যাটে রয়েছে
  • চ্যাটবটের প্রতিক্রিয়ায় নিবন্ধগুলির হাইপারলিঙ্ক থাকা উচিত
  • চ্যাটবট শুধু নিবন্ধের রেফারেন্স সহ বাইরে চলে যায়
// File: app/routes/api_.train.tsx
 
import { OpenAIStream, StreamingTextResponse } from 'ai'
import completionServer from '~/lib/openai/completion.server'
 
export const action = async ({ request }: ActionFunctionArgs) => {
 // ...
 
 // Now use OpenAI Text Completion with relevant articles as context
 const completionResponse = await completionServer.chat.completions.create({
 stream: true,
 model: 'gpt-3.5-turbo',
 messages: [
 {
 // create a system content message to be added as
 // the open ai text completion will supply it as the context with the API
 role: 'system',
 content: `Behave like a Google. You have the knowledge of the following articles: ${JSON.stringify(results)}. Each response should be in 100% markdown compatible format and should have hyperlinks in it. Be precise. Do add some general text in the response related to the query.`,
 },
 // also, pass the whole conversation!
 ...messages,
 ],
 })
 
 // Convert the response into a friendly text-stream
 const stream = OpenAIStream(completionResponse)
 // Respond with the stream
 return new StreamingTextResponse(stream)
}
 

উপরের কোডের সাহায্যে, আপনি OpenAI থেকে ফলাফলগুলি স্ট্রিম করতে সক্ষম হন যা প্রসঙ্গ সচেতন, ব্যবহারকারীর অনুসন্ধানের সাথে প্রাসঙ্গিক পাওয়া নিবন্ধগুলি সুপারিশ করে৷

যে অনেক শেখার ছিল! আপনি এখন সব সম্পন্ন করেছেন ✨

Fly.io-তে স্থাপন করুন

রিপোজিটরিটি Fly.io-এর জন্য একটি বেকড-ইন সেটআপের সাথে আসে, বিশেষভাবে এর সাথে সম্পর্কিত:

  • ডকারফাইল
  • fly.toml
  • .dockerignore

একবার আপনার একটি Fly.io অ্যাকাউন্ট হয়ে গেলে, আপনি রুট ডিরেক্টরিতে আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি কার্যকর করার মাধ্যমে Fly.io-এ একটি অ্যাপ তৈরি করতে পারেন:

# Create an app based on the baked-in configuration in your account
# This will result only in the change of app name in existing fly.toml
 
fly launch

এবং আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি কার্যকর করার জন্য Fly.io-তে স্থাপন করুন:

# Deploy the app based on the configuration created above
 
fly deploy

রেফারেন্স

আরও বিশদ অন্তর্দৃষ্টির জন্য, এই নির্দেশিকায় ব্যবহৃত রেফারেন্সগুলি অন্বেষণ করুন৷

  • GitHub সংগ্রহস্থল
  • LangChain এর সাথে আপস্ট্যাশ ভেক্টর স্টোর ইন্টিগ্রেশন
  • ওপেনএআই-এর চ্যাট সমাপ্তি API-এ সিস্টেম নির্দেশাবলী
  • LangChain-এ Cheerio ব্যবহার করে ওয়েবপেজ থেকে ডেটা লোড করুন
  • প্রতিক্রিয়া অ্যাপে AI Chat UI তৈরি করা হচ্ছে

উপসংহার

এই নির্দেশিকায়, আপনি শিখেছেন কীভাবে ভেক্টর এমবেডিং এবং ওপেনএআই কমপ্লিশন এপিআই ব্যবহার করে গতিশীলভাবে তৈরি করা সিস্টেম প্রসঙ্গে একটি নিবন্ধ সুপারিশ সিস্টেম তৈরি করতে হয়। Upstash ভেক্টর এবং LangChain এর সাথে, আপনি একটি সূচকে ভেক্টর সংরক্ষণ করার ক্ষমতা পান, টপ-কে ভেক্টর অনুসন্ধানের প্রশ্নগুলি সম্পাদন করতে পারেন এবং প্রতিটি ব্যবহারকারীর অনুসন্ধানের জন্য প্রাসঙ্গিক প্রসঙ্গ তৈরি করতে পারেন, সমস্ত কিছু কোডের কয়েকটি লাইনের মধ্যে৷

যদি আপনার কোন প্রশ্ন বা মন্তব্য থাকে, GitHub এ আমার সাথে যোগাযোগ করতে নির্দ্বিধায়৷


  1. পাইথনে (tkinter) একটি ওয়েব ব্রাউজারে প্রোগ্রাম্যাটিকভাবে ইউআরএল খোলা হচ্ছে

  2. HTML <q> বৈশিষ্ট্য উল্লেখ করুন

  3. পাইথনে একটি বাইনারি গাছের দীর্ঘতম এমনকি মান পথ খুঁজে বের করার প্রোগ্রাম

  4. পাইথন গ্লোবাল ইন্টারপ্রেটার লক (GIL) কি?