Spaces:

broadfield-dev
/

scrambled-imaged

Running

App Files Files Community

broadfield-dev commited on Jun 19

Commit

6c81541

verified ·

1 Parent(s): a2ef414

Update app.py

Browse files

Files changed (1) hide show

app.py +168 -109

app.py CHANGED Viewed

@@ -3,22 +3,23 @@ import uuid
 import base64
 import io
 import random
 from flask import Flask, request, render_template_string, send_from_directory, url_for
 from PIL import Image, ImageDraw, ImageFont
 import numpy as np
 # --- Configuration ---
-# Use os.getenv("PORT", 5000) for compatibility with services like Heroku/Hugging Face
-# The host must be '0.0.0.0' to be accessible within the Docker container
 HOST = '0.0.0.0'
-PORT = 7860 # Hugging Face Spaces exposes port 7860
-UPLOAD_FOLDER = 'temp_images'
 os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-# --- Image Processing Logic (Copied from previous solution) ---
 def process_image_for_grid(image_pil, grid_size):
     img_width, img_height = image_pil.size
@@ -71,9 +72,8 @@ def pil_to_base64(pil_image):
     pil_image.save(buffered, format="PNG")
     return base64.b64encode(buffered.getvalue()).decode("utf-8")
-# --- HTML Templates ---
-# Using render_template_string to keep everything in one file
 HOME_PAGE_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
@@ -82,40 +82,95 @@ HOME_PAGE_TEMPLATE = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Secure Image Scrambler</title>
     <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: #f8f9fa; color: #343a40; margin: 0; padding: 2rem; }
