bi/generative_front
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
nematnejad 2026-02-22 12:05:44 +03:30
parent 61809d4a4d
commit 35383b75c9
12 changed files with 1815 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
components/tabs/llmPanel.js Normal file
View File

@ -0,0 +1,143 @@
// components/PhoneInput.tsx
import {
Button,
Divider,
FormControl,
FormLabel,
HStack,
Icon,
Input,
Select,
Table,
TableCaption,
TableContainer,
Tbody,
Td,
Text,
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 { MdOutlineQuestionAnswer } from "react-icons/md";
import { useForm } from "react-hook-form";
export default function LlmPanel() {
const { register, handleSubmit } = useForm();
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"} 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("token")} />
</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("prompts")} />
</FormControl>
<Button p={"20px"} colorScheme="pink" leftIcon={<FaPlay />} type="submit">
اجرا
</Button>
<Divider my={"20px"} />
<FormControl
bgColor={"purple.50"}
border={"1px"}
borderColor={"gray.200"}
p={"10px"}
borderRadius={"10px"}
>
<HStack w={"100%"} justifyContent={"space-between"}>
<FormLabel fontSize={"20px"}>پاسخ</FormLabel>
<Icon
as={MdOutlineQuestionAnswer}
bgColor={"gray.200"}
borderRadius={"50%"}
p={"5px"}
fontSize={"30px"}
border={"1px"}
borderColor={"gray.300"}
/>
</HStack>
<Textarea bgColor={"white"} />
</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>
);
}

182
components/tabs/textImagePanel.js Normal file
View File

@ -0,0 +1,182 @@
// 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>
<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={TbPrompt}
bgColor={"gray.200"}
borderRadius={"50%"}
p={"5px"}
fontSize={"25px"}
border={"1px"}
borderColor={"gray.300"}
/>
<FormLabel>پرامپت</FormLabel>
</HStack>
<Textarea bgColor={"white"} {...register("prompt")} />
</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>
<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>
);
}

162
components/tabs/textVideoPanel.js Normal file
View File

@ -0,0 +1,162 @@
// 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 { TbFrame } from "react-icons/tb";
import { TbArrowGuide } from "react-icons/tb";
import { TbPrompt } from "react-icons/tb";
import { FaDraft2Digital, FaPlay } from "react-icons/fa";
import { useForm } from "react-hook-form";
export default function TextVideoPanel() {
const { register, handleSubmit } = useForm();
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 alignItems={"start"}>
<Icon
as={TbFrame}
bgColor={"gray.200"}
borderRadius={"50%"}
p={"5px"}
fontSize={"25px"}
border={"1px"}
borderColor={"gray.300"}
/>
<FormLabel>تعداد فریم ها</FormLabel>
</HStack>
<Input bgColor={"white"} {...register("frames")} />
</FormControl>
<FormControl>
<FormLabel>seed</FormLabel>
<Input bgColor={"white"} />
</FormControl>
</HStack>
<FormControl as={VStack} alignItems={"start"}>
<HStack alignItems={"start"}>
<Icon
as={TbArrowGuide}
bgColor={"gray.200"}
borderRadius={"50%"}
p={"5px"}
fontSize={"25px"}
border={"1px"}
borderColor={"gray.300"}
/>
<FormLabel>مقیاس راهنمایی</FormLabel>
</HStack>
<Input bgColor={"white"} {...register("scale")} />
</FormControl>
<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>
<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>
<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>
);
}

22
components/theme/index.js Normal file
View File

@ -0,0 +1,22 @@
import { extendTheme, withDefaultColorScheme } from "@chakra-ui/react";
export const theme = extendTheme(
{
direction: "rtl",
styles: {
global: {
html: {
fontSize: "14px",
},
body: {
bg: "white",
},
},
},
fonts: {
heading: "Estedad",
body: "Estedad",
},
},
withDefaultColorScheme({ colorScheme: "facebook" }),
);

11
package.json
View File

@ -8,8 +8,17 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"@chakra-ui/react": "2",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"framer-motion": "^12.34.3",
"next": "16.1.6", "next": "16.1.6",
"next-query-params": "^5.1.0",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3" "react-dom": "19.2.3",
"react-hook-form": "^7.71.2",
"react-icons": "^5.5.0",
"swr": "^2.4.0",
"use-query-params": "^2.2.2"
} }
} }

16
pages/_app.js
View File

@ -1,5 +1,19 @@
import "@/styles/globals.css"; import "@/styles/globals.css";
import { ChakraProvider } from "@chakra-ui/react";
import { QueryParamProvider } from "use-query-params";
import { NextAdapter } from "next-query-params";
import { theme } from "@/components/theme";
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
return <Component {...pageProps} />; const Adapter = (props) => <NextAdapter {...props} shallow={true} />;
return (
<ChakraProvider theme={theme}>
<QueryParamProvider adapter={Adapter} options={{ enableBatching: true }}>
<QueryParamProvider>
<Component {...pageProps} />
</QueryParamProvider>
</QueryParamProvider>
</ChakraProvider>
);
} }

