generative_front/pages/index.js

import LlmPanel from "@/components/tabs/llmPanel";
import TextImagePanel from "@/components/tabs/textImagePanel";
import TextVideoPanel from "@/components/tabs/textVideoPanel";
import {
  Box,
  Flex,
  VStack,
  Text,
  Tabs,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Icon,
  HStack,
  Image,
} from "@chakra-ui/react";
import { FiImage, FiLayers } from "react-icons/fi";
import { CiVideoOn } from "react-icons/ci";
import {
  IoDocumentTextOutline,
  IoImageOutline,
  IoVideocamOutline,
} from "react-icons/io5";
import { IoIosGitMerge } from "react-icons/io";
import {
  NumberParam,
  StringParam,
  useQueryParams,
  withDefault,
} from "use-query-params";
import { BsChatText } from "react-icons/bs";

export default function Home() {
  const [filters, setFilters] = useQueryParams({
    tab: withDefault(NumberParam, 0),
    tab_menu: withDefault(StringParam, "llm"),
    model_name: withDefault(NumberParam, 0),
  });

  return (
    <Flex direction={"column"} minH="100vh" bg="gray.50" dir="rtl">
      {/* Header */}
      <AppHeader />

      {/* Page Layout */}
      <Flex flex="1" minH={0} mt={"92px"}>
        {/* Sidebar */}
        <Box
          w="280px"
          bg="#fdfbff"
          borderLeft="1px solid"
          borderColor="gray.200"
          py={8}
        >
          <VStack align="stretch" spacing={6}>
            {/* Menu */}
            <Tabs
              isFitted
              variant="soft-rounded"
              colorScheme="green"
              px={6}
              onChange={(e) => setFilters({ model_name: e })}
              index={filters?.model_name}
            >
              <TabList mb={2}>
                <Tab>خانم ستاری</Tab>
                <Tab>رکن آبادی</Tab>
              </TabList>

              <TabPanels>
                <TabPanel>
                  <VStack align="stretch" spacing={2}>
                    <SidebarItem
                      icon={FiImage}
                      label="LLM + LoRA"
                      name={"llm"}
                      active={filters?.tab_menu == "llm" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={BsChatText}
                      label="LLM Base"
                      name={"llm_base"}
                      active={filters?.tab_menu == "llm_base" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={FiLayers}
                      label="SDXL + LoRA"
                      name={"sdxl_lora"}
                      active={filters?.tab_menu == "sdxl_lora" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={FiLayers}
                      label="SDXL"
                      name={"sdxl"}
                      active={filters?.tab_menu == "sdxl" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={CiVideoOn}
                      label="CogVideo + LoRA"
                      name={"cogvideo"}
                      active={filters?.tab_menu == "cogvideo" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={FiLayers}
                      label="CogVideo Base"
                      name={"cogvideo_base"}
                      active={
                        filters?.tab_menu == "cogvideo_base" ? true : false
                      }
                      filters={filters}
                      setFilters={setFilters}
                    />
                  </VStack>
                </TabPanel>
                <TabPanel>
                  <VStack align="stretch" spacing={2}>
                    <SidebarItem
                      icon={FiImage}
                      label="LLM + LoRA"
                      name={"llm"}
                      active={filters?.tab_menu == "llm" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={BsChatText}
                      label="LLM Base"
                      name={"llm_base"}
                      active={filters?.tab_menu == "llm_base" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={FiLayers}
                      label="SDXL + LoRA"
                      name={"sdxl_lora"}
                      active={filters?.tab_menu == "sdxl_lora" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={FiLayers}
                      label="SDXL"
                      name={"sdxl"}
                      active={filters?.tab_menu == "sdxl" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={CiVideoOn}
                      label="CogVideo + LoRA"
                      name={"cogvideo"}
                      active={filters?.tab_menu == "cogvideo" ? true : false}
                      filters={filters}
                      setFilters={setFilters}
                    />
                    <SidebarItem
                      icon={FiLayers}
                      label="CogVideo Base"
                      name={"cogvideo_base"}
                      active={
                        filters?.tab_menu == "cogvideo_base" ? true : false
                      }
                      filters={filters}
                      setFilters={setFilters}
                    />
                  </VStack>
                </TabPanel>
              </TabPanels>
            </Tabs>

            {/* Footer */}
          </VStack>
        </Box>

        {/* Content */}
        <Box flex="1" p={8} minW={0}>
          <Tabs
            variant="soft-rounded"
            colorScheme="purple"
            onChange={(e) => setFilters({ tab: e })}
            index={filters?.tab}
          >
            <TabList mb={6}>
              <Tab>
                <HStack>
                  <IoDocumentTextOutline fontSize={"20px"} />
                  <Text>پنل تولید متن</Text>
                </HStack>
              </Tab>
              <Tab>
                <HStack>
                  <IoImageOutline fontSize={"20px"} />
                  <Text>پنل تولید تصویر</Text>
                </HStack>
              </Tab>
              <Tab>
                <HStack>
                  <IoVideocamOutline fontSize={"20px"} />
                  <Text>پنل تولید ویدئو</Text>
                </HStack>
              </Tab>
              <Tab>
                <HStack>
                  <IoIosGitMerge fontSize={"20px"} />
                  <Text>مرج و تولید نهایی</Text>
                </HStack>
              </Tab>
            </TabList>

            <TabPanels>
              <TabPanel>
                <LlmPanel />
              </TabPanel>
              <TabPanel>
                <TextImagePanel />
              </TabPanel>
              <TabPanel>
                <TextVideoPanel />
              </TabPanel>
              <TabPanel>مرج نهایی</TabPanel>
            </TabPanels>
          </Tabs>
        </Box>
      </Flex>
    </Flex>
  );
}

function AppHeader() {
  return (
    <Box
      w="100%"
      h="92px"
      borderBottom="1px solid"
      borderColor="gray.200"
      bg="#fdfbff"
      as={HStack}
      alignItems="center"
      justifyContent="space-between"
      px={"20px"}
      zIndex={10}
      position="fixed"
      top={0}
    >
      <HStack alignItems={"end"} height={"100%"} py={"10px"}>
        <Image
          src="/generative-logo.png"
          w={"80px"}
          h={"70px"}
          loading="lazy"
        />
        <VStack alignItems={"start"} justifyContent={"end"} height={"100%"}>
          <Text fontWeight={"bold"} fontSize={"20px"}>
            سامانه تولید محتوای هوشمند
          </Text>
          <Text>
            سامانه جامع تولید محتوا با استفاده از مدل‌های زبانی و مولد تصویر و
            ویدئو
          </Text>
        </VStack>
      </HStack>
      <VStack
        w={"fit-content"}
        alignItems={"center"}
        justifyContent={"center"}
        py={"10px"}
      >
        <Image src="./logob.png" />
        <Text fontSize="xs" fontWeight="bold">
          موسسه تولید سیستم های خبره و هوشمند اسلامی باقرالعلوم(ع)
        </Text>
      </VStack>
    </Box>
  );
}

function SidebarItem({ icon, label, active = false, setFilters, name }) {
  return (
    <Flex
      align="center"
      gap={3}
      px={4}
      py={3}
      borderRadius="lg"
      cursor="pointer"
      bg={active ? "purple.50" : "transparent"}
      color={active ? "purple.600" : "gray.700"}
      _hover={{
        bg: "purple.50",
        color: "purple.600",
      }}
      transition="all 0.2s"
      onClick={(e) => setFilters({ tab_menu: name })}
    >
      <Icon as={icon} boxSize={5} />
      <Text fontSize="md" fontWeight="medium">
        {label}
      </Text>
    </Flex>
  );
}