Update app.py

app.py

@@ -58,58 +58,99 @@ with gr.Blocks(
     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&display=swap');
     
     .gradio-container {
-        max-width:1200px !important; 
-        margin:auto;
+        max-width:100% !important;
+        margin:0 auto !important;
+        padding:0.5rem !important;
         font-family:'Noto Sans Sinhala','Inter',sans-serif !important;
     }
     
+    @media (min-width: 768px) {
+        .gradio-container {
+            max-width:1100px !important;
+            padding:1rem !important;
+        }
+    }
+    
     h1,h2,h3,h4,h5 {text-align:center;}
     
     #title-bar {
         background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
         color:white;
-        padding:2rem 1rem;
-        border-radius:1.5rem;
-        margin-bottom:2rem;
-        box-shadow:0 8px 32px rgba(102,126,234,0.3);
+        padding:1rem;
+        border-radius:1rem;
+        margin-bottom:1rem;
+        box-shadow:0 4px 15px rgba(102,126,234,0.3);
     }
     
     #title-bar h1 {
-        font-size:2.5rem;
+        font-size:1.5rem;
         font-weight:700;
-        margin-bottom:0.5rem;
+        margin-bottom:0.25rem;
         text-shadow:2px 2px 4px rgba(0,0,0,0.2);
     }
     
     #title-bar h4 {
-        font-size:1.2rem;
+        font-size:0.9rem;
         font-weight:400;
         opacity:0.95;
+        margin:0;
+    }
+    
+    @media (min-width: 768px) {
+        #title-bar {
+            padding:1.5rem;
+            margin-bottom:1.5rem;
+        }
+        #title-bar h1 {
+            font-size:2rem;
+            margin-bottom:0.5rem;
+        }
+        #title-bar h4 {
+            font-size:1.1rem;
+        }
     }
     
     textarea,input,.gr-text-input,.gr-textbox {
         font-family:'Noto Sans Sinhala',sans-serif !important;
-        font-size:1.05rem !important;
-        line-height:1.8 !important;
-        border-radius:0.75rem !important;
+        font-size:0.95rem !important;
+        line-height:1.6 !important;
+        border-radius:0.5rem !important;
+    }
+    
+    @media (min-width: 768px) {
+        textarea,input,.gr-text-input,.gr-textbox {
+            font-size:1rem !important;
+            line-height:1.7 !important;
+        }
     }
     
     #output-box {
         background:#f8f9fa;
         border:2px solid #e9ecef;
-        border-radius:1rem;
-        padding:1.5rem;
-        min-height:200px;
-        font-size:1.1rem !important;
-        line-height:1.9 !important;
+        border-radius:0.75rem;
+        padding:1rem;
+        min-height:150px;
+        max-height:400px;
+        overflow-y:auto;
+        font-size:0.95rem !important;
+        line-height:1.7 !important;
         box-shadow:inset 0 2px 8px rgba(0,0,0,0.05);
     }
     
+    @media (min-width: 768px) {
+        #output-box {
+            padding:1.25rem;
+            min-height:180px;
+            font-size:1.05rem !important;
+            line-height:1.8 !important;
+        }
+    }
+    
     #status-text {
         text-align:center;
-        font-size:1.1rem;
+        font-size:0.9rem;
         font-weight:600;
-        padding:0.75rem;
+        padding:0.5rem;
         border-radius:0.5rem;
         margin:0.5rem 0;
     }
