update

components/tabs/textImagePanel.js

@@ -178,8 +178,8 @@ export default function TextImagePanel({ filters }) {
         type="image"
         loading={isGeneratingImage}
         resultData={images}
-        imgWidth={width}
-        imgHeight={height}
+        imgWidth={width || 500}
+        imgHeight={height || 500}
       />
     </VStack>
   );

components/ui/ResultBox.jsx

@@ -29,8 +29,8 @@ function ResultBox({
   type = "llm",
   loading = false,
   resultData = "",
-  imgWidth,
-  imgHeight,
+  imgWidth = 500,
+  imgHeight = 500,
 }) {
   return (
     <Box
@@ -61,7 +61,15 @@ function ResultBox({
         </HStack>
         <FaBolt color="purple" />
       </Box>
-      <Box mt={4} mr={2} whiteSpace="pre-line">
+      <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%"
@@ -88,28 +96,42 @@ function ResultBox({
         )}
 
         {type === "image" && loading && (
-          <VStack align="stretch" spacing={3}>
-            <Text fontSize="sm" color="gray.600">
-              در حال تولید تصویر...
-            </Text>
+          <Box w="100%" display="flex" justifyContent="center">
+            <VStack spacing={3} w="100%" maxW="600px">
+              <Text fontSize="sm" color="gray.600" textAlign="center">
+                در حال تولید تصویر...
+              </Text>
 
-            <Skeleton borderRadius="md" w={"100%"} h={"500px"} />
-          </VStack>
+              <AspectRatio
+                ratio={imgWidth / imgHeight}
+                w="100%"
+                borderRadius="md"
+                overflow="hidden"
+              >
+                <Skeleton borderRadius="md" />
+              </AspectRatio>
+            </VStack>
+          </Box>
         )}
 
         {type === "image" && !loading && resultData?.[0] && (
-          <AspectRatio
-            ratio={imgWidth / imgHeight}
-            maxW={"500px"}
-            maxH={"500px"}
-            // _before={{ paddingBottom: "70%" }}
-          >
-            <Image
-              src={resultData?.[0]}
-              objectFit="contain"
+          <Box w="100%" display="flex" justifyContent="center">
+            <AspectRatio
+              ratio={imgWidth / imgHeight}
+              w="100%"
+              maxW="600px"
               borderRadius="md"
-            />
-          </AspectRatio>
+              overflow="hidden"
+            >
+              <Image
+                src={resultData?.[0]}
+                objectFit="contain"
+                w="100%"
+                h="100%"
+                style={{ transform: "translateZ(0)" }}
+              />
+            </AspectRatio>
+          </Box>
         )}
       </Box>
     </Box>