Implemented counter code and fix bug in function returning of error input

app.py

@@ -16,7 +16,7 @@ def submit_input(input_, repetition_penalty, temperature):
     outputs = generate(input_, repetition_penalty, temperature)
     if input_.strip() == "":  
         gr.Warning('No és possible processar un input buit')
-        return None
+        return None, None, None
     if outputs is None:
         gr.Warning("""
                    És possible que no hagi trobat el lloc o la data (de dijous a dilluns). 
@@ -40,20 +40,28 @@ def clean():
         None,
         None,
         None,
-        gr.Slider.update(value=1.0),
-        gr.Slider.update(value=1.0),
+        gr.Slider(value=1.0),
+        gr.Slider(value=1.0),
     )
        
 
 with gr.Blocks(**AinaGradioTheme().get_kwargs()) as demo:
     with gr.Row():  
         with gr.Column():
+            placeholder_max_token = Textbox(
+                visible=False,
+                interactive=False,
+                value= MAX_INPUT_CHARACTERS
+            )
             input_ = Textbox(
                 lines=11, 
                 label="Input",
                 placeholder="e.g. Prompt example."
             )
-            characters_counter = gr.Markdown(f"""<span id=counter> 0 / {MAX_NEW_TOKENS} </span>""")
+            with gr.Row(variant="panel", equal_height=True):
+                    gr.HTML("""<span id="countertext" style="display: flex; justify-content: start; color:#ef4444; font-weight: bold;"></span>""")
+                    gr.HTML(f"""<span id="counter" style="display: flex; justify-content: end;"> <span id="inputlenght">0</span>&nbsp;/&nbsp;{MAX_INPUT_CHARACTERS}</span>""")
+
             with gr.Row():
                 clear_btn = Button(
                     "Clear", 
@@ -103,14 +111,21 @@ with gr.Blocks(**AinaGradioTheme().get_kwargs()) as demo:
     input_.change(fn=change_interactive, inputs=[input_], outputs=[clear_btn, submit_btn])
     
 
-    input_.change(fn=None, inputs=input_, js=f"(i, m) => document.getElementById('counter').textContent = i.length  + ' /' +  {MAX_NEW_TOKENS}")
+    input_.change(
+        fn=None, inputs=[input_], 
+        js=f"""(i) => document.getElementById('countertext').textContent =  i.length > {MAX_INPUT_CHARACTERS} && 'Max length {MAX_INPUT_CHARACTERS} characters. ' || '' """)
 
+    input_.change(
+        fn=None, 
+        inputs=[input_, placeholder_max_token], 
+        js="""(i, m) => {
+        document.getElementById('inputlenght').textContent = i.length + '  '
+        document.getElementById('inputlenght').style.color =  (i.length > m) ? "#ef4444" : "";
+    }""")
 
 
     clear_btn.click(fn=clean, inputs=[], outputs=[input_, output_answer, output_context, output_CCMA,  repetition_penalty, temperature], queue=False)
     submit_btn.click(fn=submit_input, inputs=[input_, repetition_penalty, temperature], outputs=[output_answer, output_context, output_CCMA])
 
-
-    
     # demo.queue(concurrency_count=1, api_open=False)
     demo.launch(show_api=True, share=True, debug=True, max_threads=1)