Spaces:

Bio-Du
/

financial-question-generator

Running

App Files Files Community

Bio-Du commited on Apr 2, 2025

Commit

68639d0

verified ·

1 Parent(s): 7bbfc4a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +682 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Financial Question Generator
-emoji: ⚡
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: financial-question-generator
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,682 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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;
+        }
+    </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 & External Data</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">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>
+            </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">
+                    <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>
+            <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>
+    <!-- Export Modal -->
+    <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>
+    <script>
+        // DOM Elements
+        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 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');
+        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');
+        // State variables
+        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 apiConnected = false;
+        let externalDataContent = '';
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Set default active tab
+            document.querySelector('[data-tab="all"]').classList.add('tab-active');
+            // Set default active difficulty
+            document.querySelector('[data-difficulty="random"]').classList.add('bg-blue-200');
+            // Set default active export format
+            document.querySelector('[data-format="csv"]').classList.add('bg-blue-200', 'text-blue-800');
+        });
+        // Event Listeners
+        generateBtn.addEventListener('click', generateQuestions);
+        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;
+            });
+        });
+        // Category chips
+        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');
+                }
+            });
+        });
+        // Tab buttons
+        tabBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                tabBtns.forEach(b => b.classList.remove('tab-active'));
+                btn.classList.add('tab-active');
+                currentTab = btn.dataset.tab;
+                filterQuestions();
+            });
+        });
+        // Export format buttons
+        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);
+        // Functions
+        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;
+            }
+            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 = [];
+                for (let i = 0; i < batches; i++) {
+                    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];
+                }
+                // Display questions
+                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>
+                `;
+            }
+        }
+        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() {
+            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 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>
+                `;
+                questionsContainer.appendChild(questionEl);
+            });
+            pagination.classList.remove('hidden');
+        }
+        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':
+                    // In a real app, you would track selected questions
+                    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');
+        }
+        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;
+            fileName.textContent = file.name;
+            // In a real app, you would process the file content
+            // For demo purposes, we'll just store the filename
+            externalDataContent = file.name;
+            // Simulate processing
+            setTimeout(() => {
+                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>