Update app.py

app.py

@@ -1,70 +1,385 @@
 import gradio as gr
 from transformers import pipeline
 from gtts import gTTS
+import time
+import os
 
 # Load models
 sentiment_pipeline = pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
 summarization_pipeline = pipeline("summarization", model="facebook/bart-large-cnn")
 
-# Task logic
+# Task logic with enhanced feedback
 def perform_task(task, text):
     if not text.strip():
-        return "⚠️ Please enter some text.", None
+        return "⚠️ Please enter some text to analyze.", None, gr.update(visible=False)
+
+    # Simulate processing time for better UX
+    time.sleep(0.5)
 
     if task == "Sentiment Analysis":
         result = sentiment_pipeline(text)[0]
         label = result['label']
         score = round(result['score'], 3)
-        return f"🧠 Sentiment: {label}\n📊 Confidence: {score}", None
+
+        # Enhanced sentiment display with emojis
+        emoji = "😊" if label == "POSITIVE" else "😟"
+        confidence_bar = "█" * int(score * 10) + "░" * (10 - int(score * 10))
+
+        output = f"""
+{emoji} **Sentiment Analysis Results**
+
+**Label:** {label}
+**Confidence:** {score} ({score*100:.1f}%)
+**Visual:** {confidence_bar}
+
+**Interpretation:** This text expresses a {label.lower()} sentiment with {score*100:.1f}% confidence.
+        """.strip()
+
+        return output, None, gr.update(visible=False)
 
     elif task == "Summarization":
         result = summarization_pipeline(text, max_length=100, min_length=30, do_sample=False)
-        return f"✂️ Summary:\n{result[0]['summary_text']}", None
+        summary = result[0]['summary_text']
+
+        # Calculate compression ratio
+        original_words = len(text.split())
+        summary_words = len(summary.split())
+        compression_ratio = round((1 - summary_words/original_words) * 100, 1)
+
+        output = f"""
+📝 **Text Summarization Results**
+
+**Summary:**
+{summary}
+
+**Statistics:**
+• Original: {original_words} words
+• Summary: {summary_words} words
+• Compression: {compression_ratio}% reduction
+        """.strip()
+
+        return output, None, gr.update(visible=False)
 
     elif task == "Text-to-Speech":
         tts = gTTS(text)
         filename = "tts_output.mp3"
         tts.save(filename)
