add of user interface

app.py

@@ -36,6 +36,15 @@ two_step_pairs = [
     "Japanese-Mandarin", "Mandarin-Japanese"
 ]
 
+# Language emoji mapping for visual appeal
+language_emojis = {
+    "English": "🇬🇧",
+    "French": "🇫🇷",
+    "Japanese": "🇯🇵",
+    "Spanish": "🇪🇸",
+    "Mandarin": "🇨🇳"
+}
+
 def translate_two_step(text, source_lang, target_lang):
     """Perform translation in two steps using English as an intermediate language."""
     # First step: translate to English
@@ -87,88 +96,212 @@ def translate(text, source_lang, target_lang):
         return f"Translation from {source_lang} to {target_lang} is not supported."
 
 def update_translation_info(source, target):
-    """Update information about the translation path."""
+    """Update information about the translation path with friendly, colorful message."""
     if source == target:
-        return "No translation needed (same language)"
+        return f"<div style='padding: 10px; background-color: #ffe6e6; border-radius: 8px; text-align: center;'>✨ Both languages are the same! No translation needed. ✨</div>"
     
     key = f"{source}-{target}"
+    emoji_source = language_emojis.get(source, "")
+    emoji_target = language_emojis.get(target, "")
+    
     if key in direct_translators:
-        return f"Using direct translation from {source} to {target}"
+        return f"<div style='padding: 10px; background-color: #e6ffe6; border-radius: 8px; text-align: center;'>✅ Direct translation: {emoji_source} {source} → {emoji_target} {target}</div>"
     elif key in two_step_pairs:
-        return f"Using two-step translation: {source} → English → {target}"
+        return f"<div style='padding: 10px; background-color: #e6f2ff; border-radius: 8px; text-align: center;'>🔄 Two-step translation: {emoji_source} {source} → 🇬🇧 English → {emoji_target} {target}</div>"
     else:
-        return f"Translation from {source} to {target} is not supported"
+        return f"<div style='padding: 10px; background-color: #fff2e6; border-radius: 8px; text-align: center;'>⚠️ Translation from {emoji_source} {source} to {emoji_target} {target} is not supported</div>"
+
+def swap_languages(source, target):
+    """Swap source and target languages."""
+    return target, source
+
+# Custom CSS
+custom_css = """
+.gradio-container {
+    background: linear-gradient(135deg, #f5f7fa 0%, #e4ecfb 100%);
+}
+.main-div {
+    border-radius: 20px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+    background-color: white;
+    padding: 20px;
+    margin: 10px;
+}
+.title {
+    text-align: center;
+    color: #4a69bd;
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+}
+.subtitle {
+    text-align: center;
+    color: #6a89cc;
+    margin-bottom: 20px;
+}
+.translate-button {
+    background-color: #4a69bd !important;
+    color: white !important;
+    border-radius: 30px !important;
+    padding: 10px 20px !important;
+    font-size: 1.2em !important;
+    transition: transform 0.3s ease !important;
+}
+.translate-button:hover {
+    transform: scale(1.05) !important;
+    background-color: #6a89cc !important;
+}
+.swap-button {
+    background-color: #fbc531 !important;
+    border-radius: 50% !important;
+    width: 50px !important;
+    height: 50px !important;
+    padding: 0 !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    transition: transform 0.3s ease !important;
+}
+.swap-button:hover {
+    transform: rotate(180deg) !important;
+}
+.language-select {
+    border-radius: 10px !important;
+    border: 2px solid #b2bec3 !important;
+}
+.text-area {
+    border-radius: 10px !important;
+    border: 2px solid #b2bec3 !important;
+    font-size: 1.1em !important;
+}
+.result-area {
+    border-radius: 10px !important;
+    border: 2px solid #6a89cc !important;
+    background-color: #f8f9fa !important;
+    font-size: 1.1em !important;
+}
+.footer {
+    text-align: center;
+    margin-top: 20px;
+    color: #7f8c8d;
+    font-size: 0.9em;
+}
+"""
 
 # Create Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Multilingual Translation")
