Summary

app.css

@@ -1,7 +1,9 @@
-.noti_err {
+.noti_err,
+div.noti-results-false textarea {
     color: var(--color-accent);
 }
-.noti_true {
+.noti_true,
+div.noti-results-true textarea {
     color: #006900;
 }
 
@@ -38,3 +40,11 @@ div.emo-stats:hover label[data-testid="block-label"],
 div.sent-stats:hover label[data-testid="block-label"] {
     display: none;
 }
+
+div.noti-results textarea,
+div.noti-results-false textarea,
+div.noti-results-true textarea {
+    height: fit-content;
+    font-weight: bold;
+    font-size: 16px;
+}

app/event_handlers/clear.py

@@ -9,20 +9,22 @@ import gradio as gr
 
 # Importing necessary components for the Gradio app
 from app.config import config_data
-from app.components import html_message
 
 
 def event_handler_clear() -> (
-    tuple[gr.Video, gr.Button, gr.Button, gr.HTML, gr.Plot, gr.Plot, gr.Plot, gr.Plot]
+    tuple[
+        gr.Video, gr.Button, gr.Button, gr.Textbox, gr.Plot, gr.Plot, gr.Plot, gr.Plot
+    ]
 ):
     return (
         gr.Video(value=None),
         gr.Button(interactive=False),
         gr.Button(interactive=False),
-        html_message(
-            message=config_data.InformationMessages_NOTI_RESULTS[0],
-            error=True,
-            visible=True,
+        gr.Textbox(
+            value=config_data.InformationMessages_NOTI_RESULTS[0],
+            info=None,
+            container=False,
+            elem_classes="noti-results-false",
         ),
         gr.Plot(value=None, visible=False),
         gr.Plot(value=None, visible=False),

app/event_handlers/event_handlers.py

@@ -17,7 +17,7 @@ def setup_app_event_handlers(
     video,
     clear,
     submit,
-    noti_results,
+    text,
     waveform,
     faces,
     emotion_stats,
@@ -27,7 +27,7 @@ def setup_app_event_handlers(
         triggers=[video.change, video.upload, video.stop_recording, video.clear],
         fn=event_handler_video,
         inputs=[video],
-        outputs=[clear, submit, noti_results],
+        outputs=[clear, submit, text],
         queue=True,
     )
 
@@ -35,7 +35,7 @@ def setup_app_event_handlers(
         fn=event_handler_submit,
         inputs=[video],
         outputs=[
-            noti_results,
+            text,
             waveform,
             faces,
             emotion_stats,
@@ -51,7 +51,7 @@ def setup_app_event_handlers(
             video,
             clear,
             submit,
-            noti_results,
+            text,
             waveform,
             faces,
             emotion_stats,

app/event_handlers/submit.py

@@ -39,13 +39,12 @@ from app.data_init import (
     text_model,
 )
 from app.load_models import VideoFeatureExtractor
-from app.components import html_message
 
 
 @spaces.GPU
 def event_handler_submit(
     video: str,
-) -> tuple[gr.HTML, gr.Plot, gr.Plot, gr.Plot, gr.Plot]:
+) -> tuple[gr.Textbox, gr.Plot, gr.Plot, gr.Plot, gr.Plot]:
     if video:
         if video.split(".")[-1] == "webm":
             video = convert_webm_to_mp4(video)
@@ -167,10 +166,11 @@ def event_handler_submit(
     )
 
     return (
-        html_message(
-            message=config_data.InformationMessages_NOTI_RESULTS[1],
-            error=False,
-            visible=False,
+        gr.Textbox(
+            value=" ".join(total_text).strip(),
+            info=config_data.InformationMessages_REC_TEXT,
+            container=False,
+            elem_classes="noti-results",
         ),
         gr.Plot(value=plt_audio, visible=True),
         gr.Plot(value=plt_faces, visible=True),

app/event_handlers/video.py

@@ -9,18 +9,18 @@ import gradio as gr
 
 # Importing necessary components for the Gradio app
 from app.config import config_data
-from app.components import html_message
 
 
-def event_handler_video(video: str) -> gr.HTML:
+def event_handler_video(video: str) -> tuple[gr.Button, gr.Button, gr.Textbox]:
     is_video_valid = bool(video)
 
     return (
         gr.Button(interactive=is_video_valid),
         gr.Button(interactive=is_video_valid),
-        html_message(
-            message=config_data.InformationMessages_NOTI_RESULTS[int(is_video_valid)],
-            error=not is_video_valid,
-            visible=True,
+        gr.Textbox(
+            value=config_data.InformationMessages_NOTI_RESULTS[int(is_video_valid)],
+            info=None,
+            container=False,
+            elem_classes="noti-results-" + str(is_video_valid).lower(),
         ),
     )

app/tabs.py

@@ -10,7 +10,6 @@ import gradio as gr
 # Importing necessary components for the Gradio app
 from app.description import DESCRIPTION
 from app.config import config_data
-from app.components import html_message
 from app.requirements_app import read_requirements
 
 
@@ -65,13 +64,7 @@ def app_tab():
                     elem_classes="submit",
                 )
 
-            gr.Examples(
-                [
-                    "videos/1.mp4",
-                    "videos/2.mp4",
-                ],
-                [video],
-            )
+            gr.Examples(config_data.StaticPaths_EXAMPLES, [video])
 
         with gr.Column(
             visible=True,
@@ -79,10 +72,23 @@ def app_tab():
             variant="default",
             elem_classes="results-container",
         ):
-            noti_results = html_message(
-                message=config_data.InformationMessages_NOTI_RESULTS[0],
-                error=True,
+            text = gr.Textbox(
+                value=config_data.InformationMessages_NOTI_RESULTS[0],
+                max_lines=10,
+                placeholder=None,
+                label=None,
+                info=None,
+                show_label=False,
+                container=False,
+                interactive=False,
                 visible=True,
+                autofocus=False,
+                autoscroll=True,
+                render=True,
+                type="text",
+                show_copy_button=False,
+                max_length=config_data.General_TEXT_MAX_LENGTH,
+                elem_classes="noti-results-false",
             )
 
             waveform = gr.Plot(
@@ -121,7 +127,7 @@ def app_tab():
         video,
         clear,
         submit,
-        noti_results,
+        text,
         waveform,
         faces,
         emotion_stats,

config.toml

@@ -3,6 +3,7 @@ APP_VERSION = "0.0.1"
 CSS_PATH = "app.css"
 
 [General]
+TEXT_MAX_LENGTH = 1000
 SR = 16000
 START_TIME = 0
 WIN_MAX_LENGTH = 4
@@ -28,6 +29,7 @@ NOTI_RESULTS = [
     "Upload or record video",
     "Video uploaded, you can perform calculations",
 ]
+REC_TEXT = "Recognized text"
 
 [OtherMessages]
 CLEAR = "Clear"
@@ -59,6 +61,10 @@ EMO_SENT_TEXT_WEIGHTS = "emo_sent_text_weights.pth"
 EMO_SENT_VIDEO_WEIGHTS = "emo_sent_video_weights.pth"
 YOLOV8N_FACE = "yolov8n-face.pt"
 OPENAI_WHISPER = "openai/whisper-base"
+EXAMPLES = [
+    "videos/1.mp4",
+    "videos/2.mp4",
+]
 
 [Requirements]
 LIBRARY = "Library"