Spaces:

broadfield-dev
/

scrambled-imaged

Running

App Files Files Community

broadfield-dev commited on Jun 19

Commit

2cbb464

verified ·

1 Parent(s): 6c81541

Update app.py

Browse files

Files changed (1) hide show

app.py +139 -323

app.py CHANGED Viewed

@@ -1,326 +1,142 @@
 import os
-import uuid
-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
-    tile_w, tile_h = img_width // grid_size, img_height // grid_size
-    if tile_w == 0 or tile_h == 0: return None, None, None
-    cropped_image = image_pil.crop((0, 0, tile_w * grid_size, tile_h * grid_size))
-    return cropped_image, tile_w, tile_h
-def scramble_image(image_pil, grid_size, seed):
-    cropped_image, tile_w, tile_h = process_image_for_grid(image_pil, grid_size)
-    if not cropped_image: return None, None
-    tiles = [cropped_image.crop((j * tile_w, i * tile_h, (j + 1) * tile_w, (i + 1) * tile_h)) for i in range(grid_size) for j in range(grid_size)]
-    rng = np.random.default_rng(seed=int(seed))
-    scramble_map = rng.permutation(len(tiles))
-    scrambled_image = Image.new('RGB', cropped_image.size)
-    for new_pos_index, original_tile_index in enumerate(scramble_map):
-        i, j = divmod(new_pos_index, grid_size)
-        scrambled_image.paste(tiles[original_tile_index], (j * tile_w, i * tile_h))
-    return scrambled_image, scramble_map
-def unscramble_image(scrambled_pil, scramble_map, grid_size):
-    cropped_image, tile_w, tile_h = process_image_for_grid(scrambled_pil, grid_size)
-    if not cropped_image: return None
-    scrambled_tiles = [cropped_image.crop((j * tile_w, i * tile_h, (j + 1) * tile_w, (i + 1) * tile_h)) for i in range(grid_size) for j in range(grid_size)]
-    unscrambled_image = Image.new('RGB', cropped_image.size)
-    for new_pos_index, original_pos_index in enumerate(scramble_map):
-        i, j = divmod(original_pos_index, grid_size)
-        unscrambled_image.paste(scrambled_tiles[new_pos_index], (j * tile_w, i * tile_h))
-    return unscrambled_image
-def create_mapping_visualization(scramble_map, grid_size):
-    map_size=(512, 512)
-    vis_image = Image.new('RGB', map_size, color='lightgray')
-    draw = ImageDraw.Draw(vis_image)
-    try: font = ImageFont.truetype("DejaVuSans.ttf", size=max(10, 32 - grid_size * 2))
-    except IOError: font = ImageFont.load_default()
-    tile_w, tile_h = map_size[0] // grid_size, map_size[1] // grid_size
-    for new_pos_index, original_pos_index in enumerate(scramble_map):
-        i, j = divmod(new_pos_index, grid_size)
-        x0, y0 = j * tile_w, i * tile_h
-        draw.rectangle([x0, y0, x0 + tile_w, y0 + tile_h], outline='black')
-        text = str(original_pos_index)
-        text_bbox = draw.textbbox((0, 0), text, font=font)
-        text_w, text_h = text_bbox[2] - text_bbox[0], text_bbox[3] - text_bbox[1]
-        draw.text((x0 + (tile_w - text_w) / 2, y0 + (tile_h - text_h) / 2), text, fill='black', font=font)
-    return vis_image
-def pil_to_base64(pil_image):
-    buffered = io.BytesIO()
-    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">
-<head>
-    <meta charset="UTF-8">
-    <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>
-"""
-RESULTS_PAGE_TEMPLATE = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <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>
-"""
-# --- Flask Routes ---
-@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__':
-    app.run(host=HOST, port=PORT)

+import gradio as gr
+import numpy as np
+from PIL import Image
+import json
 import os
 import random
