updated with app.py to run subprocess

app.py

@@ -1,831 +1,831 @@
-import gradio as gr
-from huggingface_hub import hf_hub_download
-import pickle
-from gradio import Progress
-import numpy as np
-import subprocess
-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
-
-def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
-    # progress = gr.Progress(track_tqdm=True)
-
-    progress(0, desc="Starting the processing") 
-    # with open(file.name, 'r') as f:
-    #     content = f.read()
-    # saved_test_dataset = "train.txt"
-    # saved_test_label = "train_label.txt"
-    # saved_train_info="train_info.txt"
-    # Save the uploaded file content to a specified location
-    # shutil.copyfile(file.name, saved_test_dataset)
-    # shutil.copyfile(label.name, saved_test_label)
-    # shutil.copyfile(info.name, saved_train_info)
-    parent_location="ratio_proportion_change3_2223/sch_largest_100-coded/finetuning/"
-    test_info_location=parent_location+"fullTest/test_info.txt"
-    test_location=parent_location+"fullTest/test.txt"
-    if(model_name=="ASTRA-FT-HGR"):
-        finetune_task="highGRschool10"
-        # test_info_location=parent_location+"fullTest/test_info.txt"
-        # test_location=parent_location+"fullTest/test.txt"
-    elif(model_name== "ASTRA-FT-LGR" ):
-        finetune_task="lowGRschoolAll"
-        # test_info_location=parent_location+"lowGRschoolAll/test_info.txt"
-        # test_location=parent_location+"lowGRschoolAll/test.txt"
-    elif(model_name=="ASTRA-FT-FULL"):
-        # test_info_location=parent_location+"fullTest/test_info.txt"
-        # test_location=parent_location+"fullTest/test.txt"
-        finetune_task="fullTest"
-    else:
-        finetune_task=None
-    # Load the test_info file and the graduation rate file
-    test_info = pd.read_csv(test_info_location, sep=',', header=None, engine='python')
-    grad_rate_data = pd.DataFrame(pd.read_pickle('school_grduation_rate.pkl'),columns=['school_number','grad_rate'])  # Load the grad_rate data
-
-    # Step 1: Extract unique school numbers from test_info
-    unique_schools = test_info[0].unique()
-
-    # Step 2: Filter the grad_rate_data using the unique school numbers
-    schools = grad_rate_data[grad_rate_data['school_number'].isin(unique_schools)]
-
-    # Define a threshold for high and low graduation rates (adjust as needed)
-    grad_rate_threshold = 0.9  
-
-    # Step 4: Divide schools into high and low graduation rate groups
-    high_grad_schools = schools[schools['grad_rate'] >= grad_rate_threshold]['school_number'].unique()
-    low_grad_schools = schools[schools['grad_rate'] < grad_rate_threshold]['school_number'].unique()
-
-    # Step 5: Sample percentage of schools from each group
-    high_sample = pd.Series(high_grad_schools).sample(frac=inc_slider/100, random_state=1).tolist()
-    low_sample = pd.Series(low_grad_schools).sample(frac=inc_slider/100, random_state=1).tolist()
-
-    # Step 6: Combine the sampled schools
-    random_schools = high_sample + low_sample
-
-    # Step 7: Get indices for the sampled schools
-    indices = test_info[test_info[0].isin(random_schools)].index.tolist()
-    high_indices = test_info[(test_info[0].isin(high_sample))].index.tolist()
-    low_indices = test_info[(test_info[0].isin(low_sample))].index.tolist()
-    
-    # Load the test file and select rows based on indices
-    test = pd.read_csv(test_location, sep=',', header=None, engine='python')
-    selected_rows_df2 = test.loc[indices]
-
-    # Save the selected rows to a file
-    selected_rows_df2.to_csv('selected_rows.txt', sep='\t', index=False, header=False, quoting=3, escapechar=' ')
-
-    graduation_groups = [
-    'high' if idx in high_indices else 'low' for idx in selected_rows_df2.index
-    ]
-    # Group data by opt_task1 and opt_task2 based on test_info[6]
-    opt_task_groups = ['opt_task1' if test_info.loc[idx, 6] == 0 else 'opt_task2' for idx in selected_rows_df2.index]
-    
-    with open("roc_data2.pkl", 'rb') as file:
-        data = pickle.load(file)
-    t_label=data[0]
-    p_label=data[1]
-    # Step 1: Align graduation_group, t_label, and p_label
-    aligned_labels = list(zip(graduation_groups, t_label, p_label))
-    opt_task_aligned = list(zip(opt_task_groups, t_label, p_label))
-    # Step 2: Separate the labels for high and low groups
-    high_t_labels = [t for grad, t, p in aligned_labels if grad == 'high']
-    low_t_labels = [t for grad, t, p in aligned_labels if grad == 'low']
-
-    high_p_labels = [p for grad, t, p in aligned_labels if grad == 'high']
-    low_p_labels = [p for grad, t, p in aligned_labels if grad == 'low']
-
-    opt_task1_t_labels = [t for task, t, p in opt_task_aligned if task == 'opt_task1']
-    opt_task1_p_labels = [p for task, t, p in opt_task_aligned if task == 'opt_task1']
-
-    opt_task2_t_labels = [t for task, t, p in opt_task_aligned if task == 'opt_task2']
-    opt_task2_p_labels = [p for task, t, p in opt_task_aligned if task == 'opt_task2']
-
-    high_roc_auc = roc_auc_score(high_t_labels, high_p_labels) if len(set(high_t_labels)) > 1 else None
-    low_roc_auc = roc_auc_score(low_t_labels, low_p_labels) if len(set(low_t_labels)) > 1 else None
-
-    opt_task1_roc_auc = roc_auc_score(opt_task1_t_labels, opt_task1_p_labels) if len(set(opt_task1_t_labels)) > 1 else None
-    opt_task2_roc_auc = roc_auc_score(opt_task2_t_labels, opt_task2_p_labels) if len(set(opt_task2_t_labels)) > 1 else None
-
-    # For demonstration purposes, we'll just return the content with the selected model name
-
-    # print(checkpoint)
-    progress(0.1, desc="Files created and saved")
-    # if (inc_val<5):
-    #     model_name="highGRschool10"
-    # elif(inc_val>=5 & inc_val<10):
-    #     model_name="highGRschool10"
-    # else:
-    #     model_name="highGRschool10"
-    # Function to analyze each row
-    def analyze_row(row):
-    # Split the row into fields
-        fields = row.split("\t")
-
-        # Define tasks for OptionalTask_1, OptionalTask_2, and FinalAnswer
-        optional_task_1_subtasks = ["DenominatorFactor", "NumeratorFactor", "EquationAnswer"]
-        optional_task_2_subtasks = [
-            "FirstRow2:1", "FirstRow2:2", "FirstRow1:1", "FirstRow1:2", 
-            "SecondRow", "ThirdRow"
-        ]
-
-        # Helper function to evaluate task attempts
-        def evaluate_tasks(fields, tasks):
-            task_status = {}
-            for task in tasks:
-                relevant_attempts = [f for f in fields if task in f]
-                if any("OK" in attempt for attempt in relevant_attempts):
-                    task_status[task] = "Attempted (Successful)"
-                elif any("ERROR" in attempt for attempt in relevant_attempts):
-                    task_status[task] = "Attempted (Error)"
-                elif any("JIT" in attempt for attempt in relevant_attempts):
-                    task_status[task] = "Attempted (JIT)"
-                else:
-                    task_status[task] = "Unattempted"
-            return task_status
-
-        # Evaluate tasks for each category
-        optional_task_1_status = evaluate_tasks(fields, optional_task_1_subtasks)
-        optional_task_2_status = evaluate_tasks(fields, optional_task_2_subtasks)
-
-        # Check if tasks have any successful attempt
-        opt1_done = any(status == "Attempted (Successful)" for status in optional_task_1_status.values())
-        opt2_done = any(status == "Attempted (Successful)" for status in optional_task_2_status.values())
-
-        return opt1_done, opt2_done
-
-    # Read data from test_info.txt
-    with open(test_info_location, "r") as file:
-        data = file.readlines()
-
-    # Assuming test_info[7] is a list with ideal tasks for each instance
-    ideal_tasks = test_info[6]  # A list where each element is either 1 or 2
-
-    # Initialize counters
-    task_counts = {
-    1: {"ER": 0, "ME": 0, "both": 0,"none":0},
-    2: {"ER": 0, "ME": 0, "both": 0,"none":0}
-    }
-
-    # Analyze rows
-    for i, row in enumerate(data):
-        row = row.strip()
-        if not row:
-            continue
-
-        ideal_task = ideal_tasks[i]  # Get the ideal task for the current row
-        opt1_done, opt2_done = analyze_row(row)
-
-        if ideal_task == 0:
-            if opt1_done and not opt2_done:
-                task_counts[1]["ER"] += 1
-            elif not opt1_done and opt2_done:
-                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]["ER"] += 1
-            elif not opt1_done and opt2_done:
-                task_counts[2]["ME"] += 1
-            elif opt1_done and opt2_done:
-                task_counts[2]["both"] += 1
-            else:
-                task_counts[2]["none"] +=1
-
-    # Create a string output for results
-    # output_summary = "Task Analysis Summary:\n"
-    # output_summary += "-----------------------\n"
-
-    # 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['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 = 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 = 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)
-    # ])
-    progress(0.6,desc="Model execution completed")
-    result = {}
-    with open("result.txt", 'r') as file:
-        for line in file:
-            key, value = line.strip().split(': ', 1)
-            # print(type(key))
-            if key=='epoch':
-                result[key]=value
-            else:
-                 result[key]=float(value)
-    result["ROC score of HGR"]=high_roc_auc
-    result["ROC score of LGR"]=low_roc_auc
-# Create a plot
-    with open("roc_data.pkl", "rb") as f:
-        fpr, tpr, _ = pickle.load(f)
-    # print(fpr,tpr)
-    roc_auc = auc(fpr, tpr)
-
-
-#  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 = 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)
-
-
-    
-
-    progress(1.0)
-    # Prepare text output
-    text_output = f"Model: {model_name}\nResult:\n{result}"
-    # Prepare text output with HTML formatting
-    text_output = f"""
-    ---------------------------
-    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
-
-# List of models for the dropdown menu
-
-# models = ["ASTRA-FT-HGR", "ASTRA-FT-LGR", "ASTRA-FT-FULL"]
-models = ["ASTRA-FT-HGR", "ASTRA-FT-FULL"]
-content = """
-<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; 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="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://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. 
-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;">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>
-
-<ol style="color: white;">
-    <li style="color: white;">Select a fine-tuned model:
-        <ul style="color: white;">
-            <li style="color: white;">ASTRA-FT-HGR: Fine-tuned with a small sample of data from schools that have a high graduation rate.</li>
-            <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). 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 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
-available_themes = {
-    "default": gr.themes.Default(),
-    "soft": gr.themes.Soft(),
-    "monochrome": gr.themes.Monochrome(),
-    "glass": gr.themes.Glass(),
-    "base": gr.themes.Base(),
-}
-
-# 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;
-}
-
-/* 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 */
-}
-
-/* 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;
-}
-
-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;
-}
-
-/* Links container styling */
-.links-container {
-    text-align: center !important;
-    margin: 1em auto !important;
-    font-family: 'Inter' ,'Fira Sans', sans-serif !important;
-}
-
-/* Links */
-a {
-    color: #2563eb !important;
-    text-decoration: none !important;
-    font-family:'Inter' , 'Fira Sans', sans-serif !important;
-}
-
-a:hover {
-    text-decoration: underline !important;
-    opacity: 0.8;
-}
-
-/* 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;
-}
-
-/* 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;
-    align-items: center;
-    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;
-    background-color: #f0f8ff;
-    border: 1px solid #004080;
-    border-radius: 5px;
-    padding: 5px 10px;
-}
-
-.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;
-}
-
-/* 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;
-}
-
-/* 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;
-}
-
-/* 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;
-}
-
-/* Add subtle animation to interactive elements */
-button, select, .slider-percentage {
-    transition: all 0.2s ease-in-out !important;
-}
-
-/* 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;
-}
-
-/* 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;
-}
-
-'''
-
-with gr.Blocks(theme='gstaff/sketch', css=custom_css) as demo:
-    
-    # gr.Markdown("<h1 id='title'>ASTRA</h1>", elem_id="title")
-    gr.Markdown(content)
-    
-    with gr.Row():
-        # file_input = gr.File(label="Upload a test file", file_types=['.txt'], elem_classes="file-box")
-        # 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"
-        )
-    
-    with gr.Row():
-        btn = gr.Button("Submit")
-
-    gr.Markdown("<p class='description'>Dashboard</p>")
-
-    with gr.Row():
-        output_text = gr.Textbox(label="")
-        # output_image = gr.Image(label="ROC")
-    with gr.Row():
-        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.click(
-        fn=process_file, 
-        inputs=[model_dropdown,increment_slider], 
-        outputs=[output_text,plot_output,opt1_pie,opt2_pie]
-    )
-
-
-# Launch the app
+import gradio as gr
+from huggingface_hub import hf_hub_download
+import pickle
+from gradio import Progress
+import numpy as np
+import subprocess
+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
+
+def process_file(model_name,inc_slider,progress=Progress(track_tqdm=True)):
+    # progress = gr.Progress(track_tqdm=True)
+
+    progress(0, desc="Starting the processing") 
+    # with open(file.name, 'r') as f:
+    #     content = f.read()
+    # saved_test_dataset = "train.txt"
+    # saved_test_label = "train_label.txt"
+    # saved_train_info="train_info.txt"
+    # Save the uploaded file content to a specified location
+    # shutil.copyfile(file.name, saved_test_dataset)
+    # shutil.copyfile(label.name, saved_test_label)
+    # shutil.copyfile(info.name, saved_train_info)
+    parent_location="ratio_proportion_change3_2223/sch_largest_100-coded/finetuning/"
+    test_info_location=parent_location+"fullTest/test_info.txt"
+    test_location=parent_location+"fullTest/test.txt"
+    if(model_name=="ASTRA-FT-HGR"):
+        finetune_task="highGRschool10"
+        # test_info_location=parent_location+"fullTest/test_info.txt"
+        # test_location=parent_location+"fullTest/test.txt"
+    elif(model_name== "ASTRA-FT-LGR" ):
+        finetune_task="lowGRschoolAll"
+        # test_info_location=parent_location+"lowGRschoolAll/test_info.txt"
+        # test_location=parent_location+"lowGRschoolAll/test.txt"
+    elif(model_name=="ASTRA-FT-FULL"):
+        # test_info_location=parent_location+"fullTest/test_info.txt"
+        # test_location=parent_location+"fullTest/test.txt"
+        finetune_task="fullTest"
+    else:
+        finetune_task=None
+    # Load the test_info file and the graduation rate file
+    test_info = pd.read_csv(test_info_location, sep=',', header=None, engine='python')
+    grad_rate_data = pd.DataFrame(pd.read_pickle('school_grduation_rate.pkl'),columns=['school_number','grad_rate'])  # Load the grad_rate data
+
+    # Step 1: Extract unique school numbers from test_info
+    unique_schools = test_info[0].unique()
+
+    # Step 2: Filter the grad_rate_data using the unique school numbers
+    schools = grad_rate_data[grad_rate_data['school_number'].isin(unique_schools)]
+
+    # Define a threshold for high and low graduation rates (adjust as needed)
+    grad_rate_threshold = 0.9  
+
+    # Step 4: Divide schools into high and low graduation rate groups
+    high_grad_schools = schools[schools['grad_rate'] >= grad_rate_threshold]['school_number'].unique()
+    low_grad_schools = schools[schools['grad_rate'] < grad_rate_threshold]['school_number'].unique()
+
+    # Step 5: Sample percentage of schools from each group
+    high_sample = pd.Series(high_grad_schools).sample(frac=inc_slider/100, random_state=1).tolist()
+    low_sample = pd.Series(low_grad_schools).sample(frac=inc_slider/100, random_state=1).tolist()
+
+    # Step 6: Combine the sampled schools
+    random_schools = high_sample + low_sample
+
+    # Step 7: Get indices for the sampled schools
+    indices = test_info[test_info[0].isin(random_schools)].index.tolist()
+    high_indices = test_info[(test_info[0].isin(high_sample))].index.tolist()
+    low_indices = test_info[(test_info[0].isin(low_sample))].index.tolist()
+    
+    # Load the test file and select rows based on indices
+    test = pd.read_csv(test_location, sep=',', header=None, engine='python')
+    selected_rows_df2 = test.loc[indices]
+
+    # Save the selected rows to a file
+    selected_rows_df2.to_csv('selected_rows.txt', sep='\t', index=False, header=False, quoting=3, escapechar=' ')
+
+    graduation_groups = [
+    'high' if idx in high_indices else 'low' for idx in selected_rows_df2.index
+    ]
+    # Group data by opt_task1 and opt_task2 based on test_info[6]
+    opt_task_groups = ['opt_task1' if test_info.loc[idx, 6] == 0 else 'opt_task2' for idx in selected_rows_df2.index]
+    
+    with open("roc_data2.pkl", 'rb') as file:
+        data = pickle.load(file)
+    t_label=data[0]
+    p_label=data[1]
+    # Step 1: Align graduation_group, t_label, and p_label
+    aligned_labels = list(zip(graduation_groups, t_label, p_label))
+    opt_task_aligned = list(zip(opt_task_groups, t_label, p_label))
+    # Step 2: Separate the labels for high and low groups
+    high_t_labels = [t for grad, t, p in aligned_labels if grad == 'high']
+    low_t_labels = [t for grad, t, p in aligned_labels if grad == 'low']
+
+    high_p_labels = [p for grad, t, p in aligned_labels if grad == 'high']
+    low_p_labels = [p for grad, t, p in aligned_labels if grad == 'low']
+
+    opt_task1_t_labels = [t for task, t, p in opt_task_aligned if task == 'opt_task1']
+    opt_task1_p_labels = [p for task, t, p in opt_task_aligned if task == 'opt_task1']
+
+    opt_task2_t_labels = [t for task, t, p in opt_task_aligned if task == 'opt_task2']
+    opt_task2_p_labels = [p for task, t, p in opt_task_aligned if task == 'opt_task2']
+
+    high_roc_auc = roc_auc_score(high_t_labels, high_p_labels) if len(set(high_t_labels)) > 1 else None
+    low_roc_auc = roc_auc_score(low_t_labels, low_p_labels) if len(set(low_t_labels)) > 1 else None
+
+    opt_task1_roc_auc = roc_auc_score(opt_task1_t_labels, opt_task1_p_labels) if len(set(opt_task1_t_labels)) > 1 else None
+    opt_task2_roc_auc = roc_auc_score(opt_task2_t_labels, opt_task2_p_labels) if len(set(opt_task2_t_labels)) > 1 else None
+
+    # For demonstration purposes, we'll just return the content with the selected model name
+
+    # print(checkpoint)
+    progress(0.1, desc="Files created and saved")
+    # if (inc_val<5):
+    #     model_name="highGRschool10"
+    # elif(inc_val>=5 & inc_val<10):
+    #     model_name="highGRschool10"
+    # else:
+    #     model_name="highGRschool10"
+    # Function to analyze each row
+    def analyze_row(row):
+    # Split the row into fields
+        fields = row.split("\t")
+
+        # Define tasks for OptionalTask_1, OptionalTask_2, and FinalAnswer
+        optional_task_1_subtasks = ["DenominatorFactor", "NumeratorFactor", "EquationAnswer"]
+        optional_task_2_subtasks = [
+            "FirstRow2:1", "FirstRow2:2", "FirstRow1:1", "FirstRow1:2", 
+            "SecondRow", "ThirdRow"
+        ]
+
+        # Helper function to evaluate task attempts
+        def evaluate_tasks(fields, tasks):
+            task_status = {}
+            for task in tasks:
+                relevant_attempts = [f for f in fields if task in f]
+                if any("OK" in attempt for attempt in relevant_attempts):
+                    task_status[task] = "Attempted (Successful)"
+                elif any("ERROR" in attempt for attempt in relevant_attempts):
+                    task_status[task] = "Attempted (Error)"
+                elif any("JIT" in attempt for attempt in relevant_attempts):
+                    task_status[task] = "Attempted (JIT)"
+                else:
+                    task_status[task] = "Unattempted"
+            return task_status
+
+        # Evaluate tasks for each category
+        optional_task_1_status = evaluate_tasks(fields, optional_task_1_subtasks)
+        optional_task_2_status = evaluate_tasks(fields, optional_task_2_subtasks)
+
+        # Check if tasks have any successful attempt
+        opt1_done = any(status == "Attempted (Successful)" for status in optional_task_1_status.values())
+        opt2_done = any(status == "Attempted (Successful)" for status in optional_task_2_status.values())
+
+        return opt1_done, opt2_done
+
+    # Read data from test_info.txt
+    with open(test_info_location, "r") as file:
+        data = file.readlines()
+
+    # Assuming test_info[7] is a list with ideal tasks for each instance
+    ideal_tasks = test_info[6]  # A list where each element is either 1 or 2
+
+    # Initialize counters
+    task_counts = {
+    1: {"ER": 0, "ME": 0, "both": 0,"none":0},
+    2: {"ER": 0, "ME": 0, "both": 0,"none":0}
+    }
+
+    # Analyze rows
+    for i, row in enumerate(data):
+        row = row.strip()
+        if not row:
+            continue
+
+        ideal_task = ideal_tasks[i]  # Get the ideal task for the current row
+        opt1_done, opt2_done = analyze_row(row)
+
+        if ideal_task == 0:
+            if opt1_done and not opt2_done:
+                task_counts[1]["ER"] += 1
+            elif not opt1_done and opt2_done:
+                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]["ER"] += 1
+            elif not opt1_done and opt2_done:
+                task_counts[2]["ME"] += 1
+            elif opt1_done and opt2_done:
+                task_counts[2]["both"] += 1
+            else:
+                task_counts[2]["none"] +=1
+
+    # Create a string output for results
+    # output_summary = "Task Analysis Summary:\n"
+    # output_summary += "-----------------------\n"
+
+    # 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['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 = 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 = 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)
+    ])
+    progress(0.6,desc="Model execution completed")
+    result = {}
+    with open("result.txt", 'r') as file:
+        for line in file:
+            key, value = line.strip().split(': ', 1)
+            # print(type(key))
+            if key=='epoch':
+                result[key]=value
+            else:
+                 result[key]=float(value)
+    result["ROC score of HGR"]=high_roc_auc
+    result["ROC score of LGR"]=low_roc_auc
+# Create a plot
+    with open("roc_data.pkl", "rb") as f:
+        fpr, tpr, _ = pickle.load(f)
+    # print(fpr,tpr)
+    roc_auc = auc(fpr, tpr)
+
+
+#  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 = 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)
+
+
+    
+
+    progress(1.0)
+    # Prepare text output
+    text_output = f"Model: {model_name}\nResult:\n{result}"
+    # Prepare text output with HTML formatting
+    text_output = f"""
+    ---------------------------
+    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
+
+# List of models for the dropdown menu
+
+# models = ["ASTRA-FT-HGR", "ASTRA-FT-LGR", "ASTRA-FT-FULL"]
+models = ["ASTRA-FT-HGR", "ASTRA-FT-FULL"]
+content = """
+<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; 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="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://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. 
+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;">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>
+
+<ol style="color: white;">
+    <li style="color: white;">Select a fine-tuned model:
+        <ul style="color: white;">
+            <li style="color: white;">ASTRA-FT-HGR: Fine-tuned with a small sample of data from schools that have a high graduation rate.</li>
+            <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). 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 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
+available_themes = {
+    "default": gr.themes.Default(),
+    "soft": gr.themes.Soft(),
+    "monochrome": gr.themes.Monochrome(),
+    "glass": gr.themes.Glass(),
+    "base": gr.themes.Base(),
+}
+
+# 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;
+}
+
+/* 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 */
+}
+
+/* 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;
+}
+
+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;
+}
+
+/* Links container styling */
+.links-container {
+    text-align: center !important;
+    margin: 1em auto !important;
+    font-family: 'Inter' ,'Fira Sans', sans-serif !important;
+}
+
+/* Links */
+a {
+    color: #2563eb !important;
+    text-decoration: none !important;
+    font-family:'Inter' , 'Fira Sans', sans-serif !important;
+}
+
+a:hover {
+    text-decoration: underline !important;
+    opacity: 0.8;
+}
+
+/* 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;
+}
+
+/* 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;
+    align-items: center;
+    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;
+    background-color: #f0f8ff;
+    border: 1px solid #004080;
+    border-radius: 5px;
+    padding: 5px 10px;
+}
+
+.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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* Add subtle animation to interactive elements */
+button, select, .slider-percentage {
+    transition: all 0.2s ease-in-out !important;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+'''
+
+with gr.Blocks(theme='gstaff/sketch', css=custom_css) as demo:
+    
+    # gr.Markdown("<h1 id='title'>ASTRA</h1>", elem_id="title")
+    gr.Markdown(content)
+    
+    with gr.Row():
+        # file_input = gr.File(label="Upload a test file", file_types=['.txt'], elem_classes="file-box")
+        # 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"
+        )
+    
+    with gr.Row():
+        btn = gr.Button("Submit")
+
+    gr.Markdown("<p class='description'>Dashboard</p>")
+
+    with gr.Row():
+        output_text = gr.Textbox(label="")
+        # output_image = gr.Image(label="ROC")
+    with gr.Row():
+        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.click(
+        fn=process_file, 
+        inputs=[model_dropdown,increment_slider], 
+        outputs=[output_text,plot_output,opt1_pie,opt2_pie]
+    )
+
+
+# Launch the app
 demo.launch()