Spaces:

Bio-Du
/

financial-question-generator

Running

App Files Files Community

Bio-Du commited on Apr 2

Commit

186b8a3

verified ·

1 Parent(s): 68639d0

Add 1 files

Browse files

Files changed (1) hide show

index.html +333 -141

index.html CHANGED Viewed

@@ -33,6 +33,14 @@
             color: #3b82f6;
             font-weight: 600;
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -88,7 +96,7 @@
                 </div>
                 <div>
-                    <h2 class="text-xl font-semibold mb-4 text-gray-800">RAG & External Data</h2>
                     <div class="mb-4">
                         <label class="block text-gray-700 mb-2">Import External Data</label>
@@ -103,30 +111,25 @@
                     </div>
                     <div class="mb-4">
-                        <label class="block text-gray-700 mb-2">API Connection</label>
-                        <div class="flex items-center space-x-2">
-                            <div class="relative flex-grow">
-                                <input type="text" id="apiKey" placeholder="Enter DeepSeek API Key" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                                <button id="toggleKey" class="absolute right-3 top-2 text-gray-500">
-                                    <i class="fas fa-eye"></i>
-                                </button>
-                            </div>
-                            <button id="testApiBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
-                                Test
-                            </button>
-                        </div>
-                        <div id="apiStatus" class="mt-2 text-sm flex items-center hidden">
-                            <span class="w-3 h-3 rounded-full mr-2"></span>
-                            <span>API Status</span>
-                        </div>
                     </div>
-                    <div class="bg-blue-50 p-4 rounded-lg">
                         <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. For large batches, multiple API calls will be made automatically. Each question is categorized and checked for quality.
                         </p>
                     </div>
                 </div>
@@ -147,17 +150,17 @@
             </div>
             <div class="border-b border-gray-200 mb-4">
-                <div class="flex space-x-6">
-                    <button data-tab="all" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">All</button>
-                    <button data-tab="deposit" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Deposit</button>
-                    <button data-tab="transfer" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Transfer</button>
-                    <button data-tab="withdrawal" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Withdrawal</button>
-                    <button data-tab="security" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Security</button>
-                    <button data-tab="payment" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Payment</button>
-                    <button data-tab="card" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Card</button>
-                    <button data-tab="billing" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Billing</button>
-                    <button data-tab="basic" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Basic</button>
-                    <button data-tab="other" class="tab-btn pb-2 px-1 text-gray-600 hover:text-blue-600">Other</button>
                 </div>
             </div>
@@ -222,6 +225,30 @@
         </div>
     </div>
     <script>
         // DOM Elements
         const generateBtn = document.getElementById('generateBtn');
@@ -229,13 +256,6 @@
         const clearBtn = document.getElementById('clearBtn');
         const questionCount = document.getElementById('questionCount');
         const customPrompt = document.getElementById('customPrompt');
-        const apiKey = document.getElementById('apiKey');
-        const testApiBtn = document.getElementById('testApiBtn');
-        const apiStatus = document.getElementById('apiStatus');
-        const toggleKey = document.getElementById('toggleKey');
-        const uploadBtn = document.getElementById('uploadBtn');
-        const externalData = document.getElementById('externalData');
-        const fileName = document.getElementById('fileName');
         const questionsContainer = document.getElementById('questionsContainer');
         const loadingIndicator = document.getElementById('loadingIndicator');
         const progressText = document.getElementById('progressText');
@@ -251,6 +271,15 @@
         const nextPage = document.getElementById('nextPage');
         const pageInfo = document.getElementById('pageInfo');
         const pagination = document.getElementById('pagination');
         // State variables
         let selectedCategories = new Set(['deposit', 'transfer', 'withdrawal', 'security', 'payment', 'card', 'billing', 'basic', 'other']);
@@ -261,7 +290,6 @@
         let allQuestions = [];
         let displayedQuestions = [];
         let selectedExportFormat = 'csv';
-        let apiConnected = false;
         let externalDataContent = '';
         // Initialize
@@ -281,17 +309,21 @@
         exportBtn.addEventListener('click', () => exportModal.classList.remove('hidden'));
         clearBtn.addEventListener('click', clearQuestions);
         closeExportModal.addEventListener('click', () => exportModal.classList.add('hidden'));
-        testApiBtn.addEventListener('click', testApiConnection);
-        toggleKey.addEventListener('click', toggleApiKeyVisibility);
         uploadBtn.addEventListener('click', () => externalData.click());
         externalData.addEventListener('change', handleFileUpload);
         prevPage.addEventListener('click', () => navigatePage(-1));
         nextPage.addEventListener('click', () => navigatePage(1));
         // Difficulty buttons
         difficultyBtns.forEach(btn => {
             btn.addEventListener('click', () => {
-                difficultyBtns.forEach(b => b.classList.remove('bg-blue-200'));
                 btn.classList.add('bg-blue-200');
                 selectedDifficulty = btn.dataset.difficulty;
             });
@@ -308,6 +340,19 @@
                     selectedCategories.add(category);
                     chip.classList.add('bg-blue-200');
                 }
             });
         });
@@ -345,18 +390,12 @@
                 return;
             }
-            if (!apiConnected) {
-                alert('Please connect to the DeepSeek API first.');
-                return;
-            }
             // Show loading indicator
             loadingIndicator.classList.remove('hidden');
             questionsContainer.innerHTML = '';
             try {
-                // Simulate API calls (in a real app, you would call the actual DeepSeek API)
-                const batchSize = 5; // Simulate batch processing
                 const batches = Math.ceil(count / batchSize);
                 allQuestions = [];
@@ -364,11 +403,13 @@
                     const currentBatchSize = i === batches - 1 ? count - (i * batchSize) : batchSize;
                     progressText.textContent = `Processing ${i * batchSize}/${count}`;
-                    // Simulate API delay
-                    await new Promise(resolve => setTimeout(resolve, 1000));
-                    // Generate mock questions (replace with actual API call)
-                    const batchQuestions = generateMockQuestions(currentBatchSize);
                     allQuestions = [...allQuestions, ...batchQuestions];
                 }
@@ -388,56 +429,211 @@
             }
         }
-        function generateMockQuestions(count) {
             const categories = Array.from(selectedCategories);
-            const difficulties = selectedDifficulty === 'random' ? ['simple', 'medium', 'complex'] : [selectedDifficulty];
-            const mockQuestions = [];
-            const questionTypes = [
-                "How do I {action} with my {account}?",
-                "What are the steps to {action}?",
-                "Why is my {action} not working?",
-                "How long does {action} take to process?",
-                "What fees are associated with {action}?",
-                "Can I {action} from multiple devices?",
-                "Is there a limit to how much I can {action}?",
-                "What security measures are in place for {action}?",
-                "How can I track my {action} history?",
-                "What should I do if my {action} fails?"
-            ];
-            const actionsByCategory = {
-                deposit: ['deposit money', 'add funds', 'top up my account', 'make a deposit'],
-                transfer: ['transfer money', 'send funds', 'move money between accounts', 'make a transfer'],
-                withdrawal: ['withdraw money', 'take out funds', 'cash out', 'make a withdrawal'],
-                security: ['secure my account', 'change my password', 'enable 2FA', 'report suspicious activity'],
-                payment: ['make a payment', 'pay a bill', 'send money to a merchant', 'complete a transaction'],
-                card: ['add a card', 'remove a card', 'update card details', 'report a lost card'],
-                billing: ['view my transaction history', 'download a statement', 'check my balance', 'review past payments'],
-                basic: ['log in', 'sign up', 'update my profile', 'contact support'],
-                other: ['use advanced features', 'access premium services', 'get help', 'resolve issues']
-            };
             for (let i = 0; i < count; i++) {
                 const category = categories[Math.floor(Math.random() * categories.length)];
-                const difficulty = difficulties[Math.floor(Math.random() * difficulties.length)];
-                const action = actionsByCategory[category][Math.floor(Math.random() * actionsByCategory[category].length)];
-                const questionTemplate = questionTypes[Math.floor(Math.random() * questionTypes.length)];
-                const questionText = questionTemplate
-                    .replace('{action}', action)
-                    .replace('{account}', 'bank account/wallet');
-                mockQuestions.push({
                     id: Date.now() + i,
-                    text: questionText,
                     category: category,
                     difficulty: difficulty,
                     generatedAt: new Date().toISOString()
                 });
             }
-            return mockQuestions;
         }
         function filterQuestions() {
@@ -500,8 +696,8 @@
                     <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 class="text-blue-500 hover:text-blue-700"><i class="fas fa-edit"></i></button>
-                            <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></button>
                         </div>
                     </div>
                 `;
@@ -509,9 +705,36 @@
                 questionsContainer.appendChild(questionEl);
             });
             pagination.classList.remove('hidden');
         }
         function updatePagination() {
             const totalPages = Math.ceil(displayedQuestions.length / questionsPerPage);
             pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
@@ -612,56 +835,6 @@
             exportModal.classList.add('hidden');
         }
-        async function testApiConnection() {
-            if (!apiKey.value.trim()) {
-                alert('Please enter your DeepSeek API key.');
-                return;
-            }
-            testApiBtn.disabled = true;
-            testApiBtn.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> Testing';
-            // Simulate API test (replace with actual API call)
-            await new Promise(resolve => setTimeout(resolve, 1500));
-            // Mock response
-            const success = Math.random() > 0.2; // 80% chance of success for demo
-            if (success) {
-                apiStatus.classList.remove('hidden');
-                apiStatus.classList.add('text-green-600');
-                apiStatus.classList.remove('text-red-600');
-                apiStatus.querySelector('span').textContent = 'Connected to DeepSeek API';
-                apiStatus.querySelector('.rounded-full').classList.add('bg-green-500');
-                apiStatus.querySelector('.rounded-full').classList.remove('bg-red-500');
-                apiConnected = true;
-            } else {
-                apiStatus.classList.remove('hidden');
-                apiStatus.classList.add('text-red-600');
-                apiStatus.classList.remove('text-green-600');
-                apiStatus.querySelector('span').textContent = 'Connection failed';
-                apiStatus.querySelector('.rounded-full').classList.add('bg-red-500');
-                apiStatus.querySelector('.rounded-full').classList.remove('bg-green-500');
-                apiConnected = false;
-            }
-            testApiBtn.disabled = false;
-            testApiBtn.innerHTML = 'Test';
-        }
-        function toggleApiKeyVisibility() {
-            const icon = toggleKey.querySelector('i');
-            if (apiKey.type === 'password') {
-                apiKey.type = 'text';
-                icon.classList.remove('fa-eye');
-                icon.classList.add('fa-eye-slash');
-            } else {
-                apiKey.type = 'password';
-                icon.classList.remove('fa-eye-slash');
-                icon.classList.add('fa-eye');
-            }
-        }
         function handleFileUpload(event) {
             const file = event.target.files[0];
             if (!file) return;
@@ -677,6 +850,25 @@
                 alert(`File "${file.name}" has been processed and is ready to be used for RAG.`);
             }, 1000);
         }
     </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>

             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>
                 <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>
                     <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 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>
     </div>
+    <!-- Suggestion Feedback Modal -->
+    <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>
         // DOM Elements
         const generateBtn = document.getElementById('generateBtn');
         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 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');
         // State variables
         let selectedCategories = new Set(['deposit', 'transfer', 'withdrawal', 'security', 'payment', 'card', 'billing', 'basic', 'other']);
         let allQuestions = [];
         let displayedQuestions = [];
         let selectedExportFormat = 'csv';
         let externalDataContent = '';
         // Initialize
         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'));
         // Difficulty buttons
         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;
             });
                     selectedCategories.add(category);
                     chip.classList.add('bg-blue-200');
                 }
+                // Visual feedback
+                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');
+                    });
+                }
             });
         });
                 return;
             }
             // Show loading indicator
             loadingIndicator.classList.remove('hidden');
             questionsContainer.innerHTML = '';
             try {
+                const batchSize = 5; // Number of questions per API call
                 const batches = Math.ceil(count / batchSize);
                 allQuestions = [];
                     const currentBatchSize = i === batches - 1 ? count - (i * batchSize) : batchSize;
                     progressText.textContent = `Processing ${i * batchSize}/${count}`;
+                    // Prepare prompt for API call
+                    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}`;
+                    // Call DeepSeek API (simulated in this example)
+                    const batchQuestions = await callDeepSeekApi(prompt, currentBatchSize);
                     allQuestions = [...allQuestions, ...batchQuestions];
                 }
             }
         }
