update

.env

@@ -1 +1 @@
-NEXT_PUBLIC_BASE_URL=http://192.168.10.87:8070/generative
+NEXT_PUBLIC_BASE_URL=https://api.d.aiengines.ir/generative_api

components/tabs/textImagePanel.js

@@ -24,15 +24,37 @@ import { FaDraft2Digital, FaPlay } from "react-icons/fa";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import ResultBox from "../ui/ResultBox";
+import axiosInstance, { baseUrl } from "@/lib/api";
+import useSWRMutation from "swr/mutation";
 
-export default function TextImagePanel() {
-  const { register, handleSubmit } = useForm("");
+const modelsDic = {
+  sdxl: "base",
+  sdxl_lora: "lora",
+};
 
-  const [height, setHeight] = useState("");
-  const [width, setWidth] = useState("");
+const postRequest = async (url, { arg }) => {
+  const response = await axiosInstance.post(baseUrl + url, arg);
+  return response?.data;
+};
 
-  const addSubmit = (e) => {
-    console.log(e);
+export default function TextImagePanel({ filters }) {
+  const { register, handleSubmit, watch } = useForm("");
+  const [images, setImages] = useState([]);
+
+  const width = watch("width");
+  const height = watch("height");
+
+  const { trigger: triggerGenerateImage, isMutating: isGeneratingImage } =
+    useSWRMutation(
+      `/content/sdxl/${modelsDic[filters?.tab_menu]}`,
+      postRequest,
+      {
+        onSuccess: (data) => setImages(data?.images),
+      },
+    );
+
+  const onSubmit = (data) => {
+    triggerGenerateImage(data);
   };
 
   return (
@@ -43,7 +65,7 @@ export default function TextImagePanel() {
       alignItems="start"
       overflowY="auto"
       as={"form"}
-      onSubmit={handleSubmit(addSubmit)}
+      onSubmit={handleSubmit(onSubmit)}
     >
       {" "}
       <HStack>
@@ -60,7 +82,7 @@ export default function TextImagePanel() {
             />
             <FormLabel>طول:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("height")} />
+          <Input bgColor={"white"} {...register("height")} type="number" />
         </FormControl>
         <FormControl as={VStack} alignItems={"start"}>
           <HStack w={"100%"} alignItems={"start"}>
@@ -75,11 +97,11 @@ export default function TextImagePanel() {
             />
             <FormLabel>عرض:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("width")} />
+          <Input bgColor={"white"} {...register("width")} type="number" />
         </FormControl>
         <FormControl as={VStack} alignItems={"start"}>
           <FormLabel>seed:</FormLabel>
-          <Input bgColor={"white"} {...register("seed")} />
+          <Input bgColor={"white"} {...register("seed")} type="number" />
         </FormControl>
       </HStack>
       <HStack>
@@ -96,7 +118,11 @@ export default function TextImagePanel() {
             />
             <FormLabel>تعداد مراحل استنتاج:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("inference")} />
+          <Input
+            bgColor={"white"}
+            {...register("num_inference_steps")}
+            type="number"
+          />
         </FormControl>
         <FormControl as={VStack} alignItems={"start"}>
           <HStack alignItems={"start"}>
@@ -109,9 +135,13 @@ export default function TextImagePanel() {
               border={"1px"}
               borderColor={"gray.300"}
             />
-            <FormLabel>تعداد:</FormLabel>
+            <FormLabel>مقیاس راهنمایی:</FormLabel>
           </HStack>
-          <Input bgColor={"white"} {...register("number")} />
+          <Input
+            bgColor={"white"}
+            {...register("guidance_scale")}
+            type="number"
+          />
         </FormControl>
       </HStack>
       <FormControl as={VStack} alignItems={"start"}>
@@ -144,7 +174,13 @@ export default function TextImagePanel() {
         </Table>
       </TableContainer>
       <Divider my={"20px"} borderColor={"gray.300"} />
-      <ResultBox type="image" />
+      <ResultBox
+        type="image"
+        loading={isGeneratingImage}
+        resultData={images}
+        imgWidth={width}
+        imgHeight={height}
+      />
     </VStack>
   );
 }

components/ui/ResultBox.jsx

@@ -1,4 +1,14 @@
-import { Box, Heading, HStack, Icon, Text } from "@chakra-ui/react";
+import {
+  AspectRatio,
+  Box,
+  Heading,
+  HStack,
+  Icon,
+  Image,
+  Skeleton,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { FaBolt } from "react-icons/fa";
 import ChatTypingLoader from "../loading/ChatTypingLoader";
 import {
@@ -15,7 +25,13 @@ const iconsDic = {
   video: IoVideocamOutline,
 };
 
-function ResultBox({ type = "llm", loading = false, resultData = "" }) {
+function ResultBox({
+  type = "llm",
+  loading = false,
+  resultData = "",
+  imgWidth,
+  imgHeight,
+}) {
   return (
     <Box
       w={"100%"}
@@ -46,7 +62,7 @@ function ResultBox({ type = "llm", loading = false, resultData = "" }) {
         <FaBolt color="purple" />
       </Box>
       <Box mt={4} mr={2} whiteSpace="pre-line">
-        {loading && (
+        {loading && type === "llm" && (
           <HStack
             w="100%"
             alignItems="center"
@@ -70,6 +86,31 @@ function ResultBox({ type = "llm", loading = false, resultData = "" }) {
             {resultData}
           </ReactMarkdown>
         )}
+
+        {type === "image" && loading && (
+          <VStack align="stretch" spacing={3}>
+            <Text fontSize="sm" color="gray.600">
+              در حال تولید تصویر...
+            </Text>
+
+            <Skeleton borderRadius="md" w={"100%"} h={"500px"} />
+          </VStack>
+        )}
+
+        {type === "image" && !loading && resultData?.[0] && (
+          <AspectRatio
+            ratio={imgWidth / imgHeight}
+            maxW={"500px"}
+            maxH={"500px"}
+            // _before={{ paddingBottom: "70%" }}
+          >
+            <Image
+              src={resultData?.[0]}
+              objectFit="contain"
+              borderRadius="md"
+            />
+          </AspectRatio>
+        )}
       </Box>
     </Box>
   );

pages/index.js

@@ -179,7 +179,7 @@ export default function Home() {
                 <LlmPanel filters={filters} />
               </TabPanel>
               <TabPanel>
-                <TextImagePanel />
+                <TextImagePanel filters={filters} />
               </TabPanel>
               <TabPanel>
                 <TextVideoPanel />