import streamlit as st
import os
from PIL import Image
import base64
from io import BytesIO
# Adjust Streamlit layout to wide mode
st.set_page_config(layout="wide")
# 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
grid_size = int(len(image_files) ** 0.5) + 1 # Calculate grid size
img_size = canvas_size[0] // grid_size # Size for each image cell
for idx, img_file in enumerate(image_files):
img_path = os.path.join(map_dir, img_file)
with Image.open(img_path) as img:
# Maintain aspect ratio
img.thumbnail((img_size, img_size), Image.Resampling.LANCZOS)
# Calculate grid position
row, col = divmod(idx, grid_size)
x = col * img_size
y = row * img_size
# Paste the image on the canvas
canvas.paste(img, (x, y), mask=img if img.mode == "RGBA" else None)
return canvas
# Encode Image as Base64 for Leaflet
def encode_image_to_base64(image):
buffer = BytesIO()
image.save(buffer, format="PNG")
encoded = base64.b64encode(buffer.getvalue()).decode()
return encoded
# Directory for images
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"""
"""
# Embed Leaflet Map in Streamlit
st.title("Interactive Dungeon Map")
st.components.v1.html(leaflet_html, height=600)