Spaces:

saq1b
/

Glif-Lora-Autocaption

Sleeping

App Files Files Community

saq1b commited on Mar 7

Commit

eceb7aa

1 Parent(s): 04d71ea

initialize project with Vite, React, and essential configurations

Browse files

Files changed (7) hide show

Dockerfile +42 -0
README copy.md +75 -0
index.html +14 -0
package.json +26 -0
src/App.jsx +395 -0
src/main.jsx +75 -0
vite.config.js +10 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,42 @@

+FROM node:18-slim
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+# Install basic dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+# Switch to the "user" user
+USER user
+# Set home to the user's home directory
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+# Copy package.json and package-lock.json first for better caching
+COPY --chown=user package*.json ./
+# Install dependencies
+RUN npm install
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . .
+# Build the application
+RUN npm run build
+# Set environment variables
+ENV NODE_ENV=production \
+    PORT=7860 \
+    HOST=0.0.0.0
+# Expose the port
+EXPOSE 7860
+# Command to run the application
+CMD ["npm", "run", "preview"]

README copy.md ADDED Viewed

	@@ -0,0 +1,75 @@

+# Glif Lora Autocaption
+A sleek, minimalist web application to automatically caption your images using the Glif API.
+## Features
+- **Private API Key Management**: Enter your Glif API key securely
+- **Batch Image Processing**: Upload and process multiple images at once
+- **Real-time Progress Tracking**: See the status of each image as it's processed
+- **Modern Dark UI**: Clean, minimalist interface inspired by Vercel and Apple designs
+- **Responsive Design**: Works on mobile and desktop
+## Getting Started
+### Prerequisites
+- Node.js 16+ installed
+- A Glif API key
+### Installation
+1. Clone the repository:
+```bash
+git clone https://github.com/yourusername/glif-lora-autocaption.git
+cd glif-lora-autocaption
+```
+2. Install dependencies:
+```bash
+npm install
+```
+3. Start the development server:
+```bash
+npm start
+```
+4. Open your browser and navigate to `http://localhost:5173`
+### Building for Production
+```bash
+npm run build
+```
+## Usage
+1. Enter your Glif API key in the secure input field
+2. Click "Upload Images" to select one or more images
+3. Click "Process Images" to generate captions
+4. View the results as they are completed
+## Deployment to Huggingface Spaces
+This project includes a Dockerfile configured for Huggingface Spaces.
+1. Create a new Space on Huggingface
+2. Choose Docker as the SDK
+3. Upload the project files
+4. The Space will automatically build and deploy the application
+## Tech Stack
+- React
+- Chakra UI
+- Vite
+- Axios
+## License
+MIT
+---
+*Created with ❤️ for the AI image captioning community*

index.html ADDED Viewed

	@@ -0,0 +1,14 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Glif Lora Autocaption</title>
+    <meta name="description" content="Auto-caption your images using Glif API" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "name": "glif-lora-autocaption",
+  "version": "1.0.0",
+  "description": "A tool to auto-caption images using the Glif API",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "axios": "^1.6.2",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.5",
+    "jszip": "^3.10.1",
+    "file-saver": "^2.0.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.2"
+  }
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,395 @@

