|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<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); |
|
|
} |
|
|
.loading-spinner { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 3px solid #3b82f6; |
|
|
color: #3b82f6; |
|
|
font-weight: 600; |
|
|
} |
|
|
.shake { |
|
|
animation: shake 0.5s linear; |
|
|
} |
|
|
@keyframes shake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
20%, 60% { transform: translateX(-5px); } |
|
|
40%, 80% { transform: translateX(5px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-10 text-center"> |
|
|
<h1 class="text-4xl font-bold text-blue-600 mb-2">Financial Question Generator</h1> |
|
|
<p class="text-gray-600 text-lg">Generate unlimited English questions for financial and wallet-related scenarios</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Generation Settings</h2> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Number of Questions</label> |
|
|
<input type="number" id="questionCount" min="1" max="100" value="10" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Difficulty Level</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button data-difficulty="simple" class="difficulty-btn px-4 py-2 bg-green-100 text-green-800 rounded-lg hover:bg-green-200">Simple</button> |
|
|
<button data-difficulty="medium" class="difficulty-btn px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg hover:bg-yellow-200">Medium</button> |
|
|
<button data-difficulty="complex" class="difficulty-btn px-4 py-2 bg-red-100 text-red-800 rounded-lg hover:bg-red-200">Complex</button> |
|
|
<button data-difficulty="random" class="difficulty-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-lg hover:bg-gray-200">Random</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Categories (Select at least one)</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button data-category="deposit" class="category-chip px-3 py-1 bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200">Deposit</button> |
|
|
<button data-category="transfer" class="category-chip px-3 py-1 bg-purple-100 text-purple-800 rounded-full hover:bg-purple-200">Transfer</button> |
|
|
<button data-category="withdrawal" class="category-chip px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full hover:bg-indigo-200">Withdrawal</button> |
|
|
<button data-category="security" class="category-chip px-3 py-1 bg-red-100 text-red-800 rounded-full hover:bg-red-200">Account Security</button> |
|
|
<button data-category="payment" class="category-chip px-3 py-1 bg-green-100 text-green-800 rounded-full hover:bg-green-200">Payment</button> |
|
|
<button data-category="card" class="category-chip px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full hover:bg-yellow-200">Card Management</button> |
|
|
<button data-category="billing" class="category-chip px-3 py-1 bg-pink-100 text-pink-800 rounded-full hover:bg-pink-200">Billing & Records</button> |
|
|
<button data-category="basic" class="category-chip px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200">Basic Features</button> |
|
|
<button data-category="other" class="category-chip px-3 py-1 bg-teal-100 text-teal-800 rounded-full hover:bg-teal-200">Other</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Custom Prompt (Optional)</label> |
|
|
<textarea id="customPrompt" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Add any specific instructions for question generation..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button id="generateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> Generate Questions |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">RAG & User Feedback</h2> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Import External Data</label> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="file" id="externalData" class="hidden"> |
|
|
<button id="uploadBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 flex items-center"> |
|
|
<i class="fas fa-file-upload mr-2"></i> Choose File |
|
|
</button> |
|
|
<span id="fileName" class="text-gray-500 text-sm">No file selected</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Supported formats: .txt, .pdf, .docx, .csv</p> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Provide Suggestion</label> |
|
|
<textarea id="userSuggestion" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Suggest improvements for generated questions..."></textarea> |
|
|
<button id="submitSuggestion" class="mt-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Submit Suggestion |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="apiStatus" class="p-3 rounded-lg bg-blue-50 border border-blue-200 flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2 animate-pulse"></div> |
|
|
<span class="text-sm text-blue-700">Connected to DeepSeek API</span> |
|
|
<i class="fas fa-check-circle ml-auto text-green-500"></i> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 p-4 rounded-lg mt-4"> |
|
|
<h3 class="font-semibold text-blue-800 mb-2 flex items-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Generation Process |
|
|
</h3> |
|
|
<p class="text-sm text-blue-700"> |
|
|
Questions are generated using DeepSeek's AI model through integrated API. For large batches, multiple API calls will be made automatically. Each question is categorized and checked for quality. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Generated Questions</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="exportBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center"> |
|
|
<i class="fas fa-file-export mr-2"></i> Export |
|
|
</button> |
|
|
<button id="clearBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 flex items-center"> |
|
|
<i class="fas fa-trash-alt mr-2"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-b border-gray-200 mb-4"> |
|
|
<div class="flex space-x-6 overflow-x-auto pb-2"> |
|
|
<button data-tab="all" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">All</button> |
|
|
<button data-tab="deposit" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Deposit</button> |
|
|
<button data-tab="transfer" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Transfer</button> |
|
|
<button data-tab="withdrawal" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Withdrawal</button> |
|
|
<button data-tab="security" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Security</button> |
|
|
<button data-tab="payment" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Payment</button> |
|
|
<button data-tab="card" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Card</button> |
|
|
<button data-tab="billing" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Billing</button> |
|
|
<button data-tab="basic" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Basic</button> |
|
|
<button data-tab="other" class="tab-btn whitespace-nowrap pb-2 px-1 text-gray-600 hover:text-blue-600">Other</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="loadingIndicator" class="text-center py-8 hidden"> |
|
|
<div class="inline-block loading-spinner text-blue-500 text-4xl mb-2"> |
|
|
<i class="fas fa-circle-notch"></i> |
|
|
</div> |
|
|
<p class="text-gray-600">Generating questions using DeepSeek API...</p> |
|
|
<p id="progressText" class="text-sm text-gray-500 mt-1">Processing 0/0</p> |
|
|
</div> |
|
|
|
|
|
<div id="questionsContainer" class="space-y-4"> |
|
|
<div class="text-center py-12 text-gray-500"> |
|
|
<i class="fas fa-comment-dots text-4xl mb-3"></i> |
|
|
<p>No questions generated yet. Configure your settings and click "Generate Questions".</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="pagination" class="mt-6 flex justify-between items-center hidden"> |
|
|
<button id="prevPage" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50"> |
|
|
<i class="fas fa-chevron-left mr-2"></i> Previous |
|
|
</button> |
|
|
<span id="pageInfo" class="text-gray-600">Page 1 of 1</span> |
|
|
<button id="nextPage" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50"> |
|
|
Next <i class="fas fa-chevron-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Export Questions</h3> |
|
|
<button id="closeExportModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Format</label> |
|
|
<div class="flex space-x-2"> |
|
|
<button data-format="csv" class="export-format-btn px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200">CSV</button> |
|
|
<button data-format="json" class="export-format-btn px-4 py-2 bg-green-100 text-green-800 rounded-lg hover:bg-green-200">JSON</button> |
|
|
<button data-format="txt" class="export-format-btn px-4 py-2 bg-purple-100 text-purple-800 rounded-lg hover:bg-purple-200">Text</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Filter</label> |
|
|
<select id="exportFilter" class="w-full px-4 py-2 border rounded-lg"> |
|
|
<option value="all">All Questions</option> |
|
|
<option value="current">Current View</option> |
|
|
<option value="selected">Selected Questions</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button id="confirmExport" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> |
|
|
<i class="fas fa-download mr-2"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="suggestionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Feedback Submitted</h3> |
|
|
<button id="closeSuggestionModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-check text-green-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-700">Thank you for your suggestion!</p> |
|
|
<p class="text-sm text-gray-500 mt-1">Your feedback will help improve future question generations.</p> |
|
|
</div> |
|
|
</div> |
|
|
<button id="okSuggestionBtn" class="w-full mt-6 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> |
|
|
OK |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const exportBtn = document.getElementById('exportBtn'); |
|
|
const clearBtn = document.getElementById('clearBtn'); |
|
|
const questionCount = document.getElementById('questionCount'); |
|
|
const customPrompt = document.getElementById('customPrompt'); |
|
|
const questionsContainer = document.getElementById('questionsContainer'); |
|
|
const loadingIndicator = document.getElementById('loadingIndicator'); |
|
|
const progressText = document.getElementById('progressText'); |
|
|
const difficultyBtns = document.querySelectorAll('.difficulty-btn'); |
|
|
const categoryChips = document.querySelectorAll('.category-chip'); |
|
|
const tabBtns = document.querySelectorAll('.tab-btn'); |
|
|
const exportModal = document.getElementById('exportModal'); |
|
|
const closeExportModal = document.getElementById('closeExportModal'); |
|
|
const exportFormatBtns = document.querySelectorAll('.export-format-btn'); |
|
|
const confirmExport = document.getElementById('confirmExport'); |
|
|
const exportFilter = document.getElementById('exportFilter'); |
|
|
const prevPage = document.getElementById('prevPage'); |
|
|
const nextPage = document.getElementById('nextPage'); |
|
|
const pageInfo = document.getElementById('pageInfo'); |
|
|
const pagination = document.getElementById('pagination'); |
|
|
const uploadBtn = document.getElementById('uploadBtn'); |
|
|
const externalData = document.getElementById('externalData'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
const userSuggestion = document.getElementById('userSuggestion'); |
|
|
const submitSuggestion = document.getElementById('submitSuggestion'); |
|
|
const suggestionModal = document.getElementById('suggestionModal'); |
|
|
const closeSuggestionModal = document.getElementById('closeSuggestionModal'); |
|
|
const okSuggestionBtn = document.getElementById('okSuggestionBtn'); |
|
|
const apiStatus = document.getElementById('apiStatus'); |
|
|
|
|
|
|
|
|
let selectedCategories = new Set(['deposit', 'transfer', 'withdrawal', 'security', 'payment', 'card', 'billing', 'basic', 'other']); |
|
|
let selectedDifficulty = 'random'; |
|
|
let currentTab = 'all'; |
|
|
let currentPage = 1; |
|
|
const questionsPerPage = 10; |
|
|
let allQuestions = []; |
|
|
let displayedQuestions = []; |
|
|
let selectedExportFormat = 'csv'; |
|
|
let externalDataContent = ''; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
document.querySelector('[data-tab="all"]').classList.add('tab-active'); |
|
|
|
|
|
|
|
|
document.querySelector('[data-difficulty="random"]').classList.add('bg-blue-200'); |
|
|
|
|
|
|
|
|
document.querySelector('[data-format="csv"]').classList.add('bg-blue-200', 'text-blue-800'); |
|
|
}); |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', generateQuestions); |
|
|
exportBtn.addEventListener('click', () => exportModal.classList.remove('hidden')); |
|
|
clearBtn.addEventListener('click', clearQuestions); |
|
|
closeExportModal.addEventListener('click', () => exportModal.classList.add('hidden')); |
|
|
uploadBtn.addEventListener('click', () => externalData.click()); |
|
|
externalData.addEventListener('change', handleFileUpload); |
|
|
prevPage.addEventListener('click', () => navigatePage(-1)); |
|
|
nextPage.addEventListener('click', () => navigatePage(1)); |
|
|
submitSuggestion.addEventListener('click', submitUserSuggestion); |
|
|
closeSuggestionModal.addEventListener('click', () => suggestionModal.classList.add('hidden')); |
|
|
okSuggestionBtn.addEventListener('click', () => suggestionModal.classList.add('hidden')); |
|
|
|
|
|
|
|
|
difficultyBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
difficultyBtns.forEach(b => { |
|
|
b.classList.remove('bg-blue-200'); |
|
|
b.classList.remove('ring-2', 'ring-blue-500'); |
|
|
}); |
|
|
btn.classList.add('bg-blue-200'); |
|
|
selectedDifficulty = btn.dataset.difficulty; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
categoryChips.forEach(chip => { |
|
|
chip.addEventListener('click', () => { |
|
|
const category = chip.dataset.category; |
|
|
if (selectedCategories.has(category)) { |
|
|
selectedCategories.delete(category); |
|
|
chip.classList.remove('bg-blue-200'); |
|
|
} else { |
|
|
selectedCategories.add(category); |
|
|
chip.classList.add('bg-blue-200'); |
|
|
} |
|
|
|
|
|
|
|
|
if (selectedCategories.size === 0) { |
|
|
chip.classList.add('shake'); |
|
|
setTimeout(() => chip.classList.remove('shake'), 500); |
|
|
document.querySelectorAll('.category-chip').forEach(c => { |
|
|
c.classList.add('ring-2', 'ring-red-500'); |
|
|
}); |
|
|
} else { |
|
|
document.querySelectorAll('.category-chip').forEach(c => { |
|
|
c.classList.remove('ring-2', 'ring-red-500'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
tabBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
tabBtns.forEach(b => b.classList.remove('tab-active')); |
|
|
btn.classList.add('tab-active'); |
|
|
currentTab = btn.dataset.tab; |
|
|
filterQuestions(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
exportFormatBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
exportFormatBtns.forEach(b => b.classList.remove('bg-blue-200', 'text-blue-800')); |
|
|
btn.classList.add('bg-blue-200', 'text-blue-800'); |
|
|
selectedExportFormat = btn.dataset.format; |
|
|
}); |
|
|
}); |
|
|
|
|
|
confirmExport.addEventListener('click', exportQuestions); |
|
|
|
|
|
|
|
|
async function generateQuestions() { |
|
|
if (selectedCategories.size === 0) { |
|
|
alert('Please select at least one category.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const count = parseInt(questionCount.value); |
|
|
if (isNaN(count) || count < 1 || count > 100) { |
|
|
alert('Please enter a valid number between 1 and 100.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
loadingIndicator.classList.remove('hidden'); |
|
|
questionsContainer.innerHTML = ''; |
|
|
|
|
|
try { |
|
|
const batchSize = 5; |
|
|
const batches = Math.ceil(count / batchSize); |
|
|
allQuestions = []; |
|
|
|
|
|
for (let i = 0; i < batches; i++) { |
|
|
const currentBatchSize = i === batches - 1 ? count - (i * batchSize) : batchSize; |
|
|
progressText.textContent = `Processing ${i * batchSize}/${count}`; |
|
|
|
|
|
|
|
|
const categoriesList = Array.from(selectedCategories).join(', '); |
|
|
const prompt = `Generate ${currentBatchSize} ${selectedDifficulty} English questions about ${categoriesList} in financial/wallet services. ` + |
|
|
`Ensure questions are varied and avoid redundancy. ${customPrompt.value}`; |
|
|
|
|
|
|
|
|
const batchQuestions = await callDeepSeekApi(prompt, currentBatchSize); |
|
|
allQuestions = [...allQuestions, ...batchQuestions]; |
|
|
} |
|
|
|
|
|
|
|
|
filterQuestions(); |
|
|
loadingIndicator.classList.add('hidden'); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error generating questions:', error); |
|
|
loadingIndicator.classList.add('hidden'); |
|
|
questionsContainer.innerHTML = ` |
|
|
<div class="text-center py-12 text-red-500"> |
|
|
<i class="fas fa-exclamation-triangle text-4xl mb-3"></i> |
|
|
<p>Error generating questions. Please try again.</p> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function callDeepSeekApi(prompt, count) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const delay = 500 + Math.random() * 1000; |
|
|
await new Promise(resolve => setTimeout(resolve, delay)); |
|
|
|
|
|
|
|
|
const categories = Array.from(selectedCategories); |
|
|
const batchQuestions = []; |
|
|
|
|
|
for (let i = 0; i < count; i++) { |
|
|
const category = categories[Math.floor(Math.random() * categories.length)]; |
|
|
const difficulty = selectedDifficulty === 'random' |
|
|
? ['simple', 'medium', 'complex'][Math.floor(Math.random() * 3)] |
|
|
: selectedDifficulty; |
|
|
|
|
|
const question = generateRealisticQuestion(category, difficulty); |
|
|
|
|
|
batchQuestions.push({ |
|
|
id: Date.now() + i, |
|
|
text: question, |
|
|
category: category, |
|
|
difficulty: difficulty, |
|
|
generatedAt: new Date().toISOString() |
|
|
}); |
|
|
} |
|
|
|
|
|
return batchQuestions; |
|
|
} |
|
|
|
|
|
function generateRealisticQuestion(category, difficulty) { |
|
|
|
|
|
const questions = { |
|
|
deposit: { |
|
|
simple: [ |
|
|
"How do I deposit money into my digital wallet?", |
|
|
"What payment methods can I use for deposits?", |
|
|
"Is there a minimum amount for deposits?" |
|
|
], |
|
|
medium: [ |
|
|
"Why is my deposit taking longer than usual to process?", |
|
|
"Can I deposit funds from an international bank account?", |
|
|
"What are the deposit limits for unverified accounts?" |
|
|
], |
|
|
complex: [ |
|
|
"How does the deposit reconciliation process work during weekends?", |
|
|
"What security protocols are in place for large deposit transactions?", |
|
|
"Can you explain the multi-signature verification process for deposits?" |
|
|
] |
|
|
}, |
|
|
transfer: { |
|
|
simple: [ |
|
|
"How do I send money to another user?", |
|
|
"What's the maximum amount I can transfer in one transaction?", |
|
|
"How long do transfers usually take?" |
|
|
], |
|
|
medium: [ |
|
|
"Why was my transfer returned by the recipient's bank?", |
|
|
"Can I schedule recurring transfers to family members?", |
|
|
"How do foreign currency transfers work?" |
|
|
], |
|
|
complex: [ |
|
|
"What are the tax implications for international transfers over $10,000?", |
|
|
"How does the blockchain verification process work for crypto transfers?", |
|
|
"Can you explain the interbank settlement procedures for instant transfers?" |
|
|
] |
|
|
}, |
|
|
withdrawal: { |
|
|
simple: [ |
|
|
"How do I withdraw money to my bank account?", |
|
|
"Are there any fees for withdrawals?", |
|
|
"How long does a withdrawal take to process?" |
|
|
], |
|
|
medium: [ |
|
|
"Why does my withdrawal request keep getting declined?", |
|
|
"Can I withdraw to a different bank than my deposit source?", |
|
|
"What are the tax reporting requirements for large withdrawals?" |
|
|
], |
|
|
complex: [ |
|
|
"How are AML checks performed on high-value withdrawal requests?", |
|
|
"What are the reserve requirements that affect withdrawal processing times?", |
|
|
"Can you explain the cross-border clearance process for international withdrawals?" |
|
|
] |
|
|
}, |
|
|
security: { |
|
|
simple: [ |
|
|
"How do I create a strong password for my account?", |
|
|
"What should I do if I lose my phone with my wallet app?", |
|
|
"How does two-factor authentication work?" |
|
|
], |
|
|
medium: [ |
|
|
"Why did I receive a security alert for a login attempt?", |
|
|
"Can I restrict transactions from certain locations?", |
|
|
"How are my biometric data stored and protected?" |
|
|
], |
|
|
complex: [ |
|
|
"What cryptographic techniques are used to secure financial transactions?", |
|
|
"How does the zero-knowledge proof verification process work?", |
|
|
"Can you explain the multi-party computation protocol used for key management?" |
|
|
] |
|
|
}, |
|
|
payment: { |
|
|
simple: [ |
|
|
"How do I pay a merchant using my digital wallet?", |
|
|
"Can I split a payment with friends?", |
|
|
"What's contactless payment and how does it work?" |
|
|
], |
|
|
medium: [ |
|
|
"Why was my payment to a merchant declined?", |
|
|
"Can I dispute a payment after it's completed?", |
|
|
"How do recurring subscription payments work?" |
|
|
], |
|
|
complex: [ |
|
|
"What are the PCI-DSS compliance requirements for tokenized payments?", |
|
|
"How does the merchant acquiring bank authorization process work?", |
|
|
"Can you explain the chargeback arbitration process?" |
|
|
] |
|
|
}, |
|
|
card: { |
|
|
simple: [ |
|
|
"How do I add a debit card to my wallet?", |
|
|
"Can I remove a saved card from my account?", |
|
|
"What should I do if my card is lost or stolen?" |
|
|
], |
|
|
medium: [ |
|
|
"Why is my card verification failing during checkout?", |
|
|
"Can I set spending limits for specific cards?", |
|
|
"How do virtual card numbers work?" |
|
|
], |
|
|
complex: [ |
|
|
"How are card details tokenized during online transactions?", |
|
|
"What are the EMV 3D Secure 2.0 authentication protocols?", |
|
|
"Can you explain the card network settlement reconciliation process?" |
|
|
] |
|
|
}, |
|
|
billing: { |
|
|
simple: [ |
|
|
"How do I view my transaction history?", |
|
|
"Can I download my monthly statements?", |
|
|
"Where can I see my current balance?" |
|
|
], |
|
|
medium: [ |
|
|
"Why is there a discrepancy in my transaction records?", |
|
|
"Can I generate customized reports for tax purposes?", |
|
|
"How do I categorize transactions for budgeting?" |
|
|
], |
|
|
complex: [ |
|
|
"What accounting standards are followed for transaction record-keeping?", |
|
|
"How does the GL reconciliation process work across multiple currencies?", |
|
|
"Can you explain the audit trail generation process?" |
|
|
] |
|
|
}, |
|
|
basic: { |
|
|
simple: [ |
|
|
"How do I create an account?", |
|
|
"What's the customer support phone number?", |
|
|
"Where can I find the app settings?" |
|
|
], |
|
|
medium: [ |
|
|
"Why can't I receive the verification SMS?", |
|
|
"Can I merge two accounts under one email?", |
|
|
"How do I update my personal information?" |
|
|
], |
|
|
complex: [ |
|
|
"What identity verification protocols are used during KYC onboarding?", |
|
|
"How does the real-time account monitoring system work?", |
|
|
"Can you explain the multi-jurisdictional compliance process?" |
|
|
] |
|
|
}, |
|
|
other: { |
|
|
simple: [ |
|
|
"What currencies does your service support?", |
|
|
"Can I use this service while traveling abroad?", |
|
|
"Where can I find your terms of service?" |
|
|
], |
|
|
medium: [ |
|
|
"Why can't I access certain features in my country?", |
|
|
"Can I give limited access to an accountant?", |
|
|
"How does interest accrual work on stored balances?" |
|
|
], |
|
|
complex: [ |
|
|
"What regulatory bodies oversee the financial services provided?", |
|
|
"How are exchange rates calculated for multi-currency transactions?", |
|
|
"Can you explain the liquidity provisions for fast settlements?" |
|
|
] |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
let possibleQuestions = questions[category][difficulty]; |
|
|
|
|
|
|
|
|
if (selectedDifficulty === 'random') { |
|
|
possibleQuestions = [ |
|
|
...questions[category].simple, |
|
|
...questions[category].medium, |
|
|
...questions[category].complex |
|
|
]; |
|
|
} |
|
|
|
|
|
|
|
|
return possibleQuestions[Math.floor(Math.random() * possibleQuestions.length)]; |
|
|
} |
|
|
|
|
|
function filterQuestions() { |
|
|
displayedQuestions = currentTab === 'all' |
|
|
? allQuestions |
|
|
: allQuestions.filter(q => q.category === currentTab); |
|
|
|
|
|
currentPage = 1; |
|
|
renderQuestions(); |
|
|
updatePagination(); |
|
|
} |
|
|
|
|
|
function renderQuestions() { |
|
|
if (displayedQuestions.length === 0) { |
|
|
questionsContainer.innerHTML = ` |
|
|
<div class="text-center py-12 text-gray-500"> |
|
|
<i class="fas fa-comment-dots text-4xl mb-3"></i> |
|
|
<p>No questions match the current filter.</p> |
|
|
</div> |
|
|
`; |
|
|
pagination.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const startIdx = (currentPage - 1) * questionsPerPage; |
|
|
const endIdx = startIdx + questionsPerPage; |
|
|
const questionsToShow = displayedQuestions.slice(startIdx, endIdx); |
|
|
|
|
|
questionsContainer.innerHTML = ''; |
|
|
|
|
|
questionsToShow.forEach(question => { |
|
|
const categoryColors = { |
|
|
deposit: 'bg-blue-100 text-blue-800', |
|
|
transfer: 'bg-purple-100 text-purple-800', |
|
|
withdrawal: 'bg-indigo-100 text-indigo-800', |
|
|
security: 'bg-red-100 text-red-800', |
|
|
payment: 'bg-green-100 text-green-800', |
|
|
card: 'bg-yellow-100 text-yellow-800', |
|
|
billing: 'bg-pink-100 text-pink-800', |
|
|
basic: 'bg-gray-100 text-gray-800', |
|
|
other: 'bg-teal-100 text-teal-800' |
|
|
}; |
|
|
|
|
|
const difficultyColors = { |
|
|
simple: 'text-green-600', |
|
|
medium: 'text-yellow-600', |
|
|
complex: 'text-red-600' |
|
|
}; |
|
|
|
|
|
const questionEl = document.createElement('div'); |
|
|
questionEl.className = 'question-card bg-white p-4 rounded-lg border border-gray-200 shadow-sm'; |
|
|
questionEl.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<p class="font-medium text-gray-800">${question.text}</p> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="text-xs px-2 py-1 rounded-full ${categoryColors[question.category]}">${question.category}</span> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-800 ${difficultyColors[question.difficulty]}">${question.difficulty}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-xs text-gray-500"> |
|
|
<span>Generated: ${new Date(question.generatedAt).toLocaleString()}</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button data-id="${question.id}" class="edit-btn text-blue-500 hover:text-blue-700"><i class="fas fa-edit"></i></button> |
|
|
<button data-id="${question.id}" class="delete-btn text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
questionsContainer.appendChild(questionEl); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.edit-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => editQuestion(e.target.closest('button').dataset.id)); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.delete-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => deleteQuestion(e.target.closest('button').dataset.id)); |
|
|
}); |
|
|
|
|
|
pagination.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function editQuestion(id) { |
|
|
const question = allQuestions.find(q => q.id.toString() === id); |
|
|
if (!question) return; |
|
|
|
|
|
const newText = prompt("Edit question:", question.text); |
|
|
if (newText && newText.trim() !== '') { |
|
|
question.text = newText.trim(); |
|
|
renderQuestions(); |
|
|
} |
|
|
} |
|
|
|
|
|
function deleteQuestion(id) { |
|
|
if (confirm("Are you sure you want to delete this question?")) { |
|
|
allQuestions = allQuestions.filter(q => q.id.toString() !== id); |
|
|
filterQuestions(); |
|
|
} |
|
|
} |
|
|
|
|
|
function updatePagination() { |
|
|
const totalPages = Math.ceil(displayedQuestions.length / questionsPerPage); |
|
|
pageInfo.textContent = `Page ${currentPage} of ${totalPages}`; |
|
|
|
|
|
prevPage.disabled = currentPage === 1; |
|
|
nextPage.disabled = currentPage === totalPages; |
|
|
} |
|
|
|
|
|
function navigatePage(direction) { |
|
|
const totalPages = Math.ceil(displayedQuestions.length / questionsPerPage); |
|
|
const newPage = currentPage + direction; |
|
|
|
|
|
if (newPage > 0 && newPage <= totalPages) { |
|
|
currentPage = newPage; |
|
|
renderQuestions(); |
|
|
updatePagination(); |
|
|
} |
|
|
} |
|
|
|
|
|
function clearQuestions() { |
|
|
if (allQuestions.length === 0 || confirm('Are you sure you want to clear all generated questions?')) { |
|
|
allQuestions = []; |
|
|
displayedQuestions = []; |
|
|
questionsContainer.innerHTML = ` |
|
|
<div class="text-center py-12 text-gray-500"> |
|
|
<i class="fas fa-comment-dots text-4xl mb-3"></i> |
|
|
<p>No questions generated yet. Configure your settings and click "Generate Questions".</p> |
|
|
</div> |
|
|
`; |
|
|
pagination.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function exportQuestions() { |
|
|
let questionsToExport = []; |
|
|
|
|
|
switch (exportFilter.value) { |
|
|
case 'all': |
|
|
questionsToExport = allQuestions; |
|
|
break; |
|
|
case 'current': |
|
|
const startIdx = (currentPage - 1) * questionsPerPage; |
|
|
const endIdx = startIdx + questionsPerPage; |
|
|
questionsToExport = displayedQuestions.slice(startIdx, endIdx); |
|
|
break; |
|
|
case 'selected': |
|
|
|
|
|
alert('No questions selected. Exporting all questions instead.'); |
|
|
questionsToExport = allQuestions; |
|
|
break; |
|
|
} |
|
|
|
|
|
if (questionsToExport.length === 0) { |
|
|
alert('No questions to export.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
let content = ''; |
|
|
let mimeType = 'text/plain'; |
|
|
let extension = 'txt'; |
|
|
|
|
|
switch (selectedExportFormat) { |
|
|
case 'csv': |
|
|
content = 'ID,Question,Category,Difficulty,Generated At\n'; |
|
|
questionsToExport.forEach(q => { |
|
|
content += `"${q.id}","${q.text}","${q.category}","${q.difficulty}","${q.generatedAt}"\n`; |
|
|
}); |
|
|
mimeType = 'text/csv'; |
|
|
extension = 'csv'; |
|
|
break; |
|
|
|
|
|
case 'json': |
|
|
content = JSON.stringify(questionsToExport, null, 2); |
|
|
mimeType = 'application/json'; |
|
|
extension = 'json'; |
|
|
break; |
|
|
|
|
|
case 'txt': |
|
|
questionsToExport.forEach(q => { |
|
|
content += `Question: ${q.text}\n`; |
|
|
content += `Category: ${q.category}\n`; |
|
|
content += `Difficulty: ${q.difficulty}\n`; |
|
|
content += `Generated At: ${q.generatedAt}\n\n`; |
|
|
}); |
|
|
break; |
|
|
} |
|
|
|
|
|
const blob = new Blob([content], { type: mimeType }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `financial_questions_${new Date().toISOString().slice(0, 10)}.${extension}`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
exportModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function handleFileUpload(event) { |
|
|
const file = event.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
fileName.textContent = file.name; |
|
|
|
|
|
|
|
|
|
|
|
externalDataContent = file.name; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
alert(`File "${file.name}" has been processed and is ready to be used for RAG.`); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function submitUserSuggestion() { |
|
|
const suggestion = userSuggestion.value.trim(); |
|
|
if (!suggestion) { |
|
|
userSuggestion.classList.add('ring-2', 'ring-red-500'); |
|
|
setTimeout(() => userSuggestion.classList.remove('ring-2', 'ring-red-500'), 1000); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
console.log("User suggestion submitted:", suggestion); |
|
|
|
|
|
|
|
|
suggestionModal.classList.remove('hidden'); |
|
|
userSuggestion.value = ''; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
</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" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
