output in blocks

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+questions.json
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

app.py

@@ -2,6 +2,7 @@ import os
 import gradio as gr
 import base64
 import prompts
+import json
 from openai import OpenAI
 from dotenv import load_dotenv
 
@@ -16,6 +17,25 @@ def encode_image(image_path):
         return base64.b64encode(image_file.read()).decode("utf-8")
 
 
+def load_qcm(file_path):
+    try:
+        with open(file_path, "r", encoding="utf-8") as file:
+            return json.load(file)
+    except json.JSONDecodeError as e:
+        print(f"Error decoding JSON: {e}")
+        return {}
+
+
+def get_answers(qcm):  # qcm is in json format
+    answers = [answer["value"] for answer in qcm["Answers"]]
+    correct_answers = [
+        answer["value"] for answer in qcm["Answers"] if answer["correct"]
+    ]
+    md_answers = "\n".join([f"* {answer}" for answer in answers])
+    md_correct_answers = "\n".join([f"* {answer}" for answer in correct_answers])
+    return {"md_answers": md_answers, "md_correct_answers": md_correct_answers}
+
+
 def process(image_path):
     try:
         response = client.chat.completions.create(
@@ -43,17 +63,69 @@ def process(image_path):
             #    presence_penalty=0
         )
         #        print(response["usage"]["total_tokens"])
-        return response.choices[0].message.content
+        json_output = response.choices[0].message.content
+        return json.loads(json_output)
 
     except Exception as e:
         print(f"an error occurred : {e}")
-        return {"error": str(e)}
+        return {"error": str(e)}, str(e)
+
+
+with gr.Blocks() as demo:
+
+    with gr.Row():
+        image = gr.Image(label="Image", type="filepath")
+        with gr.Column():
+            submit_btn = gr.Button("Soumettre")
+            progress = gr.Textbox(label="Traitement")
+            with gr.Accordion(
+                open=False,
+            ):
+                gr_json_output = gr.JSON(label="json output")
+
+    with gr.Tab(label="QCM", visible=False) as gr_qcm_column:
+
+        gr_question = gr.Textbox(label="Question")
+        with gr.Accordion(label="Réponses possibles"):
+            gr_answers = gr.Markdown()
+        gr_hint = gr.Textbox(label="Aide à la réponse")
+        with gr.Accordion(label="Bonnes réponses"):
+            gr_correct_answers = gr.Markdown()
+        gr_explanation = gr.Textbox(label="Explication")
+
+    def submit(image_path):
+
+        qcm = process(image_path)
+        # qcm = load_qcm("questions.json")
+        ga = get_answers(qcm)
+
+        return {
+            progress: "Terminé !",
+            gr_qcm_column: gr.Tab(visible=True),
+            gr_json_output: qcm,
+            gr_question: qcm["Question"],
+            gr_answers: ga["md_answers"],
+            gr_hint: qcm["hint"],
+            gr_correct_answers: ga["md_correct_answers"],
+            gr_explanation: qcm["explanation"],
+        }
 
+    submit_btn.click(
+        fn=submit,
+        inputs=image,
+        outputs=[
+            progress,
+            gr_qcm_column,
+            gr_json_output,
+            gr_question,
+            gr_hint,
+            gr_answers,
+            gr_correct_answers,
+            gr_explanation,
+        ],
+        api_name="submit",
+    )
 
-iface = gr.Interface(
-    fn=process,
-    inputs=gr.Image(type="filepath"),
-    outputs=gr.JSON(),
-)
-authorized_users = [("test", os.environ["TEST_PASSWORD"])]
-iface.launch(auth=authorized_users)
+if __name__ == "__main__":
+    authorized_users = [("test", os.environ["TEST_PASSWORD"])]
+    demo.launch(auth=authorized_users)

prompts.py

@@ -1,13 +1,13 @@
 SINGLE_QCM_PROMPT = """
-You are an assistant for a primary or secondary school teacher. The attached image is a photo or screenshot of a multiple choice question found by the teacher in an exercise book. Your job is to convert this image into a JSON file containing the question, proposed answers, an boolean indicator telling which answer is correct, and an explanation. 
+You are an assistant for a primary or secondary school teacher. The attached image is a photo or screenshot of a multiple choice question found by the teacher in an exercise book. Your job is to convert this image into a JSON file containing the question, proposed answers, a boolean indicator telling which answer is correct, and an explanation. 
 
 Let's proceed step by step:
 
 1. Start by identifying the question. Note that the question may be numbered with a digit (such as “1.”) or a letter (such as “a.”). This numbering is not part of the question. Keep only the question, without changing, deleting or adding any word
 2. Identify all the proposed answers
-3. For each proposed answer, check if it is a correct answer. You will have fill in a boolean field indicatif if the answer is correct or not.
+3. For each proposed answer, check if it is a correct answer. You will have to set a boolean field indicator which tells if the answer is correct or not.
 4. Evaluate the age of the student to which this exercise is targeted. 
-4. Think about a short hint sentence for this MCQ. It should be adapted to the students age and be very short. It should targetthe points in the exercise that might pose a problem for your students. Remember to formulate clues, not answers.
+4. Think about a short hint sentence for this MCQ. It should be adapted to the students age and be very short. It should target the terms in the exercise that might pose a problem for your students. Remember to formulate clues, not answers.
 5. Think about a short explanation that will help the students who didn’t fin the correct answer. This explanation must be adapted to their age and be very short. 
 6. Write the question, answers, and in a JSON file following the given example format.