Refactor AI integration and enhance quiz functionality with validation

.gitignore

@@ -2,4 +2,6 @@ env/
 .env
 .env.*
 .env.local
-__pycache__/
+__pycache__/
+.vscode/
+test.py

ai.py

@@ -0,0 +1,85 @@
+import os
+from openai import OpenAI
+import modal
+from dotenv import load_dotenv
+
+load_dotenv()
+
+class Colors:
+    """ANSI color codes for terminal output formatting."""
+    GREEN = "\033[0;32m"
+    RED = "\033[0;31m" 
+    BLUE = "\033[0;34m"
+    GRAY = "\033[0;90m"
+    BOLD = "\033[1m"
+    END = "\033[0m"
+
+
+def ask_ai(
+    prompt, 
+    system_prompt,
+    temperature=0.7,
+    max_tokens=None,
+    stream=True,
+    verbose=False
+):
+    """
+    Send a prompt to the AI model and get a response.
+    
+    Args:
+        prompt (str): The user prompt to send to the AI
+        system_prompt (str): The system instructions for the AI
+        model (str): The model name to use
+        temperature (float): Controls randomness (0.0-1.0)
+        max_tokens (int): Maximum tokens in the response
+        stream (bool): Whether to stream the response
+        verbose (bool): Whether to print status messages
+        
+    Returns:
+        str: The AI's response text
+    """
+    
+    # Create OpenAI client and set up the connection to Modal
+    API_KEY = os.getenv("Modal_API_KEY")
+    client = OpenAI(api_key=API_KEY)
+    
+    # Set base URL to point to our Modal-deployed endpoint
+    client.base_url = f"https://abhinav77642--llama-3-1-8b-instruct-serve.modal.run/v1"
+    
+    # Set up the messages for the conversation
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": prompt}
+    ]
+    
+    # Set up the completion parameters
+    completion_args = {
+        "model": "neuralmagic/Meta-Llama-3.1-8B-Instruct-quantized.w4a16",
+        "messages": messages,
+        "temperature": temperature,
+        "max_tokens": max_tokens,
+        "stream": stream
+    }
+    
+    # Remove None values
+    completion_args = {k: v for k, v in completion_args.items() if v is not None}
+    
+    try:
+        response = client.chat.completions.create(**completion_args)
+        
+        # Handle the response based on streaming or non-streaming mode
+        if stream:
+            result = ""
+            for chunk in response:
+                if chunk.choices and chunk.choices[0].delta.content:
+                    content = chunk.choices[0].delta.content
+                    result += content
+            
+            return result
+        else:
+            result = response.choices[0].message.content
+            return result
+            
+    except Exception as e:
+        error_msg = f"Error during API call: {e}"
+        return f"Error: {error_msg}"

app.py

@@ -1,42 +1,16 @@
-import os
 import json
 import gradio as gr
 import PyPDF2 as pypdf
-from prompts import prompts
 from stylesheet import style
 from dotenv import load_dotenv
-from azure.ai.inference import ChatCompletionsClient
-from azure.ai.inference.models import SystemMessage, UserMessage
-from azure.core.credentials import AzureKeyCredential
+from prompts import prompts
+from ai import ask_ai
 
 load_dotenv()
 
 css, js = style()
 
 
-# AI Response Generation Function
-def ai(system_prompt, user_prompt):
-    endpoint = "https://abhin-marwbf2g-eastus2.cognitiveservices.azure.com/openai/deployments/gpt-4o"
-    model_name = "gpt-4o"
-    api_key = os.getenv("API_KEY")
-    client = ChatCompletionsClient(
-        endpoint=endpoint,
-        credential=AzureKeyCredential(api_key),
-    )
-    response = client.complete(
-        messages=[
-            SystemMessage(content=system_prompt),
-            UserMessage(content=user_prompt),
-        ],
-        max_tokens=4096,
-        temperature=1.0,
-        top_p=1.0,
-        model=model_name,
-    )
-    # print("---------AI RESPONSE RECEIVED-----------")
-    return response.choices[0].message.content
-
-
 # PDF To Text Conversion Function
 def convertPdfIntoText(file):
     if file is None:
@@ -50,79 +24,109 @@ def convertPdfIntoText(file):
 
 
 # Gradio Interface Setup
