Spaces:
Running
Running
| <html><head><base href="https://websim.ai/second-grade-simplifier"><title>Second Grade Simplifier: Making Complex Text Easy for Young Learners</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-yellow-300 to-green-400 text-gray-800 min-h-screen font-sans"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-white">Second Grade Simplifier 📚</h1> | |
| <p class="mt-2 text-center text-green-800">Making Complex Text Easy for Young Learners</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-700">Simplify Your Text</h2> | |
| <form id="simplifier-form" method="GET" action="https://websim.ai/second-grade-simplifier" class="space-y-4"> | |
| <div> | |
| <label for="complex-text" class="block text-sm font-medium text-gray-700">Complex Text:</label> | |
| <textarea id="complex-text" name="text" rows="6" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 text-gray-900" placeholder="Paste your complex text here..."></textarea> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700">Subject (optional):</label> | |
| <input type="text" id="subject" name="subject" class="mt-1 block w-full px-3 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 text-gray-900" placeholder="e.g. Science, History, Literature"> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Simplify for Second Graders 🍎 | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="result-container" class="bg-white rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-700">Simplified Text</h2> | |
| <div id="simplified-result" class="space-y-4"> | |
| <!-- Simplified text will be inserted here --> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold mb-4 text-green-700">Tips for Teaching Young Learners</h2> | |
| <ul class="list-disc list-inside space-y-2 text-gray-700"> | |
| <li>Use simple words and short sentences</li> | |
| <li>Explain new concepts with familiar examples</li> | |
| <li>Include visual aids when possible</li> | |
| <li>Encourage questions and curiosity</li> | |
| <li>Make learning fun and interactive</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <script> | |
| const simplifierForm = document.getElementById('simplifier-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const simplifiedResult = document.getElementById('simplified-result'); | |
| simplifierForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const complexText = document.getElementById('complex-text').value.trim(); | |
| const subject = document.getElementById('subject').value.trim(); | |
| if (!complexText) { | |
| alert('Please enter some text to simplify.'); | |
| return; | |
| } | |
| simplifyText(complexText, subject); | |
| }); | |
| function simplifyText(text, subject) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| simplifiedResult.innerHTML = '<div class="flex justify-center"><div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div></div>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const simplifiedText = generateSimplifiedText(text, subject); | |
| displaySimplifiedText(simplifiedText); | |
| }, 2000); | |
| } | |
| function generateSimplifiedText(text, subject) { | |
| // This is a simplified text generator. In a real application, this would use more sophisticated NLP models. | |
| const simplificationRules = [ | |
| { complex: /utilize/g, simple: "use" }, | |
| { complex: /implement/g, simple: "do" }, | |
| { complex: /subsequently/g, simple: "then" }, | |
| { complex: /nevertheless/g, simple: "but" }, | |
| { complex: /approximately/g, simple: "about" }, | |
| { complex: /sufficient/g, simple: "enough" }, | |
| { complex: /initiate/g, simple: "start" }, | |
| { complex: /terminate/g, simple: "end" }, | |
| { complex: /comprehend/g, simple: "understand" }, | |
| { complex: /endeavor/g, simple: "try" } | |
| ]; | |
| let simplifiedText = text; | |
| simplificationRules.forEach(rule => { | |
| simplifiedText = simplifiedText.replace(rule.complex, rule.simple); | |
| }); | |
| // Break long sentences | |
| simplifiedText = simplifiedText.replace(/\.\s+/g, ".\n\n"); | |
| // Add subject-specific introduction if provided | |
| if (subject) { | |
| simplifiedText = `Let's learn about ${subject}!\n\n${simplifiedText}`; | |
| } | |
| return simplifiedText; | |
| } | |
| function displaySimplifiedText(text) { | |
| const paragraphs = text.split('\n\n'); | |
| let simplifiedHTML = '<div class="space-y-4">'; | |
| paragraphs.forEach((paragraph, index) => { | |
| simplifiedHTML += ` | |
| <p class="text-lg text-gray-800">${paragraph}</p> | |
| `; | |
| if (index === 0 || index === Math.floor(paragraphs.length / 2)) { | |
| simplifiedHTML += generateIllustration(); | |
| } | |
| }); | |
| simplifiedHTML += '</div>'; | |
| simplifiedResult.innerHTML = simplifiedHTML; | |
| } | |
| function generateIllustration() { | |
| const illustrations = [ | |
| { emoji: "🌳", description: "a green tree" }, | |
| { emoji: "🌞", description: "a bright sun" }, | |
| { emoji: "🐶", description: "a cute dog" }, | |
| { emoji: "🏠", description: "a cozy house" }, | |
| { emoji: "🚀", description: "a space rocket" }, | |
| { emoji: "🌈", description: "a colorful rainbow" }, | |
| { emoji: "🦋", description: "a beautiful butterfly" }, | |
| { emoji: "🌺", description: "a pretty flower" } | |
| ]; | |
| const randomIllustration = illustrations[Math.floor(Math.random() * illustrations.length)]; | |
| return ` | |
| <div class="flex justify-center my-4"> | |
| <div class="text-6xl float" role="img" aria-label="${randomIllustration.description}">${randomIllustration.emoji}</div> | |
| </div> | |
| `; | |
| } | |
| </script> | |
| </body></html> |