Spaces:
Running
Running
| <html><head><base href="https://websim.ai/prose-polisher"><title>Prose Polisher: Refine Your Writing with Advanced Copyediting</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes shimmer { | |
| 0% { background-position: -1000px 0; } | |
| 100% { background-position: 1000px 0; } | |
| } | |
| .shimmer { | |
| animation: shimmer 2s infinite linear; | |
| background: linear-gradient(to right, #f6f7f8 8%, #edeef1 18%, #f6f7f8 33%); | |
| background-size: 1000px 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-500 to-purple-600 text-gray-100 min-h-screen font-serif"> | |
| <header class="py-6 relative"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl font-bold text-center text-white">Prose Polisher ✒️</h1> | |
| <p class="mt-2 text-center text-indigo-200">Refine Your Writing with Advanced Copyediting</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-indigo-800">Polish Your Prose</h2> | |
| <form id="polisher-form" method="GET" action="https://websim.ai/prose-polisher" class="space-y-4"> | |
| <div> | |
| <label for="input-text" class="block text-sm font-medium text-gray-700">Your Text:</label> | |
| <textarea id="input-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-indigo-500 text-gray-900" placeholder="Paste your text here for refinement..."></textarea> | |
| </div> | |
| <div> | |
| <label for="polish-level" class="block text-sm font-medium text-gray-700">Polish Level:</label> | |
| <select id="polish-level" name="level" 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-indigo-500 text-gray-900"> | |
| <option value="light">Light Touch-up</option> | |
| <option value="moderate">Moderate Refinement</option> | |
| <option value="heavy">Thorough Overhaul</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="style-guide" class="block text-sm font-medium text-gray-700">Style Guide:</label> | |
| <select id="style-guide" name="style" 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-indigo-500 text-gray-900"> | |
| <option value="ap">Associated Press (AP)</option> | |
| <option value="chicago">Chicago Manual of Style</option> | |
| <option value="mla">MLA Handbook</option> | |
| </select> | |
| </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-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Polish My Prose 💎 | |
| </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-indigo-800">Polished Version</h2> | |
| <div id="polished-result" class="space-y-4"> | |
| <!-- Polished text and suggestions 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-indigo-800">Writing Enhancement Tips</h2> | |
| <ul class="list-disc list-inside space-y-2 text-gray-700"> | |
| <li>Use active voice for clarity and impact</li> | |
| <li>Vary sentence structure to maintain reader interest</li> | |
| <li>Eliminate redundant words and phrases</li> | |
| <li>Choose specific and vivid vocabulary</li> | |
| <li>Ensure logical flow between paragraphs</li> | |
| </ul> | |
| </div> | |
| </main> | |
| <script> | |
| const polisherForm = document.getElementById('polisher-form'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const polishedResult = document.getElementById('polished-result'); | |
| polisherForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const inputText = document.getElementById('input-text').value.trim(); | |
| const polishLevel = document.getElementById('polish-level').value; | |
| const styleGuide = document.getElementById('style-guide').value; | |
| if (!inputText) { | |
| alert('Please enter some text to polish.'); | |
| return; | |
| } | |
| polishProse(inputText, polishLevel, styleGuide); | |
| }); | |
| function polishProse(text, level, style) { | |
| // Show loading state | |
| resultContainer.classList.remove('hidden'); | |
| polishedResult.innerHTML = '<div class="shimmer h-40 rounded"></div>'; | |
| // Simulate API call with setTimeout | |
| setTimeout(() => { | |
| const polishedText = generatePolishedText(text, level, style); | |
| displayPolishedResult(polishedText); | |
| }, 2000); | |
| } | |
| function generatePolishedText(text, level, style) { | |
| // This is a simplified prose polisher. In a real application, this would use advanced NLP and language models. | |
| const suggestions = [ | |
| { original: "very unique", improved: "unique", reason: "Uniqueness is absolute; 'very' is redundant." }, | |
| { original: "in order to", improved: "to", reason: "Simplify for conciseness." }, | |
| { original: "due to the fact that", improved: "because", reason: "Use simpler, more direct language." }, | |
| { original: "at this point in time", improved: "now", reason: "Avoid wordiness." }, | |
| { original: "irregardless", improved: "regardless", reason: "'Irregardless' is not a standard word." } | |
| ]; | |
| let polishedText = text; | |
| let appliedSuggestions = []; | |
| suggestions.forEach(suggestion => { | |
| if (polishedText.includes(suggestion.original)) { | |
| polishedText = polishedText.replace(new RegExp(suggestion.original, 'gi'), suggestion.improved); | |
| appliedSuggestions.push(suggestion); | |
| } | |
| }); | |
| // Add some style guide specific changes | |
| if (style === 'ap') { | |
| polishedText = polishedText.replace(/\d+/g, match => { | |
| return parseInt(match) < 10 ? match : match.toString(); | |
| }); | |
| } | |
| return { polishedText, appliedSuggestions }; | |
| } | |
| function displayPolishedResult(result) { | |
| let polishedHTML = ` | |
| <div class="space-y-4"> | |
| <h3 class="text-xl font-semibold text-indigo-700">Polished Text:</h3> | |
| <p class="text-gray-800">${result.polishedText}</p> | |
| ${result.appliedSuggestions.length > 0 ? ` | |
| <h3 class="text-xl font-semibold text-indigo-700 mt-6">Suggestions Applied:</h3> | |
| <ul class="list-disc list-inside text-gray-700"> | |
| ${result.appliedSuggestions.map(suggestion => ` | |
| <li> | |
| <span class="font-semibold">${suggestion.original}</span> → | |
| <span class="text-green-600">${suggestion.improved}</span> | |
| <p class="ml-6 text-sm text-gray-600">${suggestion.reason}</p> | |
| </li> | |
| `).join('')} | |
| </ul> | |
| ` : ''} | |
| </div> | |
| `; | |
| polishedResult.innerHTML = polishedHTML; | |
| } | |
| </script> | |
| </body></html> |