Upstash और Node.js के साथ रियल-टाइम आर्टिकल रिकमेंडेशन इंजन बनाएं

क्या आपने Google या Perplexity.ai का उपयोग किया है? क्या आप सोचते हैं कि वे नवीनतम खोज परिणाम कैसे दिखा पाते हैं जिनमें ऑनलाइन लेखों के लिंक शामिल होते हैं? इस गाइड में, आप सीखेंगे कि ऐसी प्रणाली को अपने दम पर कैसे बनाया जाए। आप एक ऐसी प्रणाली बनाना सीखेंगे जो आपके द्वारा अपने बढ़ते नॉलेज बैंक में जोड़े गए लेखों के लिंक के आधार पर सिफारिशें उत्पन्न करने में सक्षम हो।

पूर्वापेक्षाएँ

आपको निम्नलिखित की आवश्यकता होगी:

• Node.js 18 या बाद का संस्करण
• एक Upstash खाता
• एक OpenAI खाता
• एक Fly.io खाता

टेक स्टैक

चरण

इस गाइड को पूरा करने और अपना स्वयं का आर्टिकल रिकमेंडेशन सिस्टम तैनात करने के लिए, आपको इन चरणों का पालन करना होगा:

• OpenAI टोकन उत्पन्न करें
• Upstash Vector इंडेक्स बनाएं
• प्रोजेक्ट सेटअप करें
• OpenAI API क्लाइंट इंस्टेंटिएट करें
• OpenAI API एम्बेडिंग क्लाइंट बनाएं
• Upstash Vector क्लाइंट बनाएं
• कॉन्टेक्स्ट API एंडपॉइंट बनाएं
• चैट API एंडपॉइंट बनाएं
• Fly.io पर तैनात करें
• संदर्भ
• निष्कर्ष

OpenAI टोकन उत्पन्न करें

OpenAI API का उपयोग करके, आप लेखों के वेक्टर एम्बेडिंग प्राप्त करने और AI का उपयोग करके चैटबॉट प्रतिक्रियाएं बनाने में सक्षम हैं। OpenAI API के किसी भी अनुरोध के लिए एक प्राधिकरण टोकन की आवश्यकता होती है। टोकन प्राप्त करने के लिए, अपने OpenAI खाते में API Keys पर जाएं, और Create new secret key बटन पर क्लिक करें। इस टोकन को कॉपी करें और बाद में उपयोग के लिए OPENAI_API_KEY पर्यावरण चर के रूप में सुरक्षित रूप से संग्रहीत करें।

Upstash Vector इंडेक्स बनाएं

एक बार जब आप Upstash खाता बना लेते हैं और लॉग इन हो जाते हैं, तो Vector टैब पर जाएं और वेक्टर इंडेक्स बनाना शुरू करने के लिए Create Index पर क्लिक करें।

अपनी पसंद का इंडेक्स नाम दर्ज करें (जैसे, article) और वेक्टर आयामों को 1536 पर सेट करें।

अब, Connect सेक्शन तक नीचे स्क्रॉल करें, और .env बटन पर क्लिक करें। सामग्री को कॉपी करें, और इसे अपने एप्लिकेशन में आगे उपयोग के लिए कहीं सुरक्षित रखें।

प्रोजेक्ट सेटअप करें

सेटअप करने के लिए, बस ऐप रेपो को क्लोन करें और इस गाइड का पालन करके उसमें मौजूद हर चीज को सीखें। प्रोजेक्ट को क्लोन करने के लिए, टर्मिनल में निम्नलिखित चलाएं:

# प्रोजेक्ट क्लोन करें
git clone https://github.com/rishi-raj-jain/article-recommendation-system
cd article-recommendation-system
# निर्भरताएं इंस्टॉल करें
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'
// OpenAI API का उपयोग करके टेक्स्ट पूर्णता उत्पन्न करने के लिए क्लास इंस्टेंटिएट करें
export default new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

नोट: Remix में एक फाइल में .server.ts जोड़कर, आप यह सुनिश्चित कर सकते हैं कि उसका कोड क्लाइंट-साइड बंडल से बाहर निकाला गया है।

OpenAI API एम्बेडिंग क्लाइंट बनाएं

