Update app.py

app.py

@@ -45,21 +45,75 @@ async def process_constraints(constraints: InputConstraints):
 
 
 def make_json_serializable(data):
-    """
-    Recursively convert tensors to floats in a data structure
-    so it can be passed to json.dumps.
-    """
     if isinstance(data, dict):
         return {k: make_json_serializable(v) for k, v in data.items()}
     elif isinstance(data, list):
         return [make_json_serializable(item) for item in data]
     elif isinstance(data, tuple):
         return tuple(make_json_serializable(item) for item in data)
-    elif hasattr(data, 'item'):  # torch.Tensor with single value
+    elif hasattr(data, 'item'):
         return float(data.item())
     else:
         return data
-        
+
+# --- Helper functions to format HTML outputs ---
+def format_constraints_html(constraints: dict) -> str:
+    html_content = "<div class='constraints-container'>"
+    for title, description in constraints.items():
+        html_content += f"""
+        <div class='constraint-item'>
+            <p><span class='constraint-title'>{title}:</span> <span class='constraint-description'>{description}</span></p>
+        </div>
+        """
+    html_content += "</div>"
+    return html_content
+
+def format_best_combinations_html(combinations_data: list) -> str:
+    html_content = "<div class='combinations-outer-container'>"
+    for i, combination in enumerate(combinations_data):
+        problem_title = combination.get("problem", {}).get("title", f"Problem {i+1}")
+        technologies = combination.get("technologies", [])
+
+        html_content += f"""
+        <div class='problem-card'>
+            <h3 class='problem-card-title'>{problem_title}</h3>
+            <div class='technologies-inner-container'>
+        """
+        for tech_info_score in technologies:
+            tech_info = tech_info_score[0] # The dictionary part
+            if isinstance(tech_info, dict):
+                html_content += f"""
+                <div class='technology-card'>
+                    <h4 class='tech-card-title'>{tech_info.get('title', 'N/A')}</h4>
+                    <p><strong>Purpose:</strong> {tech_info.get('purpose', 'N/A')}</p>
+                    <p><strong>Components:</strong> {tech_info.get('key_components', 'N/A')}</p>
+                    <p><strong>Advantages:</strong> {tech_info.get('advantages', 'N/A')}</p>
+                    <p><strong>Limitations:</strong> {tech_info.get('limitations', 'N/A')}</p>
+                </div>
+                """
+        html_content += """
+            </div>
+        </div>
+        """
+    html_content += "</div>"
+    return html_content
+
+def format_final_technologies_html(technologies_list: list) -> str:
+    html_content = "<div class='final-tech-container'>"
+    for tech_info in technologies_list:
+        if isinstance(tech_info, dict):
+            html_content += f"""
+            <div class='final-tech-card'>
+                <h4 class='final-tech-title'>{tech_info.get('title', 'N/A')}</h4>
+                <p><strong>Purpose:</strong> {tech_info.get('purpose', 'N/A')}</p>
+                <p><strong>Components:</strong> {tech_info.get('key_components', 'N/A')}</p>
+                <p><strong>Advantages:</strong> {tech_info.get('advantages', 'N/A')}</p>
+                <p><strong>Limitations:</strong> {tech_info.get('limitations', 'N/A')}</p>
+            </div>
+            """
+    html_content += "</div>"
+    return html_content
+    
 def process_input_gradio(problem_description: str):
     """
     Processes the input problem description step-by-step for Gradio.
@@ -95,49 +149,38 @@ def process_input_gradio(problem_description: str):
     best_technologies = get_technologies_by_id(best_technologies_id, global_tech)
 
     # Format outputs for Gradio
-    matrix_display = matrix #.tolist() # Convert numpy array to list of lists for better Gradio display
+    # For Constraints:
+    constraints_html = format_constraints_html(constraints_dict)
+
+    # For Best Combinations:
+    best_combinations_html = format_best_combinations_html(best_combinations)
+
+    # For Final Technologies:
+    final_technologies_html = format_final_technologies_html(best_technologies)
+
 
-    result_similarities_display = {
-        item['id2']: f"{item['constraint']['title']} ({item['similarity'].item():.3f})"
-        for item in result_similarities
-    }
-    
-    
-    # Convert to JSON-safe format
-    safe_best_combinations = make_json_serializable(best_combinations)
-    safe_best_technologies = make_json_serializable(best_technologies)
-    
-    # Now this will work safely:
-    best_combinations_display = json.dumps(safe_best_combinations, indent=2)
-    best_technologies_display = json.dumps(safe_best_technologies, indent=2)
-
-    print("best combinations")
-    print(best_combinations_display)
-    print("\nbest technologies")
-    print(best_technologies_display)
-    
     return (
         prompt,
-        "\n".join(f"'{k}': {v}" for k, v in constraints.items()),
-        best_combinations_display,
-        ", ".join(map(str, best_technologies_id)),
-        best_technologies_display
+        constraints_html, # Output HTML for constraints
+        best_combinations_html, # Output HTML for best combinations
+        ", ".join(map(str, best_technologies_id)), # Still a simple text list
+        final_technologies_html # Output HTML for final technologies
     )
 
+
 # --- Gradio Interface Setup ---
-# Define the input and output components
 input_problem = gr.Textbox(
     label="Enter Problem Description",
     placeholder="e.g., Develop a secure and scalable e-commerce platform with real-time analytics."
 )
 
 output_prompt = gr.Textbox(label="1. Generated Prompt", interactive=False)
-output_constraints = gr.Textbox(label="2. Retrieved Constraints", interactive=False)
-output_best_combinations = gr.JSON(label="7. Best Technology Combinations Found")
+output_constraints = gr.HTML(label="2. Retrieved Constraints") # Changed to HTML
+output_best_combinations = gr.HTML(label="7. Best Technology Combinations Found") # Changed to HTML
 output_selected_ids = gr.Textbox(label="8. Selected Technology IDs", interactive=False)
-output_final_technologies = gr.JSON(label="9. Final Best Technologies")
+output_final_technologies = gr.HTML(label="9. Final Best Technologies") # Changed to HTML
 
-# Custom CSS for a professional look
+# Custom CSS for a professional look and specific output styling
 custom_css = """
 /* General Body and Font Styling */
 body {
@@ -225,20 +268,105 @@ body {
     font-size: 1.1em;
 }
 
-/* JSON Output Specific Styling */
-.gradio-container .json-display {
+/* --- Specific Styling for Outputs --- */
+
+/* 2. Retrieved Constraints Styling */
+.constraints-container {
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+    font-family: 'Georgia', serif; /* Different font */
+    line-height: 1.6;
+    max-height: 300px;
+    overflow-y: auto;
+}
+.constraint-item {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px dashed #e0e0e0;
+}
+.constraint-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+.constraint-title {
+    font-weight: bold;
+    color: #004085; /* Darker blue for constraint titles */
+    font-size: 1.1em;
+}
+.constraint-description {
+    color: #333;
+    font-size: 1em;
+}
+
+/* 7. Best Technology Combinations Found & 9. Final Best Technologies Styling */
+.combinations-outer-container, .final-tech-container {
+    padding: 15px;
     background-color: #f8f9fa;
+    border-radius: 8px;
     border: 1px solid #e9ecef;
+    max-height: 500px; /* Adjust as needed */
+    overflow-y: auto;
+    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */
+}
+
+.problem-card {
+    background-color: #ffffff;
+    border: 1px solid #cfe2ff; /* Light blue border for problem card */
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+.problem-card-title {
+    color: #0056b3; /* Deep blue for problem title */
+    font-size: 1.4em;
+    margin-top: 0;
+    margin-bottom: 15px;
+    border-bottom: 2px solid #cfe2ff;
+    padding-bottom: 10px;
+}
+
+.technologies-inner-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid for technologies */
+    gap: 15px;
+}
+
+.technology-card, .final-tech-card {
+    background-color: #f0faff; /* Very light blue for technology cards */
+    border: 1px solid #b0d9ff; /* Slightly darker blue border */
     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 */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    transition: transform 0.2s ease-in-out;
+}
+
+.technology-card:hover, .final-tech-card:hover {
+    transform: translateY(-3px);
+}
+
+.tech-card-title, .final-tech-title {
+    color: #007bff; /* Gradio's primary blue */
+    font-size: 1.2em;
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-weight: 600;
 }
 
-/* Responsive adjustments (Gradio handles a lot, but for specific tweaks) */
+.technology-card p, .final-tech-card p {
+    font-size: 0.95em;
+    line-height: 1.5;
+    margin-bottom: 5px;
+    color: #555;
+}
+.technology-card p strong, .final-tech-card p strong {
+    color: #004085; /* Darker blue for bold labels */
+}
+
+/* Responsive adjustments */
 @media (max-width: 768px) {
     .gradio-container {
         padding: 15px;
@@ -250,53 +378,41 @@ body {
         width: 100%;
         padding: 15px;
     }
+    .technologies-inner-container {
+        grid-template-columns: 1fr; /* Stack columns on smaller screens */
+    }
 }
-
-/* 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
+    theme=gr.themes.Soft(),
     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.")
 
-    with gr.Row(): # Use a row for better layout on wider screens
-        with gr.Column(scale=2): # Input takes more space
+    with gr.Row():
+        with gr.Column(scale=2):
             input_problem.render()
-        with gr.Column(scale=1):  # Button in a smaller column
-            gr.Markdown("Click to start the analysis:")
-            process_button = gr.Button("Process Problem", elem_id="process_button")
-
-
-    gr.Markdown("---") # Separator for visual clarity
+        with gr.Column(scale=1):
+            gr.Box(
+                gr.Markdown("Click to start the analysis:"),
+                process_button := gr.Button("Process Problem", elem_id="process_button")
+            )
 
+    gr.Markdown("---")
     gr.Markdown("### Processing Steps & Results:")
 
-    # Group outputs into columns for better organization
     with gr.Row():
         with gr.Column():
             output_prompt.render()
-            output_constraints.render()
+            output_constraints.render() # Renders HTML
         with gr.Column():
-            output_best_combinations.render()
-            output_selected_ids.render()
-            output_final_technologies.render()
+            output_selected_ids.render() # This remains a Textbox
+            output_best_combinations.render() # Renders HTML
+            output_final_technologies.render() # Renders HTML
 
-    # Link the button to the processing function
     process_button.click(
         fn=process_input_gradio,
         inputs=input_problem,
@@ -307,6 +423,4 @@ with gr.Blocks(
             output_selected_ids,
             output_final_technologies
         ]
-    )
-    
-gr.mount_gradio_app(app, gradio_app_blocks, path="/gradio")
+    )