Bio-Du's picture
Add 2 files
2ba2327 verified
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金融问题生成器 - Financial Question Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.category-chip {
transition: all 0.3s ease;
}
.category-chip:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.question-card {
transition: all 0.3s ease;
}
.question-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.progress-bar {
transition: width 0.3s ease;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="mb-10 text-center">
<h1 class="text-4xl font-bold text-indigo-700 mb-2">金融问题生成器</h1>
<p class="text-lg text-gray-600">为金融业务和钱包相关业务生成高质量的中文问题数据集</p>
</header>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Control Panel -->
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-1">
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
<i class="fas fa-sliders-h mr-2 text-indigo-500"></i> 生成设置
</h2>
<!-- Number of Questions -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">问题数量</label>
<div class="flex items-center">
<input type="number" min="1" max="100" value="10"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
<span class="ml-2 text-gray-500"></span>
</div>
</div>
<!-- Difficulty Level -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">难度级别</label>
<div class="grid grid-cols-2 gap-2">
<button class="difficulty-btn bg-green-100 text-green-800" data-level="simple">简单</button>
<button class="difficulty-btn bg-yellow-100 text-yellow-800" data-level="medium">中等</button>
<button class="difficulty-btn bg-red-100 text-red-800" data-level="complex">复杂</button>
<button class="difficulty-btn bg-gray-100 text-gray-800 active" data-level="random">随机</button>
</div>
</div>
<!-- Categories -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">问题分类</label>
<div class="flex flex-wrap gap-2">
<div class="category-chip bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm cursor-pointer active" data-category="all">全部</div>
<div class="category-chip bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="recharge">充值问题</div>
<div class="category-chip bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="transfer">转账问题</div>
<div class="category-chip bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="withdraw">提现问题</div>
<div class="category-chip bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="security">账户安全</div>
<div class="category-chip bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="payment">支付问题</div>
<div class="category-chip bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="card">银行卡管理</div>
<div class="category-chip bg-teal-100 text-teal-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="bill">账单与记录</div>
<div class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="basic">基础功能</div>
<div class="category-chip bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm cursor-pointer" data-category="other">其他问题</div>
</div>
</div>
<!-- RAG Data Upload -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">外部数据导入 (RAG)</label>
<div class="flex items-center">
<input type="file" id="rag-upload" class="hidden">
<label for="rag-upload" class="cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm flex items-center">
<i class="fas fa-file-upload mr-2"></i> 选择文件
</label>
<span id="rag-filename" class="ml-2 text-sm text-gray-500 truncate max-w-xs">未选择文件</span>
</div>
<p class="text-xs text-gray-500 mt-1">支持.txt, .pdf, .docx格式</p>
</div>
<!-- User Suggestions -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">自定义提示</label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
rows="3" placeholder="输入您的特殊要求,将作为Prompt传递给模型..."></textarea>
</div>
<!-- Generate Button -->
<button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-md font-medium flex items-center justify-center">
<i class="fas fa-magic mr-2"></i> 生成问题
</button>
<!-- API Status -->
<div class="mt-4 text-sm text-gray-600 flex items-center">
<div id="api-status" class="flex items-center">
<span class="w-2 h-2 rounded-full bg-gray-400 mr-2"></span>
<span>DeepSeek API 未连接</span>
</div>
</div>
</div>
<!-- Results Panel -->
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-gray-800 flex items-center">
<i class="fas fa-list-ul mr-2 text-indigo-500"></i> 生成结果
</h2>
<div class="flex items-center">
<button id="export-json" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md mr-2 flex items-center">
<i class="fas fa-file-export mr-1"></i> JSON
</button>
<button id="export-csv" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md flex items-center">
<i class="fas fa-file-csv mr-1"></i> CSV
</button>
</div>
</div>
<!-- Progress Bar -->
<div id="progress-container" class="mb-4 hidden">
<div class="flex justify-between text-sm text-gray-600 mb-1">
<span>生成进度</span>
<span id="progress-text">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
<!-- Filter Controls -->
<div class="mb-4 flex flex-wrap items-center gap-2">
<div class="relative">
<select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>所有分类</option>
<option>充值问题</option>
<option>转账问题</option>
<option>提现问题</option>
<option>账户安全</option>
<option>支付问题</option>
<option>银行卡管理</option>
<option>账单与记录</option>
<option>基础功能</option>
<option>其他问题</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
<div class="relative">
<select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>所有难度</option>
<option>简单</option>
<option>中等</option>
<option>复杂</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
<div class="relative flex-grow max-w-xs">
<input type="text" placeholder="搜索问题..." class="w-full bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
<i class="fas fa-search"></i>
</div>
</div>
</div>
<!-- Results Container -->
<div id="results-container" class="space-y-4">
<div class="text-center py-10 text-gray-500">
<i class="fas fa-comment-dots text-4xl mb-3"></i>
<p>点击"生成问题"按钮开始生成金融相关问题</p>
</div>
</div>
<!-- Pagination -->
<div class="mt-6 flex justify-between items-center text-sm text-gray-600">
<div>
显示 <span class="font-medium">0</span> 个问题中的 <span class="font-medium">0-0</span>
</div>
<div class="flex space-x-1">
<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 disabled:opacity-50" disabled>
<i class="fas fa-chevron-left"></i>
</button>
<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 font-medium">1</button>
<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 模拟API连接状态
setTimeout(() => {
document.getElementById('api-status').innerHTML = `
<span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
<span>DeepSeek API 已连接</span>
`;
}, 1500);
// 难度按钮切换
const difficultyBtns = document.querySelectorAll('.difficulty-btn');
difficultyBtns.forEach(btn => {
btn.addEventListener('click', function() {
difficultyBtns.forEach(b => b.classList.remove('active', 'ring-2', 'ring-offset-2'));
this.classList.add('active', 'ring-2', 'ring-offset-2');
// 根据难度设置不同的ring颜色
const level = this.dataset.level;
let ringColor = 'ring-gray-400';
if (level === 'simple') ringColor = 'ring-green-400';
else if (level === 'medium') ringColor = 'ring-yellow-400';
else if (level === 'complex') ringColor = 'ring-red-400';
this.classList.add(ringColor);
});
});
// 分类标签切换
const categoryChips = document.querySelectorAll('.category-chip');
categoryChips.forEach(chip => {
chip.addEventListener('click', function() {
if (this.dataset.category === 'all') {
categoryChips.forEach(c => c.classList.remove('active', 'ring-2', 'ring-offset-2', 'ring-blue-400'));
this.classList.add('active', 'ring-2', 'ring-offset-2', 'ring-blue-400');
} else {
document.querySelector('.category-chip[data-category="all"]').classList.remove('active', 'ring-2', 'ring-offset-2', 'ring-blue-400');
this.classList.toggle('active');
this.classList.toggle('ring-2');
this.classList.toggle('ring-offset-2');
// 根据分类设置不同的ring颜色
const category = this.dataset.category;
let ringColor = 'ring-gray-400';
if (category === 'recharge') ringColor = 'ring-purple-400';
else if (category === 'transfer') ringColor = 'ring-green-400';
else if (category === 'withdraw') ringColor = 'ring-yellow-400';
else if (category === 'security') ringColor = 'ring-red-400';
else if (category === 'payment') ringColor = 'ring-indigo-400';
else if (category === 'card') ringColor = 'ring-pink-400';
else if (category === 'bill') ringColor = 'ring-teal-400';
else if (category === 'basic') ringColor = 'ring-gray-400';
else if (category === 'other') ringColor = 'ring-orange-400';
if (this.classList.contains('active')) {
this.classList.add(ringColor);
} else {
this.classList.remove(ringColor);
}
}
});
});
// 文件上传显示文件名
document.getElementById('rag-upload').addEventListener('change', function(e) {
const fileName = e.target.files[0]?.name || '未选择文件';
document.getElementById('rag-filename').textContent = fileName;
});
// 生成问题按钮
document.getElementById('generate-btn').addEventListener('click', function() {
const btn = this;
const originalText = btn.innerHTML;
// 显示进度条
document.getElementById('progress-container').classList.remove('hidden');
// 模拟API调用过程
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 生成中...';
btn.disabled = true;
// 模拟进度更新
let progress = 0;
const progressInterval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
document.getElementById('progress-bar').style.width = `${progress}%`;
document.getElementById('progress-text').textContent = `${Math.floor(progress)}%`;
if (progress >= 100) {
clearInterval(progressInterval);
// 模拟API响应时间
setTimeout(() => {
btn.innerHTML = originalText;
btn.disabled = false;
// 显示生成的问题
displayGeneratedQuestions();
}, 500);
}
}, 200);
});
// 导出按钮
document.getElementById('export-json').addEventListener('click', function() {
alert('JSON导出功能将在实际实现中完成');
});
document.getElementById('export-csv').addEventListener('click', function() {
alert('CSV导出功能将在实际实现中完成');
});
// 显示生成的问题 (模拟数据)
function displayGeneratedQuestions() {
const categories = ['充值问题', '转账问题', '提现问题', '账户安全', '支付问题', '银行卡管理', '账单与记录', '基础功能', '其他问题'];
const difficulties = ['简单', '中等', '复杂'];
const numQuestions = parseInt(document.querySelector('input[type="number"]').value) || 10;
const container = document.getElementById('results-container');
container.innerHTML = '';
for (let i = 0; i < numQuestions; i++) {
const randomCategory = categories[Math.floor(Math.random() * categories.length)];
const randomDifficulty = difficulties[Math.floor(Math.random() * difficulties.length)];
// 根据分类设置不同的颜色
let categoryColor = 'bg-gray-100 text-gray-800';
if (randomCategory === '充值问题') categoryColor = 'bg-purple-100 text-purple-800';
else if (randomCategory === '转账问题') categoryColor = 'bg-green-100 text-green-800';
else if (randomCategory === '提现问题') categoryColor = 'bg-yellow-100 text-yellow-800';
else if (randomCategory === '账户安全') categoryColor = 'bg-red-100 text-red-800';
else if (randomCategory === '支付问题') categoryColor = 'bg-indigo-100 text-indigo-800';
else if (randomCategory === '银行卡管理') categoryColor = 'bg-pink-100 text-pink-800';
else if (randomCategory === '账单与记录') categoryColor = 'bg-teal-100 text-teal-800';
else if (randomCategory === '基础功能') categoryColor = 'bg-gray-100 text-gray-800';
else if (randomCategory === '其他问题') categoryColor = 'bg-orange-100 text-orange-800';
// 根据难度设置不同的颜色
let difficultyColor = 'bg-gray-100 text-gray-800';
if (randomDifficulty === '简单') difficultyColor = 'bg-green-100 text-green-800';
else if (randomDifficulty === '中等') difficultyColor = 'bg-yellow-100 text-yellow-800';
else if (randomDifficulty === '复杂') difficultyColor = 'bg-red-100 text-red-800';
// 生成随机问题 (实际实现中会调用DeepSeek API)
const question = generateRandomQuestion(randomCategory, randomDifficulty);
const questionCard = document.createElement('div');
questionCard.className = `question-card bg-white p-4 rounded-lg shadow-sm border-l-4 border-indigo-500 fade-in`;
questionCard.style.animationDelay = `${i * 0.05}s`;
questionCard.innerHTML = `
<div class="flex justify-between items-start mb-2">
<h3 class="font-medium text-gray-800">${question}</h3>
<div class="flex space-x-2">
<span class="${categoryColor} text-xs px-2 py-1 rounded-full">${randomCategory}</span>
<span class="${difficultyColor} text-xs px-2 py-1 rounded-full">${randomDifficulty}</span>
</div>
</div>
<div class="flex justify-between items-center text-sm text-gray-500">
<span>ID: ${Math.floor(Math.random() * 10000)}</span>
<div class="flex space-x-2">
<button class="text-indigo-500 hover:text-indigo-700"><i class="fas fa-edit"></i></button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</div>
</div>
`;
container.appendChild(questionCard);
}
// 更新分页信息
updatePagination(numQuestions);
}
// 更新分页信息
function updatePagination(total) {
const paginationText = document.querySelector('.flex.justify-between.items-center.text-sm.text-gray-600 div');
paginationText.innerHTML = `显示 <span class="font-medium">${total}</span> 个问题中的 <span class="font-medium">1-${total}</span>`;
}
// 生成随机问题 (模拟函数,实际实现中会调用DeepSeek API)
function generateRandomQuestion(category, difficulty) {
const questions = {
'充值问题': [
'如何为我的钱包充值?',
'充值后资金未到账怎么办?',
'充值是否有金额限制?',
'哪些银行卡支持快速充值?',
'充值失败可能的原因有哪些?'
],
'转账问题': [
'如何向他人转账?',
'转账到银行卡需要多长时间?',
'转账失败会退款吗?',
'每日转账限额是多少?',
'如何查看转账记录?'
],
'提现问题': [
'如何将余额提现到银行卡?',
'提现手续费是多少?',
'提现到账时间是多久?',
'为什么我的提现申请被拒绝?',
'提现限额如何提升?'
],
'账户安全': [
'如何设置更安全的密码?',
'账户被盗怎么办?',
'如何开启双重验证?',
'收到可疑短信该如何处理?',
'如何查看登录记录?'
],
'支付问题': [
'支付时提示风险交易怎么办?',
'如何设置支付密码?',
'支付失败可能的原因有哪些?',
'如何查看支付记录?',
'支付限额如何调整?'
],
'银行卡管理': [
'如何添加新的银行卡?',
'银行卡绑定失败怎么办?',
'如何解除已绑定的银行卡?',
'为什么无法绑定某些银行卡?',
'银行卡信息变更如何更新?'
],
'账单与记录': [
'如何查看历史交易记录?',
'账单可以导出吗?',
'交易记录保存多久?',
'如何筛选特定时间的交易?',
'账单明细包含哪些信息?'
],
'基础功能': [
'如何注册钱包账户?',
'如何修改个人信息?',
'如何找回登录密码?',
'如何联系客服?',
'APP有哪些基本功能?'
],
'其他问题': [
'钱包服务费是多少?',
'如何申请发票?',
'什么是数字货币钱包?',
'钱包支持哪些货币?',
'如何关闭钱包账户?'
]
};
// 根据难度调整问题复杂度
let question = questions[category][Math.floor(Math.random() * questions[category].length)];
if (difficulty === '中等') {
question = question.replace('?', '?请详细说明流程。');
} else if (difficulty === '复杂') {
question = question.replace('?', '?请分步骤说明可能的原因和解决方案。');
}
return question;
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Bio-Du/financial-question-generator-chinese" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>