templates/processing.html

{% extends "layout.html" %}

{% block title %}प्रोसेसिंग...{% endblock %}

{% block styles %}
    body{display:flex;align-items:center;justify-content:center;min-height:100vh}
    #log-output{white-space:pre-wrap;background-color:rgba(0,0,0,.3);font-family:monospace;max-height:400px;overflow-y:auto;border-radius:8px;border:1px solid var(--border-color)}
    .progress-bar{background:var(--gradient)}
    .progress{height:25px;border-radius:8px;background-color:rgba(0,0,0,.3)}
{% endblock %}

{% block content %}
<div class="card p-4 p-md-5 w-100">
    <h2 class="text-center">मिशन कंट्रोल</h2>
    <p id="status-text" class="text-center text-muted">प्रक्रिया शुरू हो रही है...</p>
    <div class="progress mb-3" role="progressbar">
        <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress-bar" style="width:0%">0%</div>
    </div>
    <pre id="log-output" class="p-3"></pre>
</div>
{% endblock %}

{% block scripts %}
<script>
    const taskId = "{{ task_id }}";
    const progressBar = document.getElementById("progress-bar");
    const statusText = document.getElementById("status-text");
    const logOutput = document.getElementById("log-output");
    
    const pollingInterval = setInterval(async () => {
        try {
            const response = await fetch(`/progress/${taskId}`);
            const data = await response.json();
            const lastLog = data.log.trim().split("\n").pop();
            
            statusText.innerText = lastLog || "प्रतीक्षा में...";
            progressBar.style.width = data.progress + "%";
            progressBar.innerText = data.progress + "%";
            logOutput.innerText = data.log;
            logOutput.scrollTop = logOutput.scrollHeight;
            
            if (data.status === "complete") {
                clearInterval(pollingInterval);
                window.location.href = `/result/${data.output_filename}`;
            } else if (data.status === "error") {
                clearInterval(pollingInterval);
                statusText.innerText = "कोई त्रुटि हुई! विवरण के लिए लॉग देखें।";
                progressBar.classList.remove("bg-success");
                progressBar.classList.add("bg-danger");
            }
        } catch (error) {
            clearInterval(pollingInterval);
            statusText.innerText = "सर्वर से कनेक्शन टूट गया।";
        }
    }, 1500);
</script>
{% endblock %}