Update app.py

app.py

@@ -1,43 +1,413 @@
-from pathlib import Path
+import pandas as pd
+from openai import OpenAI
+import json
+import gradio as gr
 from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 import uvicorn
-import gradio as gr
-from datetime import datetime
 
+client = OpenAI()
+
+def generate_questions(category, num_categories, num_questions):
+    if category == "":
+        category = "general knowledge"
+    print(category)
+    response = client.chat.completions.create(
+        model="gpt-4o-mini",
+        messages=[
+            {
+                "role": "user",
+                "content": [
+                    {
+                        "type": "text",
+                        "text": f"Break the category \"{category}\" into {num_categories} subcategories, and for each subcategory create {num_questions} True/False questions ranging from a question a Beginner would know to a question only an Expert would know. There should be as many True as False, and the structure of the questions should not make it obvious which is the answer. Only experts should get the hard questions right. Provide the correct answers and a field with a 1 sentence explanation. This will total out to {num_categories * num_questions} questions. Output just a JSON, nothing else. Below is an example JSON output for \"nutrition\" where 6 categories of 5 questions were requested, but remember, for you, there should be a total of {num_categories * num_questions} questions with {num_categories} categories and {num_questions} questions per category.\n\n```json\n{{\n  \"Macronutrients\": [\n    {{\n      \"question\": \"Protein is one of the three primary macronutrients.\",\n      \"answer\": True,\n      \"explanation\": \"Protein is one of the three primary macronutrients, along with carbohydrates and fats.\"\n    }},\n    {{\n      \"question\": \"Carbohydrates are the body's main source of energy.\",\n      \"answer\": True,\n      \"explanation\": \"Carbohydrates are typically the body's preferred energy source.\"\n    }},\n    {{\n      \"question\": \"Fats have the same caloric content per gram as carbohydrates.\",\n      \"answer\": False,\n      \"explanation\": \"Fats have 9 calories per gram, while carbohydrates have 4 calories per gram.\"\n    }},\n    {{\n      \"question\": \"All proteins are equally effective for muscle growth.\",\n      \"answer\": False,\n      \"explanation\": \"Different proteins have varying amino acid profiles and bioavailability, affecting their effectiveness.\"\n    }},\n    {{\n      \"question\": \"Omega-3 fatty acids are a type of fat that can reduce inflammation.\",\n      \"answer\": True,\n      \"explanation\": \"Omega-3 fatty acids, found in foods like fish, are known to have anti-inflammatory properties.\"\n    }}\n  ],\n  \"Micronutrients\": [\n    {{ ...\"}}"
+                    }
+                ]
+            }
+        ],
+        response_format={"type": "json_object"},
+        temperature=1,
+        max_tokens=4071,
+        top_p=1,
+        frequency_penalty=0,
+        presence_penalty=0
+    )
+    return json.loads(response.choices[0].message.content)
+
+# Function to calculate Metaknowledge score
+def calculate_meta_cog_score(df):
+    df['Correct'] = df['User Answer'] == df['Correct Answer']
+    df['C'] = df['Correct'].apply(lambda x: 1 if x else -1)
+    n = len(df)
+    sum_C_Conf = (df['C'] * df['Confidence']).sum()
+    meta_cog_ratio = 0.5 + (sum_C_Conf / (2 * n))
+    return meta_cog_ratio
+
+def display_current_question(questions, index):
+    if index < len(questions):
+        question = questions[index]
+        return (
+            f"**Question {index + 1}:** {question['question']}",
+            None, None, True
+        )
+    else:
+        return ("", None, None, False)
+
+def calculate_scores(df):
+    df['Correct'] = df['User Answer'] == df['Correct Answer']
+    df['C'] = df['Correct'].apply(lambda x: 1 if x else 0)
+
+    # Expected score based on confidence
+    df['Expected Score'] = df['Confidence']
+    df['Actual Score'] = df['C']
+
+    # Difference between expected and actual scores
+    df['Overconfidence'] = (df['Expected Score'] > df['Actual Score']).astype(float) * (df['Expected Score'] - df['Actual Score'])
+    df['Underconfidence'] = (df['Expected Score'] < df['Actual Score']).astype(float) * (df['Actual Score'] - df['Expected Score'])
+
+    n = len(df)
+    sum_C_Conf = (df['C'] * df['Confidence']).sum()
+    meta_cog_ratio = 0.5 + (sum_C_Conf / (2 * n))
+
+    accuracy = df['Correct'].mean()
+    overconfidence = df['Overconfidence'].sum() / n
+    underconfidence = df['Underconfidence'].sum() / n
+
+    return {
+        # 'Metaknowledge Score': f"{round(meta_cog_ratio * 100, 0)}%",
+        'Accuracy': f"{round(accuracy * 100, 0)}%",
+        'Overconfidence': f"{round(overconfidence * 100, 0)}%",
+        'Underconfidence': f"{round(underconfidence * 100, 0)}%"
+    }
+
+# Function to analyze results using GPT-4o-mini
+def analyze_results(df, overall_scores, subcategory_scores):
+    # Prepare the data for analysis
+    questions = df['Question'].tolist()
+    correct_answers = df['Correct Answer'].tolist()
+    user_answers = df['User Answer'].tolist()
+    explanations = df['Explanation'].tolist()
+    confidence = df['Confidence'].tolist()
+    subcategories = df['Section'].tolist()
+
+    # Generate a summary of the results
+    response = client.chat.completions.create(
+        model="gpt-4o-mini",
+        messages=[
+            {
+                "role": "user",
+                "content": f"""
+                Analyze the following quiz results:
+                - Overall Accuracy: {overall_scores['Accuracy']}
+                - Overall Overconfidence: {overall_scores['Overconfidence']}
+                - Overall Underconfidence: {overall_scores['Underconfidence']}
+
+                Section scores:
+                {subcategory_scores}
+
+                The following is a list of my answers and confidence levels for each question, with the correct answers and subcategory:
+                {list(zip(questions, user_answers, correct_answers, explanations, confidence, subcategories))}
+
+                Provide an analysis of what I got wrong in terms of overall sections and specific questions, as well as what I was overconfident and underconfident in. Don't use numbers, as they're already displayed elsewhere.
+                The analysis should be only about 2 paragraphs. Write the subcategory names in bold when you use them.
+                """
+            }
+        ],
+        # response_format={ "type": "json_object" },
+        temperature=0.7,
+        max_tokens=1024,
+        top_p=1,
+        frequency_penalty=0,
+        presence_penalty=0
+    )
+
+    analysis = response.choices[0].message.content
+
+    # Start the table with larger column titles using <b> for bold and <span> for custom styling
+    question_details = (
+        "<table><thead><tr>"
+        "<th><b><span style='font-size:16px'>Question</span></b></th>"
+        "<th><b><span style='font-size:16px'>User Answer</span></b></th>"
+        "<th><b><span style='font-size:16px'>Correct Answer</span></b></th>"
+        "<th><b><span style='font-size:16px'>Explanation</span></b></th>"
+        "</tr></thead><tbody>"
+    )
+
+    for q, ua, ca, subcategory, e in zip(questions, user_answers, correct_answers, subcategories, explanations):
+        user_answer_str = 'True' if ua else 'False'
+        correct_answer_str = 'True' if ca else 'False'
+
+        # Check if the answer is incorrect
+        if ua != ca:
+            question_details += (
+                f"<tr><td><b>{q}</b></td><td><b>{user_answer_str}</b></td>"
+                f"<td><b>{correct_answer_str}</b></td><td><b>{e}</b></td></tr>"
+            )
+        else:
+            question_details += (
+                f"<tr><td>{q}</td><td>{user_answer_str}</td>"
+                f"<td>{correct_answer_str}</td><td>{e}</td></tr>"
+            )
+
+    question_details += "</tbody></table>"
+
+    return f"## Analysis of Results\n\n{analysis}\n\n## Detailed Questions and Answers\n\n{question_details}"
+
+# Modify the submit_answer function to include analysis
+def submit_answer(category, num_categories, num_questions, questions, index, user_answer, confidence, user_answers):
+    question_data = questions[index]
+    subcategory = question_data["subcategory"]
+
+    user_answers.append({
+        "Question": question_data["question"],
+        "Explanation": question_data["explanation"],
+        "User Answer": confidence > 0.5,
+        "Correct Answer": question_data["answer"],
+        "Confidence": 2*abs(confidence-0.5),
+        "Section": subcategory
+    })
+    index += 1
 
