Update app.py

app.py

@@ -1,147 +1,79 @@
 import streamlit as st
 import os
 from PIL import Image
-import random
-from io import BytesIO
-import datetime
 import base64
+from io import BytesIO
 
 # Adjust Streamlit layout to wide mode
 st.set_page_config(layout="wide")
 
-# Function to arrange images dynamically
-def arrange_images(image_files, canvas_size=(3000, 3000)):
-    if not image_files:
-        return None
-
-    positions = []  # Keeps track of image positions (x1, y1, x2, y2)
+# Generate Map as an Image
+def generate_map(image_files, canvas_size=(3000, 3000)):
     canvas = Image.new("RGBA", canvas_size, "white")
+    if not image_files:
+        return canvas
 
-    def get_center(pos):
-        """Calculate center of a bounding box (x1, y1, x2, y2)."""
-        return ((pos[0] + pos[2]) // 2, (pos[1] + pos[3]) // 2)
-
-    def does_overlap(new_box, existing_boxes):
-        """Check if a new bounding box overlaps any existing boxes."""
-        for box in existing_boxes:
-            if (
-                new_box[0] < box[2]
-                and new_box[2] > box[0]
-                and new_box[1] < box[3]
-                and new_box[3] > box[1]
-            ):
-                return True
-        return False
-
-    # Place the first image at the center of the canvas
-    first_img_path = os.path.join(map_dir, image_files[0])
-    with Image.open(first_img_path) as img:
-        width, height = img.size
-        x1 = (canvas_size[0] - width) // 2
-        y1 = (canvas_size[1] - height) // 2
-        x2, y2 = x1 + width, y1 + height
-        positions.append((x1, y1, x2, y2))
-        canvas.paste(img, (x1, y1))
-
-    # Place remaining images
-    for img_file in image_files[1:]:
-        placed = False
+    for i, img_file in enumerate(image_files):
         img_path = os.path.join(map_dir, img_file)
-
         with Image.open(img_path) as img:
-            width, height = img.size
-
-            while not placed:
-                target_box = random.choice(positions)
-                target_center = get_center(target_box)
-                side = random.choice(["top", "bottom", "left", "right"])
+            img = img.resize((500, 500))  # Resize for demonstration
+            x = (i % 5) * 600  # Example placement logic
+            y = (i // 5) * 600
+            canvas.paste(img, (x, y))
 
-                if side == "top":
-                    x1 = target_center[0] - width // 2
-                    y1 = target_box[1] - height
-                elif side == "bottom":
-                    x1 = target_center[0] - width // 2
-                    y1 = target_box[3]
-                elif side == "left":
-                    x1 = target_box[0] - width
-                    y1 = target_center[1] - height // 2
-                elif side == "right":
-                    x1 = target_box[2]
-                    y1 = target_center[1] - height // 2
-
-                x2, y2 = x1 + width, y1 + height
-
-                if not does_overlap((x1, y1, x2, y2), positions):
-                    positions.append((x1, y1, x2, y2))
-                    canvas.paste(img, (x1, y1))
-                    placed = True
+    return canvas
 
+# Encode Image as Base64 for Leaflet
+def encode_image_to_base64(image):
     buffer = BytesIO()
-    canvas.save(buffer, format="PNG")
-    buffer.seek(0)
-    return buffer, canvas
-
-# Function to create a base64 download link
-def create_download_link(image_bytes, filename):
-    b64 = base64.b64encode(image_bytes.getvalue()).decode()
-    href = f'<a href="data:image/png;base64,{b64}" download="{filename}">📥 Download {filename}</a>'
-    return href
-
-# Streamlit App
-st.title("Dynamic Dungeon Map Generator")
+    image.save(buffer, format="PNG")
+    encoded = base64.b64encode(buffer.getvalue()).decode()
+    return encoded
 
 # Directory for images
-map_dir = "."
-canvas_size = 3000
-
-# Initialize session state
-if "layout_image" not in st.session_state:
-    st.session_state["layout_image"] = None
-if "canvas" not in st.session_state:
-    st.session_state["canvas"] = None
-
-# Generate map if layout_image is empty
-if st.session_state["layout_image"] is None:
-    image_files = [f for f in os.listdir(map_dir) if f.endswith(".png")]
-    if image_files:
-        layout_image, canvas = arrange_images(image_files, canvas_size=(canvas_size, canvas_size))
-        st.session_state["layout_image"] = layout_image
-        st.session_state["canvas"] = canvas
-
-# Display map with scroll and zoom controls
-if st.session_state["layout_image"] is not None:
-    st.image(
-        st.session_state["layout_image"],
-        caption="Generated Dungeon Map Layout",
-        use_container_width=True,
-        output_format="PNG",
-        clamp=True,
-    )
-
-# Sidebar Controls
-st.sidebar.title("Map Controls")
-if st.sidebar.button("💾 Save Map"):
-    now = datetime.datetime.now()
-    filename = f"dungeon_map_{now.strftime('%Y%m%d_%H%M%S')}.png"
-    st.session_state["canvas"].save(filename)
-    st.sidebar.success(f"Map saved as {filename}")
-
-if st.sidebar.button("🗺️ Regenerate Map"):
-    image_files = [f for f in os.listdir(map_dir) if f.endswith(".png")]
-    if image_files:
-        layout_image, canvas = arrange_images(image_files, canvas_size=(canvas_size, canvas_size))
-        st.session_state["layout_image"] = layout_image
-        st.session_state["canvas"] = canvas
-        st.rerun()
-
-# Zoom controls
-st.sidebar.title("Zoom")
-zoom_level = st.sidebar.slider("Zoom Level", min_value=0.5, max_value=2.0, value=1.0, step=0.1)
-st.image(
-    st.session_state["layout_image"],
-    caption="Zoomed Dungeon Map Layout",
-    use_container_width=False,
-    output_format="PNG",
-    clamp=True,
-    width=int(canvas_size * zoom_level),
-)
+map_dir = "."  # Replace with your directory containing images
+image_files = [f for f in os.listdir(map_dir) if f.endswith(".png")]
+
+# Generate the map
+canvas_size = (3000, 3000)
+canvas = generate_map(image_files, canvas_size)
+encoded_image = encode_image_to_base64(canvas)
+
+# Leaflet HTML Template
+leaflet_html = f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <style>
+        #map {{
+            height: 100vh;
+        }}
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script>
+        // Initialize the map
+        var map = L.map('map').setView([0, 0], 1);
+
+        // Add the image overlay
+        var bounds = [[-1500, -1500], [1500, 1500]];
+        var image = L.imageOverlay("data:image/png;base64,{encoded_image}", bounds).addTo(map);
+
+        // Set the map view to the bounds of the image
+        map.fitBounds(bounds);
+
+        // Add zoom controls
+        L.control.zoom({{
+            position: 'topright'
+        }}).addTo(map);
+    </script>
+</body>
+</html>
+"""
+
+# Embed Leaflet Map in Streamlit
+st.title("Interactive Dungeon Map")
+st.components.v1.html(leaflet_html, height=600)