Update app.py

app.py

@@ -1,86 +1,60 @@
-import gradio as gr
-import numpy as np
-from PIL import Image, ImageDraw, ImageFont
+import os
+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
 
-# --- Core Image Processing Logic ---
+# --- Image Processing Logic (Copied from previous solution) ---
 
 def process_image_for_grid(image_pil, grid_size):
-    """Crops the image to be perfectly divisible by the grid size."""
-    if image_pil is None:
-        return None
     img_width, img_height = image_pil.size
-    tile_w = img_width // grid_size
-    tile_h = img_height // grid_size
-    
-    # If image is too small for the grid, return None to signal an error
-    if tile_w == 0 or tile_h == 0:
-        raise gr.Error(f"Image is too small for a {grid_size}x{grid_size} grid. Please use a larger image or a smaller grid size.")
-
-    # Crop the image
+    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):
-    """Scrambles an image by dividing it into a grid and shuffling the tiles based on a seed."""
     cropped_image, tile_w, tile_h = process_image_for_grid(image_pil, grid_size)
-    
-    tiles = []
-    for i in range(grid_size):
-        for j in range(grid_size):
-            box = (j * tile_w, i * tile_h, (j + 1) * tile_w, (i + 1) * tile_h)
-            tiles.append(cropped_image.crop(box))
-            
-    num_tiles = grid_size * grid_size
-    
-    # Use a seeded random generator for reproducible results
+    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(num_tiles)
-    
+    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):
-        tile_to_place = tiles[original_tile_index]
         i, j = divmod(new_pos_index, grid_size)
-        scrambled_image.paste(tile_to_place, (j * tile_w, i * tile_h))
-            
+        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):
-    """Unscrambles an image using the provided scramble_map."""
     cropped_image, tile_w, tile_h = process_image_for_grid(scrambled_pil, grid_size)
-    
-    scrambled_tiles = []
-    for i in range(grid_size):
-        for j in range(grid_size):
-            box = (j * tile_w, i * tile_h, (j + 1) * tile_w, (i + 1) * tile_h)
-            scrambled_tiles.append(cropped_image.crop(box))
-    
-    num_tiles = grid_size * 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)
-    
-    # The scramble_map tells us: new_position -> original_position
-    # We need to place each scrambled tile back to its original spot.
     for new_pos_index, original_pos_index in enumerate(scramble_map):
-        tile_to_place = scrambled_tiles[new_pos_index]
         i, j = divmod(original_pos_index, grid_size)
-        unscrambled_image.paste(tile_to_place, (j * tile_w, i * tile_h))
-        
+        unscrambled_image.paste(scrambled_tiles[new_pos_index], (j * tile_w, i * tile_h))
     return unscrambled_image
 
-
-# --- Visualization and HTML/JS Logic ---
-
-def create_mapping_visualization(scramble_map, grid_size, map_size=(512, 512)):
-    """Creates an image that visualizes the scrambling map."""
+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("arial.ttf", size=max(10, 32 - grid_size * 2))
-    except IOError:
-        font = ImageFont.load_default()
-
+    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)
@@ -93,142 +67,201 @@ def create_mapping_visualization(scramble_map, grid_size, map_size=(512, 512)):
     return vis_image
 
 def pil_to_base64(pil_image):
-    """Converts a PIL Image to a Base64 string for HTML embedding."""
     buffered = io.BytesIO()
     pil_image.save(buffered, format="PNG")
-    img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
-    return f"data:image/png;base64,{img_str}"
-
-def create_canvas_html(base64_string, width, height):
-    """Creates the HTML and JavaScript to render an image on a canvas."""
-    # The style disables right-click context menu, making it harder to save.
-    html_content = f"""
-    <div style="display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; background: #f0f0f0;">
-        <canvas id="unscrambled-canvas" width="{width}" height="{height}" style="max-width: 100%; max-height: 512px; object-fit: contain;"></canvas>
+    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">
+<head>
+    <meta charset="UTF-8">
+    <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>
+"""
+
+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>
+        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>
-        // Use a function to avoid polluting the global scope
-        function drawImageOnCanvas() {{
-            const canvas = document.getElementById('unscrambled-canvas');
-            if (!canvas) return; // Exit if canvas not found
-            const ctx = canvas.getContext('2d');
-            const img = new Image();
-            img.src = "{base64_string}";
-            img.onload = () => {{
-                // Clear canvas before drawing new image
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                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 image.", canvas.width / 2, canvas.height / 2);
-            }};
-            // Prevent right-click on the canvas to make saving harder
-            canvas.oncontextmenu = (e) => {{ e.preventDefault(); return false; }};
-        }}
-        // Ensure this runs after the Gradio component is mounted
-        setTimeout(drawImageOnCanvas, 100);
+        // 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>
-    """
-    return html_content
+</body>
+</html>
+"""
 
