{% extends "base.html" %}

{% block title %}降AIGC - AI创作工作台{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6 flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">🔍 降AIGC工具</h1>
            <p class="text-gray-600">降低AI生成文本的检测率，使其更接近人类自然语言风格。参考 humanizer 35种AI写作特征模式与 TXT_AIGC。</p>
            <p class="text-gray-500 text-sm mt-1">处理参数可在 <a href="/settings" class="text-blue-600 hover:underline">系统设置 → AIGC设置</a> 中调整，无需改代码。</p>
        </div>
        <button id="detectBtn" onclick="openDetect()"
            class="ml-4 shrink-0 bg-emerald-600 text-white px-5 py-3 rounded-lg hover:bg-emerald-700 transition flex items-center gap-2">
            🔗 腾讯AIGC检测（验证效果）
        </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 左侧：输入 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold text-gray-700">原始文本</h2>
                <button id="clearBtn" class="text-sm text-gray-500 hover:text-gray-700">清空</button>
            </div>
            <textarea id="inputText" class="w-full h-80 p-4 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="粘贴AI生成的文本内容..."></textarea>
            
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">处理模式</label>
                <div class="flex gap-3">
                    <label class="flex-1 flex items-center gap-2 p-3 border-2 border-blue-600 bg-blue-50 rounded-lg cursor-pointer">
                        <input type="radio" name="mode" value="llm" checked>
                        <span class="text-sm">
                            <span class="font-medium text-blue-700 block">LLM深度改写（推荐）</span>
                            <span class="text-xs text-gray-500">调用系统大模型，效果最好</span>
                        </span>
                    </label>
                    <label class="flex-1 flex items-center gap-2 p-3 border-2 border-gray-200 rounded-lg cursor-pointer">
                        <input type="radio" name="mode" value="hybrid">
                        <span class="text-sm">
                            <span class="font-medium text-gray-700 block">混合模式</span>
                            <span class="text-xs text-gray-500">LLM改写后安全精修</span>
                        </span>
                    </label>
                    <label class="flex-1 flex items-center gap-2 p-3 border-2 border-gray-200 rounded-lg cursor-pointer">
                        <input type="radio" name="mode" value="rule">
                        <span class="text-sm">
                            <span class="font-medium text-gray-700 block">规则模式</span>
                            <span class="text-xs text-gray-500">快速，无需大模型</span>
                        </span>
                    </label>
                </div>
            </div>

            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    处理强度：<span id="intensityValue">70%</span>
                </label>
                <input type="range" id="intensitySlider" min="0" max="100" value="70" 
                    class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                <div class="flex justify-between text-xs text-gray-500 mt-1">
                    <span>轻柔</span>
                    <span>均衡</span>
                    <span>强力</span>
                </div>
            </div>
            
            <div class="mt-4 flex gap-3">
                <button id="rewriteBtn" class="flex-1 bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition">
                    ✨ 开始降AIGC
                </button>
                <button id="scoreBtn" class="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition">
                    📊 检测评分
                </button>
            </div>
        </div>

        <!-- 右侧：输出 -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold text-gray-700">降AIGC后</h2>
                <button id="copyBtn" class="text-sm text-gray-500 hover:text-gray-700">复制全文</button>
            </div>
            <textarea id="outputText" class="w-full h-80 p-4 border border-gray-300 rounded-lg resize-none bg-gray-50"
                placeholder="处理后的文本将显示在这里..." readonly></textarea>
            
            <!-- 评分对比 -->
            <div id="scoreCard" class="mt-4 p-4 bg-gray-50 rounded-lg hidden">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">📈 AIGC检测评分对比</h3>
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div>
                        <div class="text-2xl font-bold text-red-500" id="originalScore">--</div>
                        <div class="text-xs text-gray-500">原始评分</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold text-green-500" id="rewrittenScore">--</div>
                        <div class="text-xs text-gray-500">处理后评分</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold text-blue-500" id="improvement">--</div>
                        <div class="text-xs text-gray-500">降低幅度</div>
                    </div>
                </div>
                <div class="mt-3 text-xs text-gray-500">
                    评分越低越像人类写作，理想目标是降到30以下
                </div>
            </div>
        </div>
    </div>

    <!-- 使用说明 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mt-6">
        <h2 class="text-lg font-semibold text-gray-700 mb-4">💡 使用说明</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-gray-600">
            <div class="p-4 bg-blue-50 rounded-lg">
                <div class="font-medium text-blue-700 mb-2">1. 粘贴文本</div>
                <p>将AI生成的文本粘贴到左侧输入框</p>
            </div>
            <div class="p-4 bg-green-50 rounded-lg">
                <div class="font-medium text-green-700 mb-2">2. 调整强度</div>
                <p>根据需要调整处理强度，轻轻柔处理可保留更多原意</p>
            </div>
            <div class="p-4 bg-purple-50 rounded-lg">
                <div class="font-medium text-purple-700 mb-2">3. 一键处理</div>
                <p>点击按钮自动降AIGC，支持复制结果</p>
            </div>
        </div>
        
        <div class="mt-6 p-4 bg-yellow-50 rounded-lg">
            <h3 class="font-medium text-yellow-800 mb-2">⚠️ 注意事项</h3>
            <ul class="text-sm text-yellow-700 space-y-1">
                <li>• 处理后会适当改写句式和用词，但尽量保留原文的核心意思</li>
                <li>• 建议处理后人工审核一遍，确保语义准确</li>
                <li>• 学术论文等正式文本请谨慎使用，避免影响专业表达</li>
            </ul>
        </div>
    </div>

    <!-- humanizer skill 使用说明 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mt-6">
        <h2 class="text-lg font-semibold text-gray-700 mb-2">🤖 在 AI Agent 中调用 humanizer skill</h2>
        <p class="text-sm text-gray-600 mb-3">
            本页工具效果不满意时，可在你自己的 AI 编码 Agent（Codex / Claude Code / Cursor 等）中安装开源
            <a href="https://github.com/blader/humanizer" target="_blank" class="text-blue-600 hover:underline">humanizer</a>
            skill（MIT 协议，基于维基百科「Signs of AI writing」35 种 AI 写作特征），自行改写文本对比效果。
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="font-medium text-gray-700 mb-2">一键安装</div>
                <code class="block bg-gray-100 px-2 py-1 rounded text-xs break-all">npx skills add blader/humanizer</code>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="font-medium text-gray-700 mb-2">或手动放置</div>
                <p class="text-xs text-gray-500 leading-relaxed">
                    Claude Code → <code>.claude/skills/humanizer/</code><br>
                    Codex → <code>.agent/skills/humanizer/</code><br>
                    其他 Agent → skills 目录（如 <code>.cursor/skills/</code>）
                </p>
            </div>
        </div>
        <div class="mt-4 p-4 bg-indigo-50 rounded-lg text-sm text-indigo-800">
            <span class="font-medium">调用方式：</span>在 Agent 对话中粘贴文本并说「用 humanizer 帮我改写这段文本」即可。
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const intensitySlider = document.getElementById('intensitySlider');
const intensityValue = document.getElementById('intensityValue');
const rewriteBtn = document.getElementById('rewriteBtn');
const scoreBtn = document.getElementById('scoreBtn');
const clearBtn = document.getElementById('clearBtn');
const copyBtn = document.getElementById('copyBtn');
const scoreCard = document.getElementById('scoreCard');

// 从系统设置加载检测链接、默认强度与LLM深度模式开关
let detectUrl = 'https://matrix.tencent.com/ai-detect/ai_gen_txt';
async function loadDeAigcConfig() {
    try {
        const r = await fetch('/api/de-aigc/config');
        const d = await r.json();
        if (d.success && d.config) {
            detectUrl = d.config.detect_url || detectUrl;
            if (d.config.intensity != null) {
                const v = Math.round(d.config.intensity * 100);
                intensitySlider.value = v;
                intensityValue.textContent = v + '%';
            }
            const llmEnabled = d.config.methods && d.config.methods.llm_rewrite && d.config.methods.llm_rewrite.enabled;
            if (!llmEnabled) {
                // LLM深度未启用：默认规则模式并禁用LLM相关选项
                const radios = document.querySelectorAll('input[name="mode"]');
                radios.forEach(r2 => { if (r2.value === 'rule') r2.checked = true; });
                document.querySelectorAll('input[name="mode"][value="llm"], input[name="mode"][value="hybrid"]')
                    .forEach(r2 => { r2.disabled = true; r2.closest('label').style.opacity = '0.5'; });
            }
        }
    } catch (e) { /* 配置加载失败使用默认值 */ }
}
function getMode() {
    const sel = document.querySelector('input[name="mode"]:checked');
    return sel ? sel.value : 'rule';
}
function openDetect() {
    window.open(detectUrl, '_blank');
}
loadDeAigcConfig();

intensitySlider.addEventListener('input', () => {
    intensityValue.textContent = intensitySlider.value + '%';
});

rewriteBtn.addEventListener('click', async () => {
    const text = inputText.value.trim();
    if (!text) {
        alert('请输入要处理的文本');
        return;
    }
    
    const mode = getMode();
    rewriteBtn.disabled = true;
    rewriteBtn.textContent = mode === 'rule' ? '处理中...' : 'LLM改写中（约10-30秒）...';
    
    try {
        const response = await fetch('/api/de-aigc/rewrite', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                text: text,
                intensity: parseInt(intensitySlider.value) / 100,
                mode: mode
            })
        });
        
        const data = await response.json();
        if (data.success) {
            outputText.value = data.rewritten;
            showScores(data.scores);
        } else {
            alert('处理失败: ' + (data.detail || '未知错误'));
        }
    } catch (e) {
        alert('请求失败: ' + e.message);
    } finally {
        rewriteBtn.disabled = false;
        rewriteBtn.textContent = '✨ 开始降AIGC';
    }
});

