Upload 4 files

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 7860
+
+CMD ["python", "app.py"] 

app.py

@@ -0,0 +1,154 @@
+import os
+from flask import Flask, render_template, request, jsonify
+import google.generativeai as genai
+from PIL import Image
+from dotenv import load_dotenv
+import time
+
+# Load environment variables
+load_dotenv()
+
+# Configure Gemini API with key from environment variable
+api_key = os.getenv("GEMINI_API_KEY", "AIzaSyB0IOx76FydAk4wabMz1juzzHF5oBiHW64")
+if api_key == "AIzaSyB0IOx76FydAk4wabMz1juzzHF5oBiHW64":
+    print("WARNING: Using hardcoded API key. Set GEMINI_API_KEY environment variable instead.")
+
+try:
+    genai.configure(api_key=api_key)
+except Exception as e:
+    print(f"Error configuring Gemini API: {str(e)}")
+
+# Initialize Flask app
+app = Flask(__name__)
+
+
+def extract_text_with_gemini(image_path):
+    """Extract text from image using Gemini Vision model"""
+    max_retries = 3
+    retry_delay = 2
+
+    for attempt in range(max_retries):
+        try:
+            # Initialize Gemini Pro Vision model
+            model = genai.GenerativeModel('gemini-2.0-flash')
+
+            # Load the image
+            with Image.open(image_path) as img:
+                # Create prompt for text extraction
+                prompt = "Extract all the text from this image. Return only the extracted text, nothing else."
+
+                # Generate response with image
+                response = model.generate_content([prompt, img])
+
+                # Validate response
+                if not response or not hasattr(response, 'text') or not response.text:
+                    raise ValueError("Received empty response from Gemini API")
+
+                return response.text.strip()
+        except Exception as e:
+            print(f"Attempt {attempt + 1} failed: {str(e)}")
+            if attempt < max_retries - 1:
+                time.sleep(retry_delay)
+                continue
+            return "Could not extract text from the image. Please try with a clearer image."
+
+
+def translate_text(text):
+    """Translate text from English to Hindi using Gemini"""
+    max_retries = 3
+    retry_delay = 2
+
+    # Check if there's text to translate
+    if not text or text.strip() == "":
+        return "No text to translate."
+
+    for attempt in range(max_retries):
+        try:
+            # Initialize Gemini model
+            model = genai.GenerativeModel('gemini-2.0-flash')
+
+            # Create prompt for translation
+            prompt = f"""
+            Translate the following English text to Hindi. 
+            Keep proper names, titles, and organization names unchanged.
+            Text to translate: {text}
+            """
+
+            # Generate response
+            response = model.generate_content(prompt)
+
+            # Validate response
+            if not response or not hasattr(response, 'text') or not response.text:
+                raise ValueError("Received empty response from Gemini API")
+
+            return response.text.strip()
+        except Exception as e:
+            print(f"Translation attempt {attempt + 1} failed: {str(e)}")
+            if attempt < max_retries - 1:
+                time.sleep(retry_delay)
+                continue
+            return "Translation failed. Please try again later."
+
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file uploaded'}), 400
+
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No file selected'}), 400
+
+    # Check file extension
+    allowed_extensions = {'png', 'jpg', 'jpeg', 'gif', 'bmp'}
+    if '.' not in file.filename or file.filename.rsplit('.', 1)[1].lower() not in allowed_extensions:
+        return jsonify({'error': 'Invalid file format. Please upload an image (PNG, JPG, JPEG, GIF, BMP).'}), 400
+
+    temp_path = None
+    try:
+        # Create temp directory if it doesn't exist
+        temp_dir = "temp"
+        if not os.path.exists(temp_dir):
+            os.makedirs(temp_dir)
+
+        # Save the uploaded file temporarily with a unique name
+        temp_path = os.path.join(temp_dir, f"temp_image_{int(time.time())}.png")
+        file.save(temp_path)
+
+        # Extract text using Gemini
+        extracted_text = extract_text_with_gemini(temp_path)
+
+        # Translate text
+        translated_text = translate_text(extracted_text)
+
+        return jsonify({
+            'original_text': extracted_text,
+            'translated_text': translated_text
+        })
+    except Exception as e:
+        print(f"Error processing image: {str(e)}")
+        return jsonify({
+            'error': 'An error occurred while processing your image. Please try again.'
+        }), 500
+    finally:
+        # Clean up temporary file if it exists
+        try:
+            if temp_path and os.path.exists(temp_path):
+                os.remove(temp_path)
+        except Exception as e:
+            print(f"Failed to remove temporary file: {str(e)}")
+
+
+if __name__ == '__main__':
+    # Ensure the template folder exists
+    if not os.path.exists('templates'):
+        os.makedirs('templates')
+        print("Created 'templates' directory. Please place your HTML files here.")
+
+    # For Hugging Face Spaces, we need to listen on 0.0.0.0 and port 7860
+    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 7860)))

requirements.txt

