Setup for Hugging Face Spaces deployment

Dockerfile

@@ -0,0 +1,31 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy only necessary files
+COPY app.py .
+COPY templates/ templates/
+COPY static/ static/
+
+# Create non-root user for security
+RUN useradd -m appuser && chown -R appuser:appuser /app
+USER appuser
+
+# Environment variables
+ENV PORT=7860
+ENV PYTHONUNBUFFERED=1
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "app.py"]

README.md

@@ -1,3 +1,12 @@
+---
+title: Dyslexia AI Assistant
+emoji: 🧠
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+---
+
 # Dyslexia AI Assistant
 
 A web application that simplifies complex text using AI to help people with dyslexia and reading difficulties.
@@ -41,8 +50,7 @@ A web application that simplifies complex text using AI to help people with dysl
 4. **Use TTS buttons** to hear the text read aloud
 5. **Toggle "Dyslexia-Friendly"** for enhanced readability
 
-
-## API
+## API Endpoints
 
 ### POST /simplify
 Simplifies text using the T5 model.
@@ -77,6 +85,15 @@ Dyslexia AI Assistant/
 └── t5_simplifier_model/     # AI model files
 ```
 
+## Development
+
+This application is built with:
+- Flask (Backend)
+- T5 Transformer Model
+- HTML/CSS/JavaScript (Frontend)
+
+The model is hosted on Hugging Face Hub at: [Mayank14/t5-simplifier-model](https://huggingface.co/Mayank14/t5-simplifier-model)
+
 ## Troubleshooting
 
 **Model not loading?**

app.py

@@ -1,54 +1,52 @@
-from flask import Flask, jsonify, request, render_template
+from flask import Flask, render_template, request, jsonify
 from flask_cors import CORS
-from transformers import T5Tokenizer, T5ForConditionalGeneration
+from transformers import T5ForConditionalGeneration, T5Tokenizer
 import torch
 import logging
 import os
 
 app = Flask(__name__)
-CORS(app)  # Enable CORS for frontend integration
+CORS(app)
 
 # Configure logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# Load model with error handling
-model_path = "t5_simplifier_model/t5_simplifier_model"
+# Load model from Hugging Face Hub
 try:
-    logger.info("Loading T5 model and tokenizer...")
-    tokenizer = T5Tokenizer.from_pretrained(model_path)
-    model = T5ForConditionalGeneration.from_pretrained(model_path)
+    logger.info("Loading model from Hugging Face Hub...")
+    model_id = "Mayank14/t5-simplifier-model"
+    tokenizer = T5Tokenizer.from_pretrained(model_id)
+    model = T5ForConditionalGeneration.from_pretrained(model_id)
     logger.info("Model loaded successfully!")
 except Exception as e:
     logger.error(f"Failed to load model: {e}")
     raise
 
+@app.route('/')
+def index():
+    return render_template('index.html')
+
 @app.route('/simplify', methods=['POST'])
 def simplify():
     try:
-        # Validate request
-        if not request.is_json:
-            return jsonify({"error": "Request must be JSON"}), 400
-        
         data = request.get_json()
-        if not data:
-            return jsonify({"error": "No JSON data provided"}), 400
-        
-        text = data.get("text", "").strip()
+        if not data or 'text' not in data:
+            return jsonify({'error': 'No text provided'}), 400
+
+        text = data['text'].strip()
         if not text:
-            return jsonify({"error": "No text provided"}), 400
-        
-        if len(text) > 2000:  # Reasonable limit
-            return jsonify({"error": "Text too long. Please limit to 2000 characters."}), 400
-        
-        logger.info(f"Simplifying text of length: {len(text)}")
-        
-        # Prepare input for T5 model
+            return jsonify({'error': 'Empty text provided'}), 400
+
+        if len(text) > 2000:
+            return jsonify({'error': 'Text too long. Please limit to 2000 characters.'}), 400
+
+        # Prepare input
         input_text = "simplify: " + text
         inputs = tokenizer.encode(
-            input_text, 
-            return_tensors="pt", 
-            max_length=512, 
+            input_text,
+            return_tensors="pt",
+            max_length=512,
             truncation=True,
             padding=True
         )
@@ -56,44 +54,38 @@ def simplify():
         # Generate simplified text
         with torch.no_grad():
             outputs = model.generate(
-                inputs, 
-                max_length=512, 
-                num_beams=4, 
+                inputs,
+                max_length=512,
+                num_beams=4,
                 early_stopping=True,
                 do_sample=False,
                 temperature=0.7
             )
-        
+
         simplified_text = tokenizer.decode(outputs[0], skip_special_tokens=True)
         
-        # Clean up the output (remove the "simplify:" prefix if present)
+        # Clean up output
         if simplified_text.lower().startswith("simplify:"):
             simplified_text = simplified_text[9:].strip()
-        
-        logger.info("Text simplified successfully")
+
         return jsonify({
-            "simplified_text": simplified_text,
-            "original_length": len(text),
-            "simplified_length": len(simplified_text)
+            'simplified_text': simplified_text,
+            'original_length': len(text),
+            'simplified_length': len(simplified_text)
         })
-        
+
     except Exception as e:
         logger.error(f"Error in simplify endpoint: {e}")
-        return jsonify({"error": "Internal server error"}), 500
+        return jsonify({'error': 'Internal server error'}), 500
 
-@app.route('/health', methods=['GET'])
-def health_check():
-    """Health check endpoint"""
+@app.route('/health')
+def health():
     return jsonify({
-        "status": "healthy",
-        "model_loaded": True,
-        "service": "T5 Text Simplifier"
+        'status': 'healthy',
+        'model_loaded': True
     })
 
-@app.route('/', methods=['GET'])
-def index():
-    """Serve the main application page"""
-    return render_template('index.html')
-
 if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=5000)
+    # Get port from environment variable for Hugging Face Spaces
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -1,8 +1,8 @@
 # T5 Text Simplifier - Python Dependencies
 
 # Web Framework
-Flask
-Flask-CORS
+flask
+flask-cors
 
 # Machine Learning
 torch
@@ -11,4 +11,5 @@ tokenizers
 
 # Additional utilities
 numpy
-requests
+requests
+huggingface-hub

static/js/script.js

@@ -1,44 +1,48 @@
 // T5 Text Simplifier - JavaScript Functionality
 class TextSimplifier {
     constructor() {
+        // Since we're running the Flask server locally, we'll use the local URL
+        this.apiUrl = 'http://localhost:5000';
         this.isDyslexiaMode = false;
         this.isProcessing = false;
         this.speechSynthesis = window.speechSynthesis;
         this.currentUtterance = null;
         this.isManuallyStopping = false;
         
-        this.initializeElements();
-        this.attachEventListeners();
+        this.setupElements();
+        this.setupEventListeners();
         this.initializeTooltip();
         this.checkSpeechSupport();
     }
 
-    initializeElements() {
-        // Main elements
+    setupElements() {
+        // Input elements
         this.inputText = document.getElementById('inputText');
+        this.clearInput = document.getElementById('clearInput');
+        this.copyInput = document.getElementById('copyInput');
+        
+        // Output elements
         this.outputText = document.getElementById('outputText');
-        this.simplifyBtn = document.getElementById('simplifyBtn');
-        this.statusMessage = document.getElementById('statusMessage');
+        this.clearOutput = document.getElementById('clearOutput');
+        this.copyOutput = document.getElementById('copyOutput');
+        this.downloadOutput = document.getElementById('downloadOutput');
         
-        // Control buttons
+        // Control elements
+        this.simplifyBtn = document.getElementById('simplifyBtn');
         this.dyslexiaToggle = document.getElementById('dyslexiaToggle');
-        this.ttsInputBtn = document.getElementById('ttsInput');
-        this.ttsOutputBtn = document.getElementById('ttsOutput');
-        
-        // Action buttons
-        this.clearInputBtn = document.getElementById('clearInput');
-        this.clearOutputBtn = document.getElementById('clearOutput');
-        this.copyInputBtn = document.getElementById('copyInput');
-        this.copyOutputBtn = document.getElementById('copyOutput');
-        this.downloadOutputBtn = document.getElementById('downloadOutput');
+        this.ttsInput = document.getElementById('ttsInput');
+        this.ttsOutput = document.getElementById('ttsOutput');
         
         // Info elements
         this.infoBtn = document.querySelector('.info-btn');
         this.infoTooltip = document.getElementById('infoTooltip');
-        this.closeTooltipBtn = document.querySelector('.close-tooltip');
+        this.closeTooltip = document.querySelector('.close-tooltip');
+        
+        // Status message
+        this.statusMessage = document.getElementById('statusMessage');
     }
 
-    attachEventListeners() {
+    setupEventListeners() {
         // Main functionality
         this.simplifyBtn.addEventListener('click', () => this.simplifyText());
         
@@ -60,19 +64,19 @@ class TextSimplifier {
         this.dyslexiaToggle.addEventListener('click', () => this.toggleDyslexiaMode());
         
         // Text-to-Speech
-        this.ttsInputBtn.addEventListener('click', () => this.handleTTSButtonClick('input'));
-        this.ttsOutputBtn.addEventListener('click', () => this.handleTTSButtonClick('output'));
+        this.ttsInput.addEventListener('click', () => this.handleTTSButtonClick('input'));
+        this.ttsOutput.addEventListener('click', () => this.handleTTSButtonClick('output'));
         
         // Action buttons
-        this.clearInputBtn.addEventListener('click', () => this.clearText(this.inputText));
-        this.clearOutputBtn.addEventListener('click', () => this.clearText(this.outputText));
-        this.copyInputBtn.addEventListener('click', () => this.copyToClipboard(this.inputText.value, 'Input text'));
-        this.copyOutputBtn.addEventListener('click', () => this.copyToClipboard(this.outputText.value, 'Simplified text'));
-        this.downloadOutputBtn.addEventListener('click', () => this.downloadText());
+        this.clearInput.addEventListener('click', () => this.clearText(this.inputText));
+        this.clearOutput.addEventListener('click', () => this.clearText(this.outputText));
+        this.copyInput.addEventListener('click', () => this.copyToClipboard(this.inputText.value, 'Input text'));
+        this.copyOutput.addEventListener('click', () => this.copyToClipboard(this.outputText.value, 'Simplified text'));
+        this.downloadOutput.addEventListener('click', () => this.downloadText());
         
         // Info tooltip
         this.infoBtn.addEventListener('click', () => this.showTooltip());
-        this.closeTooltipBtn.addEventListener('click', () => this.hideTooltip());
+        this.closeTooltip.addEventListener('click', () => this.hideTooltip());
         
         // Close tooltip on outside click - temporarily disabled to test
         // document.addEventListener('click', (e) => {
@@ -114,10 +118,10 @@ class TextSimplifier {
 
     checkSpeechSupport() {
         if (!this.speechSynthesis) {
-            this.ttsInputBtn.disabled = true;
-            this.ttsOutputBtn.disabled = true;
-            this.ttsInputBtn.title = 'Text-to-speech not supported in this browser';
-            this.ttsOutputBtn.title = 'Text-to-speech not supported in this browser';
+            this.ttsInput.disabled = true;
+            this.ttsOutput.disabled = true;
+            this.ttsInput.title = 'Text-to-speech not supported in this browser';
+            this.ttsOutput.title = 'Text-to-speech not supported in this browser';
         } else {
             // Log available voices for debugging
             this.logAvailableVoices();
@@ -142,9 +146,9 @@ class TextSimplifier {
     }
 
     async simplifyText() {
-        const inputText = this.inputText.value.trim();
+        const text = this.inputText.value.trim();
         
-        if (!inputText) {
+        if (!text) {
             this.showStatus('Please enter some text to simplify.', 'warning');
             return;
         }
@@ -157,12 +161,12 @@ class TextSimplifier {
         this.showStatus('Simplifying your text...', 'info');
 
         try {
-            const response = await fetch('/simplify', {
+            const response = await fetch(`${this.apiUrl}/simplify`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ text: inputText })
+                body: JSON.stringify({ text })
             });
 
             if (!response.ok) {
@@ -171,12 +175,13 @@ class TextSimplifier {
 
             const data = await response.json();
             
+            if (data.error) {
+                throw new Error(data.error);
+            }
+            
             if (data.simplified_text) {
                 this.outputText.value = data.simplified_text;
                 this.showStatus('Text simplified successfully!', 'success');
-                // Don't automatically focus output - let user continue typing in input if needed
-                
-                // Auto-scroll to output
                 this.outputText.scrollIntoView({ behavior: 'smooth', block: 'center' });
             } else {
                 throw new Error('No simplified text received from server');
@@ -184,7 +189,7 @@ class TextSimplifier {
 
         } catch (error) {
             console.error('Error simplifying text:', error);
-            this.showStatus('Failed to simplify text. Please try again.', 'error');
+            this.showStatus(`Failed to simplify text: ${error.message}`, 'error');
         } finally {
             this.setProcessingState(false);
         }
@@ -332,7 +337,7 @@ class TextSimplifier {
     }
 
     updateTTSButton(type, isSpeaking) {
-        const button = type === 'input' ? this.ttsInputBtn : this.ttsOutputBtn;
+        const button = type === 'input' ? this.ttsInput : this.ttsOutput;
         const icon = button.querySelector('i');
         const text = button.querySelector('span');
         
@@ -421,7 +426,7 @@ class TextSimplifier {
         this.infoTooltip.setAttribute('aria-hidden', 'false');
         
         // Focus management
-        this.closeTooltipBtn.focus();
+        this.closeTooltip.focus();
     }
 
     hideTooltip() {