+import React, { useState, useRef } from 'react';
+import {
+  Box,
+  Container,
+  Heading,
+  Text,
+  Input,
+  Button,
+  VStack,
+  HStack,
+  SimpleGrid,
+  Image,
+  FormControl,
+  FormLabel,
+  useToast,
+  Progress,
+  Badge,
+  Flex,
+  Code,
+  Icon,
+  Divider,
+  Tooltip
+} from '@chakra-ui/react';
+import axios from 'axios';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+// Function to convert file to base64
+const toBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result.split(',')[1]);
+  reader.onerror = error => reject(error);
+});
+// Function to get file extension
+const getFileExtension = filename => {
+  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
+}
+// Function to get filename without extension
+const getFilenameWithoutExtension = filename => {
+  return filename.substring(0, filename.lastIndexOf("."));
+}
+const App = () => {
+  const [apiKey, setApiKey] = useState('');
+  const [uploadedImages, setUploadedImages] = useState([]);
+  const [processing, setProcessing] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const fileInputRef = useRef(null);
+  const toast = useToast();
+  const handleFileChange = async (e) => {
+    const files = Array.from(e.target.files);
+    if (files.length === 0) return;
+    // Initialize new images with placeholder data
+    const newImages = files.map(file => ({
+      id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      file: file,
+      name: file.name,
+      preview: URL.createObjectURL(file),
+      status: 'pending',
+      caption: '',
+      error: null
+    }));
+    setUploadedImages([...uploadedImages, ...newImages]);
+  };
+  const processImages = async () => {
+    if (!apiKey.trim()) {
+      toast({
+        title: 'API Key Required',
+        description: "Please enter your Glif API key.",
+        status: 'error',
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
+    if (uploadedImages.length === 0) {
+      toast({
+        title: 'No Images',
+        description: "Please upload at least one image.",
+        status: 'warning',
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
+    setProcessing(true);
+    const pendingImages = uploadedImages.filter(img => img.status === 'pending');
+    for (let i = 0; i < pendingImages.length; i++) {
+      const image = pendingImages[i];
+      setProgress(Math.floor((i / pendingImages.length) * 100));
+      // Update image status to processing
+      setUploadedImages(prev => prev.map(img =>
+        img.id === image.id ? { ...img, status: 'processing' } : img
+      ));
+      try {
+        // Convert image to base64
+        const base64Image = await toBase64(image.file);
+        // Call the GLIF API
+        const response = await axios.post('https://simple-api.glif.app/cm7yya7850000la0ckalxpix2', {
+          image: base64Image
+        }, {
+          headers: {
+            'Authorization': `Bearer ${apiKey}`,
+            'Content-Type': 'application/json'
+          }
+        });
+        // Update image with caption
+        setUploadedImages(prev => prev.map(img =>
+          img.id === image.id ? {
+            ...img,
+            status: 'completed',
+            caption: response.data.output || 'No caption generated'
+          } : img
+        ));
+      } catch (error) {
+        console.error(`Error processing image ${image.name}:`, error);
+        // Update image with error
+        setUploadedImages(prev => prev.map(img =>
+          img.id === image.id ? {
+            ...img,
+            status: 'error',
+            error: error.response?.data?.error || error.message || 'Unknown error occurred'
+          } : img
+        ));
+      }
+    }
+    setProgress(100);
+    setProcessing(false);
+    toast({
+      title: 'Processing Complete',
+      description: "All images have been processed.",
+      status: 'success',
+      duration: 5000,
+      isClosable: true,
+    });
+  };
+  const downloadCaptions = async () => {
+    const completedImages = uploadedImages.filter(img => img.status === 'completed' && img.caption);
+    if (completedImages.length === 0) {
+      toast({
+        title: 'No Captions Available',
+        description: "There are no completed captions to download.",
+        status: 'warning',
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
+    setDownloading(true);
+    try {
+      // Create a new zip file
+      const zip = new JSZip();
+      // 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";
+        zip.file(fileName, image.caption);
+      });
+      // Generate the zip file
+      const zipBlob = await zip.generateAsync({ type: 'blob' });
+      // Save the zip file
+      saveAs(zipBlob, "glif-captions.zip");
+      toast({
+        title: 'Download Complete',
+        description: `Successfully packaged ${completedImages.length} captions.`,
+        status: 'success',
+        duration: 3000,
+        isClosable: true,
+      });
+    } catch (error) {
+      console.error("Error creating zip file:", error);
+      toast({
+        title: 'Download Failed',
+        description: "Failed to create zip file. " + error.message,
+        status: 'error',
+        duration: 3000,
+        isClosable: true,
+      });
+    } finally {
+      setDownloading(false);
+    }
+  };
+  const removeImage = (id) => {
+    setUploadedImages(prev => prev.filter(img => img.id !== id));
+  };
+  const clearAll = () => {
+    setUploadedImages([]);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case 'pending':
+        return <Badge colorScheme="gray">Pending</Badge>;
+      case 'processing':
+        return <Badge colorScheme="blue">Processing</Badge>;
+      case 'completed':
+        return <Badge colorScheme="green">Completed</Badge>;
+      case 'error':
+        return <Badge colorScheme="red">Error</Badge>;
+      default:
+        return null;
+    }
+  };
+  // Check if we have any completed captions
+  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>
+            <Input
+              type="password"
+              placeholder="Enter your Glif API key"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+            />
+          </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}
+            >
+              Clear All
+            </Button>
+          </Flex>
+          {processing && (
+            <Progress
+              value={progress}
+              size="sm"
+              colorScheme="blue"
+              hasStripe
+              mb={4}
+              borderRadius="md"
+            />
+          )}
+        </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)}
+                </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' && (
+                    <Box mt={2} p={2} bg="gray.800" borderRadius="md">
+                      <Text fontSize="sm">{image.caption}</Text>
+                    </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>
+          </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>
+  );
+};
+export default App;

src/main.jsx ADDED Viewed

	@@ -0,0 +1,75 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import App from './App';
+// Theme configuration for dark mode
+const theme = extendTheme({
+  config: {
+    initialColorMode: 'dark',
+    useSystemColorMode: false,
+  },
+  styles: {
+    global: {
+      body: {
+        bg: '#000',
+        color: '#fff',
+      }
+    }
+  },
+  colors: {
+    brand: {
+      100: '#f7fafc',
+      900: '#1a202c',
+    },
+    gray: {
+      50: '#f7fafc',
+      100: '#edf2f7',
+      700: '#2d3748',
+      800: '#1a202c',
+      900: '#0f1116',
+    }
+  },
+  components: {
+    Button: {
+      baseStyle: {
+        borderRadius: 'md',
+      },
+      variants: {
+        solid: {
+          bg: 'gray.700',
+          color: 'white',
+          _hover: {
+            bg: 'gray.800',
+          }
+        }
+      }
+    },
+    Input: {
+      variants: {
+        filled: {
+          field: {
+            bg: 'gray.800',
+            _hover: {
+              bg: 'gray.700',
+            },
+            _focus: {
+              bg: 'gray.700',
+            }
+          }
+        }
+      },
+      defaultProps: {
+        variant: 'filled',
+      }
+    }
+  }
+});
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
+  </React.StrictMode>
+);

vite.config.js ADDED Viewed

	@@ -0,0 +1,10 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 7860, // Default port for HuggingFace Spaces
+    host: '0.0.0.0'
+  }
+});