-# create a FastAPI app
+    if index >= len(questions):
+        df = pd.DataFrame(user_answers)
+        overall_scores = calculate_scores(df)
+        subcategory_scores = df.groupby('Section').apply(calculate_scores).to_dict()
+        analysis = analyze_results(df, overall_scores, subcategory_scores)
+
+        overall_score_df = pd.DataFrame([["Overall", *overall_scores.values()]], columns=['Section', 'Accuracy', 'Overconfidence', 'Underconfidence'])
+        subcategory_scores_df = pd.DataFrame([(subcategory, *score.values()) for subcategory, score in subcategory_scores.items()], columns=['Section', 'Accuracy', 'Overconfidence', 'Underconfidence'])
+        results_df = pd.concat([overall_score_df, subcategory_scores_df], ignore_index=True)
+        results_df = gr.DataFrame(label="Results", value=results_df, visible=True)
+        return "", index, gr.update(visible=False), user_answers, results_df, gr.update(visible=False), gr.update(visible=False), gr.update(value=analysis, visible=True), gr.update(visible=False)
+    else:
+        question_text, _, _, visible = display_current_question(questions, index)
+        return question_text, index, gr.update(visible=True), user_answers, gr.update(visible=False), gr.update(visible=True, value=0.5), gr.update(visible=False, value=None), gr.update(visible=False), gr.update(visible=True)
+
+# Gradio UI setup
+with gr.Blocks(theme="soft", css="footer{display:none !important}") as demo:
+    # Top bar with menu
+    # gr.Markdown("""## &nbsp; Deep Quizzer <img src="file/Subject.png" img align="left" width="20" height="20" />""")
+    gr.Markdown("""Discover what you truly know and ***how aware you are of your knowledge***. Deep Quizzer identifies gaps in your understanding and helps boost your confidence in areas you excel. Take a quiz to sharpen your skills and knowledge today!""")
+    with gr.Row():
+      category_input = gr.Textbox(label="Topic", placeholder="general knowledge", scale=4)
+      num_categories_input = gr.Number(label="Number of Quiz Sections", value=5, scale=1, maximum=6)
+      num_questions_input = gr.Number(label="Questions per Section", value=5, scale=1, maximum=6)
+      total_questions_display = gr.Number(label="Total Questions in Quiz", value=25, scale=1)
+    submit_category = gr.Button("Generate Quiz")
+    question_area = gr.Markdown(visible=False)
+    answer_area = gr.Radio(["True", "False"], label="Your Answer", visible=False)
+    with gr.Column():
+        confidence_slider = gr.Slider(0, 1, value=0.5, visible=False, container=False)
+        with gr.Row(visible=False) as guides:
+            gr.Markdown('<p style="text-align: left;">False</p>')
+            gr.Markdown('<p style="text-align: left;">Maybe False</p>')
+            gr.Markdown('<p style="text-align: center;">Not Sure</p>')
+            gr.Markdown('<p style="text-align: right;">Maybe True</p>')
+            gr.Markdown('<p style="text-align: right;">True</p>')
+
+    submit_answer_btn = gr.Button("Submit Answer", visible=False)
+    result_area = gr.DataFrame(label="Results", visible=False)
+    loading_text = gr.Textbox(label="Generating Quiz...", visible=False)
+    analysis_area = gr.Markdown(visible=False)
+    questions_state = gr.State()
+    index_state = gr.State(0)
+    user_answers_state = gr.State([])
+
+    def on_generate_quiz(category, num_categories, num_questions):
+        questions_data = generate_questions(category, num_categories, num_questions)
+
+        questions = []
+        for subcategory, qs in questions_data.items():
+            for q in qs:
+                q["subcategory"] = subcategory
+                questions.append(q)
+
+        import random
+        random.shuffle(questions)
+        print(len(questions))
+
+        index = 0
+        question_text, _, _, visible = display_current_question(questions, index)
+        return (
+            gr.update(value=question_text, visible=visible),
+            questions,
+            index,
+            [],
+            gr.update(visible=visible),
+            gr.update(visible=False, value=None),
+            gr.update(visible=True, value=0.5),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=True)
+        )
+
+    def remove_button():
+        return gr.update(visible=False)
+
+    def display_loading():
+        return gr.update(visible=True)
+
+    def update_total_questions(num_categories, num_questions):
+        total_questions = num_categories * num_questions
+        return gr.update(value=total_questions)
+
+    def display_results(index, questions):
+        if index >= len(questions):
+            return gr.update(visible=True)
+
+    num_categories_input.change(update_total_questions, inputs=[num_categories_input, num_questions_input], outputs=[total_questions_display])
+    num_questions_input.change(update_total_questions, inputs=[num_categories_input, num_questions_input], outputs=[total_questions_display])
+
+    submit_category.click(remove_button, inputs=[], outputs=[submit_category])
+    submit_category.click(display_loading, inputs=[], outputs=[loading_text])
+
+    def make_uninteractive():
+        return (
+            gr.update(interactive=False),
+            gr.update(interactive=False, visible=False),
+            gr.update(interactive=False, visible=False)
+        )
+
+    submit_category.click(
+        make_uninteractive,
+        inputs=[],
+        outputs=[category_input, num_categories_input, num_questions_input]
+    )
+
+    submit_category.click(
+        on_generate_quiz,
+        inputs=[category_input, num_categories_input, num_questions_input],
+        outputs=[
+            question_area,
+            questions_state,
+            index_state,
+            user_answers_state,
+            question_area,
+            answer_area,
+            confidence_slider,
+            submit_answer_btn,
+            result_area,
+            submit_category,
+            loading_text,
+            guides
+        ]
+    )
+
+
+    submit_answer_btn.click(
+        submit_answer,
+        inputs=[category_input, num_categories_input, num_questions_input, questions_state, index_state, answer_area, confidence_slider, user_answers_state],
+        outputs=[question_area, index_state, submit_answer_btn, user_answers_state, result_area, confidence_slider, answer_area, analysis_area, guides]
+    )
+
+    submit_answer_btn.click(display_results, inputs=[index_state, questions_state], outputs=[result_area])
+    
+# Launch the app
+# app.launch(share=False, allowed_paths=["/"])
+from starlette.middleware.cors import CORSMiddleware
+
+# Define the FastAPI app
 app = FastAPI()
 
