परिचय

आज की AI प्रगति के साथ, चैटबॉट बनाने के लिए अपने कंप्यूटर पर एक जेनरेटिव AI मॉडल सेटअप करना आसान है।

इस लेख में हम देखेंगे कि आप ओलामा और नेक्स्ट.जेएस का उपयोग करके अपने सिस्टम पर एक चैटबॉट कैसे सेटअप कर सकते हैं

सेटअप ओलामा

आइए अपने सिस्टम पर ओलामा को स्थापित करके शुरुआत करें। ollama.com पर जाएँ और इसे अपने OS के लिए डाउनलोड करें। यह हमें टर्मिनल/कमांड प्रॉम्प्ट में ओलामा कमांड का उपयोग करने की अनुमति देगा।

कमांड ollama -v का उपयोग करके ओलामा संस्करण की जाँच करें
ओलामा लाइब्रेरी पेज पर मॉडलों की सूची देखें।

एक मॉडल डाउनलोड करें और चलाएं

किसी मॉडल को डाउनलोड करने और चलाने के लिए, कमांड ओलामा रन
चलाएं उदाहरण: ओलामा रन llama3.1 या ओलामा रन जेम्मा2

आप सीधे टर्मिनल में मॉडल के साथ चैट कर पाएंगे।

वेब एप्लिकेशन सेटअप करें

Next.js के लिए बुनियादी सेटअप

• Node.js का नवीनतम संस्करण डाउनलोड और इंस्टॉल करें
• वांछित फ़ोल्डर पर नेविगेट करें और Next.js प्रोजेक्ट जेनरेट करने के लिए npx create-next-app@latest चलाएं।
• यह बॉयलरप्लेट कोड उत्पन्न करने के लिए कुछ प्रश्न पूछेगा। इस ट्यूटोरियल के लिए, हम सब कुछ डिफ़ॉल्ट रखेंगे।
• अपनी पसंद के कोड संपादक में नव निर्मित प्रोजेक्ट खोलें। हम वीएस कोड का उपयोग करने जा रहे हैं।

निर्भरताएँ स्थापित करना

कुछ एनपीएम पैकेज हैं जिन्हें ओलामा का उपयोग करने के लिए स्थापित करने की आवश्यकता है।

1. एआई वर्सेल से।
2. ओलामा ओलामा जावास्क्रिप्ट लाइब्रेरी आपके जावास्क्रिप्ट प्रोजेक्ट को ओलामा के साथ एकीकृत करने का सबसे आसान तरीका प्रदान करती है।
3. ओलामा-एआई-प्रदाता एआई और ओलामा को एक साथ जोड़ने में मदद करता है।
4. रिएक्ट-मार्कडाउन चैट परिणाम मार्कडाउन शैली में स्वरूपित किए जाएंगे, मार्कडाउन को पार्स करने के लिए हम रिएक्ट-मार्कडाउन पैकेज का उपयोग करने जा रहे हैं।

इन निर्भरताओं को स्थापित करने के लिए npm i ai ollama ollama-ai-provider चलाएँ।

चैट पेज बनाएं

app/src के अंतर्गत page.tsx नाम की एक फ़ाइल है।

आइए इसमें सब कुछ हटा दें और बुनियादी कार्यात्मक घटक से शुरू करें:

src/app/page.tsx

export default function Home() {
  return (
    

        {/* Code here... */}
    
  );
}

आइए एआई/रिएक्ट और रिएक्ट-मार्कडाउन से यूज़चैट हुक आयात करके शुरुआत करें

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

चूंकि हम एक हुक का उपयोग कर रहे हैं, हमें इस पृष्ठ को क्लाइंट घटक में परिवर्तित करने की आवश्यकता है।

टिप: आप चैट के लिए एक अलग घटक बना सकते हैं और क्लाइंट घटक उपयोग को सीमित करने के लिए इसे पेज.tsx में कॉल कर सकते हैं।

घटक में यूज़चैट हुक से संदेश, इनपुट, हैंडलइनपुटचेंज और हैंडलसबमिट प्राप्त करें।

    const { messages, input, handleInputChange, handleSubmit } = useChat();

जेएसएक्स में, बातचीत शुरू करने के लिए उपयोगकर्ता से इनपुट प्राप्त करने के लिए एक इनपुट फॉर्म बनाएं।

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

हम संदेश सरणी के माध्यम से लूपिंग करके संदेशों को प्रदर्शित कर सकते हैं।

    messages.map((m, i) => (
{m}
)

प्रेषक की भूमिका के आधार पर स्टाइल संस्करण इस तरह दिखता है:

  

    

      {messages.length ? (
        messages.map((m, i) => {
          return m.role === "user" ? (
            

              You
              

                {m.content}
            
          ) : (
            

              AI
              

                {m.content}
            
          );
        })
      ) : (
        

          
Local AI Chat
        
      )}
    
  

आइए पूरी फ़ाइल पर एक नज़र डालें
src/app/page.tsx

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

export default function Home() {
    const { messages, input, handleInputChange, handleSubmit } = useChat();
    return (
        

              

                
            
        
    );
}

इसके साथ, फ्रंटएंड भाग पूरा हो गया है। अब एपीआई को संभालते हैं।

एपीआई को संभालना

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

src/app/api/chat/route.ts

import { createOllama } from "ollama-ai-provider";
import { streamText } from "ai";

const ollama = createOllama();

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: ollama("llama3.1"),
    messages,
  });
  return result.toDataStreamResponse();
}

उपरोक्त कोड मूल रूप से डेटा को प्रतिक्रिया के रूप में स्ट्रीम करने के लिए ओलामा और वर्सेल एआई का उपयोग कर रहा है।

• createOllama ओलामा का एक उदाहरण बनाता है जो सिस्टम पर स्थापित मॉडल के साथ संचार करेगा।
• POST फ़ंक्शन पोस्ट विधि के साथ /api/chat एंडपॉइंट पर रूट हैंडलर है।
• अनुरोध के मुख्य भाग में पिछले सभी संदेशों की सूची शामिल है। इसलिए इसे सीमित करना एक अच्छा विचार है अन्यथा समय के साथ प्रदर्शन ख़राब हो जाएगा। इस उदाहरण में, ओलामा फ़ंक्शन संदेश सरणी के आधार पर प्रतिक्रिया उत्पन्न करने के लिए मॉडल के रूप में "llama3.1" लेता है।

आपके सिस्टम पर जेनरेटिव एआई

सर्वर को डेवलपमेंट मोड में शुरू करने के लिए npm run dev चलाएँ।
परिणाम देखने के लिए ब्राउज़र खोलें और लोकलहोस्ट:3000 पर जाएं।
यदि सब कुछ ठीक से कॉन्फ़िगर किया गया है, तो आप अपने स्वयं के चैटबॉट से बात करने में सक्षम होंगे।

आप यहां स्रोत कोड पा सकते हैं: https://github.com/parasbansal/ai-chat

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