unsloth
/

Qwen3-Coder-30B-A3B-Instruct-GGUF

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Study Helper | Exam Question Generator</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --accent-color: #4895ef;
+            --light-color: #f8f9fa;
+            --dark-color: #212529;
+            --success-color: #4cc9f0;
+            --warning-color: #f72585;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #f5f7fa;
+            color: var(--dark-color);
+            line-height: 1.6;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 1.5rem 0;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        .container {
+            width: 90%;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .logo i {
+            color: var(--accent-color);
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 1.5rem;
+        }
+        nav a {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+        }
+        nav a:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        .mobile-menu-btn {
+            display: none;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+        main {
+            flex: 1;
+            padding: 2rem 0;
+        }
+        .hero {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        .hero h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: var(--dark-color);
+        }
+        .hero p {
+            font-size: 1.1rem;
+            color: #6c757d;
+            max-width: 700px;
+            margin: 0 auto 2rem;
+        }
+        .search-box {
+            background: white;
+            border-radius: 10px;
+            padding: 2rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .input-group {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 1rem;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        input[type="text"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(72, 149, 239, 0.3);
+        }
+        button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 1rem 1.5rem;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        button:hover {
+            background-color: var(--secondary-color);
+            transform: translateY(-2px);
+        }
+        button:disabled {
+            background-color: #adb5bd;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .options {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+        }
+        .select-group {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        select {
+            padding: 0.5rem;
+            border-radius: 6px;
+            border: 2px solid #e9ecef;
+            background-color: white;
+        }
+        .results {
+            margin-top: 3rem;
+            display: none;
+        }
+        .results h2 {
+            margin-bottom: 1.5rem;
+            color: var(--dark-color);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .question-card {
+            background: white;
+            border-radius: 10px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            border-left: 4px solid var(--accent-color);
+            transition: all 0.3s ease;
+        }
+        .question-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        }
+        .question {
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--dark-color);
+        }
+        .answer {
+            color: #495057;
+            padding-left: 1rem;
+            border-left: 2px solid #dee2e6;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            margin: 2rem 0;
+        }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 4px solid var(--primary-color);
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error-message {
+            color: var(--warning-color);
+            text-align: center;
+            margin: 1rem 0;
+            display: none;
+        }
+        footer {
+            background-color: var(--dark-color);
+            color: white;
+            padding: 2rem 0;
+            margin-top: 3rem;
+        }
+        .footer-content {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            gap: 2rem;
+        }
+        .footer-section {
+            flex: 1;
+            min-width: 200px;
+        }
+        .footer-section h3 {
+            margin-bottom: 1.5rem;
+            font-size: 1.2rem;
+            position: relative;
+            padding-bottom: 0.5rem;
+        }
+        .footer-section h3::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 50px;
+            height: 2px;
+            background-color: var(--accent-color);
+        }
+        .footer-section p {
+            margin-bottom: 1rem;
+            color: #adb5bd;
+        }
+        .footer-links {
+            list-style: none;
+        }
+        .footer-links li {
+            margin-bottom: 0.8rem;
+        }
+        .footer-links a {
+            color: #adb5bd;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        .footer-links a:hover {
+            color: white;
+            padding-left: 5px;
+        }
+        .social-links {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+        .social-links a {
+            color: white;
+            background-color: #495057;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        .social-links a:hover {
+            background-color: var(--accent-color);
+            transform: translateY(-3px);
+        }
+        .footer-bottom {
+            text-align: center;
+            padding-top: 2rem;
+            margin-top: 2rem;
+            border-top: 1px solid #495057;
+            color: #adb5bd;
+            font-size: 0.9rem;
+        }
+        @media (max-width: 768px) {
+            .header-content {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            nav ul {
+                flex-direction: column;
+                gap: 0.5rem;
+                align-items: center;
+            }
+            .input-group {
+                flex-direction: column;
+            }
+            button {
+                width: 100%;
+                justify-content: center;
+            }
+            .options {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            .select-group {
+                justify-content: space-between;
+            }
+        }
+        @media (max-width: 480px) {
+            .hero h1 {
+                font-size: 2rem;
+            }
+            .hero p {
+                font-size: 1rem;
+            }
+            .search-box {
+                padding: 1.5rem;
+            }
+            .footer-content {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div class="header-content">
+                <div class="logo">
+                    <i class="fas fa-brain"></i>
+                    <span>AI Study Helper</span>
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
+                        <li><a href="#"><i class="fas fa-book"></i> Subjects</a></li>
+                        <li><a href="#"><i class="fas fa-graduation-cap"></i> Exam Prep</a></li>
+                        <li><a href="#"><i class="fas fa-info-circle"></i> About</a></li>
+                    </ul>
+                </nav>
+                <button class="mobile-menu-btn">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div class="container">
+            <section class="hero">
+                <h1>AI-Powered Exam Question Generator</h1>
+                <p>Enter any topic or question below, and our AI will generate potential exam questions with detailed answers to help you prepare effectively.</p>
+            </section>
+            <section class="search-box">
+                <div class="input-group">
+                    <input type="text" id="topicInput" placeholder="Enter a topic or question (e.g., 'Photosynthesis', 'Newton's Laws', 'World War II')">
+                    <button id="generateBtn">
+                        <i class="fas fa-magic"></i> Generate Questions
+                    </button>
+                </div>
+                <div class="options">
+                    <div class="select-group">
+                        <label for="difficulty">Difficulty:</label>
+                        <select id="difficulty">
+                            <option value="easy">Easy</option>
+                            <option value="medium" selected>Medium</option>
+                            <option value="hard">Hard</option>
+                        </select>
+                    </div>
+                    <div class="select-group">
+                        <label for="questionType">Type:</label>
+                        <select id="questionType">
+                            <option value="mixed" selected>Mixed</option>
+                            <option value="multiple_choice">Multiple Choice</option>
+                            <option value="short_answer">Short Answer</option>
+                            <option value="essay">Essay</option>
+                            <option value="true_false">True/False</option>
+                        </select>
+                    </div>
+                    <div class="select-group">
+                        <label for="questionCount">Count:</label>
+                        <select id="questionCount">
+                            <option value="3">3</option>
+                            <option value="5" selected>5</option>
+                            <option value="10">10</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="error-message" id="errorMessage"></div>
+            </section>
+            <div class="loading" id="loadingIndicator">
+                <div class="spinner"></div>
+                <p>Generating questions... This may take a moment.</p>
+            </div>
+            <section class="results" id="resultsSection">
+                <h2><i class="fas fa-list-ol"></i> Generated Questions</h2>
+                <div id="questionsContainer"></div>
+            </section>
+        </div>
+    </main>
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>About AI Study Helper</h3>
+                    <p>Our mission is to empower students with AI-driven tools to enhance their learning experience and exam preparation.</p>
+                    <div class="social-links">
+                        <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#"><i class="fab fa-twitter"></i></a>
+                        <a href="#"><i class="fab fa-instagram"></i></a>
+                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+                <div class="footer-section">
+                    <h3>Quick Links</h3>
+                    <ul class="footer-links">
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Popular Subjects</a></li>
+                        <li><a href="#">Exam Preparation</a></li>
+                        <li><a href="#">Study Tips</a></li>
+                        <li><a href="#">Contact Us</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Resources</h3>
+                    <ul class="footer-links">
+                        <li><a href="#">Blog</a></li>
+                        <li><a href="#">FAQ</a></li>
+                        <li><a href="#">Privacy Policy</a></li>
+                        <li><a href="#">Terms of Service</a></li>
+                        <li><a href="#">API Documentation</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3>Newsletter</h3>
+                    <p>Subscribe to get updates on new features and study resources.</p>
+                    <div class="input-group">
+                        <input type="email" placeholder="Your email">
+                        <button><i class="fas fa-paper-plane"></i></button>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2023 AI Study Helper. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const topicInput = document.getElementById('topicInput');
+            const generateBtn = document.getElementById('generateBtn');
+            const difficultySelect = document.getElementById('difficulty');
+            const questionTypeSelect = document.getElementById('questionType');
+            const questionCountSelect = document.getElementById('questionCount');
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            const resultsSection = document.getElementById('resultsSection');
+            const questionsContainer = document.getElementById('questionsContainer');
+            const errorMessage = document.getElementById('errorMessage');
+            // Event Listeners
+            generateBtn.addEventListener('click', generateQuestions);
+            topicInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    generateQuestions();
+                }
+            });
+            // Mobile menu toggle
+            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+            const nav = document.querySelector('nav ul');
+            mobileMenuBtn.addEventListener('click', function() {
+                nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
+            });
+            // Adjust for mobile on resize
+            window.addEventListener('resize', function() {
+                if (window.innerWidth > 768) {
+                    nav.style.display = 'flex';
+                } else {
+                    nav.style.display = 'none';
+                }
+            });
+            // Initialize mobile menu
+            if (window.innerWidth <= 768) {
+                nav.style.display = 'none';
+            }
+            // Generate Questions Function
+            async function generateQuestions() {
+                const topic = topicInput.value.trim();
+                const difficulty = difficultySelect.value;
+                const questionType = questionTypeSelect.value;
+                const questionCount = questionCountSelect.value;
+                // Validate input
+                if (!topic) {
+                    showError('Please enter a topic or question');
+                    return;
+                }
+                // Clear previous results and errors
+                questionsContainer.innerHTML = '';
+                hideError();
+                resultsSection.style.display = 'none';
+                // Show loading indicator
+                loadingIndicator.style.display = 'block';
+                generateBtn.disabled = true;
+                try {
+                    // Generate prompt for the AI
+                    const prompt = `Generate ${questionCount} ${difficulty}-level ${questionType} exam questions with answers about ${topic}.
+                    Format each question as "Question: [question text]" followed by "Answer: [answer text]".
+                    Make sure the questions are relevant and likely to appear in an exam.`;
+                    // Call Hugging Face API
+                    const response = await callHuggingFaceAPI(prompt);
+                    // Process the response
+                    if (response && response.generated_text) {
+                        const questionsAndAnswers = parseQuestionsAndAnswers(response.generated_text);
+                        displayQuestions(questionsAndAnswers);
+                    } else {
+                        showError('Failed to generate questions. Please try again.');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    showError('An error occurred. Please check your connection and try again.');
+                } finally {
+                    loadingIndicator.style.display = 'none';
+                    generateBtn.disabled = false;
+                }
+            }
+            // Call Hugging Face API
+            async function callHuggingFaceAPI(prompt) {
+                // Replace with your actual Hugging Face API token
+                const API_TOKEN = "YOUR_HUGGING_FACE_API_TOKEN";
+                const API_URL = "https://api-inference.huggingface.co/models/google/flan-t5-xxl";
+                try {
+                    const response = await fetch(API_URL, {
+                        method: "POST",
+                        headers: {
+                            "Authorization": `Bearer ${API_TOKEN}`,
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify({ inputs: prompt })
+                    });
+                    if (!response.ok) {
+                        throw new Error(`API request failed with status ${response.status}`);
+                    }
+                    return await response.json();
+                } catch (error) {
+                    console.error("API call error:", error);
+                    throw error;
+                }
+            }
+            // Parse Questions and Answers from the AI response
+            function parseQuestionsAndAnswers(text) {
+                const qaPairs = [];
+                const lines = text.split('\n');
+                let currentQuestion = null;
+                for (const line of lines) {
+                    if (line.startsWith('Question:')) {
+                        if (currentQuestion) {
+                            qaPairs.push(currentQuestion);
+                        }
+                        currentQuestion = {
+                            question: line.replace('Question:', '').trim(),
+                            answer: ''
+                        };
+                    } else if (line.startsWith('Answer:')) {
+                        if (currentQuestion) {
+                            currentQuestion.answer = line.replace('Answer:', '').trim();
+                            qaPairs.push(currentQuestion);
+                            currentQuestion = null;
+                        }
+                    } else if (currentQuestion && currentQuestion.answer === '') {
+                        // Handle multi-line answers
+                        currentQuestion.answer += line.trim() + '\n';
+                    }
+                }
+                // Add the last question if it exists
+                if (currentQuestion) {
+                    qaPairs.push(currentQuestion);
+                }
+                return qaPairs;
+            }
+            // Display Questions and Answers
+            function displayQuestions(qaPairs) {
+                if (qaPairs.length === 0) {
+                    showError('No questions were generated. Please try a different topic or prompt.');
+                    return;
+                }
+                qaPairs.forEach((qa, index) => {
+                    const card = document.createElement('div');
+                    card.className = 'question-card';
+                    card.innerHTML = `
+                        <div class="question">Q${index + 1}: ${qa.question}</div>
+                        <div class="answer">${qa.answer}</div>
+                    `;
+                    questionsContainer.appendChild(card);
+                });
+                resultsSection.style.display = 'block';
+            }
+            // Error Handling
+            function showError(message) {
+                errorMessage.textContent = message;
+                errorMessage.style.display = 'block';
+            }
+            function hideError() {
+                errorMessage.style.display = 'none';
+            }
+        });
+    </script>
+</body>
+</html>