Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ethical Image Processing Studio</title> | |
| <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .upload-area { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: #667eea; | |
| background-color: rgba(102, 126, 234, 0.05); | |
| } | |
| .processing-spinner { | |
| border: 3px solid rgba(255, 255, 255, 0.3); | |
| border-top: 3px solid #ffffff; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .analysis-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .analysis-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .tag { | |
| background: rgba(102, 126, 234, 0.2); | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| margin-right: 6px; | |
| margin-bottom: 6px; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useRef, useEffect } = React; | |
| function App() { | |
| const [selectedImage, setSelectedImage] = useState(null); | |
| const [processedImage, setProcessedImage] = useState(null); | |
| const [isProcessing, setIsProcessing] = useState(false); | |
| const [processingProgress, setProcessingProgress] = useState(0); | |
| const [selectedTool, setSelectedTool] = useState('enhance'); | |
| const [showResults, setShowResults] = useState(false); | |
| const [imageAnalysis, setImageAnalysis] = useState(null); | |
| const [showAnalysis, setShowAnalysis] = useState(false); | |
| const fileInputRef = useRef(null); | |
| const handleImageUpload = (e) => { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| setSelectedImage(event.target.result); | |
| setShowResults(false); | |
| setProcessedImage(null); | |
| setShowAnalysis(false); | |
| setImageAnalysis(null); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }; | |
| const handleDrop = (e) => { | |
| e.preventDefault(); | |
| const file = e.dataTransfer.files[0]; | |
| if (file && file.type.startsWith('image/')) { | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| setSelectedImage(event.target.result); | |
| setShowResults(false); | |
| setProcessedImage(null); | |
| setShowAnalysis(false); | |
| setImageAnalysis(null); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }; | |
| const handleDragOver = (e) => { | |
| e.preventDefault(); | |
| }; | |
| const analyzeImage = () => { | |
| if (!selectedImage) return; | |
| setIsProcessing(true); | |
| setProcessingProgress(0); | |
| // Simulate analysis | |
| const interval = setInterval(() => { | |
| setProcessingProgress(prev => { | |
| if (prev >= 100) { | |
| clearInterval(interval); | |
| setIsProcessing(false); | |
| simulateAnalysis(); | |
| return 100; | |
| } | |
| return prev + 10; | |
| }); | |
| }, 200); | |
| }; | |
| const simulateAnalysis = () => { | |
| // Simulate image analysis with detected features | |
| setTimeout(() => { | |
| const analysis = { | |
| dimensions: { width: 800, height: 600 }, | |
| format: 'JPEG', | |
| size: '2.4 MB', | |
| dominantColors: ['#4A90E2', '#7ED321', '#F5A623'], | |
| detectedObjects: ['person', 'tree', 'building'], | |
| sceneType: 'outdoor', | |
| quality: 'high', | |
| metadata: { | |
| camera: 'iPhone 13 Pro', | |
| timestamp: '2024-01-15 14:30:00', | |
| location: 'Urban park' | |
| } | |
| }; | |
| setImageAnalysis(analysis); | |
| setShowAnalysis(true); | |
| }, 500); | |
| }; | |
| const processImage = () => { | |
| if (!selectedImage) return; | |
| setIsProcessing(true); | |
| setProcessingProgress(0); | |
| // Simulate processing | |
| const interval = setInterval(() => { | |
| setProcessingProgress(prev => { | |
| if (prev >= 100) { | |
| clearInterval(interval); | |
| setIsProcessing(false); | |
| simulateProcessing(); | |
| return 100; | |
| } | |
| return prev + 10; | |
| }); | |
| }, 200); | |
| }; | |
| const simulateProcessing = () => { | |
| // Simulate image processing with a delay | |
| setTimeout(() => { | |
| // Create a processed version (in real app, this would be from an API) | |
| setProcessedImage(selectedImage); | |
| setShowResults(true); | |
| }, 500); | |
| }; | |
| const resetApp = () => { | |
| setSelectedImage(null); | |
| setProcessedImage(null); | |
| setShowResults(false); | |
| setShowAnalysis(false); | |
| setImageAnalysis(null); | |
| if (fileInputRef.current) { | |
| fileInputRef.current.value = ''; | |
| } | |
| }; | |
| return ( | |
| <div className="min-h-screen gradient-bg"> | |
| {/* Header */} | |
| <header className="glass-effect"> | |
| <div className="container mx-auto px-4 py-4"> | |
| <div className="flex items-center justify-between"> | |
| <h1 className="text-2xl font-bold text-white">Image Processing Studio</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-white hover:text-gray-200 transition-colors"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| </header> | |
| {/* Main Content */} | |
| <main className="container mx-auto px-4 py-8"> | |
| <div className="max-w-6xl mx-auto"> | |
| {/* Welcome Section */} | |
| <div className="text-center mb-8"> | |
| <h2 className="text-4xl font-bold text-white mb-4">Professional Image Processing & Analysis</h2> | |
| <p className="text-xl text-white/80">Upload your images and extract valuable insights</p> | |
| </div> | |
| {/* Tool Selection */} | |
| <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-8"> | |
| <h3 className="text-white font-semibold mb-4">Select Processing Tool</h3> | |
| <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| {[ | |
| { id: 'enhance', name: 'Enhance', icon: 'fas fa-magic' }, | |
| { id: 'remove-bg', name: 'Background Remove', icon: 'fas fa-eraser' }, | |
| { id: 'resize', name: 'Resize', icon: 'fas fa-expand-arrows-alt' }, | |
| { id: 'filter', name: 'Apply Filter', icon: 'fas fa-filter' }, | |
| { id: 'analyze', name: 'Analyze', icon: 'fas fa-search' }, | |
| { id: 'object-detect', name: 'Object Detection', icon: 'fas fa-cube' }, | |
| { id: 'optimize', name: 'Optimize', icon: 'fas fa-compress' }, | |
| { id: 'convert', name: 'Convert', icon: 'fas fa-exchange-alt' } | |
| ].map(tool => ( | |
| <button | |
| key={tool.id} | |
| onClick={() => setSelectedTool(tool.id)} | |
| className={`p-4 rounded-lg transition-all ${ | |
| selectedTool === tool.id | |
| ? 'bg-white/20 text-white' | |
| : 'bg-white/10 text-white/70 hover:bg-white/15' | |
| }`} | |
| > | |
| <i className={`${tool.icon} text-2xl mb-2 block`}></i> | |
| <span className="text-sm">{tool.name}</span> | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Upload Area */} | |
| <div className="bg-white rounded-xl p-8 mb-8"> | |
| <div | |
| className="upload-area rounded-lg p-12 text-center cursor-pointer" | |
| onClick={() => fileInputRef.current?.click()} | |
| onDrop={handleDrop} | |
| onDragOver={handleDragOver} | |
| > | |
| <input | |
| ref={fileInputRef} | |
| type="file" | |
| accept="image/*" | |
| onChange={handleImageUpload} | |
| className="hidden" | |
| /> | |
| <i className="fas fa-cloud-upload-alt text-6xl text-gray-400 mb-4"></i> | |
| <h3 className="text-xl font-semibold text-gray-700 mb-2">Drop your image here</h3> | |
| <p className="text-gray-500">or click to browse</p> | |
| <p className="text-sm text-gray-400 mt-2">Supports: JPG, PNG, GIF, WebP</p> | |
| </div> | |
| </div> | |
| {/* Processing Section */} | |
| {selectedImage && ( | |
| <div className="space-y-8"> | |
| {/* Image Analysis Section */} | |
| {showAnalysis && imageAnalysis && ( | |
| <div className="bg-white/10 backdrop-blur-md rounded-xl p-6"> | |
| <h3 className="text-white font-semibold mb-4">Image Analysis Results</h3> | |
| <div className="grid md:grid-cols-2 gap-6"> | |
| <div className="analysis-card rounded-lg p-4"> | |
| <h4 className="text-white font-medium mb-3">Basic Information</h4> | |
| <div className="space-y-2 text-white/80 text-sm"> | |
| <div className="flex justify-between"> | |
| <span>Dimensions:</span> | |
| <span>{imageAnalysis.dimensions.width} × {imageAnalysis.dimensions.height}px</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span>Format:</span> | |
| <span>{imageAnalysis.format}</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span>File Size:</span> | |
| <span>{imageAnalysis.size}</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span>Quality:</span> | |
| <span>{imageAnalysis.quality}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="analysis-card rounded-lg p-4"> | |
| <h4 className="text-white font-medium mb-3">Detected Objects</h4> | |
| <div className="flex flex-wrap"> | |
| {imageAnalysis.detectedObjects.map((obj, index) => ( | |
| <span key={index} className="tag"> | |
| {obj} | |
| </span> | |
| ))} | |
| </div> | |
| <div className="mt-3"> | |
| <span className="text-white/80 text-sm">Scene Type: </span> | |
| <span className="text-white">{imageAnalysis.sceneType}</span> | |
| </div> | |
| </div> | |
| <div className="analysis-card rounded-lg p-4"> | |
| <h4 className="text-white font-medium mb-3">Metadata</h4> | |
| <div className="space-y-2 text-white/80 text-sm"> | |
| <div className="flex justify-between"> | |
| <span>Camera:</span> | |
| <span>{imageAnalysis.metadata.camera}</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span>Timestamp:</span> | |
| <span>{imageAnalysis.metadata.timestamp}</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span>Location:</span> | |
| <span>{imageAnalysis.metadata.location}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="analysis-card rounded-lg p-4"> | |
| <h4 className="text-white font-medium mb-3">Color Palette</h4> | |
| <div className="flex space-x-2"> | |
| {imageAnalysis.dominantColors.map((color, index) => ( | |
| <div key={index} className="flex flex-col items-center"> | |
| <div | |
| className="w-12 h-12 rounded-lg mb-1" | |
| style={{ backgroundColor: color }} | |
| ></div> | |
| <span className="text-white/80 text-xs">{color}</span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* Image Processing Section */} | |
| <div className="bg-white rounded-xl p-8"> | |
| <div className="flex flex-col md:flex-row gap-8"> | |
| {/* Original Image */} | |
| <div className="flex-1"> | |
| <h3 className="text-lg font-semibold mb-4 text-gray-700">Original Image</h3> | |
| <div className="relative"> | |
| <img | |
| src={selectedImage} | |
| alt="Original" | |
| className="w-full rounded-lg shadow-lg" | |
| /> | |
| </div> | |
| </div> | |
| {/* Processed Image */} | |
| <div className="flex-1"> | |
| <h3 className="text-lg font-semibold mb-4 text-gray-700">Processed Image</h3> | |
| {isProcessing ? ( | |
| <div className="flex flex-col items-center justify-center h-64"> | |
| <div className="processing-spinner mb-4"></div> | |
| <p className="text-gray-600">Processing... {processingProgress}%</p> | |
| </div> | |
| ) : showResults ? ( | |
| <div className="relative"> | |
| <img | |
| src={processedImage} | |
| alt="Processed" | |
| className="w-full rounded-lg shadow-lg" | |
| /> | |
| </div> | |
| ) : ( | |
| <div className="h-64 flex items-center justify-center bg-gray-100 rounded-lg"> | |
| <p className="text-gray-500">Click "Process Image" to see results</p> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| {/* Action Buttons */} | |
| <div className="flex gap-4 mt-6"> | |
| <button | |
| onClick={selectedTool === 'analyze' ? analyzeImage : processImage} | |
| disabled={isProcessing} | |
| className="flex-1 bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-purple-600 hover:to-indigo-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| {isProcessing ? 'Processing...' : selectedTool === 'analyze' ? 'Analyze Image' : 'Process Image'} | |
| </button> | |
| <button | |
| onClick={resetApp} | |
| className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-300 transition-all" | |
| > | |
| Reset | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* Features Section */} | |
| <div className="grid md:grid-cols-3 gap-6 mb-8"> | |
| {[ | |
| { title: 'Fast Processing', desc: 'Get results in seconds with our optimized algorithms', icon: 'fas fa-bolt' }, | |
| { title: 'High Quality', desc: 'Maintain image quality while applying effects', icon: 'fas fa-star' }, | |
| { title: 'Secure', desc: 'Your images are processed locally and never stored', icon: 'fas fa-shield-alt' }, | |
| { title: 'Smart Analysis', desc: 'Extract valuable insights from your images', icon: 'fas fa-brain' }, | |
| { title: 'Multiple Formats', desc: 'Support for all popular image formats', icon: 'fas fa-file-image' }, | |
| { title: 'Cloud Ready', desc: 'Process images from anywhere', icon: 'fas fa-cloud' } | |
| ].map((feature, index) => ( | |
| <div key={index} className="bg-white/10 backdrop-blur-md rounded-xl p-6"> | |
| <i className={`${feature.icon} text-3xl text-white mb-3`}></i> | |
| <h4 className="text-white font-semibold mb-2">{feature.title}</h4> | |
| <p className="text-white/70 text-sm">{feature.desc}</p> | |
| </div> | |
| ))} | |
| </div> | |
| {/* Footer */} | |
| <footer className="text-center text-white/60 text-sm mt-12"> | |
| <p>© 2024 Image Processing Studio. All rights reserved.</p> | |
| <p className="mt-2">For ethical image processing and enhancement only</p> | |
| </footer> | |
| </div> | |
| </main> | |
| </div> | |
| ); | |
| } | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |