aitsc/flask_prompt_master/templates/expert_generate.html

{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>专家提示词生成器</h2>
                <a href="{{ url_for('main.index') }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left"></i> 返回基础模式
                </a>
            </div>

            <div class="card">
                <div class="card-body">
                    <form id="expertPromptForm">
                        <div class="mb-3">
                            <label for="input_text" class="form-label">请描述您的需求</label>
                            <textarea class="form-control" id="input_text" name="input_text" rows="4" required></textarea>
                            <div class="form-text">详细描述您的需求，系统将进行专业分析并生成高质量提示词</div>
                        </div>
                        <button type="submit" class="btn btn-primary" id="generateBtn">
                            <i class="fas fa-magic"></i> 生成专家提示词
                        </button>
                    </form>
                </div>
            </div>

            <div id="loadingIndicator" class="text-center mt-4 d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">生成中...</span>
                </div>
                <p class="mt-2">正在分析需求并生成专业提示词...</p>
            </div>

            <div id="resultCard" class="card mt-4 d-none">
                <div class="card-body">
                    <h5 class="card-title mb-4">生成结果</h5>
                    
                    <div class="mb-4">
                        <h6 class="mb-3">需求分析</h6>
                        <div id="intentAnalysis" class="border rounded p-3 bg-light">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>核心意图：</strong><span id="coreIntent"></span></p>
                                    <p><strong>专业领域：</strong><span id="domain"></span></p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>预期输出：</strong><span id="expectedOutput"></span></p>
                                </div>
                            </div>
                            <div class="mt-2">
                                <p><strong>关键需求：</strong></p>
                                <ul id="keyRequirements" class="mb-0"></ul>
                            </div>
                            <div class="mt-2">
                                <p><strong>约束条件：</strong></p>
                                <ul id="constraints" class="mb-0"></ul>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h6 class="mb-3">生成的专家提示词</h6>
                        <div id="generatedPrompt" class="border rounded p-3"></div>
                        <div class="mt-3">
                            <button class="btn btn-sm btn-primary copy-btn" data-target="generatedPrompt">
                                <i class="fas fa-copy"></i> 复制提示词
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
document.getElementById('expertPromptForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const input_text = document.getElementById('input_text').value;
    const loadingIndicator = document.getElementById('loadingIndicator');
    const resultCard = document.getElementById('resultCard');
    const generateBtn = document.getElementById('generateBtn');

    // 显示加载指示器
    loadingIndicator.classList.remove('d-none');
    generateBtn.disabled = true;
    resultCard.classList.add('d-none');

    try {
        const response = await fetch('/api/wx/generate/expert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                input_text: input_text,
                uid: '12345' // 这里应该使用实际的用户ID
            })
        });

        const data = await response.json();

        if (data.code === 200) {
            // 更新意图分析结果
            document.getElementById('coreIntent').textContent = data.data.intent_analysis.core_intent;
            document.getElementById('domain').textContent = data.data.intent_analysis.domain;
            document.getElementById('expectedOutput').textContent = data.data.intent_analysis.expected_output;

            // 更新关键需求列表
            const keyRequirementsList = document.getElementById('keyRequirements');
            keyRequirementsList.innerHTML = data.data.intent_analysis.key_requirements
                .map(req => `<li>${req}</li>`).join('');

            // 更新约束条件列表
            const constraintsList = document.getElementById('constraints');
            constraintsList.innerHTML = data.data.intent_analysis.constraints
                .map(constraint => `<li>${constraint}</li>`).join('');

            // 更新生成的提示词
            document.getElementById('generatedPrompt').textContent = data.data.generated_prompt;

            // 显示结果卡片
            resultCard.classList.remove('d-none');
        } else {
            alert('生成失败：' + data.message);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('请求失败，请稍后重试');
    } finally {
        // 隐藏加载指示器并启用按钮
        loadingIndicator.classList.add('d-none');
        generateBtn.disabled = false;
    }
});

// 改进的复制功能实现
function copyToClipboard(text) {
    // 创建临时文本区域
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    
    try {
        // 选择文本
        textArea.select();
        textArea.setSelectionRange(0, 99999); // 对于移动设备
        
        // 尝试使用新的 API
        if (navigator.clipboard && window.isSecureContext) {
            // 对于现代浏览器
            navigator.clipboard.writeText(text).then(() => {
                showCopySuccess();
            }).catch(err => {
                console.error('复制失败:', err);
                // 回退到传统方法
                document.execCommand('copy');
                showCopySuccess();
            });
        } else {
            // 对于不支持 Clipboard API 的浏览器
            const successful = document.execCommand('copy');
            if (successful) {
                showCopySuccess();
            } else {
                console.error('复制失败');
            }
        }
    } catch (err) {
        console.error('复制出错:', err);
    } finally {
        // 清理临时元素
        document.body.removeChild(textArea);
    }
}

// 显示复制成功的反馈
function showCopySuccess() {
    const copyBtn = document.querySelector('.copy-btn');
    const originalHtml = copyBtn.innerHTML;
    copyBtn.innerHTML = '<i class="fas fa-check"></i> 已复制';
    copyBtn.classList.add('copied');
    
    setTimeout(() => {
        copyBtn.innerHTML = originalHtml;
        copyBtn.classList.remove('copied');
    }, 2000);
}

// 绑定复制按钮点击事件
document.addEventListener('DOMContentLoaded', function() {
    const copyBtn = document.querySelector('.copy-btn');
    copyBtn.addEventListener('click', function() {
        const targetId = this.dataset.target;
        const text = document.getElementById(targetId).textContent;
        copyToClipboard(text);
    });
});
</script>

<style>
/* 添加复制按钮样式 */
.copy-btn {
    padding: 8px 16px;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    background-color: #357abd;
}

.copy-btn.copied {
    background-color: #45a049;
}

.copy-btn i {
    margin-right: 6px;
}

/* 生成的提示词样式 */
#generatedPrompt {
    background-color: #f8f9fa;
    padding: 1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
    font-family: monospace;
    line-height: 1.5;
}

/* 加载指示器样式 */
#loadingIndicator {
    margin: 2rem 0;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}
</style>
{% endblock %}
{% endblock %}