Add Flask app with Tesseract OCR, dark UI, clipboard paste support

2026-04-08 22:57:20 +03:00
parent c7bc131b0a
commit e9be764991
5 changed files with 199 additions and 2 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image → Text</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
+               background: #1a1a2e; color: #eee; min-height: 100vh; padding: 2rem; }
+        .container { max-width: 800px; margin: 0 auto; }
+        h1 { text-align: center; margin-bottom: 2rem; color: #00d4ff; }
+        .upload-area { 
+            border: 2px dashed #444; 
+            border-radius: 12px; 
+            padding: 2rem; 
+            text-align: center; 
+            margin-bottom: 1.5rem;
+            transition: border-color 0.3s;
+        }
+        .upload-area:hover { border-color: #00d4ff; }
+        input[type="file"] { display: none; }
+        .file-label { 
+            background: #00d4ff; 
+            color: #1a1a2e; 
+            padding: 0.75rem 1.5rem; 
+            border-radius: 8px; 
+            cursor: pointer; 
+            display: inline-block;
+            font-weight: bold;
+        }
+        .file-label:hover { background: #00b8e6; }
+        #fileName { margin-top: 1rem; color: #888; }
+        .controls { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
+        select, button { 
+            padding: 0.75rem 1.5rem; 
+            border-radius: 8px; 
+            border: none; 
+            font-size: 1rem;
+        }
+        select { background: #333; color: #fff; flex: 1; min-width: 150px; }
+        button { background: #e94560; color: #fff; cursor: pointer; font-weight: bold; }
+        button:hover { background: #d63a54; }
+        button:disabled { background: #555; cursor: not-allowed; }
+        .result { 
+            background: #16213e; 
+            border-radius: 12px; 
+            padding: 1.5rem; 
+            margin-top: 1.5rem;
+        }
+        .result h2 { color: #00d4ff; margin-bottom: 1rem; font-size: 1.1rem; }
+        pre { 
+            white-space: pre-wrap; 
+            word-wrap: break-word; 
+            background: #0f0f23; 
+            padding: 1rem; 
+            border-radius: 8px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .copy-btn {
+            background: #333;
+            color: #00d4ff;
+            border: 1px solid #00d4ff;
+            margin-top: 1rem;
+        }
+        .copy-btn:hover { background: #444; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🖼️ Image to Text</h1>
+        
+        <form method="post" enctype="multipart/form-data" id="uploadForm">
+            <div class="upload-area">
+                <label class="file-label" for="image">Выбрать изображение</label>
+                <input type="file" name="image" id="image" accept="image/*" required>
+                <p id="fileName">или перетащите файл сюда</p>
+            </div>
+            
+            <div class="controls">
+                <select name="lang" id="langSelect">
+                    <option value="eng" {% if lang == 'eng' %}selected{% endif %}>English</option>
+                    <option value="rus" {% if lang == 'rus' %}selected{% endif %}>Русский</option>
+                    <option value="eng+rus" {% if lang == 'eng+rus' %}selected{% endif %}>English + Русский</option>
+                </select>
+                <button type="submit" id="submitBtn">Распознать</button>
+            </div>
+        </form>
+
+        {% if text %}
+        <div class="result">
+            <h2>📝 Результат:</h2>
+            <pre id="resultText">{{ text }}</pre>
+            <button class="copy-btn" onclick="copyText()">📋 Копировать</button>
+        </div>
+        {% endif %}
+    </div>
+
+    <script>
+        const input = document.getElementById('image');
+        const fileName = document.getElementById('fileName');
+        const form = document.getElementById('uploadForm');
+        const submitBtn = document.getElementById('submitBtn');
+
+        input.addEventListener('change', () => {
+            fileName.textContent = input.files[0]?.name || 'выберите файл';
+        });
+
+        // Clipboard paste support
+        document.addEventListener('paste', e => {
+            const items = e.clipboardData?.items;
+            if (!items) return;
+            for (const item of items) {
+                if (item.type.startsWith('image/')) {
+                    const file = item.getAsFile();
+                    const dt = new DataTransfer();
+                    dt.items.add(file);
+                    input.files = dt.files;
+                    fileName.textContent = file.name || 'clipboard-image.png';
+                    break;
+                }
+            }
+        });
+
+        // Drag and drop
+        const uploadArea = document.querySelector('.upload-area');
+        uploadArea.addEventListener('dragover', e => { e.preventDefault(); uploadArea.style.borderColor = '#00d4ff'; });
+        uploadArea.addEventListener('dragleave', () => uploadArea.style.borderColor = '#444');
+        uploadArea.addEventListener('drop', e => {
+            e.preventDefault();
+            uploadArea.style.borderColor = '#444';
+            input.files = e.dataTransfer.files;
+            fileName.textContent = input.files[0]?.name || 'выберите файл';
+        });
+
+        // Submit animation
+        form.addEventListener('submit', () => {
+            submitBtn.textContent = '⏳ Обработка...';
+            submitBtn.disabled = true;
+        });
+
+        function copyText() {
+            navigator.clipboard.writeText(document.getElementById('resultText').textContent)
+                .then(() => { alert('Скопировано!'); });
+        }
+    </script>
+</body>
+</html>