Einführung

Mit den heutigen KI-Fortschritten ist es einfach, ein generatives KI-Modell auf Ihrem Computer einzurichten, um einen Chatbot zu erstellen.

In diesem Artikel erfahren Sie, wie Sie mithilfe von Ollama und Next.js einen Chatbot auf Ihrem System einrichten können.

Ollama einrichten

Beginnen wir mit der Einrichtung von Ollama auf unserem System. Besuchen Sie ollama.com und laden Sie es für Ihr Betriebssystem herunter. Dadurch können wir den Befehl ollama im Terminal/in der Eingabeaufforderung verwenden.

Überprüfen Sie die Ollama-Version mit dem Befehl ollama -v
Schauen Sie sich die Liste der Modelle auf der Ollama-Bibliotheksseite an.

Laden Sie ein Modell herunter und führen Sie es aus

Um ein Modell herunterzuladen und auszuführen, führen Sie den Befehl ollama run aus
Beispiel: ollama run llama3.1 oder ollama run gemma2

Sie können direkt im Terminal mit dem Model chatten.

Webanwendung einrichten

Grundeinrichtung für Next.js

• Laden Sie die neueste Version von Node.js herunter und installieren Sie sie
• Navigieren Sie zu einem gewünschten Ordner und führen Sie npx create-next-app@latest aus, um das Next.js-Projekt zu generieren.
• Es werden einige Fragen gestellt, um Boilerplate-Code zu generieren. Für dieses Tutorial behalten wir die Standardeinstellungen bei.
• Öffnen Sie das neu erstellte Projekt in einem Code-Editor Ihrer Wahl. Wir werden VS-Code verwenden.

Abhängigkeiten installieren

Es müssen nur wenige NPM-Pakete installiert werden, um Ollama zu verwenden.

1. ai aus vercel.
2. Ollama Die Ollama-JavaScript-Bibliothek bietet die einfachste Möglichkeit, Ihr JavaScript-Projekt in Ollama zu integrieren.
3. Ollama-ai-provider hilft dabei, Ai und Ollama miteinander zu verbinden.
4. React-Markdown-Chat-Ergebnisse werden im Markdown-Stil formatiert. Um Markdown zu analysieren, verwenden wir das React-Markdown-Paket.

Um diese Abhängigkeiten zu installieren, führen Sie npm i ai ollama ollama-ai-provider aus.

Chat-Seite erstellen

Unter app/src gibt es eine Datei mit dem Namen page.tsx.

Lassen Sie uns alles darin entfernen und mit der grundlegenden Funktionskomponente beginnen:

src/app/page.tsx

export default function Home() {
  return (
    

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

Beginnen wir mit dem Importieren des useChat-Hooks aus ai/react und React-Markdown

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

Da wir einen Hook verwenden, müssen wir diese Seite in eine Client-Komponente konvertieren.

Tipp: Sie können eine separate Komponente für den Chat erstellen und diese in der page.tsx aufrufen, um die Nutzung der Client-Komponenten einzuschränken.

In der Komponente werden Nachrichten, Eingaben, handleInputChange und handleSubmit vom useChat-Hook abgerufen.

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

Erstellen Sie in JSX ein Eingabeformular, um die Benutzereingaben zu erhalten und eine Konversation zu initiieren.

Das Gute daran ist, dass wir den Handler nicht korrigieren oder einen Status für den Eingabewert beibehalten müssen, der useChat-Hook stellt ihn uns zur Verfügung.

Wir können die Nachrichten anzeigen, indem wir das Nachrichtenarray durchlaufen.

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

Die gestaltete Version basierend auf der Rolle des Absenders sieht folgendermaßen aus:

  

    

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

              You
              

                {m.content}
            
          ) : (
            

              AI
              

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

          
Local AI Chat
        
      )}
    
  

Sehen wir uns die gesamte Datei an
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 (
        

              

                
            
        
    );
}

Damit ist der Frontend-Teil abgeschlossen. Kommen wir nun zur API.

Handhabungs-API

Beginnen wir mit der Erstellung von route.ts in app/api/chat.
Basierend auf der Namenskonvention von Next.js können wir die Anfragen auf dem Endpunkt localhost:3000/api/chat verarbeiten.

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();
}

Der obige Code verwendet grundsätzlich Ollama und Vercel AI, um die Daten als Antwort zurückzustreamen.

• createOllama erstellt eine Instanz des Ollama, die mit dem auf dem System installierten Modell kommuniziert.
• Die POST-Funktion ist der Routenhandler auf dem /api/chat-Endpunkt mit der Post-Methode.
• Der Anfragetext enthält die Liste aller vorherigen Nachrichten. Daher ist es eine gute Idee, die Leistung zu begrenzen, da sonst die Leistung mit der Zeit nachlässt. In diesem Beispiel verwendet die ollama-Funktion „llama3.1“ als Modell, um die Antwort basierend auf dem Nachrichtenarray zu generieren.

Generative KI auf Ihrem System

Führen Sie npm run dev aus, um den Server im Entwicklungsmodus zu starten.
Öffnen Sie den Browser und gehen Sie zu localhost:3000, um die Ergebnisse anzuzeigen.
Wenn alles richtig konfiguriert ist, können Sie mit Ihrem eigenen Chatbot sprechen.

Den Quellcode finden Sie hier: https://github.com/parasbansal/ai-chat

Lassen Sie mich wissen, wenn Sie in den Kommentaren Fragen haben, ich werde versuchen, diese zu beantworten.