Initial commit: Vietnamese Sentiment Analysis App with Flask and Transformers

.dockerignore

@@ -0,0 +1,53 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+*.egg-info/
+dist/
+build/
+
+# Virtual environment
+venv/
+env/
+ENV/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Database (sẽ tạo mới trên server)
+*.db
+*.sqlite
+*.sqlite3
+
+# Git
+.git/
+.gitignore
+
+# Test results
+test_results.txt
+
+# Documentation
+TEST_CASES.md
+CHECKLIST_DEBAI.md
+debai.md
+
+# Model cache (sẽ tải lại trên server)
+transformers_cache/
+.cache/
+
+# Logs
+*.log
+
+# Other
+.env
+.env.local

Dockerfile

@@ -0,0 +1,40 @@
+# Sử dụng Python 3.11 slim image
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    TF_CPP_MIN_LOG_LEVEL=3 \
+    TRANSFORMERS_NO_TF=1 \
+    PORT=7860
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create directory for database
+RUN mkdir -p /app/data
+
+# Expose port for Hugging Face Spaces
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD curl -f http://localhost:7860/ || exit 1
+
+# Run the application
+CMD ["python", "run.py"]

README.md

@@ -0,0 +1,82 @@
+---
+title: Vietnamese Sentiment Analysis
+emoji: 🤖
+colorFrom: purple
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+---
+
+# 🤖 Trợ lý Phân loại Cảm xúc Tiếng Việt
+
+Ứng dụng web phân loại cảm xúc (tích cực, trung tính, tiêu cực) từ văn bản tiếng Việt sử dụng Transformer.
+
+## ✨ Tính năng
+
+- ✅ Phân loại cảm xúc tiếng Việt (POSITIVE, NEUTRAL, NEGATIVE)
+- ✅ Hỗ trợ văn bản viết tắt và thiếu dấu  
+- ✅ Lưu trữ lịch sử phân loại
+- ✅ Giao diện web thân thiện, responsive
+- ✅ Độ chính xác **90%** trên test cases
+
+## 🛠 Công nghệ
+
+- **Model**: XLM-RoBERTa (`cardiffnlp/twitter-xlm-roberta-base-sentiment`)
+- **Framework**: Flask + Hugging Face Transformers
+- **Pipeline**: sentiment-analysis (pre-trained, no fine-tuning needed)
+- **Database**: SQLite
+- **Text Processing**: Underthesea (Vietnamese tokenization)
+
+## 🚀 Cách sử dụng
+
+1. **Nhập câu tiếng Việt** vào ô văn bản
+2. **Nhấn nút "Phân loại Cảm xúc"**
+3. **Xem kết quả** với nhãn cảm xúc và độ tin cậy
+4. **Xem lịch sử** các câu đã phân loại
+
+## 📝 Ví dụ
+
+| Câu tiếng Việt | Kết quả |
+|----------------|---------|
+| "Hôm nay tôi rất vui" | 😊 POSITIVE |
+| "Món ăn này dở quá" | 😞 NEGATIVE |
+| "Thời tiết bình thường" | 😐 NEUTRAL |
+| "Phim này hay lắm" | 😊 POSITIVE |
+| "Tôi buồn vì thất bại" | 😞 NEGATIVE |
+
+## 🎯 Kiến trúc
+
+Ứng dụng theo kiến trúc 3 components:
+
+1. **Component 1 - Tiền xử lý**: 
+   - Chuẩn hóa văn bản tiếng Việt
+   - Xử lý từ viết tắt (rat → rất, ko → không...)
+   - Underthesea tokenization (optional)
+
+2. **Component 2 - Phân loại**:
+   - Transformers pipeline `sentiment-analysis`
+   - Model: XLM-RoBERTa multilingual
+
+3. **Component 3 - Post-processing**:
+   - Mapping nhãn về 3 loại (POSITIVE/NEUTRAL/NEGATIVE)
+   - Validation và lưu database
+
+## 📊 Hiệu suất
+
+- **Độ chính xác**: 90% (9/10 test cases)
+- **Model size**: ~1.1GB
+- **Inference time**: ~1-2s per sentence
+
+## 🎓 Dự án
+
+Đồ án môn học **Chuyên đề - Phân loại Cảm xúc Tiếng Việt** sử dụng Transformer.
+
+## 📄 License
+
+MIT License - Dự án học tập
+
+---
+
+**Phát triển bởi**: Sinh viên Chuyên đề NLP