-with gr.Blocks(title="Quizy", css=css, head=js) as demo:
+with gr.Blocks(title="Quizy", css=css, head=js) as app:
     gr.Markdown("# Quizy: Quiz Generator")
     gr.Markdown("Upload a PDF file to generate a quiz based on its content.")
 
     file_input = gr.File(label="Upload PDF File", file_types=[".pdf"])
-    submit_btn = gr.Button("Generate Quiz", visible=True, elem_id="generate-btn")
+    generate_btn = gr.Button("Generate Quiz", visible=True, elem_id="generate-btn")
 
     with gr.Accordion("Quiz", open=False, visible=False) as quiz_accordion:
         output_container = gr.HTML()
+        submit_btn = gr.Button("Submit", elem_id="submit-btn", visible=False)
 
-    # Main Function
-    def generate_quiz(file):
-        if file is None:
-            return "<p>No file uploaded.</p>", gr.Accordion(visible=False)
+        def generate_quiz(file):
+            if file is None:
+                return "<p>No file uploaded.</p>", gr.Accordion(visible=False)
 
-        inputData = convertPdfIntoText(file)
+            inputData = convertPdfIntoText(file)
 
-        systemPrompt, userPrompt = prompts(inputData)
-        response = ai(systemPrompt, userPrompt)
+            systemPrompt, userPrompt = prompts(inputData)
+            response = ask_ai(systemPrompt, userPrompt)
 
-        clean_response = response.strip().removeprefix("```json").removesuffix("```")
-        clean_response = clean_response.strip()
-        quiz_data = json.loads(clean_response)
+            clean_response = (
+                response.strip().removeprefix("```json").removesuffix("```")
+            )
+            clean_response = clean_response.strip()
+            quiz_data = json.loads(clean_response)
 
-        html = "<div class='quiz-container'>"
+            html = "<div class='quiz-container'>"
+            html += "<form id='quiz-form' method='post' onsubmit='return false;'>"
 
-        # Store the answers in a separate div for JavaScript access
-        answers_json = {
-            str(i): question["answer"] for i, question in enumerate(quiz_data["quiz"])
-        }
-        html += f"<div id='quiz-answers' style='display:none;'>{json.dumps(answers_json)}</div>"
+            for i, question in enumerate(quiz_data["quiz"]):
+                question_type = question["type"]
 
-        for i, question in enumerate(quiz_data["quiz"]):
-            question_type = question["type"]
+                answer_json = json.dumps(question["answer"]).replace('"', "&quot;")
+                html += f"<div class='question' data-id='{i}' data-type='{question_type}' data-answer='{answer_json}'>"
+                html += f"<h3>Question {i+1}: {question['question']}</h3>"
 
-            answer_json = json.dumps(question["answer"]).replace('"', "&quot;")
-            html += f"<div class='question' data-id='{i}' data-type='{question_type}' data-answer='{answer_json}'>"
-            html += f"<h3>Question {i+1}: {question['question']}</h3>"
-
-            if question_type == "single_choice":
-                if "options" in question:
+                if question_type == "single_choice":
+                    if "options" in question:
+                        html += "<div class='options'>"
+                        for option in question["options"]:
+                            html += f"<div><input type='radio' name='q{i}' value='{option}'> {option}</div>"
+                        html += "</div>"
+                elif question_type == "true_false":
                     html += "<div class='options'>"
-                    for option in question["options"]:
-                        html += f"<div><input type='radio' name='q{i}' value='{option}'> {option}</div>"
+                    html += (
+                        f"<div><input type='radio' name='q{i}' value='True'> True</div>"
+                    )
+                    html += f"<div><input type='radio' name='q{i}' value='False'> False</div>"
                     html += "</div>"
-            if question_type == "true_false":
-                html += "<div class='options'>"
-                html += "<div><input type='radio' name='q{i}' value='True'> True</div>"
-                html += (
-                    "<div><input type='radio' name='q{i}' value='False'> False</div>"
-                )
+                elif question_type == "multiple_choice":
+                    if "options" in question:
+                        html += "<div class='options'>"
+                        for option in question["options"]:
+                            html += f"<div><input type='checkbox' name='q{i}[]' value='{option}'> {option}</div>"
+                        html += "</div>"
+                elif question_type == "fill_in_the_blank":
+                    html += (
+                        "<input type='text' placeholder='Enter your answer here...'>"
+                    )
+
                 html += "</div>"
