textbox

app.py

@@ -162,27 +162,13 @@ def redistribute_codes(code_list, snac_model):
     audio_hat = snac_model.decode(codes)
     return audio_hat.detach().squeeze().cpu().numpy()
 
-# Text validation function
-def validate_text(text):
-    """Validate and limit text length"""
+# Text validation function - now only validates, doesn't truncate
+def validate_and_truncate_text(text):
+    """Validate and truncate text length"""
     MAX_LENGTH = 150
     if len(text) > MAX_LENGTH:
-        return text[:MAX_LENGTH]
-    return text
-
-# Text change handler
-def on_text_change(text):
-    """Handle text changes and show character count"""
-    MAX_LENGTH = 150
-    current_length = len(text)
-    
-    if current_length > MAX_LENGTH:
-        text = text[:MAX_LENGTH]
-        current_length = MAX_LENGTH
-        gr.Warning(f"Text truncated to {MAX_LENGTH} characters")
-    
-    # Return the (potentially truncated) text and update info
-    return text, f"Characters: {current_length}/{MAX_LENGTH}"
+        return text[:MAX_LENGTH], True  # Return truncated text and truncation flag
+    return text, False
 
 # Main generation function with rate limiting
 @rate_limit
@@ -192,14 +178,16 @@ def generate_speech(text, temperature=0.6, top_p=0.95, repetition_penalty=1.1, m
         gr.Warning("Please enter some text to generate speech.")
         return None
     
-    # Validate text length
-    text = validate_text(text)
+    # Validate and truncate text length
+    validated_text, was_truncated = validate_and_truncate_text(text)
+    if was_truncated:
+        gr.Warning(f"Text was truncated to 150 characters for processing.")
     
     try:
         progress(0.1, "Processing text...")
-        print(f"Generating speech for text: {text[:50]}...")
+        print(f"Generating speech for text: {validated_text[:50]}...")
         
-        input_ids, attention_mask = process_prompt(text, voice, tokenizer, device)
+        input_ids, attention_mask = process_prompt(validated_text, voice, tokenizer, device)
         
         progress(0.3, "Generating speech tokens...")
         with torch.no_grad():
@@ -255,7 +243,7 @@ examples = [
 
 EMOTIVE_TAGS = ["`<laugh>`", "`<chuckle>`", "`<sigh>`", "`<cough>`", "`<sniffle>`", "`<groan>`", "`<yawn>`", "`<gasp>`"]
 
-# Create custom CSS
+# Create custom CSS with character counter using JavaScript
 css = """
 .gradio-container {
     max-width: 1200px;
@@ -307,11 +295,12 @@ with gr.Blocks(title="Khmer Text-to-Speech", css=css, theme=gr.themes.Soft()) as
                 placeholder="បញ្ចូលអត្ថបទខ្មែររបស់អ្នកនៅទីនេះ... (អតិបរមា ១៥០ តួអក្សរ)",
                 lines=4,
                 max_lines=6,
-                interactive=True
+                interactive=True,
+                elem_id="text_input"
             )
             
-            # Character counter
-            char_info = gr.Markdown("Characters: 0/150", elem_classes=["char-counter"])
+            # Static character counter - will be updated by JavaScript
+            char_info = gr.HTML('<div class="char-counter" id="char-counter">Characters: 0/150</div>')
             
             # Advanced Settings
             with gr.Accordion("🔧 Advanced Settings", open=False):
@@ -358,14 +347,32 @@ with gr.Blocks(title="Khmer Text-to-Speech", css=css, theme=gr.themes.Soft()) as
         label="📝 Example Texts (អត្ថបទគំរូ) - Click example then press Generate"
     )
     
-    # Text change event handler
-    text_input.change(
-        fn=on_text_change,
-        inputs=[text_input],
-        outputs=[text_input, char_info]
-    )
+    # Add JavaScript for real-time character counting without server calls
+    demo.load(js="""
+    function() {
+        const textInput = document.querySelector('#text_input textarea');
+        const charCounter = document.querySelector('#char-counter');
+        
+        if (textInput && charCounter) {
+            function updateCounter() {
+                const length = textInput.value.length;
+                const maxLength = 150;
+                charCounter.textContent = `Characters: ${length}/${maxLength}`;
+                
+                if (length > maxLength) {
+                    charCounter.style.color = '#ff6b6b';
+                } else {
+                    charCounter.style.color = '#666';
+                }
+            }
+            
+            textInput.addEventListener('input', updateCounter);
+            updateCounter(); // Initial count
+        }
+    }
+    """)
     
-    # Set up event handlers
+    # Set up event handlers - NO text change event
     submit_btn.click(
         fn=generate_speech,
         inputs=[text_input, temperature, top_p, repetition_penalty, max_new_tokens],
@@ -374,9 +381,10 @@ with gr.Blocks(title="Khmer Text-to-Speech", css=css, theme=gr.themes.Soft()) as
     )
     
     clear_btn.click(
-        fn=lambda: ("", "Characters: 0/150", None),
+        fn=lambda: ("", None),
         inputs=[],
-        outputs=[text_input, char_info, audio_output]
+        outputs=[text_input, audio_output],
+        js="() => { document.querySelector('#char-counter').textContent = 'Characters: 0/150'; }"
     )
     
     # Add keyboard shortcut