創作電影推薦機器人

電影建議機器人教學

本教學將引導您設定一個影片推薦機器人，該機器人使用自然語言來偵測您的心情和類型偏好，從而相應地推薦電影。

1. 設定 Next.js 項目

您可以建立 Next.js 項目，然後在其上新增 Shadcn，或者您可以使用以下命令：

npx shadcn@latest init

這將初始化 Next.js 專案和 Shadcn。 ？

2. 設定 CopilotKit

使用以下指令安裝所需的軟體套件：

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

接下來，使用以下程式碼新增 /api/copilotkit 後端端點：

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. 新增伺服器操作

要完成後端設置，我們只需要新增一個伺服器操作。建立以下檔案：

// 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. 建構前端

後端準備就緒後，我們現在需要為此應用程式建立前端。

新增 Shadcn 組件

執行以下命令以新增必要的元件：

npx shadcn@latest add card badge

此外，加入微調器組件。

更新頁面元件

現在，在 src/app/page.tsx 中，導入必要的元件和鉤子：

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

定義電影類型

接下來，定義電影類型：

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

實現頁面元件

使用 useCopilotAction 掛鉤使 AI 能夠獲取影片並將其顯示給使用者。返回以下 JSX：

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

萬歲！ ？電影建議機器人已完成。

如果您喜歡該項目，請透過為儲存庫加註星標來表示對該項目的支持。

⭐ 明星電影推薦機器人

您也可以在 Copilotkit 的 X 手柄上關注他們，並為他們的程式碼庫加註星標。

⭐ 明星副駕駛套件

？關注副駕駛套件

以上是創作電影推薦機器人的詳細內容。更多資訊請關注PHP中文網其他相關文章！