-        .container { max-width: 600px; margin: auto; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
-        h1 { color: #0056b3; }
-        form div { margin-bottom: 1.5rem; }
-        label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
-        input[type="file"], input[type="number"] { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
-        button { width: 100%; padding: 0.75rem; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }
-        button:hover { background-color: #0056b3; }
-        .error { color: #dc3545; font-weight: bold; margin-top: 1rem; }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>🖼️ Secure Image Scrambler</h1>
-        <p>Upload an image to scramble it. Only the scrambled version will be downloadable.</p>
         <form action="/process" method="post" enctype="multipart/form-data">
             <div>
-                <label for="image_file">Choose an image file:</label>
-                <input type="file" id="image_file" name="image_file" accept="image/*" required>
             </div>
             <div>
                 <label for="grid_size">Grid Size (e.g., 8 for 8x8):</label>
-                <input type="number" id="grid_size" name="grid_size" value="8" min="2" max="64" required>
             </div>
             <div>
-                <label for="seed">Scramble Seed (a number for reproducibility):</label>
                 <input type="number" id="seed" name="seed" value="{{ random_seed }}" required>
             </div>
             <button type="submit">Scramble Image</button>
         </form>
         {% if error %}
-            <p class="error">Error: {{ error }}</p>
         {% endif %}
     </div>
 </body>
 </html>
 """
@@ -128,70 +183,66 @@ RESULTS_PAGE_TEMPLATE = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Scrambled Results</title>
     <style>
-        body { font-family: sans-serif; line-height: 1.6; background-color: #f8f9fa; color: #343a40; margin: 0; padding: 2rem; }
-        .container { max-width: 1200px; margin: auto; }
-        h1 { color: #0056b3; }
         .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
-        .card { background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
-        h2 { border-bottom: 2px solid #eee; padding-bottom: 0.5rem; margin-top: 0; }
-        p { margin-top: 0; }
-        img, canvas { max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; }
-        .canvas-container { border: 1px solid #ddd; background: #f0f0f0; display: inline-block; line-height: 0; }
-        a.home-link { display: inline-block; margin-top: 2rem; padding: 0.75rem 1.5rem; background-color: #6c757d; color: white; text-decoration: none; border-radius: 4px; transition: background-color 0.2s; }
-        a.home-link:hover { background-color: #5a6268; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Results</h1>
         <div class="grid">
             <div class="card">
                 <h2>Unscrambled Preview (Protected)</h2>
-                <p>This is rendered on a canvas and is not a downloadable file.</p>
-                <div class="canvas-container">
                     <canvas id="unscrambled-canvas" width="{{ width }}" height="{{ height }}"></canvas>
                 </div>
             </div>
             <div class="card">
-                <h2>Scrambled Image (Downloadable)</h2>
-                <p>Right-click and "Save Image As..." to download this scrambled version.</p>
-                <a href="{{ scrambled_image_url }}" download>
                     <img src="{{ scrambled_image_url }}" alt="Scrambled Image">
-                </a>
             </div>
             <div class="card">
-                <h2>Scrambling Map</h2>
-                <p>This map shows the original position of the tile in each new spot.</p>
-                <a href="{{ map_image_url }}" download>
-                    <img src="{{ map_image_url }}" alt="Scrambling Map">
-                </a>
             </div>
         </div>
-        <a href="/" class="home-link">Scramble Another Image</a>
     </div>
     <script>
-        // This script is guaranteed to run after the canvas element exists in the DOM.
         const canvas = document.getElementById('unscrambled-canvas');
         const ctx = canvas.getContext('2d');
         const img = new Image();
-        // Prevent right-click context menu on the canvas.
         canvas.oncontextmenu = (e) => { e.preventDefault(); return false; };
-        // The image data is embedded directly here from the server.
         img.src = "data:image/png;base64,{{ unscrambled_base64 }}";
-        img.onload = () => {
-            // Draw the loaded image onto the canvas once it's ready.
-            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-        };
-        img.onerror = () => {
-            ctx.font = "16px Arial";
-            ctx.fillStyle = "red";
-            ctx.textAlign = "center";
-            ctx.fillText("Error loading preview.", canvas.width / 2, canvas.height / 2);
-        };
     </script>
 </body>
 </html>
@@ -202,65 +253,73 @@ RESULTS_PAGE_TEMPLATE = """
 @app.route('/')
 def home():
     """Renders the main upload page."""
-    return render_template_string(HOME_PAGE_TEMPLATE, random_seed=random.randint(0, 99999))
 @app.route('/process', methods=['POST'])
 def process_image():
     """Handles the image processing."""
-    if 'image_file' not in request.files:
-        return render_template_string(HOME_PAGE_TEMPLATE, error="No file part in the request.")
-    file = request.files['image_file']
-    if file.filename == '':
-        return render_template_string(HOME_PAGE_TEMPLATE, error="No file selected.")
-    if file:
-        try:
-            grid_size = int(request.form.get('grid_size', 8))
-            seed = int(request.form.get('seed', 12345))
-            input_image = Image.open(file.stream).convert("RGB")
-            # 1. Scramble the image
-            scrambled_img, scramble_map = scramble_image(input_image, grid_size, seed)
-            if scrambled_img is None:
-                return render_template_string(HOME_PAGE_TEMPLATE, error=f"Image is too small for a {grid_size}x{grid_size} grid. Try a larger image or smaller grid.")
-            # 2. Create the map visualization
-            map_viz_img = create_mapping_visualization(scramble_map, grid_size)
-            # 3. Unscramble the image in memory for the canvas preview
-            unscrambled_img = unscramble_image(scrambled_img, scramble_map, grid_size)
-            # 4. Save downloadable files and get their URLs
-            unique_id = uuid.uuid4()
-            scrambled_filename = f"{unique_id}_scrambled.png"
-            map_filename = f"{unique_id}_map.png"
-            scrambled_img.save(os.path.join(app.config['UPLOAD_FOLDER'], scrambled_filename))
-            map_viz_img.save(os.path.join(app.config['UPLOAD_FOLDER'], map_filename))
-            # 5. Convert unscrambled image to Base64 for canvas
-            unscrambled_base64 = pil_to_base64(unscrambled_img)
-            # 6. Render the results page
-            return render_template_string(
-                RESULTS_PAGE_TEMPLATE,
-                scrambled_image_url=url_for('get_image', filename=scrambled_filename),
-                map_image_url=url_for('get_image', filename=map_filename),
-                unscrambled_base64=unscrambled_base64,
-                width=unscrambled_img.width,
-                height=unscrambled_img.height
-            )
-        except Exception as e:
-            return render_template_string(HOME_PAGE_TEMPLATE, error=f"An error occurred: {e}")
-    return render_template_string(HOME_PAGE_TEMPLATE, error="An unknown error occurred.")
-@app.route('/temp_images/<filename>')
-def get_image(filename):
-    """Serves the generated images from the temporary directory."""
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
 if __name__ == '__main__':

 import base64
 import io
 import random
+import json
 from flask import Flask, request, render_template_string, send_from_directory, url_for
 from PIL import Image, ImageDraw, ImageFont
 import numpy as np
 # --- Configuration ---
 HOST = '0.0.0.0'
+PORT = 7860
+UPLOAD_FOLDER = 'temp_files'
 os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+# --- Image Processing Logic (Unchanged) ---
+# ... (The image processing functions are the same, so they are collapsed here for brevity)
+# You can copy them from the previous Flask answer. For clarity, they are included here again.
 def process_image_for_grid(image_pil, grid_size):
     img_width, img_height = image_pil.size
     pil_image.save(buffered, format="PNG")
     return base64.b64encode(buffered.getvalue()).decode("utf-8")
+# --- HTML Templates with Upgraded UI/UX ---
 HOME_PAGE_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Secure Image Scrambler</title>
     <style>
+        :root { --primary-color: #3b82f6; --hover-color: #2563eb; --bg-color: #f8fafc; --text-color: #334155; --border-color: #cbd5e1; }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 2rem; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+        .container { max-width: 650px; width: 100%; margin: auto; background: #fff; padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
+        h1 { color: #1e293b; text-align: center; margin-bottom: 0.5rem; }
+        .subtitle { text-align: center; color: #64748b; margin-bottom: 2.5rem; }
+        form > div { margin-bottom: 1.5rem; }
+        label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #475569; }
+        input[type="number"] { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; box-sizing: border-box; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
+        input[type="number"]:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); outline: none; }
+        button { width: 100%; padding: 0.85rem; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
+        button:hover { background-color: var(--hover-color); }
+        .error { color: #ef4444; background-color: #fee2e2; border: 1px solid #fecaca; padding: 1rem; border-radius: 8px; margin-top: 1.5rem; text-align: center; }
+        /* Drop Zone Styles */
+        .drop-zone { border: 2px dashed var(--border-color); border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
+        .drop-zone--over { border-color: var(--primary-color); background-color: #eff6ff; }
+        .drop-zone__input { display: none; }
+        .drop-zone__prompt { color: #64748b; font-size: 1.1rem; }
+        .drop-zone__prompt strong { color: var(--primary-color); }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>🖼️ Secure Image Scrambler</h1>
+        <p class="subtitle">Upload an image to create a scrambled, downloadable version and a protected, non-downloadable preview.</p>
         <form action="/process" method="post" enctype="multipart/form-data">
             <div>
+                <label>Upload Image</label>
+                <div class="drop-zone">
+                    <span class="drop-zone__prompt">Drag & drop an image here, or <strong>click to select</strong></span>
+                    <input type="file" name="image_file" class="drop-zone__input" accept="image/*" required>
+                </div>
             </div>
             <div>
                 <label for="grid_size">Grid Size (e.g., 8 for 8x8):</label>
+                <input type="number" id="grid_size" name="grid_size" value="16" min="2" max="64" required>
             </div>
             <div>
+                <label for="seed">Scramble Seed (for reproducibility):</label>
                 <input type="number" id="seed" name="seed" value="{{ random_seed }}" required>
             </div>
             <button type="submit">Scramble Image</button>
         </form>
         {% if error %}
+            <p class="error">{{ error }}</p>
         {% endif %}
     </div>
+    <script>
+        document.querySelectorAll(".drop-zone__input").forEach(inputElement => {
+            const dropZoneElement = inputElement.closest(".drop-zone");
+            dropZoneElement.addEventListener("click", e => {
+                inputElement.click();
+            });
+            inputElement.addEventListener("change", e => {
+                if (inputElement.files.length) {
+                    updateThumbnail(dropZoneElement, inputElement.files[0]);
+                }
+            });
+            dropZoneElement.addEventListener("dragover", e => {
+                e.preventDefault();
+                dropZoneElement.classList.add("drop-zone--over");
+            });
+            ["dragleave", "dragend"].forEach(type => {
+                dropZoneElement.addEventListener(type, e => {
+                    dropZoneElement.classList.remove("drop-zone--over");
+                });
+            });
+            dropZoneElement.addEventListener("drop", e => {
+                e.preventDefault();
+                if (e.dataTransfer.files.length) {
+                    inputElement.files = e.dataTransfer.files;
+                    updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
+                }
+                dropZoneElement.classList.remove("drop-zone--over");
+            });
+        });
+        function updateThumbnail(dropZoneElement, file) {
+            let promptElement = dropZoneElement.querySelector(".drop-zone__prompt");
+            if (promptElement) {
+                promptElement.textContent = `Selected: ${file.name}`;
+            }
+        }
+    </script>
 </body>
 </html>
 """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Scrambled Results</title>
     <style>
+        :root { --primary-color: #3b82f6; --bg-color: #f8fafc; --text-color: #334155; }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 2rem; }
+        .container { max-width: 1400px; margin: auto; }
+        .header { text-align: center; margin-bottom: 3rem; }
+        h1 { color: #1e293b; margin-bottom: 0.5rem; }
         .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
+        .card { background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
+        h2 { border-bottom: 1px solid #e2e8f0; padding-bottom: 0.75rem; margin-top: 0; font-size: 1.25rem; color: #1e293b; }
+        .card p { color: #64748b; flex-grow: 1; }
+        .image-container { margin-bottom: 1.5rem; text-align: center; }
+        img, canvas { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 8px; image-rendering: pixelated; }
+        .canvas-container { background: repeating-conic-gradient(#f1f5f9 0% 25%, transparent 0% 50%) 50% / 20px 20px; border-radius: 8px; }
+        .download-button, .home-link { display: block; width: 100%; text-align: center; padding: 0.75rem; background-color: var(--primary-color); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: background-color 0.2s; box-sizing: border-box; }
+        .download-button:hover, .home-link:hover { background-color: #2563eb; }
+        .home-link { background-color: #64748b; margin-top: 3rem; display: inline-block; width: auto; padding: 0.75rem 2rem; }
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="header">
+            <h1>Results</h1>
+            <p>Your image has been processed. You can download the scrambled assets or view the unscrambled version below.</p>
+        </div>
         <div class="grid">
             <div class="card">
                 <h2>Unscrambled Preview (Protected)</h2>
+                <div class="image-container canvas-container">
                     <canvas id="unscrambled-canvas" width="{{ width }}" height="{{ height }}"></canvas>
                 </div>
+                <p>This is rendered on a canvas and is not a downloadable file. Right-clicking is disabled.</p>
             </div>
             <div class="card">
+                <h2>Scrambled Image</h2>
+                <div class="image-container">
                     <img src="{{ scrambled_image_url }}" alt="Scrambled Image">
+                </div>
+                <p>This is the shuffled version of your image. It can be unscrambled with the map file.</p>
+                <a href="{{ scrambled_image_url }}" download class="download-button">Download Scrambled PNG</a>
             </div>
             <div class="card">
+                <h2>Scrambling Map File</h2>
+                <div class="image-container">
+                    <img src="{{ map_image_url }}" alt="Scrambling Map Visualization">
+                </div>
+                <p>This file contains the data needed to reconstruct the original image from the scrambled one.</p>
+                <a href="{{ map_json_url }}" download class="download-button">Download Map JSON</a>
             </div>
         </div>
+        <div style="text-align: center;">
+            <a href="/" class="home-link">Scramble Another Image</a>
+        </div>
     </div>
     <script>
         const canvas = document.getElementById('unscrambled-canvas');
         const ctx = canvas.getContext('2d');
         const img = new Image();
         canvas.oncontextmenu = (e) => { e.preventDefault(); return false; };
         img.src = "data:image/png;base64,{{ unscrambled_base64 }}";
+        img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
     </script>
 </body>
 </html>
 @app.route('/')
 def home():
     """Renders the main upload page."""
+    return render_template_string(HOME_PAGE_TEMPLATE, random_seed=random.randint(10000, 99999))
 @app.route('/process', methods=['POST'])
 def process_image():
     """Handles the image processing."""
+    if 'image_file' not in request.files or request.files['image_file'].filename == '':
+        return render_template_string(HOME_PAGE_TEMPLATE, error="No image file selected. Please upload an image.")
+    file = request.files['image_file']
+    try:
+        grid_size = int(request.form.get('grid_size', 16))
+        seed = int(request.form.get('seed', 12345))
+        input_image = Image.open(file.stream).convert("RGB")
+        # 1. Scramble
+        scrambled_img, scramble_map = scramble_image(input_image, grid_size, seed)
+        if scrambled_img is None:
+            return render_template_string(HOME_PAGE_TEMPLATE, error=f"Image is too small for a {grid_size}x{grid_size} grid. Try a larger image or smaller grid.")
+        # 2. Unscramble in memory for preview
+        unscrambled_img = unscramble_image(scrambled_img, scramble_map, grid_size)
+        unscrambled_base64 = pil_to_base64(unscrambled_img)
+        # 3. Create visualization map image
+        map_viz_img = create_mapping_visualization(scramble_map, grid_size)
+        # 4. Prepare and save downloadable files
+        unique_id = uuid.uuid4()
+        # Scrambled PNG
+        scrambled_filename = f"{unique_id}_scrambled.png"
+        scrambled_img.save(os.path.join(app.config['UPLOAD_FOLDER'], scrambled_filename))
+        # Map Visualization PNG
+        map_viz_filename = f"{unique_id}_map_viz.png"
+        map_viz_img.save(os.path.join(app.config['UPLOAD_FOLDER'], map_viz_filename))
+        # NEW: Create and save the JSON map file
+        map_json_filename = f"{unique_id}_map.json"
+        map_data = {
+            "gridSize": grid_size,
+            "seed": seed,
+            "width": scrambled_img.width,
+            "height": scrambled_img.height,
+            "scrambleMap": scramble_map.tolist() # Convert numpy array to list for JSON
+        }
+        with open(os.path.join(app.config['UPLOAD_FOLDER'], map_json_filename), 'w') as f:
+            json.dump(map_data, f, indent=2)
+        # 5. Render the results page with links to all files
+        return render_template_string(
+            RESULTS_PAGE_TEMPLATE,
+            scrambled_image_url=url_for('get_file', filename=scrambled_filename),
+            map_image_url=url_for('get_file', filename=map_viz_filename),
+            map_json_url=url_for('get_file', filename=map_json_filename), # New URL for JSON
+            unscrambled_base64=unscrambled_base64,
+            width=unscrambled_img.width,
+            height=unscrambled_img.height
+        )
+    except Exception as e:
+        return render_template_string(HOME_PAGE_TEMPLATE, error=f"An error occurred: {e}")
+@app.route('/temp_files/<filename>')
+def get_file(filename):
+    """Serves the generated files from the temporary directory."""
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
 if __name__ == '__main__':