Update app.py

app.py

@@ -48,96 +48,6 @@ with st.expander("🎯 Purpose"):
     - Exploring how encoder outputs can serve as **context embeddings** for downstream NLP tasks  
     """)
 
-# ------------------------------------------------
-# Self Attention Section
-# ------------------------------------------------
-with st.expander("🔹 Self-Attention Mechanism"):
-    st.markdown("""
-    Self-Attention is a mechanism where each token in a sequence attends to **other tokens in the same sequence** to capture dependencies.
-    
-    **Key points:**
-    - Helps the model focus on relevant words within the same sentence.
-    - Computes attention scores between all pairs of positions in the input.
-    - Often implemented as **Multi-Head Self-Attention** to capture different types of relationships simultaneously.
-    
-    **Example:**  
-    In the sentence *"The cat sat on the mat"*, self-attention allows the model to understand that *"cat"* is related to *"sat"* and *"mat"*.
-    """)
-    
-# ------------------------------------------------
-# Cross Attention Section
-# ------------------------------------------------
-with st.expander("🔹 Cross-Attention Mechanism"):
-    st.markdown("""
-    Cross-Attention is used in encoder-decoder architectures where the **decoder attends to encoder outputs**.
-    
-    **Key points:**
-    - Decoder queries encoder outputs to focus on relevant parts of the input sentence.
-    - Crucial for translation, summarization, or any sequence-to-sequence task.
-    
-    **Example:**  
-    Translating *"I am hungry"* to Hindi: when generating the Hindi word *"भूखा"*, cross-attention helps the decoder focus on *"hungry"* in the English input.
-    """)
-
-# ------------------------------------------------
-# Multi-Head Attention Section
-# ------------------------------------------------
-with st.expander("🔹 Multi-Head Attention"):
-    st.markdown("""
-    Multi-Head Attention is an extension of the attention mechanism that allows the model to **capture information from different representation subspaces simultaneously**.
-
-    **Key Points:**
-    - Instead of using a single attention function, we use **multiple attention heads**.
-    - Each head learns to focus on **different parts or relationships** of the input.
-    - The outputs from all heads are **concatenated and linearly projected** to form the final context vector.
-    - Improves the model’s ability to understand complex dependencies in sequences.
-
-    **Example:**
-    - In translating *"The cat sat on the mat"*:
-        - Head 1 may focus on subject-verb relations (*cat ↔ sat*).
-        - Head 2 may focus on verb-object relations (*sat ↔ mat*).
-        - Head 3 may focus on positional or syntactic patterns.
-    - Combining all heads gives a richer context for the decoder.
-    
-    **In your Seq2Seq Model:**
-    - Multi-Head Attention can be used as:
-        - **Self-Attention** in encoder/decoder layers
-        - **Cross-Attention** between encoder outputs and decoder hidden states
-    """)
-
-# ------------------------------------------------
-# Seq2Seq task Explaining Section
-# ------------------------------------------------
-with st.expander("🔹 Sequence-to-Sequence (Seq2Seq) Task"):
-    st.markdown("""
-    Seq2Seq models map an **input sequence** to an **output sequence**, often with **different lengths**.
-    
-    **Examples:**
-    - Machine Translation: English → Hindi
-    - Text Summarization
-    - Chatbots / Dialogue Systems
-    
-    **Characteristics:**
-    - Handles variable-length input and output sequences.
-    - Uses encoder to process input, decoder to generate output.
-    - Can integrate attention mechanisms to improve alignment between input and output tokens.
-    """)
-
-# ------------------------------------------------
-# Seq2Seq Task- Fixed-Length vs Variable-Length Section
-# ------------------------------------------------
-with st.expander("🔹 Fixed-Length vs Variable-Length Tasks"):
-    st.markdown("""
-    **Fixed-Length Tasks:**
-    - Input and output sequences have the **same length**.
-    - Example: Time series forecasting with fixed steps, classification tasks.
-
-    **Variable-Length Tasks:**
-    - Input and output sequences can **differ in length**.
-    - Example: Machine translation, summarization, speech recognition.
-    - Seq2Seq models are designed to handle this flexibility.
-    """)
-
 # ------------------------------------------------
 # Load models and tokenizers
 # ------------------------------------------------
@@ -308,6 +218,101 @@ if st.button("🚀 Translate"):
 if st.session_state.translation:
     st.success(f"✅ **Predicted Hindi Translation:** {st.session_state.translation}")
 
+# ------------------------------------------------
+# Learning Header
+# ------------------------------------------------
+st.subheader("Leaning how it works")
+
+# ------------------------------------------------
+# Self Attention Section
+# ------------------------------------------------
+with st.expander("🔹 Self-Attention Mechanism"):
+    st.markdown("""
+    Self-Attention is a mechanism where each token in a sequence attends to **other tokens in the same sequence** to capture dependencies.
+    
+    **Key points:**
+    - Helps the model focus on relevant words within the same sentence.
+    - Computes attention scores between all pairs of positions in the input.
+    - Often implemented as **Multi-Head Self-Attention** to capture different types of relationships simultaneously.
+    
+    **Example:**  
+    In the sentence *"The cat sat on the mat"*, self-attention allows the model to understand that *"cat"* is related to *"sat"* and *"mat"*.
+    """)
+    
+# ------------------------------------------------
+# Cross Attention Section
+# ------------------------------------------------
+with st.expander("🔹 Cross-Attention Mechanism"):
+    st.markdown("""
+    Cross-Attention is used in encoder-decoder architectures where the **decoder attends to encoder outputs**.
+    
+    **Key points:**
+    - Decoder queries encoder outputs to focus on relevant parts of the input sentence.
+    - Crucial for translation, summarization, or any sequence-to-sequence task.
+    
+    **Example:**  
+    Translating *"I am hungry"* to Hindi: when generating the Hindi word *"भूखा"*, cross-attention helps the decoder focus on *"hungry"* in the English input.
+    """)
+
+# ------------------------------------------------
+# Multi-Head Attention Section
+# ------------------------------------------------
+with st.expander("🔹 Multi-Head Attention"):
+    st.markdown("""
+    Multi-Head Attention is an extension of the attention mechanism that allows the model to **capture information from different representation subspaces simultaneously**.
+
+    **Key Points:**
+    - Instead of using a single attention function, we use **multiple attention heads**.
+    - Each head learns to focus on **different parts or relationships** of the input.
+    - The outputs from all heads are **concatenated and linearly projected** to form the final context vector.
+    - Improves the model’s ability to understand complex dependencies in sequences.
+
+    **Example:**
+    - In translating *"The cat sat on the mat"*:
+        - Head 1 may focus on subject-verb relations (*cat ↔ sat*).
+        - Head 2 may focus on verb-object relations (*sat ↔ mat*).
+        - Head 3 may focus on positional or syntactic patterns.
+    - Combining all heads gives a richer context for the decoder.
+    
+    **In your Seq2Seq Model:**
+    - Multi-Head Attention can be used as:
+        - **Self-Attention** in encoder/decoder layers
+        - **Cross-Attention** between encoder outputs and decoder hidden states
+    """)
+
+# ------------------------------------------------
+# Seq2Seq task Explaining Section
+# ------------------------------------------------
+with st.expander("🔹 Sequence-to-Sequence (Seq2Seq) Task"):
+    st.markdown("""
+    Seq2Seq models map an **input sequence** to an **output sequence**, often with **different lengths**.
+    
+    **Examples:**
+    - Machine Translation: English → Hindi
+    - Text Summarization
+    - Chatbots / Dialogue Systems
+    
+    **Characteristics:**
+    - Handles variable-length input and output sequences.
+    - Uses encoder to process input, decoder to generate output.
+    - Can integrate attention mechanisms to improve alignment between input and output tokens.
+    """)
+
+# ------------------------------------------------
+# Seq2Seq Task- Fixed-Length vs Variable-Length Section
+# ------------------------------------------------
+with st.expander("🔹 Fixed-Length vs Variable-Length Tasks"):
+    st.markdown("""
+    **Fixed-Length Tasks:**
+    - Input and output sequences have the **same length**.
+    - Example: Time series forecasting with fixed steps, classification tasks.
+
+    **Variable-Length Tasks:**
+    - Input and output sequences can **differ in length**.
+    - Example: Machine translation, summarization, speech recognition.
+    - Seq2Seq models are designed to handle this flexibility.
+    """)
+    
 # ------------------------------------------------
 # Show model architecture
 # ------------------------------------------------