Update app.py

app.py

@@ -101,20 +101,59 @@ def generate_product_description(image, description_type, custom_instruction=Non
     return response_data["choices"][0]["message"]["content"]
 
 
+# Custom CSS to match WordLift style
 css = """
+  body {
+    font-family: 'Inter', sans-serif;
+    background-color: #ffffff;
+    color: #333333;
+  }
   #output {
     height: 500px;
     overflow: auto;
     border: 1px solid #ccc;
+    padding: 20px;
+    font-size: 1.2em;
+    border-radius: 8px;
+  }
+  button, select, input[type="button"], input[type="submit"] {
+    background-color: #0056d2; /* WordLift blue */
+    color: white;
+    border-radius: 8px;
+    padding: 10px 20px;
+    border: none;
+    font-size: 1em;
+    cursor: pointer;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  button:hover, select:hover, input[type="button"]:hover, input[type="submit"]:hover {
+    background-color: #003da1; /* Darker shade of WordLift blue */
+  }
+  .gr-box {
+    border: 1px solid #e1e1e1;
+    border-radius: 8px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
+    padding: 20px;
+  }
+  .gr-block {
+    margin-bottom: 20px;
+  }
+  .output-text {
+    font-size: 1.4em;
+    color: #000000;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e1e1e1;
   }
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("WordLift Product Description Generation - [FREE]")
+    gr.Markdown("<h1>WordLift Product Description Generation - [FREE]</h1>")
     with gr.Tab(label="WordLift Product Description Generation"):
         with gr.Row():
             with gr.Column():
-                input_img = gr.Image(label="Input Picture")
+                input_img = gr.Image(label="Input Picture", elem_classes="gr-box")
                 description_type = gr.Dropdown(
                     label="Select Description Type",
                     choices=[
@@ -147,14 +186,14 @@ with gr.Blocks(css=css) as demo:
                         "Other",
                     ],
                     value="Short Formal 📝",
+                    elem_classes="gr-box"
                 )
                 custom_instruction = gr.Textbox(
-                    label="Custom Instruction (Only for 'Other')", visible=False
+                    label="Custom Instruction (Only for 'Other')", visible=False, elem_classes="gr-box"
                 )
-                submit_btn = gr.Button(value="Submit")
+                submit_btn = gr.Button(value="Submit", elem_classes="gr-box")
             with gr.Column():
-                output_text = gr.Markdown(label="Output Text", show_copy_button=True)
-
+                output_text = gr.Markdown(label="Output Text", show_copy_button=True, elem_classes="output-text")
 
         # Toggle visibility of custom instruction based on selected type
         def toggle_custom_instruction(type_selection):
@@ -174,4 +213,4 @@ with gr.Blocks(css=css) as demo:
 
 # Launch Gradio app
 demo.queue(api_open=False)
-demo.launch(debug=True)
+demo.launch(debug=True)