# This is a simple Gradio app that embeds an iframe to display an external Hugging Face Space.
import gradio as gr

# Define the CSS to embed the iframe
css = """
.iframe-container {
    position: relative;
    width: 100%;
    height: 100;
    padding-bottom: 53.33%; /* 450 / 850 * 100 */
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 10px;
}
"""

# Create a Gradio Blocks app
with gr.Blocks(css=css) as demo:
    # Add a Markdown component to provide some context
    gr.Markdown("## Centurion ")
    # Add a HTML component to embed the iframe
    gr.HTML('<div class="iframe-container"><iframe src="https://noumanjavaid-centii.hf.space"></iframe></div>')

# Launch the app
demo.launch(show_error=True)