Upload 10 files

app.py

@@ -1,11 +1,31 @@
 import os
 import torch
 from transformers import AutoTokenizer
-from flask import Flask, request, jsonify, render_template
+from flask import Flask, request, jsonify, render_template, redirect, url_for, flash
+from flask_login import LoginManager, login_user, logout_user, login_required, current_user
+from models import db, User, Feedback
+from forms import RegistrationForm, LoginForm
 from PhoBERTMultiTask import PhoBERTMultiTask
 
 app = Flask(__name__)
 
+# Cấu hình
+app.config['SECRET_KEY'] = 'your-secret-key-change-this-in-production'
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///feedback_analysis.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+# Khởi tạo extensions
+db.init_app(app)
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+login_manager.login_message = 'Vui lòng đăng nhập để sử dụng hệ thống phân tích feedback.'
+login_manager.login_message_category = 'info'
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
 # === Load tokenizer & model ===
@@ -27,14 +47,93 @@ print("✅ Model đã sẵn sàng!")
 
 # ====== ROUTES ======
 @app.route("/", methods=["GET"])
+@login_required
 def home():
     return render_template("index.html")
 
+@app.route("/register", methods=["GET", "POST"])
+def register():
+    if current_user.is_authenticated:
+        return redirect(url_for('home'))
+    
+    form = RegistrationForm()
+    if form.validate_on_submit():
+        user = User(username=form.username.data)
+        user.set_password(form.password.data)
+        db.session.add(user)
+        db.session.commit()
+        flash('Đăng ký thành công! Vui lòng đăng nhập.', 'success')
+        return redirect(url_for('login'))
+    
+    return render_template('register.html', form=form)
+
+@app.route("/login", methods=["GET", "POST"])
+def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('home'))
+    
+    form = LoginForm()
+    if form.validate_on_submit():
+        user = User.query.filter_by(username=form.username.data).first()
+        if user and user.check_password(form.password.data):
+            login_user(user, remember=True)
+            flash('Đăng nhập thành công!', 'success')
+            next_page = request.args.get('next')
+            return redirect(next_page) if next_page else redirect(url_for('home'))
+        else:
+            flash('Tên đăng nhập hoặc mật khẩu không đúng.', 'danger')
+    
+    return render_template('login.html', form=form)
+
+@app.route("/logout")
+@login_required
+def logout():
+    logout_user()
+    flash('Đã đăng xuất thành công!', 'info')
+    return redirect(url_for('home'))
+
 @app.route("/api/health", methods=["GET"])
 def health():
     return jsonify({"status": "healthy", "message": "✅ PhoBERT MultiTask API is running!"})
 
+@app.route("/api/feedback-history", methods=["GET"])
+@login_required
+def get_feedback_history():
+    """Lấy lịch sử feedback của user hiện tại"""
+    try:
+        page = request.args.get('page', 1, type=int)
+        per_page = request.args.get('per_page', 10, type=int)
+        
+        # Lấy feedback của user hiện tại, sắp xếp theo thời gian mới nhất
+        feedbacks = Feedback.query.filter_by(user_id=current_user.id)\
+                                 .order_by(Feedback.created_at.desc())\
+                                 .paginate(page=page, per_page=per_page, error_out=False)
+        
+        feedback_list = []
+        for feedback in feedbacks.items:
+            feedback_list.append({
+                'id': feedback.id,
+                'text': feedback.text,
+                'sentiment': feedback.sentiment,
+                'topic': feedback.topic,
+                'sentiment_confidence': feedback.sentiment_confidence,
+                'topic_confidence': feedback.topic_confidence,
+                'created_at': feedback.created_at.isoformat()
+            })
+        
+        return jsonify({
+            'feedbacks': feedback_list,
+            'total': feedbacks.total,
+            'pages': feedbacks.pages,
+            'current_page': page,
+            'has_next': feedbacks.has_next,
+            'has_prev': feedbacks.has_prev
+        })
+    except Exception as e:
+        return jsonify({"error": f"Có lỗi xảy ra: {str(e)}"}), 500
+
 @app.route("/predict", methods=["POST"])
+@login_required
 def predict():
     try:
         data = request.get_json()
@@ -59,21 +158,47 @@ def predict():
             topic = torch.argmax(logits_topic, dim=1).item()
 
         # Mapping
