update

2026-03-16 17:49:09 +03:30 · 2026-03-16 17:49:09 +03:30 · 188257d8eb
commit 188257d8eb
parent 75600bcf62
3 changed files with 151 additions and 57 deletions
--- a/components/layout/SidebarList.jsx
+++ b/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
--- a/components/tabs/textImagePanel.js
+++ b/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 height = watch("height");
+  const width = filters?.model_name === 0 ? watch("width") : watchRokn("width");
+  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
-            bgColor={"white"}
-            {...register("height")}
-            type="number"
-            defaultValue={768}
-          />
+          {filters?.model_name === 0 ? (
+            <Input bgColor={"white"} {...register("height")} type="number" />
+          ) : (
+            <Input
+              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
-            bgColor={"white"}
-            {...register("width")}
-            type="number"
-            defaultValue={768}
-          />
-        </FormControl>
-        <FormControl as={VStack} alignItems={"start"}>
-          <FormLabel>seed:</FormLabel>
-          <Input
-            bgColor={"white"}
-            {...register("seed")}
-            type="number"
-            defaultValue={42}
-          />
+          {filters?.model_name === 0 ? (
+            <Input bgColor={"white"} {...register("width")} type="number" />
+          ) : (
+            <Input bgColor={"white"} {...registerRokn("width")} type="number" />
+          )}
        </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
-            bgColor={"white"}
-            {...register("num_inference_steps")}
-            type="number"
-            defaultValue={60}
-          />
-        </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"}
+          {filters?.model_name === 0 ? (
+            <Input
+              bgColor={"white"}
+              {...register("num_inference_steps")}
+              type="number"
            />
-            <FormLabel>مقیاس راهنمایی:</FormLabel>
-          </HStack>
-          <Input
-            bgColor={"white"}
-            {...register("guidance_scale")}
-            type="number"
-            defaultValue={7}
-          />
+          ) : (
+            <Input bgColor={"white"} {...registerRokn("steps")} type="number" />
+          )}
        </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"}
      >
        اجرا
--- a/pages/index.js
+++ b/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">