Update ui

app.py

@@ -89,7 +89,6 @@ def validate_inputs(pdf_file, logo_file, aff_logo_file, text_model, vision_model
 
 def generate_poster(pdf_file, logo_file, aff_logo_file, text_model, vision_model, poster_width, poster_height, anthropic_key, openai_key, anthropic_base_url, openai_base_url, progress=gr.Progress()):
     try:
-        # Set API keys and base URLs first
         set_api_keys(anthropic_key, openai_key, anthropic_base_url, openai_base_url)
         
         error_msg = validate_inputs(pdf_file, logo_file, aff_logo_file, text_model, vision_model, poster_width, poster_height, anthropic_key, openai_key, anthropic_base_url, openai_base_url)
@@ -185,7 +184,18 @@ Time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"""
         return None, error_msg
 
 
-with gr.Blocks(title="PosterGen") as demo:
+with gr.Blocks(title="PosterGen", css="""
+    .gradio-column {
+        margin-left: 10px !important;
+        margin-right: 10px !important;
+    }
+    .gradio-column:first-child {
+        margin-left: 0 !important;
+    }
+    .gradio-column:last-child {
+        margin-right: 0 !important;
+    }
+    """) as demo:
     
     gr.HTML("""
     <div style="text-align: center; margin-bottom: 30px;">
@@ -197,8 +207,7 @@ with gr.Blocks(title="PosterGen") as demo:
     """)
     
     with gr.Row():
-        # Column 1: Upload Files
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, variant="panel"):
             gr.Markdown("### 📄 Upload Files")
             
             pdf_file = gr.File(label="PDF Paper", file_types=[".pdf"], type="binary")
@@ -207,36 +216,36 @@ with gr.Blocks(title="PosterGen") as demo:
                 logo_file = gr.File(label="Conference Logo", file_types=["image"], type="binary")
                 aff_logo_file = gr.File(label="Affiliation Logo", file_types=["image"], type="binary")
         
-        # Column 2: API Keys, Model Settings, Dimensions, Generate Button
-        with gr.Column(scale=1):
-            gr.Markdown("### 🔑 API Keys")
-            gr.Markdown("⚠️ Keys are processed securely and not stored")
-            
-            with gr.Row():
-                anthropic_key = gr.Textbox(
-                    label="Anthropic API Key", 
-                    type="password", 
-                    placeholder="sk-ant-...",
-                    info="Required for Claude models"
-                )
-                openai_key = gr.Textbox(
-                    label="OpenAI API Key", 
-                    type="password", 
-                    placeholder="sk-...",
-                    info="Required for GPT models"
-                )
+        with gr.Column(scale=1, variant="panel"):
+            with gr.Group():
+                gr.Markdown("### 🔑 API Keys")
+                gr.Markdown("⚠️ Keys are processed securely and not stored")
                 
-            with gr.Row():
-                anthropic_base_url = gr.Textbox(
-                    label="Anthropic Base URL",
-                    placeholder="https://api.anthropic.com",
-                    info="(Optional) Set the Base URL if using compatible API services"
-                )
-                openai_base_url = gr.Textbox(
-                    label="OpenAI Base URL",
-                    placeholder="https://api.openai.com/v1",
-                    info="(Optional) Set the Base URL if using compatible API services"
-                )
+                with gr.Row():
+                    anthropic_key = gr.Textbox(
+                        label="Anthropic API Key", 
+                        type="password", 
+                        placeholder="sk-ant-...",
+                        info="Required for Claude models"
+                    )
+                    openai_key = gr.Textbox(
+                        label="OpenAI API Key", 
+                        type="password", 
+                        placeholder="sk-...",
+                        info="Required for GPT models"
+                    )
+                    
+                with gr.Row():
+                    anthropic_base_url = gr.Textbox(
+                        label="Anthropic Base URL (Optional)",
+                        placeholder="https://api.anthropic.com",
+                        info="Set the base url for compatible API services"
+                    )
+                    openai_base_url = gr.Textbox(
+                        label="OpenAI Base URL (Optional)",
+                        placeholder="https://api.openai.com/v1",
+                        info="Set the base url for compatible API services"
+                    )
             
             gr.Markdown("### 🤖 Model Settings")
             
@@ -250,16 +259,18 @@ with gr.Blocks(title="PosterGen") as demo:
                 poster_width = gr.Number(value=54, minimum=20, maximum=100, step=0.1, label="Width (inches)")
                 poster_height = gr.Number(value=36, minimum=10, maximum=60, step=0.1, label="Height (inches)")
             
-            generate_btn = gr.Button("🚀 Generate Poster", variant="primary", size="lg")
             
-        # Column 3: Status and Download
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, variant="panel"):
             gr.Markdown("### 📊 Status")
             status_output = gr.Textbox(label="Generation Status", placeholder="Click 'Generate Poster' to start...", lines=6)
             
             gr.Markdown("### 📥 Download")
             download_file = gr.File(label="Download Package")
     
+    # Generate button spanning full width
+    with gr.Row():
+        generate_btn = gr.Button("🚀 Generate Poster", variant="primary", size="lg")
+    
     def generate_and_display(*args):
         download_file_result, status_result = generate_poster(*args)
         return download_file_result, status_result