-        return "✅ Audio generated below:", filename
-
-# UI with custom dark mode
-with gr.Blocks(theme=gr.themes.Base()) as demo:
-    # Custom CSS for dark mode
-    gr.HTML("""
-    <style>
-        body, .gradio-container {
-            background-color: #111 !important;
-            color: #eee !important;
+
+        word_count = len(text.split())
+        char_count = len(text)
+
+        output = f"""
+🔊 **Text-to-Speech Generated Successfully!**
+
+**Input Statistics:**
+• Words: {word_count}
+• Characters: {char_count}
+• Estimated duration: ~{word_count * 0.5:.1f} seconds
+
+**Audio file ready for playback below** ⬇️
+        """.strip()
+
+        return output, filename, gr.update(visible=True, value=filename)
+
+# Enhanced CSS with modern design elements
+custom_css = """
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+    :root {
+        --primary-bg: #0a0a0a;
+        --secondary-bg: #1a1a1a;
+        --accent-bg: #2a2a2a;
+        --primary-text: #ffffff;
+        --secondary-text: #b0b0b0;
+        --accent-color: #3b82f6;
+        --accent-hover: #2563eb;
+        --success-color: #10b981;
+        --warning-color: #f59e0b;
+        --border-color: #333333;
+        --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    }
+
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    }
+
+    body, .gradio-container {
+        background: var(--primary-bg) !important;
+        color: var(--primary-text) !important;
+        background-image:
+            radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
+            radial_gradient(circle at 40% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
+        min-height: 100vh;
+    }
+
+    .gradio-container {
+        max-width: 1200px !important;
+        margin: 0 auto !important;
+        padding: 2rem !important;
+    }
+
+    /* Header styling */
+    #title {
+        background: var(--gradient-1);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 3rem !important;
+        font-weight: 700 !important;
+        text-align: center !important;
+        margin-bottom: 2rem !important;
+        animation: glow 2s ease-in-out infinite alternate;
+    }
+
+    @keyframes glow {
+        from { filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3)); }
+        to { filter: drop_shadow(0 0 30px rgba(168, 85, 247, 0.5)); }
+    }
+
+    /* Card-like containers */
+    .gr-box, .gr-form {
+        background: var(--secondary-bg) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 16px !important;
+        padding: 1.5rem !important;
+        backdrop-filter: blur(10px) !important;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+        transition: all 0.3s ease !important;
+    }
+
+    .gr-box:hover, .gr-form:hover {
+        border-color: var(--accent-color) !important;
+        box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2) !important;
+        transform: translateY(-2px) !important;
+    }
+
+    /* Input fields */
+    .gr-input, .gr-textbox, .gr-dropdown {
+        background: var(--accent-bg) !important;
+        color: var(--primary-text) !important;
+        border: 2px solid var(--border-color) !important;
+        border-radius: 12px !important;
+        padding: 1rem !important;
+        font-size: 1rem !important;
+        transition: all 0.3s ease !important;
+    }
+
+    .gr-input:focus, .gr-textbox:focus, .gr-dropdown:focus {
+        border-color: var(--accent-color) !important;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+        outline: none !important;
+    }
+
+    /* Buttons */
+    .gr-button {
+        background: var(--gradient-1) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 12px !important;
+        padding: 1rem 2rem !important;
+        font-size: 1.1rem !important;
+        font-weight: 600 !important;
+        cursor: pointer !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
+    }
+
+    .gr-button:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4) !important;
+    }
+
+    .gr-button:active {
+        transform: translateY(0) !important;
+    }
+
+    /* Labels */
+    label {
+        color: var(--primary-text) !important;
+        font-weight: 500 !important;
+        font-size: 1.1rem !important;
+        margin-bottom: 0.5rem !important;
+    }
+
+    /* Placeholders */
+    input::placeholder, textarea::placeholder {
+        color: var(--secondary-text) !important;
+        opacity: 0.7 !important;
+    }
+
+    /* Output areas */
+    .gr-textbox[data-testid="textbox"] {
+        background: var(--accent-bg) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 12px !important;
+        padding: 1.5rem !important;
+        font-family: 'Inter', monospace !important;
+        line-height: 1.6 !important;
+    }
+
+    /* Audio component */
+    .gr-audio {
+        background: var(--secondary-bg) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 12px !important;
+        padding: 1rem !important;
+    }
+
+    /* Markdown content */
+    .markdown-content {
+        line-height: 1.8 !important;
+    }
+
+    .markdown-content strong {
+        color: var(--accent-color) !important;
+    }
+
+    /* Task selector special styling */
+    .gr-dropdown {
+        background: var(--gradient-2) !important;
+        color: white !important;
+        font-weight: 500 !important;
+    }
+
+    /* Responsive design */
+    @media (max-width: 768px) {
+        #title {
+            font-size: 2rem !important;
         }
