app.py

import gradio as gr
import os

# Define the function for the Gradio interface (keeping the previous example)
def greet(name):
    """Returns a greeting string for the given name."""
    if not name:
        return "Hello!"
    return f"Hello, {name}!"

# CSS extracted and adapted from the FastAPI app's HTML
# We target specific elements or use broader selectors for Gradio
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;
}
/* Add padding to the main container */
.gradio-container {
    padding: 20px !important;
}

/* Style the specific Markdown h1 using its generated ID or a custom one */
/* Let's wrap the markdown in a div with an ID for easier targeting */
#float-title h1 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px; /* Add some spacing */
    transition: font-size 0.3s ease;
}
#float-title h1:hover {
    font-size: 3em; /* Hover effect */
}
#float-title a {
    color: #EA3C53 !important; /* Link color */
    text-decoration: none !important;
}
#float-title a:hover {
    text-decoration: none !important;
}

/* Style other Gradio elements for better contrast/consistency */
label, .gr-button {
    color: #fff !important; /* Ensure labels and buttons use white text */
    font-family: Arial, sans-serif !important;
}
.gr-button {
    background-color: #555 !important; /* Darker button background */
    border: 1px solid #777 !important;
}
.gr-button:hover {
    background-color: #EA3C53 !important; /* Use link color on hover */
    border: 1px solid #EA3C53 !important;
}
textarea, input[type=text] {
    background-color: #444 !important; /* Darker input fields */
    color: #fff !important;
    border: 1px solid #666 !important;
}

"""

# Create the Gradio interface with custom CSS
# theme='dark' can also help set a base dark mode
with gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo:

    # Add the styled title using Markdown wrapped in a div with an ID
    with gr.Row():
      with gr.Column(): # Use column to center potentially
          gr.HTML("""
          <div id="float-title">
              <h1><a href="https://iu2ggxd43p.us-west-2.awsapprunner.com//">AWS Nova Canvas</a></h1>
              <h3>App Runner Deployment</h3>
          </div>
          """) # Use HTML component for better control if needed

    


# 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))
    # Set share=False for deployment environments like App Runner
    demo.launch(server_name=server_name, server_port=server_port, share=False)