287
pages/index.js
View File

@ -1,88 +1,213 @@
import Head from "next/head"; import LlmPanel from "@/components/tabs/llmPanel";
import Image from "next/image"; import TextImagePanel from "@/components/tabs/textImagePanel";
import { Geist, Geist_Mono } from "next/font/google"; import TextVideoPanel from "@/components/tabs/textVideoPanel";
import styles from "@/styles/Home.module.css"; import {
Box,
Flex,
VStack,
Text,
Tabs,
Tab,
TabList,
TabPanel,
TabPanels,
Icon,
Divider,
HStack,
} 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";
const geistSans = Geist({ import {
variable: "--font-geist-sans", NumberParam,
subsets: ["latin"], StringParam,
}); useQueryParams,
withDefault,
const geistMono = Geist_Mono({ } from "use-query-params";
variable: "--font-geist-mono", import { BsChatText } from "react-icons/bs";
subsets: ["latin"], // import { StringParam, useQueryParams, withDefault } from "use-query-params";
});
export default function Home() { export default function Home() {
const [filters, setFilters] = useQueryParams({
tab: withDefault(NumberParam, 0),
tab_menu: withDefault(StringParam, "llm"),
});
return ( return (
<> <Flex minH="100vh" bg="gray.50" dir="rtl">
<Head> {/* Main Content */}
<title>Create Next App</title> <Box
<meta name="description" content="Generated by create next app" /> w="280px"
<meta name="viewport" content="width=device-width, initial-scale=1" /> bg="white"
<link rel="icon" href="/favicon.ico" /> borderLeft="1px solid"
</Head> borderColor="gray.200"
<div px={6}
className={`${styles.page} ${geistSans.variable} ${geistMono.variable}`} py={8}
> >
<main className={styles.main}> <VStack align="stretch" spacing={6}>
<Image {/* Brand / Title */}
className={styles.logo} <Box>
src="/next.svg" <Text fontSize="lg" fontWeight="bold">
alt="Next.js logo" سرویس ها
width={100} </Text>
height={20} <Text fontSize="sm" color="gray.500">
priority داشبورد تولید محتوا
/> </Text>
<div className={styles.intro}> </Box>
<h1>To get started, edit the index.js file.</h1>
<p> <Divider />
Looking for a starting point or more instructions? Head over to{" "}
<a {/* Menu */}
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" <VStack align="stretch" spacing={2}>
target="_blank" <SidebarItem
rel="noopener noreferrer" icon={FiImage}
> label="LLM + LoRA"
Templates name={"llm"}
</a>{" "} active={filters?.tab_menu == "llm" ? true : false}
or the{" "} filters={filters}
<a setFilters={setFilters}
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" />
target="_blank" <SidebarItem
rel="noopener noreferrer" icon={BsChatText}
> label="LLM Base"
Learning name={"llm_base"}
</a>{" "} active={filters?.tab_menu == "llm_base" ? true : false}
center. filters={filters}
</p> setFilters={setFilters}
</div> />
<div className={styles.ctas}> <SidebarItem
<a icon={FiLayers}
className={styles.primary} label="SDXL + LoRA"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" name={"sdxl_lora"}
target="_blank" active={filters?.tab_menu == "sdxl_lora" ? true : false}
rel="noopener noreferrer" filters={filters}
> setFilters={setFilters}
<Image />
className={styles.logo} <SidebarItem
src="/vercel.svg" icon={FiLayers}
alt="Vercel logomark" label="SDXL"
width={16} name={"sdxl"}
height={16} active={filters?.tab_menu == "sdxl" ? true : false}
/> filters={filters}
Deploy Now setFilters={setFilters}
</a> />
<a <SidebarItem
className={styles.secondary} icon={CiVideoOn}
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" label="CogVideo + LoRA"
target="_blank" name={"cogvideo"}
rel="noopener noreferrer" active={filters?.tab_menu == "cogvideo" ? true : false}
> filters={filters}
Documentation setFilters={setFilters}
</a> />
</div> <SidebarItem
</main> icon={FiLayers}
</div> label="CogVideo Base"
</> name={"cogvideo_base"}
active={filters?.tab_menu == "cogvideo_base" ? true : false}
filters={filters}
setFilters={setFilters}
/>
</VStack>
{/* Footer */}
</VStack>
</Box>
<Box flex="1" p={8}>
<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>
{/* 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>
); );
} }

BIN
public/fonts/estedad.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/estedad.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/estedadfd.woff2 Normal file
View File

Binary file not shown.

8
public/fonts/font.css Normal file
View File

@ -0,0 +1,8 @@
@font-face {
font-family: Estedad;
src: url('/fonts/estedad.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}

1067
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff