Spaces:

8421bit
/

ai-question-generator

Running

App Files Files Community

8421bit commited on Apr 2, 2025

Commit

a17ffd5

verified ·

1 Parent(s): 930e13b

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +372 -19

README.md CHANGED Viewed

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

 ---
+title: ai-question-generator
+emoji: 🐳
+colorFrom: pink
 colorTo: yellow
 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,372 @@
-<!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>AI 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>
+        .question-card {
+            transition: all 0.3s ease;
+        }
+        .question-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        .loading-dots::after {
+            content: '.';
+            animation: dots 1.5s steps(5, end) infinite;
+        }
+        @keyframes dots {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60% { content: '...'; }
+            80%, 100% { content: ''; }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-indigo-700 mb-2">AI Question Generator</h1>
+            <p class="text-gray-600 max-w-2xl mx-auto">Enter a topic and let our AI generate insightful questions to explore the subject deeply.</p>
+        </header>
+        <!-- Main Content -->
+        <div class="max-w-4xl mx-auto">
+            <!-- Input Section -->
+            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex-grow">
+                        <label for="topic" class="block text-sm font-medium text-gray-700 mb-1">Enter your topic</label>
+                        <input
+                            type="text"
+                            id="topic"
+                            placeholder="e.g. Artificial Intelligence, Climate Change, Renaissance Art..."
+                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
+                        >
+                    </div>
+                    <div class="flex items-end">
+                        <button
+                            id="generateBtn"
+                            class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center justify-center w-full md:w-auto"
+                        >
+                            <i class="fas fa-bolt mr-2"></i> Generate Questions
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-4 flex flex-wrap gap-3">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="basicQuestions" class="h-4 w-4 text-indigo-600 rounded" checked>
+                        <label for="basicQuestions" class="ml-2 text-sm text-gray-700">Basic</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="advancedQuestions" class="h-4 w-4 text-indigo-600 rounded" checked>
+                        <label for="advancedQuestions" class="ml-2 text-sm text-gray-700">Advanced</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" id="criticalQuestions" class="h-4 w-4 text-indigo-600 rounded" checked>
+                        <label for="criticalQuestions" class="ml-2 text-sm text-gray-700">Critical Thinking</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="number" id="questionCount" min="3" max="20" value="8" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm">
+                        <label for="questionCount" class="ml-2 text-sm text-gray-700">Questions</label>
+                    </div>
+                </div>
+            </div>
+            <!-- Loading State -->
+            <div id="loadingState" class="hidden text-center py-12">
+                <div class="inline-block bg-white p-6 rounded-xl shadow-md">
+                    <i class="fas fa-cog fa-spin text-indigo-600 text-3xl mb-3"></i>
+                    <p class="text-gray-700 font-medium loading-dots">Generating questions</p>
+                </div>
+            </div>
+            <!-- Results Section -->
+            <div id="resultsSection" class="hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-gray-800">Generated Questions</h2>
+                    <div class="flex gap-2">
+                        <button id="exportJsonBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition flex items-center">
+                            <i class="fas fa-file-export mr-2"></i> Export JSON
+                        </button>
+                        <button id="copyAllBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition flex items-center">
+                            <i class="fas fa-copy mr-2"></i> Copy All
+                        </button>
+                    </div>
+                </div>
+                <div id="questionsContainer" class="grid gap-4">
+                    <!-- Questions will be inserted here -->
+                </div>
+            </div>
+            <!-- Empty State -->
+            <div id="emptyState" class="text-center py-16 bg-white rounded-xl shadow-sm">
+                <i class="fas fa-comment-dots text-4xl text-gray-300 mb-4"></i>
+                <h3 class="text-lg font-medium text-gray-500">No questions generated yet</h3>
+                <p class="text-gray-400 mt-1">Enter a topic above and click "Generate Questions" to get started</p>
+            </div>
+        </div>
+    </div>
+    <!-- JSON Export Modal -->
+    <div id="jsonModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+            <div class="px-6 py-4 border-b flex justify-between items-center">
+                <h3 class="text-lg font-semibold">Export Questions as JSON</h3>
+                <button id="closeJsonModal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-6 overflow-auto flex-grow">
+                <pre id="jsonOutput" class="bg-gray-50 p-4 rounded text-sm overflow-auto"></pre>
+            </div>
+            <div class="px-6 py-4 border-t flex justify-end gap-3">
+                <button id="copyJsonBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                    <i class="fas fa-copy mr-2"></i> Copy JSON
+                </button>
+                <button id="downloadJsonBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition">
+                    <i class="fas fa-download mr-2"></i> Download
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const topicInput = document.getElementById('topic');
+            const generateBtn = document.getElementById('generateBtn');
+            const loadingState = document.getElementById('loadingState');
+            const resultsSection = document.getElementById('resultsSection');
+            const emptyState = document.getElementById('emptyState');
+            const questionsContainer = document.getElementById('questionsContainer');
+            const exportJsonBtn = document.getElementById('exportJsonBtn');
+            const copyAllBtn = document.getElementById('copyAllBtn');
+            const jsonModal = document.getElementById('jsonModal');
+            const closeJsonModal = document.getElementById('closeJsonModal');
+            const jsonOutput = document.getElementById('jsonOutput');
+            const copyJsonBtn = document.getElementById('copyJsonBtn');
+            const downloadJsonBtn = document.getElementById('downloadJsonBtn');
+            // Sample question types for the mock API
+            const questionTypes = {
+                basic: [
+                    "What is {topic}?",
+                    "Why is {topic} important?",
+                    "How does {topic} work?",
+                    "What are the main components of {topic}?",
+                    "When did {topic} first emerge?"
+                ],
+                advanced: [
+                    "What are the current challenges in {topic}?",
+                    "How has {topic} evolved over time?",
+                    "What are the different approaches to {topic}?",
+                    "How does {topic} compare to similar concepts?",
+                    "What are the technical aspects of {topic}?"
+                ],
+                critical: [
+                    "What are the ethical implications of {topic}?",
+                    "How might {topic} impact society in the future?",
+                    "What are the limitations of current {topic} implementations?",
+                    "How could {topic} be improved or innovated upon?",
+                    "What controversies exist surrounding {topic}?"
+                ]
+            };
+            // Generate questions (mock API call)
+            function generateQuestions(topic, count) {
+                const selectedTypes = [];
+                if (document.getElementById('basicQuestions').checked) selectedTypes.push('basic');
+                if (document.getElementById('advancedQuestions').checked) selectedTypes.push('advanced');
+                if (document.getElementById('criticalQuestions').checked) selectedTypes.push('critical');
+                // Distribute questions evenly among selected types
+                const questionsPerType = Math.ceil(count / selectedTypes.length);
+                let questions = [];
+                selectedTypes.forEach(type => {
+                    const typeQuestions = [...questionTypes[type]];
+                    // Shuffle and take needed amount
+                    typeQuestions.sort(() => 0.5 - Math.random());
+                    const selected = typeQuestions.slice(0, questionsPerType);
+                    questions = [...questions, ...selected];
+                });
+                // Shuffle all questions and trim to exact count
+                questions.sort(() => 0.5 - Math.random());
+                questions = questions.slice(0, count);
+                // Replace {topic} with actual topic
+                return questions.map(q => ({
+                    text: q.replace('{topic}', topic),
+                    type: Object.keys(questionTypes).find(key => questionTypes[key].includes(q)) || 'basic'
+                }));
+            }
+            // Display questions
+            function displayQuestions(questions) {
+                questionsContainer.innerHTML = '';
+                questions.forEach((question, index) => {
+                    const typeColors = {
+                        basic: 'bg-blue-100 text-blue-800',
+                        advanced: 'bg-purple-100 text-purple-800',
+                        critical: 'bg-orange-100 text-orange-800'
+                    };
+                    const card = document.createElement('div');
+                    card.className = `question-card bg-white rounded-xl shadow-sm p-5 border-l-4 border-indigo-500 fade-in`;
+                    card.style.animationDelay = `${index * 0.05}s`;
+                    card.innerHTML = `
+                        <div class="flex justify-between items-start">
+                            <div class="flex-grow">
+                                <div class="flex items-center mb-2">
+                                    <span class="text-xs font-medium px-2 py-1 rounded-full ${typeColors[question.type]} mr-2">
+                                        ${question.type.charAt(0).toUpperCase() + question.type.slice(1)}
+                                    </span>
+                                </div>
+                                <p class="text-gray-800 font-medium">${question.text}</p>
+                            </div>
+                            <button class="copy-btn text-gray-400 hover:text-indigo-600 ml-3" data-question="${question.text}">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                        </div>
+                    `;
+                    questionsContainer.appendChild(card);
+                });
+                // Add event listeners to copy buttons
+                document.querySelectorAll('.copy-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const question = this.getAttribute('data-question');
+                        navigator.clipboard.writeText(question);
+                        // Show feedback
+                        const icon = this.querySelector('i');
+                        icon.className = 'fas fa-check';
+                        setTimeout(() => {
+                            icon.className = 'fas fa-copy';
+                        }, 1000);
+                    });
+                });
+            }
+            // Generate button click handler
+            generateBtn.addEventListener('click', function() {
+                const topic = topicInput.value.trim();
+                const count = parseInt(document.getElementById('questionCount').value) || 8;
+                if (!topic) {
+                    alert('Please enter a topic first');
+                    return;
+                }
+                // Show loading state
+                loadingState.classList.remove('hidden');
+                resultsSection.classList.add('hidden');
+                emptyState.classList.add('hidden');
+                // Simulate API call with timeout
+                setTimeout(() => {
+                    const questions = generateQuestions(topic, count);
+                    // Hide loading and show results
+                    loadingState.classList.add('hidden');
+                    resultsSection.classList.remove('hidden');
+                    displayQuestions(questions);
+                    // Scroll to results
+                    resultsSection.scrollIntoView({ behavior: 'smooth' });
+                }, 1500);
+            });
+            // Export JSON functionality
+            exportJsonBtn.addEventListener('click', function() {
+                const questions = Array.from(document.querySelectorAll('.question-card')).map(card => {
+                    return {
+                        question: card.querySelector('p').textContent,
+                        type: card.querySelector('span').textContent.toLowerCase()
+                    };
+                });
+                const jsonData = {
+                    topic: topicInput.value.trim(),
+                    generatedAt: new Date().toISOString(),
+                    questions: questions
+                };
+                jsonOutput.textContent = JSON.stringify(jsonData, null, 2);
+                jsonModal.classList.remove('hidden');
+            });
+            // Close JSON modal
+            closeJsonModal.addEventListener('click', function() {
+                jsonModal.classList.add('hidden');
+            });
+            // Copy JSON to clipboard
+            copyJsonBtn.addEventListener('click', function() {
+                navigator.clipboard.writeText(jsonOutput.textContent);
+                const icon = this.querySelector('i');
+                const originalText = this.innerHTML;
+                this.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
+                setTimeout(() => {
+                    this.innerHTML = originalText;
+                }, 2000);
+            });
+            // Download JSON file
+            downloadJsonBtn.addEventListener('click', function() {
+                const data = jsonOutput.textContent;
+                const blob = new Blob([data], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `questions-${topicInput.value.trim().toLowerCase().replace(/\s+/g, '-')}-${new Date().toISOString().slice(0,10)}.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            });
+            // Copy all questions
+            copyAllBtn.addEventListener('click', function() {
+                const questions = Array.from(document.querySelectorAll('.question-card')).map(card => {
+                    return card.querySelector('p').textContent;
+                }).join('\n\n');
+                navigator.clipboard.writeText(questions);
+                const icon = this.querySelector('i');
+                const originalText = this.innerHTML;
+                this.innerHTML = '<i class="fas fa-check mr-2"></i> Copied all!';
+                setTimeout(() => {
+                    this.innerHTML = originalText;
+                }, 2000);
+            });
+            // Allow Enter key to trigger generation
+            topicInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    generateBtn.click();
+                }
+            });
+        });
+    </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=8421bit/ai-question-generator" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>