Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>PDF Converter Tool</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 40px; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| max-width: 600px; | |
| width: 100%; | |
| animation: slideIn 0.6s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .header h1 { | |
| color: #333; | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header p { | |
| color: #666; | |
| font-size: 1.1em; | |
| } | |
| .status-indicator { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-online { | |
| background: #d4edda; | |
| color: #155724; | |
| border: 1px solid #c3e6cb; | |
| } | |
| .status-offline { | |
| background: #f8d7da; | |
| color: #721c24; | |
| border: 1px solid #f5c6cb; | |
| } | |
| .conversion-options { | |
| display: grid; | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .option-card { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| border: none; | |
| border-radius: 15px; | |
| padding: 25px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: white; | |
| text-align: left; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .option-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .option-card.html { | |
| background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); | |
| } | |
| .option-card.word { | |
| background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| } | |
| .option-card.json { | |
| background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); | |
| } | |
| /* New style for Excel option card */ | |
| .option-card.excel { | |
| background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); /* Green shades for Excel */ | |
| } | |
| .option-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.2), | |
| transparent | |
| ); | |
| transition: left 0.5s; | |
| } | |
| .option-card:hover::before { | |
| left: 100%; | |
| } | |
| .option-icon { | |
| font-size: 2em; | |
| margin-bottom: 10px; | |
| } | |
| .option-title { | |
| font-size: 1.3em; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .option-desc { | |
| font-size: 0.9em; | |
| opacity: 0.9; | |
| } | |
| .upload-section { | |
| display: none; | |
| background: #f8f9fa; | |
| border-radius: 15px; | |
| padding: 30px; | |
| margin-top: 20px; | |
| border: 2px dashed #ddd; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-section.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .file-input-wrapper { | |
| position: relative; | |
| display: inline-block; | |
| width: 100%; | |
| margin-bottom: 20px; | |
| } | |
| .file-input { | |
| display: none; | |
| } | |
| .file-input-label { | |
| display: block; | |
| padding: 15px 25px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .file-input-label:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .file-name { | |
| margin-top: 10px; | |
| padding: 10px; | |
| background: #e9ecef; | |
| border-radius: 8px; | |
| font-size: 0.9em; | |
| color: #495057; | |
| display: none; | |
| } | |
| .output-name { | |
| width: 100%; | |
| padding: 15px; | |
| border: 2px solid #e9ecef; | |
| border-radius: 10px; | |
| font-size: 1em; | |
| margin-bottom: 20px; | |
| transition: border-color 0.3s ease; | |
| } | |
| .output-name:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| } | |
| .convert-btn { | |
| width: 100%; | |
| padding: 15px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 1.1em; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .convert-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .convert-btn:disabled { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .back-btn { | |
| background: #6c757d; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| margin-bottom: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .back-btn:hover { | |
| background: #5a6268; | |
| transform: translateY(-1px); | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 6px; | |
| background: #e9ecef; | |
| border-radius: 3px; | |
| margin: 20px 0; | |
| overflow: hidden; | |
| display: none; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #667eea, #764ba2); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| border-radius: 3px; | |
| } | |
| .result-section { | |
| margin-top: 20px; | |
| padding: 20px; | |
| border-radius: 12px; | |
| display: none; | |
| } | |
| .result-success { | |
| background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); | |
| border: 1px solid #c3e6cb; | |
| color: #155724; | |
| } | |
| .result-error { | |
| background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); | |
| border: 1px solid #f5c6cb; | |
| color: #721c24; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| .spinner { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #667eea; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 10px; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .drag-over { | |
| border-color: #667eea ; | |
| background: rgba(102, 126, 234, 0.1) ; | |
| } | |
| .debug-info { | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| font-size: 0.9em; | |
| color: #6c757d; | |
| border-left: 4px solid #007bff; | |
| } | |
| .error-details { | |
| margin-top: 10px; | |
| padding: 10px; | |
| background: #fff3cd; | |
| border: 1px solid #ffeaa7; | |
| border-radius: 6px; | |
| font-size: 0.85em; | |
| color: #856404; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 25px; | |
| margin: 10px; | |
| } | |
| .header h1 { | |
| font-size: 2em; | |
| } | |
| .option-card { | |
| padding: 20px; | |
| } | |
| .status-indicator { | |
| position: relative; | |
| top: auto; | |
| right: auto; | |
| margin-bottom: 20px; | |
| display: inline-block; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div id="status-indicator" class="status-indicator status-offline"> | |
| Server Offline | |
| </div> | |
| <div class="header"> | |
| <h1>🧠 PDF Converter</h1> | |
| <p>Convert your PDF files to HTML, Word, JSON, or Excel format</p> | |
| </div> | |
| <div id="main-menu"> | |
| <div class="conversion-options"> | |
| <button class="option-card html" onclick="showUploadSection('html')"> | |
| <div class="option-icon">🌐</div> | |
| <div class="option-title">Convert to HTML</div> | |
| <div class="option-desc"> | |
| Transform PDF into web-ready HTML format | |
| </div> | |
| </button> | |
| <button class="option-card word" onclick="showUploadSection('word')"> | |
| <div class="option-icon">📄</div> | |
| <div class="option-title">Convert to Word</div> | |
| <div class="option-desc"> | |
| Create editable Word documents from PDF | |
| </div> | |
| </button> | |
| <button class="option-card json" onclick="showUploadSection('json')"> | |
| <div class="option-icon">📊</div> | |
| <div class="option-title">Convert to JSON</div> | |
| <div class="option-desc"> | |
| Extract structured data in JSON format | |
| </div> | |
| </button> | |
| <button class="option-card excel" onclick="showUploadSection('excel')"> | |
| <div class="option-icon">📈</div> | |
| <div class="option-title">Convert to Excel</div> | |
| <div class="option-desc"> | |
| Organize PDF tables into an Excel spreadsheet | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="upload-section" class="upload-section"> | |
| <button class="back-btn" onclick="showMainMenu()"> | |
| ← Back to Menu | |
| </button> | |
| <div class="file-input-wrapper"> | |
| <input | |
| type="file" | |
| id="pdf-file" | |
| class="file-input" | |
| accept=".pdf" | |
| onchange="handleFileSelect(event)" | |
| /> | |
| <label for="pdf-file" class="file-input-label" id="file-label"> | |
| 📄 Choose PDF File or Drag & Drop Here | |
| </label> | |
| <div id="file-name" class="file-name"></div> | |
| </div> | |
| <div class="loading" id="loading"> | |
| <div class="spinner"></div> | |
| <p>Converting your PDF file...</p> | |
| </div> | |
| <div class="progress-bar" id="progress-bar"> | |
| <div class="progress-fill" id="progress-fill"></div> | |
| </div> | |
| <button | |
| class="convert-btn" | |
| id="convert-btn" | |
| onclick="convertFile()" | |
| disabled | |
| > | |
| 🚀 Start Conversion | |
| </button> | |
| <div id="result-section" class="result-section"> | |
| <div id="result-message"></div> | |
| </div> | |
| <div id="debug-info" class="debug-info" style="display: none"> | |
| <strong>Debug Information:</strong> | |
| <div id="debug-content"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let currentFormat = ""; | |
| let selectedFile = null; | |
| let serverOnline = false; | |
| // Check server status on page load | |
| document.addEventListener("DOMContentLoaded", function () { | |
| checkServerStatus(); | |
| // Check server status every 30 seconds | |
| setInterval(checkServerStatus, 30000); | |
| }); | |
| async function checkServerStatus() { | |
| try { | |
| const response = await fetch("/health", { | |
| method: "GET", | |
| mode: "cors", | |
| headers: { | |
| Accept: "application/json", | |
| }, | |
| signal: AbortSignal.timeout(5000), // 5 second timeout | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| updateServerStatus(true, data.message || "Server is online"); | |
| } else { | |
| updateServerStatus(false, `Server returned ${response.status}`); | |
| } | |
| } catch (error) { | |
| updateServerStatus(false, error.message); | |
| } | |
| } | |
| function updateServerStatus(online, message) { | |
| serverOnline = online; | |
| const indicator = document.getElementById("status-indicator"); | |
| if (online) { | |
| indicator.className = "status-indicator status-online"; | |
| indicator.textContent = "Server Online"; | |
| indicator.title = message; | |
| } else { | |
| indicator.className = "status-indicator status-offline"; | |
| indicator.textContent = "Server Offline"; | |
| indicator.title = `Error: ${message}`; | |
| } | |
| } | |
| function showUploadSection(format) { | |
| if (!serverOnline) { | |
| alert("Server is offline. Please start the Flask server first."); | |
| return; | |
| } | |
| currentFormat = format; | |
| document.getElementById("main-menu").style.display = "none"; | |
| document.getElementById("upload-section").classList.add("active"); | |
| resetForm(); // ✅ Always reset when entering upload | |
| const outputInput = document.getElementById("output-name"); | |
| const extensions = { html: ".html", word: ".docx", json: ".json", excel: ".xlsx" }; | |
| outputInput.placeholder = `Enter output filename (e.g., converted_file${extensions[format]})`; | |
| } | |
| function showMainMenu() { | |
| window.location.reload(); | |
| document.getElementById("main-menu").style.display = "block"; | |
| document.getElementById("upload-section").classList.remove("active"); | |
| resetForm(); | |
| selectedFile = null; | |
| } | |
| function resetForm() { | |
| selectedFile = null; | |
| const pdfInput = document.getElementById("pdf-file"); | |
| const outputInput = document.getElementById("output-name"); | |
| const fileName = document.getElementById("file-name"); | |
| const fileLabel = document.getElementById("file-label"); | |
| // Clear inputs | |
| pdfInput.value = ""; | |
| // Hide filename display | |
| fileName.style.display = "none"; | |
| fileName.textContent = ""; | |
| // Reset label text | |
| fileLabel.textContent = "📄 Choose PDF File or Drag & Drop Here"; | |
| // Reset buttons and sections | |
| document.getElementById("convert-btn").disabled = true; | |
| document.getElementById("result-section").style.display = "none"; | |
| document.getElementById("loading").style.display = "none"; | |
| document.getElementById("progress-bar").style.display = "none"; | |
| document.getElementById("debug-info").style.display = "none"; | |
| // Also reset drag-over styling if stuck | |
| document.getElementById("upload-section").classList.remove("drag-over"); | |
| } | |
| function handleFileSelect(event) { | |
| const file = event.target.files[0]; | |
| if (file && file.type === "application/pdf") { | |
| selectedFile = file; | |
| document.getElementById("file-name").textContent = `Selected: ${ | |
| file.name | |
| } (${(file.size / 1024 / 1024).toFixed(2)} MB)`; | |
| document.getElementById("file-name").style.display = "block"; | |
| document.getElementById( | |
| "file-label" | |
| ).textContent = `✅ ${file.name} selected`; | |
| checkFormValidity(); | |
| } else { | |
| alert("Please select a valid PDF file."); | |
| resetFileInput(); | |
| } | |
| } | |
| function resetFileInput() { | |
| selectedFile = null; | |
| document.getElementById("pdf-file").value = ""; | |
| document.getElementById("file-name").style.display = "none"; | |
| document.getElementById("file-label").textContent = | |
| "📄 Choose PDF File or Drag & Drop Here"; | |
| checkFormValidity(); | |
| } | |
| function checkFormValidity() { | |
| const outputName = document.getElementById("output-name").value.trim(); | |
| const convertBtn = document.getElementById("convert-btn"); | |
| if (selectedFile && outputName && serverOnline) { | |
| convertBtn.disabled = false; | |
| convertBtn.textContent = "🚀 Start Conversion"; | |
| } else { | |
| convertBtn.disabled = true; | |
| convertBtn.textContent = serverOnline | |
| ? "🚀 Start Conversion" | |
| : "❌ Server Offline"; | |
| } | |
| } | |
| // Add event listener for output name input | |
| document | |
| .getElementById("output-name") | |
| .addEventListener("input", checkFormValidity); | |
| // Drag and drop functionality | |
| const uploadSection = document.getElementById("upload-section"); | |
| ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => { | |
| uploadSection.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ["dragenter", "dragover"].forEach((eventName) => { | |
| uploadSection.addEventListener(eventName, highlight, false); | |
| }); | |
| ["dragleave", "drop"].forEach((eventName) => { | |
| uploadSection.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| uploadSection.classList.add("drag-over"); | |
| } | |
| function unhighlight() { | |
| uploadSection.classList.remove("drag-over"); | |
| } | |
| uploadSection.addEventListener("drop", handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| if (files.length > 0) { | |
| const file = files[0]; | |
| if (file.type === "application/pdf") { | |
| selectedFile = file; | |
| document.getElementById("file-name").textContent = `Selected: ${ | |
| file.name | |
| } (${(file.size / 1024 / 1024).toFixed(2)} MB)`; | |
| document.getElementById("file-name").style.display = "block"; | |
| document.getElementById( | |
| "file-label" | |
| ).textContent = `✅ ${file.name} selected`; | |
| checkFormValidity(); | |
| } else { | |
| alert("Please drop a valid PDF file."); | |
| } | |
| } | |
| } | |
| function checkFormValidity() { | |
| const convertBtn = document.getElementById("convert-btn"); | |
| if (selectedFile && serverOnline) { | |
| convertBtn.disabled = false; | |
| convertBtn.textContent = "🚀 Start Conversion"; | |
| } else { | |
| convertBtn.disabled = true; | |
| convertBtn.textContent = serverOnline | |
| ? "🚀 Start Conversion" | |
| : "❌ Server Offline"; | |
| } | |
| } | |
| async function convertFile() { | |
| if (!selectedFile || !currentFormat) { | |
| alert("Please select a file and format."); | |
| return; | |
| } | |
| if (!serverOnline) { | |
| alert("Server is offline. Please start the Flask server first."); | |
| return; | |
| } | |
| const outputName = selectedFile.name.replace(/\.[^/.]+$/, ""); | |
| document.getElementById("loading").style.display = "block"; | |
| document.getElementById("progress-bar").style.display = "block"; | |
| document.getElementById("convert-btn").disabled = true; | |
| document.getElementById("result-section").style.display = "none"; | |
| document.getElementById("debug-info").style.display = "none"; | |
| simulateProgress(); | |
| const formData = new FormData(); | |
| formData.append("file", selectedFile); | |
| formData.append("format", currentFormat); | |
| formData.append("output_name", outputName); | |
| const debugInfo = { | |
| fileName: selectedFile.name, | |
| fileSize: selectedFile.size, | |
| format: currentFormat, | |
| outputName: outputName, | |
| timestamp: new Date().toISOString(), | |
| }; | |
| try { | |
| console.log("🔄 Starting conversion...", debugInfo); | |
| const controller = new AbortController(); | |
| const timeoutId = setTimeout(() => controller.abort(), 420000); // 60 second timeout | |
| const response = await fetch("/convert", { | |
| method: "POST", | |
| body: formData, | |
| headers: { | |
| Accept: "application/json", | |
| }, | |
| mode: "cors", | |
| signal: controller.signal, | |
| }); | |
| clearTimeout(timeoutId); | |
| console.log("📡 Response status:", response.status); | |
| if (!response.ok) { | |
| const errorText = await response.text(); | |
| throw new Error(`Server returned ${response.status}: ${errorText}`); | |
| } | |
| const result = await response.json(); | |
| console.log("✅ Conversion result:", result); | |
| // Hide loading | |
| document.getElementById("loading").style.display = "none"; | |
| document.getElementById("progress-bar").style.display = "none"; | |
| // Show result | |
| const resultSection = document.getElementById("result-section"); | |
| const resultMessage = document.getElementById("result-message"); | |
| if (result.success) { | |
| resultSection.className = "result-section result-success"; | |
| resultMessage.innerHTML = `<h3>✅ Conversion Successful!</h3> | |
| <p>Your PDF has been converted to ${currentFormat.toUpperCase()} format.</p> | |
| <p><strong>Output file:</strong> ${ | |
| result.output_path || "Generated successfully" | |
| }</p>`; | |
| if (result.download_url) { | |
| const downloadUrl = `${window.location.origin}${result.download_url}`; | |
| // Add link for user | |
| resultMessage.innerHTML += `<p><a href="${downloadUrl}" target="_blank" style="color: #155724; text-decoration: none; font-weight: bold;">📥 Download File</a></p>`; | |
| // ⬇️ Auto-download | |
| const a = document.createElement("a"); | |
| a.href = downloadUrl; | |
| a.download = result.output_path || "converted_file"; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| } | |
| } else { | |
| resultSection.className = "result-section result-error"; | |
| resultMessage.innerHTML = ` | |
| <h3>❌ Conversion Failed</h3> | |
| <p>${ | |
| result.error || "An unexpected error occurred." | |
| }</p> | |
| `; | |
| } | |
| resultSection.style.display = "block"; | |
| } catch (error) { | |
| console.error("❌ Error during conversion:", error); | |
| // Hide loading | |
| document.getElementById("loading").style.display = "none"; | |
| document.getElementById("progress-bar").style.display = "none"; | |
| // Show error | |
| const resultSection = document.getElementById("result-section"); | |
| const resultMessage = document.getElementById("result-message"); | |
| resultSection.className = "result-section result-error"; | |
| let errorMessage = "An unexpected error occurred."; | |
| if (error.name === "AbortError") { | |
| errorMessage = | |
| "Request timed out. The file might be too large or the server is taking too long to respond."; | |
| } else if (error.message.includes("Failed to fetch")) { | |
| errorMessage = | |
| "Cannot connect to server. Please ensure the Flask server is running on http://localhost:5000"; | |
| } else { | |
| errorMessage = error.message; | |
| } | |
| resultMessage.innerHTML = ` | |
| <h3>❌ Conversion Error</h3> | |
| <p>${errorMessage}</p> | |
| `; | |
| resultSection.style.display = "block"; | |
| // Show debug information | |
| const debugElement = document.getElementById("debug-info"); | |
| const debugContent = document.getElementById("debug-content"); | |
| debugContent.innerHTML = ` | |
| <div class="error-details"> | |
| <strong>Error Details:</strong><br> | |
| Type: ${error.name}<br> | |
| Message: ${error.message}<br> | |
| <br> | |
| <strong>Request Details:</strong><br> | |
| ${JSON.stringify(debugInfo, null, 2)} | |
| <br> | |
| <strong>Troubleshooting:</strong><br> | |
| 1. Ensure Flask server is running: python app.py<br> | |
| 2. Check server logs for errors<br> | |
| 3. Verify file size is under 100MB<br> | |
| 4. Check browser console for additional errors | |
| </div> | |
| `; | |
| debugElement.style.display = "block"; | |
| } | |
| document.getElementById("convert-btn").disabled = false; | |
| checkFormValidity(); // Update button state | |
| } | |
| function simulateProgress() { | |
| const progressFill = document.getElementById("progress-fill"); | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 15; | |
| if (progress > 90) progress = 90; | |
| progressFill.style.width = progress + "%"; | |
| if (progress >= 90) { | |
| clearInterval(interval); | |
| } | |
| }, 200); | |
| // Reset progress after animation | |
| setTimeout(() => { | |
| progressFill.style.width = "0%"; | |
| }, 5000); | |
| } | |
| </script> | |
| </body> | |
| </html> | |