app/__init__.py

@@ -0,0 +1,12 @@
+from flask import Flask
+import os
+
+def create_app():
+    app = Flask(__name__)
+    app.config['SECRET_KEY'] = 'vietnamese-sentiment-analysis-2025'
+    app.config['DATABASE'] = os.path.join(os.path.dirname(__file__), '..', 'sentiments.db')
+    
+    from app import routes
+    app.register_blueprint(routes.bp)
+    
+    return app

app/database.py

@@ -0,0 +1,51 @@
+import sqlite3
+from datetime import datetime
+from flask import current_app, g
+
+def get_db():
+    """Kết nối database SQLite"""
+    if 'db' not in g:
+        g.db = sqlite3.connect(
+            current_app.config['DATABASE'],
+            detect_types=sqlite3.PARSE_DECLTYPES
+        )
+        g.db.row_factory = sqlite3.Row
+    return g.db
+
+def close_db(e=None):
+    """Đóng kết nối database"""
+    db = g.pop('db', None)
+    if db is not None:
+        db.close()
+
+def init_db():
+    """Khởi tạo database"""
+    db = get_db()
+    db.execute('''
+        CREATE TABLE IF NOT EXISTS sentiments (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            text TEXT NOT NULL,
+            sentiment TEXT NOT NULL,
+            timestamp TEXT NOT NULL
+        )
+    ''')
+    db.commit()
+
+def save_sentiment(text, sentiment):
+    """Lưu kết quả phân loại vào database"""
+    db = get_db()
+    timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    db.execute(
+        'INSERT INTO sentiments (text, sentiment, timestamp) VALUES (?, ?, ?)',
+        (text, sentiment, timestamp)
+    )
+    db.commit()
+
+def get_history(limit=50):
+    """Lấy lịch sử phân loại"""
+    db = get_db()
+    history = db.execute(
+        'SELECT * FROM sentiments ORDER BY timestamp DESC LIMIT ?',
+        (limit,)
+    ).fetchall()
+    return history

app/nlp_processor.py

