Update app.py

app.py

@@ -107,8 +107,23 @@ css = """
 footer {visibility: hidden !important;}
 """
 
-# Создаем интерфейс с помощью Gradio
-with gr.Blocks(css=css, theme='YTheme/SmartLearn') as demo:
+custom_javascript = """
+document.addEventListener('DOMContentLoaded', function() {
+  const instructionElement = document.querySelector('textarea');
+  const charCounterElement = document.querySelector('label[for="textbox"]');
+  
+  function updateCharCount() {
+    const text = instructionElement.value.replace(/\\s+/g, '');
+    const charCount = text.length;
+    charCounterElement.textContent = `${charCount}/250`;
+  }
+  
+  instructionElement.addEventListener('input', updateCharCount);
+});
+"""
+
+# Создаем интерфейс с помощью Gradio, используя аргумент javascript
+with gr.Blocks(css=css, theme='YTheme/SmartLearn', javascript=custom_javascript) as demo:
     with gr.Row():
         with gr.Column():
             image_input = gr.Image(label="Фото", type="pil")
@@ -126,20 +141,5 @@ with gr.Blocks(css=css, theme='YTheme/SmartLearn') as demo:
         concurrency_limit=200
     )
 
-# Добавляем JavaScript для обработки ввода символов в текстовое поле
-demo.add_js("""
-document.addEventListener('DOMContentLoaded', function() {
-  const instructionElement = document.querySelector('textarea');
-  const charCounterElement = document.querySelector('label[for="textbox"]');
-  
-  function updateCharCount() {
-    const text = instructionElement.value.replace(/\\s+/g, '');
-    const charCount = text.length;
-    charCounterElement.textContent = `${charCount}/250`;
-  }
-  
-  instructionElement.addEventListener('input', updateCharCount);
-});
-""")
-
+# Запускаем интерфейс
 demo.launch()