admin/aitsc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端增加专家模式提示词

Browse Source
This commit is contained in:
波澜壮阔
2025-04-02 23:48:31 +08:00
parent 59ff67595c
commit 2c3b83bba7
5 changed files with 939 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
flask_prompt_master/templates/expert_generate.html Normal file
View File

@@ -0,0 +1,250 @@
{% 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 %}

250
flask_prompt_master/templates/generate.html
View File

@@ -11,135 +11,145 @@
</div>
</div>
<div class="main-container">
<form method="POST" class="generate-form">
{{ form.hidden_tag() }}
<div class="search-section">
<div class="search-box">
<input type="text" id="templateSearch" class="search-input" placeholder="搜索模板名称或描述...">
<i class="fas fa-search search-icon"></i>
<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.expert_generate') }}" class="btn btn-primary">
<i class="fas fa-brain"></i> 专家模式
</a>
</div>
<div class="search-stats">
<span class="search-count"></span>
</div>
</div>
<div class="templates-section">
<div class="section-header">
<h2>选择场景</h2>
<div class="filter-controls">
<select id="industryFilter" class="custom-select">
<option value="all">全部行业</option>
{% for industry in industries %}
<option value="{{ industry }}">{{ industry }}</option>
{% endfor %}
</select>
<select id="professionFilter" class="custom-select">
<option value="all">全部职业</option>
{% for profession in professions %}
<option value="{{ profession }}">{{ profession }}</option>
{% endfor %}
</select>
<select id="subCategoryFilter" class="custom-select">
<option value="all">全部领域</option>
{% for sub_category in sub_categories %}
<option value="{{ sub_category }}">{{ sub_category }}</option>
{% endfor %}
</select>
<form method="POST" class="generate-form">
{{ form.hidden_tag() }}
<div class="search-section">
<div class="search-box">
<input type="text" id="templateSearch" class="search-input" placeholder="搜索模板名称或描述...">
<i class="fas fa-search search-icon"></i>
</div>
<div class="search-stats">
<span class="search-count"></span>
</div>
</div>
</div>
<div class="category-tabs">
<div class="tab active" data-category="all">全部</div>
{% for category in categories %}
<div class="tab" data-category="{{ category }}">{{ category }}</div>
{% endfor %}
</div>
<div class="template-grid">
{% for template in templates %}
<div class="template-card"
data-category="{{ template.category }}"
data-industry="{{ template.industry }}"
data-profession="{{ template.profession }}"
data-subcategory="{{ template.sub_category }}">
<input type="radio" name="template_id" id="template_{{ template.id }}"
value="{{ template.id }}"
{% if template.is_default %}checked{% endif %}>
<label for="template_{{ template.id }}" class="template-content">
<div class="template-actions">
<button type="button" class="btn-delete"
data-template-id="{{ template.id }}"
title="删除模板">
<i class="fas fa-trash-alt"></i>
<div class="templates-section">
<div class="section-header">
<h2>选择场景</h2>
<div class="filter-controls">
<select id="industryFilter" class="custom-select">
<option value="all">全部行业</option>
{% for industry in industries %}
<option value="{{ industry }}">{{ industry }}</option>
{% endfor %}
</select>
<select id="professionFilter" class="custom-select">
<option value="all">全部职业</option>
{% for profession in professions %}
<option value="{{ profession }}">{{ profession }}</option>
{% endfor %}
</select>
<select id="subCategoryFilter" class="custom-select">
<option value="all">全部领域</option>
{% for sub_category in sub_categories %}
<option value="{{ sub_category }}">{{ sub_category }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="category-tabs">
<div class="tab active" data-category="all">全部</div>
{% for category in categories %}
<div class="tab" data-category="{{ category }}">{{ category }}</div>
{% endfor %}
</div>
<div class="template-grid">
{% for template in templates %}
<div class="template-card"
data-category="{{ template.category }}"
data-industry="{{ template.industry }}"
data-profession="{{ template.profession }}"
data-subcategory="{{ template.sub_category }}">
<input type="radio" name="template_id" id="template_{{ template.id }}"
value="{{ template.id }}"
{% if template.is_default %}checked{% endif %}>
<label for="template_{{ template.id }}" class="template-content">
<div class="template-actions">
<button type="button" class="btn-delete"
data-template-id="{{ template.id }}"
title="删除模板">
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div class="template-categories">
<div class="category-group">
<span class="category-label">行业:</span>
<span class="category-value">{{ template.industry }}</span>
</div>
<div class="category-group">
<span class="category-label">职业:</span>
<span class="category-value">{{ template.profession }}</span>
</div>
<div class="category-group">
<span class="category-label">领域:</span>
<span class="category-value">{{ template.sub_category }}</span>
</div>
</div>
<div class="template-header">
<div class="template-icon">
<i class="fas {{ get_template_icon(template.category) }}"></i>
</div>
<h3>{{ template.name }}</h3>
</div>
<div class="template-info">
<p>{{ template.description }}</p>
</div>
</label>
</div>
{% endfor %}
</div>
</div>
<div class="input-section">
<div class="section-header">
<h2>输入需求</h2>
<span class="subtitle">描述越详细，生成的提示词效果越好</span>
</div>
{{ form.input_text(class="form-control custom-textarea", rows=5,
placeholder="请详细描述您的需求...") }}
</div>
<div class="action-section">
{{ form.submit(class="btn btn-primary btn-generate", value="生成专业提示词") }}
</div>
</form>
{% if prompt %}
<div class="result-section">
<div class="result-card">
<div class="result-header">
<h2>生成结果</h2>
<div class="result-actions">
<button class="btn btn-copy" onclick="copyText('{{ prompt.generated_text }}')">
<i class="fas fa-copy"></i>
复制提示词
</button>
</div>
<div class="template-categories">
<div class="category-group">
<span class="category-label">行业:</span>
<span class="category-value">{{ template.industry }}</span>
</div>
<div class="category-group">
<span class="category-label">职业:</span>
<span class="category-value">{{ template.profession }}</span>
</div>
<div class="category-group">
<span class="category-label">领域:</span>
<span class="category-value">{{ template.sub_category }}</span>
</div>
</div>
<div class="result-content">
<div class="output-preview">
<div class="text-content">{{ prompt.generated_text }}</div>
</div>
<div class="template-header">
<div class="template-icon">
<i class="fas {{ get_template_icon(template.category) }}"></i>
</div>
<h3>{{ template.name }}</h3>
</div>
<div class="template-info">
<p>{{ template.description }}</p>
</div>
</label>
</div>
{% endfor %}
</div>
</div>
<div class="input-section">
<div class="section-header">
<h2>输入需求</h2>
<span class="subtitle">描述越详细，生成的提示词效果越好</span>
</div>
{{ form.input_text(class="form-control custom-textarea", rows=5,
placeholder="请详细描述您的需求...") }}
</div>
<div class="action-section">
{{ form.submit(class="btn btn-primary btn-generate", value="生成专业提示词") }}
</div>
</form>
{% if prompt %}
<div class="result-section">
<div class="result-card">
<div class="result-header">
<h2>生成结果</h2>
<div class="result-actions">
<button class="btn btn-copy" onclick="copyText('{{ prompt.generated_text }}')">
<i class="fas fa-copy"></i>
复制提示词
</button>
</div>
</div>
<div class="result-content">
<div class="output-preview">
<div class="text-content">{{ prompt.generated_text }}</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="filter-stats">