Spaces:

shukdevdatta123
/

ECCA

Running on Zero

App Files Files Community

shukdevdatta123 commited on May 25

Commit

ca71860

verified ·

1 Parent(s): d4a7201

Update app.py

Browse files

Files changed (1) hide show

app.py +564 -199

app.py CHANGED Viewed

@@ -169,7 +169,7 @@ def generate_content(prompt: str, max_tokens: int = 2000) -> str:
             messages=[
                 {
                     "role": "system",
-                    "content": "You are an expert educational content creator. Create comprehensive, engaging, and pedagogically sound educational materials based on the provided document content."
                 },
                 {
                     "role": "user",
@@ -189,92 +189,296 @@ def generate_content(prompt: str, max_tokens: int = 2000) -> str:
         print(f"API Error: {error_msg}")  # Debug print
         return error_msg
 # Content generation functions with @spaces.GPU decorator
 @spaces.GPU
 def generate_summary():
     """Generate comprehensive summary"""
-    prompt = """Create a comprehensive summary of this document with the following structure:
-    ## 📋 Executive Summary
-    Provide a brief overview in 2-3 sentences.
-    ## 🎯 Key Points
-    List the main concepts, ideas, or arguments presented.
-    ## 📚 Detailed Summary
-    Provide a thorough summary organized by topics or sections.
-    ## 💡 Important Takeaways
-    Highlight the most crucial information students should remember.
     """
     return generate_content(prompt)
 @spaces.GPU
 def generate_study_notes():
     """Generate structured study notes"""
-    prompt = """Create comprehensive study notes from this document with:
-    ## 📖 Study Notes
-    ### 🔑 Key Concepts
-    - Define important terms and concepts
-    - Explain their significance
-    ### 📊 Main Topics
-    Organize content into clear sections with:
-    - Topic headings
-    - Key points under each topic
-    - Supporting details and examples
-    ### 🧠 Memory Aids
-    - Create mnemonics for complex information
-    - Suggest visualization techniques
-    - Provide connection points between concepts
-    ### ⚡ Quick Review Points
-    - Bullet points for rapid review
-    - Essential facts and figures
     """
     return generate_content(prompt)
 @spaces.GPU
 def generate_quiz():
     """Generate quiz questions"""
-    prompt = """Create a comprehensive quiz based on this document:
-    ## 📝 Quiz Questions
-    ### Multiple Choice Questions (5 questions)
-    For each question, provide:
-    - Clear question
-    - 4 options (A, B, C, D)
-    - Correct answer
-    - Brief explanation
-    ### Short Answer Questions (5 questions)
-    - Questions requiring 2-3 sentence answers
-    - Cover key concepts and applications
-    ### Essay Questions (2 questions)
-    - Thought-provoking questions requiring detailed responses
-    - Focus on analysis, synthesis, or evaluation
-    ### Answer Key
-    Provide all correct answers with explanations.
     """
     return generate_content(prompt, max_tokens=3000)
 @spaces.GPU
 def generate_flashcards():
-    """Generate flashcards"""
-    prompt = """Create 15-20 flashcards based on this document:
-    ## 🎴 Flashcards
-    Format each flashcard as:
-    **Card X:**
-    **Front:** [Question/Term]
-    **Back:** [Answer/Definition/Explanation]
     Include flashcards for:
     - Key terms and definitions
@@ -283,148 +487,202 @@ def generate_flashcards():
     - Cause and effect relationships
     - Applications and examples
-    Make questions clear and answers comprehensive but concise.
     """
     return generate_content(prompt, max_tokens=2500)
 @spaces.GPU
 def generate_mind_map():
     """Generate mind map structure"""
-    prompt = """Create a detailed mind map structure for this document:
-    ## 🧠 Mind Map Structure
-    **Central Topic:** [Main subject of the document]
-    ### Primary Branches:
-    For each main topic, create branches with:
-    - **Branch 1:** [Topic Name]
-      - Sub-branch 1.1: [Subtopic]
-        - Detail 1.1.1
-        - Detail 1.1.2
-      - Sub-branch 1.2: [Subtopic]
-        - Detail 1.2.1
-        - Detail 1.2.2
-    ### Connections:
-    - Identify relationships between different branches
-    - Note cross-references and dependencies
-    - Highlight cause-effect relationships
-    ### Visual Elements Suggestions:
-    - Color coding recommendations
-    - Symbol suggestions for different types of information
-    - Emphasis techniques for key concepts
     """
     return generate_content(prompt)
 @spaces.GPU
 def generate_lesson_plan():
     """Generate lesson plan"""
-    prompt = """Create a detailed lesson plan based on this document:
-    ## 📚 Lesson Plan
-    ### Learning Objectives
-    By the end of this lesson, students will be able to:
-    - [Specific, measurable objectives]
-    ### Prerequisites
-    - Required background knowledge
-    - Recommended prior reading
-    ### Lesson Structure (60 minutes)
-    **Introduction (10 minutes)**
-    - Hook/attention grabber
-    - Learning objectives overview
-    **Main Content (35 minutes)**
-    - Key concepts presentation
-    - Activities and examples
-    - Discussion points
-    **Practice & Application (10 minutes)**
-    - Practice exercises
-    - Real-world applications
-    **Wrap-up & Assessment (5 minutes)**
-    - Summary of key points
-    - Quick assessment questions
-    ### Materials Needed
-    - List of required resources
-    ### Assessment Methods
-    - How to evaluate student understanding
-    ### Homework/Extension Activities
-    - Additional practice opportunities
     """
     return generate_content(prompt, max_tokens=2500)
 @spaces.GPU
 def generate_concept_explanations():
     """Generate detailed concept explanations"""
-    prompt = """Provide detailed explanations of key concepts from this document:
-    ## 🔍 Concept Deep Dive
-    For each major concept, provide:
-    ### Concept Name
-    **Definition:** Clear, precise definition
-    **Explanation:** Detailed explanation in simple terms
-    **Examples:** Real-world examples and applications
-    **Analogies:** Helpful comparisons to familiar concepts
-    **Common Misconceptions:** What students often get wrong
-    **Connection to Other Concepts:** How it relates to other topics
-    **Practice Application:** Simple exercise or question
-    ---
-    Repeat this structure for all major concepts in the document.
     """
     return generate_content(prompt, max_tokens=3000)
 @spaces.GPU
 def generate_practice_problems():
     """Generate practice problems"""
-    prompt = """Create practice problems based on this document:
-    ## 💪 Practice Problems
-    ### Beginner Level (5 problems)
-    - Basic application of concepts
-    - Direct recall and simple calculations
-    - Step-by-step solutions provided
-    ### Intermediate Level (5 problems)
-    - Multi-step problems
-    - Requires understanding of relationships
-    - Guided solutions with explanations
-    ### Advanced Level (3 problems)
-    - Complex scenarios
-    - Requires analysis and synthesis
-    - Detailed solution strategies
-    ### Challenge Problems (2 problems)
-    - Extension beyond document content
-    - Creative application
-    - Multiple solution approaches
-    **For each problem, include:**
-    - Clear problem statement
-    - Required formulas/concepts
-    - Step-by-step solution
     - Common mistakes to avoid
     """
     return generate_content(prompt, max_tokens=3500)
@@ -451,9 +709,13 @@ def create_interface():
     with gr.Blocks(title="📚 Educational Content Creator Assistant", theme=gr.themes.Soft()) as app:
         gr.Markdown("""
         # 📚 Educational Content Creator Assistant
-        Transform your documents into comprehensive educational materials using AI!
-        **Features:** Study Notes • Quizzes • Flashcards • Mind Maps • Lesson Plans • Practice Problems & More!
         *Powered by ZeroGPU for enhanced performance*
         """)
@@ -495,7 +757,7 @@ def create_interface():
                     quiz_btn = gr.Button("📝 Create Quiz", variant="primary")
                 with gr.Row():
-                    flashcards_btn = gr.Button("🎴 Flashcards", variant="secondary")
                     mindmap_btn = gr.Button("🧠 Mind Map", variant="secondary")
                     lesson_btn = gr.Button("📚 Lesson Plan", variant="secondary")
@@ -503,13 +765,16 @@ def create_interface():
                     concepts_btn = gr.Button("🔍 Concept Explanations", variant="secondary")
                     problems_btn = gr.Button("💪 Practice Problems", variant="secondary")
-                output = gr.Textbox(
-                    label="Generated Content",
-                    lines=20,
-                    max_lines=30,
-                    placeholder="Generated educational content will appear here...",
-                    show_copy_button=True
                 )
         gr.Markdown("""
         ### 📋 How to Use:
@@ -517,27 +782,40 @@ def create_interface():
         2. **Configure:** Enter your API key and click "Configure API"
         3. **Upload:** Upload a PDF or DOCX document (make sure it contains readable text)
         4. **Process:** Click "Process Document" to extract text
-        5. **Generate:** Choose any educational content type to generate
-        ### 🎯 Content Types:
-        - **Summary:** Comprehensive overview with key points
-        - **Study Notes:** Structured notes with key concepts and memory aids
-        - **Quiz:** Multiple choice, short answer, and essay questions with answers
-        - **Flashcards:** Question-answer pairs for memorization
-        - **Mind Map:** Visual structure of document concepts
-        - **Lesson Plan:** Complete teaching plan with objectives and activities
-        - **Concept Explanations:** Deep dive into key concepts with examples
-        - **Practice Problems:** Graded exercises from beginner to advanced
         ### 💡 Tips:
         - Make sure your PDF contains selectable text (not just images)
         - For best results, use documents with clear structure and headings
         - The app works with academic papers, textbooks, reports, and study materials
         ### ⚡ Performance Note:
         This app uses ZeroGPU for enhanced processing. Functions will automatically utilize GPU resources when needed.
         """)
         # Event handlers
         def setup_api_and_update_status(api_key):
             result = setup_client(api_key)
@@ -560,15 +838,102 @@ def create_interface():
             outputs=[process_status, doc_status]
         )
-        # Content generation button handlers
-        summary_btn.click(generate_summary, outputs=[output])
-        notes_btn.click(generate_study_notes, outputs=[output])
-        quiz_btn.click(generate_quiz, outputs=[output])
-        flashcards_btn.click(generate_flashcards, outputs=[output])
-        mindmap_btn.click(generate_mind_map, outputs=[output])
-        lesson_btn.click(generate_lesson_plan, outputs=[output])
-        concepts_btn.click(generate_concept_explanations, outputs=[output])
-        problems_btn.click(generate_practice_problems, outputs=[output])
         # Update status on app load
         def update_initial_status():

             messages=[
                 {
                     "role": "system",
+                    "content": "You are an expert educational content creator. Create comprehensive, engaging, and pedagogically sound educational materials based on the provided document content. Format your response using proper HTML tags for better presentation."
                 },
                 {
                     "role": "user",
         print(f"API Error: {error_msg}")  # Debug print
         return error_msg
+def create_download_file(content: str, filename: str) -> str:
+    """Create downloadable HTML file"""
+    html_template = f"""
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Educational Content - {filename}</title>
+        <style>
+            body {{
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                line-height: 1.6;
+                margin: 0;
+                padding: 20px;
+                background-color: #f5f5f5;
+            }}
+            .container {{
+                max-width: 1200px;
+                margin: 0 auto;
+                background: white;
+                padding: 30px;
+                border-radius: 10px;
+                box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            }}
+            h1, h2, h3, h4, h5, h6 {{
+                color: #2c3e50;
+                margin-top: 30px;
+                margin-bottom: 15px;
+            }}
+            .flashcard {{
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border-radius: 15px;
+                padding: 20px;
+                margin: 15px;
+                box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+                cursor: pointer;
+                transition: all 0.3s ease;
+                color: white;
+                position: relative;
+                min-height: 150px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }}
+            .flashcard:hover {{
+                transform: translateY(-5px);
+                box-shadow: 0 12px 35px rgba(0,0,0,0.25);
+            }}
+            .flashcard-front, .flashcard-back {{
+                text-align: center;
+            }}
+            .flashcard-back {{
+                display: none;
+            }}
+            .play-btn {{
+                position: absolute;
+                top: 10px;
+                right: 15px;
+                background: rgba(255,255,255,0.2);
+                border: none;
+                border-radius: 50%;
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
+                color: white;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }}
+            .play-btn:hover {{
+                background: rgba(255,255,255,0.3);
+                transform: scale(1.1);
+            }}
+            .quiz-question {{
+                background: #f8f9fa;
+                border-left: 4px solid #007bff;
+                padding: 15px;
+                margin: 15px 0;
+                border-radius: 5px;
+            }}
+            .answer-key {{
+                background: #d4edda;
+                border: 1px solid #c3e6cb;
+                padding: 15px;
+                border-radius: 5px;
+                margin: 10px 0;
+            }}
+            .concept-box {{
+                background: #fff3cd;
+                border: 1px solid #ffeaa7;
+                border-radius: 8px;
+                padding: 20px;
+                margin: 15px 0;
+            }}
+            .mind-map-branch {{
+                background: #e3f2fd;
+                border-left: 4px solid #2196f3;
+                padding: 15px;
+                margin: 10px 0;
+                border-radius: 5px;
+            }}
+            .print-btn {{
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: #007bff;
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 5px;
+                cursor: pointer;
+                font-size: 14px;
+            }}
+            @media print {{
+                .print-btn {{ display: none; }}
+                body {{ background: white; }}
+                .container {{ box-shadow: none; }}
+            }}
+        </style>
+    </head>
+    <body>
+        <button class="print-btn" onclick="window.print()">🖨️ Print</button>
+        <div class="container">
+            {content}
+        </div>
+        <script>
+            function toggleCard(cardId) {{
+                const front = document.getElementById(cardId + '-front');
+                const back = document.getElementById(cardId + '-back');
+                const btn = document.getElementById(cardId + '-btn');
+                if (front.style.display !== 'none') {{
+                    front.style.display = 'none';
+                    back.style.display = 'block';
+                    btn.innerHTML = '🔄';
+                }} else {{
+                    front.style.display = 'block';
+                    back.style.display = 'none';
+                    btn.innerHTML = '▶️';
+                }}
+            }}
+        </script>
+    </body>
+    </html>
+    """
+    # Save to temporary file
+    temp_filename = f"temp_{filename}.html"
+    with open(temp_filename, 'w', encoding='utf-8') as f:
+        f.write(html_template)
+    return temp_filename
 # Content generation functions with @spaces.GPU decorator
 @spaces.GPU
 def generate_summary():
     """Generate comprehensive summary"""
+    prompt = """Create a comprehensive summary of this document with proper HTML formatting:
+    Use these HTML tags for structure:
+    - <h1> for main title
+    - <h2> for section headers (Executive Summary, Key Points, etc.)
+    - <h3> for subsections
+    - <ul> and <li> for bullet points
+    - <p> for paragraphs
+    - <strong> for emphasis
+    - <div class="concept-box"> for important concepts
+    Structure:
+    <h1>📋 Document Summary</h1>
+    <h2>🎯 Executive Summary</h2>
+    <p>Provide a brief overview in 2-3 sentences.</p>
+    <h2>🔑 Key Points</h2>
+    <ul>
+    <li>List the main concepts, ideas, or arguments presented</li>
+    </ul>
+    <h2>📚 Detailed Summary</h2>
+    <p>Provide a thorough summary organized by topics or sections.</p>
+    <h2>💡 Important Takeaways</h2>
+    <div class="concept-box">
+    <p>Highlight the most crucial information students should remember.</p>
+    </div>
     """
     return generate_content(prompt)
 @spaces.GPU
 def generate_study_notes():
     """Generate structured study notes"""
+    prompt = """Create comprehensive study notes from this document using proper HTML formatting:
+    Use HTML structure with:
+    - <h1> for main title: Study Notes
+    - <h2> for major sections
+    - <h3> for subsections
+    - <ul><li> for lists
+    - <div class="concept-box"> for key concepts
+    - <strong> for important terms
+    Structure:
+    <h1>📖 Study Notes</h1>
+    <h2>🔑 Key Concepts</h2>
+    <div class="concept-box">
+    Define important terms and concepts with their significance
+    </div>
+    <h2>📊 Main Topics</h2>
+    Organize content into clear sections with topic headings, key points, and supporting details
+    <h2>🧠 Memory Aids</h2>
+    <ul>
+    <li>Mnemonics for complex information</li>
+    <li>Visualization techniques</li>
+    <li>Connection points between concepts</li>
+    </ul>
+    <h2>⚡ Quick Review Points</h2>
+    <ul>
+    <li>Essential facts and figures for rapid review</li>
+    </ul>
     """
     return generate_content(prompt)
 @spaces.GPU
 def generate_quiz():
     """Generate quiz questions"""
+    prompt = """Create a comprehensive quiz based on this document using HTML formatting:
+    <h1>📝 Quiz Questions</h1>
+    <h2>Multiple Choice Questions</h2>
+    For each question, use this format:
+    <div class="quiz-question">
+    <h3>Question 1:</h3>
+    <p>[Question text]</p>
+    <ol type="A">
+    <li>Option A</li>
+    <li>Option B</li>
+    <li>Option C</li>
+    <li>Option D</li>
+    </ol>
+    </div>
+    <h2>Short Answer Questions</h2>
+    <div class="quiz-question">
+    Questions requiring 2-3 sentence answers covering key concepts
+    </div>
+    <h2>Essay Questions</h2>
+    <div class="quiz-question">
+    Thought-provoking questions requiring detailed responses
+    </div>
+    <h2>📚 Answer Key</h2>
+    <div class="answer-key">
+    <h3>Multiple Choice Answers:</h3>
+    <p>Provide all correct answers with explanations</p>
+    </div>
+    Create 5 multiple choice, 5 short answer, and 2 essay questions.
     """
     return generate_content(prompt, max_tokens=3000)
 @spaces.GPU
 def generate_flashcards():
+    """Generate interactive flashcards"""
+    prompt = """Create 15-20 interactive flashcards based on this document.
+    Format each flashcard using this exact HTML structure:
+    <h1>🎴 Interactive Flashcards</h1>
+    <p><em>Click the play button (▶️) on each card to reveal the answer!</em></p>
+    <div class="flashcard" onclick="toggleCard('card1')">
+        <button class="play-btn" id="card1-btn">▶️</button>
+        <div class="flashcard-front" id="card1-front">
+            <h3>Card 1</h3>
+            <p><strong>[Question/Term]</strong></p>
+        </div>
+        <div class="flashcard-back" id="card1-back">
+            <h3>Answer</h3>
+            <p>[Answer/Definition/Explanation]</p>
+        </div>
+    </div>
+    Continue this pattern for each flashcard, incrementing the card numbers (card2, card3, etc.).
     Include flashcards for:
     - Key terms and definitions
     - Cause and effect relationships
     - Applications and examples
+    Make questions clear and answers comprehensive but concise. Use proper HTML formatting throughout.
     """
     return generate_content(prompt, max_tokens=2500)
 @spaces.GPU
 def generate_mind_map():
     """Generate mind map structure"""
+    prompt = """Create a detailed mind map structure for this document using HTML:
+    <h1>🧠 Mind Map Structure</h1>
+    <div class="concept-box">
+    <h2>Central Topic:</h2>
+    <p><strong>[Main subject of the document]</strong></p>
+    </div>
+    <h2>Primary Branches:</h2>
+    For each main topic, create branches using this structure:
+    <div class="mind-map-branch">
+    <h3>Branch 1: [Topic Name]</h3>
+    <ul>
+    <li><strong>Sub-branch 1.1:</strong> [Subtopic]
+        <ul>
+        <li>Detail 1.1.1</li>
+        <li>Detail 1.1.2</li>
+        </ul>
+    </li>
+    </ul>
+    </div>
+    <h2>🔗 Connections</h2>
+    <div class="concept-box">
+    <ul>
+    <li>Relationships between different branches</li>
+    <li>Cross-references and dependencies</li>
+    <li>Cause-effect relationships</li>
+    </ul>
+    </div>
+    <h2>🎨 Visual Elements Suggestions</h2>
+    <ul>
+    <li>Color coding recommendations</li>
+    <li>Symbol suggestions for different types of information</li>
+    <li>Emphasis techniques for key concepts</li>
+    </ul>
     """
     return generate_content(prompt)
 @spaces.GPU
 def generate_lesson_plan():
     """Generate lesson plan"""
+    prompt = """Create a detailed lesson plan based on this document using HTML formatting:
+    <h1>📚 Lesson Plan</h1>
+    <h2>🎯 Learning Objectives</h2>
+    <p>By the end of this lesson, students will be able to:</p>
+    <ul>
+    <li>[Specific, measurable objectives]</li>
+    </ul>
+    <h2>📋 Prerequisites</h2>
+    <div class="concept-box">
+    <ul>
+    <li>Required background knowledge</li>
+    <li>Recommended prior reading</li>
+    </ul>
+    </div>
+    <h2>⏰ Lesson Structure (60 minutes)</h2>
+    <h3>Introduction (10 minutes)</h3>
+    <ul>
+    <li>Hook/attention grabber</li>
+    <li>Learning objectives overview</li>
+    </ul>
+    <h3>Main Content (35 minutes)</h3>
+    <ul>
+    <li>Key concepts presentation</li>
+    <li>Activities and examples</li>
+    <li>Discussion points</li>
+    </ul>
+    <h3>Practice & Application (10 minutes)</h3>
+    <ul>
+    <li>Practice exercises</li>
+    <li>Real-world applications</li>
+    </ul>
+    <h3>Wrap-up & Assessment (5 minutes)</h3>
+    <ul>
+    <li>Summary of key points</li>
+    <li>Quick assessment questions</li>
+    </ul>
+    <h2>📦 Materials Needed</h2>
+    <ul>
+    <li>List of required resources</li>
+    </ul>
+    <h2>📊 Assessment Methods</h2>
+    <div class="answer-key">
+    <p>How to evaluate student understanding</p>
+    </div>
+    <h2>📝 Homework/Extension Activities</h2>
+    <ul>
+    <li>Additional practice opportunities</li>
+    </ul>
     """
     return generate_content(prompt, max_tokens=2500)
 @spaces.GPU
 def generate_concept_explanations():
     """Generate detailed concept explanations"""
+    prompt = """Provide detailed explanations of key concepts from this document using HTML:
+    <h1>🔍 Concept Deep Dive</h1>
+    For each major concept, use this structure:
+    <div class="concept-box">
+    <h2>[Concept Name]</h2>
+    <p><strong>Definition:</strong> Clear, precise definition</p>
+    <p><strong>Explanation:</strong> Detailed explanation in simple terms</p>
+    <p><strong>Examples:</strong> Real-world examples and applications</p>
+    <p><strong>Analogies:</strong> Helpful comparisons to familiar concepts</p>
+    <p><strong>Common Misconceptions:</strong> What students often get wrong</p>
+    <p><strong>Connection to Other Concepts:</strong> How it relates to other topics</p>
+    <p><strong>Practice Application:</strong> Simple exercise or question</p>
+    </div>
+    <hr>
+    Repeat this structure for all major concepts in the document using proper HTML formatting.
     """
     return generate_content(prompt, max_tokens=3000)
 @spaces.GPU
 def generate_practice_problems():
     """Generate practice problems"""
+    prompt = """Create practice problems based on this document using HTML formatting:
+    <h1>💪 Practice Problems</h1>
+    <h2>🟢 Beginner Level</h2>
+    <div class="quiz-question">
+    <h3>Problem 1:</h3>
+    <p>[Problem statement]</p>
+    <div class="answer-key">
+    <p><strong>Solution:</strong> Step-by-step solution provided</p>
+    </div>
+    </div>
+    <h2>🟡 Intermediate Level</h2>
+    <div class="quiz-question">
+    <h3>Problem 1:</h3>
+    <p>[Multi-step problem requiring understanding of relationships]</p>
+    <div class="answer-key">
+    <p><strong>Solution:</strong> Guided solutions with explanations</p>
+    </div>
+    </div>
+    <h2>🔴 Advanced Level</h2>
+    <div class="quiz-question">
+    <h3>Problem 1:</h3>
+    <p>[Complex scenarios requiring analysis and synthesis]</p>
+    <div class="answer-key">
+    <p><strong>Solution:</strong> Detailed solution strategies</p>
+    </div>
+    </div>
+    <h2>🏆 Challenge Problems</h2>
+    <div class="concept-box">
+    <h3>Challenge 1:</h3>
+    <p>[Extension beyond document content with creative application]</p>
+    <div class="answer-key">
+    <p><strong>Multiple Solution Approaches:</strong> Various ways to solve</p>
+    </div>
+    </div>
+    For each problem, include:
+    - Clear problem statement with HTML formatting
+    - Required formulas/concepts in <strong> tags
+    - Step-by-step solution in answer-key divs
     - Common mistakes to avoid
+    Create 5 beginner, 5 intermediate, 3 advanced, and 2 challenge problems.
     """
     return generate_content(prompt, max_tokens=3500)
     with gr.Blocks(title="📚 Educational Content Creator Assistant", theme=gr.themes.Soft()) as app:
         gr.Markdown("""
         # 📚 Educational Content Creator Assistant
+        Transform your documents into comprehensive educational materials using AI with interactive features!
+        **New Features:**
+        - 🎴 Interactive Flashcards with Play Buttons
+        - 📄 HTML Formatted Responses
+        - 💾 Download All Content as HTML Files
+        - 🖨️ Print-Ready Formats
         *Powered by ZeroGPU for enhanced performance*
         """)
                     quiz_btn = gr.Button("📝 Create Quiz", variant="primary")
                 with gr.Row():
+                    flashcards_btn = gr.Button("🎴 Interactive Flashcards", variant="secondary")
                     mindmap_btn = gr.Button("🧠 Mind Map", variant="secondary")
                     lesson_btn = gr.Button("📚 Lesson Plan", variant="secondary")
                     concepts_btn = gr.Button("🔍 Concept Explanations", variant="secondary")
                     problems_btn = gr.Button("💪 Practice Problems", variant="secondary")
+                # HTML output with download capability
+                output = gr.HTML(
+                    label="Generated Content (Interactive)",
+                    value="<p>Generated educational content will appear here with interactive features...</p>"
                 )
+                # Download buttons
+                with gr.Row():
+                    download_file = gr.File(label="📥 Download Content", visible=False)
+                    download_btn = gr.Button("💾 Prepare Download", variant="secondary", visible=False)
         gr.Markdown("""
         ### 📋 How to Use:
         2. **Configure:** Enter your API key and click "Configure API"
         3. **Upload:** Upload a PDF or DOCX document (make sure it contains readable text)
         4. **Process:** Click "Process Document" to extract text
+        5. **Generate:** Choose any educational content type to generate interactive HTML content
+        6. **Download:** Use the "Prepare Download" button to get an HTML file with all content
+        ### 🎯 Enhanced Content Types:
+        - **📋 Summary:** Comprehensive overview with styled HTML sections
+        - **📖 Study Notes:** Structured notes with highlighted key concepts
+        - **📝 Quiz:** Interactive quiz with styled questions and answer keys
+        - **🎴 Interactive Flashcards:** Click-to-flip cards with play buttons!
+        - **🧠 Mind Map:** Visual structure with styled branches
+        - **📚 Lesson Plan:** Complete teaching plan with time management
+        - **🔍 Concept Explanations:** Deep dive with styled concept boxes
+        - **💪 Practice Problems:** Graded exercises with solution reveals
+        ### ✨ New Interactive Features:
+        - **🎴 Flashcards:** Click the play button (▶️) to flip cards and see answers
+        - **📄 HTML Formatting:** All content now uses proper HTML styling
+        - **💾 Download:** Get complete HTML files with embedded CSS and JavaScript
+        - **🖨️ Print Ready:** Downloaded files include print-optimized styling
         ### 💡 Tips:
         - Make sure your PDF contains selectable text (not just images)
         - For best results, use documents with clear structure and headings
         - The app works with academic papers, textbooks, reports, and study materials
+        - Interactive flashcards work best when viewed in the HTML output
+        - Downloaded files can be opened in any web browser for offline use
         ### ⚡ Performance Note:
         This app uses ZeroGPU for enhanced processing. Functions will automatically utilize GPU resources when needed.
         """)
+        # Store the last generated content for download
+        last_content = gr.State("")
+        last_content_type = gr.State("")
         # Event handlers
         def setup_api_and_update_status(api_key):
             result = setup_client(api_key)
             outputs=[process_status, doc_status]
         )
+        # Enhanced content generation functions that return HTML and enable download
+        def generate_and_display_summary():
+            content = generate_summary()
+            return content, content, "summary", gr.update(visible=True)
+        def generate_and_display_notes():
+            content = generate_study_notes()
+            return content, content, "study_notes", gr.update(visible=True)
+        def generate_and_display_quiz():
+            content = generate_quiz()
+            return content, content, "quiz", gr.update(visible=True)
+        def generate_and_display_flashcards():
+            content = generate_flashcards()
+            return content, content, "flashcards", gr.update(visible=True)
+        def generate_and_display_mindmap():
+            content = generate_mind_map()
+            return content, content, "mind_map", gr.update(visible=True)
+        def generate_and_display_lesson():
+            content = generate_lesson_plan()
+            return content, content, "lesson_plan", gr.update(visible=True)
+        def generate_and_display_concepts():
+            content = generate_concept_explanations()
+            return content, content, "concept_explanations", gr.update(visible=True)
+        def generate_and_display_problems():
+            content = generate_practice_problems()
+            return content, content, "practice_problems", gr.update(visible=True)
+        # Download preparation function
+        def prepare_download(content, content_type):
+            if not content or content.startswith("❌"):
+                return None
+            # Create downloadable file
+            filename = f"educational_content_{content_type}"
+            temp_file = create_download_file(content, filename)
+            return temp_file
+        # Content generation button handlers with download capability
+        summary_btn.click(
+            generate_and_display_summary,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        notes_btn.click(
+            generate_and_display_notes,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        quiz_btn.click(
+            generate_and_display_quiz,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        flashcards_btn.click(
+            generate_and_display_flashcards,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        mindmap_btn.click(
+            generate_and_display_mindmap,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        lesson_btn.click(
+            generate_and_display_lesson,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        concepts_btn.click(
+            generate_and_display_concepts,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        problems_btn.click(
+            generate_and_display_problems,
+            outputs=[output, last_content, last_content_type, download_btn]
+        )
+        # Download button handler
+        def handle_download(content, content_type):
+            if content and not content.startswith("❌"):
+                temp_file = prepare_download(content, content_type)
+                return temp_file, gr.update(visible=True)
+            return None, gr.update(visible=False)
+        download_btn.click(
+            handle_download,
+            inputs=[last_content, last_content_type],
+            outputs=[download_file, download_file]
+        )
         # Update status on app load
         def update_initial_status():