Upload 8 files

app.py

@@ -6,6 +6,10 @@ from custom_css import custom_css
 class GradioInterface:
   def __init__(self, prompt_refiner: PromptRefiner, custom_css):
       self.prompt_refiner = prompt_refiner
+      # Set default model to second-to-last in the list
+      default_model = models[-1] if len(models) >= 1 else models[0] if models else None
+      #meta_prompt_choice=metaprompt_list[0]
+      
       with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface:
           # CONTAINER 1
           with gr.Column(elem_classes=["container", "title-container"]):
@@ -15,13 +19,16 @@ class GradioInterface:
               
           # CONTAINER 2
           with gr.Column(elem_classes=["container", "input-container"]):
-            prompt_text = gr.Textbox(label="Type your prompt (or leave empty to see metaprompt)",lines=5)
-            automatic_metaprompt_button = gr.Button("Automatic Choice for Refinement Method ")
-            #with gr.Row(elem_classes=["container2"]):                
-            MetaPrompt_analysis = gr.Markdown()
+              prompt_text = gr.Textbox(label="Type your prompt (or leave empty to see metaprompt)",lines=5)
+              with gr.Accordion("Prompt Examples", open=False, visible=True):     
+                  gr.Examples(examples=examples,inputs=[prompt_text]) 
+              automatic_metaprompt_button = gr.Button(
+                  "Automatic Choice for Refinement Method",
+                  elem_classes=["button-highlight"]
+              )
+              MetaPrompt_analysis = gr.Markdown()
               
           # CONTAINER 3    
-         # with gr.Column(elem_classes=["container"]):    
           with gr.Column(elem_classes=["container","meta-container"]):
               meta_prompt_choice = gr.Radio(
                   choices=metaprompt_list,
@@ -29,17 +36,16 @@ class GradioInterface:
                   value=metaprompt_list[0],
                   elem_classes=["no-background", "radio-group"]
               )
-              refine_button = gr.Button("Refine Prompt")
+              refine_button = gr.Button(
+                  "Refine Prompt",
+                  elem_classes=["button-waiting"]
+              )
               with gr.Accordion("Metaprompt Explanation", open=False, visible=True): 
-                  gr.Markdown(explanation_markdown)         
-                  gr.Examples(
-                      examples=examples,
-                      inputs=[prompt_text, meta_prompt_choice]
-                  )               
+                  gr.Markdown(explanation_markdown)              
               
           with gr.Column(elem_classes=["container", "analysis-container"]):           
               gr.Markdown(" ")
-              prompt_evaluation = gr.Markdown()  # Added this component
+              prompt_evaluation = gr.Markdown()
               gr.Markdown("### Refined Prompt")
               refined_prompt = gr.Textbox(
                   label=" ",
@@ -47,58 +53,192 @@ class GradioInterface:
                   show_label=True,
                   show_copy_button=True,
               )
-              #gr.Markdown("### Explanation of Refinements")
               explanation_of_refinements = gr.Markdown()
 
-          
           with gr.Column(elem_classes=["container", "model-container"]):
               with gr.Row():
                   apply_model = gr.Dropdown(
                       choices=models,
-                      value=models[0] if models else None,
+                      value=default_model,
                       label="Choose the Model",
                       container=False,
                       scale=1,
                       min_width=300
                   )
-                  apply_button = gr.Button("Apply Prompts")
+                  apply_button = gr.Button(
+                      "Apply Prompts",
+                      elem_classes=["button-waiting"]
+                  )
               
               gr.Markdown("### Prompts on Chosen Model")
