refactor(vite.config.js): enhance build configuration with manual chunking and dependency optimization

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, lazy, Suspense } from 'react';
 import {
   Box,
   Container,
@@ -16,6 +16,7 @@ import {
   Badge,
   Flex,
   Divider,
+  Spinner,
   Textarea,
   Tooltip,
   InputGroup,
@@ -25,8 +26,10 @@ import {
   HStack,
 } from '@chakra-ui/react';
 import axios from 'axios';
-import JSZip from 'jszip';
-import { saveAs } from 'file-saver';
+
+// Lazy load heavier components that aren't needed immediately
+const JSZip = lazy(() => import('jszip'));
+const { saveAs } = lazy(() => import('file-saver'));
 
 // Function to get filename without extension
 const getFilenameWithoutExtension = filename => {
@@ -340,13 +343,18 @@ const App = () => {
     setDownloading(true);
     
     try {
+      // Dynamically import JSZip and file-saver only when needed
+      const [JSZip, { saveAs }] = await Promise.all([
+        import('jszip'),
+        import('file-saver')
+      ]);
+      
       // Create a new zip file
-      const zip = new JSZip();
+      const zip = new JSZip.default();
       
       // Add text files to the zip with the same filenames as the images but .txt extension
       completedImages.forEach(image => {
         const fileName = getFilenameWithoutExtension(image.name) + ".txt";
-        // Use the edited caption if available, otherwise use the original caption
         const captionToSave = image.isEdited ? image.editedCaption : image.caption;
         zip.file(fileName, captionToSave);
       });
@@ -470,272 +478,278 @@ const App = () => {
   const hasCaptions = uploadedImages.some(img => img.status === 'completed' && img.caption);
 
   return (
-    <Container maxW="container.xl" py={10}>
-      <VStack spacing={8} align="stretch">
-        <Box textAlign="center">
-          <Heading as="h1" size="2xl" mb={2} bgGradient="linear(to-r, cyan.400, blue.500, purple.600)" bgClip="text">
-            Glif LoRA Autocaption
-          </Heading>
-          <Text fontSize="lg" color="gray.400">
-            Generate captions for your images using Glif API
-          </Text>
-        </Box>
-
-        <Divider />
-
-        <Box>
-          <FormControl mb={4}>
-            <FormLabel>API Key</FormLabel>
-            <Flex>
+    <Suspense fallback={
+      <Box display="flex" justifyContent="center" alignItems="center" height="100vh">
+        <Spinner size="xl" />
+      </Box>
+    }>
+      <Container maxW="container.xl" py={10}>
+        <VStack spacing={8} align="stretch">
+          <Box textAlign="center">
+            <Heading as="h1" size="2xl" mb={2} bgGradient="linear(to-r, cyan.400, blue.500, purple.600)" bgClip="text">
+              Glif LoRA Autocaption
+            </Heading>
+            <Text fontSize="lg" color="gray.400">
+              Generate captions for your images using Glif API
+            </Text>
+          </Box>
+
+          <Divider />
+
+          <Box>
+            <FormControl mb={4}>
+              <FormLabel>API Key</FormLabel>
+              <Flex>
+                <Input 
+                  type="password"
+                  placeholder="Enter your Glif API key" 
+                  value={apiKey}
+                  onChange={handleApiKeyChange}
+                  mr={2}
+                />
+                <Button 
+                  size="md"
+                  onClick={clearApiKey}
+                  variant="outline"
+                  colorScheme="red"
+                >
+                  Clear
+                </Button>
+              </Flex>
+              <Text fontSize="xs" color="gray.500" mt={1}>
+                Your API key is securely saved in your browser for future use.
+              </Text>
+            </FormControl>
+            
+            <FormControl mb={4}>
+              <FormLabel>Custom Glif ID or URL</FormLabel>
+              <InputGroup>
+                <Input 
+                  type="text"
+                  placeholder="Enter custom Glif ID or URL (optional)" 
+                  value={customGlifInput}
+                  onChange={handleCustomGlifInputChange}
+                />
+                <InputRightElement width="auto" mr={2}>
+                  <Button size="sm" onClick={saveCustomGlifId} mr={2}>
+                    Save
+                  </Button>
+                  <Button size="sm" onClick={clearCustomGlifId} variant="outline" colorScheme="red">
+                    Clear
+                  </Button>
+                </InputRightElement>
+              </InputGroup>
+              <Text fontSize="xs" color="gray.500" mt={1}>
+                Enter a custom Glif ID or URL to use for autocaption, follow the format here: https://glif.app/@saqib/glifs/cm7yya7850000la0ckalxpix2. Leave empty to use the default Glif.
+              </Text>
+            </FormControl>
+            
+            <FormControl mb={4}>
+              <FormLabel>Trigger Word</FormLabel>
               <Input 
-                type="password"
-                placeholder="Enter your Glif API key" 
-                value={apiKey}
-                onChange={handleApiKeyChange}
-                mr={2}
+                type="text"
+                placeholder="Enter trigger word (optional)" 
+                value={triggerWord}
+                onChange={handleTriggerWordChange}
               />
-              <Button 
+              <Text fontSize="xs" color="gray.500" mt={1}>
+                Add a trigger word to all captions (e.g., "masterpiece", "best quality").
+              </Text>
+            </FormControl>
+
+            <FormControl mb={4}>
+              <FormLabel>Trigger Word Placement</FormLabel>
+              <RadioGroup onChange={handleTriggerPlacementChange} value={triggerPlacement}>
+                <HStack spacing={4}>
+                  <Radio value="none">No Trigger</Radio>
+                  <Radio value="before">Before Caption</Radio>
+                  <Radio value="after">After Caption</Radio>
+                </HStack>
+              </RadioGroup>
+              <Text fontSize="xs" color="gray.500" mt={1}>
+                Choose where to place the trigger word in relation to the generated caption.
+              </Text>
+            </FormControl>
+            
+            <Flex flexWrap="wrap" gap={4} mb={6} justify="center">
+              <Button
+                onClick={() => fileInputRef.current?.click()}
+                variant="solid"
                 size="md"
-                onClick={clearApiKey}
-                variant="outline"
-                colorScheme="red"
+                disabled={processing}
               >
-                Clear
+                Upload Images
+              </Button>
+              <input
+                type="file"
+                multiple
+                accept="image/*"
+                onChange={handleFileChange}
+                style={{ display: 'none' }}
+                ref={fileInputRef}
+              />
+              
+              <Button 
+                onClick={processImages}
+                colorScheme="blue" 
+                isLoading={processing}
+                loadingText="Processing"
+                disabled={processing || uploadedImages.filter(img => img.status === 'pending').length === 0}
+              >
+                Process Images
+              </Button>
+              
+              <Button 
+                onClick={downloadCaptions}
+                colorScheme="teal"
+                isLoading={downloading}
+                loadingText="Downloading"
+                disabled={downloading || !hasCaptions}
+              >
+                Download Captions
+              </Button>
+              
+              <Button 
+                onClick={clearAll}
+                variant="outline" 
+                disabled={processing || uploadedImages.length === 0}
+              >
+                Clear All
               </Button>
             </Flex>
-            <Text fontSize="xs" color="gray.500" mt={1}>
-              Your API key is securely saved in your browser for future use.
-            </Text>
-          </FormControl>
-          
-          <FormControl mb={4}>
-            <FormLabel>Custom Glif ID or URL</FormLabel>
-            <InputGroup>
-              <Input 
-                type="text"
-                placeholder="Enter custom Glif ID or URL (optional)" 
-                value={customGlifInput}
-                onChange={handleCustomGlifInputChange}
+
+            {processing && (
+              <Progress 
+                value={progress} 
+                size="sm" 
+                colorScheme="blue" 
+                hasStripe 
+                mb={4}
+                borderRadius="md"
               />
-              <InputRightElement width="auto" mr={2}>
-                <Button size="sm" onClick={saveCustomGlifId} mr={2}>
-                  Save
-                </Button>
-                <Button size="sm" onClick={clearCustomGlifId} variant="outline" colorScheme="red">
-                  Clear
-                </Button>
-              </InputRightElement>
-            </InputGroup>
-            <Text fontSize="xs" color="gray.500" mt={1}>
-              Enter a custom Glif ID or URL to use for autocaption, follow the format here: https://glif.app/@saqib/glifs/cm7yya7850000la0ckalxpix2. Leave empty to use the default Glif.
-            </Text>
-          </FormControl>
-          
-          <FormControl mb={4}>
-            <FormLabel>Trigger Word</FormLabel>
-            <Input 
-              type="text"
-              placeholder="Enter trigger word (optional)" 
-              value={triggerWord}
-              onChange={handleTriggerWordChange}
-            />
-            <Text fontSize="xs" color="gray.500" mt={1}>
-              Add a trigger word to all captions (e.g., "masterpiece", "best quality").
-            </Text>
-          </FormControl>
-
-          <FormControl mb={4}>
-            <FormLabel>Trigger Word Placement</FormLabel>
-            <RadioGroup onChange={handleTriggerPlacementChange} value={triggerPlacement}>
-              <HStack spacing={4}>
-                <Radio value="none">No Trigger</Radio>
-                <Radio value="before">Before Caption</Radio>
-                <Radio value="after">After Caption</Radio>
-              </HStack>
-            </RadioGroup>
-            <Text fontSize="xs" color="gray.500" mt={1}>
-              Choose where to place the trigger word in relation to the generated caption.
-            </Text>
-          </FormControl>
-          
-          <Flex flexWrap="wrap" gap={4} mb={6} justify="center">
-            <Button
-              onClick={() => fileInputRef.current?.click()}
-              variant="solid"
-              size="md"
-              disabled={processing}
-            >
-              Upload Images
-            </Button>
-            <input
-              type="file"
-              multiple
-              accept="image/*"
-              onChange={handleFileChange}
-              style={{ display: 'none' }}
-              ref={fileInputRef}
-            />
-            
-            <Button 
-              onClick={processImages}
-              colorScheme="blue" 
-              isLoading={processing}
-              loadingText="Processing"
-              disabled={processing || uploadedImages.filter(img => img.status === 'pending').length === 0}
-            >
-              Process Images
-            </Button>
-            
-            <Button 
-              onClick={downloadCaptions}
-              colorScheme="teal"
-              isLoading={downloading}
-              loadingText="Downloading"
-              disabled={downloading || !hasCaptions}
-            >
-              Download Captions
-            </Button>
-            
-            <Button 
-              onClick={clearAll}
-              variant="outline" 
-              disabled={processing || uploadedImages.length === 0}
+            )}
+          </Box>
+
+          {uploadedImages.length > 0 ? (
+            <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
+              {uploadedImages.map((image) => (
+                <Box 
+                  key={image.id} 
+                  borderWidth="1px" 
+                  borderRadius="lg" 
+                  overflow="hidden"
+                  bg="gray.900"
+                  position="relative"
+                >
+                  <Box position="absolute" top={2} right={2} zIndex={1}>
+                    {getStatusBadge(image.status)}
+                    {image.isEdited && (
+                      <Badge ml={2} colorScheme="purple">Edited</Badge>
+                    )}
+                  </Box>
+                  <Image 
+                    src={image.preview} 
+                    alt={image.name}
+                    w="100%" 
+                    h="200px" 
+                    objectFit="cover"
+                  />
+                  <Box p={4}>
+                    <Flex justify="space-between" align="center" mb={2}>
+                      <Text fontWeight="semibold" isTruncated maxW="70%">{image.name}</Text>
+                      <Button 
+                        size="xs" 
+                        onClick={() => removeImage(image.id)}
+                        disabled={processing}
+                      >
+                        Remove
+                      </Button>
+                    </Flex>
+                    
+                    {image.status === 'completed' && (
+                      <>
+                        {editingImageId === image.id ? (
+                          <Box mt={2}>
+                            <Textarea 
+                              value={image.editedCaption}
+                              onChange={(e) => handleEditCaptionChange(image.id, e.target.value)}
+                              size="sm"
+                              mb={2}
+                            />
+                            <Flex justify="flex-end" gap={2}>
+                              <Button size="xs" onClick={cancelEditingCaption}>
+                                Cancel
+                              </Button>
+                              <Button 
+                                size="xs" 
+                                colorScheme="blue" 
+                                onClick={() => saveEditedCaption(image.id, image.editedCaption)}
+                              >
+                                Save
+                              </Button>
+                            </Flex>
+                          </Box>
+                        ) : (
+                          <Box mt={2} p={2} bg="gray.800" borderRadius="md">
+                            <Text fontSize="sm">
+                              {image.isEdited ? image.editedCaption : image.caption}
+                            </Text>
+                            <Flex justify="flex-end" mt={2} gap={2}>
+                              {image.isEdited && (
+                                <Tooltip label="Reset to original caption">
+                                  <Button 
+                                    size="xs" 
+                                    colorScheme="orange" 
+                                    onClick={() => resetCaption(image.id)}
+                                  >
+                                    Reset
+                                  </Button>
+                                </Tooltip>
+                              )}
+                              <Button 
+                                size="xs" 
+                                colorScheme="teal" 
+                                onClick={() => startEditingCaption(image.id)}
+                              >
+                                Edit
+                              </Button>
+                            </Flex>
+                          </Box>
+                        )}
+                      </>
+                    )}
+                    
+                    {image.status === 'error' && (
+                      <Box mt={2} p={2} bg="red.900" borderRadius="md">
+                        <Text fontSize="sm" color="red.200">{image.error}</Text>
+                      </Box>
+                    )}
+                  </Box>
+                </Box>
+              ))}
+            </SimpleGrid>
+          ) : (
+            <Box 
+              textAlign="center" 
+              p={10} 
+              borderWidth="1px" 
+              borderRadius="lg" 
+              borderStyle="dashed"
             >
-              Clear All
-            </Button>
-          </Flex>
-
-          {processing && (
-            <Progress 
-              value={progress} 
-              size="sm" 
-              colorScheme="blue" 
-              hasStripe 
-              mb={4}
-              borderRadius="md"
-            />
+              <Text color="gray.500">Upload images to get started</Text>
+            </Box>
           )}
-        </Box>
-
-        {uploadedImages.length > 0 ? (
-          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
-            {uploadedImages.map((image) => (
-              <Box 
-                key={image.id} 
-                borderWidth="1px" 
-                borderRadius="lg" 
-                overflow="hidden"
-                bg="gray.900"
-                position="relative"
-              >
-                <Box position="absolute" top={2} right={2} zIndex={1}>
-                  {getStatusBadge(image.status)}
-                  {image.isEdited && (
-                    <Badge ml={2} colorScheme="purple">Edited</Badge>
-                  )}
-                </Box>
-                <Image 
-                  src={image.preview} 
-                  alt={image.name}
-                  w="100%" 
-                  h="200px" 
-                  objectFit="cover"
-                />
-                <Box p={4}>
-                  <Flex justify="space-between" align="center" mb={2}>
-                    <Text fontWeight="semibold" isTruncated maxW="70%">{image.name}</Text>
-                    <Button 
-                      size="xs" 
-                      onClick={() => removeImage(image.id)}
-                      disabled={processing}
-                    >
-                      Remove
-                    </Button>
-                  </Flex>
-                  
-                  {image.status === 'completed' && (
-                    <>
-                      {editingImageId === image.id ? (
-                        <Box mt={2}>
-                          <Textarea 
-                            value={image.editedCaption}
-                            onChange={(e) => handleEditCaptionChange(image.id, e.target.value)}
-                            size="sm"
-                            mb={2}
-                          />
-                          <Flex justify="flex-end" gap={2}>
-                            <Button size="xs" onClick={cancelEditingCaption}>
-                              Cancel
-                            </Button>
-                            <Button 
-                              size="xs" 
-                              colorScheme="blue" 
-                              onClick={() => saveEditedCaption(image.id, image.editedCaption)}
-                            >
-                              Save
-                            </Button>
-                          </Flex>
-                        </Box>
-                      ) : (
-                        <Box mt={2} p={2} bg="gray.800" borderRadius="md">
-                          <Text fontSize="sm">
-                            {image.isEdited ? image.editedCaption : image.caption}
-                          </Text>
-                          <Flex justify="flex-end" mt={2} gap={2}>
-                            {image.isEdited && (
-                              <Tooltip label="Reset to original caption">
-                                <Button 
-                                  size="xs" 
-                                  colorScheme="orange" 
-                                  onClick={() => resetCaption(image.id)}
-                                >
-                                  Reset
-                                </Button>
-                              </Tooltip>
-                            )}
-                            <Button 
-                              size="xs" 
-                              colorScheme="teal" 
-                              onClick={() => startEditingCaption(image.id)}
-                            >
-                              Edit
-                            </Button>
-                          </Flex>
-                        </Box>
-                      )}
-                    </>
-                  )}
-                  
-                  {image.status === 'error' && (
-                    <Box mt={2} p={2} bg="red.900" borderRadius="md">
-                      <Text fontSize="sm" color="red.200">{image.error}</Text>
-                    </Box>
-                  )}
-                </Box>
-              </Box>
-            ))}
-          </SimpleGrid>
-        ) : (
-          <Box 
-            textAlign="center" 
-            p={10} 
-            borderWidth="1px" 
-            borderRadius="lg" 
-            borderStyle="dashed"
-          >
-            <Text color="gray.500">Upload images to get started</Text>
+          
+          <Divider mt={6} />
+          
+          <Box as="footer" textAlign="center">
+            <Text fontSize="sm" color="gray.500">
+              Glif LoRA Autocaption • {new Date().getFullYear()}
+            </Text>
           </Box>
-        )}
-        
-        <Divider mt={6} />
-        
-        <Box as="footer" textAlign="center">
-          <Text fontSize="sm" color="gray.500">
-            Glif LoRA Autocaption • {new Date().getFullYear()}
-          </Text>
-        </Box>
-      </VStack>
-    </Container>
+        </VStack>
+      </Container>
+    </Suspense>
   );
 };
 

vite.config.js

@@ -4,8 +4,22 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
     plugins: [react()],
     server: {
-        port: 7860, // Default port for HuggingFace Spaces
+        port: 7860,
         host: '0.0.0.0',
         allowedHosts: ["saq1b-glif-lora-autocaption.hf.space"]
+    },
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    'chakra': ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion'],
+                    'utils': ['jszip', 'file-saver', 'axios']
+                }
+            }
+        },
+        chunkSizeWarningLimit: 1000
+    },
+    optimizeDeps: {
+        include: ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion']
     }
 });