updated ui and download options

app.py

@@ -4,11 +4,54 @@ import pickle
 import plotly.graph_objects as go
 import plotly.express as px
 import pandas as pd
+import tempfile
+import os
 
-# Define styling for success/failure highlighting
-def highlight_success(val):
-    color = 'lightgreen' if val == 'Success' else 'lightcoral'
-    return f'color:white;background-color: {color}'
+# Split the styling into two separate functions for clarity and simplicity
+def style_feasible_column(val):
+    """Style for the Feasible? column"""
+    if val == 'Success':
+        return 'color:white;background-color: lightgreen'
+    elif val == 'Failed':
+        return 'color:white;background-color: lightcoral'
+    return ''
+
+def style_size_column(val):
+    """Style for the Size column based on proximity to target"""
+    try:
+        val_float = float(val)
+        
+        distance = val_float - 3.0  # Signed distance from target
+        abs_distance = abs(distance)
+        
+        # Calculate width percentage based on distance
+        max_distance = 2.5
+        width_pct = 100 - min(abs_distance / max_distance * 100, 100)
+        
+        # Determine color based on value position relative to target
+        if distance < 0:
+            color = f"rgba(0, 128, 128, {min(1.0, 0.4 + 0.6*(1-abs_distance/max_distance))})"  # Teal for below
+        else:
+            color = f"rgba(230, 97, 0, {min(1.0, 0.4 + 0.6*(1-abs_distance/max_distance))})"  # Orange for above
+        
+        # Text styling based on proximity to target
+        if abs_distance > 3:
+            text_color = "grey"
+        elif abs_distance > 1:
+            text_color = "black"
+        else:
+            text_color = "white"
+            
+        font_weight = "bold" if abs_distance < 0.5 else "normal"
+        
+        # Create gradient style
+        return (
+            f"background: linear-gradient(90deg, {color} {width_pct}%, transparent {width_pct}%); "
+            f"color: {text_color}; "
+            f"font-weight: {font_weight}; "
+        )
+    except (ValueError, TypeError):
+        return ''
 
 # Simulation function for electrospraying
 def sim_espray_constrained(x, noise_se=None):
