{include file="head.html"}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft Yahei", "Helvetica Neue", sans-serif;
        }

        :root {
            --primary: #b40606;
            --primary-light: #d62222;
            --text-dark: #222;
            --text-gray: #666;
            --text-light: #999;
            --bg-white: #fff;
            --bg-light: #f8f8f8;
            --border-color: #eee;
            --shadow-light: 0 2px 12px rgba(0,0,0,0.05);
            --shadow-medium: 0 8px 30px rgba(0,0,0,0.08);
            --radius-normal: 8px;
            --radius-large: 12px;
        }

        body {
            background-color: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.6;
            padding-top: 70px; /* fixed导航高度，防止内容被导航遮挡 */
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }
        /* ========== AI试衣模块样式 ========== */
        .section-bg-light {
            padding: 60px 0;
        }
        .card {
            background: var(--bg-white);
            border-radius: var(--radius-large);
            padding: 40px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-medium);
            backdrop-filter: blur(10px);
        }
        .two-img {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }
        .upload-box {
            flex: 1;
            border: 2px dashed #c8ccd4;
            border-radius: var(--radius-normal);
            aspect-ratio: 3/4;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            background: var(--bg-light);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            overflow: hidden;
        }
        .upload-box:hover {
            border-color: var(--primary);
            background: #fef0f0;
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(180,6,6,0.12);
        }
        .upload-box input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
        }
        .upload-box img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: var(--radius-normal);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            transition: all 0.3s ease;
        }
        .upload-icon {
            font-size: 64px;
            color: var(--primary);
            margin-bottom: 20px;
            transition: all 0.3s ease;
            z-index: 0;
        }
        .upload-box:hover .upload-icon {
            transform: scale(1.1);
            color: var(--primary-light);
        }
        .upload-text {
            color: var(--text-gray);
            font-size: 18px;
            text-align: center;
            font-weight: 500;
            z-index: 0;
        }
        .btn {
            width: 100%;
            padding: 20px;
            background: #014959;
            border: none;
            border-radius: var(--radius-normal);
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            margin: 12px 0;
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           box-shadow: 0 6px 20px rgba(180,6,6,0.15);
           position: relative;
           overflow: hidden;
           letter-spacing: 1px;
        }
        .btn::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        .btn:active::after {
            width: 400px;
            height: 400px;
            opacity: 0;
        }
        .btn:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(180,6,6,0.25);
        }
        .btn:disabled {
            background: #00243e;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }
        .progress-container {
            width: 100%;
            height: 10px;
            background: var(--bg-light);
            border-radius: 5px;
            margin: 15px 0;
            overflow: hidden;
            display: none;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 5px;
        }
        .result {
            margin-top: 30px;
            padding: 30px;
            background: var(--bg-white);
            border-radius: var(--radius-large);
            box-shadow: var(--shadow-medium);
            border: 1px solid var(--border-color);
            text-align: center;
        }
        .result img {
            width: 100%;
            max-width: 800px;
            border-radius: var(--radius-normal);
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .result img:hover {
            transform: scale(1.02);
        }
        .tip {
            text-align: center;
            color: var(--text-gray);
            font-size: 18px;
            margin: 20px 0;
            line-height: 1.6;
        }
        .prompt-btns, #tryon_prompt, .card input[type="text"] {
            display: none !important;
        }
    </style>
    <!-- AI试衣主体 -->
    <section class="section-bg-light">
        <div class="container">
            <div class="card">
                <div class="two-img">
                    <div class="upload-box" id="clothBox">
                        <input type="file" id="file_p1" accept="image/jpeg,image/png">
                        <img id="prev_p1" style="display:none">
                        <i class="fas fa-tshirt upload-icon"></i>
                        <div class="upload-text">选择服装图</div>
                    </div>
                    <div class="upload-box">
                        <input type="file" id="file_p2" accept="image/jpeg,image/png">
                        <img id="prev_p2" style="display:none">
                        <i class="fas fa-user upload-icon"></i>
                        <div class="upload-text">选择人物图</div>
                    </div>
                </div>

                <button class="btn" onclick="uploadMerge()">上传图片至服务器</button>
                <div class="progress-container" id="progress_merge">
                    <div class="progress-bar"></div>
                </div>

                <input type="text" id="url_p1" readonly>
                <input type="text" id="url_p2" readonly>
                <textarea id="tryon_prompt"></textarea>
                
                <button class="btn" id="btn_merge" onclick="runMerge()">✨ 开始智能试衣</button>

                <div class="result" id="res_merge"></div>
            </div>
        </div>
    </section>
<script>
const UPLOAD_CLOTH = "/api/upload/tryon";
const UPLOAD_AVATAR = "/api/upload/avatar";
const RUN_TASK = "/api/tryon/run";

const COMPRESS_CONFIG = {
    maxSize: 5 * 1024 * 1024,
    maxWidth: 1080,
    quality: 0.8
};

let pollTimer = null;
let uploadClothSuccess = false;
let uploadAvatarSuccess = false;
let isPolling = false;
const MAX_POLL_COUNT = 60;

function getQueryString(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    const match = window.location.search.substr(1).match(reg);
    return match ? decodeURIComponent(match[2]) : "";
}

function prev(input, imgId) {
    const file = input.files[0];
    if (!file) return;
    compressImage(file).then(compressedFile => {
        const previewImg = document.getElementById(imgId);
        previewImg.src = URL.createObjectURL(compressedFile);
        previewImg.style.display = "block";
        const parentBox = input.parentElement;
        parentBox.querySelector('.upload-text').style.display = "none";
    });
}

function compressImage(file) {
    return new Promise((resolve) => {
        if (!file.type.startsWith('image/')) {
            resolve(file);
            return;
        }
        let tempQuality = COMPRESS_CONFIG.quality;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            const img = new Image();
            img.src = e.target.result;
            img.onload = function () {
                const canvas = document.createElement('canvas');
                let { width, height } = img;
                if (width > COMPRESS_CONFIG.maxWidth) {
                    height = height * (COMPRESS_CONFIG.maxWidth / width);
                    width = COMPRESS_CONFIG.maxWidth;
                }
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, width, height);
                ctx.drawImage(img, 0, 0, width, height);

                const loopCompress = () => {
                    canvas.toBlob((blob) => {
                        if (blob.size > COMPRESS_CONFIG.maxSize && tempQuality > 0.3) {
                            tempQuality -= 0.1;
                            loopCompress();
                            return;
                        }
                        const compressedFile = new File([blob], file.name, {
                            type: file.type || 'image/jpeg',
                            lastModified: Date.now()
                        });
                        resolve(compressedFile);
                    }, file.type || 'image/jpeg', tempQuality);
                };
                loopCompress();
            };
        };
    });
}

