Merge fix-image-generation branch with image display fixes

README.md

@@ -1,46 +1,279 @@
----
-title: BrightMind AI - Educational Content Generator
-emoji: 🧠
-colorFrom: blue
-colorTo: purple
-sdk: gradio
-sdk_version: 4.44.1
-app_file: app.py
-pinned: false
-license: mit
-short_description: AI-powered educational content generation platform
----
-
 # 🧠 BrightMind AI - Educational Content Generator
 
-An intelligent educational platform that generates comprehensive lesson plans and quizzes using AI and educational algorithms.
+[![Python](https://img.shields.io/badge/Python-3.8+-blue.svg)](https://python.org)
+[![Gradio](https://img.shields.io/badge/Gradio-4.44.1+-green.svg)](https://gradio.app)
+[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+An intelligent educational platform that generates comprehensive lesson plans, quizzes, and educational content using AI and proven educational algorithms. BrightMind AI empowers educators with intelligent tools to create engaging, grade-appropriate content across all subjects.
+
+## ✨ Features
+
+### 🤖 AI-Powered Content Generation
+- **Hugging Face Integration**: Uses state-of-the-art language models for enhanced content creation
+- **Intelligent Fallback**: Educational algorithms ensure content generation even without API access
+- **Context-Aware**: Adapts content based on subject, grade level, and difficulty
+
+### 📚 Educational Content Types
+- **Lesson Plans**: Comprehensive, structured lesson plans with objectives, activities, and assessments
+- **Quizzes**: Custom quizzes with multiple question types (Multiple Choice, True/False, Short Answer, Fill-in-the-Blank)
+- **Worksheets**: Interactive educational materials with visual elements
+- **Study Guides**: Structured study materials for various subjects
+
+### 🎯 Grade-Appropriate Content
+- **K-2**: Early elementary content with visual aids and simple concepts
+- **3-5**: Upper elementary with hands-on activities
+- **6-8**: Middle school with analytical thinking
+- **9-12**: High school with advanced concepts and critical thinking
+
+### 📖 Subject Coverage
+- **Science**: Biology, Chemistry, Physics, Earth Science
+- **Mathematics**: Algebra, Geometry, Statistics, Calculus
+- **History**: World History, US History, Ancient Civilizations
+- **English**: Literature, Writing, Grammar, Reading Comprehension
+- **Geography**: Physical and Human Geography
+- **Art**: Art History, Techniques, Creative Projects
+
+### 🎨 Advanced Features
+- **Image Generation**: AI-powered educational illustrations using Hugging Face models
+- **Math Rendering**: LaTeX to HTML conversion for mathematical expressions
+- **Progress Tracking**: Real-time generation progress with visual feedback
+- **Feedback System**: Built-in feedback collection and database storage
+- **Responsive UI**: Modern, intuitive interface built with Gradio
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Python 3.8 or higher
+- pip package manager
+
+### Installation
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/yourusername/brightmind-ai-clone.git
+   cd brightmind-ai-clone
+   ```
+
+2. **Install dependencies**
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. **Set up environment variables (optional)**
+   ```bash
+   export HUGGINGFACE_TOKEN="your_hf_token_here"
+   export SMTP_USERNAME="your_email@example.com"
+   export SMTP_PASSWORD="your_app_password"
+   ```
+
+4. **Run the application**
+   ```bash
+   python app.py
+   ```
+
+5. **Open your browser**
+   Navigate to `http://localhost:7860` to access the application
+
+## 🔧 Configuration
+
+### Environment Variables
+
+| Variable | Description | Required | Default |
+|----------|-------------|----------|---------|
+| `HUGGINGFACE_TOKEN` | Hugging Face API token for AI content generation | No | None |
+| `SMTP_USERNAME` | Email username for feedback notifications | No | "" |
+| `SMTP_PASSWORD` | Email password for feedback notifications | No | "" |
+
+### API Configuration
+
+The application automatically detects your Hugging Face token and uses it for enhanced content generation. Without a token, the app falls back to educational algorithms.
+
+**Getting a Hugging Face Token:**
+1. Visit [Hugging Face](https://huggingface.co)
+2. Create an account or sign in
+3. Go to Settings → Access Tokens
+4. Create a new token with "Read" permissions
+5. Set the token as an environment variable
+
+## 📖 Usage Guide
+
+### Creating Lesson Plans
+
+1. **Enter Topic**: Describe what you want to teach (e.g., "Photosynthesis", "World War II", "Quadratic Equations")
+2. **Select Subject**: Choose from the dropdown menu
+3. **Choose Grade Level**: Select appropriate grade range
+4. **Set Duration**: Specify lesson length (30-180 minutes)
+5. **Select Difficulty**: Choose Beginner, Intermediate, or Advanced
+6. **Generate**: Click the generate button and watch the AI create your lesson plan
+
+### Creating Quizzes
+
+1. **Enter Topic**: Specify the quiz subject
+2. **Select Subject**: Choose the academic subject
+3. **Choose Grade Level**: Select appropriate grade range
+4. **Set Question Count**: Specify number of questions (1-20)
+5. **Select Question Types**: Choose from available question formats
+6. **Generate**: Create your custom quiz
+
+### Content Types Available
 
-## Features
+- **Lesson Plans**: Complete structured lessons with objectives, activities, materials, and assessments
+- **Quizzes**: Interactive assessments with multiple question types
+- **Worksheets**: Practice materials and exercises
+- **Study Guides**: Comprehensive review materials
 
-- **AI-Powered Generation**: Uses Hugging Face models for enhanced content creation
-- **Educational Algorithms**: Fallback system based on proven teaching methodologies
-- **Grade-Appropriate Content**: Adapts to K-12 learning levels
-- **Subject-Specific Materials**: Tailored for Science, Math, History, English, and more
-- **Quiz Generation**: Create custom quizzes with multiple question types
+## 🏗️ Project Structure
 
-## How to Use
+```
+brightmind-ai-clone/
+├── app.py                    # Main application file
+├── config.py                 # Configuration and environment variables
+├── ai_services.py           # AI/ML functionality and API calls
+├── content_generators.py    # Content generation logic
+├── database.py              # Database operations and feedback storage
+├── email_service.py         # Email notification system
+├── ui_components.py         # UI components and styling
+├── utils.py                 # Utility functions and helpers
+├── algebra_solver.py        # Mathematical problem solving
+├── requirements.txt         # Python dependencies
+├── requirements_simple.txt  # Minimal dependencies
+├── requirements_complex.txt # Full feature dependencies
+├── generated_images/        # AI-generated educational images
+├── icons/                   # Application icons and assets
+├── test_*.py               # Test files for various components
+└── README.md               # This documentation
+```
 
-1. **Enter Topic**: Describe what you want to teach
-2. **Select Subject**: Choose from Science, Math, History, English, Geography, or Art
-3. **Choose Grade Level**: K-2, 3-5, 6-8, or 9-12
-4. **Set Duration**: 30-180 minutes
-5. **Select Difficulty**: Beginner, Intermediate, or Advanced
-6. **Generate**: Click to create your lesson plan or quiz
+## 🔌 API Integration
 
-## AI Integration
+### Hugging Face Models
 
-This app uses Hugging Face's Inference API for enhanced content generation. The token is automatically detected from the Space's environment variables.
+The application uses several Hugging Face models:
 
-## License
+- **Content Generation**: `deepseek-ai/DeepSeek-V3-0324`
+- **Image Generation**: 
+  - `stabilityai/stable-diffusion-xl-base-1.0`
+  - `stabilityai/stable-diffusion-3-medium-diffusers`
 
-MIT License - Free for educational use
+### API Endpoints
+
+- **Content Generation**: `https://router.huggingface.co/v1/chat/completions`
+- **Image Generation**: `https://api-inference.huggingface.co/models/{model_name}`
+
+## 🧪 Testing
+
+The project includes comprehensive test files:
+
+- `test_html_rendering.py`: Tests HTML rendering and LaTeX conversion
+- `test_image_api.py`: Tests image generation functionality
+- `test_specific_content.py`: Tests content generation with specific parameters
+
+**Running Tests:**
+```bash
+python test_html_rendering.py
+python test_image_api.py
+python test_specific_content.py
+```
+
+## 📊 Database Schema
+
+The application uses SQLite for feedback storage:
+
+```sql
+CREATE TABLE feedback (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    timestamp TEXT NOT NULL,
+    feedback_type TEXT NOT NULL,
+    rating INTEGER NOT NULL,
+    comments TEXT NOT NULL,
+    user_email TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+## 🎨 Customization
+
+### UI Themes
+The application uses Gradio's Soft theme by default. You can customize the theme by modifying the `gr.themes.Soft()` parameter in `app.py`.
+
+### Content Styling
+Educational content is styled with custom CSS for better readability and visual appeal. Styles are defined in the `ui_components.py` file.
+
+### Image Generation
+Customize image generation by modifying prompts in `ai_services.py` or adding new image sources in the fallback system.
+
+## 🚀 Deployment
+
+### Local Development
+```bash
+python app.py
+```
+
+### Production Deployment
+1. Set up environment variables
+2. Install production dependencies
+3. Configure reverse proxy (nginx/Apache)
+4. Set up SSL certificates
+5. Deploy using your preferred method (Docker, PM2, etc.)
+
+### Docker Deployment
+```dockerfile
+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["python", "app.py"]
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please follow these steps:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Setup
+```bash
+git clone https://github.com/yourusername/brightmind-ai-clone.git
+cd brightmind-ai-clone
+pip install -r requirements.txt
+python app.py
+```
+
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- [Gradio](https://gradio.app) for the amazing UI framework
+- [Hugging Face](https://huggingface.co) for providing access to state-of-the-art AI models
+- [Stability AI](https://stability.ai) for image generation capabilities
+- The educational community for inspiration and feedback
+
+## 📞 Support
+
+- **Issues**: [GitHub Issues](https://github.com/yourusername/brightmind-ai-clone/issues)
+- **Discussions**: [GitHub Discussions](https://github.com/yourusername/brightmind-ai-clone/discussions)
+- **Email**: mahdi@brightmind-ai.com
+
+## 🔄 Changelog
+
+### Version 1.0.0
+- Initial release with AI-powered content generation
+- Support for lesson plans and quizzes
+- Hugging Face API integration
+- Image generation capabilities
+- Feedback system with database storage
+- Responsive UI with Gradio
 
 ---
 
-*BrightMind AI - Empowering educators with intelligent tools*
-# Updated Mon Sep 22 23:27:39 PDT 2025
+*BrightMind AI - Empowering educators with intelligent tools* 🧠✨
+
+**Last Updated**: September 2024

app.py

@@ -1740,16 +1740,10 @@ def fix_malformed_image_html(content):
     """Fix malformed image HTML tags in content"""
     import re
     
-    # First, fix the specific styledata issue
-    styledata_pattern = r'<div\s+styledata:image/png;base64,([A-Za-z0-9+/=]+)'
-    def fix_styledata(match):
-        base64_data = match.group(1)
-        return f'<img src="data:image/png;base64,{base64_data}" alt="Generated image" style="max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0;">'
-    
-    content = re.sub(styledata_pattern, fix_styledata, content)
-    
-    # Pattern to find malformed img tags like: <img srcStep-by-step...>
+    # Pattern to find malformed img tags like: <img srcdata:...> or <img srcStep-by-step...>
     malformed_pattern = r'<img\s+src([^>]*?)"([^"]*?)"([^>]*?)>'
+    # Also handle the srcdata: case specifically (with or without closing tag)
+    srcdata_pattern = r'<img\s+srcdata:([^>]*?)(?:>|$)'
     
     def fix_img_tag(match):
         # Extract the parts
@@ -1771,8 +1765,32 @@ def fix_malformed_image_html(content):
             safe_description = description.replace('"', '&quot;').replace("'", '&#39;')
             return f'<div style="border: 2px dashed #667eea; padding: 20px; margin: 20px 0; text-align: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px;"><div style="font-size: 48px; margin-bottom: 10px;">🖼️</div><div style="color: #667eea; font-weight: bold; margin-bottom: 10px;">Image: {safe_description}</div><div style="color: #666; font-size: 14px;">Visual content would appear here</div></div>'
     
+    def fix_srcdata_tag(match):
+        # Extract the data part after srcdata:
+        data_part = match.group(1)
+        
+        # Look for base64 data in the data part - be more flexible with the pattern
+        base64_match = re.search(r'data:image/[^;]+;base64,([A-Za-z0-9+/=]+)', data_part)
+        
+        if base64_match:
+            base64_data = base64_match.group(0)
+            # Create properly formatted img tag
+            return f'<img src="{base64_data}" alt="Generated image" style="max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0;">'
+        else:
+            # Try to extract just the base64 part if the full pattern doesn't match
+            # Look for the pattern: image/png;base64, followed by base64 data
+            base64_only_match = re.search(r'image/png;base64,([A-Za-z0-9+/=]+)', data_part)
+            if base64_only_match:
+                base64_data = f"data:image/png;base64,{base64_only_match.group(1)}"
+                return f'<img src="{base64_data}" alt="Generated image" style="max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0;">'
+            else:
+                # If no base64 data found, return a placeholder
+                return f'<div style="border: 2px dashed #667eea; padding: 20px; margin: 20px 0; text-align: center; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px;"><div style="font-size: 48px; margin-bottom: 10px;">🖼️</div><div style="color: #667eea; font-weight: bold; margin-bottom: 10px;">Image: Generated Content</div><div style="color: #666; font-size: 14px;">Visual content would appear here</div></div>'
+    
     # Fix malformed img tags
     fixed_content = re.sub(malformed_pattern, fix_img_tag, content)
+    # Fix srcdata: tags specifically
+    fixed_content = re.sub(srcdata_pattern, fix_srcdata_tag, fixed_content)
     
     return fixed_content
 
@@ -1930,8 +1948,8 @@ AGENT INSTRUCTIONS:
 9. IMPORTANT: DO NOT USE LaTeX expressions. Use simple HTML/markdown formatting instead:
    - For fractions: use "a/b" or "a over b" instead of \frac{{a}}{{b}}
    - For math: use plain text like "Speed = Distance/Time" instead of \text{{Speed}} = \frac{{\text{{Distance}}}}{{\text{{Time}}}}
-   - For fill-in-blanks: use "_____" instead of \_\_\_
-   - For answer boxes: use "[ANSWER: ___]" instead of \boxed{{\_\_}}
+   - For fill-in-blanks: use "_____" instead of \\_\\_\\_
+   - For answer boxes: use "[ANSWER: ___]" instead of \\boxed{{\\_\\_}}
    - For subscripts: use "H2O" instead of H_2O
    - For superscripts: use "x²" instead of x^2