@@ -0,0 +1,122 @@
+import os
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
+os.environ['TRANSFORMERS_NO_TF'] = '1'
+
+from transformers import pipeline
+import re
+
+# Import Underthesea (tùy chọn theo đề bài)
+try:
+    from underthesea import word_tokenize
+    USE_UNDERTHESEA = True
+except ImportError:
+    USE_UNDERTHESEA = False
+    print("⚠️  Underthesea không được cài đặt, sẽ dùng chuẩn hóa cơ bản")
+
+class SentimentProcessor:
+    def __init__(self):
+        """Khởi tạo pipeline phân loại cảm xúc theo đề bài"""
+        print("\n🔄 Đang tải model Transformer...")
+        try:
+            # Sử dụng pipeline sentiment-analysis như đề bài yêu cầu
+            # Model: cardiffnlp/twitter-xlm-roberta-base-sentiment (multilingual, đã train sentiment)
+            self.classifier = pipeline(
+                "sentiment-analysis",
+                model="cardiffnlp/twitter-xlm-roberta-base-sentiment",  # Hỗ trợ đa ngôn ngữ, đã train sentiment
+                device=-1  # CPU
+            )
+            print("✅ Đã tải model XLM-RoBERTa Multilingual Sentiment")
+        except Exception as e:
+            print(f"❌ Lỗi khi tải model: {e}")
+            raise
+        
+        # Từ điển chuẩn hóa từ viết tắt
+        self.normalization_dict = {
+            'rat': 'rất',
+            'k': 'không',
+            'ko': 'không',
+            'hok': 'không',
+            'dc': 'được',
+            'dk': 'được',
+            'ms': 'mới',
+            'mk': 'mình',
+            'mik': 'mình',
+            'cx': 'cũng',
+            'j': 'gì',
+            'vs': 'với',
+            'tks': 'cảm ơn',
+            'thank': 'cảm ơn',
+        }
+    
+    def preprocess_text(self, text):
+        """Tiền xử lý văn bản theo đề bài"""
+        if not text or len(text.strip()) < 5:
+            raise ValueError("Câu quá ngắn hoặc rỗng")
+        
+        # Giới hạn độ dài ≤ 50 ký tự theo đề bài (Component 1: Tiền xử lý)
+        if len(text) > 50:
+            text = text[:50]
+        
+        # Loại bỏ khoảng trắng thừa
+        text = ' '.join(text.split())
+        
+        # Chuẩn hóa từ viết tắt (10-20 từ phổ biến theo đề bài)
+        words = text.lower().split()
+        normalized_words = [self.normalization_dict.get(word, word) for word in words]
+        text = ' '.join(normalized_words)
+        
+        # Tùy chọn: Dùng Underthesea để tokenize tiếng Việt
+        if USE_UNDERTHESEA:
+            try:
+                text = word_tokenize(text, format="text")
+            except:
+                pass  # Nếu lỗi thì dùng text gốc
+        
+        return text
+    
+    def classify_sentiment(self, text):
+        """Phân loại cảm xúc theo đề bài (Component 2 & 3)"""
+        try:
+            # Component 1: Tiền xử lý
+            processed_text = self.preprocess_text(text)
+            
+            # Component 2: Phân loại cảm xúc qua pipeline
+            result = self.classifier(processed_text)[0]
+            
+            # Chuẩn hóa nhãn về 3 loại theo đề bài
+            label = result['label'].upper()
+            score = result['score']
+            
+            # Mapping các nhãn khác nhau về POSITIVE, NEUTRAL, NEGATIVE
+            if 'POS' in label or 'LABEL_2' in label or '5' in label or '4' in label:
+                sentiment = 'POSITIVE'
+            elif 'NEG' in label or 'LABEL_0' in label or '1' in label or '2' in label:
+                sentiment = 'NEGATIVE'
+            else:
+                sentiment = 'NEUTRAL'
+            
+            # Component 3: Nếu xác suất < 0.5, trả về NEUTRAL mặc định theo đề bài
+            if score < 0.5:
+                sentiment = 'NEUTRAL'
+            
+            # Đầu ra dictionary theo đề bài (chỉ 2 trường bắt buộc)
+            return {
+                'text': text,
+                'sentiment': sentiment,
+                'score': round(score, 2)  # Thêm score để hiển thị
+            }
+            
+        except ValueError as e:
+            raise e
+        except Exception as e:
+            raise Exception(f"Lỗi khi phân loại: {str(e)}")
+
+# Khởi tạo processor toàn cục (cache để tái sử dụng)
+_processor = None
+
+def get_processor():
+    """Lấy processor (singleton pattern)"""
+    global _processor
+    if _processor is None:
+        _processor = SentimentProcessor()
+    return _processor

app/routes.py

@@ -0,0 +1,73 @@
+from flask import Blueprint, render_template, request, jsonify, g
+from app.database import init_db, save_sentiment, get_history, close_db
+from app.nlp_processor import get_processor
+
+bp = Blueprint('main', __name__)
+
+# Đóng database sau mỗi request
+@bp.teardown_app_request
+def teardown_db(error):
+    close_db(error)
+
+@bp.route('/')
+def index():
+    """Trang chủ"""
+    # Khởi tạo database nếu chưa có
+    init_db()
+    return render_template('index.html')
+
+@bp.route('/analyze', methods=['POST'])
+def analyze():
+    """API phân loại cảm xúc"""
+    try:
+        data = request.get_json()
+        text = data.get('text', '').strip()
+        
+        if not text:
+            return jsonify({'error': 'Vui lòng nhập câu cần phân loại'}), 400
+        
+        if len(text) < 5:
+            return jsonify({'error': 'Câu quá ngắn, vui lòng nhập ít nhất 5 ký tự'}), 400
+        
+        # Phân loại cảm xúc
+        processor = get_processor()
+        result = processor.classify_sentiment(text)
+        
+        # Lưu vào database
+        save_sentiment(result['text'], result['sentiment'])
+        
+        # Trả về kết quả
+        return jsonify({
+            'success': True,
+            'result': result
+        })
+        
+    except ValueError as e:
+        return jsonify({'error': str(e)}), 400
+    except Exception as e:
+        return jsonify({'error': f'Đã xảy ra lỗi: {str(e)}'}), 500
+
+@bp.route('/history')
+def history():
+    """API lấy lịch sử phân loại"""
+    try:
+        limit = request.args.get('limit', 50, type=int)
+        history_data = get_history(limit)
+        
+        # Chuyển đổi sang dictionary
+        results = []
+        for row in history_data:
+            results.append({
+                'id': row['id'],
+                'text': row['text'],
+                'sentiment': row['sentiment'],
+                'timestamp': row['timestamp']
+            })
+        
+        return jsonify({
+            'success': True,
+            'history': results
+        })
+        
+    except Exception as e:
+        return jsonify({'error': f'Đã xảy ra lỗi: {str(e)}'}), 500

