Marimo notebook demonstrating the unreliability of serving generated files from `public/`. Shift-refresh to see the differences.

public-files-serving-bug.py

import marimo

__generated_with = "0.18.2"
app = marimo.App(width="medium")


@app.cell
def _():
    import marimo as mo
    return (mo,)


@app.cell
def _():
    import uuid, os
    from PIL import Image, ImageDraw, ImageFont

    # Create public directory if it doesn't exist
    os.makedirs("public", exist_ok=True)

    # List to store image paths
    image_paths = []

    # Generate 5 different images
    for i in range(5):
        # Create a new image with a gradient background
        width, height = 800, 600
        _image = Image.new('RGB', (width, height))
        _draw = ImageDraw.Draw(_image)

        # Create a colorful gradient background with variation
        for y in range(height):
            r = int((255 * (y / height) + i * 50) % 255)
            g = int((150 * (1 - y / height) + i * 30) % 255)
            b = int((200 * (y / height) + i * 40) % 255)
            _draw.rectangle([(0, y), (width, y + 1)], fill=(r, g, b))

        # Draw some shapes with variation
        # Circle
        circle_color = ((255 - i * 40) % 255, (200 + i * 10) % 255, i * 50)
        _draw.ellipse([(100 + i * 10, 100 + i * 10), (300 + i * 10, 300 + i * 10)], 
                      fill=circle_color, outline=(255, 255, 255), width=3)

        # Rectangle
        rect_color = ((100 + i * 30) % 255, (200 - i * 20) % 255, (255 - i * 40) % 255)
        _draw.rectangle([(400 - i * 5, 150 + i * 10), (600 - i * 5, 350 + i * 10)], 
                        fill=rect_color, outline=(255, 255, 255), width=3)

        # Triangle (polygon)
        _triangle_points = [(650 - i * 10, 450 - i * 10), (750 - i * 10, 450 - i * 10), (700 - i * 10, 350 - i * 10)]
        triangle_color = ((255 - i * 30) % 255, (100 + i * 20) % 255, (150 + i * 15) % 255)
        _draw.polygon(_triangle_points, fill=triangle_color, outline=(255, 255, 255))

        # Add some text
        try:
            _font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 40)
        except:
            _font = ImageFont.load_default()

        _draw.text((width // 2 - 100, 50), f"PIL Image {i+1}", fill=(255, 255, 255), font=_font)

        # Save the image with random filename
        random_filename = f"pil_image_{uuid.uuid4().hex[:8]}.png"
        _pil_image_path = f"public/{random_filename}"
        _image.save(_pil_image_path, 'PNG')
        image_paths.append(_pil_image_path)
    
        f"Image {i+1} saved to {_pil_image_path}"

    image_paths
    return (image_paths,)


@app.cell
def _(image_paths, mo):
    mo.Html(
        f"""
        <div style="text-align: center; padding: 20px;">
            <h2 style="color: #333; margin-bottom: 20px;">Generated PIL Images</h2>
            <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;">
                {''.join([f'''
                <div style="flex: 0 1 auto;">
                    <img src="/{path}" title="PIL Image {i+1}, {path}" 
                         style="width: 250px; height: auto; border: 2px solid #4CAF50; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.15);">
                    <p style="margin-top: 8px; color: #666; font-size: 14px;">Image {i+1}</p>
                </div>
                ''' for i, path in enumerate(image_paths)])}
            </div>
            <p style="margin-top: 20px; color: #666; font-style: italic;">
                Created with Python PIL - Shapes and gradients
            </p>
        </div>
        """
    )
    return


if __name__ == "__main__":
    app.run()