import streamlit as st
from streamlit.components.v1 import html

# Function to create responsive iframe HTML code
def create_responsive_iframe(url):
    iframe_code = f"""
    <style>
        .iframe-container {{
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        }}
        .iframe-container iframe {{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }}
    </style>
    <div class="iframe-container">
        <iframe src="{url}"></iframe>
    </div>
    """
    return iframe_code

# Streamlit interface
st.title("Gesture Recognizer Demo")

# URL input
url = st.text_input("Enter the URL for the iframe", 
                    "https://mediapipe-studio.webapps.google.com/studio/demo/gesture_recognizer")

# Display the responsive iframe
iframe_html = create_responsive_iframe(url)
html(iframe_html, height=800)  # Adjust the height as needed