-        sent_map = {0: "negative", 1: "neutral", 2: "positive"}
-        topic_map = {0: "lecturer", 1: "training_program", 2: "facility", 3: "others"}
+        SENTIMENT_MAP = {0: "negative", 1: "neutral", 2: "positive"}
+        TOPIC_MAP = {0: "lecturer", 1: "training_program", 2: "facility", 3: "others"}
+        
+        sentiment = SENTIMENT_MAP[sent]
+        topic_result = TOPIC_MAP[topic]
+        sentiment_confidence = float(torch.softmax(logits_sent, dim=1).max().item())
+        topic_confidence = float(torch.softmax(logits_topic, dim=1).max().item())
+
+        # Lưu feedback vào database
+        try:
+            feedback = Feedback(
+                text=text,
+                sentiment=sentiment,
+                topic=topic_result,
+                sentiment_confidence=sentiment_confidence,
+                topic_confidence=topic_confidence,
+                user_id=current_user.id
+            )
+            db.session.add(feedback)
+            db.session.commit()
+        except Exception as db_error:
+            print(f"Database error: {db_error}")
+            # Không dừng quá trình nếu lưu DB thất bại
 
         return jsonify({
-            "sentiment": sent_map[sent],
-            "topic": topic_map[topic],
+            "sentiment": sentiment,
+            "topic": topic_result,
             "confidence": {
-                "sentiment": float(torch.softmax(logits_sent, dim=1).max().item()),
-                "topic": float(torch.softmax(logits_topic, dim=1).max().item())
+                "sentiment": sentiment_confidence,
+                "topic": topic_confidence
             }
         })
     except Exception as e:
         return jsonify({"error": f"Có lỗi xảy ra khi xử lý: {str(e)}"}), 500
 
 
+# Khởi tạo database
+with app.app_context():
+    db.create_all()
+    print("✅ Database đã sẵn sàng!")
+
 if __name__ == "__main__":
     # Hugging Face luôn yêu cầu port = 7860
-    app.run(host="0.0.0.0", port=7860)
+    app.run(host="0.0.0.0", port=7860, debug=True)

forms.py

@@ -0,0 +1,46 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, SubmitField, TextAreaField
+from wtforms.validators import DataRequired, Length, EqualTo, ValidationError
+from models import User
+
+class RegistrationForm(FlaskForm):
+    username = StringField('Tên đăng nhập', validators=[
+        DataRequired(message='Vui lòng nhập tên đăng nhập'),
+        Length(min=3, max=20, message='Tên đăng nhập phải từ 3-20 ký tự')
+    ])
+    
+    password = PasswordField('Mật khẩu', validators=[
+        DataRequired(message='Vui lòng nhập mật khẩu'),
+        Length(min=6, message='Mật khẩu phải có ít nhất 6 ký tự')
+    ])
+    
+    confirm_password = PasswordField('Xác nhận mật khẩu', validators=[
+        DataRequired(message='Vui lòng xác nhận mật khẩu'),
+        EqualTo('password', message='Mật khẩu xác nhận không khớp')
+    ])
+    
+    submit = SubmitField('Đăng ký')
+    
+    def validate_username(self, username):
+        user = User.query.filter_by(username=username.data).first()
+        if user:
+            raise ValidationError('Tên đăng nhập đã tồn tại. Vui lòng chọn tên khác.')
+
+class LoginForm(FlaskForm):
+    username = StringField('Tên đăng nhập', validators=[
+        DataRequired(message='Vui lòng nhập tên đăng nhập')
+    ])
+    
+    password = PasswordField('Mật khẩu', validators=[
+        DataRequired(message='Vui lòng nhập mật khẩu')
+    ])
+    
+    submit = SubmitField('Đăng nhập')
+
+class FeedbackForm(FlaskForm):
+    text = TextAreaField('Feedback của bạn', validators=[
+        DataRequired(message='Vui lòng nhập feedback'),
+        Length(min=10, max=1000, message='Feedback phải từ 10-1000 ký tự')
+    ])
+    
+    submit = SubmitField('Phân Tích Feedback')

models.py

