margin-bottom: 0.5rem !important; } .status-text { font-family: 'SF Mono', 'Monaco', monospace; color: #00b894; font-size: 0.9rem; } .image-container { border-radius: 14px !important; overflow: hidden; border: 2px solid #e1e8ed !important; background: #fafbfc !important; } footer { display: none !important; } /* Equal sizing for all image containers */ .image-upload { min-height: 200px !important; max-height: 200px !important; } .output-image { min-height: 420px !important; max-height: 420px !important; } /* Ensure consistent spacing */ .gr-row { gap: 1rem !important; } .gr-column { gap: 1rem !important; } """ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo: with gr.Column(elem_classes="header-container"): gr.HTML("""

🍌 Open Nano Banana

AI-Powered Image Style Transfer

""") with gr.Column(elem_classes="main-content"): with gr.Row(equal_height=True): # Left Column - Inputs with gr.Column(scale=1): prompt = gr.Textbox( label="Style Description", placeholder="Describe your style...", lines=3, value="Make the sheets in the style of the logo. Make the scene natural.", elem_classes="prompt-input" ) with gr.Row(equal_height=True): image1 = gr.Image( label="Primary Image", type="pil", height=200, elem_classes="image-container image-upload" ) image2 = gr.Image( label="Secondary Image", type="pil", height=200, elem_classes="image-container image-upload" ) generate_btn = gr.Button( "Generate Magic ✨", variant="primary", size="lg" ) # Right Column - Output with gr.Column(scale=1): output_image = gr.Image(