Update app.py

app.py

@@ -5,6 +5,7 @@ import requests
 import json
 import plotly.express as px
 import pandas as pd
+import re
 
 # Model options for dropdown with both Together AI and Anthropic models
 together_models = [
@@ -133,9 +134,59 @@ def call_llm(model, prompt, temperature=0.7, max_tokens=1500):
     else:
         return f"Error: Unknown provider for model {model}"
 
+def extract_code_blocks(text):
+    """Extract code blocks from the model's response"""
+    # Pattern to match code blocks with ```apex or ```java or just ```
+    pattern = r"```(?:apex|java)?(.*?)```"
+    matches = re.findall(pattern, text, re.DOTALL)
+    
+    # Clean up extracted code blocks
+    code_blocks = []
+    for block in matches:
+        # Remove leading/trailing whitespace
+        cleaned_block = block.strip()
+        if cleaned_block:
+            code_blocks.append(cleaned_block)
+    
+    # If no code blocks found but text contains code-like content
+    if not code_blocks and ("public" in text or "private" in text or "trigger" in text):
+        # Try to extract the most code-like part
+        lines = text.split('\n')
+        potential_code = []
+        in_code_section = False
+        
+        for line in lines:
+            if any(keyword in line for keyword in ["public", "private", "class", "trigger", "@"]):
+                in_code_section = True
+            
+            if in_code_section:
+                potential_code.append(line)
+        
+        if potential_code:
+            code_blocks.append('\n'.join(potential_code))
+    
+    return '\n\n'.join(code_blocks) if code_blocks else ""
+
+def extract_explanations(text, code_blocks):
+    """Extract explanations from the model's response by removing code blocks"""
+    # Replace all code blocks with placeholders
+    explanation = text
+    for block in code_blocks.split('\n\n'):
+        # Escape special regex characters in the block
+        escaped_block = re.escape(block)
+        explanation = re.sub(escaped_block, "[CODE BLOCK REMOVED]", explanation, flags=re.DOTALL)
+    
+    # Remove code block markers
+    explanation = re.sub(r"```(?:apex|java)?.*?```", "", explanation, flags=re.DOTALL)
+    
+    # Clean up the explanation
+    explanation = explanation.replace("[CODE BLOCK REMOVED]", "*Code has been moved to the Code Output section*")
+    
+    return explanation.strip()
+
 def correct_apex_trigger(model, trigger_code):
     if not trigger_code.strip():
-        return "Please provide Apex Trigger code to correct."
+        return "Please provide Apex Trigger code to correct.", "", ""
     prompt = f"""
 Please analyze and correct the following Apex Trigger code for migration from CloudCraze to B2B Lightning Experience.
 Identify any issues, optimize it according to best practices, and provide the corrected code.
@@ -144,13 +195,19 @@ Identify any issues, optimize it according to best practices, and provide the co
 {trigger_code}
 ```
 
-Please return the corrected code with explanations of changes.
+Please return the corrected code with explanations of changes. Put the corrected code in ```apex code blocks.
 """
-    return call_llm(model, prompt)
+    response = call_llm(model, prompt)
+    
+    # Extract code blocks and explanations
+    code_output = extract_code_blocks(response)
+    explanation = extract_explanations(response, code_output)
+    
+    return response, code_output, explanation
 
 def convert_cc_object(model, cc_object_code):
     if not cc_object_code.strip():
-        return "Please provide CloudCraze Object code to convert."
+        return "Please provide CloudCraze Object code to convert.", "", ""
     prompt = f"""
 Please convert the following CloudCraze Object code to B2B Lightning Experience format.
 Identify the corresponding B2B LEx system object, map fields, and provide the full definition.
@@ -162,10 +219,16 @@ Identify the corresponding B2B LEx system object, map fields, and provide the fu
 Return:
 1. Equivalent B2B LEx object name
 2. Field mappings
-3. Full implementation code
+3. Full implementation code in ```apex code blocks
 4. Additional steps if needed
 """
-    return call_llm(model, prompt)
+    response = call_llm(model, prompt)
+    
+    # Extract code blocks and explanations
+    code_output = extract_code_blocks(response)
+    explanation = extract_explanations(response, code_output)
+    
+    return response, code_output, explanation
 
 def validate_apex_trigger(validation_model, original_code, corrected_code):
     if not validation_model or not original_code.strip() or not corrected_code.strip():
@@ -292,8 +355,22 @@ def create_radar_chart(metrics):
     
     return fig
 
+def toggle_dark_mode(dark_mode, elements):
+    """Toggle between light and dark mode for interface elements"""
+    if dark_mode:
+        style = "background-color: #2e2e2e; color: #ffffff;"
+        code_style = "background-color: #1e1e1e; color: #e0e0e0; font-family: 'Courier New', monospace;"
+    else:
+        style = "background-color: #ffffff; color: #333333;"
+        code_style = "background-color: #f5f5f5; color: #333333; font-family: 'Courier New', monospace;"
+    
+    return [style for _ in range(len(elements) // 2)] + [code_style for _ in range(len(elements) // 2)]
+
 def main():
-    with gr.Blocks(title="Salesforce B2B Commerce Migration Assistant") as app:
+    with gr.Blocks(title="Salesforce B2B Commerce Migration Assistant", theme=gr.themes.Soft(primary_hue="blue")) as app:
+        # Initialize dark mode state
+        dark_mode = gr.State(False)
+        
         gr.Markdown("# Salesforce B2B Commerce Migration Assistant")
         gr.Markdown("This tool helps migrate CloudCraze code to B2B Lightning Experience.")
 
@@ -325,18 +402,35 @@ def main():
                 placeholder="Paste Apex Trigger code here...",
                 label="Apex Trigger Code"
             )
-            trigger_output = gr.Textbox(
-                lines=15,
-                label="Corrected Apex Trigger",
-                interactive=True
-            )
-            trigger_button = gr.Button("Correct Apex Trigger")
-            trigger_button.click(
-                fn=correct_apex_trigger,
-                inputs=[primary_model_dropdown, trigger_input],
-                outputs=trigger_output,
-                show_progress=True
-            )
+            
+            with gr.Row():
+                trigger_button = gr.Button("Correct Apex Trigger", variant="primary")
+                copy_code_button = gr.Button("Copy Code", variant="secondary")
+                
+            with gr.Accordion("Full Model Response (Hidden by Default)", open=False):
+                trigger_full_response = gr.Textbox(
+                    lines=15,
+                    label="Full Model Response",
+                    interactive=False
+                )
+            
+            with gr.Row():
+                with gr.Column():
+                    trigger_explanation = gr.Textbox(
+                        lines=10,
+                        label="Explanation",
+                        placeholder="Explanation will appear here after correction",
+                        interactive=False,
+                        elem_id="trigger_explanation"
+                    )
+                
+                with gr.Column():
+                    trigger_code_output = gr.Code(
+                        language="java",
+                        label="Corrected Code",
+                        value="// Corrected code will appear here",
+                        elem_id="trigger_code_output"
+                    )
             
             gr.Markdown("### Validation Results")
             with gr.Row():
@@ -358,22 +452,48 @@ def main():
                 chart = create_radar_chart(metrics) if metrics else None
                 return validation_text, chart
             
+            # Handle button clicks
+            trigger_button.click(
+                fn=correct_apex_trigger,
+                inputs=[primary_model_dropdown, trigger_input],
+                outputs=[trigger_full_response, trigger_code_output, trigger_explanation],
+                show_progress=True
+            )
+            
             validate_trigger_button.click(
                 fn=validate_and_chart_trigger,
-                inputs=[validation_model_dropdown, trigger_input, trigger_output],
+                inputs=[validation_model_dropdown, trigger_input, trigger_code_output],
                 outputs=[trigger_validation_output, trigger_chart],
                 show_progress=True
             )
             
+            # Copy code button functionality
+            def trigger_copy_to_clipboard():
+                # This function doesn't need to return anything - the copy happens in the frontend
+                return None
+            
+            copy_code_button.click(
+                fn=trigger_copy_to_clipboard,
+                inputs=[],
+                outputs=[],
+                _js="""() => {
+                    const codeElem = document.getElementById('trigger_code_output');
+                    if (codeElem) {
+                        navigator.clipboard.writeText(codeElem.textContent);
+                        return [];
+                    }
+                }"""
+            )
+            
             with gr.Row():
                 trigger_clear = gr.Button("Clear Input")
                 trigger_clear.click(lambda: "", [], trigger_input)
                 
                 results_clear = gr.Button("Clear Results")
                 results_clear.click(
-                    lambda: ["", "", None],
+                    lambda: ["", "", "", "", None],
                     [],
-                    [trigger_output, trigger_validation_output, trigger_chart]
+                    [trigger_full_response, trigger_code_output, trigger_explanation, trigger_validation_output, trigger_chart]
                 )
 
         with gr.Tab("CloudCraze Object Conversion"):
@@ -385,18 +505,35 @@ def main():
                 placeholder="Paste CC object code here...",
                 label="CloudCraze Object Code"
             )
-            object_output = gr.Textbox(
-                lines=15,
-                label="Converted B2B LEx Object",
-                interactive=True
-            )
-            object_button = gr.Button("Convert Object")
-            object_button.click(
-                fn=convert_cc_object,
-                inputs=[primary_model_dropdown, object_input],
-                outputs=object_output,
-                show_progress=True
-            )
+            
+            with gr.Row():
+                object_button = gr.Button("Convert Object", variant="primary")
+                object_copy_code_button = gr.Button("Copy Code", variant="secondary")
+                
+            with gr.Accordion("Full Model Response (Hidden by Default)", open=False):
+                object_full_response = gr.Textbox(
+                    lines=15,
+                    label="Full Model Response",
+                    interactive=False
+                )
+            
+            with gr.Row():
+                with gr.Column():
+                    object_explanation = gr.Textbox(
+                        lines=10,
+                        label="Explanation",
+                        placeholder="Explanation will appear here after conversion",
+                        interactive=False,
+                        elem_id="object_explanation"
+                    )
+                
+                with gr.Column():
+                    object_code_output = gr.Code(
+                        language="java",
+                        label="Converted Code",
+                        value="// Converted code will appear here",
+                        elem_id="object_code_output"
+                    )
             
             gr.Markdown("### Validation Results")
             with gr.Row():
@@ -418,24 +555,66 @@ def main():
                 chart = create_radar_chart(metrics) if metrics else None
                 return validation_text, chart
             
+            # Handle button clicks
+            object_button.click(
+                fn=convert_cc_object,
+                inputs=[primary_model_dropdown, object_input],
+                outputs=[object_full_response, object_code_output, object_explanation],
+                show_progress=True
+            )
+            
             validate_object_button.click(
                 fn=validate_and_chart_object,
-                inputs=[validation_model_dropdown, object_input, object_output],
+                inputs=[validation_model_dropdown, object_input, object_code_output],
                 outputs=[object_validation_output, object_chart],
                 show_progress=True
             )
             
+            # Copy code button functionality
+            def object_copy_to_clipboard():
+                # This function doesn't need to return anything - the copy happens in the frontend
+                return None
+            
+            object_copy_code_button.click(
+                fn=object_copy_to_clipboard,
+                inputs=[],
+                outputs=[],
+                _js="""() => {
+                    const codeElem = document.getElementById('object_code_output');
+                    if (codeElem) {
+                        navigator.clipboard.writeText(codeElem.textContent);
+                        return [];
+                    }
+                }"""
+            )
+            
             with gr.Row():
                 object_clear = gr.Button("Clear Input")
                 object_clear.click(lambda: "", [], object_input)
                 
                 object_results_clear = gr.Button("Clear Results")
                 object_results_clear.click(
-                    lambda: ["", "", None],
+                    lambda: ["", "", "", "", None],
                     [],
-                    [object_output, object_validation_output, object_chart]
+                    [object_full_response, object_code_output, object_explanation, object_validation_output, object_chart]
                 )
 
+        # UI Preferences
+        with gr.Accordion("UI Preferences", open=False):
+            dark_mode_toggle = gr.Checkbox(label="Dark Mode", value=False)
+            
+            # Create a list of UI elements to update
+            ui_elements = [
+                trigger_explanation, trigger_code_output,
+                object_explanation, object_code_output
+            ]
+            
+            dark_mode_toggle.change(
+                fn=toggle_dark_mode,
+                inputs=[dark_mode_toggle, gr.State(ui_elements)],
+                outputs=ui_elements
+            )
+
         gr.Markdown("### About This Tool")
         gr.Markdown(
             """
@@ -445,7 +624,14 @@ def main():
                 **Object Conversion**: Maps and converts CloudCraze object definitions to B2B LEx.
                 **Model Selection**: Choose from Together AI models or Anthropic's Claude models.
                 
-                **Validation** now outputs four key metrics (quality, accuracy, completeness, best practices) as both JSON and a fun chart.
+                **New Interface Features**:
+                - Separated code output in dedicated code editor interface with syntax highlighting
+                - Clear separation between explanations and code
+                - "Copy Code" button for easy copying
+                - Dark mode option for comfortable viewing
+                - Hidden full model response to reduce clutter
+                
+                **Validation** outputs four key metrics (quality, accuracy, completeness, best practices) as both JSON and a radar chart.
                 Always review AI-generated code before production use.
                 """
         )