@@ -0,0 +1,43 @@
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+from datetime import datetime
+import bcrypt
+
+db = SQLAlchemy()
+
+class User(UserMixin, db.Model):
+    __tablename__ = 'users'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    # Relationship với feedbacks
+    feedbacks = db.relationship('Feedback', backref='user', lazy=True)
+    
+    def set_password(self, password):
+        """Hash và lưu password"""
+        self.password_hash = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
+    
+    def check_password(self, password):
+        """Kiểm tra password"""
+        return bcrypt.checkpw(password.encode('utf-8'), self.password_hash.encode('utf-8'))
+    
+    def __repr__(self):
+        return f'<User {self.username}>'
+
+class Feedback(db.Model):
+    __tablename__ = 'feedbacks'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    text = db.Column(db.Text, nullable=False)
+    sentiment = db.Column(db.String(20), nullable=False)  # positive, neutral, negative
+    topic = db.Column(db.String(50), nullable=False)      # lecturer, training_program, facility, others
+    sentiment_confidence = db.Column(db.Float, nullable=False)
+    topic_confidence = db.Column(db.Float, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)  # Bắt buộc vì đã login_required
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    def __repr__(self):
+        return f'<Feedback {self.id}: {self.sentiment} - {self.topic}>'

requirements.txt

@@ -8,3 +8,9 @@ gunicorn
 numpy
 requests
 safetensors
+Flask-SQLAlchemy==3.1.1
+Flask-Login==0.6.3
+Flask-WTF==1.2.1
+WTForms==3.1.2
+Werkzeug==3.0.3
+bcrypt==4.1.3

static/css/style.css

@@ -71,10 +71,9 @@ header {
     color: #FFFFFF !important;
     border-radius: 16px;
     margin: 0 0 1.5rem 0;
-    padding: 1.5rem 2rem 1.5rem 0;
+    padding: 1.5rem 2rem;
     position: relative;
     overflow: hidden;
-    text-align: center;
 }
 
 /* Force header color consistency */
@@ -151,8 +150,8 @@ header p.lead {
 }
 
 .card:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 20px 60px rgba(168, 200, 236, 0.25), 0 8px 32px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px) scale(1.01);
