Update app.py

update new interface

app.py

@@ -1,7 +1,6 @@
 import os
-os.system("pip install pymongo")
 from collections import defaultdict
-from database import save_response
+from database import save_response, read_responses
 import gradio as gr
 import pandas as pd
 import random
@@ -11,17 +10,30 @@ css = """
     {
         text-align: right;
     }
-    #component-19
-    {
-        text-align: right;
-        flex-direction: row-reverse; /* Makes the main-axis start from the right /
-        justify-content: flex-start; / Aligns children to the right */
+    .usr-inst{
+    text-align:center;
+    background-color: #3e517e;
+    border: solid 1px;
+    border-radius: 5px;
+    padding: 10px;
     }
-    #component-17
-    {
-    text-align: right;
-    float: right;
+    .svelte-1kzox3m{
+    justify-content: end;
+    }
+    .svelte-sfqy0y{
+    border:none; 
     }
+    .svelte-90oupt{
+    background-color: #0b0f19;
+    padding-top: 0px;
+    }
+    #component-4{
+    border: 1px solid;
+    padding: 5px;
+    background-color: #242433;
+    border-radius: 5px;
+    }
+    
     """
 
 file_path = 'instructions/merged.json'
@@ -30,7 +42,7 @@ df = pd.read_json(file_path, orient='records', lines=False)
 # that keeps track of how many times each question has been used
 question_count = {index: 0 for index in df.index}
 model_rankings = defaultdict(lambda: {'1st': 0, '2nd': 0, '3rd': 0})
-
+curr_order = ['CIDAR', 'CHAT', 'ALPAGASUS']
 
 def get_rank_suffix(rank):
     if 11 <= rank <= 13:
@@ -42,82 +54,80 @@ def get_rank_suffix(rank):
 
 def process_rankings(user_rankings):
     print("Processing Rankings:", user_rankings)  # Debugging print
-    for answer_id, rank in user_rankings:
-        model = answer_id.split('_')[0]  # Extracting the model name from the answer_id
-        rank_suffix = get_rank_suffix(rank)
-        model_rankings[model][f'{rank}{rank_suffix}'] += 1  # Using the correct suffix based on the rank
-        model_rankings_dict = dict(model_rankings)
-
-    save_response(model_rankings_dict)
-    print("Updated Model Rankings:", model_rankings)  # Debugging print
+    save_response(user_rankings)
+    print(read_responses())
     return
 
 
 def get_questions_and_answers():
     available_questions = [index for index, count in question_count.items() if count < 3]
-    selected_indexes = random.sample(available_questions, min(4, len(available_questions)))
-    for index in selected_indexes:
-        question_count[index] += 1
-
-    questions_and_answers = []
-    for index in selected_indexes:
-        question = df.loc[index, 'instruction']
-        answers_with_models = [
-            (df.loc[index, 'cidar_output'], 'CIDAR'),
-            (df.loc[index, 'chat_output'], 'CHAT'),
-            (df.loc[index, 'alpagasus_output'], 'ALPAGASUS')
-        ]
-        random.shuffle(answers_with_models)  # Shuffle answers with their IDs
-        questions_and_answers.append((question, answers_with_models))
-
-    return questions_and_answers
-
-
-def rank_interface():
-    questions = get_questions_and_answers()
+    index  = random.sample(available_questions, min(1, len(available_questions)))[0]
+    question_count[index] += 1
+
+    question = df.loc[index, 'instruction']
+    answers_with_models = [
+        (df.loc[index, 'cidar_output'], 'CIDAR'),
+        (df.loc[index, 'chat_output'], 'CHAT'),
+        (df.loc[index, 'alpagasus_output'], 'ALPAGASUS')
+    ]
+    random.shuffle(answers_with_models)  # Shuffle answers with their IDs
+    curr_order = [model for _, model in answers_with_models]
+    return (question, answers_with_models)
+
+def reload_components():
+    question, answers = get_questions_and_answers()
+    user_instructions_txt = " في الصفحة التالية ستجد طلب له ثلاث إجابات مختلفة. من فضلك اختر مدي توافق كل إجابة مع الثقافة العربية."
+    radios = []
+    user_instructions = gr.Markdown(rtl=True, value= f'<h1 class="usr-inst">{user_instructions_txt}</h1>')
+
+    question_md = gr.Markdown(rtl=True, value= f'<b> {question} </b>')
+                
+    for answer, model in answers:
+        radios.append(gr.Markdown(rtl = True, value= answer))
+        radios.append(gr.Radio(elem_classes = 'rtl', choices = ['متوافق', 'متوافق جزئياً', 'غير متوافق'], value = 'غير متوافق', label = ""))            
     