-            elif question_type == "multiple_choice":
-                if "options" in question:
-                    html += "<div class='options'>"
-                    for option in question["options"]:
-                        html += f"<div><input type='checkbox' name='q{i}[]' value='{option}'> {option}</div>"
-                    html += "</div>"
-            elif question_type == "fill_in_the_blank":
-                html += "<input type='text' placeholder='Enter your answer here...'>"
 
+            # Updated button to use validateForm first and then call checkAnswers if validation passes
+            html += "<button type='button' class='submit-btn' onclick='if(validateForm()) checkAnswers(event);'>Submit Quiz</button>"
+            html += "</form>"  # Close the form
+            html += "<div id='result'></div>"
             html += "</div>"
+            html += "<details id='quiz-answers' style='display:none;'>"
+            html += "<summary><h2>Solutions:</h2></summary>"
+            html += "<div class='answers-container'>"
+
+            for i, question in enumerate(quiz_data["quiz"]):
+                question_type = question["type"]
+                html += "<div class='answer-item'>"
+                html += f"<h3>Question {i+1}: {question['question']}</h3>"
+
+                # Format the answer based on question type
+                if question_type == "multiple_choice":
+                    if isinstance(question["answer"], list):
+                        answer_text = ", ".join(question["answer"])
+                        html += f"<p><strong>Correct Answer:</strong> {answer_text}</p>"
+                    else:
+                        html += f"<p><strong>Correct Answer:</strong> {question['answer']}</p>"
+                elif question_type == "fill_in_the_blank":
+                    html += (
+                        f"<p><strong>Correct Answer:</strong> {question['answer']}</p>"
+                    )
+                else:  # single_choice or true_false
+                    html += (
+                        f"<p><strong>Correct Answer:</strong> {question['answer']}</p>"
+                    )
+
+                html += "</div>"
 
-        html += "<button class='submit-btn' onclick='checkAnswers()'>Submit</button>"
-        html += "<div id='result'></div>"
-        html += "</div>"
+            html += "</div>"  # Close answers-container
+            html += "</details>"  # Close quiz-answers
 
-        return html, gr.Accordion(visible=True)
+            return html, gr.Accordion(visible=True)
 
-    submit_btn.click(
+    generate_btn.click(
         fn=generate_quiz,
         inputs=file_input,
         outputs=[output_container, quiz_accordion],
     )
 
-demo.launch()
+app.launch()

stylesheet.py

@@ -7,6 +7,34 @@ def style():
                 border: 1px solid #ddd;
                 border-radius: 5px;
                 margin-top: 20px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                }
+             .submit-btn.disabled {
+                background-color: #cccccc;
+                color: #666666;
+                cursor: not-allowed;
+                opacity: 0.7;
+                }
+             .validation-alert {
+                background-color: #ffdddd;
+                color: #990000;
+                padding: 10px;
+                margin-bottom: 15px;
+                border-radius: 5px;
+                font-weight: bold;
+                text-align: center;
+                animation: fadeIn 0.5s;
+                }
+             .invalid-question {
+                border: 2px solid #ff0000;
+                padding: 10px;
+                border-radius: 5px;
+                margin-bottom: 10px;
+                }
+             @keyframes fadeIn {
+                0% { opacity: 0; }
+                100% { opacity: 1; }
                 }
              #result {
                 display: none;
@@ -22,10 +50,143 @@ def style():
                 color: #333333;
                 border-radius: 5px;
                 }
+             #quiz-answers {
+                margin-top: 30px;
+                padding: 20px;
+                background-color: #dfdfdf;
+                border: 1px solid #ddd;
+                border-radius: 5px;
+             }
+             #quiz-answers summary {
+                display: inline-block;
+                padding-bottom: 5px;
+                cursor: pointer;
+             }
+             #quiz-answers summary, #quiz-answers h2 {
+                color: #383838;
+             }
+             .answers-container {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+             }
+             
+             .answer-item {
+                padding: 15px;
+                background-color: #e1ece4;
+                border: 2px solid lightgreen;
+                border-radius: 5px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+             }
+             
+             .answer-item h3 {
+                margin-top: 0;
+                color: #333;
+                font-size: 18px;
+             }
+             
+             .answer-item p {
+                margin-bottom: 0;
+                color: #009214;
+                font-size: 16px;
+                font-weight: 500;
+             }
+             .answer-item p strong {
+                color: #1636d5;
+             }
     """
     js = """
             <script>