window.onload = function () {
    const promptInput = document.getElementById('tryon_prompt');
    promptInput.value = "精准提取服装穿在人物身上，保留人物原貌，固定人物基准，高清质感";
    promptInput.disabled = false;

    const clothUrl = getQueryString("clothUrl");
    if (clothUrl) {
        const imgDom = document.getElementById("prev_p1");
        imgDom.onload = function () {
            imgDom.style.display = "block";
            document.querySelector("#clothBox .upload-text").style.display = "none";
        };
        imgDom.onerror = function () {
            alert("商品服装图加载失败，请手动重新上传服装图片");
        };
        imgDom.src = clothUrl;
        document.getElementById("url_p1").value = clothUrl;
    }

    document.getElementById('file_p1').onchange = (e) => prev(e.target, 'prev_p1');
    document.getElementById('file_p2').onchange = (e) => prev(e.target, 'prev_p2');
};

async function up(fileId, progressId) {
    const fileInput = document.getElementById(fileId);
    const file = fileInput.files[0];
    if (!file) throw new Error("请选择图片");
    const compressedFile = await compressImage(file);
    const formData = new FormData();
    const uploadUrl = fileId === 'file_p1' ? UPLOAD_CLOTH : UPLOAD_AVATAR;
    if (fileId === 'file_p1') {
        formData.append("cloth", compressedFile);
    } else {
        formData.append("avatar", compressedFile);
    }
    const progressContainer = document.getElementById(progressId);
    const progressBar = progressContainer.querySelector('.progress-bar');
    progressContainer.style.display = "block";
    progressBar.style.width = "0%";
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", uploadUrl);
        xhr.upload.addEventListener("progress", (e) => {
            if (e.lengthComputable) {
                const percent = (e.loaded / e.total) * 100;
                progressBar.style.width = percent + "%";
            }
        });
        xhr.onload = () => {
            progressBar.style.width = "100%";
            setTimeout(() => progressContainer.style.display = "none", 500);
            const resData = JSON.parse(xhr.responseText);
            console.log("上传返回：", resData);
            if (xhr.status === 200 && resData.code === 200) {
                resolve(resData.data.url);
            } else {
                reject(new Error(resData.msg || `服务器上传失败，错误码：${xhr.status}`));
            }
        };
        xhr.onerror = () => {
            progressContainer.style.display = "none";
            reject(new Error("网络请求失败，无法连接后端接口"));
        };
        xhr.send(formData);
    });
}

