Spaces:

iammrrobot420
/

anycoder-592e5f15

Running

App Files Files Community

iammrrobot420 commited on Jan 25

Commit

3d4860e

verified ·

1 Parent(s): f45c655

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +218 -19

index.html CHANGED Viewed

@@ -1,19 +1,218 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Enhancer Pro</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #2c3e50;
+            --secondary: #3498db;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Segoe UI', system-ui;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        .header {
+            background: var(--primary);
+            color: white;
+            padding: 1rem;
+            text-align: center;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .brand {
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+        .anycoder-link {
+            color: white;
+            text-decoration: none;
+            font-size: 0.9rem;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 1rem;
+        }
+        .upload-section {
+            background: white;
+            border-radius: 15px;
+            padding: 2rem;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+        .drag-drop-area {
+            border: 2px dashed var(--secondary);
+            border-radius: 10px;
+            padding: 3rem 1rem;
+            margin: 1rem 0;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .drag-drop-area:hover {
+            background: #f8f9fa;
+            transform: translateY(-2px);
+        }
+        #fileInput {
+            display: none;
+        }
+        .options {
+            display: grid;
+            gap: 1rem;
+            margin: 2rem 0;
+        }
+        button {
+            background: var(--secondary);
+            color: white;
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 1rem;
+        }
+        button:hover {
+            opacity: 0.9;
+            transform: scale(1.02);
+        }
+        .result-section {
+            margin-top: 2rem;
+            display: none;
+        }
+        .image-comparison {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        .image-box {
+            position: relative;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .image-box img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        @media (max-width: 768px) {
+            .image-comparison {
+                grid-template-columns: 1fr;
+            }
+            .container {
+                margin: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="brand">Photo Enhancer Pro</div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
+    </header>
+    <div class="container">
+        <div class="upload-section">
+            <h2>Upload Photo for Enhancement</h2>
+            <div class="drag-drop-area" onclick="document.getElementById('fileInput').click()">
+                <i class="fas fa-cloud-upload-alt fa-3x"></i>
+                <p>Click to upload or drag and drop</p>
+            </div>
+            <input type="file" id="fileInput" accept="image/*">
+            <div class="options">
+                <button onclick="applyEnhancement('color')">
+                    <i class="fas fa-palette"></i> Adjust Colors
+                </button>
+                <button onclick="applyEnhancement('background')">
+                    <i class="fas fa-image"></i> Improve Background
+                </button>
+                <button onclick="applyEnhancement('lighting')">
+                    <i class="fas fa-sun"></i> Optimize Lighting
+                </button>
+            </div>
+        </div>
+        <div class="result-section" id="resultSection">
+            <h3>Enhanced Result</h3>
+            <div class="image-comparison">
+                <div class="image-box">
+                    <h4>Original</h4>
+                    <img id="originalImage" alt="Original">
+                </div>
+                <div class="image-box">
+                    <h4>Enhanced</h4>
+                    <img id="enhancedImage" alt="Enhanced">
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const fileInput = document.getElementById('fileInput');
+        const resultSection = document.getElementById('resultSection');
+        fileInput.addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    document.getElementById('originalImage').src = event.target.result;
+                    resultSection.style.display = 'block';
+                }
+                reader.readAsDataURL(file);
+            }
+        });
+        function applyEnhancement(type) {
+            // Demo enhancement - would be replaced with actual processing
+            const original = document.getElementById('originalImage').src;
+            document.getElementById('enhancedImage').src = original;
+            alert(`Applying ${type} enhancement... (demo)`);
+        }
+        // Drag and drop functionality
+        document.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+        document.addEventListener('drop', (e) => {
+            e.preventDefault();
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.startsWith('image/')) {
+                fileInput.files = e.dataTransfer.files;
+                fileInput.dispatchEvent(new Event('change'));
+            }
+        });
+    </script>
+</body>
+</html>