Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Processing App | Built with anycoder</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4a6bff; | |
| --secondary-color: #f8f9fa; | |
| --dark-color: #343a40; | |
| --light-color: #ffffff; | |
| --danger-color: #dc3545; | |
| --success-color: #28a745; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| } | |
| header { | |
| background-color: var(--primary-color); | |
| color: var(--light-color); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| } | |
| .built-with { | |
| color: var(--light-color); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 2rem auto; | |
| padding: 0 1rem; | |
| } | |
| .app-title { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| color: var(--dark-color); | |
| } | |
| .upload-section { | |
| background-color: var(--light-color); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 2rem; | |
| } | |
| .upload-box { | |
| border: 2px dashed #ccc; | |
| border-radius: 5px; | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| margin-bottom: 1rem; | |
| } | |
| .upload-box:hover { | |
| border-color: var(--primary-color); | |
| background-color: rgba(74, 107, 255, 0.05); | |
| } | |
| .upload-box i { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| margin-bottom: 1rem; | |
| } | |
| .upload-box p { | |
| margin-bottom: 0.5rem; | |
| } | |
| .options-section { | |
| background-color: var(--light-color); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 2rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .radio-group { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 0.5rem; | |
| } | |
| .radio-option { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--primary-color); | |
| color: var(--light-color); | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| text-align: center; | |
| } | |
| .btn:hover { | |
| background-color: #3a5bef; | |
| transform: translateY(-2px); | |
| } | |
| .btn-block { | |
| display: block; | |
| width: 100%; | |
| } | |
| .result-section { | |
| background-color: var(--light-color); | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| display: none; | |
| } | |
| .result-title { | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .image-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| justify-content: center; | |
| margin-bottom: 2rem; | |
| } | |
| .image-box { | |
| flex: 1; | |
| min-width: 300px; | |
| max-width: 100%; | |
| text-align: center; | |
| } | |
| .image-box img { | |
| max-width: 100%; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .image-label { | |
| margin-top: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .download-btn { | |
| background-color: var(--success-color); | |
| margin-top: 1rem; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| margin: 2rem 0; | |
| } | |
| .spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 50%; | |
| border-top: 4px solid var(--primary-color); | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 1rem; | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 0 0.5rem; | |
| } | |
| .upload-section, .options-section, .result-section { | |
| padding: 1rem; | |
| } | |
| .image-container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo">Image Processor</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a> | |
| </header> | |
| <div class="container"> | |
| <h1 class="app-title">Image Processing Application</h1> | |
| <div class="upload-section"> | |
| <h2>Upload Image</h2> | |
| <div class="upload-box" id="uploadBox"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>Drag & drop your image here or click to browse</p> | |
| <p class="text-muted">Supports JPG, PNG (Max 5MB)</p> | |
| </div> | |
| <input type="file" id="fileInput" accept="image/jpeg, image/png" style="display: none;"> | |
| <div id="previewContainer" style="display: none; margin-top: 1rem; text-align: center;"> | |
| <img id="imagePreview" src="#" alt="Preview" style="max-width: 300px; max-height: 300px; border-radius: 5px;"> | |
| <button class="btn" id="removeImageBtn" style="margin-top: 1rem; background-color: var(--danger-color);"> | |
| <i class="fas fa-trash"></i> Remove Image | |
| </button> | |
| </div> | |
| </div> | |
| <div class="options-section"> | |
| <h2>Processing Options</h2> | |
| <div class="form-group"> | |
| <label for="penisSize">Penis Size</label> | |
| <div class="radio-group"> | |
| <div class="radio-option"> | |
| <input type="radio" id="smallSize" name="penisSize" value="small" checked> | |
| <label for="smallSize">Small</label> | |
| </div> | |
| <div class="radio-option"> | |
| <input type="radio" id="mediumSize" name="penisSize" value="medium"> | |
| <label for="mediumSize">Medium</label> | |
| </div> | |
| <div class="radio-option"> | |
| <input type="radio" id="largeSize" name="penisSize" value="large"> | |
| <label for="largeSize">Large</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="poseOption">Pose Option</label> | |
| <select id="poseOption" class="btn-block" style="padding: 0.75rem; border: 1px solid #ccc; border-radius: 5px;"> | |
| <option value="standing">Standing</option> | |
| <option value="sitting">Sitting</option> | |
| <option value="lying">Lying Down</option> | |
| </select> | |
| </div> | |
| <button class="btn btn-block" id="processBtn"> | |
| <i class="fas fa-magic"></i> Process Image | |
| </button> | |
| </div> | |
| <div class="loading" id="loadingIndicator"> | |
| <div class="spinner"></div> | |
| <p>Processing your image... This may take a few moments.</p> | |
| </div> | |
| <div class="result-section" id="resultSection"> | |
| <h2 class="result-title">Processing Results</h2> | |
| <div class="image-container"> | |
| <div class="image-box"> | |
| <img id="originalImage" src="#" alt="Original Image"> | |
| <p class="image-label">Original</p> | |
| </div> | |
| <div class="image-box"> | |
| <img id="processedImage" src="#" alt="Processed Image"> | |
| <p class="image-label">Processed</p> | |
| <button class="btn download-btn" id="downloadBtn"> | |
| <i class="fas fa-download"></i> Download Processed Image | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>This application is for personal use only. By using this app, you confirm you have consent for all images processed.</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const uploadBox = document.getElementById('uploadBox'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const previewContainer = document.getElementById('previewContainer'); | |
| const imagePreview = document.getElementById('imagePreview'); | |
| const removeImageBtn = document.getElementById('removeImageBtn'); | |
| const processBtn = document.getElementById('processBtn'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| const resultSection = document.getElementById('resultSection'); | |
| const originalImage = document.getElementById('originalImage'); | |
| const processedImage = document.getElementById('processedImage'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| let selectedFile = null; | |
| // Handle file upload via click | |
| uploadBox.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| // Handle file selection | |
| fileInput.addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| selectedFile = e.target.files[0]; | |
| displayPreview(selectedFile); | |
| } | |
| }); | |
| // Handle drag and drop | |
| uploadBox.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| uploadBox.style.borderColor = var('--primary-color'); | |
| uploadBox.style.backgroundColor = 'rgba(74, 107, 255, 0.1)'; | |
| }); | |
| uploadBox.addEventListener('dragleave', function() { | |
| uploadBox.style.borderColor = '#ccc'; | |
| uploadBox.style.backgroundColor = 'transparent'; | |
| }); | |
| uploadBox.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| uploadBox.style.borderColor = '#ccc'; | |
| uploadBox.style.backgroundColor = 'transparent'; | |
| if (e.dataTransfer.files.length > 0) { | |
| selectedFile = e.dataTransfer.files[0]; | |
| displayPreview(selectedFile); | |
| } | |
| }); | |
| // Remove image | |
| removeImageBtn.addEventListener('click', function() { | |
| selectedFile = null; | |
| fileInput.value = ''; | |
| previewContainer.style.display = 'none'; | |
| uploadBox.style.display = 'block'; | |
| }); | |
| // Process image button | |
| processBtn.addEventListener('click', function() { | |
| if (!selectedFile) { | |
| alert('Please upload an image first.'); | |
| return; | |
| } | |
| // Show loading indicator | |
| loadingIndicator.style.display = 'block'; | |
| // Simulate processing delay (in a real app, this would be an API call) | |
| setTimeout(function() { | |
| loadingIndicator.style.display = 'none'; | |
| // Display results (simulated) | |
| originalImage.src = URL.createObjectURL(selectedFile); | |
| // In a real app, this would be the processed image from your backend | |
| // For demo purposes, we're just using the same image | |
| processedImage.src = URL.createObjectURL(selectedFile); | |
| resultSection.style.display = 'block'; | |
| // Scroll to results | |
| resultSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 3000); | |
| }); | |
| // Download button | |
| downloadBtn.addEventListener('click', function() { | |
| if (!processedImage.src || processedImage.src === '#') { | |
| alert('No processed image available to download.'); | |
| return; | |
| } | |
| const link = document.createElement('a'); | |
| link.href = processedImage.src; | |
| link.download = 'processed_' + selectedFile.name; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| // Display image preview | |
| function displayPreview(file) { | |
| if (file.type.match('image.*')) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| imagePreview.src = e.target.result; | |
| previewContainer.style.display = 'block'; | |
| uploadBox.style.display = 'none'; | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { | |
| alert('Please select an image file (JPEG or PNG).'); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |