preference button

app.py

@@ -213,14 +213,18 @@ with gr.Blocks(title="Multi-Model LLM Comparison Tool") as demo:
         # Display question info
         question_display = gr.Markdown()
         
-        # Results container
-        results_html = gr.HTML()
-        
-        # Preference buttons - create up to 4 buttons (for max 4 models)
-        with gr.Column() as preference_buttons_section:
+        # Results with integrated buttons
+        with gr.Column() as results_container:
+            result_card_1 = gr.HTML(visible=False)
             pref_btn_1 = gr.Button("This one works for me", elem_classes="preference-button", visible=False)
+            
+            result_card_2 = gr.HTML(visible=False)
             pref_btn_2 = gr.Button("This one works for me", elem_classes="preference-button", visible=False)
+            
+            result_card_3 = gr.HTML(visible=False)
             pref_btn_3 = gr.Button("This one works for me", elem_classes="preference-button", visible=False)
+            
+            result_card_4 = gr.HTML(visible=False)
             pref_btn_4 = gr.Button("This one works for me", elem_classes="preference-button", visible=False)
         
         # Preference status
@@ -242,45 +246,56 @@ with gr.Blocks(title="Multi-Model LLM Comparison Tool") as demo:
                 input_section: gr.Column(visible=True),
                 results_section: gr.Column(visible=False),
                 results_state: [],
+                result_card_1: gr.HTML(visible=False),
                 pref_btn_1: gr.Button(visible=False),
+                result_card_2: gr.HTML(visible=False),
                 pref_btn_2: gr.Button(visible=False),
+                result_card_3: gr.HTML(visible=False),
                 pref_btn_3: gr.Button(visible=False),
+                result_card_4: gr.HTML(visible=False),
                 pref_btn_4: gr.Button(visible=False)
             }
         
-        # Build results HTML
+        # Build results
         question_info = f"**Your question:** {question}  \n**Answer length:** {output_length}"
         
-        results_cards = ""
-        for result in results:
-            model = result["model"]
-            response = result["response"]
-            
-            results_cards += f"""
-            <div class="model-card">
-                <div class="model-title">{model}</div>
-                <div class="answer-length">{output_length} answer</div>
-                <div class="response-text">{response}</div>
-            </div>
-            """
-        
-        # Show buttons for each result
         num_results = len(results)
-        btn_updates = {
-            pref_btn_1: gr.Button(value=f"This one works for me - {results[0]['model']}", visible=num_results >= 1) if num_results >= 1 else gr.Button(visible=False),
-            pref_btn_2: gr.Button(value=f"This one works for me - {results[1]['model']}", visible=num_results >= 2) if num_results >= 2 else gr.Button(visible=False),
-            pref_btn_3: gr.Button(value=f"This one works for me - {results[2]['model']}", visible=num_results >= 3) if num_results >= 3 else gr.Button(visible=False),
-            pref_btn_4: gr.Button(value=f"This one works for me - {results[3]['model']}", visible=num_results >= 4) if num_results >= 4 else gr.Button(visible=False),
-        }
+        
+        # Create individual card HTML and button updates
+        card_updates = {}
+        btn_updates = {}
+        
+        for i in range(4):
+            if i < num_results:
+                model = results[i]["model"]
+                response = results[i]["response"]
+                card_html = f"""
+                <div class="model-card">
+                    <div class="model-title">{model}</div>
+                    <div class="answer-length">{output_length} answer</div>
+                    <div class="response-text">{response}</div>
+                </div>
+                """
+                card_updates[f"result_card_{i+1}"] = gr.HTML(value=card_html, visible=True)
+                btn_updates[f"pref_btn_{i+1}"] = gr.Button(value=f"This one works for me - {model}", visible=True)
+            else:
+                card_updates[f"result_card_{i+1}"] = gr.HTML(visible=False)
+                btn_updates[f"pref_btn_{i+1}"] = gr.Button(visible=False)
         
         return {
             error_msg: gr.Markdown(visible=False),
             input_section: gr.Column(visible=False),
             results_section: gr.Column(visible=True),
             question_display: gr.Markdown(value=question_info),
-            results_html: gr.HTML(value=results_cards),
             results_state: results,
-            **btn_updates
+            result_card_1: card_updates["result_card_1"],
+            pref_btn_1: btn_updates["pref_btn_1"],
+            result_card_2: card_updates["result_card_2"],
+            pref_btn_2: btn_updates["pref_btn_2"],
+            result_card_3: card_updates["result_card_3"],
+            pref_btn_3: btn_updates["pref_btn_3"],
+            result_card_4: card_updates["result_card_4"],
+            pref_btn_4: btn_updates["pref_btn_4"]
         }
     
     def record_preference(model_index):
@@ -300,8 +315,9 @@ with gr.Blocks(title="Multi-Model LLM Comparison Tool") as demo:
     compare_btn.click(
         fn=show_results,
         inputs=[question_input, output_length] + model_checkboxes,
-        outputs=[error_msg, input_section, results_section, question_display, results_html, results_state, 
-                 pref_btn_1, pref_btn_2, pref_btn_3, pref_btn_4]
+        outputs=[error_msg, input_section, results_section, question_display, results_state,
+                 result_card_1, pref_btn_1, result_card_2, pref_btn_2,
+                 result_card_3, pref_btn_3, result_card_4, pref_btn_4]
     )
     
     back_btn.click(