-            function checkAnswers() {
+            function validateForm() {
+                const questions = document.querySelectorAll(".question");
+                let isValid = true;
+                
+                questions.forEach((question) => {
+                    const questionType = question.getAttribute("data-type");
+                    const inputs = question.querySelectorAll("input");
+                    
+                    if (questionType === "single_choice" || questionType === "true_false") {
+                        // Check if at least one radio button is selected
+                        let hasChecked = false;
+                        inputs.forEach((input) => {
+                            if (input.checked) {
+                                hasChecked = true;
+                            }
+                        });
+                        if (!hasChecked) {
+                            isValid = false;
+                            // Highlight the question that needs attention
+                            question.style.border = "2px solid red";
+                            question.style.padding = "10px";
+                            question.style.borderRadius = "5px";
+                        } else {
+                            question.style.border = "none";
+                            question.style.padding = "0";
+                        }
+                    } else if (questionType === "multiple_choice") {
+                        // Check if at least one checkbox is selected
+                        let hasChecked = false;
+                        inputs.forEach((input) => {
+                            if (input.checked) {
+                                hasChecked = true;
+                            }
+                        });
+                        if (!hasChecked) {
+                            isValid = false;
+                            question.style.border = "2px solid red";
+                            question.style.padding = "10px";
+                            question.style.borderRadius = "5px";
+                        } else {
+                            question.style.border = "none";
+                            question.style.padding = "0";
+                        }
+                    } else if (questionType === "fill_in_the_blank") {
+                        // Check if the text input has a value
+                        if (inputs[0].value.trim() === "") {
+                            isValid = false;
+                            question.style.border = "2px solid red";
+                            question.style.padding = "10px";
+                            question.style.borderRadius = "5px";
+                        } else {
+                            question.style.border = "none";
+                            question.style.padding = "0";
+                        }
+                    }
+                });
+                
+                return isValid;
+            }
+            
+            function checkAnswers(event) {
+                event.preventDefault();
+                
+                // First validate the form
+                if (!validateForm()) {
+                    // Show an alert message
+                    const alertDiv = document.createElement('div');
+                    alertDiv.className = 'validation-alert';
+                    alertDiv.innerHTML = '<p>Please answer all questions before submitting!</p>';
+                    alertDiv.style.backgroundColor = '#ffdddd';
+                    alertDiv.style.color = '#990000';
+                    alertDiv.style.padding = '10px';
+                    alertDiv.style.borderRadius = '5px';
+                    alertDiv.style.marginBottom = '15px';
+                    alertDiv.style.fontWeight = 'bold';
+                    alertDiv.style.textAlign = 'center';
+                    
+                    // Insert at the top of the form
+                    const form = document.getElementById('quiz-form');
+                    const existingAlert = document.querySelector('.validation-alert');
+                    if (existingAlert) {
+                        form.removeChild(existingAlert);
+                    }
+                    form.insertBefore(alertDiv, form.firstChild);
+                    
+                    // Scroll to the top
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                    return;
+                }
+                
                 let score = 0;
                 let total = 0;
                 const questions = document.querySelectorAll(".question");
@@ -75,8 +236,18 @@ def style():
                       score++;
                     }
                   }
+                });                // Remove any validation alerts once submitted successfully
+                const existingAlert = document.querySelector('.validation-alert');
+                if (existingAlert) {
+                    existingAlert.remove();
+                }
+                
+                // Remove any highlight on questions
+                document.querySelectorAll('.question').forEach(q => {
+                    q.style.border = 'none';
+                    q.style.padding = '0';
                 });
-
+                
                 // Display the result
                 resultElement.style.display = "block";
                 if (score === total) {
@@ -94,7 +265,9 @@ def style():
                 resultElement.style.border = "1px solid #ddd";
                 resultElement.style.borderRadius = "5px";
                 resultElement.style.marginTop = "20px";
+                answerContainer = document.getElementById('quiz-answers');
+                answerContainer.style.display = 'block';
             }
             </script>
     """
-    return css, js
+    return css, js