**Optionen** (alle optional, mit Standardwerten):

- `--blur` (float, Standard 1.2): Stärke des Gaußschen Weichzeichners vor Kantenerkennung
- `--edge` {canny, sobel, laplace}, Standard canny
- `--canny-low` (int, 80) / `--canny-high` (int, 160)
- `--sobel-ksize` {3,5,7}, Standard 3
- `--laplace-ksize` {3,5,7}, Standard 3
- `--threshold` {otsu,fixed,adaptive,posterize}, Standard otsu
- `--fixed-thresh` (0–255), Standard 128
- `--posterize-levels` (2–6), Standard 3
- `--adaptive-block` (ungerade int), Standard 25
- `--adaptive-C` (int), Standard 7
- `--line-thickness` (int), Standard 2
- `--line-jitter` (float 0–1), Standard 0.15
- `--hatch` (Flag): Schraffur aktivieren
- `--hatch-angle` (Grad), Standard 45
- `--hatch-spacing` (Pixel), Standard 8
- `--hatch-thickness` (Pixel), Standard 1
- `--invert` (Flag): invertiert das Endbild
- `--contrast-boost` (float), Standard 1.0 (Gamma-Korrektur vor Threshold)
- `--suffix` (string), Standard "_sketch"
- `--seed` (int), Standard 42
- `--jobs` (int), Standard 0 (seriell)
- `--preview` (Flag): zeigt interaktive Vorschau
- `--dryrun` (Flag): zeigt Parameter, führt nichts aus
- `--selftest` (Flag): führt interne Tests mit synthetischen Bildern durch

---

## Verarbeitungs-Pipeline (Schritte exakt implementieren):

1. **Laden & Umwandlung**
- Lade Bild (BGR)
- Konvertiere in Graustufen (float32 0..1)

2. **Optional: Kontrastverstärkung**
- Falls `contrast-boost` ≠ 1.0 → Gamma-Korrektur anwenden

3. **Weichzeichnen**
- Gaußscher Weichzeichner mit Sigma = `--blur`

4. **Schwellwert/Posterize**
- Je nach Option:
- Otsu → binäres Bild automatisch
- Fixed → fester Schwellwert
- Adaptive → cv2.ADAPTIVE_THRESH_GAUSSIAN_C
- Posterize → Tonwertreduktion auf n Stufen

5. **Kantenerkennung**
- `canny`: Canny mit low/high
- `sobel`: Gradientenmagnitude, normieren, threshold automatisch
- `laplace`: Absolutwert, normieren, threshold automatisch

6. **Linienstilisierung**
- Morphologische Dilatation → `line-thickness`
- Handgezeichneter Effekt: leichte Koordinatenverschiebung mittels geglättetem Zufallsfeld (`line-jitter`)

7. **Schraffur (optional)**
- Erzeuge diagonales Linienmuster mit Abstand `hatch-spacing`, Dicke `hatch-thickness`, Rotation `hatch-angle`
- Moduliere Deckung basierend auf Tonwertmaske aus Schritt 4 (dunkle Bereiche → dichter schraffiert)
- Linien nicht über Kanten legen

8. **Komposition**
- Starte mit weißem Canvas
- Zeichne schwarze Linien (Edges)
- Füge Schraffur hinzu, ohne helle Flächen zu übermalen
- Optional invertieren (`--invert`)

9. **Speichern / Vorschau**
- Ergebnisse als PNG speichern, Dateiname = Originalname + `--suffix`
- Bei Preview → Fenster öffnen, Taste schließt

---

## Implementierungshinweise

- Strukturiere Code in klar getrennte Funktionen mit Type Hints und Docstrings:
`load_image`, `to_grayscale`, `apply_contrast`, `gaussian_blur`, `threshold_stage`, `detect_edges`, `stylize_edges`, `generate_hatching`, `compose_final`, `save_image`, `process_path`.
- Verwende `numpy.random.default_rng(seed)` für deterministische Effekte.
- Unterstütze sowohl Einzelbilder als auch Ordnerverarbeitung.
- Fehler sollen mit verständlichen Meldungen ausgegeben werden.
- Debug-Modus: Wenn `--suffix` “_debug” enthält, speichere zusätzliche Zwischenschritte (`_gray.png`, `_thresh.png`, `_edges.png`, `_lines.png`, `_hatch.png`).
- Implementiere `--selftest`: Erzeuge synthetisches Testbild (Kreise, Rechtecke, Verlauf), teste 3 Presets (Canny+Otsu, Sobel+Posterize+Hatch, Canny+Adaptive+Invert).