async function uploadMerge() {
    const btn = event.target;
    btn.disabled = true;
    btn.textContent = "上传中...";
    document.getElementById('res_merge').innerHTML = '';
    uploadClothSuccess = false;
    uploadAvatarSuccess = false;
    let newClothUrl = "";
    let newAvatarUrl = "";

    try {
        const clothInput = document.getElementById("file_p1");
        const hasLocalClothFile = !!clothInput.files[0];
        const queryClothUrl = getQueryString("clothUrl");

        if (hasLocalClothFile) {
            newClothUrl = await up('file_p1', 'progress_merge');
            uploadClothSuccess = true;
        } else if (queryClothUrl) {
            const imgRes = await fetch(queryClothUrl);
            if (!imgRes.ok) throw new Error("远程服装图片无法下载");
            const blob = await imgRes.blob();
            const tempFile = new File([blob], "temp_cloth.jpg", { type: blob.type });
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(tempFile);
            clothInput.files = dataTransfer.files;
            newClothUrl = await up('file_p1', 'progress_merge');
            uploadClothSuccess = true;
        } else {
            throw new Error("未检测到服装图片，请选择服装图或从商城商品页跳转");
        }

        const avatarInput = document.getElementById("file_p2");
        if (!avatarInput.files[0]) {
            throw new Error("请手动上传人物自拍图片");
        }
        newAvatarUrl = await up('file_p2', 'progress_merge');
        uploadAvatarSuccess = true;

        document.getElementById("url_p1").value = newClothUrl;
        document.getElementById("url_p2").value = newAvatarUrl;

        if (uploadClothSuccess && uploadAvatarSuccess) {
            btn.textContent = "两张图片上传成功";
            setTimeout(() => {
                btn.textContent = "上传图片至服务器";
                btn.disabled = false;
            }, 2000);
        }
    } catch (err) {
        console.error("上传异常：", err);
        alert(err.message);
        btn.textContent = "上传图片至服务器";
        btn.disabled = false;
    }
}

async function runMerge() {
    if (pollTimer) clearTimeout(pollTimer);
    if (isPolling) return;

    const clothUrl = document.getElementById('url_p1').value;
    const avatarUrl = document.getElementById('url_p2').value;
    const promptText = document.getElementById('tryon_prompt').value;
    if (!clothUrl || !avatarUrl) return alert("请先上传服装图和人物图");

    const submitBtn = document.getElementById('btn_merge');
    submitBtn.disabled = true;
    const resWrap = document.getElementById('res_merge');
    resWrap.innerHTML = '<div class="tip">AI试衣中，请稍候...</div>';

    try {
        const fetchRes = await fetch(RUN_TASK, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                avatar_url: avatarUrl,
                cloth_url: clothUrl,
                prompt: promptText,
                watermark: false
            })
        });
        const taskData = await fetchRes.json();
        if (taskData.code !== 200) {
            resWrap.innerHTML = `<div class="tip">${taskData.msg || "任务提交失败"}</div>`;
            submitBtn.disabled = false;
            return;
        }
        const taskId = taskData.data.task_id;
        let pollCount = 0;
        isPolling = true;

        const pollTask = async () => {
            pollCount++;
            if (pollCount >= MAX_POLL_COUNT) {
                pollTimer = null;
                isPolling = false;
                resWrap.innerHTML = '<div class="tip">任务轮询超时，请重新提交</div>';
                submitBtn.disabled = false;
                return;
            }

            try {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), 10000);

                const queryRes = await fetch("/api/tryon/query", {
                    method: "POST",
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ task_id: taskId }),
                    signal: controller.signal
                });
                clearTimeout(timeoutId);
                const queryData = await queryRes.json();
                console.log("轮询接口返回：", queryData);

                if (queryData.code === 200) {
                    pollTimer = null;
                    isPolling = false;
                    const imgUrl = queryData.data.result_img;

                    const loadImg = new Image();
                    loadImg.src = imgUrl;
                    loadImg.onload = () => {
                        resWrap.innerHTML = `
                            <img src="${imgUrl}" alt="智能试衣效果图" style="max-width:100%;display:block;margin:10px auto;">
                            <p class="tip">AI试衣效果图生成完成</p>
                        `;
                        submitBtn.disabled = false;
                    };
                    loadImg.onerror = () => {
                        resWrap.innerHTML = '<div class="tip">图片加载失败，请刷新重试</div>';
                        submitBtn.disabled = false;
                    };
                    return;
                }
                pollTimer = setTimeout(pollTask, 2000);
            } catch (pollErr) {
                console.warn("轮询波动，3秒重试", pollErr);
                pollTimer = setTimeout(pollTask, 3000);
            }
        };
        pollTask();
    } catch (err) {
        resWrap.innerHTML = '<div class="tip">提交任务网络出错</div>';
        submitBtn.disabled = false;
        console.error("提交任务异常：", err);
    }
}
</script>
{include file="foot.html"}