Créer un robot de suggestion de films-js tutoriel-php.cn

Créer un robot de suggestion de films

Barbara Streisand

Libérer： 2024-10-13 16:27:30

original

371 Les gens l'ont consulté

Create a Movie Suggestion Bot

Tutoriel du robot de suggestion de films

Ce didacticiel vous guidera dans la configuration d'un robot de suggestion de films qui utilise le langage naturel pour détecter votre humeur et vos préférences de genre afin de suggérer des films en conséquence.

1. Configurer un projet Next.js

Vous pouvez configurer un projet Next.js puis ajouter Shadcn par-dessus, ou vous pouvez utiliser la commande :

npx shadcn@latest init

Copier après la connexion

Cela initialisera à la fois le projet Next.js et Shadcn. ?

2. Configurer CopilotKit

Utilisez les commandes suivantes pour installer les packages requis :

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
npm install groq-sdk

Copier après la connexion

Ensuite, ajoutez le point de terminaison backend /api/copilotkit avec le code suivant :

import {
    CopilotRuntime,
    GroqAdapter,
    copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import Groq from "groq-sdk";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const groq = new Groq({ apiKey: process.env.GROQ_API_KEY }) as any;

const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({ groq, model: "llama3-groq-8b-8192-tool-use-preview" });

export const POST = async (req: NextRequest) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
        runtime: copilotKit,
        serviceAdapter,
        endpoint: "/api/copilotkit",
    });

    return handleRequest(req);
};

Copier après la connexion

3. Ajouter une action serveur

Pour terminer la configuration du backend, il nous suffit d'ajouter une action serveur. Créez le fichier suivant :

// src/actions/movies.ts
"use server"

export async function fetchMovies({ query }: { query: string }) {
    const API_KEY = process.env.OMDB_API_KEY;
    const URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=${encodeURIComponent(
        query
    )}`;

    try {
        const response = await fetch(URL);
        const result = await response.json();

        if (result && result.Search) {
            return result.Search;
        } else {
            return [];
        }
    } catch (error) {
        console.error("Error fetching movies:", error);
        return [];
    }
}

Copier après la connexion

4. Construisez le front-end

Le backend étant prêt, nous devons maintenant créer le frontend pour cette application.

Ajouter des composants Shadcn

Exécutez la commande suivante pour ajouter les composants nécessaires :

npx shadcn@latest add card badge

Copier après la connexion

Ajoutez également le composant spinner.

Mettre à jour le composant de page

Maintenant, dans src/app/page.tsx, importez les composants et hooks nécessaires :

import { fetchMovies } from "@/actions/movies";
import { Spinner } from "@/components/ui-expansions/spinner";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { useCopilotAction } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import { Film } from "lucide-react";
import Link from "next/link";

Copier après la connexion

Définir le type de film

Ensuite, définissez le type de film :

type Movie = {
  Title: string;
  Year: string;
  imdbID: string;
  Poster: string;
};

Copier après la connexion

Implémenter le composant de page

Utilisez le hook useCopilotAction pour permettre à l'IA de récupérer des films et de les afficher à l'utilisateur. Renvoyez le JSX suivant :

<div className="w-full h-screen">
      <CopilotChat
        className="w-full h-full"
        labels={{
          title: "Movie Suggestion Bot",
          initial: "Hello! ? What type of movie are you in the mood for?",
        }}
        instructions="No need to provide movie names unless no results are found. If the API returns movies, only those will be shown."
      />
</div>

Copier après la connexion

Hourra ! ? Le robot de suggestion de films est terminé.

Si vous avez aimé le projet, montrez votre soutien au projet en mettant en vedette le référentiel.

⭐ Bot de suggestion de film Star

Vous pouvez également suivre Copilotkit sur leur identifiant X et mettre également en vedette leur dépôt.

⭐ Kit Copilote Étoile

? Suivre Copilotkit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!