Update app.py

app.py

@@ -49,105 +49,290 @@ def infer(instruction, input_text="", max_new_tokens=512):
 
 # ----------------------- UI -----------------------
 with gr.Blocks(
-    theme=gr.themes.Soft(),
+    theme=gr.themes.Soft(
+        primary_hue="purple",
+        secondary_hue="pink",
+        neutral_hue="slate",
+    ),
     css="""
-    .gradio-container {max-width:1080px !important; margin:auto;}
+    @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;
+        font-family:'Noto Sans Sinhala','Inter',sans-serif !important;
+    }
+    
     h1,h2,h3,h4,h5 {text-align:center;}
+    
     #title-bar {
-        background:linear-gradient(90deg,#764de6,#e36cee);
+        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
         color:white;
-        padding:0.7rem;
-        border-radius:1rem;
-        margin-bottom:0.8rem;
-        box-shadow:0 2px 8px rgba(0,0,0,0.15);
+        padding:2rem 1rem;
+        border-radius:1.5rem;
+        margin-bottom:2rem;
+        box-shadow:0 8px 32px rgba(102,126,234,0.3);
+    }
+    
+    #title-bar h1 {
+        font-size:2.5rem;
+        font-weight:700;
+        margin-bottom:0.5rem;
+        text-shadow:2px 2px 4px rgba(0,0,0,0.2);
     }
+    
+    #title-bar h4 {
+        font-size:1.2rem;
+        font-weight:400;
+        opacity:0.95;
+    }
+    
     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;
+    }
+    
+    #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;
+        box-shadow:inset 0 2px 8px rgba(0,0,0,0.05);
+    }
+    
+    #status-text {
+        text-align:center;
+        font-size:1.1rem;
+        font-weight:600;
+        padding:0.75rem;
+        border-radius:0.5rem;
+        margin:0.5rem 0;
+    }
+    
+    #status-text.generating {
+        background:linear-gradient(90deg,#667eea,#764ba2);
+        color:white;
+        animation:pulse 1.5s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% {opacity:1;}
+        50% {opacity:0.7;}
+    }
+    
+    .primary-btn {
+        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
+        border:none !important;
+        font-size:1.1rem !important;
+        font-weight:600 !important;
+        padding:0.75rem 2rem !important;
+        border-radius:0.75rem !important;
+        box-shadow:0 4px 15px rgba(102,126,234,0.4) !important;
+        transition:all 0.3s ease !important;
+    }
+    
+    .primary-btn:hover {
+        transform:translateY(-2px);
+        box-shadow:0 6px 20px rgba(102,126,234,0.5) !important;
+    }
+    
+    .secondary-btn {
+        background:#6c757d !important;
+        border:none !important;
+        font-size:1rem !important;
+        border-radius:0.75rem !important;
+    }
+    
+    .label-text {
+        font-size:1rem !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);
+    }
+    
+    #footer-info {
+        text-align:center;
+        padding:2rem 1rem;
+        margin-top:3rem;
+        border-top:2px solid #e9ecef;
+        color:#6c757d;
+    }
+    
+    .token-counter {
+        font-size:0.9rem;
+        color:#6c757d;
+        text-align:right;
+        padding:0.25rem 0.5rem;
     }
-    #status-text {text-align:center;color:#555;}
     """,
 ) as demo:
 
-    gr.HTML("<div id='title-bar'><h1>🧠 Gamunu 4B Instruct Alpha</h1><h4>සිංහල Instruct LLM</h4></div>")
+    gr.HTML("""
+        <div id='title-bar'>
+            <h1>🧠 Gamunu 4B Instruct Alpha</h1>
+            <h4>සිංහල භාෂාව සඳහා නිර්මාණය කළ අධිකරණ භාෂා ආකෘතියක්</h4>
+        </div>
+    """)
 
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1,min_width=350):
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=5, min_width=400):
             instruction = gr.Textbox(
-                label="🧾 Instruction / Question",
-                placeholder="උදා: හායි! මම සමන්. ඔයාට කොහොමද?",
-                lines=4,
+                label="📝 උපදෙස / ප්‍රශ්නය (Instruction / Question)",
+                placeholder="උදාහරණ: හායි! මම සමන්. ඔයාට කොහොමද?\nया: ෆොටෝසින්තසිස් ක්‍රියාවලිය පැහැදිලි කරන්න.",
+                lines=5,
+                elem_classes="label-text"
             )
+            
             input_text = gr.Textbox(
-                label="Additional Context (Optional)",
-                placeholder="අමතර තොරතුරු ඇතුළත් කරන්න (ඇත්නම්)",
+                label="📄 අමතර සන්දර්භය (Additional Context) - විකල්ප",
+                placeholder="අමතර තොරතුරු හෝ සන්දර්භය මෙහි ඇතුළත් කරන්න...",
                 lines=3,
+                elem_classes="label-text"
             )
 
-            with gr.Accordion("⚙️ Advanced Option", open=False):
-                max_new_tokens = gr.Slider(
-                    64, 1024, value=512, step=32, label="🔢 Max New Tokens"
-                )
+            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")
 
-            run_btn = gr.Button("🔮 Generate Response", variant="primary")
+            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.Column(scale=1,min_width=400):
-            output = gr.Markdown(label="🧩 Gamunu Response", elem_id="output-box")
+        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")
 
     # --- Example prompts ---
