367 lines
11 KiB
JavaScript
367 lines
11 KiB
JavaScript
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";
|
||
import { AiOutlinePoweroff } from "react-icons/ai";
|
||
import keycloak from "@/lib/keycloak";
|
||
|
||
export default function Home() {
|
||
const [filters, setFilters] = useQueryParams({
|
||
tab: withDefault(NumberParam, 0),
|
||
tab_menu: withDefault(StringParam, "gemma_base"),
|
||
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}
|
||
position={"relative"}
|
||
>
|
||
<VStack
|
||
align="stretch"
|
||
spacing={6}
|
||
overflowY={"auto"}
|
||
maxH={"calc(100vh - 150px)"}
|
||
sx={{
|
||
"::-webkit-scrollbar": { display: "none" },
|
||
"scrollbar-width": "none",
|
||
"-ms-overflow-style": "none",
|
||
}}
|
||
>
|
||
{/* 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={BsChatText}
|
||
label="LLM Base"
|
||
name={"gemma_base"}
|
||
active={filters?.tab_menu == "gemma_base" ? true : false}
|
||
filters={filters}
|
||
setFilters={setFilters}
|
||
/>
|
||
<SidebarItem
|
||
icon={FiImage}
|
||
label="LLM + LoRA"
|
||
name={"llm"}
|
||
active={filters?.tab_menu == "llm" ? 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={BsChatText}
|
||
label="LLM Base"
|
||
name={"gemma_base"}
|
||
active={filters?.tab_menu == "gemma_base" ? true : false}
|
||
filters={filters}
|
||
setFilters={setFilters}
|
||
/>
|
||
<SidebarItem
|
||
icon={FiImage}
|
||
label="LLM + LoRA"
|
||
name={"llm"}
|
||
active={filters?.tab_menu == "llm" ? 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
|
||
w={"full"}
|
||
position={"absolute"}
|
||
bottom={0}
|
||
left={0}
|
||
right={0}
|
||
zIndex={10}
|
||
borderTop={"1px"}
|
||
borderColor={"gray.300"}
|
||
bg={"gray.50"}
|
||
>
|
||
<HStack
|
||
w={"full"}
|
||
py={2}
|
||
gap={2}
|
||
justifyContent={"center"}
|
||
alignItems={"center"}
|
||
color={"gray.700"}
|
||
cursor={"pointer"}
|
||
transition={"all"}
|
||
transitionDuration={"200"}
|
||
_hover={{ color: "red.600" }}
|
||
onClick={() => keycloak.logout()}
|
||
>
|
||
<AiOutlinePoweroff size={20} />
|
||
<Text>خروج از حساب</Text>
|
||
</HStack>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* Content */}
|
||
<Box
|
||
flex="1"
|
||
p={8}
|
||
minW={0}
|
||
overflowY={"auto"}
|
||
maxH={"calc(100vh - 92px)"}
|
||
sx={{
|
||
"::-webkit-scrollbar": { display: "none" },
|
||
"scrollbar-width": "none",
|
||
"-ms-overflow-style": "none",
|
||
}}
|
||
>
|
||
<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 filters={filters} />
|
||
</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>
|
||
);
|
||
}
|