upgraded ui!

app.py

@@ -1,14 +1,12 @@
-import threading
 import asyncio
 import uuid
 import gradio as gr
 import edge_tts
 from deep_translator import GoogleTranslator
-
 from transformers import BlenderbotTokenizer, BlenderbotForConditionalGeneration
 import torch
 
-# ===== TTS Setup =====
+# ===== Voice setup =====
 
 voice_characters = {
     "English - US": {
@@ -56,7 +54,7 @@ def get_characters(language):
     default_char = chars[0] if chars else None
     return gr.update(choices=chars, value=default_char)
 
-# ===== Chatbot Setup =====
+# ===== Chatbot setup =====
 
 model_name = "facebook/blenderbot-400M-distill"
 tokenizer = BlenderbotTokenizer.from_pretrained(model_name)
@@ -73,13 +71,13 @@ def chatbot_response(history, user_message):
     if history is None:
         history = []
 
-    history.append(("🧑", user_message))
-    conversation_text = " ".join([msg for _, msg in history]) + " " + user_message
+    history.append(("You", user_message))
+    conversation_text = " ".join([msg for _, msg in history])
     inputs = tokenizer([conversation_text], return_tensors="pt").to(device)
 
     reply_ids = model.generate(**inputs, max_length=200)
     response = tokenizer.decode(reply_ids[0], skip_special_tokens=True)
-    history.append(("🤖", response))
+    history.append(("Bot", response))
 
     chat_str = "\n".join([f"{speaker}: {msg}" for speaker, msg in history])
 
@@ -91,14 +89,119 @@ def chatbot_response(history, user_message):
 
     return history, chat_str, audio_path
 
+# ===== CSS with animations and glitch =====
+
+custom_css = """
+body {
+    background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #000000);
+    background-size: 600% 600%;
+    animation: gradientBG 15s ease infinite;
+    font-family: 'Courier New', monospace;
+    color: #00FF00;
+}
+
+.gradio-container {
+    border: 2px solid #00FF00;
+    padding: 20px;
+    box-shadow: 0 0 10px #00FF00;
+    border-radius: 10px;
+}
+
+h1 {
+    position: relative;
+    font-family: 'Courier New', monospace;
+    color: #00FF00;
+    border-right: 2px solid #00FF00;
+    white-space: nowrap;
+    overflow: hidden;
+    width: fit-content;
+    animation: typewriter 3s steps(40, end), blinkCaret 0.8s step-end infinite;
+}
+
+h1::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    color: #ff00c8;
+    clip: rect(0, 900px, 0, 0);
+    animation: glitch 2s infinite linear alternate-reverse;
+}
+
+@keyframes glitch {
+    0% { clip: rect(42px, 9999px, 44px, 0); transform: skew(0.5deg); }
+    5% { clip: rect(12px, 9999px, 15px, 0); transform: skew(0.3deg); }
+    10% { clip: rect(85px, 9999px, 88px, 0); transform: skew(0.2deg); }
+    15% { clip: rect(24px, 9999px, 27px, 0); transform: skew(0.4deg); }
+    20% { clip: rect(61px, 9999px, 65px, 0); transform: skew(0.2deg); }
+    25% { clip: rect(10px, 9999px, 14px, 0); transform: skew(0.3deg); }
+    30% { clip: rect(50px, 9999px, 53px, 0); transform: skew(0.1deg); }
+    35% { clip: rect(20px, 9999px, 24px, 0); transform: skew(0.5deg); }
+    40% { clip: rect(65px, 9999px, 69px, 0); transform: skew(0.3deg); }
+    100% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg); }
+}
+
+.gr-button {
+    background: black;
+    color: #00FF00 !important;
+    font-weight: bold;
+    border: 1px solid #00FF00;
+    box-shadow: 0 0 5px #00FF00;
+    animation: bounce 2s infinite;
+}
+
+.gr-textbox, .gr-dropdown {
+    background: black;
+    color: #00FF00;
+    border: 1px solid #00FF00;
+    box-shadow: inset 0 0 5px #00FF00;
+}
+
+.gr-audio {
+    box-shadow: 0 0 10px #00FF00;
+    border-radius: 10px;
+}
+
+#chat_display {
+    background: black;
+    color: #00FF00;
+    padding: 10px;
+    border: 1px solid #00FF00;
+    box-shadow: inset 0 0 10px #00FF00;
+    font-family: 'Courier New', monospace;
+    white-space: pre-wrap;
+    animation: typewriter 3s steps(100, end);
+}
+
+@keyframes typewriter {
+    from { width: 0 }
+    to { width: 100% }
+}
+
+@keyframes blinkCaret {
+    0%, 100% { border-color: transparent }
+    50% { border-color: #00FF00; }
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-6px); }
+}
+
+@keyframes gradientBG {
+    0% {background-position: 0% 50%;}
+    50% {background-position: 100% 50%;}
+    100% {background-position: 0% 50%;}
+}
+"""
+
 # ===== UI =====
 
 def create_app():
-    with gr.Blocks(css="footer {text-align: center; padding: 10px;}") as app:
-        gr.Markdown("""
-        # 🗣️ SpeakEasy AI
-        A simple and fun **Text-to-Speech + Translator + Chatbot** app!
-        """)
+    with gr.Blocks(css=custom_css) as app:
+
+        gr.HTML("<h1 data-text='🗣️ SpeakEasy AI'>🗣️ SpeakEasy AI</h1>")
 
         with gr.Tab("🎧 Text to Speech + Translator"):
             with gr.Row():
@@ -116,26 +219,45 @@ def create_app():
                     output_audio = gr.Audio(label="🔊 Listen Here", autoplay=True)
 
             language_dropdown.change(fn=get_characters, inputs=language_dropdown, outputs=character_dropdown)
-            tts_button.click(fn=tts_wrapper,
-                             inputs=[text_input, language_dropdown, character_dropdown, translation_dropdown],
-                             outputs=[output_text, output_audio])
+
+            def tts_with_loading(*args):
+                yield "Processing...", None
+                yield tts_wrapper(*args)
+
+            tts_button.click(
+                fn=tts_with_loading,
+                inputs=[text_input, language_dropdown, character_dropdown, translation_dropdown],
+                outputs=[output_text, output_audio]
+            )
 
         with gr.Tab("🤖 Chatbot"):
             with gr.Row():
                 with gr.Column(scale=2):
                     user_input = gr.Textbox(label="💬 Ask Anything", lines=2, placeholder="Try: What's your name?")
-                    chat_display = gr.Textbox(label="📜 Conversation", interactive=False, lines=15)
+                    chat_display = gr.Textbox(label="📜 Conversation", interactive=False, lines=15, elem_id="chat_display")
                     send_button = gr.Button("📩 Send")
                 with gr.Column(scale=1):
                     audio_output = gr.Audio(label="🔊 Bot's Voice Reply", autoplay=True)
 
             chat_history = gr.State([])
-            send_button.click(fn=chatbot_response, inputs=[chat_history, user_input],
-                              outputs=[chat_history, chat_display, audio_output])
-            user_input.submit(fn=chatbot_response, inputs=[chat_history, user_input],
-                              outputs=[chat_history, chat_display, audio_output])
 
-        gr.HTML("<footer>🔧 Made by using Gradio, Edge TTS, and Hugging Face 🤗</footer>")
+            def chatbot_with_typing(history, user_message):
+                yield history, "Bot is typing...", None
+                yield chatbot_response(history, user_message)
+
+            send_button.click(
+                fn=chatbot_with_typing,
+                inputs=[chat_history, user_input],
+                outputs=[chat_history, chat_display, audio_output]
+            )
+
+            user_input.submit(
+                fn=chatbot_with_typing,
+                inputs=[chat_history, user_input],
+                outputs=[chat_history, chat_display, audio_output]
+            )
+
+        gr.HTML("<footer style='text-align:center;padding:10px;color:#00FF00;'>🔧 Made with ❤️ by Yogya using Gradio, Edge TTS, and Hugging Face 🤗</footer>")
 
     return app