new ui

demo.py

@@ -15,7 +15,6 @@ def clamp(x, minimum, maximum):
 #################################################################################################################################################
 
 
-
 # read secret api key
 API_KEY = os.environ['ApiKey']
 FIREBASE_API_KEY = os.environ['FirebaseSecret']
@@ -23,10 +22,10 @@ FIREBASE_URL = os.environ['FirebaseURL']
 SETUP_MODEL = os.environ['SETUP_MODEL']
 
 
-# creds = credentials.Certificate(json.loads(FIREBASE_API_KEY))
-# firebase_app = firebase_admin.initialize_app(creds, {'databaseURL': FIREBASE_URL})
-# firebase_data_ref = db.reference("data")
-# firebase_current_ref = None
+creds = credentials.Certificate(json.loads(FIREBASE_API_KEY))
+firebase_app = firebase_admin.initialize_app(creds, {'databaseURL': FIREBASE_URL})
+firebase_data_ref = db.reference("data")
+firebase_current_ref = None
 
 BASE_URL = "https://skapi.polyglot-edu.com/"
 
@@ -37,80 +36,23 @@ BASE_URL = "https://skapi.polyglot-edu.com/"
 levels = ["Primary School", "Middle School", "High School", "College", "Academy"]
 languages = ["English", "Italian", "French", "German", "Spanish"]
 type_of_exercise = ["Open Question", "Short Answer Question", "True or False", "Fill in the Blanks", "Single Choice", "Multiple Choice", "Debate", "Essay", "Brainstorming", "Knoledge Exposition"]
+bloom_levels = ["Remembering", "Understanding", "Applying", "Analyzing", "Evaluating", "Creating"]
 
-def generation_to_dict(experiment, skip=False):
-    info = {
-        # experiment info
-        **experiment,
-
-        # chosen image set info
-        "corrupted_filename": experiment["corrupted"]["name"],
-        "options": [img["name"] for img in experiment["options"]],
-    }
-
-    if skip:
-        info = {
-            **info,
-            # selected image info
-            "selected_image": "None",
-            "selected_algo": "None",
-        }
+def like():
+    global firebase_current_ref
+    if firebase_current_ref is not None:
+        firebase_current_ref.update({"like": 1})
+        gr.Info("Generated text liked.")
     else:
-        info = {
-            **info,
-            # selected image info
-            "selected_image": experiment["options"][experiment["selected_image"]]["name"],
-            "selected_algo": experiment["options"][experiment["selected_image"]]["algo"],
-        }
-    
-    return info
-
-def generate_new_experiment():
-    pass
-    # wanted_corruptions = ["spatter", "impulse_noise", "speckle_noise", "gaussian_noise", "pixelate", "jpeg_compression", "elastic_transform"]
-    # corruption = random.choice([f for f in list(Path(f"./images/{DATASET}").glob("*/*")) if f.is_dir() and f.name in wanted_corruptions])
-    # image_id = random.choice(list(corruption.glob("*")))
-    # imgs_to_sample = (NUMBER_OF_IMAGES_PER_ROW * NUMBER_OF_ROWS) // 2
-
-    # corrupted_image = {"name": str(random.choice(list(image_id.glob("*corrupted*"))))}
-    # sdedit_images = [
-    #     {"name": str(img), "algo": "SDEdit"}
-    #     for img in random.sample(list((image_id / "sde").glob(f"*")), imgs_to_sample)
-    # ]
-    # odedit_images = [
-    #     {"name": str(img), "algo": "ODEdit"}
-    #     for img in random.sample(list((image_id / "ode").glob(f"*")), imgs_to_sample)
-    # ]
-    # total_images = sdedit_images + odedit_images
-    # random.shuffle(total_images)
-
-    # return Experiment(
-    #     DATASET,
-    #     corruption.name,
-    #     image_id.name,
-    #     corrupted_image,
-    #     total_images,
-    # )
-
-def save(experiment, corrupted_component, *img_components, mode):
-    if mode == "save" and (experiment is None or experiment["selected_image"] is None):
-        gr.Warning("You must select an image before submitting")
-        return [experiment, corrupted_component, *img_components]
-    if mode == "skip":
-        experiment["selected_image"] = None
-
-    dict_to_save = {
-        **generation_to_dict(experiment, skip=(mode=="skip")),
-        "timestamp": datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
-    }
-    # firebase_data_ref.push(dict_to_save)
-
-    print("=====================")
-    print(dict_to_save)
-    print("=====================")
-
-    gr.Info("Your choice has been saved to Firebase")
-    return next()
+        gr.Warning("No generated text to vote.")
+
+def dislike():
+    global firebase_current_ref
+    if firebase_current_ref is not None:
+        firebase_current_ref.update({"like": -1})
+        gr.Info("Generated text disliked.")
+    else:
+        gr.Warning("No generated text to vote.")
 
 def analyze_resource(url):
     response = requests.post(
@@ -139,8 +81,6 @@ def generate_learning_objective(topic, context, level):
         timeout=20
     )
 
