docs/http/api_doc_demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document OCR Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #log {
            white-space: pre-wrap;
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ccc;
            margin-top: 10px;
            height: 300px;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <h1>Document OCR Demo</h1>
    <form id="taskForm">
        <label for="base_url">Base URL:</label>
        <input type="text" id="base_url" name="base_url" value="http://127.0.0.1:1224" required>
        <br><br>
        <label for="file_path">File Path:</label>
        <input type="file" id="file_path" name="file_path" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="text" id="password" name="password">
        <br><br>
        <button type="submit">Start Task</button>
        <button type="button" id="stopClearTask">Stop/Clear Task</button>
    </form>
    <div id="log"></div>
    <div id="result"></div>

    <script>
        let currentTaskId = null;  // 记录当前任务ID
        let isTaskRunning = false; // 记录任务状态

        document.getElementById('taskForm').addEventListener('submit', async function (event) {
            event.preventDefault();

            const log = document.getElementById('log');
            const result = document.getElementById('result');
            log.innerHTML = '';
            result.innerHTML = '';

            const baseUrl = document.getElementById('base_url').value;
            const fileInput = document.getElementById('file_path').files[0];
            const password = document.getElementById('password').value;

            if (!fileInput) {
                log.innerHTML += "Please select a file.\n";
                return;
            }

            const missionOptions = {
                "doc.extractionMode": "fullPage",
                "password": password,
            };

            const downloadOptions = {
                "file_types": [
                    "pdfLayered",
                ],
                // ↓ `ingore_blank` is a typo. If you are using Umi-OCR version 2.1.4 or earlier, please use this incorrect spelling.
                // ↓ If you are using the latest code-built version of Umi-OCR, please use the corrected spelling `ignore_blank`.
                "ingore_blank": false,
            };

            try {
                log.innerHTML += "===== 1. Upload file, get task ID =====\n";
                const formData = new FormData();
                formData.append('file', fileInput);
                formData.append('json', JSON.stringify(missionOptions));

                let response = await fetch(`${baseUrl}/api/doc/upload`, {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`Task submission failed: ${response.statusText}`);
                }

                const resData = await response.json();
                if (resData.code !== 100) {
                    throw new Error(`Task submission failed: ${JSON.stringify(resData)}`);
                }

                currentTaskId = resData.data;
                isTaskRunning = true;
                log.innerHTML += `Task ID: ${currentTaskId}\n`;

                log.innerHTML += "===== 2. Poll task status until OCR task ends =====\n";
                while (true) {
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    if (!isTaskRunning) return;
                    response = await fetch(`${baseUrl}/api/doc/result`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            id: currentTaskId,
                            is_data: true,
                            format: 'text',
                            is_unread: true
                        })
                    });

                    if (!response.ok) {
                        throw new Error(`Failed to get task status: ${response.statusText}`);
                    }

                    const statusData = await response.json();
                    if (statusData.code !== 100) {
                        throw new Error(`Failed to get task status: ${JSON.stringify(statusData)}`);
                    }

                    log.innerHTML += `Progress: ${statusData.processed_count}/${statusData.pages_count}\n`;
                    if (statusData.data) {
                        log.innerHTML += `${statusData.data}\n========================\n`;
                    }
                    if (statusData.is_done) {
                        if (statusData.state !== 'success') {
                            throw new Error(`Task execution failed: ${statusData.message}`);
                        }
                        log.innerHTML += "OCR task completed.\n";
                        break;
                    }
                }

                if (!isTaskRunning) return;
                log.innerHTML += "===== 3. Generate target file, get download link =====\n";
                downloadOptions.id = currentTaskId;
                response = await fetch(`${baseUrl}/api/doc/download`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(downloadOptions)
                });

                if (!response.ok) {
                    throw new Error(`Failed to get download URL: ${response.statusText}`);
                }

                const downloadData = await response.json();
                if (downloadData.code !== 100) {
                    throw new Error(`Failed to get download URL: ${JSON.stringify(downloadData)}`);
                }

                const downloadUrl = downloadData.data;
                const fileName = downloadData.name;

                if (!isTaskRunning) return;
                log.innerHTML += "===== 4. Download target file =====\n";
                log.innerHTML += `URL: ${downloadUrl}\n`;
                result.innerHTML = `<a href="${downloadUrl}" target="_blank">Download ${fileName}</a>`;

                log.innerHTML += "======================\nProcess completed.\n";
                isTaskRunning = false;

            } catch (error) {
                log.innerHTML += `Error: ${error.message}\n`;
                isTaskRunning = false;
            }
        });

        document.getElementById('stopClearTask').addEventListener('click', async function () {
            const log = document.getElementById('log');
            const baseUrl = document.getElementById('base_url').value;

            if (!currentTaskId) {
                log.innerHTML += "No task has been submitted yet.\n";
                return;
            }

            log.innerHTML = '';
            if (isTaskRunning) {
                isTaskRunning = false;
                log.innerHTML += "Task stopped.\n";
            }

            try {
                const response = await fetch(`${baseUrl}/api/doc/clear/${currentTaskId}`, {
                    method: 'GET'
                });

                const resData = await response.json();
                if (resData.code === 100) {
                    log.innerHTML += "Cleanup completed.\n";
                } else {
                    log.innerHTML += `Error during cleanup: ${JSON.stringify(resData)}\n`;
                }
                currentTaskId = null;

            } catch (error) {
                log.innerHTML += `Error: ${error.message}\n`;
            }
        });
    </script>
</body>

</html>