Update app.py

app.py

@@ -73,52 +73,77 @@ def generate_video_description(video):
 # Gradio Interface
 def main():
     with gr.Blocks() as app:
-        gr.Markdown("<h1>AI-Powered Accessibility Tools</h1>")
+        gr.Markdown("<h1 style='text-align: center; color: #1e90ff;'>AI-Powered Accessibility Tools</h1>")
         
         # Text-to-Speech Section
-        gr.Markdown("<h2>Text-to-Speech</h2>")
-        gr.Markdown("**Core Idea:** Create natural-sounding speech from text input.\n"
-                    "**Functionality:** Converts written text into spoken words, helping individuals with reading difficulties or visual impairments.\n"
-                    "**Target Audience:** People with visual impairments, reading disabilities, and those who prefer audio content.")
-        gr.Markdown("Supported Input: **Plain text**. \nOutput: **MP3 audio file**.")
         with gr.Row():
-            text_input = gr.Textbox(label="Enter text for Text-to-Speech")
-            tts_button = gr.Button("Convert to Speech")
-            tts_output = gr.Audio(label="TTS Output")
-            tts_button.click(fn=text_to_speech, inputs=text_input, outputs=tts_output)
+            with gr.Column(scale=1):
+                gr.Markdown("<div style='background-color: #f0f8ff; padding: 20px; border-radius: 8px;'>"
+                            "<h2>Text-to-Speech</h2>"
+                            "<ul>"
+                            "<li><strong>Core Idea:</strong> Create natural-sounding speech from text input.</li>"
+                            "<li><strong>Functionality:</strong> Converts written text into spoken words, helping individuals with reading difficulties or visual impairments.</li>"
+                            "<li><strong>Target Audience:</strong> People with visual impairments, reading disabilities, and those who prefer audio content.</li>"
+                            "</ul>"
+                            "<strong>Supported Input:</strong> Plain text. <br>"
+                            "<strong>Output:</strong> MP3 audio file."
+                            "</div>")
+                text_input = gr.Textbox(label="Enter text for Text-to-Speech", placeholder="Type your text here...")
+                tts_button = gr.Button("Convert to Speech")
+                tts_output = gr.Audio(label="TTS Output")
+                tts_button.click(fn=text_to_speech, inputs=text_input, outputs=tts_output)
 
-        # Speech-to-Text Section
-        gr.Markdown("<h2>Speech-to-Text</h2>")
-        gr.Markdown("**Core Idea:** Convert spoken language into written text.\n"
-                    "**Functionality:** Allows users to dictate speech and have it transcribed into text, facilitating communication and documentation.\n"
-                    "**Target Audience:** Individuals with hearing impairments, those who prefer speaking over typing, and people with mobility challenges.")
-        gr.Markdown("Supported Input: **WAV, FLAC, AIFF, MP3 (converted to WAV)**. \nOutput: **Transcribed text**.")
-        stt_input = gr.Audio(label="Record or Upload Audio", type="filepath")
-        stt_button = gr.Button("Convert Speech to Text")
-        stt_output = gr.Textbox(label="Speech-to-Text Output")
-        stt_button.click(fn=speech_to_text, inputs=stt_input, outputs=stt_output)
+            # Speech-to-Text Section
+            with gr.Column(scale=1):
+                gr.Markdown("<div style='background-color: #e6ffe6; padding: 20px; border-radius: 8px;'>"
+                            "<h2>Speech-to-Text</h2>"
+                            "<ul>"
+                            "<li><strong>Core Idea:</strong> Convert spoken language into written text.</li>"
+                            "<li><strong>Functionality:</strong> Allows users to dictate speech and have it transcribed into text, facilitating communication and documentation.</li>"
+                            "<li><strong>Target Audience:</strong> Individuals with hearing impairments, those who prefer speaking over typing, and people with mobility challenges.</li>"
+                            "</ul>"
+                            "<strong>Supported Input:</strong> WAV, FLAC, AIFF, MP3 (converted to WAV). <br>"
+                            "<strong>Output:</strong> Transcribed text."
+                            "</div>")
+                stt_input = gr.Audio(label="Record or Upload Audio", type="filepath")
+                stt_button = gr.Button("Convert Speech to Text")
+                stt_output = gr.Textbox(label="Speech-to-Text Output")
+                stt_button.click(fn=speech_to_text, inputs=stt_input, outputs=stt_output)
 
         # Image Description Section