-    print(topic, context, level)
-
     if response.status_code != 200:
         raise gr.Error(f"Failed to generate learning objective: {response.text}")
     
@@ -152,17 +92,17 @@ def generate_exercise(state):
             if item in value:
                 return key
         return None
+    
+    gr.Info(find_key(state["learningObjectiveList"], state['learningObjective']))
 
-    step3 = requests.post(
-        BASE_URL + "Exercises/GenerateExercise",
-        headers={"ApiKey": API_KEY, "SetupModel": str(SETUP_MODEL)},
-        json={
+    try:
+        _json = {
             # filled in with the data from the previous steps
             "macroSubject": state['MacroSubject'],
             "title": state['Title'],
-            "level": state['level'],
+            "level": levels.index(state['level']),
             "learningObjective": state['learningObjective'],
-            "bloomLevel": find_key(state["learningObjectiveList"], state['learningObjective']),
+            "bloomLevel": bloom_levels.index(find_key(state["learningObjectiveList"], state['learningObjective'])),
             "language": state['Language'],
             "material": state['material_url'],
             "assignmentType": [topic['Type'] for topic in state['MainTopics'] if topic['Topic'] == state['topic']][0],
@@ -170,52 +110,74 @@ def generate_exercise(state):
             "temperature": 0,
             
             # to be filled in manually
-            "correctAnswersNumber": 0,
-            "distractorsNumber": 0,
-            "easilyDiscardableDistractorsNumber": 0,
-            "typeOfExercise": 0
-        },
+            "typeOfExercise": state['typeOfExercise'],
+            "correctAnswersNumber": state["correctAnswersNumber"],
+            "distractorsNumber": state["distractorsNumber"],
+            "easilyDiscardableDistractorsNumber": state["easyDistractorsNumber"],
+        }
+    except KeyError as e:
+        raise gr.Error(f"Missing key: {e}")
+
+    step3 = requests.post(
+        BASE_URL + "Exercises/GenerateExercise",
+        headers={"ApiKey": API_KEY, "SetupModel": str(SETUP_MODEL)},
+        json=_json,
         timeout=20
     )
 
+    if step3.status_code != 200:
+        raise gr.Error(f"Failed to generate exercise: {step3.text}")
+    
+    global firebase_current_ref
+    firebase_current_ref = firebase_data_ref.push({
+        "type": "open_question",
+        "input": _json,
+        "output": step3.json(),
+        "datetime": str(datetime.datetime.now()),
+        "like": 0,
+    })
+
+    return format_output(step3.json(), state['typeOfExercise'])
+
 ##################################################################
 # UI Layer
 ##################################################################
 
 def format_output(output, exercise_type):
-    if type_of_exercise[exercise_type] in ["Open Question", "Short Answer Question"]:
-        return f"<div class='markdown-body'><h3>{output['Assignment']}</h3><p>{output['Solutions'][0]}</p></div>"
-    
-    return f"<div class='markdown-body'><h3>Ouput (unknown type)</h3><p>{output['Solutions'][0]}</p></div>"
-
-
-def reset_UI():
-    return [
-        {"level": levels[-1], "language": "English"},
-    ]
-
-def next():
-    new_experiment = generate_new_experiment()
-
-    new_img_components = [
-        gr.Image(value=img["name"], label=f"{i}", elem_id="unsel", show_label=False, show_download_button=False, show_share_button=False, interactive=False)
-        for i, img in enumerate(new_experiment["options"])
-    ]
-    new_corrupted_component = gr.Image(value=new_experiment["corrupted"]["name"], label="corr", elem_id="corrupted", show_label=False, show_download_button=False, show_share_button=False, interactive=False)
-
-    return [new_experiment, new_corrupted_component, *new_img_components]
+    if type_of_exercise[exercise_type] in ["Open Question", "Short Answer Question", "True or False"]:
+        return f"<div class='markdown-body'><h3>Question:</h3><p>{output['Assignment']}</p><h3>Reference Answer:</h3><p>{output['Solutions'][0]}</p></div>"
+    elif type_of_exercise[exercise_type] in ["Multiple Choice", "Single Choice"]:
+        return f"""<div class='markdown-body'><h3>Question:</h3><p>{output['Assignment']}</p><h3>Options:</h3><p>{
+            "<br/>".join(["✅" + x for x in output['Solutions']] + ["❌" + x for x in output['Distractors'] + output["EasilyDiscardableDistractors"]])
+        }</p></div>"""
+    elif type_of_exercise[exercise_type] in ["Debate", "Essay", "Brainstorming", "Knoledge Exposition"]:
+        return f"<div class='markdown-body'><h3>Assignment:</h3><p>{output['Assignment']}</p></div>"
+    elif type_of_exercise[exercise_type] in ["Fill in the Blanks"]:
+        return f"""<div class='markdown-body'><h3>Paragraph:</h3><p>{output['Plus']}</p><h3>Question:</h3><p>{output['Assignment']}</p><h3>Options:</h3><p>{
+            "<br/>".join(["✅" + x for x in output['Solutions']] + ["❌" + x for x in output['Distractors'] + output["EasilyDiscardableDistractors"]])
+        }</p></div>"""
+
+    return f"<div class='markdown-body'><h3>Ouput</h3><p>{output['Solutions'][0]}</p></div>"
 
 def on_url_change(url, state):
+    for key in ['topic', 'learningObjective', 'learningObjectiveList', 'material_url']:
+        if key in state:
+            del state[key]
+
     material = analyze_resource(url)
 
     topics = [topic['Topic'] for topic in material['MainTopics']]
 
-    components = reset_UI()
-    state = components[0]
     state = state | material
     state['material_url'] = url
 
-    return [gr.Radio(label="Topic", choices=topics, interactive=True), state]
+    # del state['topic']
+    # del state['learningObjective']
+    # del state['learningObjectiveList']
+
+    lo_component = gr.Dropdown(label="Learning Objective", choices=[], value="placeholder", interactive=False)
+
+    return [gr.Radio(label="Topic", choices=topics, interactive=True), lo_component, state]
 
 def on_topic_change(topic, old_state):
     old_state['topic'] = topic
@@ -251,7 +213,7 @@ body, html {
 }
 iframe.second-row {
     width: 100%;         /* Full width */
-    height: 50vh;        /* Full height */
+    height: 60vh;        /* Full height */
     border: none;        /* No border */
     background-color: #f9f9f9; /* Light background */
 }
@@ -268,6 +230,8 @@ iframe.second-row {
     box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
     max-width: 800px;   /* Max width to maintain optimal line length */
     margin: 20px auto;  /* Center align the Markdown content */
+    max-height: 70vh;   /* Max height to prevent scrolling */
+    overflow-y: auto;   /* Auto-scroll for overflow */
 }
 
 /* Headings with increased weight and spacing for clear hierarchy */
@@ -351,29 +315,37 @@ iframe.second-row {
 }
 """
 
+def make_visible(components, visible):
+    return [gr.update(visible=visible) for _ in range(components)]
+
 
 with gr.Blocks(title="Educational AI", css=css) as demo:
-    state = gr.State({"level": levels[-1], "language": "English"})
+    state = gr.State({"level": levels[-1], "language": "English", "correctAnswersNumber": 1, "easyDistractorsNumber": 1, "distractorsNumber": 1, "typeOfExercise": 0})
 
     with gr.Row(elem_classes=["row-content"]):
         with gr.Column(scale=3, elem_classes=["column-content"]):
-            language_component = gr.Dropdown(languages, label="Exercise Language", value="English")
             level_component = gr.Dropdown(label="Level", choices=levels, value=levels[-1])
             url_component = gr.Textbox(label="Input URL", placeholder="Enter URL here...")
             iframe_component = gr.HTML("<iframe class='second-row' src='' allowfullscreen></iframe>")
 
         with gr.Column(scale=3):
+            language_component = gr.Dropdown(languages, label="Exercise Language", value="English")
             topic_component = gr.Radio(label="Topic", choices=["placeholder"], interactive=False)
             lo_component = gr.Dropdown(label="Learning Objective", choices=[], value="placeholder", interactive=False)
-            question_type_component = gr.Dropdown(label="Question Type", choices=type_of_exercise, type="index")
+            question_type_component = gr.Dropdown(label="Question Type", choices=type_of_exercise, type="index", value=0)
             
-            correct_answers_component = gr.Number(value=1, minimum=1, maximum=3, step=1, label="Number of correct answers", interactive=False)
-            easy_distractors_component = gr.Number(value=1, minimum=0, maximum=8, step=1, label="Number of easy distractors", interactive=False)
-            distractors_component = gr.Number(value=1, minimum=0, maximum=8, step=1, label="Number of distractors", interactive=False)
+            correct_answers_component = gr.Number(value=1, minimum=1, maximum=3, step=1, label="Number of correct answers", visible=False)
+            easy_distractors_component = gr.Number(value=1, minimum=0, maximum=8, step=1, label="Number of easy distractors", visible=False)
+            distractors_component = gr.Number(value=1, minimum=0, maximum=8, step=1, label="Number of distractors", visible=False)
+            
+            generate_btn = gr.Button("Generate Question")
 
         with gr.Column(scale=3):
-            generate_btn = gr.Button("Generate Question")
             output_component = gr.HTML("<div class='markdown-body'><h3>Output</h3>Placeholder for output</div>")
+            with gr.Row():
+                like_btn = gr.Button("👍 like")
+                dislike_btn = gr.Button("👎 dislike")
+            gr.Button(value="📝  Fill our Questionnaire", link="https://forms.gle/T8CS5CiQgPbKUdeM9", interactive=True)
 
     # on language change
     language_component.change(lambda x, old_state: old_state | {"language": x}, [language_component, state], [state])
@@ -384,7 +356,7 @@ with gr.Blocks(title="Educational AI", css=css) as demo:
     # on url change
     url_component.change(lambda x: gr.HTML(f"<iframe class='second-row' src='{x}' allowfullscreen></iframe>"), [url_component], [iframe_component])
     url_component.change(lambda x: gr.Info(f"Analyzing resource at {x}..."), [url_component], [])
-    url_component.change(on_url_change, [url_component, state], [topic_component, state])
+    url_component.change(on_url_change, [url_component, state], [topic_component, lo_component, state])
 
     # on topic change
     topic_component.change(lambda x: gr.Info(f"Generating learning objective for {x}..."), [topic_component], [])
@@ -395,7 +367,17 @@ with gr.Blocks(title="Educational AI", css=css) as demo:
     
     # on question type change
     question_type_component.change(lambda x, old_state: old_state | {"typeOfExercise": x}, [question_type_component, state], [state])
-    
+    question_type_component.change(lambda x: make_visible(3, x in [type_of_exercise.index(y) for y in ["Multiple Choice", "Single Choice", "Fill in the Blanks"]]), [question_type_component], [correct_answers_component, easy_distractors_component, distractors_component])
+
+    # exercise-specific settings    
+    correct_answers_component.change(lambda x, old_state: old_state | {"correctAnswersNumber": x}, [correct_answers_component, state], [state])
+    easy_distractors_component.change(lambda x, old_state: old_state | {"easyDistractorsNumber": x}, [correct_answers_component, state], [state])
+    distractors_component.change(lambda x, old_state: old_state | {"distractorsNumber": x}, [correct_answers_component, state], [state])
+
+    # on like/dislike
+    like_btn.click(like)
+    dislike_btn.click(dislike)
+
 
     # on generate question
     generate_btn.click(lambda: gr.Info("Generating question..."))