@langchain/openai पैकेज के साथ, आप दिए गए टेक्स्ट के वेक्टर एम्बेडिंग उत्पन्न करने के लिए OpenAIEmbeddings क्लास का उपयोग करने में सक्षम हैं। जब किसी भी LangChain वेक्टर स्टोर के साथ संयुक्त, OpenAIEmbeddings क्लास आपको प्रत्येक वेक्टर एम्बेडिंग को अपने दम पर बनाने और सम्मिलित करने की प्रक्रिया से बचाती है। निम्न कोड के साथ, हमने आगे उपयोग के लिए वेक्टर एम्बेडिंग बनाने के लिए OpenAIEmbeddings क्लास को इंस्टेंटिएट किया है।

// File: app/lib/openai/embedding.server.ts
import { OpenAIEmbeddings } from '@langchain/openai'
// OpenAI API का उपयोग करके एम्बेडिंग उत्पन्न करने के लिए क्लास इंस्टेंटिएट करें
export default new OpenAIEmbeddings({
  modelName: 'text-embedding-3-small',
  openAIApiKey: process.env.OPENAI_API_KEY,
})

Upstash Vector क्लाइंट बनाएं

@upstash/vector और @langchain/community/vectorstores/upstash पैकेज का उपयोग करके, आप अपने Remix एप्लिकेशन में एक कनेक्शनलेस क्लाइंट बनाने में सक्षम हैं जो आपको Upstash Vector इंडेक्स से वेक्टर एम्बेडिंग को स्टोर, डिलीट और क्वेरी करने की अनुमति देता है।

// 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'
// Upstash Vector इंडेक्स इंस्टेंटिएट करें
const index = new UpstashIndex({
  url: process.env.UPSTASH_VECTOR_REST_URL as string,
  token: process.env.UPSTASH_VECTOR_REST_TOKEN as string,
})
// Upstash Vector स्टोर इंस्टेंटिएट करें जो एम्बेडिंग बनाएगा और सहेजेगा
export default new UpstashVectorStore(embeddings, { index })

कॉन्टेक्स्ट API एंडपॉइंट बनाएं

जैसे ही आप Remix एप्लिकेशन चलाते हैं, आपको एक टेक्स्ट बॉक्स दिखाई देगा जो इनपुट के रूप में कई लेख URL स्वीकार करता है। उन लेखों को भविष्य की उपयोगकर्ता खोजों में व्यक्तिगत प्रतिक्रियाएं बनाने के लिए चैटबॉट के नॉलेज में जोड़ा जाना है। इस खंड में, आप सीखेंगे कि कॉन्टेक्स्ट एंडपॉइंट (app/routes/api_.context.tsx) कैसे सेटअप किया जाता है ताकि वे कई लेख URL स्वीकार कर सकें, उनकी सामग्री प्राप्त कर सकें, उनके वेक्टर एम्बेडिंग उत्पन्न कर सकें, और उन्हें Upstash Vector इंडेक्स में गतिशील रूप से संग्रहीत कर सकें।

// 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()
  // जांचें कि फॉर्म सबमिशन में कोई लेख लिंक मौजूद हैं या नहीं
  const articlesToEmbed = formData.get('articles') as string
  if (articlesToEmbed) {
    // Upstash Vector स्टोर में जोड़े जाने वाले दस्तावेज़ बनाएं
    const documents: any[] = []
    await Promise.all(
      articlesToEmbed.split(',').map(async (link) => {
        // खोज परिणामों में रेंडर करने के लिए लिंक का उपयोग करें
        // Cheerio का उपयोग करके लिंक पार्स करें
        const loader = new CheerioWebBaseLoader(link.trim())
        const scraper = await loader.scrape()
        // खोज परिणामों में रेंडर करने के लिए शीर्षक टैग की सामग्री प्राप्त करें
        const name = scraper('title').html()
        // पेज सामग्री को स्ट्रिंग के रूप में प्राप्त करें
        const pageContent = scraper.text()
        // वेक्टर स्टोर में सम्मिलित करने के लिए मेटाडेटा ऑब्जेक्ट बनाएं
        const metadata = { link, name }
        documents.push(new Document({ pageContent, metadata }))
      }),
    )
    // प्रदान किए गए दस्तावेज़ों से एम्बेडिंग बनाएं साथ ही मेटाडेटा
    // और उन्हें Upstash डेटाबेस में जोड़ें
    await vectorServer.addDocuments(documents.filter(Boolean))
  }
}

