Update app.py

app.py

@@ -121,7 +121,6 @@ def process_input_gradio(problem_description: str):
     )
 
 # --- Gradio Interface Setup ---
-
 # Define the input and output components
 input_problem = gr.Textbox(
     label="Enter Problem Description",
@@ -134,20 +133,168 @@ output_best_combinations = gr.JSON(label="7. Best Technology Combinations Found"
 output_selected_ids = gr.Textbox(label="8. Selected Technology IDs", interactive=False)
 output_final_technologies = gr.JSON(label="9. Final Best Technologies")
 
-# Create the Gradio Blocks demo
-with gr.Blocks() as gradio_app_blocks:
+# Custom CSS for a professional look
+custom_css = """
+/* General Body and Font Styling */
+body {
+    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    color: #333;
+    background-color: #f0f2f5;
+}
+
+/* Header Styling */
+.gradio-container h1 {
+    color: #0056b3; /* A deep blue for the main title */
+    text-align: center;
+    margin-bottom: 10px;
+    font-weight: 600;
+    font-size: 2.5em;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.gradio-container h2 {
+    color: #007bff; /* A slightly lighter blue for subtitles */
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 30px;
+    font-weight: 400;
+    font-size: 1.2em;
+}
+
+/* Card-like styling for individual components */
+.gradio-container .gr-box {
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    padding: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #e0e0e0;
+}
+
+/* Input Textbox Styling */
+.gradio-container input[type="text"],
+.gradio-container textarea {
+    border: 1px solid #ced4da;
+    border-radius: 8px;
+    padding: 12px 15px;
+    font-size: 1em;
+    color: #495057;
+    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.gradio-container input[type="text"]:focus,
+.gradio-container textarea:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    outline: none;
+}
+
+/* Button Styling */
+.gradio-container button {
+    background-color: #28a745; /* A vibrant green for action */
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 25px;
+    font-size: 1.1em;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.gradio-container button:hover {
+    background-color: #218838; /* Darker green on hover */
+    transform: translateY(-2px);
+}
+
+.gradio-container button:active {
+    transform: translateY(0);
+}
+
+/* Labels for outputs */
+.gradio-container label {
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 8px;
+    display: block; /* Ensure labels are on their own line */
+    font-size: 1.1em;
+}
+
+/* JSON Output Specific Styling */
+.gradio-container .json-display {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 15px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    color: #212529;
+    white-space: pre-wrap; /* Preserve whitespace and wrap long lines */
+    overflow-x: auto; /* Allow horizontal scrolling if content is too wide */
+    max-height: 400px; /* Limit height and add scroll */
+}
+
+/* Responsive adjustments (Gradio handles a lot, but for specific tweaks) */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 15px;
+    }
+    .gradio-container h1 {
+        font-size: 2em;
+    }
+    .gradio-container button {
+        width: 100%;
+        padding: 15px;
+    }
+}
+
+/* Optional: Logo and Branding Placeholder */
+/* You would typically add an image element in your gr.Blocks() for a logo */
+/* Example if you have a logo image: */
+/* .logo {
+    display: block;
+    margin: 0 auto 20px auto;
+    max-width: 200px;
+    height: auto;
+} */
+"""
+
+# Create the Gradio Blocks demo with custom theme and CSS
+with gr.Blocks(
+    theme=gr.themes.Soft(), # A modern, soft theme from Gradio
+    css=custom_css
+) as gradio_app_blocks:
+    # Optional: Add your logo here
+    # gr.Image("path/to/your/logo.png", width=150, show_label=False, container=False, elem_classes="logo")
+
     gr.Markdown("# Insight Finder: Step-by-Step Technology Selection")
-    gr.Markdown("Enter a problem description to see how relevant technologies are identified through various processing steps.")
-    input_problem.render()
-    process_button = gr.Button("Process Problem")
-    
-    with gr.Column():
-        output_prompt.render()
-        output_constraints.render()
-        output_best_combinations.render()
-        output_selected_ids.render()
-        output_final_technologies.render()
+    gr.Markdown("## Enter a problem description to see how relevant technologies are identified through various processing steps.")
+
+    with gr.Row(): # Use a row for better layout on wider screens
+        with gr.Column(scale=2): # Input takes more space
+            input_problem.render()
+        with gr.Column(scale=1): # Button in a smaller column
+            gr.Box(
+                gr.Markdown("Click to start the analysis:"),
+                process_button := gr.Button("Process Problem", elem_id="process_button")
+            )
 
+
+    gr.Markdown("---") # Separator for visual clarity
+
+    gr.Markdown("### Processing Steps & Results:")
+
+    # Group outputs into columns for better organization
+    with gr.Row():
+        with gr.Column():
+            output_prompt.render()
+            output_constraints.render()
+        with gr.Column():
+            output_best_combinations.render()
+            output_selected_ids.render()
+            output_final_technologies.render()
+
+    # Link the button to the processing function
     process_button.click(
         fn=process_input_gradio,
         inputs=input_problem,
@@ -159,5 +306,5 @@ with gr.Blocks() as gradio_app_blocks:
             output_final_technologies
         ]
     )
-
+    
 gr.mount_gradio_app(app, gradio_app_blocks, path="/gradio")