@@ -0,0 +1,4 @@
+flask==2.0.1
+google-generativeai>=0.1.0
+Pillow>=9.0.0
+python-dotenv>=0.19.0 

templates/index.html

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCR Translation - English to Hindi</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        .loader {
+            border: 3px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 3px solid #3498db;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .drop-zone {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s ease;
+        }
+        .drop-zone:hover {
+            border-color: #3498db;
+            background-color: #f8fafc;
+        }
+        .result-box {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .result-box:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        }
+        .custom-file-input::-webkit-file-upload-button {
+            visibility: hidden;
+            width: 0;
+        }
+        .custom-file-input::before {
+            content: 'Choose File';
+            display: inline-block;
+            background: #3498db;
+            color: white;
+            padding: 8px 16px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .translate-btn {
+            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+            transition: all 0.3s ease;
+        }
+        .translate-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+        }
+    </style>
+</head>
+<body class="min-h-screen py-12 px-4">
+    <div class="container mx-auto max-w-4xl">
+        <!-- Header -->
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-3">
+                <i class="fas fa-language mr-2"></i>OCR Translation
+            </h1>
+            <p class="text-gray-600">English to Hindi Translation with Image Recognition</p>
+        </div>
+
+        <!-- Main Content -->
+        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
+            <!-- Upload Section -->
+            <div class="drop-zone rounded-lg p-8 text-center mb-6">
+                <div class="mb-4">
+                    <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
+                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Upload Image</h3>
+                    <p class="text-sm text-gray-500 mb-4">Support for PNG, JPG, JPEG, GIF, BMP</p>
+                </div>
+                
+                <input type="file" 
+                       id="imageInput" 
+                       accept="image/*"
+                       class="custom-file-input w-full mb-4 cursor-pointer">
+                
+                <button onclick="processImage()" 
+                        class="translate-btn w-full py-3 px-6 text-white rounded-lg font-medium flex items-center justify-center">
+                    <i class="fas fa-sync-alt mr-2"></i>
+                    <span>Translate Now</span>
+                </button>
+                
+                <div id="loader" class="loader mx-auto mt-4"></div>
+            </div>
+
+            <!-- Preview Section -->
+            <div id="previewSection" class="hidden mb-6">
+                <h3 class="text-lg font-semibold text-gray-700 mb-3">Image Preview</h3>
+                <img id="imagePreview" class="max-w-full h-auto rounded-lg shadow" src="" alt="Preview">
+            </div>
+
+            <!-- Results Section -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Original Text -->
+                <div class="result-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-semibold text-gray-700">
+                            <i class="fas fa-file-alt mr-2"></i>Extracted Text
+                        </h3>
+                        <button onclick="copyText('extractedText')" class="text-blue-500 hover:text-blue-600">
+                            <i class="far fa-copy"></i>
+                        </button>
+                    </div>
+                    <div id="extractedText" class="p-4 bg-gray-50 rounded-lg min-h-[150px] text-gray-700">
+                        <!-- Extracted text will appear here -->
+                    </div>
+                </div>
+
+                <!-- Translated Text -->
+                <div class="result-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-semibold text-gray-700">
+                            <i class="fas fa-language mr-2"></i>Hindi Translation
+                        </h3>
+                        <button onclick="copyText('translatedText')" class="text-blue-500 hover:text-blue-600">
+                            <i class="far fa-copy"></i>
+                        </button>
+                    </div>
+                    <div id="translatedText" class="p-4 bg-gray-50 rounded-lg min-h-[150px] text-gray-700" 
+                         style="font-family: 'Noto Sans Devanagari', sans-serif;">
+                        <!-- Translated text will appear here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Image preview functionality
+        document.getElementById('imageInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    document.getElementById('imagePreview').src = e.target.result;
+                    document.getElementById('previewSection').classList.remove('hidden');
+                }
+                reader.readAsDataURL(file);
+            }
+        });
+
+        // Copy text functionality
+        function copyText(elementId) {
+            const text = document.getElementById(elementId).textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                // Show a brief notification
+                const element = document.getElementById(elementId);
+                const originalBackground = element.style.backgroundColor;
+                element.style.backgroundColor = '#e8f5e9';
+                setTimeout(() => {
+                    element.style.backgroundColor = originalBackground;
+                }, 500);
+            });
+        }
+
+        function processImage() {
+            const fileInput = document.getElementById('imageInput');
+            const loader = document.getElementById('loader');
+            const extractedTextDiv = document.getElementById('extractedText');
+            const translatedTextDiv = document.getElementById('translatedText');
+
+            if (!fileInput.files[0]) {
+                alert('Please select an image first');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+
+            // Show loader and clear previous results
+            loader.style.display = 'block';
+            extractedTextDiv.textContent = '';
+            translatedTextDiv.textContent = '';
+
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                extractedTextDiv.textContent = data.original_text;
+                translatedTextDiv.textContent = data.translated_text;
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert(error.message || 'An error occurred during processing');
+            })
+            .finally(() => {
+                loader.style.display = 'none';
+            });
+        }
+    </script>
+</body>
+</html>