update

components/layout/SidebarList.jsx

@@ -27,7 +27,7 @@ export default function SidebarList({ filters, setFilters }) {
           />
         </>
       )}
-      {filters?.tab === 1 && (
+      {filters?.tab === 1 && filters?.model_name === 0 && (
         <>
           <SidebarItem
             icon={FiImage}
@@ -47,6 +47,34 @@ export default function SidebarList({ filters, setFilters }) {
           />
         </>
       )}
+      {filters?.tab === 1 && filters?.model_name === 1 && (
+        <>
+          <SidebarItem
+            icon={FiImage}
+            label="Qwen"
+            name={"qwen"}
+            active={filters?.tab_menu == "qwen" ? true : false}
+            filters={filters}
+            setFilters={setFilters}
+          />
+          <SidebarItem
+            icon={FiImage}
+            label="Fluxd"
+            name={"fluxd"}
+            active={filters?.tab_menu == "fluxd" ? true : false}
+            filters={filters}
+            setFilters={setFilters}
+          />
+          <SidebarItem
+            icon={FiImage}
+            label="Fluxb"
+            name={"fluxb"}
+            active={filters?.tab_menu == "fluxb" ? true : false}
+            filters={filters}
+            setFilters={setFilters}
+          />
+        </>
+      )}
       {filters?.tab === 2 && (
         <>
           <SidebarItem

components/tabs/textImagePanel.js

@@ -21,7 +21,7 @@ import { RxWidth } from "react-icons/rx";
 import { BsBarChartSteps } from "react-icons/bs";
 import { TbPrompt } from "react-icons/tb";
 import { FaDraft2Digital, FaPlay } from "react-icons/fa";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import ResultBox from "../ui/ResultBox";
 import axiosInstance, { baseUrl } from "@/lib/api";
@@ -38,11 +38,19 @@ const postRequest = async (url, { arg }) => {
 };
 
 export default function TextImagePanel({ filters }) {
-  const { register, handleSubmit, watch } = useForm("");
+  const { register, handleSubmit, watch, setValue } = useForm("");
+  const {
+    register: registerRokn,
+    handleSubmit: handleSubmitRokn,
+    watch: watchRokn,
+    setValue: setValueRokn,
+  } = useForm("");
+
   const [images, setImages] = useState([]);
 
-  const width = watch("width");
+  const width = filters?.model_name === 0 ? watch("width") : watchRokn("width");
-  const height = watch("height");
+  const height =
+    filters?.model_name === 0 ? watch("height") : watchRokn("height");
 
   const { trigger: triggerGenerateImage, isMutating: isGeneratingImage } =
     useSWRMutation(
@@ -53,10 +61,39 @@ export default function TextImagePanel({ filters }) {
       },
     );
 
+  const {
+    trigger: triggerGenerateRoknImage,
+    isMutating: isGeneratingRoknImage,
+  } = useSWRMutation(
+    `/content/rokn/t2i?model_key=${filters?.tab_menu}`,
+    postRequest,
+    {
+      onSuccess: (data) => console.log(data),
+    },
+  );
+
   const onSubmit = (data) => {
-    triggerGenerateImage(data);
+    if (filters?.model_name === 0) triggerGenerateImage(data);
+    else triggerGenerateRoknImage(data);
   };
 
+  useEffect(() => {
+    if (filters?.model_name === 0) {
+      setValue("height", 768);
+      setValue("width", 768);
+      setValue("seed", 42);
+      setValue("num_inference_steps", 60);
+      setValue("guidance_scale", 7);
+      setValue("prompt", "");
+    } else {
+      setValueRokn("height", 768);
+      setValueRokn("width", 768);
+      setValueRokn("steps", 10);
+      setValueRokn("preset", "");
+      setValue("prompt", "");
+    }
+  }, [filters?.model_name]);
+
   return (
     <VStack
       spacing={4}
@@ -65,7 +102,11 @@ export default function TextImagePanel({ filters }) {
       alignItems="start"
       overflowY="auto"
       as={"form"}
-      onSubmit={handleSubmit(onSubmit)}
+      onSubmit={
+        filters?.model_name === 0
+          ? handleSubmit(onSubmit)
+          : handleSubmitRokn(onSubmit)
+      }
     >
       {" "}
       <HStack>
@@ -82,12 +123,15 @@ export default function TextImagePanel({ filters }) {
             />
             <FormLabel>طول:</FormLabel>
           </HStack>
-          <Input
+          {filters?.model_name === 0 ? (
-            bgColor={"white"}
+            <Input bgColor={"white"} {...register("height")} type="number" />
-            {...register("height")}
+          ) : (
-            type="number"
+            <Input
-            defaultValue={768}
+              bgColor={"white"}
-          />
+              {...registerRokn("height")}
+              type="number"
+            />
+          )}
         </FormControl>
         <FormControl as={VStack} alignItems={"start"}>
           <HStack w={"100%"} alignItems={"start"}>
@@ -102,22 +146,18 @@ export default function TextImagePanel({ filters }) {
             />
             <FormLabel>عرض:</FormLabel>
           </HStack>
-          <Input
+          {filters?.model_name === 0 ? (
-            bgColor={"white"}
+            <Input bgColor={"white"} {...register("width")} type="number" />
-            {...register("width")}
+          ) : (
-            type="number"
+            <Input bgColor={"white"} {...registerRokn("width")} type="number" />
-            defaultValue={768}
+          )}
-          />
-        </FormControl>
-        <FormControl as={VStack} alignItems={"start"}>
-          <FormLabel>seed:</FormLabel>
-          <Input
-            bgColor={"white"}
-            {...register("seed")}
-            type="number"
-            defaultValue={42}
-          />
         </FormControl>
+        {filters?.model_name === 0 && (
+          <FormControl as={VStack} alignItems={"start"}>
+            <FormLabel>seed:</FormLabel>
+            <Input bgColor={"white"} {...register("seed")} type="number" />
+          </FormControl>
+        )}
         <FormControl as={VStack} alignItems={"start"}>
           <HStack alignItems={"start"}>
             <Icon
@@ -131,33 +171,54 @@ export default function TextImagePanel({ filters }) {
             />
             <FormLabel>تعداد مراحل استنتاج:</FormLabel>
           </HStack>
-          <Input
+          {filters?.model_name === 0 ? (
-            bgColor={"white"}
+            <Input
-            {...register("num_inference_steps")}
+              bgColor={"white"}
-            type="number"
+              {...register("num_inference_steps")}
-            defaultValue={60}
+              type="number"
-          />
-        </FormControl>
-        <FormControl as={VStack} alignItems={"start"}>
-          <HStack alignItems={"start"}>
-            <Icon
-              as={FaDraft2Digital}
-              bgColor={"gray.200"}
-              borderRadius={"50%"}
-              p={"5px"}
-              fontSize={"25px"}
-              border={"1px"}
-              borderColor={"gray.300"}
             />
-            <FormLabel>مقیاس راهنمایی:</FormLabel>
+          ) : (
-          </HStack>
+            <Input bgColor={"white"} {...registerRokn("steps")} type="number" />
-          <Input
+          )}
-            bgColor={"white"}
-            {...register("guidance_scale")}
-            type="number"
-            defaultValue={7}
-          />
         </FormControl>
+        {filters?.model_name === 0 && (
+          <FormControl as={VStack} alignItems={"start"}>
+            <HStack alignItems={"start"}>
+              <Icon
+                as={FaDraft2Digital}
+                bgColor={"gray.200"}
+                borderRadius={"50%"}
+                p={"5px"}
+                fontSize={"25px"}
+                border={"1px"}
+                borderColor={"gray.300"}
+              />
+              <FormLabel>مقیاس راهنمایی:</FormLabel>
+            </HStack>
+            <Input
+              bgColor={"white"}
+              {...register("guidance_scale")}
+              type="number"
+            />
+          </FormControl>
+        )}
+        {filters?.model_name === 1 && (
+          <FormControl as={VStack} alignItems={"start"}>
+            <HStack alignItems={"start"}>
+              <Icon
+                as={FaDraft2Digital}
+                bgColor={"gray.200"}
+                borderRadius={"50%"}
+                p={"5px"}
+                fontSize={"25px"}
+                border={"1px"}
+                borderColor={"gray.300"}
+              />
+              <FormLabel>سبک تصویر:</FormLabel>
+            </HStack>
+            <Input bgColor={"white"} {...registerRokn("preset")} />
+          </FormControl>
+        )}
       </HStack>
       <FormControl as={VStack} alignItems={"start"}>
         <HStack alignItems={"start"}>
@@ -172,14 +233,18 @@ export default function TextImagePanel({ filters }) {
           />
           <FormLabel>پرامپت:</FormLabel>
         </HStack>
-        <Textarea bgColor={"white"} {...register("prompt")} />
+        {filters?.model_name === 0 ? (
+          <Textarea bgColor={"white"} {...register("prompt")} />
+        ) : (
+          <Textarea bgColor={"white"} {...registerRokn("prompt")} />
+        )}
       </FormControl>
       <Button
         p={"20px"}
         colorScheme="pink"
         leftIcon={<FaPlay />}
         type="submit"
-        isLoading={isGeneratingImage}
+        isLoading={isGeneratingImage || isGeneratingRoknImage}
         alignSelf={"end"}
       >
         اجرا

pages/index.js

@@ -40,9 +40,10 @@ export default function Home() {
 
   useEffect(() => {
     if (filters?.tab == 0) setFilters({ tab_menu: "gemma_base" });
-    else if (filters?.tab == 1) setFilters({ tab_menu: "sdxl" });
+    else if (filters?.tab == 1 && filters?.model_name == 0) setFilters({ tab_menu: "sdxl" });
+    else if (filters?.tab == 1 && filters?.model_name == 1) setFilters({ tab_menu: "qwen" });
     else if (filters?.tab == 2) setFilters({ tab_menu: "cogvideo_base" });
-  }, [filters?.tab]);
+  }, [filters?.tab, filters?.model_name]);
 
   return (
     <Flex direction={"column"} minH="100vh" bg="gray.50" dir="rtl">