155 lines
4.1 KiB
JavaScript
155 lines
4.1 KiB
JavaScript
import {
|
|
AspectRatio,
|
|
Box,
|
|
Heading,
|
|
HStack,
|
|
Icon,
|
|
Image,
|
|
Skeleton,
|
|
Text,
|
|
VStack,
|
|
} from "@chakra-ui/react";
|
|
import { FaBolt } from "react-icons/fa";
|
|
import ChatTypingLoader from "../loading/ChatTypingLoader";
|
|
import {
|
|
IoDocumentTextOutline,
|
|
IoImageOutline,
|
|
IoVideocamOutline,
|
|
} from "react-icons/io5";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkBreaks from "remark-breaks";
|
|
|
|
const iconsDic = {
|
|
llm: IoDocumentTextOutline,
|
|
image: IoImageOutline,
|
|
video: IoVideocamOutline,
|
|
};
|
|
|
|
function ResultBox({
|
|
type = "llm",
|
|
loading = false,
|
|
resultData = "",
|
|
imgWidth = 500,
|
|
imgHeight = 500,
|
|
}) {
|
|
return (
|
|
<Box
|
|
w={"100%"}
|
|
minHeight={"200px"}
|
|
p={4}
|
|
bg="#f5effd"
|
|
boxShadow="sm"
|
|
marginBottom={"4px"}
|
|
border={"1px"}
|
|
borderColor={"purple.100"}
|
|
borderRadius={"10px"}
|
|
>
|
|
<Box
|
|
width={"100%"}
|
|
backgroundColor={"white"}
|
|
padding={"5px"}
|
|
borderRadius={"5px"}
|
|
as={HStack}
|
|
justifyContent={"space-between"}
|
|
id="question"
|
|
>
|
|
<HStack alignItems={"center"} justifyContent={"start"}>
|
|
<Icon as={iconsDic[type]} fontSize={"20px"} />
|
|
<Text fontWeight="bold" fontSize={"18px"}>
|
|
نتیجه
|
|
</Text>
|
|
</HStack>
|
|
<FaBolt color="purple" />
|
|
</Box>
|
|
<Box
|
|
mt={4}
|
|
mr={2}
|
|
w="100%"
|
|
display={type === "image" ? "flex" : "block"}
|
|
flexDirection="column"
|
|
justifyContent={type === "image" ? "center" : undefined}
|
|
whiteSpace={type === "llm" ? "pre-line" : "normal"}
|
|
>
|
|
{loading && type === "llm" && (
|
|
<HStack
|
|
w="100%"
|
|
alignItems="center"
|
|
justifyContent="flex-start"
|
|
mt={2}
|
|
>
|
|
<ChatTypingLoader size="16px" />
|
|
</HStack>
|
|
)}
|
|
|
|
{type === "llm" && !loading && (
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkBreaks]}
|
|
components={{
|
|
h1: (props) => <Heading as="h1" size="xl" my={2} {...props} />,
|
|
h2: (props) => <Heading as="h2" size="lg" my={2} {...props} />,
|
|
h3: (props) => <Heading as="h3" size="md" my={2} {...props} />,
|
|
p: (props) => <Text fontSize="16px" my={1} {...props} />,
|
|
}}
|
|
>
|
|
{resultData}
|
|
</ReactMarkdown>
|
|
)}
|
|
|
|
{(type === "image" || type === "video") && loading && (
|
|
<Box w="100%" display="flex" justifyContent="center">
|
|
<VStack spacing={3} w="100%" maxW="600px">
|
|
<Text fontSize="sm" color="gray.600" textAlign="center">
|
|
در حال تولید {type === "image" ? "تصویر" : "ویدئو"}...
|
|
</Text>
|
|
|
|
<AspectRatio
|
|
ratio={imgWidth / imgHeight}
|
|
w="100%"
|
|
borderRadius="md"
|
|
overflow="hidden"
|
|
>
|
|
<Skeleton borderRadius="md" />
|
|
</AspectRatio>
|
|
</VStack>
|
|
</Box>
|
|
)}
|
|
|
|
{type === "image" && !loading && resultData?.[0] && (
|
|
<Box w="100%" display="flex" justifyContent="center">
|
|
<AspectRatio
|
|
ratio={imgWidth / imgHeight}
|
|
w="100%"
|
|
maxW="600px"
|
|
borderRadius="md"
|
|
overflow="hidden"
|
|
>
|
|
<Image
|
|
src={resultData?.[0]}
|
|
objectFit="contain"
|
|
w="100%"
|
|
h="100%"
|
|
style={{ transform: "translateZ(0)" }}
|
|
/>
|
|
</AspectRatio>
|
|
</Box>
|
|
)}
|
|
|
|
{type === "video" && !loading && resultData?.[0] && (
|
|
<Box w={"100%"} display={"flex"} justifyContent={"center"}>
|
|
<Box h="auto" transformOrigin="center center">
|
|
<video
|
|
src={resultData?.[0]}
|
|
width="720px"
|
|
height="480px"
|
|
controls={true}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default ResultBox;
|