-        .gr-input, .gr-button, .gr-box {
-            background-color: #222 !important;
-            color: #eee !important;
-            border: 1px solid #444 !important;
+
+        .gradio-container {
+            padding: 1rem !important;
         }
-        input::placeholder, textarea::placeholder {
-            color: #888 !important;
+
+        .gr-box, .gr-form {
+            padding: 1rem !important;
         }
-    </style>
+    }
+
+    /* Loading animation */
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    .loading {
+        animation: pulse 1.5s infinite;
+    }
+
+    /* Success/Error states */
+    .success {
+        border-color: var(--success-color) !important;
+        box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important;
+    }
+
+    .warning {
+        border-color: var(--warning-color) !important;
+        box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important;
+    }
+</style>
+"""
+
+# UI with enhanced design
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
+    gr.HTML(custom_css)
+
+    # Header with enhanced styling
+    gr.Markdown("# 🤖 Multi-Task AI Assistant", elem_id="title")
+    gr.Markdown("""
+    <div style="text-align: center; margin-bottom: 2rem; color: #b0b0b0; font-size: 1.2rem;">
+        Harness the power of AI for <strong>sentiment analysis</strong>, <strong>text summarization</strong>, and <strong>text-to-speech</strong> conversion
+    </div>
     """)
 
-    gr.Markdown("# 🤖 Multi-Task Chatbot", elem_id="title")
+    # Main interface
+    with gr.Row():
+        with gr.Column(scale=1, min_width=250):
+            task_selector = gr.Dropdown(
+                choices=["Sentiment Analysis", "Summarization", "Text-to-Speech"],
+                label="🔧 Select AI Task",
+                value="Sentiment Analysis",
+                info="Choose the AI capability you want to use"
+            )
+
+            # Task descriptions
+            gr.Markdown("""
+            **📊 Sentiment Analysis**: Analyze emotional tone and polarity of text
+
+            **✂️ Summarization**: Generate concise summaries of long text
+
+            **🔊 Text-to-Speech**: Convert text into natural-sounding audio
+            """, elem_classes=["task-info"])
+
+        with gr.Column(scale=2):
+            textbox = gr.Textbox(
+                lines=8,
+                label="📝 Input Text",
+                placeholder="Enter your text here... \n\nTip: For best results:\n• Sentiment: Use complete sentences\n• Summary: Provide longer text (100+ words)\n• TTS: Use natural, conversational text",
+                info="Type or paste the text you want to process"
+            )
+
+    # Action button
+    with gr.Row():
+        run_button = gr.Button("🚀 Process with AI", size="lg", variant="primary")
+
+    # Results section
+    gr.Markdown("## 📋 Results", elem_classes=["results-header"])
 
     with gr.Row():
-        task_selector = gr.Dropdown(
-            ["Sentiment Analysis", "Summarization", "Text-to-Speech"],
-            label="Select Task",
-            value="Sentiment Analysis"
-        )
+        with gr.Column(scale=2):
+            output_text = gr.Textbox(
+                label="📊 Analysis Results",
+                lines=8,
+                info="Detailed results and insights will appear here",
+                interactive=False
+            )
+
+        with gr.Column(scale=1):
+            output_audio = gr.Audio(
+                label="🔊 Generated Audio",
+                type="filepath",
+                visible=False,
+            )
+
+    # Enhanced event handler
+    def handle_task_processing(task, text):
+        if not text.strip():
+            return "⚠️ Please enter some text to get started!", None, gr.update(visible=False)
 
-    textbox = gr.Textbox(lines=6, label="Enter your text here")
-    output_text = gr.Textbox(label="Output Message")
-    output_audio = gr.Audio(label="Generated Speech", type="filepath", visible=False)
-    run_button = gr.Button("Run")
+        # Show processing message
+        processing_msg = f"🔄 Processing your {task.lower()} request..."
 
-    def handle_all(task, text):
-        message, audio_path = perform_task(task, text)
-        return message, gr.update(value=audio_path, visible=audio_path is not None)
+        # Process the task
+        result_text, audio_file, audio_update = perform_task(task, text)
 
-    run_button.click(fn=handle_all, inputs=[task_selector, textbox], outputs=[output_text, output_audio])
+        return result_text, audio_file, audio_update
+
+    # Event binding
+    run_button.click(
+        fn=handle_task_processing,
+        inputs=[task_selector, textbox],
+        outputs=[output_text, output_audio, output_audio]
+    )
+
+    # Footer
+    gr.Markdown("""
+    <div style="text-align: center; margin-top: 3rem; padding: 2rem; color: #666; border-top: 1px solid #333;">
+        <p>✨ <strong>Multi-Task AI Assistant</strong> - Powered by Transformers & Gradio</p>
+        <p>Built with ❤️ for seamless AI interaction</p>
+    </div>
+    """)
 
-demo.launch()
+# Launch with enhanced settings
+if __name__ == "__main__":
+    demo.launch(
+        # Removing server_name and server_port to let Gradio handle networking
+        share=True, # share=True is often necessary in Colab environments
+        debug=True,
+        show_error=True,
+        favicon_path=None,
+        app_kwargs={"docs_url": "/docs"}
+    )