Spaces:
Running
Running
File size: 3,189 Bytes
9254129 1ac8216 9254129 3a46b6b 1ac8216 3a46b6b 1ac8216 9254129 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 9254129 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 3a46b6b 1ac8216 9254129 1ac8216 9254129 3a46b6b 1ac8216 3a46b6b 9254129 1ac8216 9254129 1ac8216 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
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) |