-    with gr.Accordion("🧮 Example Prompts by Category", open=False):
-        with gr.Tab("Maths"):
+    with gr.Accordion("📚 උදාහරණ ප්‍රශ්න (Example Prompts by Category)", open=True):
+        with gr.Tab("🔢 ගණිතය (Maths)"):
             gr.Examples(
                 examples=[
                     ["රු. 30 කින් මිලදී ගත් දේ රු. 60 නම් මිල වෙනස ප්‍රතිශතයකින් කීයද?", ""],
                     ["සියයට 10 ක වර්ධනයක් තිබේ නම් අලුත් අගය කීයද?", ""],
+                    ["2x + 5 = 15 සමීකරණය විසඳන්න.", ""],
                 ],
-                inputs=[instruction],
+                inputs=[instruction, input_text],
+                elem_classes="example-box"
             )
-        with gr.Tab("Roleplay"):
+        
+        with gr.Tab("🎭 භූමිකා (Roleplay)"):
             gr.Examples(
                 examples=[
                     ["ඔබ ගුරුවරයෙකු ලෙස ක්‍රියාකරන්න. ශිෂ්‍යයාට ගණිතය උගන්වන්න.",
                      "රු. 30 කින් මිලදී ගත් දේ රු. 60 නම් මිල වෙනස ප්‍රතිශතයකින් කීයද?"],
                     ["ඔබ පරිසර විද්‍යාඥයෙකු ලෙස වායු මණ්ඩලය පැහැදිලි කරන්න.", ""],
+                    ["ඔබ කාර්මික විශේෂඥයෙකු ලෙස ක්‍රියා කරමින් මෘදුකාංග සංවර්ධනය පැහැදිලි කරන්න.", ""],
                 ],
-                inputs=[instruction],
+                inputs=[instruction, input_text],
+                elem_classes="example-box"
             )
-        with gr.Tab("QA"):
+        
+        with gr.Tab("❓ ප්‍රශ්න සහ පිළිතුරු (Q&A)"):
             gr.Examples(
                 examples=[
                     ["ෆොටෝසින්තසිස් ක්‍රියාවලිය පැහැදිලි කරන්න.", ""],
                     ["ජලයේ රසායනික සූත්‍රය කුමක්ද?", ""],
+                    ["ශ්‍රී ලංකාවේ පළමු අගමැති කවුද?", ""],
                 ],
-                inputs=[instruction],
+                inputs=[instruction, input_text],
+                elem_classes="example-box"
             )
-        with gr.Tab("NLP"):
+        
+        with gr.Tab("🔤 භාෂා සැකසුම (NLP)"):
             gr.Examples(
                 examples=[
                     ["මෙම වාක්‍යය සිංහලයට පරිවර්තනය කරන්න: 'The sun rises in the east.'", ""],
-                    ["වචන 'ආදරය' සඳහා පරිවර්තන 3ක් දෙන්න.", ""],
+                    ["වචන 'ආදරය' සඳහා සමානාර්ථ පද 3ක් දෙන්න.", ""],
+                    ["මෙම වාක්‍යය සරල කරන්න: 'අධිකාරිය විසින් නිකුත් කරන ලද නියෝගය අනුව ක්‍රියාත්මක වේ.'", ""],
                 ],
-                inputs=[instruction],
+                inputs=[instruction, input_text],
+                elem_classes="example-box"
             )
 
-    # --- Button feedback ---
-    def process_with_status(instruction,input_text,max_new_tokens):
-        yield "⏳ Generating response...", gr.update(interactive=False,value="⏳ Generating..."), ""
-        result = infer(instruction,input_text,max_new_tokens)
-        yield "", gr.update(interactive=True,value="🔮 Generate Response"), result
+    # --- Button feedback with improved status ---
+    def process_with_status(instruction, input_text, max_new_tokens):
+        if not instruction.strip():
+            return "⚠️ කරුණාකර උපදෙසක් ඇතුළත් කරන්න", gr.update(interactive=True), "", ""
+        
+        yield (
+            "<div class='generating'>⏳ ප්‍රතිචාරය උත්පාදනය වෙමින්...</div>", 
+            gr.update(interactive=False, value="⏳ ප්‍රතිචාරය උත්පාදනය වෙමින්..."), 
+            "",
+            ""
+        )
+        
+        try:
+            result = infer(instruction, input_text, max_new_tokens)
+            approx_tokens = len(result.split())
+            token_info = f"📊 ආසන්න වශයෙන් වචන {approx_tokens}ක්"
+            yield (
+                "✅ සාර්ථකයි!", 
+                gr.update(interactive=True, value="🚀 ප්‍රතිචාරය උත්පාදනය කරන්න"), 
+                result,
+                token_info
+            )
+        except Exception as e:
+            yield (
+                f"❌ දෝෂයක්: {str(e)}", 
+                gr.update(interactive=True, value="🚀 ප්‍රතිචාරය උත්පාදනය කරන්න"), 
+                "",
+                ""
+            )
+
+    def clear_all():
+        return "", "", 512, "", gr.update(value="🚀 ප්‍රතිචාරය උත්පාදනය කරන්න", interactive=True), ""
 
     run_btn.click(
         process_with_status,
-        inputs=[instruction,input_text,max_new_tokens],
-        outputs=[status,run_btn,output],
+        inputs=[instruction, input_text, max_new_tokens],
+        outputs=[status, run_btn, output, token_count],
         show_progress=True,
     )
 
-    gr.Markdown("""
----
-🪶 **Model:** [`manthilaffs/Gamunu-4B-Instruct-Alpha`](https://huggingface.co/manthilaffs/Gamunu-4B-Instruct-Alpha)  
-© 2025 Gamunu Project | Experimental Release  
-""")
+    clear_btn.click(
+        clear_all,
+        outputs=[instruction, input_text, max_new_tokens, output, run_btn, status]
+    )
+
+    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>
+        <p style='font-size:0.95rem; color:#868e96;'>
+            © 2025 Gamunu Project | Experimental Release | Made with ❤️ for Sinhala NLP
+        </p>
+    </div>
+    """)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()