+    box-shadow: 0 8px 25px rgba(168, 200, 236, 0.15), 0 4px 16px rgba(0, 0, 0, 0.05);
 }
 
 .card:hover::before {
@@ -176,16 +175,16 @@ header p.lead {
 
 /* Forms */
 .form-control {
-    border-radius: 12px;
-    border: 2px solid var(--gray-300);
-    padding: 1.25rem 1.5rem;
-    font-size: 1rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 8px;
+    border: 1px solid var(--gray-300);
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
     background: var(--white);
     color: var(--gray-900);
     position: relative;
-    box-shadow: 0 4px 15px rgba(168, 200, 236, 0.08);
-    min-height: 120px;
+    box-shadow: 0 2px 8px rgba(168, 200, 236, 0.05);
+    min-height: 45px;
     width: 100%;
 }
 
@@ -200,16 +199,12 @@ header p.lead {
     margin-bottom: 0.5rem;
 }
 
-#feedbackForm .mb-3 {
-    margin-bottom: 0.75rem !important;
-}
-
 .form-control:focus {
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 4px rgba(168, 200, 236, 0.15), 0 8px 25px rgba(168, 200, 236, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 2px rgba(168, 200, 236, 0.1), 0 2px 8px rgba(168, 200, 236, 0.1);
     background: var(--white);
     outline: none;
-    transform: translateY(-2px);
+    transform: none;
 }
 
 .form-control:focus + .form-label,
@@ -370,6 +365,53 @@ body .card-header.bg-light {
     font-size: 0.9rem;
 }
 
+/* Header Buttons */
+header .btn-outline-light {
+    border-color: rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+header .btn-outline-light:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: #FFFFFF;
+    color: #FFFFFF;
+    transform: translateY(-2px);
+}
+
+header .btn-light {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: var(--gray-700);
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+header .btn-light:hover {
+    background-color: #FFFFFF;
+    color: var(--gray-800);
+    transform: translateY(-2px);
+}
+
+/* Dropdown Menu */
+.dropdown-menu {
+    border-radius: 12px;
+    border: 1px solid var(--gray-200);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    margin-top: 0.5rem;
+}
+
+.dropdown-item {
+    padding: 0.75rem 1rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.dropdown-item:hover {
+    background-color: var(--gray-100);
+    color: var(--gray-800);
+}
+
 /* Components */
 .spinner-border {
     width: 3rem;
@@ -381,6 +423,12 @@ body .card-header.bg-light {
     border: 1px solid var(--gray-200);
     padding: 1rem 1.5rem;
     background: var(--white);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+
+.alert.fade-out {
+    opacity: 0;
+    transform: translateY(-10px);
 }
 
 blockquote {

static/js/app.js

@@ -71,37 +71,12 @@ document.addEventListener('DOMContentLoaded', function() {
     const examples = [
         "Giảng viên giảng bài rất hay và dễ hiểu, sinh viên rất thích",
         "Thầy cô rất nhiệt tình và hỗ trợ sinh viên học tập tốt",
-        "Giảng viên có kiến thức sâu rộng và phương pháp dạy hiệu quả",
-        "Thầy cô rất tận tâm và luôn sẵn sàng giải đáp thắc mắc",
-        "Phong cách giảng dạy của giảng viên rất thu hút và dễ hiểu",
         "Chương trình học rất phù hợp và bổ ích cho sinh viên",
-        "Nội dung môn học rất thực tế và có tính ứng dụng cao",
-        "Cấu trúc chương trình học rất logic và dễ theo dõi",
-        "Môn học này giúp sinh viên phát triển kỹ năng tốt",
-        "Chương trình đào tạo rất toàn diện và chất lượng",
         "Cơ sở vật chất rất hiện đại và đầy đủ tiện nghi",
-        "Phòng học rộng rãi, thoáng mát và có đầy đủ thiết bị",
-        "Thư viện rất đẹp và có nhiều tài liệu hữu ích",
-        "Khuôn viên trường rất đẹp và môi trường học tập tốt",
-        "Phòng thực hành được trang bị đầy đủ và hiện đại",
         "Giảng viên giảng bài quá nhanh và khó hiểu",
-        "Thầy cô không nhiệt tình và ít quan tâm đến sinh viên",
-        "Phương pháp dạy của giảng viên rất nhàm chán",
-        "Giảng viên không sẵn sàng giải đáp thắc mắc của sinh viên",
-        "Thầy cô có thái độ không tốt với sinh viên",
         "Chương trình học quá khó và không phù hợp với sinh viên",
-        "Nội dung môn học quá lý thuyết và thiếu thực hành",
-        "Cấu trúc chương trình rối rắm và khó theo dõi",
-        "Môn học này không có tính ứng dụng thực tế",
-        "Chương trình đào tạo quá nặng và áp lực",
         "Phòng học quá nóng và không có điều hòa, rất khó chịu",
-        "Cơ sở vật chất cũ kỹ và thiếu thiết bị cần thiết",
-        "Thư viện quá nhỏ và thiếu chỗ ngồi",
-        "Khuôn viên trường không được bảo trì tốt",
-        "Phòng thực hành thiếu thiết bị và không đảm bảo an toàn",
-        "Môn học này có nội dung bình thường, không có gì đặc biệt",
-        "Giảng viên dạy ổn, không có gì nổi bật",
-        "Chương trình học có thể chấp nhận được"
+        "Môn học này có nội dung bình thường, không có gì đặc biệt"
     ];
 
     // Utility Functions
@@ -132,12 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
             elements.textarea.value = '';
             elements.results.style.display = 'none';
             elements.errorMessage.style.display = 'none';
-            
-            const charCount = document.getElementById('charCount');
-            const charCounter = document.querySelector('.form-text');
-            
-            if (charCount) charCount.textContent = '0';
-            if (charCounter) charCounter.style.color = '#6c757d';
+            this.updateCharCounter();
         },
 
         updateResult(type, value) {
@@ -209,6 +179,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 elements.results.style.display = 'block';
                 elements.results.classList.add('fade-in');
                 utils.scrollToResults();
+                
+                // Reload feedback history after successful analysis
+                loadFeedbackHistory(1);
             } else {
                 utils.showError(data.error || 'Có lỗi xảy ra khi phân tích feedback!');
             }
@@ -239,23 +212,24 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Dynamic Button Creation
-    function createButton(text, icon, className, onClick) {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = className;
-        btn.innerHTML = `<i class="fas ${icon} me-2"></i>${text}`;
-        btn.onclick = onClick;
-        return btn;
-    }
-
-    // Add buttons container
+    // Add utility buttons
     const buttonContainer = document.createElement('div');
     buttonContainer.className = 'd-flex justify-content-center gap-2 mt-3';
     
-    buttonContainer.appendChild(createButton('Xóa Form', 'fa-trash', 'btn btn-outline-secondary', utils.clearForm));
-    buttonContainer.appendChild(createButton('Ví Dụ', 'fa-lightbulb', 'btn btn-outline-info', showExamples));
+    const clearBtn = document.createElement('button');
+    clearBtn.type = 'button';
+    clearBtn.className = 'btn btn-outline-secondary';
+    clearBtn.innerHTML = '<i class="fas fa-trash me-2"></i>Xóa Form';
+    clearBtn.onclick = () => utils.clearForm();
+    
+    const exampleBtn = document.createElement('button');
+    exampleBtn.type = 'button';
+    exampleBtn.className = 'btn btn-outline-info';
+    exampleBtn.innerHTML = '<i class="fas fa-lightbulb me-2"></i>Ví Dụ';
+    exampleBtn.onclick = showExamples;
     
+    buttonContainer.appendChild(clearBtn);
+    buttonContainer.appendChild(exampleBtn);
     elements.form.appendChild(buttonContainer);
 
     // Add character counter
@@ -263,4 +237,142 @@ document.addEventListener('DOMContentLoaded', function() {
     charCounter.className = 'form-text text-muted';
     charCounter.innerHTML = '<i class="fas fa-info-circle me-1"></i>Độ dài: <span id="charCount">0</span> ký tự';
     elements.textarea.parentNode.appendChild(charCounter);
-});
+
+    // Load feedback history
+    loadFeedbackHistory();
+});
+
+// Feedback History Functions
+let currentPage = 1;
+const itemsPerPage = 5;
+
+async function loadFeedbackHistory(page = 1) {
+    const historyLoading = document.getElementById('historyLoading');
+    const historyContent = document.getElementById('historyContent');
+    const historyPagination = document.getElementById('historyPagination');
+    
+    historyLoading.style.display = 'block';
+    historyContent.innerHTML = '';
+    historyPagination.innerHTML = '';
+    
+    try {
+        const response = await fetch(`/api/feedback-history?page=${page}&per_page=${itemsPerPage}`);
+        const data = await response.json();
+        
+        if (response.ok) {
+            displayFeedbackHistory(data.feedbacks);
+            displayPagination(data, page);
+        } else {
+            historyContent.innerHTML = '<p class="text-muted text-center">Không thể tải lịch sử feedback.</p>';
+        }
+    } catch (error) {
+        console.error('Error loading feedback history:', error);
+        historyContent.innerHTML = '<p class="text-muted text-center">Có lỗi xảy ra khi tải lịch sử.</p>';
+    } finally {
+        historyLoading.style.display = 'none';
+    }
+}
+
+function displayFeedbackHistory(feedbacks) {
+    const historyContent = document.getElementById('historyContent');
+    
+    if (feedbacks.length === 0) {
+        historyContent.innerHTML = '<p class="text-muted text-center">Chưa có feedback nào. Hãy phân tích feedback đầu tiên!</p>';
+        return;
+    }
+    
+    let html = '';
+    feedbacks.forEach(feedback => {
+        const sentimentConfig = getSentimentConfig(feedback.sentiment);
+        const topicConfig = getTopicConfig(feedback.topic);
+        const date = new Date(feedback.created_at).toLocaleString('vi-VN');
+        
+        html += `
+            <div class="card mb-3 border-start border-4 border-${getSentimentColor(feedback.sentiment)}">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-8">
+                            <p class="card-text">${feedback.text}</p>
+                            <small class="text-muted">
+                                <i class="fas fa-clock me-1"></i>${date}
+                            </small>
+                        </div>
+                        <div class="col-md-4 text-end">
+                            <div class="mb-2">
+                                <span class="badge bg-${getSentimentColor(feedback.sentiment)} me-2">
+                                    <i class="fas ${sentimentConfig.icon} me-1"></i>
+                                    ${sentimentConfig.label}
+                                </span>
+                                <span class="badge bg-secondary">
+                                    <i class="fas ${topicConfig.icon} me-1"></i>
+                                    ${topicConfig.label}
+                                </span>
+                            </div>
+                            <div class="small text-muted">
+                                <div>Tin cậy: ${(feedback.sentiment_confidence * 100).toFixed(1)}%</div>
+                                <div>Chủ đề: ${(feedback.topic_confidence * 100).toFixed(1)}%</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+    
+    historyContent.innerHTML = html;
+}
+
+function displayPagination(data, currentPage) {
+    const historyPagination = document.getElementById('historyPagination');
+    
+    if (data.pages <= 1) return;
+    
+    let html = '<nav><ul class="pagination pagination-sm">';
+    
+    // Previous button
+    if (data.has_prev) {
+        html += `<li class="page-item"><a class="page-link" href="#" onclick="loadFeedbackHistory(${currentPage - 1})">Trước</a></li>`;
+    }
+    
+    // Page numbers
+    for (let i = 1; i <= data.pages; i++) {
+        const active = i === currentPage ? 'active' : '';
+        html += `<li class="page-item ${active}"><a class="page-link" href="#" onclick="loadFeedbackHistory(${i})">${i}</a></li>`;
+    }
+    
+    // Next button
+    if (data.has_next) {
+        html += `<li class="page-item"><a class="page-link" href="#" onclick="loadFeedbackHistory(${currentPage + 1})">Sau</a></li>`;
+    }
+    
+    html += '</ul></nav>';
+    historyPagination.innerHTML = html;
+}
+
+function getSentimentConfig(sentiment) {
+    const configs = {
+        positive: { icon: 'fa-smile', label: 'Tích Cực' },
+        neutral: { icon: 'fa-meh', label: 'Trung Tính' },
+        negative: { icon: 'fa-frown', label: 'Tiêu Cực' }
+    };
+    return configs[sentiment] || configs.neutral;
+}
+
+function getTopicConfig(topic) {
+    const configs = {
+        lecturer: { icon: 'fa-user-tie', label: 'Giảng Viên' },
+        training_program: { icon: 'fa-graduation-cap', label: 'Chương Trình' },
+        facility: { icon: 'fa-building', label: 'Cơ Sở Vật Chất' },
+        others: { icon: 'fa-ellipsis-h', label: 'Khác' }
+    };
+    return configs[topic] || configs.others;
+}
+
+function getSentimentColor(sentiment) {
+    const colors = {
+        positive: 'success',
+        neutral: 'warning',
+        negative: 'danger'
+    };
+    return colors[sentiment] || 'secondary';
+}

templates/index.html

@@ -12,15 +12,54 @@
     <div class="container-fluid">
         <!-- Header -->
         <header>
-            <h1 class="display-4 fw-bold text-primary">
-                <i class="fas fa-graduation-cap me-3"></i>
-                Student Feedback Analysis
-            </h1>
+            <div class="d-flex justify-content-between align-items-center">
+                <h1 class="display-4 fw-bold text-primary mb-0">
+                    <i class="fas fa-graduation-cap me-1" style="margin-left: 10px !important;"></i>
+                    Student Feedback Analysis
+                </h1>
+                <div class="d-flex align-items-center justify-content-end" style="margin-right: 20px; gap: 16px;">
+                    <span class="text-white fw-semibold d-flex align-items-center">
+                        <i class="fas fa-user me-2"></i>
+                        {{ current_user.username }}
+                    </span>
+                    <a href="{{ url_for('logout') }}" 
+                       style="background-color: rgba(255,255,255,0.2); 
+                              border: 1px solid rgba(255,255,255,0.3); 
+                              color: white; 
+                              padding: 8px 8px; 
+                              border-radius: 6px; 
+                              text-decoration: none; 
+                              font-weight: 600; 
+                              display: inline-flex; 
+                              align-items: center; 
+                              justify-content: center; 
+                              font-size: 13px; 
+                              transition: all 0.3s ease; 
+                              backdrop-filter: blur(10px); 
+                              gap: 6px;">
+                        <i class="fas fa-sign-out-alt"></i>
+                        <span>Đăng xuất</span>
+                    </a>
+                </div>
+            </div>
         </header>
 
         <!-- Main Content -->
         <div class="row justify-content-center">
             <div class="col-lg-8">
+                <!-- Flash Messages -->
+                {% with messages = get_flashed_messages(with_categories=true) %}
+                    {% if messages %}
+                        {% for category, message in messages %}
+                            <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
+                                <i class="fas fa-{{ 'exclamation-triangle' if category == 'error' else 'info-circle' }} me-2"></i>
+                                {{ message }}
+                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                            </div>
+                        {% endfor %}
+                    {% endif %}
+                {% endwith %}
+
                 <!-- Input Form -->
                 <div class="card shadow-lg">
                     <div class="card-header bg-primary text-white">
@@ -135,6 +174,30 @@
                     <i class="fas fa-exclamation-triangle me-2"></i>
                     <span id="errorText"></span>
                 </div>
+
+                <!-- Feedback History -->
+                <div class="card shadow-sm mt-4">
+                    <div class="card-header bg-primary text-white">
+                        <h4 class="card-title mb-0">
+                            <i class="fas fa-history me-2"></i>
+                            Lịch sử Feedback
+                        </h4>
+                    </div>
+                    <div class="card-body">
+                        <div id="historyLoading" class="text-center py-3" style="display: none;">
+                            <div class="spinner-border text-primary" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <p class="mt-2 text-muted">Đang tải lịch sử...</p>
+                        </div>
+                        <div id="historyContent">
+                            <!-- History items will be loaded here -->
+                        </div>
+                        <div id="historyPagination" class="d-flex justify-content-center mt-3">
+                            <!-- Pagination will be loaded here -->
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -150,5 +213,21 @@
     <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    <script>
+        // Auto-hide alerts after 3 seconds with smooth fade
+        document.addEventListener('DOMContentLoaded', function() {
+            const alerts = document.querySelectorAll('.alert');
+            alerts.forEach(function(alert) {
+                setTimeout(function() {
+                    // Add fade-out class for smooth transition
+                    alert.classList.add('fade-out');
+                    // Remove from DOM after transition completes
+                    setTimeout(function() {
+                        alert.remove();
+                    }, 500);
+                }, 3000);
+            });
+        });
+    </script>
 </body>
 </html>

templates/login.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng nhập - Student Feedback Analysis</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
+</head>
+<body>
+    <div class="container-fluid">
+        <!-- Main Content -->
+        <div class="row justify-content-center" style="padding-top: 60px;">
+            <div class="col-lg-6 col-md-8">
+                <!-- Login Form -->
+                <div class="card shadow-sm">
+                    <div class="card-header bg-primary text-white">
+                        <h3 class="card-title mb-0">
+                            <i class="fas fa-sign-in-alt me-2"></i>
+                            Đăng nhập tài khoản
+                        </h3>
+                    </div>
+                    <div class="card-body">
+                        <!-- Flash Messages -->
+                        {% with messages = get_flashed_messages(with_categories=true) %}
+                            {% if messages %}
+                                {% for category, message in messages %}
+                                    <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
+                                        <i class="fas fa-{{ 'exclamation-triangle' if category == 'error' else 'info-circle' }} me-2"></i>
+                                        {{ message }}
+                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                                    </div>
+                                {% endfor %}
+                            {% endif %}
+                        {% endwith %}
+
+                        <form method="POST">
+                            {{ form.hidden_tag() }}
+                            
+                            <div class="mb-3">
+                                {{ form.username.label(class="form-label fw-bold") }}
+                                {{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "")) }}
+                                {% if form.username.errors %}
+                                    <div class="invalid-feedback">
+                                        {% for error in form.username.errors %}
+                                            {{ error }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
+
+                            <div class="mb-4">
+                                {{ form.password.label(class="form-label fw-bold") }}
+                                {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "")) }}
+                                {% if form.password.errors %}
+                                    <div class="invalid-feedback">
+                                        {% for error in form.password.errors %}
+                                            {{ error }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
+
+                            <div class="d-grid">
+                                {{ form.submit(class="btn btn-primary btn-lg") }}
+                            </div>
+                        </form>
+
+                        <hr class="my-4">
+                        
+                        <div class="text-center">
+                            <p class="text-muted mb-0">
+                                Chưa có tài khoản? 
+                                <a href="{{ url_for('register') }}" class="text-decoration-none fw-bold text-secondary">
+                                    Đăng ký ngay
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Back to Home -->
+                <div class="text-center mt-3">
+                    <a href="{{ url_for('home') }}" class="btn btn-outline-secondary">
+                        <i class="fas fa-arrow-left me-2"></i>
+                        Về trang chủ
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Auto-hide alerts after 3 seconds with smooth fade
+        document.addEventListener('DOMContentLoaded', function() {
+            const alerts = document.querySelectorAll('.alert');
+            alerts.forEach(function(alert) {
+                setTimeout(function() {
+                    // Add fade-out class for smooth transition
+                    alert.classList.add('fade-out');
+                    // Remove from DOM after transition completes
+                    setTimeout(function() {
+                        alert.remove();
+                    }, 500);
+                }, 3000);
+            });
+        });
+    </script>
+</body>
+</html>

templates/register.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng ký - Student Feedback Analysis</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
+</head>
+<body>
+    <div class="container-fluid">
+        <!-- Main Content -->
+        <div class="row justify-content-center" style="padding-top: 60px;">
+            <div class="col-lg-6 col-md-8">
+                <!-- Registration Form -->
+                <div class="card shadow-sm">
+                    <div class="card-header bg-primary text-white">
+                        <h3 class="card-title mb-0">
+                            <i class="fas fa-user-plus me-2"></i>
+                            Tạo tài khoản mới
+                        </h3>
+                    </div>
+                    <div class="card-body">
+                        <!-- Flash Messages -->
+                        {% with messages = get_flashed_messages(with_categories=true) %}
+                            {% if messages %}
+                                {% for category, message in messages %}
+                                    <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
+                                        <i class="fas fa-{{ 'exclamation-triangle' if category == 'error' else 'info-circle' }} me-2"></i>
+                                        {{ message }}
+                                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                                    </div>
+                                {% endfor %}
+                            {% endif %}
+                        {% endwith %}
+
+                        <form method="POST">
+                            {{ form.hidden_tag() }}
+                            
+                            <div class="mb-3">
+                                {{ form.username.label(class="form-label fw-bold") }}
+                                {{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "")) }}
+                                {% if form.username.errors %}
+                                    <div class="invalid-feedback">
+                                        {% for error in form.username.errors %}
+                                            {{ error }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
+
+                            <div class="mb-3">
+                                {{ form.password.label(class="form-label fw-bold") }}
+                                {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "")) }}
+                                {% if form.password.errors %}
+                                    <div class="invalid-feedback">
+                                        {% for error in form.password.errors %}
+                                            {{ error }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
+
+                            <div class="mb-4">
+                                {{ form.confirm_password.label(class="form-label fw-bold") }}
+                                {{ form.confirm_password(class="form-control" + (" is-invalid" if form.confirm_password.errors else "")) }}
+                                {% if form.confirm_password.errors %}
+                                    <div class="invalid-feedback">
+                                        {% for error in form.confirm_password.errors %}
+                                            {{ error }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            </div>
+
+                            <div class="d-grid">
+                                {{ form.submit(class="btn btn-primary btn-lg") }}
+                            </div>
+                        </form>
+
+                        <hr class="my-4">
+                        
+                        <div class="text-center">
+                            <p class="text-muted mb-0">
+                                Đã có tài khoản? 
+                                <a href="{{ url_for('login') }}" class="text-decoration-none fw-bold text-secondary">
+                                    Đăng nhập ngay
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Back to Home -->
+                <div class="text-center mt-3">
+                    <a href="{{ url_for('home') }}" class="btn btn-outline-secondary">
+                        <i class="fas fa-arrow-left me-2"></i>
+                        Về trang chủ
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Auto-hide alerts after 3 seconds with smooth fade
+        document.addEventListener('DOMContentLoaded', function() {
+            const alerts = document.querySelectorAll('.alert');
+            alerts.forEach(function(alert) {
+                setTimeout(function() {
+                    // Add fade-out class for smooth transition
+                    alert.classList.add('fade-out');
+                    // Remove from DOM after transition completes
+                    setTimeout(function() {
+                        alert.remove();
+                    }, 500);
+                }, 3000);
+            });
+        });
+    </script>
+</body>
+</html>