generative_front/components/tabs/llmPanel.js

// components/PhoneInput.tsx
import {
  Button,
  Divider,
  FormControl,
  FormLabel,
  HStack,
  Icon,
  Input,
  Table,
  TableContainer,
  Tbody,
  Textarea,
  Th,
  Thead,
  Tr,
  VStack,
} from "@chakra-ui/react";
import { TbMathMax, TbPrompt } from "react-icons/tb";
import { FaDraft2Digital } from "react-icons/fa";
import { FaPlay } from "react-icons/fa";
import { useForm } from "react-hook-form";
import ResultBox from "../ui/ResultBox";
import useSWRMutation from "swr/mutation";
import axiosInstance, { baseUrl } from "@/lib/api";
import { useState } from "react";

const modelsDic = {
  gemma_base: "base",
  gemma4b_lora: "lora",
};

const postRequest = async (url, { arg }) => {
  const response = await axiosInstance.post(baseUrl + url, arg);
  return response?.data;
};

export default function LlmPanel({ filters }) {
  const { register, handleSubmit } = useForm();
  const [generatedText, setGeneratedText] = useState("");

  const { trigger: triggerGenerateText, isMutating: isGeneratingText } =
    useSWRMutation(
      `/content/vllm/${modelsDic[filters?.tab_menu]}`,
      postRequest,
      {
        onSuccess: (data) => setGeneratedText(data?.content),
      },
    );

  const onSubmit = (data) => {
    triggerGenerateText({
      model: filters?.tab_menu,
      messages: [
        {
          role: "user",
          content: data.content,
        },
      ],
      max_tokens: data.max_tokens,
      temperature: 0.7,
      number: data.number,
    });
  };

  return (
    <VStack
      spacing={4}
      w="100%"
      h="100%"
      alignItems="start"
      overflowY="auto"
      as={"form"}
      onSubmit={handleSubmit(onSubmit)}
    >
      {" "}
      <HStack>
        <FormControl as={VStack} alignItems={"start"} justifyContent={"start"}>
          <HStack>
            <Icon
              as={TbMathMax}
              bgColor={"gray.200"}
              borderRadius={"50%"}
              p={"5px"}
              fontSize={"25px"}
              border={"1px"}
              borderColor={"gray.300"}
            />
            <FormLabel w={"120px"}>حداکثر تعداد توکن:</FormLabel>
          </HStack>
          <Input bgColor={"white"} {...register("max_tokens")} />
        </FormControl>
        <FormControl as={VStack} alignItems={"start"}>
          <HStack>
            <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>
          <Icon
            as={TbPrompt}
            bgColor={"gray.200"}
            borderRadius={"50%"}
            p={"5px"}
            fontSize={"25px"}
            border={"1px"}
            borderColor={"gray.300"}
          />
          <FormLabel>پرامپت:</FormLabel>
        </HStack>
        <Textarea bgColor={"white"} {...register("content")} />
      </FormControl>
      <Button
        p={"20px"}
        colorScheme="pink"
        leftIcon={<FaPlay />}
        type="submit"
        isLoading={isGeneratingText}
      >
        اجرا
      </Button>
      <Divider my={"20px"} borderColor={"gray.300"} />
      <TableContainer w={"100%"} mt={"10px"}>
        <Table>
          <Thead>
            <Tr>
              <Th fontSize={"md"}>ردیف</Th>
            </Tr>
          </Thead>
          <Tbody></Tbody>
        </Table>
      </TableContainer>
      <Divider my={"20px"} borderColor={"gray.300"} />
      <ResultBox
        type="llm"
        resultData={generatedText}
        loading={isGeneratingText}
      />
    </VStack>
  );
}