+import math
+# Create a directory for temporary files if it doesn't exist
+if not os.path.exists("temp"):
+    os.makedirs("temp")
+def scramble_image(image_pil, block_size):
+    """
+    Scrambles an image by dividing it into blocks and shuffling their positions.
+    Args:
+        image_pil (PIL.Image.Image): The input image.
+        block_size (int): The size of the square blocks to divide the image into.
+    Returns:
+        tuple: A tuple containing:
+            - PIL.Image.Image: The scrambled image.
+            - dict: The JSON data representing the scramble map.
+            - str: The file path to the saved JSON file for download.
+    """
+    if image_pil is None:
+        raise gr.Error("Please upload an image first!")
+    # Convert PIL Image to a NumPy array
+    img_np = np.array(image_pil)
+    h, w, _ = img_np.shape
+    # Calculate the number of blocks, ignoring edges that don't fit a full block
+    num_blocks_h = h // block_size
+    num_blocks_w = w // block_size
+    if num_blocks_h == 0 or num_blocks_w == 0:
+        raise gr.Error(f"Image is too small for a block size of {block_size}. Please use a smaller block size.")
+    # Create a list of block indices
+    block_indices = list(range(num_blocks_h * num_blocks_w))
+    # Shuffle the indices to create the scramble map
+    scrambled_indices = random.sample(block_indices, len(block_indices))
+    # Create a new blank image array to build the scrambled image
+    scrambled_img_np = np.zeros_like(img_np)
+    # Reassemble the image using the scrambled map
+    for i, original_idx in enumerate(scrambled_indices):
+        # Position in the new (scrambled) grid
+        new_row, new_col = divmod(i, num_blocks_w)
+        # Position in the original grid
+        original_row, original_col = divmod(original_idx, num_blocks_w)
+        # Get the pixel block from the original image
+        block = img_np[
+            original_row * block_size : (original_row + 1) * block_size,
+            original_col * block_size : (original_col + 1) * block_size
+        ]
+        # Place the block into the new scrambled image
+        scrambled_img_np[
+            new_row * block_size : (new_row + 1) * block_size,
+            new_col * block_size : (new_col + 1) * block_size
+        ] = block
+    # Convert the scrambled NumPy array back to a PIL Image
+    scrambled_image_pil = Image.fromarray(scrambled_img_np)
+    # --- JSON and File Output ---
+    json_data = {
+        "original_dimensions": {"width": w, "height": h},
+        "block_size": block_size,
+        "scramble_map": scrambled_indices
+    }
+    # Save the JSON data to a temporary file
+    json_filepath = os.path.join("temp", "scramble_key.json")
+    with open(json_filepath, 'w') as f:
+        json.dump(json_data, f, indent=4)
+    return scrambled_image_pil, json_data, json_filepath
+# --- Gradio UI with Styling ---
+# Use a pre-built theme for a modern look
+theme = gr.themes.Soft(
+    primary_hue="blue",
+    secondary_hue="sky"
+).set(
+    # Custom CSS for the file drop zone
+    block_label_background_fill="*primary_50",
+    block_label_border_width="1px",
+    block_label_border_color="*primary_200",
+    block_label_text_color="*primary_500",
+)
+# Use gr.Blocks for custom layouts
+with gr.Blocks(theme=theme, css=".gradio-container {max-width: 960px !important}") as demo:
+    gr.Markdown(
+        """
+        # 🖼️ Image Scrambler & Key Generator
+        Drag and drop an image below, choose a block size, and hit "Scramble" to generate a scrambled version
+        and a downloadable JSON key file that describes how to unscramble it.
+        """
+    )
+    with gr.Row(variant="panel"):
+        # Column 1: Inputs
+        with gr.Column(scale=1):
+            # The gr.Image component automatically creates a file drop area
+            image_input = gr.Image(
+                type="pil",
+                label="Drop Your Image Here",
+                height=300
+            )
+            block_size_slider = gr.Slider(
+                minimum=8,
+                maximum=128,
+                step=8,
+                value=32,
+                label="Scramble Block Size (pixels)"
+            )
+            submit_btn = gr.Button("Scramble Image", variant="primary")
+        # Column 2: Outputs
+        with gr.Column(scale=2):
+            scrambled_output_image = gr.Image(label="Scrambled Result", height=400, interactive=False)
+            with gr.Accordion("View & Download Scramble Key", open=False):
+                json_output_display = gr.JSON(label="Scramble Key Data")
+                # The gr.File component provides the download button
+                json_output_file = gr.File(label="Download Key File (.json)", file_count="single")
+    # Define the click action: inputs -> function -> outputs
+    submit_btn.click(
+        fn=scramble_image,
+        inputs=[image_input, block_size_slider],
+        outputs=[scrambled_output_image, json_output_display, json_output_file]
+    )
+if __name__ == "__main__":
+    demo.launch()