@@ -42,7 +85,12 @@ exp_record_df = pd.DataFrame(X_init, columns=['Concentration (%w/v)', 'Flow Rate
 exp_record_df['Size (um)'] = Y_init[:, 0]
 exp_record_df['Solvent'] = ['DMAc' if x == 0 else 'CHCl3' for x in exp_record_df['Solvent']]
 exp_record_df['Feasible?'] = ['Success' if x == 1 else 'Failed' for x in Y_init[:, 1]]
-prior_experiments_display = exp_record_df.style.map(highlight_success, subset=['Feasible?']).format(precision=3)
+
+# Apply each styling function to its specific column
+prior_experiments_display = exp_record_df.style\
+    .map(style_feasible_column, subset=['Feasible?'])\
+    .map(style_size_column, subset=['Size (um)'])\
+    .format(precision=3)
 
 # Functions for data processing and visualization
 def import_results():
@@ -166,6 +214,17 @@ def plot_results(exp_data_df):
     
     return fig
 
+# Add function to calculate AUC
+def calculate_auc(human_performance_values):
+    """Calculate the Area Under the Curve for a user's performance"""
+    # Simple trapezoidal integration
+    if len(human_performance_values) <= 1:
+        return 0
+    
+    # AUC calculation using trapezoidal rule
+    auc_value = np.trapezoid(human_performance_values, dx=1)
+    return round(auc_value, 4)
+
 # Prediction function - simplified signature by removing unnecessary text params
 def predict(state, conc1, flow_rate1, voltage1, solvent1, conc2, flow_rate2, voltage2, solvent2):
     # Get current results storage from state or initialize if None
@@ -193,63 +252,149 @@ def predict(state, conc1, flow_rate1, voltage1, solvent1, conc2, flow_rate2, vol
     results_df['Feasible?'] = ['Success' if x == 1 else 'Failed' for x in results_df['Feasible?']]
     
     results_storage = pd.concat([results_storage, results_df], ignore_index=True)
-    results_display = results_storage.style.map(highlight_success, subset=['Feasible?']).format(precision=3)
+    
+    # Apply each styling function to its specific column
+    results_display = results_storage.style\
+        .map(style_feasible_column, subset=['Feasible?'])\
+        .map(style_size_column, subset=['Size (um)'])\
+        .format(precision=3)
    
+    # Check if user has completed 5 rounds (10 experiments)
+    completed = len(results_storage) >= 10
+
+    message = ""
+    auc_value = 0
+    usr_level = ""
+    
+    if completed:
+        # Calculate AUC
+        human_performance = calc_human_performance(results_storage)
+        auc_value = calculate_auc(human_performance)
+        # beginner = 2.62, intermediate = 1.60, expert = 1.03
+        if auc_value > 4.10:
+            usr_level = "randomly playing!"
+        elif auc_value > 1.80:
+            usr_level = "a beginner."
+        elif auc_value > 1.30:
+            usr_level = "an intermediate user."
+        elif auc_value > 0.60:
+            usr_level = "an advanced user."
+        else:
+            usr_level = "... come on, you must have cheated (or you are extremely lucky)!"
+
+        message = f"🎉 Congratulations! You've completed all 5 rounds.\nYour performance AUC is ** {auc_value:.2f} ** and CCBO was ** 1.40 **.\nYou seems to be {usr_level}\nNow you can download your results or try again!"
+    
     # Return updated state and UI updates
     return (
         results_storage, 
         gr.DataFrame(value=prior_experiments_display, label="Prior Experiments"),
         gr.DataFrame(value=results_display, label="Your Results"), 
-        plot_results(results_storage)
+        plot_results(results_storage),
+        gr.update(visible=completed),  # Show download button when completed
+        gr.update(value=message, visible=completed),  # Show message when completed
+        gr.update(value=auc_value),  # Update AUC value
+        gr.update(visible=completed)  # Show result file component
     )
 
 # Reset results function
 def reset_results(state):
     results_storage = pd.DataFrame(columns=['Concentration (%w/v)', 'Flow Rate (mL/h)', 'Voltage (kV)', 'Solvent', 'Size (um)', 'Feasible?'])
+    # Generate the plot for empty results
+    empty_plot = plot_results(results_storage)
+    
+    # Apply each styling function to its specific column
+    styled_results = results_storage.style\
+        .map(style_feasible_column, subset=['Feasible?'])\
+        .map(style_size_column, subset=['Size (um)'])\
+        .format(precision=3)
+    
     return (
-        results_storage, 
-        gr.DataFrame(value=prior_experiments_display, label="Prior Experiments"),
-        gr.DataFrame(value=results_storage.style.map(highlight_success, subset=['Feasible?']).format(precision=3), label="Your Results"), 
-        plot_results(results_storage)
+        results_storage,  # results_state 
+        gr.DataFrame(value=prior_experiments_display, label="Prior Experiments"),  # prior_experiments
+        gr.DataFrame(value=styled_results, label="Your Results"),  # results_df
+        empty_plot,  # perf_plot
+        gr.update(visible=False),  # download_btn visibility
+        gr.update(value="", visible=False),  # completion_message
+        gr.update(value=0),  # auc_state
+        gr.update(visible=False)  # result_file visibility
     )
 
+# Function to prepare results for download
+def prepare_results_for_download(results):
+    """Prepare results dataframe for download and save to CSV"""
+    if results is None or len(results) == 0:
+        return None
+    
+    # Calculate human performance
+    human_performance = calc_human_performance(results)
+    auc_value = calculate_auc(human_performance)
+    
+    # Add a summary row with AUC
+    summary_df = pd.DataFrame({
+        'Concentration (%w/v)': ["Performance AUC:"],
+        'Flow Rate (mL/h)': [auc_value],
+        'Voltage (kV)': [""],
+        'Solvent': [""],
+        'Size (um)': [""],
+        'Feasible?': [""]
+    })
+    
+    # Combine results with summary
+    combined_df = pd.concat([results, summary_df], ignore_index=True)
+    
+    # Save to temporary file
+    temp_dir = tempfile.gettempdir()
+    output_path = os.path.join(temp_dir, "electrospray_results.csv")
+    combined_df.to_csv(output_path, index=False)
+    
+    return output_path
+
 # Application description
 description = "<h3>Welcome, challenger!</h3><p> If you think you may perform better than <strong>CCBO</strong>, try this interactive game to optimize electrospray! Rules are simple: <ul><li>Examine carefully the initial experiments you have on the right (or below if you're using your phone), remember, your target size is <u><i><strong>3.000 um</strong></i></u> ----></li><li>Select your parameters, you have <strong>2</strong> experiments (chances) in each round, use them wisely! </li><li>Click <strong>Submit</strong> to see the results, reflect and improve your selection!</li><li>Repeat the process for <strong>5</strong> rounds to see if you can beat CCBO!</li></ul></p><p>Your data will not be stored, so feel free to play again, good luck!</p>"
 
 # Create Gradio interface
 with gr.Blocks() as demo:
-    gr.Markdown("## Human vs CCBO Campaign - Optimize Electrospray")
-    gr.Markdown(description)
-    
     # Add state component to store user-specific results
     results_state = gr.State()
-    
+    auc_state = gr.State(value=0)
     with gr.Row():
         # Input parameters column
         with gr.Column():
-            gr.Markdown("### Experiment 1")
-            conc1 = gr.Slider(minimum=0.05, maximum=5.0, value=1.2, step=0.001, label="Concentration (%w/v)")
-            flow_rate1 = gr.Slider(minimum=0.01, maximum=60.0, value=20.0, step=0.001, label="Flow Rate (mL/h)")
-            voltage1 = gr.Slider(minimum=10.0, maximum=18.0, value=15.0, step=0.001, label="Voltage (kV)")
-            solvent1 = gr.Dropdown(['DMAc', 'CHCl3'], value='DMAc', label='Solvent')
+            gr.Markdown("## Human vs CCBO Campaign - Optimize Electrospray")
+            gr.Markdown(description)
+
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### Experiment 1")
+                    conc1 = gr.Slider(minimum=0.05, maximum=5.0, value=1.2, step=0.001, label="Concentration (%w/v)")
+                    flow_rate1 = gr.Slider(minimum=0.01, maximum=60.0, value=20.0, step=0.001, label="Flow Rate (mL/h)")
+                    voltage1 = gr.Slider(minimum=10.0, maximum=18.0, value=15.0, step=0.001, label="Voltage (kV)")
+                    solvent1 = gr.Dropdown(['DMAc', 'CHCl3'], value='DMAc', label='Solvent')
+                with gr.Column():
+                    gr.Markdown("### Experiment 2")
+                    conc2 = gr.Slider(minimum=0.05, maximum=5.0, value=2.8, step=0.001, label="Concentration (%w/v)")
+                    flow_rate2 = gr.Slider(minimum=0.01, maximum=60.0, value=20.0, step=0.001, label="Flow Rate (mL/h)")
+                    voltage2 = gr.Slider(minimum=10.0, maximum=18.0, value=15.0, step=0.001, label="Voltage (kV)")
+                    solvent2 = gr.Dropdown(['DMAc', 'CHCl3'], value='CHCl3', label='Solvent')
+            
+            # Group all buttons in a single row
+            with gr.Row():
+                submit_btn = gr.Button("Submit")
+                reset_btn = gr.Button("Reset Results")
+                download_btn = gr.Button("📥 Download Results", visible=False)
+                
+            # Moved file output component below the buttons
+            result_file = gr.File(label="Download Results CSV", visible=False)
             
-            gr.Markdown("### Experiment 2")
-            conc2 = gr.Slider(minimum=0.05, maximum=5.0, value=2.8, step=0.001, label="Concentration (%w/v)")
-            flow_rate2 = gr.Slider(minimum=0.01, maximum=60.0, value=20.0, step=0.001, label="Flow Rate (mL/h)")
-            voltage2 = gr.Slider(minimum=10.0, maximum=18.0, value=15.0, step=0.001, label="Voltage (kV)")
-            solvent2 = gr.Dropdown(['DMAc', 'CHCl3'], value='CHCl3', label='Solvent')
+            # Add notification component (initially hidden)
+            completion_message = gr.Markdown(visible=False)
         
         # Results display column
         with gr.Column():
             prior_experiments = gr.DataFrame(value=prior_experiments_display, label="Prior Experiments")
             results_df = gr.DataFrame(label="Your Results")
             perf_plot = gr.Plot(label="Performance Comparison")
-    
-    # Action buttons
-    with gr.Row():
-        submit_btn = gr.Button("Submit")
-        reset_btn = gr.Button("Reset Results")
-    
+
     # Connect the submit button to the predict function
     submit_btn.click(
         fn=predict,
@@ -258,14 +403,27 @@ with gr.Blocks() as demo:
             conc1, flow_rate1, voltage1, solvent1,
             conc2, flow_rate2, voltage2, solvent2
         ],
-        outputs=[results_state, prior_experiments, results_df, perf_plot]
+        outputs=[
+            results_state, prior_experiments, results_df, perf_plot, 
+            download_btn, completion_message, auc_state, result_file
+        ]
     )
     
     # Connect the reset button to the reset_results function
     reset_btn.click(
         fn=reset_results,
         inputs=[results_state],
-        outputs=[results_state, prior_experiments, results_df, perf_plot]
+        outputs=[
+            results_state, prior_experiments, results_df, perf_plot, 
+            download_btn, completion_message, auc_state, result_file
+        ]
+    )
+    
+    # Connect download button to file download
+    download_btn.click(
+        fn=prepare_results_for_download,
+        inputs=[results_state],
+        outputs=[result_file]
     )
 
 demo.launch()