Spaces:
Runtime error
Runtime error
| <html lang="th"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Typhoon OCR Web - ระบบแปลงภาพเป็นข้อความ</title> | |
| <link | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" | |
| rel="stylesheet" | |
| /> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(20px); | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| padding: 40px; | |
| max-width: 800px; | |
| width: 100%; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .header h1 { | |
| color: #2c3e50; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header p { | |
| color: #7f8c8d; | |
| font-size: 1.1rem; | |
| font-weight: 400; | |
| } | |
| .upload-section { | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| padding: 30px; | |
| margin-bottom: 30px; | |
| border: 2px dashed #e9ecef; | |
| transition: all 0.3s ease; | |
| text-align: center; | |
| } | |
| .upload-section:hover { | |
| border-color: #667eea; | |
| background: #f1f3f9; | |
| transform: translateY(-2px); | |
| } | |
| .file-input-wrapper { | |
| position: relative; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .file-input { | |
| opacity: 0; | |
| position: absolute; | |
| z-index: -1; | |
| } | |
| .file-input-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| color: white; | |
| padding: 15px 30px; | |
| border-radius: 12px; | |
| border: none; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); | |
| } | |
| .file-input-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); | |
| } | |
| .upload-info { | |
| margin-top: 20px; | |
| color: #6c757d; | |
| font-size: 0.95rem; | |
| } | |
| .submit-btn { | |
| background: linear-gradient(135deg, #28a745, #20c997); | |
| color: white; | |
| border: none; | |
| padding: 15px 40px; | |
| border-radius: 12px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); | |
| margin-top: 20px; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4); | |
| } | |
| .submit-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .result-section { | |
| margin-top: 30px; | |
| } | |
| .section-title { | |
| color: #2c3e50; | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .uploaded-image { | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| border: 1px solid #e9ecef; | |
| } | |
| .uploaded-image img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 12px; | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .uploaded-image img:hover { | |
| transform: scale(1.02); | |
| } | |
| .text-result { | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| padding: 25px; | |
| border: 1px solid #e9ecef; | |
| } | |
| .result-textarea { | |
| width: 100%; | |
| min-height: 200px; | |
| border: 2px solid #e9ecef; | |
| border-radius: 12px; | |
| padding: 20px; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| background: white; | |
| resize: vertical; | |
| transition: border-color 0.3s ease; | |
| } | |
| .result-textarea:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| .copy-btn { | |
| background: #6c757d; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-top: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .copy-btn:hover { | |
| background: #5a6268; | |
| transform: translateY(-1px); | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| color: #667eea; | |
| font-weight: 500; | |
| margin: 20px 0; | |
| } | |
| .loading i { | |
| animation: spin 1s linear infinite; | |
| margin-right: 10px; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .file-name { | |
| margin-top: 15px; | |
| padding: 10px; | |
| background: rgba(102, 126, 234, 0.1); | |
| border-radius: 8px; | |
| color: #667eea; | |
| font-weight: 500; | |
| display: none; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 30px 20px; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| } | |
| .upload-section { | |
| padding: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1><i class="fas fa-eye"></i> Typhoon OCR</h1> | |
| <p>ระบบแปลงภาพเป็นข้อความด้วยปัญญาประดิษฐ์</p> | |
| </div> | |
| <form method="POST" enctype="multipart/form-data" id="ocrForm"> | |
| <div class="upload-section"> | |
| <div class="file-input-wrapper"> | |
| <input | |
| type="file" | |
| name="image" | |
| accept="image/*" | |
| required | |
| class="file-input" | |
| id="imageInput" | |
| /> | |
| <label for="imageInput" class="file-input-button"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| เลือกไฟล์ภาพ | |
| </label> | |
| </div> | |
| <div class="file-name" id="fileName"></div> | |
| <div class="upload-info"> | |
| <i class="fas fa-info-circle"></i> | |
| รองรับไฟล์: JPG, PNG, GIF, BMP | ขนาดสูงสุด: 10MB | |
| </div> | |
| <button type="submit" class="submit-btn" id="submitBtn" disabled> | |
| <i class="fas fa-magic"></i> | |
| แปลงภาพเป็นข้อความ | |
| </button> | |
| </div> | |
| </form> | |
| <div class="loading" id="loading"> | |
| <i class="fas fa-spinner"></i> | |
| กำลังประมวลผลภาพ กรุณารอสักครู่... | |
| </div> | |
| {% if image_path %} | |
| <div class="result-section"> | |
| <h3 class="section-title"> | |
| <i class="fas fa-image"></i> | |
| ภาพที่อัปโหลด | |
| </h3> | |
| <div class="uploaded-image"> | |
| <img src="{{ image_path }}" alt="Uploaded Image" /> | |
| </div> | |
| </div> | |
| {% endif %} {% if result %} | |
| <div class="result-section"> | |
| <h3 class="section-title"> | |
| <i class="fas fa-file-text"></i> | |
| ข้อความที่ตรวจจับได้ | |
| </h3> | |
| <div class="text-result"> | |
| <textarea class="result-textarea" readonly id="resultText"> | |
| {{ result }}</textarea | |
| > | |
| <button class="copy-btn" onclick="copyToClipboard()"> | |
| <i class="fas fa-copy"></i> | |
| คัดลอกข้อความ | |
| </button> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <script> | |
| const imageInput = document.getElementById("imageInput"); | |
| const fileName = document.getElementById("fileName"); | |
| const submitBtn = document.getElementById("submitBtn"); | |
| const ocrForm = document.getElementById("ocrForm"); | |
| const loading = document.getElementById("loading"); | |
| imageInput.addEventListener("change", function (e) { | |
| if (e.target.files.length > 0) { | |
| const file = e.target.files[0]; | |
| fileName.textContent = `ไฟล์ที่เลือก: ${file.name}`; | |
| fileName.style.display = "block"; | |
| submitBtn.disabled = false; | |
| } else { | |
| fileName.style.display = "none"; | |
| submitBtn.disabled = true; | |
| } | |
| }); | |
| ocrForm.addEventListener("submit", function () { | |
| loading.style.display = "block"; | |
| submitBtn.disabled = true; | |
| submitBtn.innerHTML = | |
| '<i class="fas fa-spinner fa-spin"></i> กำลังประมวลผล...'; | |
| }); | |
| function copyToClipboard() { | |
| const resultText = document.getElementById("resultText"); | |
| resultText.select(); | |
| document.execCommand("copy"); | |
| const copyBtn = document.querySelector(".copy-btn"); | |
| const originalText = copyBtn.innerHTML; | |
| copyBtn.innerHTML = '<i class="fas fa-check"></i> คัดลอกแล้ว!'; | |
| copyBtn.style.background = "#28a745"; | |
| setTimeout(() => { | |
| copyBtn.innerHTML = originalText; | |
| copyBtn.style.background = "#6c757d"; | |
| }, 2000); | |
| } | |
| // Drag and drop functionality | |
| const uploadSection = document.querySelector(".upload-section"); | |
| uploadSection.addEventListener("dragover", function (e) { | |
| e.preventDefault(); | |
| uploadSection.style.borderColor = "#667eea"; | |
| uploadSection.style.background = "#f1f3f9"; | |
| }); | |
| uploadSection.addEventListener("dragleave", function (e) { | |
| e.preventDefault(); | |
| uploadSection.style.borderColor = "#e9ecef"; | |
| uploadSection.style.background = "#f8f9fa"; | |
| }); | |
| uploadSection.addEventListener("drop", function (e) { | |
| e.preventDefault(); | |
| uploadSection.style.borderColor = "#e9ecef"; | |
| uploadSection.style.background = "#f8f9fa"; | |
| const files = e.dataTransfer.files; | |
| if (files.length > 0) { | |
| imageInput.files = files; | |
| const event = new Event("change", { bubbles: true }); | |
| imageInput.dispatchEvent(event); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |