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"
},
"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-query-params": "^5.1.0",
"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 { 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 }) {
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 Image from "next/image";
import { Geist, Geist_Mono } from "next/font/google";
import styles from "@/styles/Home.module.css";
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,
} 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({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
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"),
});
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div
className={`${styles.page} ${geistSans.variable} ${geistMono.variable}`}
<Flex minH="100vh" bg="gray.50" dir="rtl">
{/* Main Content */}
<Box
w="280px"
bg="white"
borderLeft="1px solid"
borderColor="gray.200"
px={6}
py={8}
>
<main className={styles.main}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className={styles.intro}>
<h1>To get started, edit the index.js file.</h1>
<p>
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className={styles.ctas}>
<a
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className={styles.logo}
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className={styles.secondary}
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</div>
</main>
</div>
</>
<VStack align="stretch" spacing={6}>
{/* Brand / Title */}
<Box>
<Text fontSize="lg" fontWeight="bold">
سرویس ها
</Text>
<Text fontSize="sm" color="gray.500">
داشبورد تولید محتوا
</Text>
</Box>
<Divider />
{/* Menu */}
<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>
{/* 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