306 lines
8.9 KiB
JavaScript
306 lines
8.9 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,
|
||
Divider,
|
||
HStack,
|
||
Image,
|
||
Stack,
|
||
} from "@chakra-ui/react";
|
||
import {
|
||
FiFileText,
|
||
FiImage,
|
||
FiVideo,
|
||
FiLayers,
|
||
FiSettings,
|
||
} 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 { StringParam, useQueryParams, withDefault } from "use-query-params";
|
||
|
||
export default function Home() {
|
||
const [filters, setFilters] = useQueryParams({
|
||
tab: withDefault(NumberParam, 0),
|
||
tab_menu: withDefault(StringParam, "llm"),
|
||
model_name: withDefault(NumberParam, 0),
|
||
});
|
||
|
||
return (
|
||
<Flex minH="100vh" bg="gray.50" dir="rtl">
|
||
{/* Main Content */}
|
||
<Box
|
||
w="280px"
|
||
bg="white"
|
||
borderLeft="1px solid"
|
||
borderColor="gray.200"
|
||
py={8}
|
||
>
|
||
<VStack align="stretch" spacing={6}>
|
||
{/* Brand / Title */}
|
||
<Box px={6}>
|
||
<Text fontSize="lg" fontWeight="bold">
|
||
سرویس ها
|
||
</Text>
|
||
<Text fontSize="sm" color="gray.500">
|
||
داشبورد تولید محتوا
|
||
</Text>
|
||
</Box>
|
||
|
||
<Divider />
|
||
|
||
{/* Menu */}
|
||
<Tabs
|
||
isFitted
|
||
variant="soft-rounded"
|
||
colorScheme="green"
|
||
px={6}
|
||
onChange={(e) => setFilters({ model_name: e })}
|
||
index={filters?.model_name}
|
||
>
|
||
<TabList>
|
||
<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>
|
||
|
||
<VStack w={"100%"} alignItems={"start"}>
|
||
<Box
|
||
w={"100%"}
|
||
h={"92px"}
|
||
borderBottom={"1px"}
|
||
borderBottomColor={"gray.200"}
|
||
bgColor={"white"}
|
||
as={Stack}
|
||
alignItems={"end"}
|
||
justifyContent={"center"}
|
||
pl={"20px"}
|
||
>
|
||
<VStack>
|
||
<Image src={"./logob.png"} />
|
||
<Text fontSize={"xs"} fontWeight={"bold"}>
|
||
موسسه تولید سیستم های خبره و هوشمند اسلامی باقرالعلوم(ع)
|
||
</Text>
|
||
</VStack>
|
||
</Box>
|
||
<Box flex="1" p={8} w={"100%"}>
|
||
<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>
|
||
</VStack>
|
||
|
||
{/* Right Sidebar */}
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
function SidebarItem({
|
||
icon,
|
||
label,
|
||
active = false,
|
||
filters,
|
||
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>
|
||
);
|
||
}
|