app/static/css/style.css

@@ -0,0 +1,319 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    color: white;
+    margin-bottom: 40px;
+}
+
+header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.subtitle {
+    font-size: 1.1em;
+    opacity: 0.9;
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    margin-bottom: 30px;
+}
+
+.card h2 {
+    color: #667eea;
+    margin-bottom: 20px;
+    font-size: 1.5em;
+}
+
+/* Input Section */
+.input-section textarea {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 16px;
+    font-family: inherit;
+    resize: vertical;
+    margin-bottom: 15px;
+    transition: border-color 0.3s;
+}
+
+.input-section textarea:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.btn {
+    padding: 12px 30px;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    width: 100%;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+.btn-secondary {
+    background: #f0f0f0;
+    color: #666;
+    padding: 8px 16px;
+    font-size: 14px;
+}
+
+.btn-secondary:hover {
+    background: #e0e0e0;
+}
+
+.loading {
+    text-align: center;
+    margin-top: 15px;
+    color: #667eea;
+    font-weight: 600;
+}
+
+/* Result Section */
+.result-section {
+    animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.result-content {
+    text-align: center;
+}
+
+.sentiment-badge {
+    display: inline-block;
+    padding: 15px 40px;
+    border-radius: 50px;
+    font-size: 1.3em;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.sentiment-positive {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+    color: white;
+}
+
+.sentiment-negative {
+    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
+    color: white;
+}
+
+.sentiment-neutral {
+    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
+    color: white;
+}
+
+.analyzed-text {
+    font-size: 1.1em;
+    color: #666;
+    margin-bottom: 10px;
+    font-style: italic;
+}
+
+.confidence-score {
+    color: #999;
+    font-size: 0.9em;
+}
+
+/* History Section */
+.history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.history-list {
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+.history-item {
+    padding: 15px;
+    border-left: 4px solid #667eea;
+    background: #f8f9fa;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    transition: all 0.3s;
+}
+
+.history-item:hover {
+    background: #e9ecef;
+    transform: translateX(5px);
+}
+
+.history-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.history-sentiment {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.85em;
+    font-weight: 600;
+}
+
+.history-timestamp {
+    color: #999;
+    font-size: 0.85em;
+}
+
+.history-text {
+    color: #555;
+    line-height: 1.5;
+}
+
+.empty-message {
+    text-align: center;
+    color: #999;
+    padding: 40px;
+}
+
+/* Popup */
+.popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.popup-content {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    max-width: 500px;
+    position: relative;
+    animation: slideDown 0.3s;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.popup-close {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    font-size: 28px;
+    cursor: pointer;
+    color: #999;
+}
+
+.popup-close:hover {
+    color: #333;
+}
+
+#popupMessage {
+    font-size: 1.1em;
+    color: #666;
+    margin-top: 10px;
+}
+
+footer {
+    text-align: center;
+    color: white;
+    margin-top: 40px;
+    opacity: 0.9;
+}
+
+/* Scrollbar styling */
+.history-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.history-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.history-list::-webkit-scrollbar-thumb {
+    background: #667eea;
+    border-radius: 4px;
+}
+
+.history-list::-webkit-scrollbar-thumb:hover {
+    background: #5568d3;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 1.8em;
+    }
+    
+    .card {
+        padding: 20px;
+    }
+    
+    .history-header {
+        flex-direction: column;
+        gap: 10px;
+    }
+}

app/static/js/main.js

@@ -0,0 +1,169 @@
+// Khởi tạo khi trang load
+document.addEventListener('DOMContentLoaded', function() {
+    loadHistory();
+    
+    // Event listeners
+    document.getElementById('analyzeBtn').addEventListener('click', analyzeSentiment);
+    document.getElementById('refreshBtn').addEventListener('click', loadHistory);
+    document.querySelector('.popup-close').addEventListener('click', closePopup);
+    
+    // Enter key để phân tích
+    document.getElementById('inputText').addEventListener('keypress', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            analyzeSentiment();
+        }
+    });
+});
+
+// Hàm phân loại cảm xúc
+async function analyzeSentiment() {
+    const inputText = document.getElementById('inputText').value.trim();
+    const loading = document.getElementById('loading');
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    
+    // Validate input
+    if (!inputText) {
+        showPopup('Vui lòng nhập câu cần phân loại!');
+        return;
+    }
+    
+    if (inputText.length < 5) {
+        showPopup('Câu quá ngắn! Vui lòng nhập ít nhất 5 ký tự.');
+        return;
+    }
+    
+    // Show loading
+    loading.style.display = 'block';
+    analyzeBtn.disabled = true;
+    
+    try {
+        const response = await fetch('/analyze', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ text: inputText })
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            displayResult(data.result);
+            loadHistory(); // Refresh history
+            document.getElementById('inputText').value = ''; // Clear input
+        } else {
+            showPopup(data.error || 'Đã xảy ra lỗi khi phân loại');
+        }
+        
+    } catch (error) {
+        showPopup('Không thể kết nối đến server. Vui lòng thử lại!');
+        console.error('Error:', error);
+    } finally {
+        loading.style.display = 'none';
+        analyzeBtn.disabled = false;
+    }
+}
+
+// Hiển thị kết quả phân loại
+function displayResult(result) {
+    const resultSection = document.getElementById('resultSection');
+    const sentimentBadge = document.getElementById('sentimentBadge');
+    const analyzedText = document.getElementById('analyzedText');
+    const confidenceScore = document.getElementById('confidenceScore');
+    
+    // Map sentiment to Vietnamese
+    const sentimentMap = {
+        'POSITIVE': { text: '😊 Tích cực', class: 'sentiment-positive' },
+        'NEGATIVE': { text: '😞 Tiêu cực', class: 'sentiment-negative' },
+        'NEUTRAL': { text: '😐 Trung tính', class: 'sentiment-neutral' }
+    };
+    
+    const sentiment = sentimentMap[result.sentiment] || sentimentMap['NEUTRAL'];
+    
+    // Update badge
+    sentimentBadge.textContent = sentiment.text;
+    sentimentBadge.className = 'sentiment-badge ' + sentiment.class;
+    
+    // Update text
+    analyzedText.textContent = `"${result.text}"`;
+    
+    // Update confidence
+    if (result.score) {
+        confidenceScore.textContent = `Độ tin cậy: ${(result.score * 100).toFixed(0)}%`;
+    } else {
+        confidenceScore.textContent = '';
+    }
+    
+    // Show result section
+    resultSection.style.display = 'block';
+    
+    // Scroll to result
+    resultSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+// Load lịch sử phân loại
+async function loadHistory() {
+    const historyList = document.getElementById('historyList');
+    
+    try {
+        const response = await fetch('/history');
+        const data = await response.json();
+        
+        if (data.success && data.history.length > 0) {
+            historyList.innerHTML = data.history.map(item => createHistoryItem(item)).join('');
+        } else {
+            historyList.innerHTML = '<p class="empty-message">Chưa có lịch sử phân loại</p>';
+        }
+        
+    } catch (error) {
+        console.error('Error loading history:', error);
+        historyList.innerHTML = '<p class="empty-message">Không thể tải lịch sử</p>';
+    }
+}
+
+// Tạo HTML cho item lịch sử
+function createHistoryItem(item) {
+    const sentimentMap = {
+        'POSITIVE': { text: 'Tích cực', class: 'sentiment-positive' },
+        'NEGATIVE': { text: 'Tiêu cực', class: 'sentiment-negative' },
+        'NEUTRAL': { text: 'Trung tính', class: 'sentiment-neutral' }
+    };
+    
+    const sentiment = sentimentMap[item.sentiment] || sentimentMap['NEUTRAL'];
+    
+    return `
+        <div class="history-item">
+            <div class="history-item-header">
+                <span class="history-sentiment ${sentiment.class}">${sentiment.text}</span>
+                <span class="history-timestamp">${item.timestamp}</span>
+            </div>
+            <div class="history-text">${item.text}</div>
+        </div>
+    `;
+}
+
+// Hiển thị popup thông báo
+function showPopup(message) {
+    const popup = document.getElementById('popup');
+    const popupMessage = document.getElementById('popupMessage');
+    
+    popupMessage.textContent = message;
+    popup.style.display = 'flex';
+    
+    // Auto close after 3 seconds
+    setTimeout(closePopup, 3000);
+}
+
+// Đóng popup
+function closePopup() {
+    document.getElementById('popup').style.display = 'none';
+}
+
+// Close popup when clicking outside
+window.addEventListener('click', function(e) {
+    const popup = document.getElementById('popup');
+    if (e.target === popup) {
+        closePopup();
+    }
+});

app/templates/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trợ lý Phân loại Cảm xúc Tiếng Việt</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🤖 Trợ lý Phân loại Cảm xúc Tiếng Việt</h1>
+            <p class="subtitle">Sử dụng Transformer để phân tích cảm xúc từ văn bản tiếng Việt</p>
+        </header>
+
+        <main>
+            <!-- Khu vực nhập liệu -->
+            <section class="input-section">
+                <div class="card">
+                    <h2>Nhập câu cần phân tích</h2>
+                    <textarea 
+                        id="inputText" 
+                        placeholder="Ví dụ: Hôm nay tôi rất vui..."
+                        rows="4"
+                    ></textarea>
+                    <button id="analyzeBtn" class="btn btn-primary">
+                        Phân loại Cảm xúc
+                    </button>
+                    <div id="loading" class="loading" style="display: none;">
+                        <span>Đang xử lý...</span>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Khu vực hiển thị kết quả -->
+            <section class="result-section" id="resultSection" style="display: none;">
+                <div class="card result-card">
+                    <h2>Kết quả phân tích</h2>
+                    <div class="result-content">
+                        <div class="sentiment-badge" id="sentimentBadge"></div>
+                        <p class="analyzed-text" id="analyzedText"></p>
+                        <p class="confidence-score" id="confidenceScore"></p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Lịch sử phân loại -->
+            <section class="history-section">
+                <div class="card">
+                    <div class="history-header">
+                        <h2>Lịch sử phân loại</h2>
+                        <button id="refreshBtn" class="btn btn-secondary">
+                            🔄 Làm mới
+                        </button>
+                    </div>
+                    <div id="historyList" class="history-list">
+                        <p class="empty-message">Chưa có lịch sử phân loại</p>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Đồ án Chuyên đề - Phân loại Cảm xúc Tiếng Việt</p>
+        </footer>
+    </div>
+
+    <!-- Popup thông báo -->
+    <div id="popup" class="popup" style="display: none;">
+        <div class="popup-content">
+            <span class="popup-close">&times;</span>
+            <p id="popupMessage"></p>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+transformers==4.35.0
+torch==2.1.0
+Werkzeug==3.0.1
+underthesea==6.7.0

run.py

@@ -0,0 +1,21 @@
+import os
+
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
+os.environ['TRANSFORMERS_NO_TF'] = '1'
+
+from app import create_app
+
+app = create_app()
+
+if __name__ == '__main__':
+    # Lấy port từ environment variable (cho Hugging Face Spaces) hoặc mặc định 5000
+    port = int(os.environ.get('PORT', 5000))
+    
+    print("\n" + "="*50)
+    print("🚀 Ứng dụng Phân loại Cảm xúc Tiếng Việt")
+    print("="*50)
+    print(f"📍 URL: http://localhost:{port}")
+    print("⚠️  Lần đầu chạy sẽ mất 10-30 giây để tải model...")
+    print("="*50 + "\n")
+    
+    app.run(debug=False, host='0.0.0.0', port=port, use_reloader=False)