internal changes

app.py

@@ -8,6 +8,7 @@ import shutil
 import matplotlib.pyplot as plt
 from sklearn.metrics import roc_curve, auc
 import pandas as pd
+import plotly.graph_objects as go
 from sklearn.metrics import roc_auc_score
 from matplotlib.figure import Figure
 # Define the function to process the input file and model selection
@@ -157,7 +158,6 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
 
         return opt1_done, opt2_done
 
-    # Read data from test_info.txt
     # Read data from test_info.txt
     with open(test_info_location, "r") as file:
         data = file.readlines()
@@ -167,8 +167,8 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
 
     # Initialize counters
     task_counts = {
-    1: {"only_opt1": 0, "only_opt2": 0, "both": 0,"none":0},
-    2: {"only_opt1": 0, "only_opt2": 0, "both": 0,"none":0}
+    1: {"ER": 0, "ME": 0, "both": 0,"none":0},
+    2: {"ER": 0, "ME": 0, "both": 0,"none":0}
     }
 
     # Analyze rows
@@ -182,18 +182,18 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
 
         if ideal_task == 0:
             if opt1_done and not opt2_done:
-                task_counts[1]["only_opt1"] += 1
+                task_counts[1]["ER"] += 1
             elif not opt1_done and opt2_done:
-                task_counts[1]["only_opt2"] += 1
+                task_counts[1]["ME"] += 1
             elif opt1_done and opt2_done:
                 task_counts[1]["both"] += 1
             else:
                 task_counts[1]["none"] +=1
         elif ideal_task == 1:
             if opt1_done and not opt2_done:
-                task_counts[2]["only_opt1"] += 1
+                task_counts[2]["ER"] += 1
             elif not opt1_done and opt2_done:
-                task_counts[2]["only_opt2"] += 1
+                task_counts[2]["ME"] += 1
             elif opt1_done and opt2_done:
                 task_counts[2]["both"] += 1
             else:
@@ -205,43 +205,112 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
 
     # for ideal_task, counts in task_counts.items():
     #     output_summary += f"Ideal Task = OptionalTask_{ideal_task}:\n"
-    #     output_summary += f"  Only OptionalTask_1 done: {counts['only_opt1']}\n"
-    #     output_summary += f"  Only OptionalTask_2 done: {counts['only_opt2']}\n"
+    #     output_summary += f"  Only OptionalTask_1 done: {counts['ER']}\n"
+    #     output_summary += f"  Only OptionalTask_2 done: {counts['ME']}\n"
     #     output_summary += f"  Both done: {counts['both']}\n"
 
+    # colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728']
+    colors = ["#FF6F61", "#6B5B95", "#88B04B", "#F7CAC9"]
+
   # Generate pie chart for Task 1
     task1_labels = list(task_counts[1].keys())
     task1_values = list(task_counts[1].values())
 
-    fig_task1 = Figure()
-    ax1 = fig_task1.add_subplot(1, 1, 1)
-    ax1.pie(task1_values, labels=task1_labels, autopct='%1.1f%%', startangle=90)
-    ax1.set_title('Ideal Task 1 Distribution')
+    # fig_task1 = Figure()
+    # ax1 = fig_task1.add_subplot(1, 1, 1)
+    # ax1.pie(task1_values, labels=task1_labels, autopct='%1.1f%%', startangle=90)
+    # ax1.set_title('Ideal Task 1 Distribution')
+
+    fig_task1 = go.Figure(data=[go.Pie(
+        labels=task1_labels,
+        values=task1_values,
+        textinfo='percent+label',
+        textposition='auto',
+        marker=dict(colors=colors),
+        sort=False
+       
+    )])
+
+    fig_task1.update_layout(
+        title='Problem Type: ER',
+        title_x=0.5,
+        font=dict(
+            family="sans-serif",
+            size=12,
+            color="black"
+        ),
+    )
+
+    fig_task1.update_layout(
+    legend=dict(
+        font=dict(
+            family="sans-serif",
+            size=12,
+            color="black"
+            ),
+        )
+    )
+    
+
+
+    # fig.show()
 
     # Generate pie chart for Task 2
     task2_labels = list(task_counts[2].keys())
     task2_values = list(task_counts[2].values())
 
