Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SSML Tag Processor</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| line-height: 1.6; | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .text-areas { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .text-area-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| label { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 400px; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| font-family: monospace; | |
| font-size: 14px; | |
| resize: vertical; | |
| } | |
| .buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| .clear-btn { | |
| background-color: #f44336; | |
| } | |
| .clear-btn:hover { | |
| background-color: #d32f2f; | |
| } | |
| .copy-btn { | |
| background-color: #2196F3; | |
| } | |
| .copy-btn:hover { | |
| background-color: #0b7dda; | |
| } | |
| .markdown-btn { | |
| background-color: #9C27B0; | |
| } | |
| .markdown-btn:hover { | |
| background-color: #7B1FA2; | |
| } | |
| .instructions { | |
| background-color: #f9f9f9; | |
| padding: 15px; | |
| border-radius: 4px; | |
| margin-bottom: 20px; | |
| } | |
| .endpoint-selector { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| background-color: #f0f0f0; | |
| border-radius: 4px; | |
| } | |
| .endpoint-selector label { | |
| font-weight: bold; | |
| margin-bottom: 0; | |
| } | |
| .endpoint-selector select { | |
| padding: 8px 15px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>SSML Tag Processor</h1> | |
| <div class="instructions"> | |
| <h3>Instructions:</h3> | |
| <p>Paste SSML-tagged text in the input area on the left, then click "Process" to extract plain text with each tag's content.</p> | |
| <p>Example: <code>Hello <textnorm class='SomeClass' text='example'>world</textnorm></code> → <code>Hello world</code></p> | |
| </div> | |
| <form method="POST" id="ssmlForm"> | |
| <div class="container"> | |
| <div class="endpoint-selector"> | |
| <label for="endpoint">Processing Mode:</label> | |
| <select id="endpoint" name="endpoint"> | |
| <option value="/" {% if current_endpoint == "/" %}selected{% endif %}>New Format (textnorm)</option> | |
| <option value="/old" {% if current_endpoint == "/old" %}selected{% endif %}>Old Format (DECIMAL/CURRENCY/DATE....)</option> | |
| </select> | |
| </div> | |
| <div class="text-areas"> | |
| <div class="text-area-container"> | |
| <label for="input_text">Input (SSML text):</label> | |
| <textarea id="input_text" name="input_text" placeholder="Paste your SSML text here...">{{ input_text }}</textarea> | |
| </div> | |
| <div class="text-area-container"> | |
| <label for="output_text">Output (Processed text):</label> | |
| <textarea id="output_text" readonly placeholder="Processed text will appear here...">{{ processed_text }}</textarea> | |
| </div> | |
| </div> | |
| <div class="buttons"> | |
| <button type="submit">Process</button> | |
| <button type="button" class="clear-btn" onclick="clearTextareas()">Clear All</button> | |
| <button type="button" class="copy-btn" onclick="copyToClipboard()">Copy Output</button> | |
| <button type="button" class="markdown-btn" onclick="copyAsMarkdownTable()">Copy as Markdown Table</button> | |
| </div> | |
| </div> | |
| </form> | |
| <script> | |
| // Set form action based on selected endpoint | |
| document.getElementById('endpoint').addEventListener('change', function() { | |
| document.getElementById('ssmlForm').action = this.value; | |
| }); | |
| // Set initial form action | |
| document.getElementById('ssmlForm').action = document.getElementById('endpoint').value; | |
| function clearTextareas() { | |
| document.getElementById('input_text').value = ''; | |
| document.getElementById('output_text').value = ''; | |
| } | |
| function copyToClipboard() { | |
| const outputText = document.getElementById('output_text'); | |
| outputText.select(); | |
| document.execCommand('copy'); | |
| alert('Output copied to clipboard!'); | |
| } | |
| function copyAsMarkdownTable() { | |
| const outputText = document.getElementById('output_text').value; | |
| if (!outputText.trim()) { | |
| alert('No output to copy!'); | |
| return; | |
| } | |
| // Create markdown table format with header and separator | |
| const lines = outputText.split('\n').filter(line => line.trim()); | |
| // Find the maximum line length to determine padding | |
| const maxLength = Math.max(...lines.map(line => line.length), 35); | |
| const separator = '-'.repeat(maxLength); | |
| // Build the table | |
| let markdownTable = `| ${lines[0].padEnd(maxLength)} |\n`; | |
| markdownTable += `| ${separator} |\n`; | |
| // Add remaining lines | |
| for (let i = 1; i < lines.length; i++) { | |
| markdownTable += `| ${lines[i].padEnd(maxLength)} |\n`; | |
| } | |
| // Copy to clipboard | |
| navigator.clipboard.writeText(markdownTable).then(() => { | |
| alert('Output copied as Markdown table!'); | |
| }).catch(() => { | |
| // Fallback for older browsers | |
| const textarea = document.createElement('textarea'); | |
| textarea.value = markdownTable; | |
| document.body.appendChild(textarea); | |
| textarea.select(); | |
| document.execCommand('copy'); | |
| document.body.removeChild(textarea); | |
| alert('Output copied as Markdown table!'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |