app.py

import gradio as gr
import os

# Revised CSS
custom_css = """
body, .gradio-container {
    background-color: #333 !important; /* Charcoal background */
    color: #fff !important; /* White text color */
    font-family: Arial, sans-serif !important;
    margin: 0 !important;
    overflow-x: hidden !important; /* Prevent horizontal scrollbar on main container/body */
}
.gradio-container {
    padding: 20px !important;
}

/* Container for the title elements using Flexbox */
#float-title {
    display: flex;           /* Use flexbox for layout */
    justify-content: center; /* Center the items horizontally */
    align-items: center;     /* Center the items vertically */
    width: 100%;             /* Take full width to allow centering */
    margin-top: 50px;        /* Add vertical spacing */
    margin-bottom: 30px;
    min-height: 4em;         /* Give it some height for vertical centering */
    /* overflow: hidden; /* Avoid this if possible as it might clip */
}

/* Style for the static text part */
#float-title .static-text {
    font-size: 2em;         /* Set base size */
    color: #fff;             /* Ensure text color */
    margin-right: 15px;     /* Increased space between text and link */
    white-space: nowrap;    /* Prevent wrapping */
    position: relative;     /* Helps with potential stacking/overlap issues */
    z-index: 1;             /* Try to keep text above the link background */
}

/* Style for the link part */
#float-title a {
    font-size: 2em;         /* Set base size */
    color: #EA3C53 !important;
    text-decoration: none !important;
    display: inline-block;  /* Necessary for transform to work */
    transition: transform 0.3s ease; /* Smooth scaling transition */
    transform-origin: left center; /* Scale expansion biased to the right */
    white-space: nowrap;    /* Prevent wrapping */
}

/* Apply scaling effect only to the link on hover */
#float-title a:hover {
    transform: scale(1.3); /* Reduced scale factor */
    text-decoration: none !important;
}

/* Keep other styles */
label, .gr-button {
    color: #fff !important;
    font-family: Arial, sans-serif !important;
}
.gr-button {
    background-color: #555 !important;
    border: 1px solid #777 !important;
}
.gr-button:hover {
    background-color: #EA3C53 !important;
    border: 1px solid #EA3C53 !important;
}
textarea, input[type=text] {
    background-color: #444 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
}
"""

# Create the Gradio interface with custom CSS
with gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo:

    # Revised HTML structure within gr.HTML
    gr.HTML("""
    <div id="float-title">
        <span class="static-text">App Runner Deployment >> </span>
        <a href="https://iu2ggxd43p.us-west-2.awsapprunner.com">AWS Nova Canvas</a>
    </div>
    """)

 


# Launch the Gradio app
if __name__ == "__main__":
    server_name = os.getenv("GRADIO_SERVER_NAME", "0.0.0.0")
    server_port = int(os.getenv("GRADIO_SERVER_PORT", 7860))
    demo.launch(server_name=server_name, server_port=server_port, share=False)