-    fig_task2 = Figure()
-    ax2 = fig_task2.add_subplot(1, 1, 1)
-    ax2.pie(task2_values, labels=task2_labels, autopct='%1.1f%%', startangle=90)
-    ax2.set_title('Ideal Task 2 Distribution')
+    fig_task2 = go.Figure(data=[go.Pie(
+        labels=task2_labels,
+        values=task2_values,
+        textinfo='percent+label',
+        textposition='auto',
+        marker=dict(colors=colors),
+        sort=False
+        # pull=[0, 0.2, 0, 0] # for pulling part of pie chart out (depends on position)
+        
+    )])
+
+    fig_task2.update_layout(
+        title='Problem Type: ME',
+        title_x=0.5,
+        font=dict(
+            family="sans-serif",
+            size=12,
+            color="black"
+        ),
+    )
+
+    fig_task2.update_layout(
+    legend=dict(
+        font=dict(
+            family="sans-serif",
+            size=12,
+            color="black"
+            ),
+        )
+    )
+
+
+    # fig_task2 = Figure()
+    # ax2 = fig_task2.add_subplot(1, 1, 1)
+    # ax2.pie(task2_values, labels=task2_labels, autopct='%1.1f%%', startangle=90)
+    # ax2.set_title('Ideal Task 2 Distribution')
 
     # print(output_summary)
 
     progress(0.2, desc="analysis done!! Executing models")
     print("finetuned task: ",finetune_task)
-    # subprocess.run([
-    #     "python", "new_test_saved_finetuned_model.py",
-    #     "-workspace_name", "ratio_proportion_change3_2223/sch_largest_100-coded",
-    #     "-finetune_task", finetune_task,
-    #     "-test_dataset_path","../../../../selected_rows.txt",
-    #     # "-test_label_path","../../../../train_label.txt",
-    #     "-finetuned_bert_classifier_checkpoint", 
-    #     "ratio_proportion_change3_2223/sch_largest_100-coded/output/highGRschool10/bert_fine_tuned.model.ep42",
-    #     "-e",str(1),
-    #     "-b",str(1000)
-    # ])
+    subprocess.run([
+        "python", "new_test_saved_finetuned_model.py",
+        "-workspace_name", "ratio_proportion_change3_2223/sch_largest_100-coded",
+        "-finetune_task", finetune_task,
+        "-test_dataset_path","../../../../selected_rows.txt",
+        # "-test_label_path","../../../../train_label.txt",
+        "-finetuned_bert_classifier_checkpoint", 
+        "ratio_proportion_change3_2223/sch_largest_100-coded/output/highGRschool10/bert_fine_tuned.model.ep42",
+        "-e",str(1),
+        "-b",str(1000)
+    ])
     progress(0.6,desc="Model execution completed")
     result = {}
     with open("result.txt", 'r') as file:
@@ -262,18 +331,70 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
 
 
 #  Create a matplotlib figure