---

## Ästhetische Anforderungen

- Kanten sollen kräftig und leicht unregelmäßig sein (kein steriler Canny-Look).
- Schraffuren sollen dunkle Flächen füllen, aber helle freilassen.
- Standardparameter sollen auf typischen Fotos sofort gute Ergebnisse liefern.

Schreibe jetzt den **vollständigen Code für `sketchify.py`**.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Sketchify Magic Wand
-emoji: 🐨
-colorFrom: red
-colorTo: green
+title: Sketchify Magic Wand ✨
+colorFrom: blue
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,303 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sketchify - AI Image to Sketch Converter</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        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);
+        }
+        .sketch-border {
+            border: 2px solid #2d3748;
+            box-shadow: 4px 4px 0px #2d3748;
+        }
+        .upload-area {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s ease;
+        }
+        .upload-area:hover, .upload-area.dragover {
+            border-color: #667eea;
+            background-color: rgba(102, 126, 234, 0.05);
+        }
+        .loading-spinner {
+            border: 3px solid #f3f4f6;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .parameter-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: #e2e8f0;
+            outline: none;
+        }
+        .parameter-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+    </style>
+</head>
+<body class="min-h-screen gradient-bg">
+    <div id="vanta-bg" class="fixed inset-0 z-0"></div>
+    
+    <!-- Navigation -->
+    <nav class="relative z-10 glass-effect rounded-2xl mx-4 mt-4 p-4">
+        <div class="flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="pen-tool" class="text-white"></i>
+                <h1 class="text-2xl font-bold text-white">Sketchify</h1>
+            </div>
+            <div class="flex space-x-4">
+                <button class="text-white hover:text-gray-200 transition-colors">
+                    <i data-feather="help-circle"></i>
+                </button>
+                <button class="text-white hover:text-gray-200 transition-colors">
+                    <i data-feather="settings"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="relative z-10 container mx-auto px-4 py-8">
+        <div class="max-w-6xl mx-auto">
+            <!-- Hero Section -->
+            <div class="text-center mb-12">
+                <h2 class="text-5xl font-bold text-white mb-4">Transform Photos into Artistic Sketches</h2>
+                <p class="text-xl text-gray-200 mb-8">Upload any image and watch it transform into a beautiful hand-drawn sketch with AI magic</p>
+            </div>
+
+            <!-- Upload & Preview Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
+                <!-- Upload Area -->
+                <div class="glass-effect rounded-2xl p-8">
+                    <div class="upload-area rounded-xl p-8 text-center cursor-pointer" id="uploadArea">
+                        <i data-feather="upload-cloud" class="w-16 h-16 text-gray-400 mx-auto mb-4"></i>
+                        <h3 class="text-xl font-semibold text-white mb-2">Drop your image here</h3>
+                        <p class="text-gray-300 mb-4">or click to browse files</p>
+                        <input type="file" id="fileInput" class="hidden" accept="image/*">
+                        <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors">
+                            Select Image
+                        </button>
+                    </div>
+                    
+                    <!-- Parameters -->
+                    <div class="mt-8">
+                        <h4 class="text-lg font-semibold text-white mb-4">Sketch Parameters</h4>
+                        
+                        <!-- Edge Detection -->
+                        <div class="mb-6">
+                            <label class="block text-gray-200 mb-2">Edge Detection Method</label>
+                            <select class="w-full bg-white/10 border border-gray-300/30 rounded-lg px-4 py-2 text-white">
+                                <option value="canny">Canny</option>
+                                <option value="sobel">Sobel</option>
+                                <option value="laplace">Laplace</option>
+                            </select>
+                        </div>
+
+                        <!-- Blur Strength -->
+                        <div class="mb-6">
+                            <div class="flex justify-between text-gray-200 mb-2">
+                                <span>Blur Strength</span>
+                                <span id="blurValue">1.2</span>
+                            </div>
+                            <input type="range" min="0.1" max="3.0" step="0.1" value="1.2" class="parameter-slider" id="blurSlider">
+                        </div>
+
+                        <!-- Line Thickness -->
+                        <div class="mb-6">
+                            <div class="flex justify-between text-gray-200 mb-2">
+                                <span>Line Thickness</span>
+                                <span id="thicknessValue">2</span>
+                            </div>
+                            <input type="range" min="1" max="10" value="2" class="parameter-slider" id="thicknessSlider">
+                        </div>
+
+                        <!-- Toggles -->
+                        <div class="grid grid-cols-2 gap-4">
+                            <label class="flex items-center text-gray-200">
+                                <input type="checkbox" class="mr-2">
+                                <span>Hatching</span>
+                            </label>
+                            <label class="flex items-center text-gray-200">
+                                <input type="checkbox">
+                                <span class="ml-2">Invert</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Preview Area -->
+                <div class="glass-effect rounded-2xl p-8">
+                    <h3 class="text-xl font-semibold text-white mb-4">Preview</h3>
+                    <div class="bg-black/20 rounded-xl p-8 min-h-[400px] flex items-center justify-center" id="previewArea">
+                        <div class="text-center text-gray-400">
+                            <i data-feather="image" class="w-16 h-16 mx-auto mb-4"></i>
+                            <p>Your sketch will appear here</p>
+                        </div>
+                    </div>
+                    
+                    <!-- Action Buttons -->
+                    <div class="mt-6 flex space-x-4">
+                        <button class="flex-1 bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-medium transition-colors flex items-center justify-center">
+                        <i data-feather="play" class="w-4 h-4 mr-2"></i>
+                        Generate Sketch
+                    </button>
+                    <button class="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-3 rounded-lg font-medium transition-colors">
+                        <i data-feather="download" class="w-4 h-4 mr-2"></i>
+                        Download
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Features Section -->
+        <div class="glass-effect rounded-2xl p-8 mb-12">
+            <h3 class="text-2xl font-bold text-white text-center mb-8">Powerful Sketch Features</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="text-center p-6">
+                    <i data-feather="zap" class="w-12 h-12 text-blue-400 mx-auto mb-4"></i>
+                    <h4 class="text-lg font-semibold text-white mb-2">Real-time Processing</h4>
+                    <p class="text-gray-300">See your image transform instantly with live preview</p>
+                </div>
+                <div class="text-center p-6">
+                    <i data-feather="sliders" class="w-12 h-12 text-green-400 mx-auto mb-4"></i>
+                    <h4 class="text-lg font-semibold text-white mb-2">Advanced Controls</h4>
+                    <p class="text-gray-300">Fine-tune every aspect of your sketch with precision</p>
+                </div>
+                <div class="text-center p-6">
+                    <i data-feather="download-cloud" class="w-12 h-12 text-purple-400 mx-auto mb-4"></i>
+                    <h4 class="text-lg font-semibold text-white mb-2">Multiple Export</h4>
+                    <p class="text-gray-300">Save in various formats optimized for different uses</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="relative z-10 text-center py-6 text-gray-300">
+        <p>Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> using AI magic</p>
+    </footer>
+
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x667eea,
+            backgroundColor: 0x0
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+
+        // Upload area functionality
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const previewArea = document.getElementById('previewArea');
+
+        uploadArea.addEventListener('click', () => fileInput.click());
+        
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleImageUpload(files[0]);
+            }
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleImageUpload(e.target.files[0]);
+            }
+        });
+
+        function handleImageUpload(file) {
+            if (!file.type.match('image.*')) {
+                alert('Please upload an image file');
+                return;
+            }
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                previewArea.innerHTML = `
+                    <img src="${e.target.result}" alt="Preview" class="max-w-full max-h-80 rounded-lg sketch-border">
+                `;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        // Parameter sliders
+        const blurSlider = document.getElementById('blurSlider');
+        const blurValue = document.getElementById('blurValue');
+        const thicknessSlider = document.getElementById('thicknessSlider');
+        const thicknessValue = document.getElementById('thicknessValue');
+
+        blurSlider.addEventListener('input', (e) => {
+            blurValue.textContent = e.target.value;
+        });
+
+        thicknessSlider.addEventListener('input', (e) => {
+            thicknessValue.textContent = e.target.value;
+        });
+
+        // Add some interactive animations
+        document.addEventListener('DOMContentLoaded', () => {
+            const elements = document.querySelectorAll('.glass-effect');
+            elements.forEach((el, index) => {
+                el.style.opacity = '0';
+                el.style.transform = 'translateY(20px)';
+                
+                setTimeout(() => {
+                    el.style.transition = 'all 0.6s ease';
+                    el.style.opacity = '1';
+                    el.style.transform = 'translateY(0)';
+                }, index * 100);
+            });
+        });
+    </script>
+</body>
 </html>