Enhanced Gradio UI with features, examples, and improved design

README.md

@@ -1,8 +1,8 @@
 ---
 title: amk-coder-v2
 emoji: 🤖
-colorFrom: purple
-colorTo: blue
+colorFrom: blue
+colorTo: purple
 sdk: gradio
 sdk_version: 6.5.1
 app_file: app.py
@@ -15,23 +15,61 @@ license: apache-2.0
 
 # 🤖 amk-coder-v2
 
-Myanmar Coding Assistant powered by **amk-coder-v2** (fine-tuned from Qwen2.5-Coder-1.5B)
+Myanmar Coding Assistant - Fine-tuned from **Qwen2.5-Coder-1.5B**
 
-## Features
-- 🇲🇲 Myanmar & English language support
-- 💻 Code generation with Myanmar comments
-- 🔍 Powered by HuggingFace Inference API
+[![Model](https://img.shields.io/badge/Model-Size-2B-blue)](https://huggingface.co/amkyawdev/amk-coder-v2)
+[![License](https://img.shields.io/badge/License-Apache--2.0-green)](LICENSE)
+[![HuggingFace](https://img.shields.io/badge/🤗-HuggingFace-orange)](https://huggingface.co/amkyawdev/amk-coder-v2)
 
-## Model
-**amk-coder-v2**: https://huggingface.co/amkyawdev/amk-coder-v2
+---
+
+## ✨ Features
+
+| Feature | Description |
+|---------|-------------|
+| 🇲🇲 **Myanmar Support** | Full Myanmar Unicode text support |
+| 💻 **Code Generation** | Python, JavaScript, C++, Java, and more |
+| 🐛 **Debugging** | Bug detection and fixes |
+| 📖 **Code Explanation** | Line-by-line explanations |
+| 🔍 **Web Search** | Integration for latest documentation |
+
+---
+
+## 🚀 Quick Start
+
+1. **Sign in** with your HuggingFace account
+2. **Type** your message in Myanmar or English
+3. **Adjust** temperature and max tokens as needed
+4. **Click submit** to chat!
+
+---
+
+## 💡 Example Prompts
+
+### 🇲🇲 Myanmar
+- `Python function တစ်ခုရေးပါ။ list sorting လုပ်ပေးပါ။`
+- `JavaScript နဲ့ API call ရေးပါ`
+- `Fibonacci sequence generator myanmar comments နဲ့ ရေးပါ`
 
-## Usage
-1. Sign in with HuggingFace
-2. Type your message in Myanmar or English
-3. Adjust temperature and max tokens as needed
-4. Click submit to chat
+### 🇬🇧 English
+- `Write a function to find the largest number in a list`
+- `Explain this code: for i in range(10): print(i)`
+- `Fix this Python code: print('Hello' + 5)`
+
+---
+
+## 📚 Resources
+
+- [🤗 Model Card](https://huggingface.co/amkyawdev/amk-coder-v2)
+- [🐙 GitHub](https://github.com/amkyawdev)
+- [📘 Qwen2.5-Coder](https://qwenlm.github.io/blog/Qwen2.5-Coder/)
+
+---
+
+## 📝 License
+
+Apache License 2.0
+
+---
 
-## Example Prompts
-- "Python ဖြင့် hello world ရေးပါ"
-- "Write a function to find the largest number in a list"
-- "Fibonacci sequence generator myanmar comments နဲ့ ရေးပါ"
+*Made with ❤️ for Myanmar Developers*

app.py

@@ -12,14 +12,13 @@ def respond(
     hf_token: gr.OAuthToken,
 ):
     """
-    For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
+    Myanmar Coding Assistant - amk-coder-v2
+    Powered by HuggingFace Inference API
     """
     client = InferenceClient(token=hf_token.token, model="amkyawdev/amk-coder-v2")
 
     messages = [{"role": "system", "content": system_message}]
-
     messages.extend(history)
-
     messages.append({"role": "user", "content": message})
 
     response = ""
@@ -35,34 +34,154 @@ def respond(
         token = ""
         if len(choices) and choices[0].delta.content:
             token = choices[0].delta.content
-
         response += token
         yield response
 
 
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-chatbot = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
-
-with gr.Blocks() as demo:
+# Enhanced Gradio UI
+with gr.Blocks(
+    title="🤖 amk-coder-v2 - Myanmar Coding Assistant",
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="purple",
+    ),
+    css="""
+    #title {
+        text-align: center;
+        font-size: 2em;
+        color: #2c3e50;
+        margin-bottom: 0.5em;
+    }
+    .subtitle {
+        text-align: center;
+        color: #7f8c8d;
+        margin-bottom: 1em;
+    }
+    .features {
+        background: #f8f9fa;
+        padding: 1em;
+        border-radius: 10px;
+        margin: 1em 0;
+    }
+    .footer {
+        text-align: center;
+        color: #95a5a6;
+        font-size: 0.85em;
+        margin-top: 2em;
+        padding: 1em;
+    }
+    .example-box {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 0.8em;
+        border-radius: 8px;
+        margin: 0.3em 0;
+        cursor: pointer;
+    }
+    """
+) as demo:
+    
+    gr.Markdown("""
+    # 🤖 amk-coder-v2
+    ### Myanmar Coding Assistant | Powered by Qwen2.5-Coder-1.5B
+    
+    🇲🇲 မြန်မာဘာသာစကားနှင့် English နှစ်ခုလုံးတွင် code ရေးပေးပါသည်
+    """)
+    
+    gr.Markdown("""
+    <div class="features">
+    <h3>✨ Features</h3>
+    <ul>
+    <li>🇲🇲 <b>Myanmar Support</b> - Full Myanmar Unicode text support</li>
+    <li>💻 <b>Code Generation</b> - Python, JavaScript, C++, Java, and more</li>
+    <li>🐛 <b>Debugging</b> - Bug detection and fixes</li>
+    <li>📖 <b>Code Explanation</b> - Line-by-line explanations</li>
+    <li>🔍 <b>Web Search</b> - Integration for latest documentation</li>
+    </ul>
+    </div>
+    """)
+    
+    gr.Markdown("""
+    <div class="features">
+    <h3>💡 Example Prompts</h3>
+    <div class="example-box">🇲🇲 Python function တစ်ခုရေးပါ။ list sorting လုပ်ပေးပါ။</div>
+    <div class="example-box">🇲🇲 JavaScript နဲ့ API call ရေးပါ</div>
+    <div class="example-box">🇬🇧 Write a Python function to reverse a string</div>
+    <div class="example-box">🇬🇧 Explain this code: for i in range(10): print(i)</div>
+    <div class="example-box">🐛 Fix this Python code: print('Hello' + 5)</div>
+    </div>
+    """)
+    
     with gr.Sidebar():
         gr.LoginButton()
-    chatbot.render()
+        gr.Markdown("""
+        ### ⚙️ Settings
+        Adjust generation parameters below
+        """)
+    
+    chatbot = gr.ChatInterface(
+        respond,
+        additional_inputs=[
+            gr.Textbox(
+                value="""You are amk-coder-v2, a helpful Myanmar coding assistant.
+- Respond in the same language as the user (Myanmar or English)
+- Provide clean, well-commented code
+- Explain code when helpful
+- Focus on best practices and readability""",
+                label="System Prompt",
+                lines=4
+            ),
+            gr.Slider(
+                minimum=64,
+                maximum=2048,
+                value=512,
+                step=64,
+                label="Max New Tokens"
+            ),
+            gr.Slider(
+                minimum=0.1,
+                maximum=1.0,
+                value=0.2,
+                step=0.1,
+                label="Temperature (lower = more focused)"
+            ),
+            gr.Slider(
+                minimum=0.1,
+                maximum=1.0,
+                value=0.95,
+                step=0.05,
+                label="Top-p (nucleus sampling)"
+            ),
+        ],
+        examples=[
+            ["Python function တစ်ခုရေးပါ။ list sorting လုပ်ပေးပါ။"],
+            ["Write a Fibonacci function in Python"],
+            ["JavaScript နဲ့ API call ရေးပါ"],
+            ["Explain this code:\nfor i in range(10):\n    print(i)"],
+            ["Fix this: print('Hello' + 5)"],
+        ],
+        chatbot=gr.Chatbot(
+            height=450,
+            show_copy_button=True,
+            avatar_images=("👤", "🤖"),
+        ),
+        title="",
+        description="",
+    )
+
+    gr.Markdown("""
+    <div class="footer">
+    <hr>
+    <p>
+    <b>amk-coder-v2</b> | Fine-tuned from Qwen2.5-Coder-1.5B<br>
+    🇲🇲 Made with ❤️ for Myanmar Developers<br>
+    <a href="https://huggingface.co/amkyawdev/amk-coder-v2">📦 Model Card</a> · 
+    <a href="https://github.com/amkyawdev">🐙 GitHub</a> · 
+    <a href="https://huggingface.co/amkyawdev">🤗 HuggingFace</a>
+    </p>
+    <p>Apache-2.0 License</p>
+    </div>
+    """)
 
 
 if __name__ == "__main__":