البرنامج التعليمي لبوت اقتراح الأفلام

سيرشدك هذا البرنامج التعليمي إلى كيفية إعداد روبوت لاقتراح الأفلام يستخدم اللغة الطبيعية لاكتشاف حالتك المزاجية وتفضيلات النوع لاقتراح الأفلام وفقًا لذلك.

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 لتمكين الذكاء الاصطناعي من جلب الأفلام وعرضها للمستخدم. قم بإرجاع JSX التالي:

يا هلا! ؟ اكتمل روبوت اقتراحات الأفلام.

إذا أعجبك المشروع، فأظهر بعض الدعم للمشروع من خلال تمييز المستودع بنجمة.

⭐ بوت ستار لاقتراحات الأفلام

يمكنك أيضًا متابعة Copilotkit على مؤشر X الخاص بهم وتمييز الريبو الخاص بهم بنجمة أيضًا.

⭐ ستار مساعد الطيار

؟ اتبع مساعد الطيار