Character count and whitespace sanitization

system/openaittstest.html

@@ -92,7 +92,8 @@
             <input type="text" id="model" name="model" value="some-model" required><br>
 
             <label for="input">Input Text:</label>
-            <textarea id="input" name="input" rows="4" required>Hello, this is a test.</textarea><br>
+            <textarea id="input" name="input" rows="8" required>Hello, this is a test.</textarea><br>
+            <p id="charCount">Character count: 21</p>
 
             <div class="form-group">
                 <div>
@@ -132,12 +133,26 @@
     </div>
 
     <script>
+        // Real-time character count
+        const inputField = document.getElementById('input');
+        const charCountDisplay = document.getElementById('charCount');
+    
+        inputField.addEventListener('input', () => {
+            const trimmedInput = inputField.value.trim();
+            charCountDisplay.textContent = `Character count: ${trimmedInput.length}`;
+        });
+    
         document.getElementById('ttsForm').addEventListener('submit', async function (event) {
             event.preventDefault();
     
             const formData = new FormData(event.target);
             const jsonData = {};
+    
+            // Sanitize input: trim spaces
             formData.forEach((value, key) => {
+                if (key === 'input') {
+                    value = value.trim().replace(/\s+/g, ' '); // Trim and normalize spaces
+                }
                 jsonData[key] = key === 'speed' ? parseFloat(value) : value;
             });
     
@@ -176,5 +191,6 @@
             }
         });
     </script>
+   
 </body>
 </html>