+        // Simulate DeepSeek API call with realistic financial questions
+        async function callDeepSeekApi(prompt, count) {
+            // In a real implementation, this would make an actual API call
+            // For this example, we'll simulate the API response with realistic questions
+            // Simulate API delay (500-1500ms)
+            const delay = 500 + Math.random() * 1000;
+            await new Promise(resolve => setTimeout(resolve, delay));
+            // Generate realistic financial questions based on the prompt
             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) {
+            // Realistic question templates for each category and 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?"
+                    ]
+                }
+            };
+            // Get all possible questions for this category and difficulty
+            let possibleQuestions = questions[category][difficulty];
+            // If the difficulty was 'random', select from all difficulties
+            if (selectedDifficulty === 'random') {
+                possibleQuestions = [
+                    ...questions[category].simple,
+                    ...questions[category].medium,
+                    ...questions[category].complex
+                ];
+            }
+            // Return a random question from the selection
+            return possibleQuestions[Math.floor(Math.random() * possibleQuestions.length)];
         }
         function filterQuestions() {
                     <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);
             });
+            // Add event listeners to edit and delete buttons
+            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}`;
             exportModal.classList.add('hidden');
         }
         function handleFileUpload(event) {
             const file = event.target.files[0];
             if (!file) return;
                 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;
+            }
+            // In a real app, you would send this to the API
+            console.log("User suggestion submitted:", suggestion);
+            // Show feedback modal
+            suggestionModal.classList.remove('hidden');
+            userSuggestion.value = '';
+            // After showing, this would be sent to DeepSeek API to improve future generations
+            // For this demo, we'll just log it
+        }
     </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>