@@ -128,14 +169,21 @@ with gr.Blocks(
     .primary-btn {
         background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
         border:none !important;
-        font-size:1.1rem !important;
+        font-size:0.95rem !important;
         font-weight:600 !important;
-        padding:0.75rem 2rem !important;
-        border-radius:0.75rem !important;
+        padding:0.6rem 1rem !important;
+        border-radius:0.5rem !important;
         box-shadow:0 4px 15px rgba(102,126,234,0.4) !important;
         transition:all 0.3s ease !important;
     }
     
+    @media (min-width: 768px) {
+        .primary-btn {
+            font-size:1.05rem !important;
+            padding:0.7rem 1.5rem !important;
+        }
+    }
+    
     .primary-btn:hover {
         transform:translateY(-2px);
         box-shadow:0 6px 20px rgba(102,126,234,0.5) !important;
@@ -144,137 +192,189 @@ with gr.Blocks(
     .secondary-btn {
         background:#6c757d !important;
         border:none !important;
-        font-size:1rem !important;
-        border-radius:0.75rem !important;
+        font-size:0.85rem !important;
+        border-radius:0.5rem !important;
+        padding:0.6rem 1rem !important;
     }
     
     .label-text {
-        font-size:1rem !important;
+        font-size:0.9rem !important;
         font-weight:600 !important;
         color:#2d3748 !important;
-        margin-bottom:0.5rem !important;
-    }
-    
-    .example-box {
-        border-radius:0.75rem;
-        padding:0.5rem;
-        transition:all 0.2s ease;
-    }
-    
-    .example-box:hover {
-        background:#f8f9fa;
-        transform:translateX(4px);
+        margin-bottom:0.25rem !important;
     }
     
     #footer-info {
         text-align:center;
-        padding:2rem 1rem;
-        margin-top:3rem;
+        padding:1rem;
+        margin-top:1.5rem;
         border-top:2px solid #e9ecef;
         color:#6c757d;
+        font-size:0.85rem;
+    }
+    
+    @media (min-width: 768px) {
+        #footer-info {
+            padding:1.5rem;
+            margin-top:2rem;
+            font-size:0.95rem;
+        }
     }
     
     .token-counter {
-        font-size:0.9rem;
+        font-size:0.8rem;
         color:#6c757d;
         text-align:right;
-        padding:0.25rem 0.5rem;
+        padding:0.25rem 0;
+    }
+    
+    /* Compact accordion styling */
+    .gr-accordion {
+        margin:0.5rem 0 !important;
+    }
+    
+    /* Mobile optimization */
+    @media (max-width: 767px) {
+        .gr-row {
+            flex-direction:column !important;
+        }
+        .gr-column {
+            width:100% !important;
+            min-width:100% !important;
+        }
+    }
+    
+    /* Scroll to top button */
+    #scroll-top-btn {
+        position:fixed;
+        bottom:20px;
+        right:20px;
+        display:none;
+        z-index:1000;
+        padding:0.75rem 1rem;
+        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
+        color:white;
+        border:none;
+        border-radius:50px;
+        box-shadow:0 4px 15px rgba(0,0,0,0.3);
+        cursor:pointer;
+        font-size:1.2rem;
     }
     """,
+    js="""
+    function addScrollToTop() {
+        // Create scroll to top button
+        const scrollBtn = document.createElement('button');
+        scrollBtn.id = 'scroll-top-btn';
+        scrollBtn.innerHTML = '↑';
+        scrollBtn.title = 'මුලට යන්න';
+        document.body.appendChild(scrollBtn);
+        
+        // Show/hide on scroll
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 300) {
+                scrollBtn.style.display = 'block';
+            } else {
+                scrollBtn.style.display = 'none';
+            }
+        });
+        
+        // Scroll to top on click
+        scrollBtn.addEventListener('click', function() {
+            window.scrollTo({top: 0, behavior: 'smooth'});
+        });
+    }
+    
+    // Initialize on load
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', addScrollToTop);
+    } else {
+        addScrollToTop();
+    }
+    """
 ) as demo:
 
     gr.HTML("""
         <div id='title-bar'>
