connect generate-video-panel to backend api

components/layout/SidebarList.jsx

@@ -60,8 +60,8 @@ export default function SidebarList({ filters, setFilters }) {
           <SidebarItem
             icon={CiVideoOn}
             label="CogVideo + LoRA"
-            name={"cogvideo"}
+            name={"cogvideo_lora"}
-            active={filters?.tab_menu == "cogvideo" ? true : false}
+            active={filters?.tab_menu == "cogvideo_lora" ? true : false}
             filters={filters}
             setFilters={setFilters}
           />

components/tabs/textImagePanel.js

@@ -159,7 +159,13 @@ export default function TextImagePanel({ filters }) {
         </HStack>
         <Textarea bgColor={"white"} {...register("prompt")} />
       </FormControl>
-      <Button p={"20px"} colorScheme="pink" leftIcon={<FaPlay />} type="submit">
+      <Button
+        p={"20px"}
+        colorScheme="pink"
+        leftIcon={<FaPlay />}
+        type="submit"
+        isLoading={isGeneratingImage}
+      >
         اجرا
       </Button>
       <Divider my={"20px"} borderColor={"gray.300"} />

components/tabs/textVideoPanel.js

@@ -22,12 +22,35 @@ import { TbPrompt } from "react-icons/tb";
 import { FaDraft2Digital, FaPlay } from "react-icons/fa";
 import { useForm } from "react-hook-form";
 import ResultBox from "../ui/ResultBox";
+import axiosInstance, { baseUrl } from "@/lib/api";
+import useSWRMutation from "swr/mutation";
+import { useState } from "react";
 
-export default function TextVideoPanel() {
+const modelsDic = {
+  cogvideo_base: "base",
+  cogvideo_lora: "lora",
+};
+
+const postRequest = async (url, { arg }) => {
+  const response = await axiosInstance.post(baseUrl + url, arg);
+  return response?.data;
+};
+
+export default function TextVideoPanel({ filters }) {
   const { register, handleSubmit } = useForm();
+  const [videos, setVideos] = useState([]);
 
-  const addSubmit = (e) => {
+  const { trigger: triggerGenerateVideo, isMutating: isGeneratingVideo } =
-    console.log(e);
+    useSWRMutation(
+      `/content/cogvideo/${modelsDic[filters?.tab_menu]}`,
+      postRequest,
+      {
+        onSuccess: (data) => setVideos(data?.videos),
+      },
+    );
+
+  const onSubmit = (data) => {
+    triggerGenerateVideo(data);
   };
 
   return (
@@ -38,7 +61,7 @@ export default function TextVideoPanel() {
       alignItems="start"
       overflowY="auto"
       as={"form"}
-      onSubmit={handleSubmit(addSubmit)}
+      onSubmit={handleSubmit(onSubmit)}
     >
       {" "}
       <HStack>
@@ -55,11 +78,11 @@ export default function TextVideoPanel() {
             />
             <FormLabel>تعداد فریم ها:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("frames")} />
+          <Input bgColor={"white"} {...register("num_frames")} />
         </FormControl>
         <FormControl as={VStack} alignItems={"start"}>
           <FormLabel>seed:</FormLabel>
-          <Input bgColor={"white"} />
+          <Input bgColor={"white"} {...register("seed")} />
         </FormControl>
 
         <FormControl as={VStack} alignItems={"start"}>
@@ -75,7 +98,7 @@ export default function TextVideoPanel() {
             />
             <FormLabel>مقیاس راهنمایی:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("scale")} />
+          <Input bgColor={"white"} {...register("guidance_scale")} />
         </FormControl>
         <FormControl as={VStack} alignItems={"start"}>
           <HStack alignItems={"start"}>
@@ -88,9 +111,9 @@ export default function TextVideoPanel() {
               border={"1px"}
               borderColor={"gray.300"}
             />
-            <FormLabel>تعداد:</FormLabel>
+            <FormLabel>تعداد مراحل استنتاج:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("number")} />
+          <Input bgColor={"white"} {...register("num_inference_steps")} />
         </FormControl>
       </HStack>
       <FormControl as={VStack} alignItems={"start"}>
@@ -108,7 +131,13 @@ export default function TextVideoPanel() {
         </HStack>
         <Textarea bgColor={"white"} {...register("prompt")} />
       </FormControl>
-      <Button p={"20px"} colorScheme="pink" leftIcon={<FaPlay />} type="submit">
+      <Button
+        p={"20px"}
+        colorScheme="pink"
+        leftIcon={<FaPlay />}
+        type="submit"
+        isLoading={isGeneratingVideo}
+      >
         اجرا
       </Button>
       <Divider my={"20px"} borderColor={"gray.300"} />
@@ -123,7 +152,7 @@ export default function TextVideoPanel() {
         </Table>
       </TableContainer>
       <Divider my={"20px"} borderColor={"gray.300"} />
-      <ResultBox type="video" />
+      <ResultBox type="video" loading={isGeneratingVideo} resultData={videos} />
     </VStack>
   );
 }

components/ui/ResultBox.jsx

@@ -95,11 +95,11 @@ function ResultBox({
           </ReactMarkdown>
         )}
 
-        {type === "image" && loading && (
+        {(type === "image" || type === "video") && loading && (
           <Box w="100%" display="flex" justifyContent="center">
             <VStack spacing={3} w="100%" maxW="600px">
               <Text fontSize="sm" color="gray.600" textAlign="center">
-                در حال تولید تصویر...
+                در حال تولید {type === "image" ? "تصویر" : "ویدئو"}...
               </Text>
 
               <AspectRatio
@@ -133,6 +133,19 @@ function ResultBox({
             </AspectRatio>
           </Box>
         )}
+
+        {type === "video" && !loading && resultData?.[0] && (
+          <Box w={"100%"} display={"flex"} justifyContent={"center"}>
+            <Box h="auto" transformOrigin="center center">
+              <video
+                src={resultData?.[0]}
+                width="720px"
+                height="480px"
+                controls={true}
+              />
+            </Box>
+          </Box>
+        )}
       </Box>
     </Box>
   );

pages/index.js

@@ -182,7 +182,7 @@ export default function Home() {
                 <TextImagePanel filters={filters} />
               </TabPanel>
               <TabPanel>
-                <TextVideoPanel />
+                <TextVideoPanel filters={filters} />
               </TabPanel>
               <TabPanel>مرج نهایی</TabPanel>
             </TabPanels>