-# create a static directory to store the static files
-static_dir = Path('./static')
-static_dir.mkdir(parents=True, exist_ok=True)
+@app.middleware("http")
+async def add_csp_header(request, call_next):
+    response = await call_next(request)
+    response.headers['Content-Security-Policy'] = "frame-ancestors 'self' https://*.azurewebsites.net"
+    return response
+
+@app.middleware("https")
+async def add_csp_header(request, call_next):
+    response = await call_next(request)
+    response.headers['Content-Security-Policy'] = "frame-ancestors 'self' https://*.azurewebsites.net"
+    return response
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Adjust this in production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Define paths for static files
+app.mount("/static", StaticFiles(directory="."), name="static")
+
+# Define the navigation HTML template with corrected styling
+nav_html = '''
+<div style="background-color: #40E0D0; padding: 10px 20px; display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box;">
+    <a href="/" style="color: black; margin: 0 15px; text-decoration: none; font-size: 18px; font-weight: bold; display: flex; align-items: center;">
+        <img src="/static/Subject.png" alt="Deep Quizzer Logo" width="25" height="25" style="margin-right: 10px;" />
+        Deep Quizzer
+    </a>
+    <a href="/about" style="color: black; margin: 0 15px; text-decoration: none; font-size: 18px; font-weight: bold; display: flex; align-items: center;">About</a>
+</div>
+'''
 