ऊपर दिए गए Remix एक्शन में, कॉन्टेक्स्ट एंडपॉइंट (/api/context) पर POST अनुरोध में मौजूद फॉर्म डेटा को पार्स किया जाता है। इसके अलावा, कॉमा (,) से अलग लेख लिंक के सेट पर एक लूप होता है जो निम्नलिखित करता है:

• लेख के वेबपेज से प्राप्त टेक्स्ट सामग्री के रूप में pageContent वेरिएबल बनाता है
• लेख के वेबपेज के शीर्षक के रूप में name वेरिएबल बनाता है
• टेक्स्ट सामग्री, संदर्भ और लेख के नाम के साथ एक LangChain दस्तावेज़ बनाता है (new Document({ pageContent, metadata }))
• प्रत्येक दस्तावेज़ को ग्लोबल documents सरणी में जोड़ता है

अंत में, ग्लोबल documents सरणी में संग्रहीत सभी दस्तावेज़ Upstash Vector इंडेक्स में डाले जाते हैं। हुड के तहत, प्रत्येक दस्तावेज़ के लिए वेक्टर एम्बेडिंग उसके pageContent गुण का उपयोग करके उत्पन्न की जाती है।

चैट API एंडपॉइंट बनाएं

इस खंड में, आप सीखेंगे कि चैट API एंडपॉइंट (app/routes/api_.chat.tsx) कैसे सेटअप किया जाता है ताकि उपयोगकर्ता खोज के लिए प्रासंगिक लेखों की सिफारिशों वाले खोज इंजन जैसी प्रतिक्रियाएं बनाई जा सकें। खोज के लिए प्रासंगिक लेख दिए गए वेक्टर इंडेक्स से शीर्ष-K निकटतम वैक्टर ढूंढकर पाए जाते हैं। इसके अलावा, वैक्टर के मेटाडेटा से शीर्षक और लिंक OpenAI API को कॉन्टेक्स्ट के रूप में पास किए जाते हैं। यह चैटबॉट को उपयोगकर्ता खोज का जवाब देने के साथ-साथ बाहरी लिंक के रूप में लेखों को शामिल करने की अनुमति देता है। चीजों को सरल बनाने के लिए, हम इसे और भागों में विभाजित करेंगे:

सिमिलैरिटी खोज का उपयोग करके प्रासंगिक वेक्टर एम्बेडिंग ढूंढें

प्रत्येक उपयोगकर्ता खोज के लिए लेखों के पूरे नॉलेज बैंक को दोबारा देखना एक महंगा ऑपरेशन है। इसे उपयोगकर्ता खोज के लिए अत्यधिक प्रासंगिक शीर्ष 3 लेखों तक सीमित करने के लिए, अपने Upstash Vector इंडेक्स में मौजूद वैक्टर के सेट को क्वेरी करें। इसके अलावा, उन वैक्टर को फ़िल्टर करके रखें जिनके एम्बेडिंग उपयोगकर्ता खोज के वेक्टर एम्बेडिंग के लिए कम से कम 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) => {
  // उपयोगकर्ता और चैटबॉट के बीच संदेशों का सेट
  const { messages = [] } = await request.json()
  // चैट सरणी के अंतिम संदेश में संग्रहीत नवीनतम प्रश्न प्राप्त करें
  const searchQuery = messages[messages.length - 1].content
  // Upstash Vector स्टोर का उपयोग करके सिमिलैरिटी खोज करें
  const queryResult = await vectorServer.similaritySearchWithScore(searchQuery, 3)
  // 70% से अधिक कॉन्फिडेंस स्कोर वाले रिकॉर्ड फ़िल्टर करें और
  // खोज परिणामों को रेंडर करने के लिए मेटाडेटा को प्रतिक्रिया के रूप में सेट करें
  const results = queryResult.filter((i) => i[1] >= 0.7).map((i) => i[0].metadata)
  // प्रतिक्रिया बनाने के लिए आगे बढ़ें
}

चैटबॉट के लिए सिस्टम कॉन्टेक्स्ट और निर्देश बनाएं

अब जब आपने अत्यधिक प्रासंगिक वैक्टर का सेट प्राप्त कर लिया है, तो आप चाहते हैं कि चैटबॉट उपयोगकर्ता खोज का जवाब देने से पहले संबंधित लेखों को जाने और संदर्भित करे। OpenAI के gpt-3.5-turbo मॉडल के साथ ऐसा करने के लिए, एक संदेश ऑब्जेक्ट बनाएं जिसमें role प्रॉपर्टी system हो और कंटेंट प्रॉपर्टी में निम्नलिखित निर्देश हों:

