अपस्टैश और नोड.जेएस के साथ एक रीयल-टाइम आलेख अनुशंसा इंजन बनाएं

आवश्यकताएँ

• Node.js 18 या बाद का संस्करण
• एक अपस्टैश खाता
• एक OpenAI खाता
• एक Fly.io खाता

टेक स्टैक

कदम

• एक OpenAI टोकन जेनरेट करें
• एक अपस्टैश वेक्टर इंडेक्स बनाएं
• प्रोजेक्ट सेट करें
• OpenAI API क्लाइंट को त्वरित करें
• OpenAI API एंबेडिंग क्लाइंट बनाएं
• अपस्टैश वेक्टर क्लाइंट बनाएं
• एक कॉन्टेक्स्ट एपीआई एंडपॉइंट बनाएं
• चैट एपीआई एंडपॉइंट बनाएं
• Fly.io पर तैनात करें
• संदर्भ
• निष्कर्ष

OpenAI टोकन जेनरेट करें

एक अपस्टैश वेक्टर इंडेक्स बनाएं

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

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

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

pnpm run build && pnpm run start

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,
})

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

// 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,
})

अपस्टैश वेक्टर क्लाइंट बनाएं

// 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 })

एक कॉन्टेक्स्ट एपीआई एंडपॉइंट बनाएं

// 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))
 }
}

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

चैट एपीआई एंडपॉइंट बनाएं

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

// 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
}

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

• चैटबॉट को 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) => {
 // ...
 
 // 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)
}
 

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

• डॉकरफ़ाइल
• fly.toml
• .dockerignore

# 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

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

संदर्भ

• गिटहब रिपॉजिटरी
• लैंगचेन के साथ अपस्टैश वेक्टर स्टोर एकीकरण
• OpenAI के चैट समापन एपीआई में सिस्टम निर्देश
• LangChain में Cheerio का उपयोग करके वेबपेजों से डेटा लोड करें
• रिएक्ट ऐप्स में AI चैट UI बनाना

निष्कर्ष