Update app.py

app.py

@@ -440,9 +440,9 @@ def create_interface():
                 
                 gr.HTML("""
                 <div style="padding: 20px;">
-                    <h2>🧾 Vietnamese Receipt Classification System</h2>
+                    <h2 style="color: #2c3e50;">🧾 Vietnamese Receipt Classification System</h2>
                     
-                    <div style="margin: 20px 0; padding: 15px; background-color: #f8f9fa; border-radius: 8px;">
+                    <div class="info-section">
                         <h3>🎯 Tính năng chính</h3>
                         <ul>
                             <li><strong>🤖 AI Vision:</strong> Trích xuất mô tả từ ảnh hóa đơn bằng Google Gemini Vision API</li>
@@ -453,20 +453,20 @@ def create_interface():
                         </ul>
                     </div>
                     
-                    <div style="margin: 20px 0; padding: 15px; background-color: #e8f4fd; border-radius: 8px;">
+                    <div class="example-section">
                         <h3>🔧 Công nghệ sử dụng</h3>
                         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                             <div>
-                                <h4>Machine Learning:</h4>
-                                <ul>
+                                <h4 style="color: #0d47a1;">Machine Learning:</h4>
+                                <ul style="color: #1565c0;">
                                     <li>scikit-learn</li>
                                     <li>sentence-transformers</li>
                                     <li>DEAP (Genetic Algorithm)</li>
                                 </ul>
                             </div>
                             <div>
-                                <h4>AI Vision:</h4>
-                                <ul>
+                                <h4 style="color: #0d47a1;">AI Vision:</h4>
+                                <ul style="color: #1565c0;">
                                     <li>Google Gemini Vision</li>
                                     <li>PIL (Image Processing)</li>
                                     <li>Gradio Interface</li>
@@ -475,9 +475,9 @@ def create_interface():
                         </div>
                     </div>
                     
-                    <div style="margin: 20px 0; padding: 15px; background-color: #fff8dc; border-radius: 8px;">
+                    <div class="success-section">
                         <h3>🚀 Hướng dẫn sử dụng</h3>
-                        <ol>
+                        <ol style="color: #155724;">
                             <li><strong>Training:</strong> Bắt đầu với tab "🚀 Model Training", click "Start Training" và đợi 10-15 phút</li>
                             <li><strong>Classification:</strong> Chuyển sang tab "🔮 Bill Classification"</li>
                             <li><strong>Upload ảnh:</strong> Kéo thả ảnh hóa đơn vào khung "Upload ảnh hóa đơn"</li>
@@ -488,9 +488,9 @@ def create_interface():
                         </ol>
                     </div>
                     
-                    <div style="margin: 20px 0; padding: 15px; background-color: #ffe6e6; border-radius: 8px;">
+                    <div class="warning-section">
                         <h3>⚠️ Lưu ý quan trọng</h3>
-                        <ul>
+                        <ul style="color: #856404;">
                             <li><strong>Google AI API:</strong> Để sử dụng tính năng trích xuất từ ảnh, cần thiết lập GOOGLE_AI_API_KEY trong environment variables</li>
                             <li><strong>Dataset:</strong> App cần file viet_receipt_categorized_label.xlsx để training</li>
                             <li><strong>Memory:</strong> Training có thể tốn nhiều RAM, nên dùng trên máy có đủ bộ nhớ</li>
@@ -498,7 +498,7 @@ def create_interface():
                         </ul>
                     </div>
                     
-                    <div style="text-align: center; margin-top: 30px; padding: 20px; background: linear-gradient(45deg, #667eea, #764ba2); color: white; border-radius: 8px;">
+                    <div style="text-align: center; margin-top: 30px; padding: 20px; background: linear-gradient(45deg, #2c3e50, #3498db); color: white; border-radius: 8px;">
                         <h3>🎉 Developed with ❤️ for Vietnamese NLP Community</h3>
                         <p>Powered by Hugging Face 🤗 | Google AI Studio | Gradio</p>
                     </div>