-              with gr.Tabs():
-                  with gr.TabItem("Original Prompt Output"):
-                      original_output = gr.Markdown()
-                  with gr.TabItem("Refined Prompt Output"):
-                      refined_output = gr.Markdown()
-          
-          with gr.Accordion("Full Response JSON", open=False, visible=True):
-              full_response_json = gr.JSON()
-      
+              with gr.Tabs(elem_classes=["tabs"]):
+                with gr.TabItem("Prompts Output Comparison", elem_classes=["tabitem"]):                     
+                    with gr.Row(elem_classes=["output-row"]):
+                        with gr.Column(scale=1, elem_classes=["comparison-column"]):
+                              gr.Markdown("### Original Prompt Output")
+                              original_output1 = gr.Markdown(
+                           #       value="Output will appear here",
+                                  elem_classes=["output-content"],
+                                  visible=True
+                              )
+                        with gr.Column(scale=1, elem_classes=["comparison-column"]):
+                              gr.Markdown("### Refined Prompt Output")
+                              refined_output1 = gr.Markdown(
+                             #     value="Output will appear here",
+                                  elem_classes=["output-content"],
+                                  visible=True
+                              )
+                with gr.TabItem("Original Prompt Output", elem_classes=["tabitem"]):
+                      with gr.Row(elem_classes=["output-row"]):
+                          with gr.Column(scale=1, elem_classes=["comparison-column"]):
+                              gr.Markdown("### Original Prompt Output")
+                              original_output = gr.Markdown(
+                               #   value="Output will appear here",
+                                  elem_classes=[ "output-content"],
+                                  visible=True
+                              )
+                with gr.TabItem("Refined Prompt Output", elem_classes=["tabitem"]):
+                      with gr.Row(elem_classes=["output-row"]):
+                          with gr.Column(scale=1, elem_classes=["comparison-column"]):
+                              gr.Markdown("### Refined Prompt Output")
+                              refined_output = gr.Markdown(
+                              #    value="Output will appear here",
+                                  elem_classes=["output-content"],
+                                  visible=True
+                              )
+              
+              with gr.Accordion("Full Response JSON", open=False, visible=True):
+                  full_response_json = gr.JSON()
+
           # Button click handlers
           automatic_metaprompt_button.click(
               fn=self.automatic_metaprompt,
               inputs=[prompt_text],
               outputs=[MetaPrompt_analysis, meta_prompt_choice]
+          ).then(
+              fn=lambda: None,
+              inputs=None,
+              outputs=None,
+              js="""
+                  () => {
+                      // Clear subsequent outputs
+                      document.querySelectorAll('.analysis-container textarea, .analysis-container .markdown-text, .model-container .markdown-text, .comparison-output').forEach(el => {
+                          if (el.value !== undefined) {
+                              el.value = '';
+                          } else {
+                              el.textContent = '';
+                          }
+                      });
+                      
+                      // Update button states
+                      const allButtons = Array.from(document.querySelectorAll('button')).filter(btn => 
+                          btn.textContent.includes('Automatic Choice') || 
+                          btn.textContent.includes('Refine Prompt') || 
+                          btn.textContent.includes('Apply Prompts')
+                      );
+                      allButtons.forEach(btn => btn.classList.remove('button-highlight'));
+                      allButtons[1].classList.add('button-highlight'); // Highlight refine button
+                      allButtons[0].classList.add('button-completed'); // Complete current button
+                      allButtons[2].classList.add('button-waiting'); // Set apply button to waiting
+                  }
+              """
           )
           
           refine_button.click(
               fn=self.refine_prompt,
               inputs=[prompt_text, meta_prompt_choice],
-              outputs=[
-                  prompt_evaluation,
-                  refined_prompt,
-                  explanation_of_refinements,
-                  full_response_json
-              ]
+              outputs=[prompt_evaluation, refined_prompt, explanation_of_refinements, full_response_json]
+          ).then(
+              fn=lambda: None,
+              inputs=None,
+              outputs=None,
+              js="""
+                  () => {
+                      // Clear model outputs
+                      document.querySelectorAll('.model-container .markdown-text, .comparison-output').forEach(el => {
+                          if (el.value !== undefined) {
+                              el.value = '';
+                          } else {
+                              el.textContent = '';
+                          }
+                      });
+                      
+                      // Update button states
+                      const allButtons = Array.from(document.querySelectorAll('button')).filter(btn => 
+                          btn.textContent.includes('Automatic Choice') || 
+                          btn.textContent.includes('Refine Prompt') || 
+                          btn.textContent.includes('Apply Prompts')
+                      );
+                      allButtons.forEach(btn => btn.classList.remove('button-highlight'));
+                      allButtons[2].classList.add('button-highlight'); // Highlight apply button
+                      allButtons[1].classList.add('button-completed'); // Complete current button
+                      allButtons[2].classList.remove('button-waiting'); // Remove waiting from apply button
+                  }
+              """
           )
           
           apply_button.click(
               fn=self.apply_prompts,
               inputs=[prompt_text, refined_prompt, apply_model],
-              outputs=[original_output, refined_output]
-          )
+              outputs=[original_output, refined_output, original_output1, refined_output1],
+              show_progress=True  # Add this line
+            ).then(
+              fn=lambda: None,
+              inputs=None,
+              outputs=None,
+              js="""
+                  () => {
+                      // Update button states
+                      const allButtons = Array.from(document.querySelectorAll('button')).filter(btn => 
+                          btn.textContent.includes('Automatic Choice') || 
+                          btn.textContent.includes('Refine Prompt') || 
+                          btn.textContent.includes('Apply Prompts')
+                      );
+                      allButtons.forEach(btn => btn.classList.remove('button-highlight', 'button-waiting'));
+                      allButtons[2].classList.add('button-completed'); // Complete apply button
+                      
+                      // Force refresh of output containers
+                      document.querySelectorAll('.comparison-output').forEach(el => {
+                          if (el.parentElement) {
+                              el.parentElement.style.display = 'none';
+                              setTimeout(() => {
+                                  el.parentElement.style.display = 'block';
+                              }, 100);
+                          }
+                      });
+                  }
+              """
+            )
 
