Update app.py

app.py

@@ -21,12 +21,10 @@ def setup_client(api_key: str):
         if not api_key or api_key.strip() == "":
             return "❌ Please enter a valid API key"
             
-        # Test the API key by creating a client
         client = OpenAI(
             base_url="https://openrouter.ai/api/v1",
             api_key=api_key.strip(),
         )
-        # Store the API key globally
         API_KEY = api_key.strip()
         return "✅ API Key configured successfully!"
     except Exception as e:
@@ -68,7 +66,6 @@ def extract_text_from_docx(file_path: str) -> str:
             if paragraph.text.strip():
                 text += paragraph.text + "\n"
         
-        # Also extract text from tables
         for table in doc.tables:
             for row in table.rows:
                 for cell in row.cells:
@@ -83,26 +80,19 @@ def process_document(file):
     """Process uploaded document and extract text"""
     global DOCUMENT_TEXT
     
-    print(f"Processing file: {file}")  # Debug print
-    
     if file is None:
         DOCUMENT_TEXT = ""
         return "❌ No file uploaded", "❌ No document loaded"
     
     try:
         file_path = file.name if hasattr(file, 'name') else str(file)
-        print(f"File path: {file_path}")  # Debug print
         
-        # Check if file exists
         if not os.path.exists(file_path):
             DOCUMENT_TEXT = ""
             return "❌ File not found", "❌ No document loaded"
         
-        # Get file extension
         file_extension = file_path.lower().split('.')[-1]
-        print(f"File extension: {file_extension}")  # Debug print
         
-        # Extract text based on file type
         if file_extension == 'pdf':
             extracted_text = extract_text_from_pdf(file_path)
         elif file_extension in ['docx', 'doc']:
@@ -111,55 +101,43 @@ def process_document(file):
             DOCUMENT_TEXT = ""
             return "❌ Unsupported file format. Please upload PDF or DOCX files.", "❌ No document loaded"
         
-        print(f"Extracted text length: {len(extracted_text) if extracted_text else 0}")  # Debug print
-        
-        # Check if extraction was successful
         if extracted_text.startswith("Error"):
             DOCUMENT_TEXT = ""
             return extracted_text, "❌ No document loaded"
         
-        # Clean and set the global variable
         DOCUMENT_TEXT = extracted_text.strip()
         
-        if DOCUMENT_TEXT and len(DOCUMENT_TEXT) > 10:  # Minimum length check
+        if DOCUMENT_TEXT and len(DOCUMENT_TEXT) > 10:
             word_count = len(DOCUMENT_TEXT.split())
             char_count = len(DOCUMENT_TEXT)
             preview = DOCUMENT_TEXT[:300] + "..." if len(DOCUMENT_TEXT) > 300 else DOCUMENT_TEXT
             
             status_msg = f"✅ Document loaded ({word_count} words, {char_count} characters)"
             process_msg = f"✅ Document processed successfully!\n📄 Word count: {word_count}\n📝 Character count: {char_count}\n\n📖 Preview:\n{preview}"
-            
-            print(f"Document processed successfully. Word count: {word_count}")  # Debug print
             return process_msg, status_msg
         else:
             DOCUMENT_TEXT = ""
-            return "❌ Could not extract meaningful text from the document. The document might be empty, contain only images, or be corrupted.", "❌ No document loaded"
+            return "❌ Could not extract meaningful text from the document.", "❌ No document loaded"
             
     except Exception as e:
         DOCUMENT_TEXT = ""
-        error_msg = f"❌ Error processing document: {str(e)}"
-        print(f"Error: {error_msg}")  # Debug print
-        return error_msg, "❌ No document loaded"
+        return f"❌ Error processing document: {str(e)}", "❌ No document loaded"
 
 def generate_content(prompt: str, max_tokens: int = 2000) -> str:
     """Generate content using the AI model"""
     global DOCUMENT_TEXT, API_KEY
     