-# mount FastAPI StaticFiles server
-app.mount("/static", StaticFiles(directory=static_dir), name="static")
+# Define the main page HTML
+index_html = f'''
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Deep Quizzer</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        body {{
+            font-family: 'Montserrat', sans-serif;
+            margin: 0; /* Remove default margin */
+        }}
+        iframe {{
+            margin-top: 50px; /* Prevent iframe content from being hidden under the navbar */
+        }}
+    </style>
+</head>
+<body>
+    {nav_html}
+    <div>
+        <iframe src="/gradioapp" style="border: 0; width: 100%; height: calc(100vh - 50px);"></iframe>
+    </div>
+</body>
+'''
 
-# Gradio code
-def predict(text_input):
-    file_name = f"{datetime.utcnow().strftime('%s')}.html"
-    file_path = static_dir / file_name
-    print(file_path)
-    with open(file_path, "w") as f:
-        f.write(f"""<h2>Hello {text_input} </h2>
-        <h3>{file_name}</h3>
-        """)
+# Define the about page HTML
+about_html = f'''
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Deep Quizzer</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        body {{
+            font-family: 'Montserrat', sans-serif;
+            margin: 0; /* Remove default margin */
+        }}
+    </style>
+</head>
+<body>
+    {nav_html}
+    <div style="padding: 70px 20px 20px;"> <!-- Adjust padding to account for the navbar height -->
+        <h1>About Deep Quizzer</h1>
+        <p>Deep Quizzer is an interactive quiz platform designed to test your knowledge and awareness. You can explore different categories, answer questions, and gain insights into your confidence and accuracy levels. The platform helps identify areas where you excel and where you may need improvement.</p>
+    </div>
+</body>
+'''
 
-    return f'<a href="/static/{file_name}" target="_blank">{file_name}</a>'
 
 
-with gr.Blocks() as block:
-    text_input = gr.Textbox(label="Name")
-    markdown = gr.Markdown(label="Output Box")
-    new_btn = gr.Button("New")
-    new_btn.click(fn=predict, inputs=[text_input], outputs=[markdown])
+# Mount Gradio app
+app = gr.mount_gradio_app(app, demo, path="/gradioapp", allowed_paths=["/"], root_path="deploy/")
 
-# mount Gradio app to FastAPI app
-app = gr.mount_gradio_app(app, block, path="/")
+# Define the route for the main page
+@app.get("/", response_class=HTMLResponse)
+async def index():
+    return index_html
 
+# Define the route for the about page
+@app.get("/about", response_class=HTMLResponse)
+async def about():
+    return about_html
 # serve the app
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=7860)