-        gr.Markdown("<h2>Image Description</h2>")
-        gr.Markdown("**Core Idea:** Generate descriptive text for images.\n"
-                    "**Functionality:** Analyzes and describes the content of images, making visual information accessible to those who are visually impaired.\n"
-                    "**Target Audience:** Individuals with visual impairments and those needing assistance in understanding visual content.")
-        gr.Markdown("Supported Input: **JPEG, PNG, BMP, GIF**. \nOutput: **Text description**.")
-        image_input = gr.Image(label="Upload an Image")
-        image_desc_output = gr.Textbox(label="Image Description")
-        image_desc_button = gr.Button("Describe Image")
-        image_desc_button.click(fn=generate_image_description, inputs=image_input, outputs=image_desc_output)
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("<div style='background-color: #ffe6e6; padding: 20px; border-radius: 8px;'>"
+                            "<h2>Image Description</h2>"
+                            "<ul>"
+                            "<li><strong>Core Idea:</strong> Generate descriptive text for images.</li>"
+                            "<li><strong>Functionality:</strong> Analyzes and describes the content of images, making visual information accessible to those who are visually impaired.</li>"
+                            "<li><strong>Target Audience:</strong> Individuals with visual impairments and those needing assistance in understanding visual content.</li>"
+                            "</ul>"
+                            "<strong>Supported Input:</strong> JPEG, PNG, BMP, GIF. <br>"
+                            "<strong>Output:</strong> Text description."
+                            "</div>")
+                image_input = gr.Image(label="Upload an Image")
+                image_desc_output = gr.Textbox(label="Image Description")
+                image_desc_button = gr.Button("Describe Image")
+                image_desc_button.click(fn=generate_image_description, inputs=image_input, outputs=image_desc_output)
 
-        # Video Description Section
-        gr.Markdown("<h2>Video Description</h2>")
-        gr.Markdown("**Core Idea:** Describe video content through generated text.\n"
-                    "**Functionality:** Provides textual descriptions of video frames, aiding understanding for those who cannot see the video.\n"
-                    "**Target Audience:** Individuals with visual impairments and those needing assistance in interpreting video content.")
-        gr.Markdown("Supported Input: **MP4, AVI, MOV**. \nOutput: **List of text descriptions**.")
-        video_input = gr.File(label="Upload a Video", file_types=[".mp4", ".avi", ".mov"])
-        video_desc_output = gr.Textbox(label="Video Descriptions")
-        video_desc_button = gr.Button("Describe Video")
-        video_desc_button.click(fn=generate_video_description, inputs=video_input, outputs=video_desc_output)
+            # Video Description Section
+            with gr.Column(scale=1):
+                gr.Markdown("<div style='background-color: #fff3e6; padding: 20px; border-radius: 8px;'>"
+                            "<h2>Video Description</h2>"
+                            "<ul>"
+                            "<li><strong>Core Idea:</strong> Describe video content through generated text.</li>"
+                            "<li><strong>Functionality:</strong> Provides textual descriptions of video frames, aiding understanding for those who cannot see the video.</li>"
+                            "<li><strong>Target Audience:</strong> Individuals with visual impairments and those needing assistance in interpreting video content.</li>"
+                            "</ul>"
+                            "<strong>Supported Input:</strong> MP4, AVI, MOV. <br>"
+                            "<strong>Output:</strong> List of text descriptions."
+                            "</div>")
+                video_input = gr.File(label="Upload a Video", file_types=[".mp4", ".avi", ".mov"])
+                video_desc_output = gr.Textbox(label="Video Descriptions")
+                video_desc_button = gr.Button("Describe Video")
+                video_desc_button.click(fn=generate_video_description, inputs=video_input, outputs=video_desc_output)
 
     app.launch()