return back to the old version

app.py

@@ -51,153 +51,47 @@ def translate_to_emoji(text, creativity_level=0):
     except Exception as e:
         return f"❌ Error: {str(e)}"
 
-# Custom CSS for enhanced styling
-custom_css = """
-#title {
-    text-align: center;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 2rem;
-    border-radius: 10px;
-    margin-bottom: 2rem;
-}
-
-#title h1 {
-    color: white;
-    font-size: 3em !important;
-    margin-bottom: 0.5rem;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
-}
-
-.description {
-    font-size: 1.3em !important;
-    line-height: 1.8 !important;
-    color: #2d3748;
-    margin: 1.5rem 0;
-}
-
-.examples-text {
-    font-size: 1.2em !important;
-    color: #4a5568;
-    font-weight: 500;
-}
-
-.placeholder-large::placeholder {
-    font-size: 1.1em !important;
-}
-
-.info-section {
-    background: #f7fafc;
-    padding: 1.5rem;
-    border-radius: 8px;
-    margin: 1rem 0;
-    border-left: 4px solid #667eea;
-}
-
-.info-section h3 {
-    color: #667eea;
-    font-size: 1.5em !important;
-    margin-bottom: 1rem;
-}
-
-.info-section ul {
-    font-size: 1.2em !important;
-    line-height: 2 !important;
-}
-
-.info-section li {
-    margin: 0.8rem 0;
-}
-
-.info-section a {
-    color: #667eea;
-    font-weight: 600;
-    text-decoration: none;
-}
-
-.info-section a:hover {
-    text-decoration: underline;
-}
-
-.creativity-label {
-    font-size: 1.15em !important;
-}
-
-#output-box {
-    font-size: 2.5em !important;
-    text-align: center;
-    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
-    border-radius: 10px;
-    padding: 1rem;
-}
-
-.translate-btn {
-    font-size: 1.2em !important;
-    padding: 0.8rem 2rem !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    font-weight: 600 !important;
-}
-"""
-
 # Create Gradio interface
-with gr.Blocks(title="🎭 Emoji Translator", theme=gr.themes.Soft(primary_hue="purple"), css=custom_css) as demo:
-    
-    # Title Section
-    with gr.Column(elem_id="title"):
-        gr.Markdown("# 🎭 BART Emoji Translator")
-    
-    # Description
+with gr.Blocks(title="🎭 Emoji Translator", theme=gr.themes.Soft()) as demo:
     gr.Markdown(
         """
-        <div class="description">
-        <strong>Transform your text into emojis!</strong> This model uses <em>curriculum learning</em> and <em>LoRA fine-tuning</em> 
+        # 🎭 BART Emoji Translator
+        
+        Transform your text into emojis! This model uses curriculum learning and LoRA fine-tuning 
         to translate English sentences into appropriate emoji sequences.
-        </div>
         
-        <div class="examples-text">
-        <strong>💡 Examples to try:</strong> "I am happy", "I eat dinner with my family", or "I feel misunderstood"
-        </div>
-        """,
-        elem_classes="description"
+        **Examples:** Try "I am happy", "I eat dinner with my family", or "I feel misunderstood"
+        """
     )
     
-    # Main Interface
     with gr.Row():
         with gr.Column(scale=2):
             text_input = gr.Textbox(
-                label="📝 Enter Your Text",
+                label="📝 Enter your text",
                 placeholder="Type something like: I am happy today...",
-                lines=4,
-                elem_classes="placeholder-large"
+                lines=3
             )
             
+            # --- Creativity Slider (0, 1, 2) ---
             creativity = gr.Slider(
                 minimum=0,
                 maximum=2,
                 value=1,
                 step=1,
-                label="🎨 Creativity Level",
-                info="Choose your translation style: 0 = Strict & Accurate | 1 = Balanced | 2 = Creative (more randomness, may be less accurate)",
-                elem_classes="creativity-label"
+                label="🎨 Creativity",
+                info="0 = strict, 1 = balanced, 2 = creative"
             )
 
-            translate_btn = gr.Button(
-                "✨ Translate to Emojis", 
-                variant="primary",
-                size="lg",
-                elem_classes="translate-btn"
-            )
+            translate_btn = gr.Button("✨ Translate to Emojis", variant="primary")
         
         with gr.Column(scale=1):
             emoji_output = gr.Textbox(
-                label="🎉 Your Emoji Translation",
-                lines=6,
-                elem_id="output-box",
-                show_copy_button=True
+                label="🎉 Emoji Translation",
+                lines=3,
+                scale=2
             )
     
     # Example inputs
-    gr.Markdown("### 📋 Quick Examples")
     gr.Examples(
         examples=[
             ["I am happy", 0],
@@ -226,36 +120,27 @@ with gr.Blocks(title="🎭 Emoji Translator", theme=gr.themes.Soft(primary_hue="
         outputs=emoji_output
     )
     
-    # Model Information Section
     gr.Markdown(
         """
-        <div class="info-section">
-        <h3>📚 Model Architecture & Training</h3>
-        <ul>
-            <li><strong>Base Model:</strong> BART-Large with LoRA fine-tuning</li>
-            <li><strong>Training Method:</strong> 6-phase curriculum learning with strategic data retention</li>
-            <li><strong>LoRA Parameters:</strong> Rank 128, Alpha 256</li>
-            <li><strong>Dataset Strategy:</strong> Progressive difficulty from single emojis to complex sequences</li>
-        </ul>
-        </div>
+        ---
+        ### 📚 Model Information
+        
+        - **Model:** BART-Large with LoRA fine-tuning
+        - **Training:** 6-phase curriculum learning with strategic data retention
+        - **Parameters:** 128 LoRA rank, 256 alpha
+        - **Dataset:** Progressive difficulty from single emojis to complex sequences
         
-        <div class="info-section">
-        <h3>🔗 Resources & Links</h3>
-        <ul>
-            <li><a href="https://huggingface.co/mohamedmostafa259/bart-emoji-translator" target="_blank">🤗 Model on HuggingFace</a></li>
-            <li><a href="https://www.kaggle.com/code/mohamedmostafa259/emoji-translator-curriculum-learning" target="_blank">💻 Training Code on Kaggle</a></li>
-            <li><a href="https://www.kaggle.com/datasets/mohamedmostafa259/english-to-emoji" target="_blank">📊 Dataset on Kaggle</a></li>
-        </ul>
-        </div>
+        ### 🔗 Links
+        
+        - [🤗 Model on HuggingFace](https://huggingface.co/mohamedmostafa259/bart-emoji-translator)
+        - [💻 Training Code](https://www.kaggle.com/code/mohamedmostafa259/emoji-translator-curriculum-learning)
+        - [📊 Dataset](https://www.kaggle.com/datasets/mohamedmostafa259/english-to-emoji)
+
+        ### ⚠️ Limitations
         
-        <div class="info-section">
-        <h3>⚠️ Model Limitations</h3>
-        <ul>
-            <li><strong>Optimal performance:</strong> Works best with English text under 32 tokens</li>
-            <li><strong>Emoji coverage:</strong> May not recognize very rare or newly created emojis</li>
-            <li><strong>Complexity handling:</strong> Performance varies with text complexity and abstraction level</li>
-        </ul>
-        </div>
+        - Works best with English text under 32 tokens
+        - May not recognize very rare or newly created emojis
+        - Performance varies with text complexity
         """
     )