-# --- Main Gradio Function ---
+# --- Flask Routes ---
 
-def process_and_display(input_image, grid_size, seed):
-    """The main orchestrator function for the Gradio app."""
-    if input_image is None:
-        return None, None, "<div>Please upload an image to begin.</div>"
+@app.route('/')
+def home():
+    """Renders the main upload page."""
+    return render_template_string(HOME_PAGE_TEMPLATE, random_seed=random.randint(0, 99999))
 
-    # 1. Scramble the image
-    scrambled_img, scramble_map = scramble_image(input_image, grid_size, seed)
-    
-    # 2. Create the visualization of the map
-    map_viz_img = create_mapping_visualization(scramble_map, grid_size)
+@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.")
     
-    # 3. Unscramble the image in memory (this is never sent as a downloadable file)
-    unscrambled_img = unscramble_image(scrambled_img, scramble_map, grid_size)
-    
-    # 4. Convert the unscrambled image to Base64 and create HTML for the canvas
-    base64_unscrambled = pil_to_base64(unscrambled_img)
-    canvas_html = create_canvas_html(base64_unscrambled, unscrambled_img.width, unscrambled_img.height)
+    file = request.files['image_file']
+    if file.filename == '':
+        return render_template_string(HOME_PAGE_TEMPLATE, error="No file selected.")
 
-    return scrambled_img, map_viz_img, canvas_html
+    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)
 
-# --- Gradio UI Definition ---
+            # 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))
 
-css = """
-#output_container { max-height: 540px; }
-footer { display: none !important; }
-"""
+            # 5. Convert unscrambled image to Base64 for canvas
+            unscrambled_base64 = pil_to_base64(unscrambled_img)
 
-with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
-    gr.Markdown(
-        """
-        # 🖼️ Secure Image Scrambler & Viewer
-        This tool scrambles an image so you can share it securely. Only the scrambled version is downloadable.
-        You can then view the **unscrambled** original in a special preview window that prevents easy downloading.
-        """
-    )
-    
-    with gr.Row():
-        with gr.Column(scale=1, min_width=350):
-            input_image = gr.Image(
-                type="pil", 
-                label="Upload Image or Paste from Clipboard/URL",
-                sources=["upload", "clipboard"]
-            )
-            
-            with gr.Accordion("Settings", open=True):
-                grid_size_slider = gr.Slider(
-                    minimum=2, maximum=32, value=8, step=1, label="Grid Size (NxN)"
-                )
-                with gr.Row():
-                    seed_input = gr.Number(
-                        value=lambda: random.randint(0, 99999), label="Scramble Seed"
-                    )
-                    random_seed_btn = gr.Button("🎲")
-                    random_seed_btn.click(
-                        fn=lambda: random.randint(0, 99999), 
-                        inputs=[], 
-                        outputs=seed_input
-                    )
-            
-            submit_btn = gr.Button("Scramble & Process", variant="primary")
-            gr.Examples(
-                examples=[
-                    ["./examples/cheetah.jpg", 12, 12345],
-                    ["./examples/city.jpg", 8, 54321],
-                    ["./examples/parrot.jpg", 16, 9876]
-                ],
-                inputs=[input_image, grid_size_slider, seed_input],
-                fn=process_and_display,
+            # 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
             )
 
-        with gr.Column(scale=2):
-            with gr.Tabs(elem_id="output_container"):
-                with gr.TabItem("Scrambled Image (Downloadable)"):
-                    scrambled_output = gr.Image(
-                        label="Scrambled Image (Right-click to Save)",
-                        interactive=False,
-                    )
-                with gr.TabItem("Unscrambled Preview (Protected)"):
-                    unscrambled_canvas = gr.HTML(
-                        label="Unscrambled Preview (Not directly downloadable)"
-                    )
-                with gr.TabItem("Scrambling Map"):
-                    mapping_output = gr.Image(
-                        label="Mapping Key (Where each piece came from)", 
-                        interactive=False,
-                    )
-
-    # Connect the button to the main function
-    submit_btn.click(
-        fn=process_and_display, 
-        inputs=[input_image, grid_size_slider, seed_input], 
-        outputs=[scrambled_output, mapping_output, unscrambled_canvas]
-    )
-
-demo.launch()
+        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__':
+    app.run(host=HOST, port=PORT)