-    # Create three dropdowns for each question for 1st, 2nd, and 3rd choices
-    inputs = []
-
-    for question, answers in questions:
-        # Use an HTML component to display the question
-        inputs.append(gr.Markdown(rtl=True, value= question))
-        
-        answers_text = [answer for answer, _ in answers]
-
-        # Append three dropdowns for rankings without repeating the question
-        inputs.append(gr.Dropdown(elem_classes="rtl", choices=["...اختر"] + answers_text, label="الاختيار الأول"))
-        inputs.append(gr.Dropdown(elem_classes="rtl", choices=["...اختر"] + answers_text, label="الاختيار الثاني"))
-        inputs.append(gr.Dropdown(elem_classes="rtl", choices=["...اختر"] + answers_text, label="الاختيار الثالث"))
-
-    outputs = gr.Textbox(elem_id="rtl_text", label="")
- 
-
-    def rank_fluency(*dropdown_selections):
-        user_rankings = []
-        for i in range(0, len(dropdown_selections), 4):  # Process each set of 3 dropdowns for a question
-            selections = dropdown_selections[i+1:i+4]
-            # Check for duplicate selections within the same question
-            unique_selections = set(tuple(selection) for selection in selections)
+    return [user_instructions, question_md] + radios
 
-            # Now you can safely check if all sublists were unique
-            if len(selections) != len(unique_selections):
-                return "تأكد من عدم تكرار الإجابة لنفس السؤال"
-
-            question_index = i // 4
-            _, model_answers = questions[question_index]
-            for j, chosen_answer in enumerate(selections, start=1):
-                if chosen_answer == "...اختر":  # Skip unselected dropdowns
-                    continue
-                for model_answer, model in model_answers:
-                    if model_answer == chosen_answer:
-                        user_rankings.append((model, j))  # j is the rank (1, 2, or 3)
-                        break
+def rank_interface():
+    def rank_fluency(*radio_selections):
+        user_rankings = {}
+        for i in range(0, len(radio_selections), 3):  # Process each set of 3 dropdowns for a question
+            selections = radio_selections[i:i+3]
+            for j, chosen_answer in enumerate(selections):
+                model_name = curr_order[j]
+                if chosen_answer == 'غير متوافق':
+                    user_rankings[model_name] =  3 
+                elif chosen_answer == 'متوافق جزئياً':
+                    user_rankings[model_name] =  2
+                elif chosen_answer == 'متوافق':
+                    user_rankings[model_name] =  1
         process_rankings(user_rankings)
         return "سجلنا ردك، ما قصرت =)"
-
-    return gr.Interface(fn=rank_fluency, inputs=inputs, outputs=outputs,
-                            title="رتب إجابات الأسئلة أدناه، بناء على ارتباطها بالهوية الثقافية للمجتمعات العربية", css=css)
-
+        
+    # Create three dropdowns for each question for 1st, 2nd, and 3rd choices
+    inputs = []
+    with gr.Blocks(css=css) as demo:
+        with gr.Row():
+            with gr.Column():
+                outptus= reload_components()
+                out_text = gr.Markdown("", rtl = True)
+
+                gr.Button("Submit").click(
+                    fn=rank_fluency,
+                    inputs=outptus[1:],
+                    outputs=out_text
+                ).then(
+                    fn=reload_components,
+                    outputs = outptus
+                )
+
+                gr.Button("Skip").click(
+                    fn=reload_components,
+                    outputs=outptus
+                )
+           
+    return demo
+
+questions = get_questions_and_answers()
 iface = rank_interface()
-iface.launch()
+iface.launch(share = True)