-    fig = Figure()
-    ax = fig.add_subplot(1, 1, 1)
-    ax.plot(fpr, tpr, color='blue', lw=2, label=f'ROC curve (area = {roc_auc:.2f})')
-    ax.plot([0, 1], [0, 1], color='navy', lw=2, linestyle='--')
-    ax.set(xlabel='False Positive Rate', ylabel='True Positive Rate', title=f'Receiver Operating Curve (ROC)')
-    ax.legend(loc="lower right")
-    ax.grid()
+    # fig = Figure()
+    # ax = fig.add_subplot(1, 1, 1)
+    # ax.plot(fpr, tpr, color='blue', lw=2, label=f'ROC curve (area = {roc_auc:.2f})')
+    # ax.plot([0, 1], [0, 1], color='navy', lw=2, linestyle='--')
+    # ax.set(xlabel='False Positive Rate', ylabel='True Positive Rate', title=f'Receiver Operating Curve (ROC)')
+    # ax.legend(loc="lower right")
+    # ax.grid()
+
+    fig = go.Figure()
+    # Create and style traces
+    fig.add_trace(go.Line(x = list(fpr), y = list(tpr), name=f'ROC curve (area = {roc_auc:.2f})',
+                            line=dict(color='royalblue', width=3,
+                                ) # dash options include 'dash', 'dot', and 'dashdot'
+    ))
+    fig.add_trace(go.Line(x = [0,1], y = [0,1], showlegend = False,
+                            line=dict(color='firebrick', width=2,
+                                dash='dash',) # dash options include 'dash', 'dot', and 'dashdot'
+    ))
+
+    # Edit the layout
+    fig.update_layout(
+            showlegend = True,
+            title_x=0.5,
+            title=dict(
+                text='Receiver Operating Curve (ROC)'
+            ),
+            xaxis=dict(
+                title=dict(
+                    text='False Positive Rate'
+                )
+            ),
+            yaxis=dict(
+                title=dict(
+                    text='False Negative Rate'
+                )
+            ),
+            font=dict(
+            family="sans-serif",
+            color="black"
+            ),
+        
+    )
+    fig.update_layout(
+    legend=dict(
+        x=0.75,
+        y=0,
+        traceorder="normal",
+        font=dict(
+            family="sans-serif",
+            size=12,
+            color="black"
+            ),
+        )
+    )
+
+
+
+
+
 
     # Save plot to a file
-    plot_path = "plot.png"
-    fig.savefig(plot_path)
-    plt.close(fig)
+    # plot_path = "plot.png"
+    # fig.savefig(plot_path)
+    # plt.close(fig)
 
 
     
@@ -283,19 +404,20 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
     text_output = f"Model: {model_name}\nResult:\n{result}"
     # Prepare text output with HTML formatting
     text_output = f"""
-    Model: {model_name}\n
-    -----------------\n
-    Time Taken: {result['time_taken_from_start']:.2f} seconds\n
-    Total Schools in test: {len(unique_schools):.4f}\n
-    Total number of instances having Schools with HGR : {len(high_sample):.4f}\n
-    Total number of instances having Schools with LGR: {len(low_sample):.4f}\n
-
-    ROC score of HGR: {high_roc_auc}\n
-    ROC score of LGR: {low_roc_auc}\n
-
-    ROC score of opt1: {opt_task1_roc_auc}\n
-    ROC score of opt2: {opt_task2_roc_auc}\n
-    -----------------
+    ---------------------------
+    Model: {model_name}
+    ---------------------------\n
+    Time Taken: {result['time_taken_from_start']:.2f} seconds
+    Total Schools in test: {len(unique_schools):.4f}
+    Total number of instances having Schools with HGR : {len(high_sample):.4f}
+    Total number of instances having Schools with LGR: {len(low_sample):.4f}
+
+    ROC score of HGR: {high_roc_auc:.4f}
+    ROC score of LGR: {low_roc_auc:.4f}
+
+
+    ROC-AUC for problems of type ER: {opt_task1_roc_auc:.4f}
+    ROC-AUC for problems of type ME: {opt_task2_roc_auc:.4f}
     """
     return text_output,fig,fig_task1,fig_task2
 