-          gr.HTML(
-              "<p style='text-align: center; color:orange;'>⚠ This space is in progress, and we're actively working on it, so you might find some bugs! Please report any issues you have in the Community tab to help us make it better for all.</p>"
+          # Reset when input changes
+          prompt_text.change(
+              fn=lambda: None,
+              inputs=None,
+              outputs=None,
+              js="""
+                  () => {
+                      // Clear all outputs
+                      document.querySelectorAll('.analysis-container textarea, .analysis-container .markdown-text, .model-container .markdown-text, .comparison-output').forEach(el => {
+                          if (el.value !== undefined) {
+                              el.value = '';
+                          } else {
+                              el.textContent = '';
+                          }
+                      });
+                      
+                      // Reset all button states
+                      const allButtons = Array.from(document.querySelectorAll('button')).filter(btn => 
+                          btn.textContent.includes('Automatic Choice') || 
+                          btn.textContent.includes('Refine Prompt') || 
+                          btn.textContent.includes('Apply Prompts')
+                      );
+                      allButtons.forEach(btn => {
+                          btn.classList.remove('button-completed', 'button-highlight', 'button-waiting');
+                      });
+                      allButtons[0].classList.add('button-highlight'); // Highlight first button
+                      allButtons.slice(1).forEach(btn => btn.classList.add('button-waiting')); // Set subsequent buttons to waiting
+                  }
+              """
           )
 
   def automatic_metaprompt(self, prompt: str) -> tuple:
@@ -118,12 +258,7 @@ class GradioInterface:
       """Handle manual prompt refinement"""
       try:
           if not prompt.strip():
-              return (
-                  "No prompt provided.",
-                  "",
-                  "",
-                  {}
-              )
+              return ("No prompt provided.", "", "", {})
     
           result = self.prompt_refiner.refine_prompt(prompt, meta_prompt_choice)
           return (
@@ -139,16 +274,52 @@ class GradioInterface:
   def apply_prompts(self, original_prompt: str, refined_prompt: str, model: str) -> tuple:
       """Apply both original and refined prompts to the selected model"""
       try:
-          if not original_prompt.strip() or not refined_prompt.strip():
-              return "No prompt provided.", "No prompt provided."
+          if not original_prompt or not refined_prompt:
+              return ("Please provide both original and refined prompts.", 
+                      "Please provide both original and refined prompts.",
+                      "Please provide both original and refined prompts.",
+                      "Please provide both original and refined prompts.")
+
+          if not model:
+              return ("Please select a model.", 
+                      "Please select a model.",
+                      "Please select a model.",
+                      "Please select a model.")
+
+          # Apply prompts and get outputs
+          try:
+            #  print(original_prompt)
+             # print(refined_prompt)
+              #print(model)
+              
+              original_output = self.prompt_refiner.apply_prompt(original_prompt, model)
+              #print(original_output)
+              refined_output = self.prompt_refiner.apply_prompt(refined_prompt, model)
+          except Exception as e:
+              return (f"Error applying prompts: {str(e)}", 
+                      f"Error applying prompts: {str(e)}",
+                      f"Error applying prompts: {str(e)}",
+                      f"Error applying prompts: {str(e)}")
 
-          original_output = self.prompt_refiner.apply_prompt(original_prompt, model)
-          refined_output = self.prompt_refiner.apply_prompt(refined_prompt, model)
+          # Ensure we have string outputs
+          original_output = str(original_output) if original_output is not None else "No output generated"
+          refined_output = str(refined_output) if refined_output is not None else "No output generated"
+          print('-'*100)
+          print(original_output)
+          print('-'*100)
+          print(refined_output)
+          print('-'*100)
+          
+          return (
+              original_output,  # For Original Prompt Output tab
+              refined_output,   # For Refined Prompt Output tab
+              original_output,  # For Comparison tab - original
+              refined_output    # For Comparison tab - refined
+          )
           
-          return original_output, refined_output
       except Exception as e:
-          error_message = f"Error applying prompts: {str(e)}"
-          return error_message, error_message
+          error_message = f"Error in apply_prompts: {str(e)}"
+          return (error_message, error_message, error_message, error_message)
 
   def launch(self, share=False):
       """Launch the Gradio interface"""

custom_css.py

@@ -1,177 +1,382 @@
+
 custom_css = """
+/* ============================================
+ MAIN LAYOUT AND CONTAINERS
+ Purpose: Core layout structure with minimal spacing
+ ============================================ */
+/* Main container styling with blue border and rounded corners */
 .container {
-    border: 2px solid #2196F3;
-    border-radius: 10px;
-    padding: 12px;
-    margin: 6px;
-    background: white;
-    position: relative;
-    width: 100% !important;
-    max-width: 1200px !important;
-    margin: 0 auto 20px auto !important;
+  border: 2px solid #2196F3;          /* Blue border with 2px thickness */
+  border-radius: 10px;                /* Rounded corners */
+  padding: 10px !important;            /* Inner spacing */
+  margin: 2px auto !important;        /* Outer spacing and center alignment */
+  background: white;                  /* White background */
+  position: relative;                 /* For absolute positioning of children */
+  width: 100% !important;            /* Full width */
+  max-width: 1200px !important;      /* Maximum width constraint */
 }
 
+/* Section header label positioning and styling */
 .container::before {
-    position: absolute;
-    top: -14px;
-    left: 20px;
-    background: white;
-    padding: 0 10px;
-    color: #2196F3;
-    font-weight: bold;
-    font-size: 1.2em;
+  position: absolute;                 /* Position independently */
+  top: -18px;                        /* Negative top margin to overlap container border */
+  left: 20px;                        /* Left offset */
+  background: white;                 /* White background for text */
+  padding: 0 2px;                   /* Horizontal padding*/
+  color: #2196F3;                    /* Blue text color */
+  font-weight: bold;                 /* Bold text */
+  font-size: 1.2em;                  /* Larger text size */
 }
 
+/* ============================================
+ TITLE SECTION
+ Purpose: "Prompts on Chosen Model" header styling
+ ============================================ */
+/* Title container styling */
 .title-container {
-    width: fit-content !important;
-    margin: 0 auto !important;
-    padding: 2px 40px !important;
-    border: 1px solid #0066cc !important;
-    border-radius: 10px !important;
-    background-color: rgba(0, 102, 204, 0.05) !important;
+  width: fit-content !important;      /* Width based on content */
+  margin: 0 auto !important;          /* Center alignment */
+  margin-bottom: 30px !important; /* Adjust the value (30px) as needed */
+  padding: 2px 40px !important;       /* Horizontal padding */
+  border: 1px solid #0066cc !important; /* Blue border */
+  border-radius: 10px !important;     /* Rounded corners */
+  background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */
 }
 
+/* Center align all text in title container */
 .title-container * {
-    text-align: center;
-    margin: 0 !important;
-    line-height: 1.2 !important;
+  text-align: center;                 /* Center text alignment */
+  margin: 0 !important;               /* Remove margins */
+  line-height: 1.2 !important;        /* Line height for readability */
 }
 
+/* Main title styling */
 .title-container h1 {
-    font-size: 28px !important;
-    margin-bottom: 1px !important;
+  font-size: 28px !important;         /* Large font size */
+  margin-bottom: 1px !important;      /* Small bottom margin */
 }
 
+/* Subtitle styling */
 .title-container h3 {
-    font-size: 18px !important;
-    margin-bottom: 1px !important;
+  font-size: 18px !important;         /* Medium font size */
+  margin-bottom: 1px !important;      /* Small bottom margin */
 }
 
+/* Paragraph text styling in title */
 .title-container p {
-    font-size: 14px !important;
-    margin-bottom: 1px !important;
-}
-
-.input-container::before { 
-    content: 'PROMPT ANALYSIS';
+  font-size: 14px !important;         /* Regular font size */
+  margin-bottom: 1px !important;      /* Small bottom margin */
 }
 
-.analysis-container::before {
-    content: 'PROMPT REFINEMENT';
-}
-
-.meta-container::before {
-    content: 'REFINEMENT METHOD';
-}
+/* ============================================
+ SECTION LABELS
+ Purpose: Section header text content
+ ============================================ */
+/* Define text content for each section header */
+.input-container::before { content: 'PROMPT ANALYSIS'; }
+.analysis-container::before { content: 'PROMPT REFINEMENT'; }
+.meta-container::before { content: 'REFINEMENT METHOD'; }
+.model-container::before { content: 'PROMPTS APPLICATION'; }
+.examples-container::before { content: 'EXAMPLES'; }
 
-.model-container::before {
-    content: 'PROMPTS APPLICATION';
-}
-
-.examples-container::before {
-    content: 'EXAMPLES';
-}
-
-/* Resizable textbox */
+/* ============================================
+ INPUT ELEMENTS
+ Purpose: Textarea and input styling
+ ============================================ */
+/* Textarea styling */
 .input-container textarea {
-    resize: vertical !important;
-    min-height: 100px !important;
-    max-height: 500px !important;
-    width: 100% !important;
-    border: 1px solid #ddd !important;
-    border-radius: 4px !important;
-    padding: 8px !important;
-    transition: all 0.3s ease !important;
+  resize: vertical !important;         /* Allow vertical resizing only */
+  min-height: 100px !important;       /* Minimum height */
+  max-height: 500px !important;       /* Maximum height */
+  width: 100% !important;             /* Full width */
+  border: 1px solid #ddd !important;  /* Light gray border */
+  border-radius: 4px !important;      /* Rounded corners */
+  padding: 2px !important;            /* Inner spacing */
+  transition: all 0.3s ease !important; /* Smooth transitions */
 }
 
+/* Textarea focus state */
 .input-container textarea:focus {
-    border-color: #2196F3 !important;
-    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important;
+  border-color: #2196F3 !important;   /* Blue border when focused */
+  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important; /* Subtle shadow */
 }
 
-/* Radio group styling */
+/* ============================================
+ RADIO BUTTONS
+ Purpose: Selection options styling
+ ============================================ */
+/* Radio button group container */
 .radio-group {
-    background-color: rgba(0, 102, 204, 0.05) !important;
-    padding: 10px !important;
-    border-radius: 8px !important;
-    border: 1px solid rgba(0, 102, 204, 0.1) !important;
-    display: flex !important;
-    justify-content: center !important;
-    flex-wrap: wrap !important;
-    gap: 8px !important;
-    width: 100% !important;
+  background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */
+  padding: 10px !important;           /* Inner spacing */
+  border-radius: 8px !important;      /* Rounded corners */
+  border: 1px solid rgba(0, 102, 204, 0.1) !important; /* Light blue border */
+  display: flex !important;           /* Flex layout */
+  justify-content: center !important; /* Center items */
+  flex-wrap: wrap !important;         /* Allow wrapping */
+  gap: 8px !important;               /* Space between items */
+  width: 100% !important;            /* Full width */
 }
 
+/* Radio button container */
 .gradio-radio {
-    display: flex !important;
-    justify-content: center !important;
-    flex-wrap: wrap !important;
-    gap: 8px !important;
+  display: flex !important;           /* Flex layout */
+  justify-content: center !important; /* Center items */
+  flex-wrap: wrap !important;         /* Allow wrapping */
+  gap: 8px !important;               /* Space between items */
 }
 
+/* Radio button label styling */
 .gradio-radio label {
-    display: flex !important;
-    align-items: center !important;
-    padding: 6px 12px !important;
-    border: 1px solid #ddd !important;
-    border-radius: 4px !important;
-    cursor: pointer !important;
-    background: white !important;
-    margin: 4px !important;
+  display: flex !important;           /* Flex layout */
+  align-items: center !important;     /* Center vertically */
+  padding: 6px 12px !important;       /* Inner spacing */
+  border: 1px solid #ddd !important;  /* Light gray border */
+  border-radius: 4px !important;      /* Rounded corners */
+  cursor: pointer !important;         /* Pointer cursor */
+  background: white !important;       /* White background */
+  margin: 4px !important;            /* Outer spacing */
 }
 
+/* Selected radio button styling */
 .gradio-radio input[type="radio"]:checked + label {
-    background: rgba(0, 102, 204, 0.1) !important;
-    border-color: #0066cc !important;
-    color: #0066cc !important;
-    font-weight: bold !important;
+  background: rgba(0, 102, 204, 0.1) !important; /* Light blue background */
+  border-color: #0066cc !important;   /* Blue border */
+  color: #0066cc !important;          /* Blue text */
+  font-weight: bold !important;       /* Bold text */
 }
 
-/* Button styling */
+/* ============================================
+ BUTTONS
+ Purpose: Interactive button styling
+ ============================================ */
+/* Base button styling */
 .gradio-button {
-    background-color: white !important;
-    color: #2196F3 !important;
-    border: 2px solid #2196F3 !important;
-    border-radius: 4px !important;
-    padding: 8px 16px !important;
-    margin: 10px 0 !important;
-    font-weight: bold !important;
-    transition: all 0.3s ease !important;
+  background-color: white !important;  /* White background */
+  color: #2196F3 !important;          /* Blue text */
+  border: 2px solid #2196F3 !important; /* Blue border */
+  border-radius: 4px !important;      /* Rounded corners */
+  padding: 8px 16px !important;       /* Inner spacing */
+  margin: 10px 0 !important;          /* Vertical margin */
+  font-weight: bold !important;       /* Bold text */
+  transition: all 0.3s ease !important; /* Smooth transitions */
 }
 
+/* Button hover state */
 .gradio-button:hover {
-    background-color: #2196F3 !important;
-    color: white !important;
-    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important;
+  background-color: #2196F3 !important; /* Blue background on hover */
+  color: white !important;             /* White text on hover */
+  box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3) !important; /* Shadow effect */
+}
+
+/* Highlighted button state */
+.button-highlight {
+  animation: pulse 2s infinite;        /* Pulsing animation */
+  border-color: #ff9800 !important;    /* Orange border */
+  border-width: 3px !important;        /* Thicker border */
+  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important; /* Glow effect */
+}
+
+/* Pulsing animation keyframes */
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); }    /* Start state */
+  70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }  /* Mid state */
+  100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }    /* End state */
 }
 
+/* Waiting button state */
+.button-waiting { 
+  opacity: 0.6 !important;            /* Reduced opacity */
+}
+
+/* Completed button state */
+.button-completed {
+  border-color: #4CAF50 !important;    /* Green border */
+  background-color: rgba(76, 175, 80, 0.1) !important; /* Light green background */
+}
+
+/* ============================================
+ LAYOUT COMPONENTS
+ Purpose: Basic layout element styling
+ ============================================ */
 /* Accordion styling */
 .gradio-accordion {
-    margin: 10px 0 !important;
-    border: none !important;
+  margin: 10px 0 !important;          /* Vertical margin */
+  border: none !important;            /* Remove border */
 }
 
-/* Container alignment */
+/* Main container layout */
 .gradio-container {
-    display: flex !important;
-    flex-direction: column !important;
-    align-items: center !important;
-    width: 100% !important;
-    max-width: 1200px !important;
-    margin: 0 auto !important;
+  display: flex !important;           /* Flex layout */
+  flex-direction: column !important;  /* Stack vertically */
+  align-items: center !important;     /* Center items */
+  width: 100% !important;            /* Full width */
+  max-width: 1200px !important;      /* Maximum width */
+  margin: 2px auto !important;         /* Center horizontally */
 }
 
-/* Dropdown styling */
+/* Dropdown menu styling */
 .gradio-dropdown {
-    width: 100% !important;
-    max-width: 300px !important;
+  width: 100% !important;            /* Full width */
+  max-width: 300px !important;       /* Maximum width */
 }
 
-/* JSON container */
+/* JSON response container */
 .full-response-json {
-    margin-top: 20px !important;
-    padding: 10px !important;
-    background-color: rgba(0, 102, 204, 0.05) !important;
-    border-radius: 8px !important;
+  margin-top: 20px !important;       /* Top margin */
+  padding: 10px !important;          /* Inner spacing */
+  background-color: rgba(0, 102, 204, 0.05) !important; /* Light blue background */
+  border-radius: 8px !important;     /* Rounded corners */
+}
+
+/* ============================================
+ COMPARISON COLUMNS
+ Purpose: Side-by-side output display
+ ============================================ */
+/* Column container styling */
+.comparison-column {
+  border: 2px solid #2196F3 !important; /* Blue border */
+  border-radius: 8px !important;      /* Rounded corners */
+  padding: 4px !important;            /* Inner spacing */
+  margin: 1px !important;             /* Minimal margin */
+  background-color: white !important; /* White background */
+  flex: 1 !important;                /* Equal width columns */
+  min-width: 300px !important;       /* Minimum width */
+  padding-right: 2px !important;      /* Add this to remove right padding */
+  margin-right: 2px !important;       /* Add this to remove right margin */
+}
+
+/* Column header styling */
+.comparison-column h3 {
+  color: #2196F3 !important;          /* Blue text */
+  border-bottom: 1px solid #e0e0e0 !important; /* Bottom border */
+  padding-bottom: 2px !important;     /* Bottom padding */
+  margin: 0 0 4px 0 !important;       /* Bottom margin */
+  font-size: 16px !important;         /* Font size */
+  text-align: center !important;      /* Center text */
+}
+
+/* Output area styling */
+.comparison-output {
+  min-height: 200px !important;       /* Minimum height */
+  padding: 6px !important;            /* Inner spacing */
+  background-color: #f8f9fa !important; /* Light gray background */
+  border: 1px solid #dee2e6 !important; /* Gray border */
+  border-radius: 4px !important;      /* Rounded corners */
+  margin: 4px 0 !important;           /* Vertical margin */
+  white-space: pre-wrap !important;   /* Preserve whitespace */
+  word-wrap: break-word !important;   /* Break long words */
+  font-family: monospace !important;  /* Monospace font */
+  line-height: 1.5 !important;        /* Line height */
+  overflow-y: auto !important;        /* Vertical scroll */
+  width: 100% !important;            /* Full width */
+  visibility: visible !important;     /* Always visible */
+  opacity: 1 !important;             /* Full opacity */
+  padding: 10px 3px !important;  /* 20px top/bottom, 30px left/right */
+}
+
+/* ============================================
+ OUTPUT ROW
+ Purpose: Layout for output display
+ ============================================ */
+/* Output row container */
+.output-row {
+  display: flex !important;           /* Flex layout */
+  gap: 1mm !important;               /* Small gap between items */
+  padding: 2mm !important;           /* Inner spacing */
+  width: 100% !important;            /* Full width */
+  flex-wrap: wrap !important;        /* Allow wrapping */
+}
+
+/* ============================================
+ TABS
+ Purpose: Tab navigation styling
+ ============================================ */
+/* Tab container */
+.tabs {
+  border: none !important;            /* Remove border */
+  margin-top: 4px !important;         /* Top margin */
+  width: 100% !important;            /* Full width */
+}
+
+/* Individual tab item */
+.tabitem {
+  padding: 4px !important;            /* Inner spacing */
+  width: 100% !important;            /* Full width */
+}
+
+/* ============================================
+ TEXT CONTENT
+ Purpose: Text display formatting
+ ============================================ */
+/* Markdown text styling */
+.markdown-text {
+  color: #333333 !important;          /* Dark gray text */
+  line-height: 1.6 !important;        /* Line height */
+  font-size: 14px !important;         /* Font size */
+  margin: 4px 4px !important;           /* Vertical margin */
+  opacity: 1 !important;              /* Full opacity */
+  visibility: visible !important;      /* Always visible */
+  padding: 15px !important; 
+}
+
+/* Placeholder text for empty output */
+.comparison-output:empty::before {
+  content: 'Output will appear here' !important; /* Placeholder text */
+  color: #666666 !important;          /* Gray text */
+  font-style: italic !important;      /* Italic style */
+}
+
+/* ============================================
+ BUTTON STATES
+ Purpose: Button interaction styling
+ ============================================ */
+/* Default button state */
+button {
+  opacity: 1 !important;              /* Full opacity */
+  pointer-events: auto !important;    /* Enable interactions */
+}
+
+/* Disabled button state */
+button:disabled {
+  opacity: 0.6 !important;            /* Reduced opacity */
+  pointer-events: none !important;    /* Disable interactions */
+}
+
+/* ============================================
+ VISIBILITY
+ Purpose: Element display control
+ ============================================ */
+/* Output content visibility */
+.output-content {
+  opacity: 1 !important;              /* Full opacity */
+  visibility: visible !important;      /* Always visible */
+  display: block !important;          /* Block display */
+}
+
+/* Output container visibility */
+.output-container {
+  display: block !important;          /* Block display */
+  visibility: visible !important;      /* Always visible */
+  opacity: 1 !important;              /* Full opacity */
+}
+
+/* ============================================
+ CODE BLOCKS
+ Purpose: Code and pre-formatted text styling
+ ============================================ */
+/* Code block styling */
+pre, code {
+  background-color: #f8f9fa !important; /* Light gray background */
+  border: 1px solid #dee2e6 !important; /* Gray border */
+  border-radius: 4px !important;      /* Rounded corners */
+  padding: 10px !important;           /* Inner spacing */
+  margin: 5px 0 !important;           /* Vertical margin */
+  white-space: pre-wrap !important;   /* Preserve whitespace */
+  word-wrap: break-word !important;   /* Break long words */
+  font-family: monospace !important;  /* Monospace font */
+  line-height: 1.5 !important;        /* Line height */
+  display: block !important;          /* Block display */
+  width: 100% !important;            /* Full width */
 }
 """

prompt_refiner.py

@@ -55,13 +55,13 @@ class PromptRefiner:
                   if isinstance(parsed_json, str):
                       parsed_json = json.loads(parsed_json)
                   prompt_analysis = f"""
-                                      #### Original prompt analysis                                      
-                                      - {parsed_json.get("initial_prompt_evaluation", "")}
-                                      """
+                  #### Original prompt analysis    
+                  - {parsed_json.get("initial_prompt_evaluation", "")}
+                  """
                   explanation_of_refinements=f"""
-                                      #### Refinement Explanation
-                                      - {parsed_json.get("explanation_of_refinements", "")}
-                                      """
+                  #### Refinement Explanation
+                  - {parsed_json.get("explanation_of_refinements", "")}
+                  """
                   return {
                       "initial_prompt_evaluation": prompt_analysis,
                       "refined_prompt": parsed_json.get("refined_prompt", ""),
@@ -124,40 +124,39 @@ class PromptRefiner:
                   "content": metaprompt_router.replace("[Insert initial prompt here]", prompt)
               }
           ]
-    
+          
           router_response = self.client.chat_completion(
               model=prompt_refiner_model,
               messages=router_messages,
               max_tokens=3000,
               temperature=0.2
           )
-    
+          
           router_content = router_response.choices[0].message.content.strip()
           json_match = re.search(r'<json>(.*?)</json>', router_content, re.DOTALL)
           
           if not json_match:
               raise ValueError("No JSON found in router response")
-    
+          
           router_result = json.loads(json_match.group(1))
           recommended_key = router_result["recommended_metaprompt"]["key"]
           metaprompt_analysis = f"""
-              #### Selected MetaPrompt
-              - **Primary Choice**: {router_result["recommended_metaprompt"]["name"]}
-              - *Description*: {router_result["recommended_metaprompt"]["description"]}
-              - *Why This Choice*: {router_result["recommended_metaprompt"]["explanation"]}
-              - *Similar Sample*: {router_result["recommended_metaprompt"]["similar_sample"]}
-              - *Customized Sample*: {router_result["recommended_metaprompt"]["customized_sample"]}
-              
-              #### Alternative Option
-              - **Secondary Choice**: {router_result["alternative_recommendation"]["name"]}
-              - *Why Consider This*: {router_result["alternative_recommendation"]["explanation"]}
+          #### Selected MetaPrompt
+          - **Primary Choice**: {router_result["recommended_metaprompt"]["name"]}
+          - *Description*: {router_result["recommended_metaprompt"]["description"]}
+          - *Why This Choice*: {router_result["recommended_metaprompt"]["explanation"]}
+          - *Similar Sample*: {router_result["recommended_metaprompt"]["similar_sample"]}
+          - *Customized Sample*: {router_result["recommended_metaprompt"]["customized_sample"]}
+          
+          #### Alternative Option
+          - **Secondary Choice**: {router_result["alternative_recommendation"]["name"]}
+          - *Why Consider This*: {router_result["alternative_recommendation"]["explanation"]}
           """
           
           return metaprompt_analysis, recommended_key
-    
+          
       except Exception as e:
           return f"Error in automatic metaprompt: {str(e)}", ""
-      
 
   def refine_prompt(self, prompt: str, meta_prompt_choice: str) -> Tuple[str, str, str, dict]:
       """Refine the given prompt using the selected meta prompt."""
@@ -175,14 +174,14 @@ class PromptRefiner:
                   "content": selected_meta_prompt.replace("[Insert initial prompt here]", prompt)
               }
           ]
