generative_front/components/tabs/textImagePanel.js

// components/PhoneInput.tsx
import {
  Box,
  Button,
  Divider,
  FormControl,
  FormLabel,
  HStack,
  Icon,
  Input,
  Select,
  Table,
  TableCaption,
  TableContainer,
  Tbody,
  Td,
  Text,
  Textarea,
  Th,
  Thead,
  Tr,
  VStack,
} from "@chakra-ui/react";
import { MdHeight } from "react-icons/md";
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 { useForm } from "react-hook-form";

export default function TextImagePanel() {
  const { register, handleSubmit } = useForm("");

  const [height, setHeight] = useState("");
  const [width, setWidth] = useState("");

  const addSubmit = (e) => {
    console.log(e);
  };

  return (
    <VStack
      spacing={4}
      w="100%"
      h="100%"
      alignItems="start"
      overflowY="auto"
      as={"form"}
      onSubmit={handleSubmit(addSubmit)}
    >
      {" "}
      <HStack>
        <FormControl as={VStack} alignItems={"start"}>
          <HStack w={"100%"} alignItems={"start"}>
            <Icon
              as={MdHeight}
              bgColor={"gray.200"}
              borderRadius={"50%"}
              p={"5px"}
              fontSize={"25px"}
              border={"1px"}
              borderColor={"gray.300"}
            />
            <FormLabel>طول</FormLabel>
          </HStack>
          <Input bgColor={"white"} {...register("height")} />
        </FormControl>
        <FormControl as={VStack} alignItems={"start"}>
          <HStack w={"100%"} alignItems={"start"}>
            <Icon
              as={RxWidth}
              bgColor={"gray.200"}
              borderRadius={"50%"}
              p={"5px"}
              fontSize={"25px"}
              border={"1px"}
              borderColor={"gray.300"}
            />
            <FormLabel>عرض</FormLabel>
          </HStack>
          <Input bgColor={"white"} {...register("width")} />
        </FormControl>
        <FormControl as={VStack} alignItems={"start"}>
          <FormLabel>seed</FormLabel>
          <Input bgColor={"white"} {...register("seed")} />
        </FormControl>
      </HStack>
      <HStack>
        <FormControl as={VStack} alignItems={"start"}>
          <HStack alignItems={"start"}>
            <Icon
              as={BsBarChartSteps}
              bgColor={"gray.200"}
              borderRadius={"50%"}
              p={"5px"}
              fontSize={"25px"}
              border={"1px"}
              borderColor={"gray.300"}
            />
            <FormLabel>تعداد مراحل استنتاج</FormLabel>
          </HStack>
          <Input bgColor={"white"} {...register("inference")} />
        </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"} {...register("number")} />
        </FormControl>
      </HStack>
      <FormControl as={VStack} alignItems={"start"}>
        <HStack alignItems={"start"}>
          <Icon
            as={TbPrompt}
            bgColor={"gray.200"}
            borderRadius={"50%"}
            p={"5px"}
            fontSize={"25px"}
            border={"1px"}
            borderColor={"gray.300"}
          />
          <FormLabel>پرامپت</FormLabel>
        </HStack>
        <Textarea bgColor={"white"} {...register("prompt")} />
      </FormControl>
      <Button p={"20px"} colorScheme="pink" leftIcon={<FaPlay />} type="submit">
        اجرا
      </Button>
      <Divider my={"20px"} />
      <FormControl
        as={HStack}
        w={"100%"}
        justifyContent={"space-between"}
        bgColor={"purple.50"}
        border={"1px"}
        borderColor={"gray.200"}
        p={"10px"}
        borderRadius={"10px"}
      >
        <FormLabel fontSize={"20px"}>پاسخ</FormLabel>
        <Box
          w={"200px"}
          h={"200px"}
          border={"1px"}
          borderColor={"gray.300"}
          borderRadius={"10px"}
          bgColor={"white"}
        ></Box>
      </FormControl>
      <Divider my={"20px"} />
      <TableContainer w={"100%"} mt={"50px"}>
        <Table>
          <Thead>
            <Tr>
              <Th fontSize={"20px"}>ردیف</Th>
            </Tr>
          </Thead>
          <Tbody></Tbody>
        </Table>
      </TableContainer>
      <Divider my={"20px"} />
      <FormControl
        bgColor={"purple.50"}
        border={"1px"}
        borderColor={"gray.200"}
        p={"10px"}
        borderRadius={"10px"}
      >
        <FormLabel fontSize={"20px"}>نتیجه</FormLabel>
        <Textarea bgColor={"white"} />
      </FormControl>
    </VStack>
  );
}