• चैटबॉट को Google की तरह प्रतिक्रिया देनी चाहिए
• चैटबॉट को यह सुनिश्चित करना चाहिए कि प्रतिक्रिया मार्कडाउन फॉर्मेट में हो
• चैटबॉट की प्रतिक्रिया में लेखों के हाइपरलिंक होने चाहिए
• चैटबॉट केवल लेखों के संदर्भों को शामिल करने से आगे निकल जाता है

// File: app/routes/api_.train.tsx
import { OpenAIStream, StreamingTextResponse } from 'ai'
import completionServer from '~/lib/openai/completion.server'
export const action = async ({ request }: ActionFunctionArgs) => {
  // ...
  // प्रासंगिक लेखों को कॉन्टेक्स्ट के साथ OpenAI टेक्स्ट पूर्णता का उपयोग करें
  const completionResponse = await completionServer.chat.completions.create({
    stream: true,
    model: 'gpt-3.5-turbo',
    messages: [
      {
        // सिस्टम कंटेंट संदेश बनाएं जिसे जोड़ा जाए
        // open ai टेक्स्ट पूर्णता के रूप में 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.`,
      },
      // पूरी बातचीत भी पास करें!
      ...messages,
    ],
  })
  // प्रतिक्रिया को एक अनुकूल टेक्स्ट-स्ट्रीम में बदलें
  const stream = OpenAIStream(completionResponse)
  // स्ट्रीम के साथ प्रतिक्रिया दें
  return new StreamingTextResponse(stream)
}

उपरोक्त कोड के साथ, आप OpenAI से स्ट्रीम परिणाम प्राप्त करने में सक्षम हैं जो कॉन्टेक्स्ट-अवेयर हैं, उपयोगकर्ता खोज के लिए प्रासंगिक पाए गए लेखों की सिफारिश करते हैं।

यह बहुत सीखने वाला था! अब आप पूरा कर चुके हैं ✨

Fly.io पर तैनात करें

रिपॉजिटरी Fly.io के लिए एक बेक्ड-इन सेटअप के साथ आती है, विशेष रूप से निम्नलिखित से संबंधित:

• Dockerfile
• fly.toml
• .dockerignore

एक बार जब आपके पास Fly.io खाता हो, तो आप अपने टर्मिनल में रूट डायरेक्टरी पर निम्न कमांड निष्पादित करके Fly.io में एक ऐप बना सकते हैं:

# अपने खाते में बेक्ड-इन कॉन्फिगरेशन के आधार पर एक ऐप बनाएं
# इसका परिणाम केवल मौजूदा fly.toml में ऐप नाम के परिवर्तन में होगा
fly launch

और अपने टर्मिनल में निम्न कमांड निष्पादित करके Fly.io पर तैनात करें:

# ऊपर बनाई गई कॉन्फिगरेशन के आधार पर ऐप तैनात करें
fly deploy

संदर्भ

इस गाइड में उपयोग किए गए संदर्भों का पता लगाकर अधिक विस्तृत जानकारी प्राप्त करें।

• GitHub रिपॉजिटरी
• LangChain के साथ Upstash Vector स्टोर एकीकरण
• OpenAI के चैट पूर्णता API में सिस्टम निर्देश
• LangChain में Cheerio का उपयोग करके वेबपेज से डेटा लोड करना
• React ऐप्स में AI चैट UI बनाना

निष्कर्ष

इस गाइड में, आपने सीखा कि डायनामिक रूप से उत्पन्न सिस्टम कॉन्टेक्स्ट के साथ वेक्टर एम्बेडिंग और OpenAI पूर्णता API का उपयोग करके आर्टिकल रिकमेंडेशन सिस्टम कैसे बनाया जाए। Upstash Vector और LangChain के साथ, आपको एक इंडेक्स में वैक्टर स्टोर करने, टॉप-K वेक्टर खोज क्वेरी करने और प्रत्येक उपयोगकर्ता खोज के लिए प्रासंगिक कॉन्टेक्स्ट बनाने की क्षमता मिलती है, वह भी कोड की कुछ ही पंक्तियों में।

यदि आपके कोई प्रश्न या टिप्पणियां हैं, तो बेझिझक GitHub पर मुझसे संपर्क करें।