-    gr.Markdown("### Some language pairs use two-step translation via English")
-    
-    with gr.Row():
-        source_lang = gr.Dropdown(
-            choices=["English", "French", "Japanese", "Spanish", "Mandarin"],
-            label="Source Language",
-            value="English"
+with gr.Blocks(css=custom_css) as demo:
+    with gr.Column(elem_classes="main-div"):
+        gr.Markdown("# 🌍 Happy Translator 🌎", elem_classes="title")
+        gr.Markdown("### Connect with the world through language! ✨", elem_classes="subtitle")
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                source_lang = gr.Dropdown(
+                    choices=["English", "French", "Japanese", "Spanish", "Mandarin"],
+                    label=f"From Language",
+                    value="English",
+                    elem_classes="language-select"
+                )
+            
+            with gr.Column(scale=1):
+                swap_btn = gr.Button("🔄", elem_classes="swap-button")
+            
+            with gr.Column(scale=2):
+                target_lang = gr.Dropdown(
+                    choices=["English", "French", "Japanese", "Spanish", "Mandarin"],
+                    label=f"To Language",
+                    value="French",
+                    elem_classes="language-select"
+                )
+        
+        translation_info = gr.HTML()
+        
+        # Update translation path info when languages change
+        source_lang.change(
+            update_translation_info,
+            inputs=[source_lang, target_lang],
+            outputs=translation_info
         )
-        target_lang = gr.Dropdown(
-            choices=["English", "French", "Japanese", "Spanish", "Mandarin"],
-            label="Target Language",
-            value="French"
+        
+        target_lang.change(
+            update_translation_info,
+            inputs=[source_lang, target_lang],
+            outputs=translation_info
         )
-    
-    translation_info = gr.Markdown("")
-    
-    # Update translation path info when languages change
-    source_lang.change(
-        update_translation_info,
-        inputs=[source_lang, target_lang],
-        outputs=translation_info
-    )
-    
-    target_lang.change(
+        
+        # Handle language swap
+        swap_btn.click(
+            swap_languages,
+            inputs=[source_lang, target_lang],
+            outputs=[source_lang, target_lang]
+        ).then(
+            update_translation_info,
+            inputs=[source_lang, target_lang],
+            outputs=translation_info
+        )
+        
+        with gr.Row():
+            with gr.Column():
+                source_text = gr.Textbox(
+                    label="Type your text here",
+                    placeholder="Enter text to translate...",
+                    lines=5,
+                    elem_classes="text-area"
+                )
+                
+            with gr.Column():
+                target_text = gr.Textbox(
+                    label="Translation Result",
+                    lines=5,
+                    elem_classes="result-area"
+                )
+        
+        translate_btn = gr.Button("✨ Translate ✨", elem_classes="translate-button")
+        
+        # Fun greeting examples with language-appropriate phrases
+        gr.Markdown("### Try these fun examples! 🎉", elem_classes="subtitle")
+        
+        examples = [
+            ["Hello, how are you today? I'm having a wonderful day!"],
+            ["I would like to visit Japan someday and see the cherry blossoms."],
+            ["Bonjour, comment allez-vous aujourd'hui? Je passe une journée merveilleuse!"],
+            ["J'aimerais visiter le Japon un jour et voir les cerisiers en fleurs."],
+            ["こんにちは、今日はお元気ですか？素晴らしい一日を過ごしています！"],
+            ["いつか日本を訪れて桜を見たいです。"],
+            ["Hola, ¿cómo estás hoy? ¡Estoy teniendo un día maravilloso!"],
+            ["Me gustaría visitar Japón algún día y ver los cerezos en flor."],
+            ["你好，今天好吗？我今天过得很愉快！"],
+            ["我希望有一天能去日本看樱花。"]
+        ]
+        
+        gr.Examples(
+            examples=examples,
+            inputs=source_text,
+            elem_classes="examples-grid"
+        )
+        
+        # Set up translation function
+        translate_btn.click(
+            translate,
+            inputs=[source_text, source_lang, target_lang],
+            outputs=target_text
+        )
+        
+        # Also translate when Enter is pressed in the source text box
+        source_text.submit(
+            translate,
+            inputs=[source_text, source_lang, target_lang],
+            outputs=target_text
+        )
+        
+        gr.Markdown("### Made with ❤️ for language lovers everywhere", elem_classes="footer")
+        
+    # Display initial translation info on load
+    demo.load(
         update_translation_info,
         inputs=[source_lang, target_lang],
         outputs=translation_info
     )
-    
-    with gr.Row():
-        with gr.Column():
-            source_text = gr.Textbox(label="Source Text", lines=5)
-            translate_btn = gr.Button(value="Translate")
-            
-            # Fixed examples without dynamic updates
-            gr.Examples(
-                examples=[
-                    ["Hello, how are you today?"],
-                    ["I would like to visit Japan someday."],
-                    ["Bonjour, comment allez-vous aujourd'hui?"],
-                    ["J'aimerais visiter le Japon un jour."],
-                    ["こんにちは、今日はお元気ですか？"],
-                    ["いつか日本を訪れたいです。"],
-                    ["Hola, ¿cómo estás hoy?"],
-                    ["Me gustaría visitar Japón algún día."],
-                    ["你好，今天好吗？"],
-                    ["我希望有一天能去日本。"]
-                ],
-                inputs=source_text
-            )
-        
-        with gr.Column():
-            target_text = gr.Textbox(label="Translation Result", lines=5)
-    
-    # Set up translation function
-    translate_btn.click(
-        translate,
-        inputs=[source_text, source_lang, target_lang],
-        outputs=target_text
-    )
-    
-    # Also translate when Enter is pressed in the source text box
-    source_text.submit(
-        translate,
-        inputs=[source_text, source_lang, target_lang],
-        outputs=target_text
-    )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)