scoreBtn.addEventListener('click', async () => {
    const text = inputText.value.trim();
    if (!text) {
        alert('请输入要检测的文本');
        return;
    }
    
    try {
        const response = await fetch('/api/de-aigc/score', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text: text })
        });
        
        const data = await response.json();
        if (data.success) {
            document.getElementById('originalScore').textContent = data.scores.total.toFixed(1);
            document.getElementById('rewrittenScore').textContent = '--';
            document.getElementById('improvement').textContent = '--';
            scoreCard.classList.remove('hidden');
        }
    } catch (e) {
        alert('检测失败: ' + e.message);
    }
});

function showScores(scores) {
    document.getElementById('originalScore').textContent = scores.original.total.toFixed(1);
    document.getElementById('rewrittenScore').textContent = scores.rewritten.total.toFixed(1);
    document.getElementById('improvement').textContent = '↓' + scores.improvement.toFixed(1);
    scoreCard.classList.remove('hidden');
}

clearBtn.addEventListener('click', () => {
    inputText.value = '';
    outputText.value = '';
    scoreCard.classList.add('hidden');
});

copyBtn.addEventListener('click', () => {
    const text = outputText.value;
    if (!text) {
        alert('没有内容可复制');
        return;
    }
    navigator.clipboard.writeText(text).then(() => {
        copyBtn.textContent = '已复制!';
        setTimeout(() => { copyBtn.textContent = '复制全文'; }, 2000);
    });
});
</script>
{% endblock %}