Update app.py

app.py

@@ -158,21 +158,55 @@ def create_interface():
         ["Buat file Sass untuk buttons"],
     ]
     
-    # CSS sederhana
-    css = """
-    .gradio-container { max-width: 1200px; margin: 0 auto; }
-    .header { text-align: center; padding: 20px; }
-    .example-btn { margin: 5px; }
-    """
-    
-    with gr.Blocks(css=css, title="Jekyll Master AI") as demo:
+    with gr.Blocks(title="Jekyll Master AI") as demo:
         
-        # Header
-        gr.Markdown("""
-        # 🎯 Jekyll Master AI
-        **Fine-tuned AI untuk Jekyll Static Site Generator**
+        # Custom CSS via HTML element
+        gr.HTML("""
+        <style>
+        .gradio-container { 
+            max-width: 1200px; 
+            margin: 0 auto; 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+        }
+        .header { 
+            text-align: center; 
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+        .example-btn { 
+            margin: 5px; 
+        }
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
+            color: #666;
+        }
+        .gradio-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+        }
+        .gradio-button:hover {
+            opacity: 0.9;
+        }
+        textarea, input {
+            border-radius: 8px !important;
+        }
+        </style>
+        """)
         
-        Generate clean, production-ready code untuk website Jekyll Anda.
+        # Header
+        gr.HTML("""
+        <div class="header">
+            <h1 style="margin: 0">🎯 Jekyll Master AI</h1>
+            <p style="font-size: 1.2em; opacity: 0.9">Fine-tuned AI untuk Jekyll Static Site Generator</p>
+            <p>Generate clean, production-ready code untuk website Jekyll Anda.</p>
+        </div>
         """)
         
         with gr.Row():
@@ -222,14 +256,8 @@ def create_interface():
                 ("🎨 Layout", "Buat layout post"),
                 ("🔧 Plugin", "Buat plugin Jekyll"),
             ]:
-                gr.Button(
-                    text,
-                    size="sm",
-                    variant="secondary"
-                ).click(
-                    lambda ex=example: ex,
-                    outputs=instruction
-                )
+                btn = gr.Button(text, size="sm")
+                btn.click(lambda ex=example: ex, outputs=instruction)
         
         # Full examples
         gr.Examples(
@@ -242,11 +270,14 @@ def create_interface():
         )
         
         # Footer
-        gr.Markdown("---")
-        gr.Markdown(f"""
-        **Model:** [{MODEL_ID}](https://huggingface.co/{MODEL_ID}) | 
-        **Dataset:** [Jekyll Master Dataset](https://huggingface.co/datasets/daffaaditya/jekyll-master-dataset) |
-        **Built with:** Transformers + Gradio
+        gr.HTML(f"""
+        <div class="footer">
+            <p>
+                <strong>Model:</strong> <a href="https://huggingface.co/{MODEL_ID}" target="_blank">{MODEL_ID}</a> | 
+                <strong>Dataset:</strong> <a href="https://huggingface.co/datasets/daffaaditya/jekyll-master-dataset" target="_blank">Jekyll Master Dataset</a> |
+                <strong>Built with:</strong> Transformers + Gradio
+            </p>
+        </div>
         """)
         
         # ============ EVENT HANDLERS ============