app.py

import gradio as gr

# The local URL of your ESP32 camera stream
esp_cam_url = "http://eyecam.local/mjpeg/1"

def create_stream_html(url):
    """Creates an HTML snippet to display the MJPEG stream."""
    # MJPEG streams can be displayed directly in an <img> tag.
    # We embed this in an iframe for better isolation and layout control.
    # The 'rel="nofollow"' is good practice for external links.
    iframe_html = f"""
    <iframe srcdoc='<img src="{url}" width="100%" height="auto" rel="nofollow"/>'
            width="640"
            height="480"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
    </iframe>
    """
    return iframe_html

with gr.Blocks() as demo:
    gr.Markdown("# ESP32 Cam Live Stream")
    gr.Markdown(
        "This interface attempts to display a live stream from an ESP32 camera on the local network. "
        "**Note:** This will only work if your computer can directly access the camera's URL."
    )
    
    # Using the gr.HTML component to render the iframe
    gr.HTML(create_stream_html(esp_cam_url))

if __name__ == "__main__":
    # To run this app locally and make it accessible on your network
    demo.launch(share=True)