-    print(f"Generate content called. API_KEY exists: {bool(API_KEY)}, DOCUMENT_TEXT length: {len(DOCUMENT_TEXT) if DOCUMENT_TEXT else 0}")  # Debug print
-    
     if not API_KEY or API_KEY.strip() == "":
         return "❌ Please configure your API key first"
     
     if not DOCUMENT_TEXT or len(DOCUMENT_TEXT.strip()) < 10:
-        return "❌ Please upload and process a document first. Make sure the document contains readable text."
+        return "❌ Please upload and process a document first."
     
     try:
         client = create_client()
         if not client:
             return "❌ Failed to create API client"
         
-        print("Sending request to API...")  # Debug print
-        
         completion = client.chat.completions.create(
             extra_headers={
                 "HTTP-Referer": "https://educational-assistant.app",
@@ -169,11 +147,11 @@ 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. Format your response using proper HTML tags for better presentation, but do not include <html>, <head>, <body>, or code block markers like ```html or ```. Start directly with the content using tags like <h1>, <h2>, <p>, etc."
+                    "content": "You are an expert educational content creator. Create engaging educational materials based on the provided document content. Format your response using proper HTML tags, but do not include <html>, <head>, <body>, or code block markers. Start directly with the content using tags like <h1>, <h2>, <p>, etc."
                 },
                 {
                     "role": "user",
-                    "content": f"Document Content:\n{DOCUMENT_TEXT[:4000]}\n\n{prompt}"  # Limit document content to avoid token limits
+                    "content": f"Document Content:\n{DOCUMENT_TEXT[:4000]}\n\n{prompt}"
                 }
             ],
             max_tokens=max_tokens,
@@ -181,19 +159,14 @@ def generate_content(prompt: str, max_tokens: int = 2000) -> str:
         )
         
         result = completion.choices[0].message.content
-        print(f"API response received. Length: {len(result) if result else 0}")  # Debug print
-        
-        # Strip any unwanted code block markers if they sneak in
         result = result.replace("```html", "").replace("```", "").strip()
         return result
         
     except Exception as e:
-        error_msg = f"❌ Error generating content: {str(e)}"
-        print(f"API Error: {error_msg}")  # Debug print
-        return error_msg
+        return f"❌ Error generating content: {str(e)}"
 
 def create_download_file(content: str, filename: str) -> str:
-    """Create downloadable HTML file"""
+    """Create downloadable HTML file with full structure and interactivity"""
     html_template = f"""
     <!DOCTYPE html>
     <html lang="en">
@@ -222,48 +195,34 @@ def create_download_file(content: str, filename: str) -> str:
                 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);
+            .flashcard-slider {{
+                width: 100%;
+                max-width: 400px;
+                margin: 20px auto;
+                overflow: hidden;
+                position: relative;
                 cursor: pointer;
-                transition: all 0.3s ease;
+            }}
+            .slides {{
+                display: flex;
+                width: 200%;
+                transition: transform 0.3s ease;
+            }}
+            .slide {{
+                width: 50%;
+                box-sizing: border-box;
+                padding: 30px;
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                 color: white;
-                position: relative;
-                min-height: 150px;
+                border-radius: 15px;
+                min-height: 200px;
                 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);
+            .showing-answer .slides {{
+                transform: translateX(-50%);
             }}
             .quiz-question {{
                 background: #f8f9fa;
@@ -318,21 +277,10 @@ def create_download_file(content: str, filename: str) -> str:
             {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 && back && 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 = '▶️';
-                    }}
+            function toggleFlashcard(id) {{
+                const flashcard = document.getElementById(id);
+                if (flashcard) {{
+                    flashcard.classList.toggle('showing-answer');
                 }}
             }}
         </script>
@@ -340,14 +288,12 @@ def create_download_file(content: str, filename: str) -> str:
     </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"""
