<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>免责条款格式化</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-8">
            <h1 class="text-3xl font-bold mb-6 text-center text-indigo-600">免责条款格式化</h1>
            <div class="mb-8">
                <p class="mb-4 text-gray-700">请上传Excel文件，表中包含三列：产品编号，产品名称，产品免责文本。注意：表格首行为标题</p>
                <p class="text-gray-700">返回结果为一个Excel文件，包含五列：产品编号，产品名称，原文本，结构化信息(key)，结构化信息(text)。点击上传后，需要等待一段时间（处理时长取决于上传的产品数量和免责条款长度，两个产品大概需要2~3分钟）</p>
            </div>
            <div class="flex justify-center mb-8">
                <div class="relative">
                    <input type="file" id="fileInput" accept=".xlsx" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer">
                    <label for="fileInput" class="bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-3 px-6 rounded-full flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        选择文件
                    </label>
                </div>
            </div>
            <div class="text-center">
                <button id="uploadButton" class="bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-8 rounded-full transition duration-300" disabled>
                    上传并处理
                </button>
            </div>
        </div>
    </div>

    <script>
        // 保持原有的 JavaScript 逻辑不变
        const fileInput = document.getElementById('fileInput');
        const uploadButton = document.getElementById('uploadButton');

        fileInput.addEventListener('change', function () {
            if (fileInput.files.length > 0) {
                uploadButton.disabled = false;
            } else {
                uploadButton.disabled = true;
            }
        });

        uploadButton.addEventListener('click', function () {
            if (fileInput.files.length === 0) return;

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            console.log([...formData.entries()]);

            fetch('http://101.36.73.164:29666/term_format', {
                method: 'POST',
                body: formData,
                timeout: 600000
            }).then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.blob();
            })
            .then(blob => {
                const url = window.URL.createObjectURL(new Blob([blob]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'processed_file.xlsx');
                document.body.appendChild(link);
                link.click();
                link.parentNode.removeChild(link);
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>