Update app.py

app.py

@@ -213,8 +213,180 @@ def build_ui() -> gr.Blocks:
     # Create transformer instance
     transformer = ImageTransformer()
     
+    # Custom CSS
+    custom_css = """
+    /* Main theme colors */
+    :root {
+      --primary-color: #3a506b;
+      --secondary-color: #5bc0be;
+      --accent-color: #ffd166;
+      --background-color: #f8f9fa;
+      --text-color: #1c2541;
+      --border-radius: 8px;
+      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Global styles */
+    body {
+      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+      background-color: var(--background-color);
+      color: var(--text-color);
+    }
+
+    /* Header styling */
+    .app-header {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      padding: 16px 24px;
+      background: linear-gradient(135deg, var(--primary-color), #1c2541);
+      color: white;
+      border-radius: var(--border-radius);
+      margin-bottom: 24px;
+      box-shadow: var(--box-shadow);
+    }
+
+    .app-header img {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background-color: white;
+      padding: 6px;
+    }
+
+    .app-header h1 {
+      margin: 0;
+      font-size: 1.8rem;
+      font-weight: 700;
+    }
+
+    .app-header p {
+      margin: 4px 0 0 0;
+      opacity: 0.9;
+      font-size: 0.9rem;
+    }
+
+    .app-header a {
+      color: var(--accent-color);
+      text-decoration: none;
+      transition: opacity 0.2s;
+    }
+
+    .app-header a:hover {
+      opacity: 0.8;
+      text-decoration: underline;
+    }
+
+    /* Accordion styling */
+    .accordion-container {
+      margin-bottom: 20px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: var(--border-radius);
+      overflow: hidden;
+    }
+
+    .accordion-header {
+      background-color: var(--primary-color);
+      color: white;
+      padding: 12px 16px;
+      font-weight: 600;
+    }
+
+    .accordion-content {
+      padding: 16px;
+      background-color: white;
+    }
+
+    /* Main content area */
+    .main-container {
+      display: flex;
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+
+    /* Input column */
+    .input-column {
+      flex: 1;
+      background-color: white;
+      padding: 20px;
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+    }
+
+    /* Output column */
+    .output-column {
+      flex: 1;
+      background-color: white;
+      padding: 20px;
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+    }
+
+    /* Button styling */
+    .generate-button {
+      background-color: var(--secondary-color) !important;
+      color: white !important;
+      border: none !important;
+      border-radius: var(--border-radius) !important;
+      padding: 12px 24px !important;
+      font-weight: 600 !important;
+      cursor: pointer !important;
+      transition: background-color 0.2s !important;
+      width: 100% !important;
+      margin-top: 16px !important;
+    }
+
+    .generate-button:hover {
+      background-color: #4ca8a6 !important;
+    }
+
+    /* Image upload area */
+    .image-upload {
+      border: 2px dashed rgba(0, 0, 0, 0.1);
+      border-radius: var(--border-radius);
+      padding: 20px;
+      text-align: center;
+      transition: border-color 0.2s;
+    }
+
+    .image-upload:hover {
+      border-color: var(--secondary-color);
+    }
+
+    /* Input fields */
+    input[type="text"], input[type="password"], textarea {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: var(--border-radius);
+      margin-bottom: 16px;
+      font-family: inherit;
+    }
+
+    input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+      border-color: var(--secondary-color);
+      outline: none;
+    }
+
+    /* Examples section */
+    .examples-header {
+      margin: 32px 0 16px 0;
+      font-weight: 600;
+      color: var(--primary-color);
+    }
+
+    /* Footer */
+    .app-footer {
+      text-align: center;
+      padding: 16px;
+      margin-top: 32px;
+      color: rgba(0, 0, 0, 0.5);
+      font-size: 0.8rem;
+    }
+    """
+    
     # Gradio interface
-    with gr.Blocks(css="custom_styles.css") as app:
+    with gr.Blocks(css=custom_css) as app:
         # Header
         gr.HTML(
         """
@@ -231,7 +403,7 @@ def build_ui() -> gr.Blocks:
         )
         
         # API key information
-        with gr.Accordion("🔑 API Key Required", open=True, elem_classes="accordion-container"):
+        with gr.Accordion("🔑 API Key Required", open=True):
             gr.HTML(
             """
             <div class="accordion-content">
@@ -246,7 +418,7 @@ def build_ui() -> gr.Blocks:
             )
         
         # Usage instructions
-        with gr.Accordion("📝 How To Use", open=False, elem_classes="accordion-container"):
+        with gr.Accordion("📝 How To Use", open=False):
             gr.HTML(
             """
             <div class="accordion-content">
@@ -292,7 +464,7 @@ def build_ui() -> gr.Blocks:
                     label="Transformation Instructions"
                 )
                 
-                transform_btn = gr.Button("Transform Image", elem_classes="generate-button")
+                transform_btn = gr.Button("Transform Image", variant="primary")
             
             # Output column
             with gr.Column(elem_classes="output-column"):
@@ -335,7 +507,7 @@ def build_ui() -> gr.Blocks:
         # Footer
         gr.HTML(
         """
-        <div class="app-footer">
+        <div style="text-align: center; padding: 16px; margin-top: 32px; color: rgba(0, 0, 0, 0.5); font-size: 0.8rem;">
           <p>ImageWizard © 2025 | Powered by Google Gemini and Gradio</p>
         </div>
         """