@@ -304,27 +426,30 @@ def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
 # models = ["ASTRA-FT-HGR", "ASTRA-FT-LGR", "ASTRA-FT-FULL"]
 models = ["ASTRA-FT-HGR", "ASTRA-FT-FULL"]
 content = """
-<h1 style="color: white;">ASTRA: An AI Model for Analyzing Math Strategies</h1>
+<h1 style="color: black;">A S T R A</h1>
+<h2 style="color: black;">An AI Model for Analyzing Math Strategies</h2>
 
-<h3 style="color: white;">
-    <a href="https://drive.google.com/file/d/1lbEpg8Se1ugTtkjreD8eXIg7qrplhWan/view" style="color: #1E90FF; text-decoration: none;">Link To Paper</a> | 
+<h3 style="color: white; text-align: center">
+    <a href="https://drive.google.com/file/d/1lbEpg8Se1ugTtkjreD8eXIg7qrplhWan/view" style="color: gr.themes.colors.red; text-decoration: none;">Link To Paper</a> | 
     <a href="https://github.com/Syudu41/ASTRA---Gates-Project" style="color: #1E90FF; text-decoration: none;">GitHub</a> | 
-    <a href="#" style="color: #1E90FF; text-decoration: none;">Project Page</a>
+    <a href="https://sites.google.com/view/astra-research/home" style="color: #1E90FF; text-decoration: none;">Project Page</a>
 </h3>
 
 <p style="color: white;">Welcome to a demo of ASTRA. ASTRA is a collaborative research project between researchers at the 
-<a href="https://www.memphis.edu" style="color: #1E90FF; text-decoration: none;">University of Memphis</a> and 
+<a href="https://sites.google.com/site/dvngopal/" style="color: #1E90FF; text-decoration: none;">University of Memphis</a> and 
 <a href="https://www.carnegielearning.com" style="color: #1E90FF; text-decoration: none;">Carnegie Learning</a> 
 to utilize AI to improve our understanding of math learning strategies.</p>
 
-<p style="color: white;">This demo has been developed with a pre-trained model (based on an architecture similar to BERT) 
-that learns math strategies using data collected from hundreds of schools in the U.S. who have used 
-Carnegie Learning's MATHia (formerly known as Cognitive Tutor), the flagship Intelligent Tutor 
-that is part of a core, blended math curriculum.</p>
+<p style="color: white;">This demo has been developed with a pre-trained model (based on an architecture similar to BERT ) that learns math strategies using data 
+collected from hundreds of schools in the U.S. who have used Carnegie Learning’s MATHia (formerly known as Cognitive Tutor), the flagship Intelligent Tutor that is part of a core, blended math curriculum. 
+For this demo, we have used data from a specific domain (teaching ratio and proportions) within 7th grade math. The fine-tuning based on the pre-trained model learns to predict which strategies lead to correct vs incorrect solutions. 
+</p>
 
-<p style="color: white;">For this demo, we have used data from a specific domain (teaching ratio and proportions) within 
-7th grade math. The fine-tuning based on the pre-trained models learns to predict which strategies 
-lead to correct vs. incorrect solutions.</p>
+<p style="color: white;">In this math domain, students were given word problems related to ratio and proportions. Further, the students 
+were given a choice of optional tasks to work on in parallel to the main problem to demonstrate  their thinking (metacognition). 
+The optional tasks are designed based on solving problems using Equivalent Ratios (ER) and solving using Means and Extremes/cross-multiplication (ME).
+When the equivalent ratios are easy to compute (integral values), ER is much more efficient compared to ME and switching between the tasks appropriately demonstrates cognitive flexibility.
+</p>
 
 <p style="color: white;">To use the demo, please follow these steps:</p>
 
@@ -335,203 +460,327 @@ lead to correct vs. incorrect solutions.</p>
             <li style="color: white;">ASTRA-FT-Full: Fine-tuned with a small sample of data from a mix of schools that have high/low graduation rates.</li>
         </ul>
     </li>
-    <li style="color: white;">Select a percentage of schools to analyze (selecting a large percentage may take a long time).</li>
-    <li style="color: white;">View Results:
+    <li style="color: white;">Select a percentage of schools to analyze (selecting a large percentage may take a long time). Note that the selected percentage is applied to both High Graduation Rate (HGR) schools and Low Graduation Rate (LGR schools).
+</li>
+    <li style="color: white;">The results from the fine-tuned model are displayed in the dashboard:
         <ul>
-            <li style="color: white;">The results from the fine-tuned model are displayed on the dashboard.</li>
-            <li style="color: white;">The results are shown separately for schools that have high and low graduation rates.</li>
+            <li style="color: white;">The model accuracy is computed using the ROC-AUC metric.
+</li>
+            <li style="color: white;">The results are shown for HGR, LGR schools and  for different problem types (ER/ME). 
+</li>
+<li style="color: white;">The distribution over how students utilized the optional tasks (whether they utilized ER/ME, used both of them or none of them) is shown for each problem type. 
+</li>
         </ul>
     </li>
 </ol>
 """
 # CSS styling for white text
 # Create the Gradio interface
