Buat Bot Cadangan Filem

Tutorial Bot Cadangan Filem

Tutorial ini akan membimbing anda melalui penyediaan bot cadangan filem yang menggunakan bahasa semula jadi untuk mengesan mood dan pilihan genre anda untuk mencadangkan filem dengan sewajarnya.

1. Sediakan Projek Next.js

Anda boleh menyediakan projek Next.js dan kemudian menambah Shadcn di atasnya, atau anda boleh menggunakan arahan:

npx shadcn@latest init

Ini akan memulakan kedua-dua projek Next.js dan Shadcn. ?

2. Sediakan CopilotKit

Gunakan arahan berikut untuk memasang pakej yang diperlukan:

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

Seterusnya, tambahkan titik akhir hujung belakang /api/copilotkit dengan kod berikut:

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

3. Tambah Tindakan Pelayan

Untuk melengkapkan persediaan bahagian belakang, kami hanya perlu menambah satu tindakan pelayan. Cipta fail berikut:

// 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 [];
    }
}

4. Bina Bahagian Hadapan

Dengan bahagian belakang sedia, kami kini perlu membina bahagian hadapan untuk apl ini.

Tambah Komponen Shadcn

Jalankan arahan berikut untuk menambah komponen yang diperlukan:

npx shadcn@latest add card badge

Selain itu, tambahkan komponen pemutar.

Kemas kini Komponen Halaman

Sekarang, dalam src/app/page.tsx, import komponen dan cangkuk yang diperlukan:

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";

Tentukan Jenis Filem

Seterusnya, tentukan jenis Filem:

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

Laksanakan Komponen Halaman

Gunakan cangkuk useCopilotAction untuk membolehkan AI mengambil filem dan memaparkannya kepada pengguna. Kembalikan JSX berikut:

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

Hore! ? Bot Cadangan Filem selesai.

Jika anda menyukai projek itu, tunjukkan sedikit sokongan kepada projek itu dengan membintangi repositori.

⭐ Bintangkan bot cadangan filem

Anda juga boleh mengikuti Copilotkit pada pemegang X mereka dan membintangi repo mereka juga.

⭐ Star Copilotkit

? Ikuti Copilotkit

Atas ialah kandungan terperinci Buat Bot Cadangan Filem. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!