@@ -446,23 +392,24 @@ def generate_quiz():
 
 @spaces.GPU
 def generate_flashcards():
-    """Generate interactive flashcards"""
+    """Generate interactive flashcards with slider functionality"""
     prompt = """Create 15-20 interactive flashcards based on this document. Do not include <html>, <head>, <body>, or code block markers. Start directly with the content.
     
     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" id="card1">
-        <button class="play-btn" id="card1-btn" onclick="toggleCard('card1')">▶️</button>
-        <div class="flashcard-front" id="card1-front" style="display: block;">
-            <h3>Card 1</h3>
-            <p><strong>[Question/Term]</strong></p>
-        </div>
-        <div class="flashcard-back" id="card1-back" style="display: none;">
-            <h3>Answer</h3>
-            <p>[Answer/Definition/Explanation]</p>
+    <p><em>Click on a card to slide between question and answer!</em></p>
+    
+    <div class="flashcard-slider" id="card1" onclick="toggleFlashcard('card1')">
+        <div class="slides">
+            <div class="slide question">
+                <h3>Card 1</h3>
+                <p><strong>[Question/Term]</strong></p>
+            </div>
+            <div class="slide answer">
+                <h3>Answer</h3>
+                <p>[Answer/Definition/Explanation]</p>
+            </div>
         </div>
     </div>
     
@@ -692,18 +639,14 @@ def get_api_status():
     else:
         return "❌ API Key not configured"
 
-# Create Gradio interface
 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 with interactive features!
+        Transform your documents into comprehensive educational materials using AI!
         
-        **New Features:** 
-        - 🎴 Interactive Flashcards with Play Buttons
-        - 📄 HTML Formatted Responses  
-        - 💾 Download All Content as HTML Files
-        - 🖨️ Print-Ready Formats
+        **New Feature:** 
+        - 🎴 Interactive Flashcards now work like an image slider—click to slide between question and answer!
         
         *Powered by ZeroGPU for enhanced performance*
         """)
@@ -729,7 +672,6 @@ def create_interface():
                 process_btn = gr.Button("🔄 Process Document", variant="secondary")
                 process_status = gr.Textbox(label="Processing Status", interactive=False, lines=4)
                 
-                # Document status indicator
                 doc_status = gr.Textbox(
                     label="Document Status", 
                     value=get_document_status(), 
@@ -753,58 +695,32 @@ def create_interface():
                     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>"
+                    label="Generated Content",
+                    value="<p>Generated content will appear here...</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:
-        1. **Get API Key:** Sign up at [OpenRouter](https://openrouter.ai/) and get your free API key
+        1. **Get API Key:** Sign up at [OpenRouter](https://openrouter.ai/)
         2. **Configure:** Enter your API key and click "Configure API" 
-        3. **Upload:** Upload a PDF or DOCX document (make sure it contains readable text)
+        3. **Upload:** Upload a PDF or DOCX document
         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
+        5. **Generate:** Choose a content type to generate
+        6. **Download:** Download the HTML file to see interactive flashcards
         
         ### 💡 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 downloaded HTML file
-        - 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.
+        - Flashcards slide between question and answer when clicked (in the downloaded file).
+        - Use the downloaded HTML file in a browser for full interactivity.
         """)
         
-        # 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)
             status = get_api_status()
@@ -826,7 +742,6 @@ def create_interface():
             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)
@@ -859,17 +774,12 @@ def create_interface():
             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)
+            temp_file = create_download_file(content, content_type)
             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]
@@ -910,7 +820,6 @@ def create_interface():
             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)
@@ -923,7 +832,6 @@ def create_interface():
             outputs=[download_file, download_file]
         )
         
-        # Update status on app load
         def update_initial_status():
             return get_api_status(), get_document_status()
         
@@ -934,7 +842,6 @@ def create_interface():
     
     return app
 
-# Launch the application
 if __name__ == "__main__":
     app = create_interface()
     app.launch(