-with gr.Blocks(css="""
-    body {
-        background-color: #1e1e1e!important;
-        font-family: 'Arial', sans-serif;
-        color: #f5f5f5!important;;
-    }
+available_themes = {
+    "default": gr.themes.Default(),
+    "soft": gr.themes.Soft(),
+    "monochrome": gr.themes.Monochrome(),
+    "glass": gr.themes.Glass(),
+    "base": gr.themes.Base(),
+}
 
-    .gradio-container {
-        max-width: 850px!important;
-        margin: 0 auto!important;;
-        padding: 20px!important;;
-        background-color: #292929!important;
-        border-radius: 10px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    }
-    .gradio-container-4-44-0 .prose h1 {
-    font-size: var(--text-xxl);
-    color: #ffffff!important;
-}
-    #title {
-        color: white!important;
-        font-size: 2.3em;
-        font-weight: bold;
-        text-align: center!important;
-        margin-bottom: 20px;
-    }
-    .description {
-        text-align: center;
-        font-size: 1.1em;
-        color: #bfbfbf;
-        margin-bottom: 30px;
-    }
-    .file-box {
-        max-width: 180px;
-        padding: 5px;
-        background-color: #444!important;
-        border: 1px solid #666!important;
-        border-radius: 6px;
-        height: 80px!important;;  
-        margin: 0 auto!important;; 
-        text-align: center; 
-        color: transparent;
-    }
-    .file-box span {
-        color: #f5f5f5!important;
-        font-size: 1em;
-        line-height: 45px; /* Vertically center text */
-    }
-    .dropdown-menu {
-        max-width: 220px;
-        margin: 0 auto!important;
-        background-color: #444!important;
-        color:#444!important;
-        border-radius: 6px;
-        padding: 8px;
-        font-size: 1.1em;
-        border: 1px solid #666;
-    }
-    .button {
-        background-color: #4CAF50!important;
-        color: white!important;
-        font-size: 1.1em;
-        padding: 10px 25px;
-        border-radius: 6px;
-        cursor: pointer;
-        transition: background-color 0.2s ease-in-out;
-    }
-    .button:hover {
-        background-color: #45a049!important;
-    }
-    .output-text {
-        background-color: #333!important;
-        padding: 12px;
-        border-radius: 8px;
-        border: 1px solid #666;
-        font-size: 1.1em;
-    }
-    .footer {
-        text-align: center;
-        margin-top: 50px;
-        font-size: 0.9em;
-        color: #b0b0b0;
-    }
-    .svelte-12ioyct .wrap {
-    display: none !important;
+# Comprehensive CSS for all HTML elements
+custom_css = '''
+/* Import Fira Sans font */
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Spectral+SC:wght@600&display=swap');
+/* Container modifications for centering */
+.gradio-container {
+    color: var(--block-label-text-color) !important;
+    max-width: 1000px !important;
+    margin: 0 auto !important;
+    padding: 2rem !important;
+    font-family: Arial, sans-serif !important;
 }
-.file-label-text {
-    display: none !important;
+
+/* Main title (ASTRA) */
+#title {
+    text-align: center !important;
+    margin: 1rem auto !important;  /* Reduced margin */
+    font-size: 2.5em !important;
+    font-weight: 600 !important;
+    font-family: "Spectral SC", 'Fira Sans', sans-serif !important;
+    padding-bottom: 0 !important;  /* Remove bottom padding */
 }
 
-div.svelte-sfqy0y {
-    display: flex;
-    flex-direction: inherit;
-    flex-wrap: wrap;
-    gap: var(--form-gap-width);
-    box-shadow: var(--block-shadow);
-    border: var(--block-border-width) solid var(--border-color-primary);
-    border-radius: var(--block-radius);
-    background: #1f2937!important;
-    overflow-y: hidden;
+/* Subtitle (An AI Model...) */
+h1 {
+    text-align: center !important;
+    font-size: 30pt !important;
+    font-weight: 600 !important;
+    font-family: "Spectral SC", 'Fira Sans', sans-serif !important;
+    margin-top: 0.5em !important;  /* Reduced top margin */
+    margin-bottom: 0.3em !important;
 }
 
-.block.svelte-12cmxck {
-    position: relative;
-    margin: 0;
-    box-shadow: var(--block-shadow);
-    border-width: var(--block-border-width);
-    border-color: var(--block-border-color);
-    border-radius: var(--block-radius);
-    background: #1f2937!important;
-    width: 100%;
-    line-height: var(--line-sm);
+h2 {
+    text-align: center !important;
+    font-size: 22pt !important;
+    font-weight: 600 !important;
+    font-family: "Spectral SC",'Fira Sans', sans-serif !important;
+    margin-top: 0.2em !important;  /* Reduced top margin */
+    margin-bottom: 0.3em !important;
 }
 
-    .svelte-12ioyct .wrap {
-    display: none !important;
+/* Links container styling */
+.links-container {
+    text-align: center !important;
+    margin: 1em auto !important;
+    font-family: 'Inter' ,'Fira Sans', sans-serif !important;
 }
-.file-label-text {
-    display: none !important;
+
+/* Links */
+a {
+    color: #2563eb !important;
+    text-decoration: none !important;
+    font-family:'Inter' , 'Fira Sans', sans-serif !important;
 }
-input[aria-label="file upload"] {
-    display: none !important;
+
+a:hover {
+    text-decoration: underline !important;
+    opacity: 0.8;
 }
 
-gradio-app .gradio-container.gradio-container-4-44-0 .contain .file-box span {
-    font-size: 1em;
-    line-height: 45px;
-    color: #1f2937 !important;
+/* Regular text */
+p, li, .description, .markdown-text {
+    font-family: 'Inter', Arial, sans-serif !important;
+    color: black !important;
+    font-size: 11pt;
+    line-height: 1.6;
+    font-weight: 500 !important;
+    color: var(--block-label-text-color) !important;
+}
+
+/* Other headings */
+h3, h4, h5 {
+    font-family: 'Fira Sans', sans-serif !important;
+    color: var(--block-label-text-color) !important;
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+}
+
+
+h3 { font-size: 1.5em; font-weight: 600; }
+h4 { font-size: 1.25em; font-weight: 500; }
+h5 { font-size: 1.1em; font-weight: 500; }
+
+/* Form elements */
+.select-wrap select, .wrap select,
+input, textarea {
+    font-family: 'Inter' ,Arial, sans-serif !important;
+    color: var(--block-label-text-color) !important;
+}
+
+/* Lists */
+ul, ol {
+    margin-left: 0 !important;
+    margin-bottom: 1.25em;
+    padding-left: 2em;
+}
+
+li {
+    margin-bottom: 0.75em;
 }
-.wrap.svelte-12ioyct {
+
+/* Form container */
+.form-container {
+    max-width: 1000px !important;
+    margin: 0 auto !important;
+    padding: 1rem !important;
+}
+
+/* Dashboard */
+.dashboard {
+    margin-top: 2rem !important;
+    padding: 1rem !important;
+    border-radius: 8px !important;
+}
+
+/* Slider styling */
+.gradio-slider-row {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    min-height: var(--size-60);
-    color: #1f2937 !important;
-    line-height: var(--line-md);
-    height: 100%;
-    padding-top: var(--size-3);
+    justify-content: space-between;
+    margin: 1.5em 0;
+    max-width: 100% !important;
+}
+
+.gradio-slider {
+    flex-grow: 1;
+    margin-right: 15px;
+}
+
+.slider-percentage {
+    font-family: 'Inter', Arial, sans-serif !important;
+    flex-shrink: 0;
+    min-width: 60px;
+    font-size: 1em;
+    font-weight: bold;
     text-align: center;
-    margin: auto var(--spacing-lg);
+    background-color: #f0f8ff;
+    border: 1px solid #004080;
+    border-radius: 5px;
+    padding: 5px 10px;
 }
-span.svelte-1gfkn6j:not(.has-info) {
-    margin-bottom: var(--spacing-lg);
-    color: white!important;
+
+.progress-bar-wrap.progress-bar-wrap.progress-bar-wrap
+{
+	border-radius: var(--input-radius);
+	height: 1.25rem;
+	margin-top: 1rem;
+	overflow: hidden;
+	width: 70%;
+    font-family: 'Inter', Arial, sans-serif !important;
 }
-label.float.svelte-1b6s6s {
-    position: relative!important;
-    top: var(--block-label-margin);
-    left: var(--block-label-margin);
+
+/* Add these new styles after your existing CSS */
+
+/* Card-like appearance for the dashboard */
+.dashboard {
+    background: #ffffff !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    border-radius: 12px !important;
+    padding: 2rem !important;
+    margin-top: 2.5rem !important;
 }
-label.svelte-1b6s6s {
-    display: inline-flex;
-    align-items: center;
-    z-index: var(--layer-2);
-    box-shadow: var(--block-label-shadow);
-    border: var(--block-label-border-width) solid var(--border-color-primary);
-    border-top: none;
-    border-left: none;
-    border-radius: var(--block-label-radius);
-    background: rgb(120 151 180)!important;
-    padding: var(--block-label-padding);
-    pointer-events: none;
-    color: #1f2937!important;
-    font-weight: var(--block-label-text-weight);
-    font-size: var(--block-label-text-size);
-    line-height: var(--line-sm);
+
+/* Enhance ROC graph container */
+#roc {
+    background: #ffffff !important;
+    padding: 1.5rem !important;
+    border-radius: 8px !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    margin: 1.5rem 0 !important;
+}
+
+/* Style the dropdown select */
+select {
+    background-color: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 8px !important;
+    padding: 0.5rem 1rem !important;
+    transition: all 0.2s ease-in-out !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+}
+
+select:hover {
+    border-color: #cbd5e1 !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Enhance slider appearance */
+.progress-bar-wrap {
+    background: #f8fafc !important;
+    border: 1px solid #e2e8f0 !important;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Style metrics in dashboard */
+.dashboard p {
+    padding: 0.5rem 0 !important;
+    border-bottom: 1px solid #f1f5f9 !important;
+}
+
+/* Add spacing between sections */
+.dashboard > div {
+    margin-bottom: 1.5rem !important;
+}
+
+/* Style the ROC curve title */
+.dashboard h4 {
+    color: #1e293b !important;
+    font-weight: 600 !important;
+    margin-bottom: 1rem !important;
+    padding-bottom: 0.5rem !important;
+    border-bottom: 2px solid #e2e8f0 !important;
 }
-.file.svelte-18wv37q.svelte-18wv37q {
-    display: block!important;
-    width: var(--size-full);
+
+/* Enhance link appearances */
+a {
+    position: relative !important;
+    padding-bottom: 2px !important;
+    transition: all 0.2s ease-in-out !important;
+}
+
+a:after {
+    content: '' !important;
+    position: absolute !important;
+    width: 0 !important;
+    height: 1px !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    background-color: #2563eb !important;
+    transition: width 0.3s ease-in-out !important;
+}
+
+a:hover:after {
+    width: 100% !important;
+}
+
+/* Add subtle dividers between sections */
+.form-container > div {
+    padding-bottom: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+    border-bottom: 1px solid #f1f5f9 !important;
+}
+
+/* Style model selection section */
+.select-wrap {
+    background: #ffffff !important;
+    padding: 1.5rem !important;
+    border-radius: 8px !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    margin-bottom: 2rem !important;
+}
+
+/* Style the metrics display */
+.dashboard span {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 500 !important;
+    color: #334155 !important;
 }
 
-tbody.svelte-18wv37q>tr.svelte-18wv37q:nth-child(odd) {
-    background: ##7897b4!important;
-    color: white;
-    background: #aca7b2;
+/* Add subtle animation to interactive elements */
+button, select, .slider-percentage {
+    transition: all 0.2s ease-in-out !important;
 }
 
-.gradio-container-4-31-4 .prose h1, .gradio-container-4-31-4 .prose h2, .gradio-container-4-31-4 .prose h3, .gradio-container-4-31-4 .prose h4, .gradio-container-4-31-4 .prose h5 {
+/* Style the ROC curve container */
+.plot-container {
+    background: #ffffff !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Add container styles for opt1 and opt2 sections */
+#opt1, #opt2 {
+    background: #ffffff !important;
+    border-radius: 8px !important;
+    padding: 1.5rem !important;
+    margin-top: 1.5rem !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+}
 
-    color: white;
+/* Style the distribution titles */
+.distribution-title {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    color: #1e293b !important;
+    margin-bottom: 1rem !important;
+    text-align: center !important;
 }
-""") as demo:
+
+'''
+
+with gr.Blocks(theme='gstaff/sketch', css=custom_css) as demo:
     
-    gr.Markdown("<h1 id='title'>ASTRA</h1>", elem_id="title")
+    # gr.Markdown("<h1 id='title'>ASTRA</h1>", elem_id="title")
     gr.Markdown(content)
     
     with gr.Row():
@@ -539,24 +788,44 @@ tbody.svelte-18wv37q>tr.svelte-18wv37q:nth-child(odd) {
         # label_input = gr.File(label="Upload test labels", file_types=['.txt'], elem_classes="file-box")
 
         # info_input = gr.File(label="Upload test info", file_types=['.txt'], elem_classes="file-box")
+        model_dropdown = gr.Dropdown(
+            choices=models,
+            label="Select Fine-tuned Model",
+            elem_classes="dropdown-menu"
+        )
+        increment_slider = gr.Slider(
+            minimum=1,
+            maximum=100,
+            step=1,
+            label="Schools Percentage",
+            value=1,
+            elem_id="increment-slider",
+            elem_classes="gradio-slider"
+        )
     
-        model_dropdown = gr.Dropdown(choices=models, label="Select Fine-tuned Model", elem_classes="dropdown-menu")
+    with gr.Row():
+        btn = gr.Button("Submit")
 
-    
-    increment_slider = gr.Slider(minimum=1, maximum=100, step=1, label="Schools Percentage", value=1)
     gr.Markdown("<p class='description'>Dashboard</p>")
+
     with gr.Row():
         output_text = gr.Textbox(label="")
         # output_image = gr.Image(label="ROC")
-        plot_output = gr.Plot(label="roc")
     with gr.Row():
-        opt1_pie = gr.Plot(label="opt1")
-        opt2_pie = gr.Plot(label="opt2")
+        plot_output = gr.Plot(label="ROC")
+
+    with gr.Row():
+        opt1_pie = gr.Plot(label="ER")
+        opt2_pie = gr.Plot(label="ME")
         # output_summary = gr.Textbox(label="Summary")
 
-    btn = gr.Button("Submit")
+    
  
-    btn.click(fn=process_file, inputs=[model_dropdown,increment_slider], outputs=[output_text,plot_output,opt1_pie,opt2_pie])
+    btn.click(
+        fn=process_file, 
+        inputs=[model_dropdown,increment_slider], 
+        outputs=[output_text,plot_output,opt1_pie,opt2_pie]
+    )
 
 
 # Launch the app

result.txt

@@ -3,5 +3,5 @@ total_acc: 69.00702106318957
 precisions: 0.7236623191454734
 recalls: 0.6900702106318957
 f1_scores: 0.6802420656474512
-time_taken_from_start: 25.420082330703735
+time_taken_from_start: 53.13972353935242
 auc_score: 0.7457100293916334