-            <h1>🧠 Gamunu 4B Instruct Alpha</h1>
-            <h4>සිංහල භාෂාව සඳහා නිර්මාණය කළ අධිකරණ භාෂා ආකෘතියක්</h4>
+            <h1>🧠 Gamunu 4B</h1>
+            <h4>සිංහල AI සහායකයා</h4>
         </div>
     """)
 
-    with gr.Row(equal_height=False):
-        with gr.Column(scale=5, min_width=400):
-            instruction = gr.Textbox(
-                label="📝 උපදෙස / ප්‍රශ්නය (Instruction / Question)",
-                placeholder="උදාහරණ: හායි! මම සමන්. ඔයාට කොහොමද?\nया: ෆොටෝසින්තසිස් ක්‍රියාවලිය පැහැදිලි කරන්න.",
-                lines=5,
-                elem_classes="label-text"
-            )
-            
-            input_text = gr.Textbox(
-                label="📄 අමතර සන්දර්භය (Additional Context) - විකල්ප",
-                placeholder="අමතර තොරතුරු හෝ සන්දර්භය මෙහි ඇතුළත් කරන්න...",
-                lines=3,
-                elem_classes="label-text"
-            )
+    # Main input section - always at top
+    with gr.Column(elem_id="input-section"):
+        instruction = gr.Textbox(
+            label="📝 උපදෙස / ප්‍රශ්නය",
+            placeholder="උදා: හායි! ඔයාට කොහොමද?",
+            lines=3,
+            elem_classes="label-text"
+        )
+        
+        input_text = gr.Textbox(
+            label="📄 අමතර සන්දර්භය (විකල්ප)",
+            placeholder="අමතර තොරතුරු...",
+            lines=2,
+            elem_classes="label-text"
+        )
 
-            with gr.Row():
-                with gr.Column(scale=2):
-                    with gr.Accordion("⚙️ උසස් සැකසීම් (Advanced Settings)", open=False):
-                        max_new_tokens = gr.Slider(
-                            64, 1024, value=512, step=32, 
-                            label="🔢 උපරිම නව සලකුණු (Max New Tokens)",
-                            info="දිගු ප්‍රතිචාර සඳහා වැඩි කරන්න"
-                        )
-                
-                with gr.Column(scale=1):
-                    token_count = gr.Markdown("", elem_classes="token-counter")
+        with gr.Accordion("⚙️ උසස් සැකසීම්", open=False):
+            max_new_tokens = gr.Slider(
+                64, 1024, value=512, step=64, 
+                label="උපරිම නව සලකුණු",
+                info="දිගු ප්‍රතිචාර සඳහා වැඩි කරන්න"
+            )
 
-            with gr.Row():
-                run_btn = gr.Button("🚀 ප්‍රතිචාරය උත්පාදනය කරන්න", variant="primary", elem_classes="primary-btn", scale=3)
-                clear_btn = gr.Button("🗑️ මකන්න", elem_classes="secondary-btn", scale=1)
-            
-            status = gr.Markdown("", elem_id="status-text")
+        with gr.Row():
+            run_btn = gr.Button("🚀 උත්පාදනය කරන්න", variant="primary", elem_classes="primary-btn", scale=2)
+            clear_btn = gr.Button("🗑️", elem_classes="secondary-btn", scale=0, min_width=50)
+        
+        status = gr.Markdown("", elem_id="status-text")
 
-        with gr.Column(scale=5, min_width=450):
-            gr.Markdown("### 💬 ගැමුණු ප්‍රතිචාරය (Gamunu Response)")
-            output = gr.Markdown("", elem_id="output-box")
-            
-            with gr.Row():
-                copy_btn = gr.Button("📋 පිටපත් කරන්න (Copy)", size="sm")
+    # Output section
+    with gr.Column():
+        gr.Markdown("### 💬 ප්‍රතිචාරය")
+        output = gr.Markdown("", elem_id="output-box")
+        token_count = gr.Markdown("", elem_classes="token-counter")
 
-    # --- Example prompts ---
-    with gr.Accordion("📚 උදාහරණ ප්‍රශ්න (Example Prompts by Category)", open=True):
-        with gr.Tab("🔢 ගණිතය (Maths)"):
+    # Examples section - compact
+    with gr.Accordion("📚 උදාහරණ", open=False):
+        with gr.Tab("🔢 ගණිතය"):
             gr.Examples(
                 examples=[
                     ["රු. 30 කින් මිලදී ගත් දේ රු. 60 නම් මිල වෙනස ප්‍රතිශතයකින් කීයද?", ""],
-                    ["සියයට 10 ක වර්ධනයක් තිබේ නම් අලුත් අගය කීයද?", ""],
                     ["2x + 5 = 15 සමීකරණය විසඳන්න.", ""],
                 ],
-                inputs=[instruction, input_text]
+                inputs=[instruction, input_text],
             )
         
-        with gr.Tab("🎭 භූමිකා (Roleplay)"):
+        with gr.Tab("🎭 භූමිකා"):
             gr.Examples(
                 examples=[
-                    ["ඔබ ගුරුවරයෙකු ලෙස ක්‍රියාකරන්න. ශිෂ්‍යයාට ගණිතය උගන්වන්න.",
-                     "රු. 30 කින් මිලදී ගත් දේ රු. 60 නම් මිල වෙනස ප්‍රතිශතයකින් කීයද?"],
+                    ["ඔබ ගුරුවරයෙකු ලෙස ක්‍රියාකරන්න.", "ගණිතය උගන්වන්න"],
                     ["ඔබ පරිසර විද්‍යාඥයෙකු ලෙස වායු මණ්ඩලය පැහැදිලි කරන්න.", ""],
-                    ["ඔබ කාර්මික විශේෂඥයෙකු ලෙස ක්‍රියා කරමින් මෘදුකාංග සංවර්ධනය පැහැදිලි කරන්න.", ""],
                 ],
-                inputs=[instruction, input_text]
+                inputs=[instruction, input_text],
             )
         
-        with gr.Tab("❓ ප්‍රශ්න සහ පිළිතුරු (Q&A)"):
+        with gr.Tab("❓ ප්‍රශ්න"):
             gr.Examples(
                 examples=[
                     ["ෆොටෝසින්තසිස් ක්‍රියාවලිය පැහැදිලි කරන්න.", ""],
                     ["ජලයේ රසායනික සූත්‍රය කුමක්ද?", ""],
-                    ["ශ්‍රී ලංකාවේ පළමු අගමැති කවුද?", ""],
                 ],
-                inputs=[instruction, input_text]
+                inputs=[instruction, input_text],
             )
         
-        with gr.Tab("🔤 භාෂා සැකසුම (NLP)"):
+        with gr.Tab("🔤 භාෂාව"):
             gr.Examples(
                 examples=[
                     ["මෙම වාක්‍යය සිංහලයට පරිවර්තනය කරන්න: 'The sun rises in the east.'", ""],
                     ["වචන 'ආදරය' සඳහා සමානාර්ථ පද 3ක් දෙන්න.", ""],
-                    ["මෙම වාක්‍යය සරල කරන්න: 'අධිකාරිය විසින් නිකුත් කරන ලද නියෝගය අනුව ක්‍රියාත්මක වේ.'", ""],
                 ],
-                inputs=[instruction, input_text]
+                inputs=[instruction, input_text],
             )
 
-    # --- Button feedback with improved status ---
+    # --- Processing functions ---
     def process_with_status(instruction, input_text, max_new_tokens):
         if not instruction.strip():
             return "⚠️ කරුණාකර උපදෙසක් ඇතුළත් කරන්න", gr.update(interactive=True), "", ""
@@ -289,23 +389,27 @@ with gr.Blocks(
         try:
             result = infer(instruction, input_text, max_new_tokens)
             approx_tokens = len(result.split())
-            token_info = f"📊 ආසන්න වශයෙන් වචන {approx_tokens}ක්"
+            token_info = f"📊 වචන {approx_tokens}ක් ආසන්න වශයෙන්"
             yield (
                 "✅ සාර්ථකයි!", 
-                gr.update(interactive=True, value="🚀 ප්‍රතිචාරය උත්පාදනය කරන්න"), 
+                gr.update(interactive=True, value="🚀 උත්පාදනය කරන්න"), 
                 result,
                 token_info
             )
         except Exception as e:
             yield (
                 f"❌ දෝෂයක්: {str(e)}", 
-                gr.update(interactive=True, value="🚀 ප්‍රතිචාරය උත්පාදනය කරන්න"), 
+                gr.update(interactive=True, value="🚀 උත්පාදනය කරන්න"), 
                 "",
                 ""
             )
 
     def clear_all():
-        return "", "", 512, "", gr.update(value="🚀 ප්‍රතිචාරය උත්පාදනය කරන්න", interactive=True), ""
+        return "", "", 512, "", gr.update(value="🚀 උත්පාදනය කරන්න", interactive=True), ""
+
+    # Scroll to top when example is clicked
+    def scroll_and_set(inst, inp):
+        return inst, inp
 
     run_btn.click(
         process_with_status,
@@ -321,11 +425,11 @@ with gr.Blocks(
 
     gr.HTML("""
     <div id='footer-info'>
-        <p style='font-size:1.1rem; margin-bottom:0.5rem;'>
-            🪶 <strong>Model:</strong> <a href='https://huggingface.co/manthilaffs/Gamunu-4B-Instruct-Alpha' target='_blank'>manthilaffs/Gamunu-4B-Instruct-Alpha</a>
+        <p style='margin-bottom:0.25rem;'>
+            🪶 <strong>Model:</strong> <a href='https://huggingface.co/manthilaffs/Gamunu-4B-Instruct-Alpha' target='_blank'>Gamunu-4B-Instruct-Alpha</a>
         </p>
-        <p style='font-size:0.95rem; color:#868e96;'>
-            © 2025 Gamunu Project | Experimental Release | Made with ❤️ for Sinhala NLP
+        <p style='font-size:0.8rem; color:#868e96; margin:0;'>
+            © 2025 Gamunu Project | Experimental Release
         </p>
     </div>
     """)