-    
+          
           response = self.client.chat_completion(
               model=prompt_refiner_model,
               messages=messages,
               max_tokens=3000,
               temperature=0.8
           )
-    
+          
           result = self._parse_response(response.choices[0].message.content.strip())
           llm_response = LLMResponse(**result)
           llm_response_dico={}
@@ -196,7 +195,7 @@ class PromptRefiner:
               llm_response.explanation_of_refinements,
               llm_response_dico
           )
-    
+          
       except Exception as e:
           return (
               f"Error: {str(e)}",
@@ -205,42 +204,35 @@ class PromptRefiner:
               {}
           )
 
-  def _create_error_response(self, error_message: str) -> Tuple[str, str, str, str, dict]:
-      """Create a standardized error response tuple."""
-      return (
-         # f"Error: {error_message}",
-          f"Error: {error_message}",
-          "The selected model is currently unavailable.",
-          "An error occurred during processing.",
-          {"error": error_message}
-      )
-
   def apply_prompt(self, prompt: str, model: str) -> str:
-      """Apply formatting to the prompt using the specified model."""
-      try:
-          messages = [
-              {
-                  "role": "system",
-                  "content": "You are a markdown formatting expert."
-              },
-              {
-                  "role": "user",
-                  "content": prompt
-              }
-          ]
-
-          response = self.client.chat_completion(
-              model=model,
-              messages=messages,
-              max_tokens=3000,
-              temperature=0.8,
-              stream=True
-          )
-
-          return "".join(
-              chunk.choices[0].delta.content or ""
-              for chunk in response
-          ).strip()
-
-      except Exception as e:
-          return f"Error: {str(e)}"
+    """Apply formatting to the prompt using the specified model."""
+    try:
+        if not prompt or not model:
+            return "Error: Prompt and model are required"
+        
+        messages = [
+            {
+                "role": "system",
+                "content": "You are a markdown formatting expert."
+            },
+            {
+                "role": "user",
+                "content": prompt
+            }
+        ]
+        
+        response = self.client.chat_completion(
+            model=model,
+            messages=messages,
+            max_tokens=3000,
+            temperature=0.8,
+            stream=False  # Mode non-stream
+        )
+        
+        # Accès direct à la réponse puisque stream=False
+        result = response.choices[0].message.content.strip()
+        return f"""{result}"""
+
+        
+    except Exception as e:
+        return f"Error: {str(e)}"