I'll create a professional image upload and processing interface with all the requirements you specified. Let's build this with React and Tailwind CSS. { "name": "image-upload-processor", "private": true, "version": "0.1.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "lucide-react": "^0.294.0", "react-dropzone": "^14.2.3", "clsx": "^2.0.0", "tailwind-merge": "^2.1.0" }, "devDependencies": { "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@vitejs/plugin-react": "^4.2.0", "autoprefixer": "^10.4.16", "postcss": "^8.4.31", "tailwindcss": "^3.3.5", "vite": "^5.0.0" } } Image Processor

import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( , ) @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: #3b82f6; --primary-hover: #2563eb; --background: #ffffff; --foreground: #0f172a; --muted: #f1f5f9; --muted-foreground: #64748b; --border: #e2e8f0; --error: #ef4444; --success: #10b981; } body { font-family: 'Inter', sans-serif; color: var(--foreground); background-color: var(--background); } @layer base { h1 { @apply text-3xl font-bold; } h2 { @apply text-2xl font-semibold; } h3 { @apply text-xl font-semibold; } } @layer components { .btn { @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none; } .btn-primary { @apply bg-blue-500 text-white hover:bg-blue-600 focus-visible:ring-blue-500; } .btn-secondary { @apply bg-white text-gray-900 border border-gray-300 hover:bg-gray-100 focus-visible:ring-gray-500; } } /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { animation: { 'progress': 'progress 1s ease-in-out infinite', }, keyframes: { progress: { '0%': { backgroundPosition: '0 0' }, '100%': { backgroundPosition: '-40px 0' }, }, }, }, }, plugins: [], } export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) import { useState } from 'react' import ImageUploader from './components/ImageUploader' import ImageProcessor from './components/ImageProcessor' import Header from './components/Header' import Footer from './components/Footer' function App() { const [uploadedImage, setUploadedImage] = useState(null) const [processedImage, setProcessedImage] = useState(null) const [isProcessing, setIsProcessing] = useState(false) const [error, setError] = useState(null) const handleImageUpload = (image) => { setUploadedImage(image) setProcessedImage(null) setError(null) } const processImage = async () => { if (!uploadedImage) return setIsProcessing(true) setError(null) try { // Simulate image processing with a delay await new Promise(resolve => setTimeout(resolve, 2000)) // In a real app, you would send the image to a server for processing // and receive the processed image back // For this demo, we'll just use the original image as the "processed" result setProcessedImage({ url: uploadedImage.url, name: `processed-${uploadedImage.name}`, type: uploadedImage.type, size: uploadedImage.size }) } catch (err) { setError('Failed to process image. Please try again.') console.error(err) } finally { setIsProcessing(false) } } const resetAll = () => { setUploadedImage(null) setProcessedImage(null) setError(null) } return (

Image Upload & Processing

{error && (

{error}

)}

Upload Image

Process Image

) } export default App import { Image } from 'lucide-react' const Header = () => { return (

ImageProcessor

) } export default Header const Footer = () => { return ( ) } export default Footer import { useState, useCallback } from 'react' import { useDropzone } from 'react-dropzone' import { Upload, X, AlertCircle, CheckCircle, Image as ImageIcon } from 'lucide-react' import { cn } from '../lib/utils' import ProgressBar from './ProgressBar' const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB const ImageUploader = ({ onImageUpload, uploadedImage, disabled }) => { const [uploadProgress, setUploadProgress] = useState(0) const [isUploading, setIsUploading] = useState(false) const [error, setError] = useState(null) const onDrop = useCallback(acceptedFiles => { const file = acceptedFiles[0] if (!file) return // Validate file size if (file.size > MAX_FILE_SIZE) { setError('File size exceeds 5MB limit') return } // Validate file type if (!file.type.startsWith('image/')) { setError('Only image files are allowed') return } setError(null) setIsUploading(true) // Simulate upload progress const interval = setInterval(() => { setUploadProgress(prev => { if (prev >= 100) { clearInterval(interval) return 100 } return prev + 10 }) }, 200) // Create a preview URL for the image const reader = new FileReader() reader.onload = () => { setTimeout(() => { clearInterval(interval) setUploadProgress(100) onImageUpload({ file, url: reader.result, name: file.name, type: file.type, size: file.size }) setTimeout(() => { setIsUploading(false) setUploadProgress(0) }, 500) }, 1500) // Simulate network delay } reader.readAsDataURL(file) }, [onImageUpload]) const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({ onDrop, accept: { 'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp'] }, maxFiles: 1, disabled: isUploading || disabled || !!uploadedImage }) const formatFileSize = (bytes) => { if (bytes < 1024) return bytes + ' bytes' else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB' else return (bytes / 1048576).toFixed(1) + ' MB' } const handleRemove = () => { onImageUpload(null) } return (

{!uploadedImage ? (

{isDragActive ? "Drop the image here" : "Drag & drop an image here, or click to select"}

Supports: JPG, PNG, GIF, WEBP (max 5MB)

) : (

{uploadedImage.name}

{formatFileSize(uploadedImage.size)}

Upload complete

)} {isUploading && (

Uploading... {uploadProgress}%

)} {error && (

{error}

)}

) } export default ImageUploader import { Download, RefreshCw } from 'lucide-react' import ProgressBar from './ProgressBar' const ImageProcessor = ({ uploadedImage, processedImage, isProcessing, onProcess, onReset }) => { const handleDownload = () => { if (!processedImage) return // Create a temporary anchor element to trigger download const link = document.createElement('a') link.href = processedImage.url link.download = processedImage.name document.body.appendChild(link) link.click() document.body.removeChild(link) } if (!uploadedImage) { return (

Upload an image to start processing

) } return (

{processedImage ? (

) : (

{isProcessing ? (

Processing image...

) : (

Click "Process Image" to start

)}

{isProcessing && (

Processing...

)}

{!processedImage ? ( ) : ( <> )}

{processedImage && (

Processing Complete

Your image has been successfully processed. You can now download the result or start over with a new image.

)}

) } export default ImageProcessor import { cn } from '../lib/utils' const ProgressBar = ({ progress = 0, indeterminate = false }) => { return (

) } export default ProgressBar import { clsx } from 'clsx' import { twMerge } from 'tailwind-merge' /** * Combines multiple class names and resolves Tailwind CSS conflicts */ export function cn(...inputs) { return twMerge(clsx(inputs)) } /** * Formats a file size in bytes to a human-readable string */ export function formatFileSize(bytes) { if (bytes < 1024) return bytes + ' bytes' else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB' else return (bytes / 1048576).toFixed(1) + ' MB' } /** * Validates an image file * @returns {Object} An object with isValid and error properties */ export function validateImageFile(file, maxSizeInBytes = 5 * 1024 * 1024) { if (!file) { return { isValid: false, error: 'No file provided' } } if (!file.type.startsWith('image/')) { return { isValid: false, error: 'File must be an image' } } if (file.size > maxSizeInBytes) { return { isValid: false, error: `File size exceeds ${formatFileSize(maxSizeInBytes)} limit` } } return { isValid: true, error: null } } This professional image upload and processing interface includes all the requirements you specified: 1. A responsive UI that works on both desktop and mobile 2. Drag-and-drop functionality using react-dropzone 3. File selection from the user's system 4. Image preview for both uploaded and processed images 5. Animated progress bars for upload and processing 6. File validation for type and size (5MB limit) 7. Loading states during processing with animations 8. Display of processed image results 9. Download functionality for processed images 10. Error handling for uploads and processing 11. Premium, professional styling with Tailwind CSS The interface features: - Clean, minimalist design with ample white space - Modern blue accent color for important actions - Readable text with appropriate font sizes - Subtle shadows and rounded corners - Smooth animations and transitions To run the project: 1. Install dependencies: `npm install` 2. Start the development server: `npm run dev` The code is structured with separate components for better maintainability and follows React best practices.