Upload 6 files

PhoBERTMultiTask.py

@@ -0,0 +1,32 @@
+import torch
+from torch import nn
+from transformers import AutoModel
+
+class PhoBERTMultiTask(nn.Module):
+    def __init__(self, num_sentiment=3, num_topic=4):
+        super().__init__()
+        self.phobert = AutoModel.from_pretrained("vinai/phobert-base")
+        self.dropout = nn.Dropout(0.1)
+
+    
+        self.sentiment_head = nn.Sequential(
+            nn.Linear(768, 768),
+            nn.ReLU(),
+            nn.Dropout(0.1),
+            nn.Linear(768, num_sentiment)
+        )
+
+        self.topic_head = nn.Sequential(
+            nn.Linear(768, 768),
+            nn.ReLU(),
+            nn.Dropout(0.1),
+            nn.Linear(768, num_topic)
+        )
+
+    def forward(self, input_ids, attention_mask):
+        outputs = self.phobert(input_ids=input_ids, attention_mask=attention_mask)
+        pooled = outputs.last_hidden_state[:, 0, :]  # [CLS] token
+        pooled = self.dropout(pooled)
+        logits_sent = self.sentiment_head(pooled)
+        logits_topic = self.topic_head(pooled)
+        return logits_sent, logits_topic

app.py

@@ -0,0 +1,78 @@
+import os
+import torch
+from transformers import AutoTokenizer
+from flask import Flask, request, jsonify, render_template
+from PhoBERTMultiTask import PhoBERTMultiTask
+
+app = Flask(__name__)
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+# === Load tokenizer & model ===
+MODEL_REPO = "Ptul2x5/Student_Feedback_Sentiment"  # 🔹 Repo Hugging Face của bạn
+
+print("🔄 Đang tải tokenizer và model từ Hugging Face...")
+tokenizer = AutoTokenizer.from_pretrained(MODEL_REPO, use_fast=False)
+
+# 🔹 Tải trọng số model (.bin) trực tiếp từ Hugging Face
+state_dict = torch.hub.load_state_dict_from_url(
+    f"https://huggingface.co/{MODEL_REPO}/resolve/main/multitask_model.bin",
+    map_location=device
+)
+
+model = PhoBERTMultiTask(num_sentiment=3, num_topic=4)
+model.load_state_dict(state_dict)
+model.to(device)
+model.eval()
+print("✅ Model đã sẵn sàng!")
+
+# ====== ROUTES ======
+@app.route("/", methods=["GET"])
+def home():
+    return render_template('index.html')
+
+@app.route("/api/health", methods=["GET"])
+def health():
+    return jsonify({"status": "healthy", "message": "✅ PhoBERT MultiTask API is running!"})
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    try:
+        data = request.get_json()
+        text = data.get("text", "").strip()
+
+        if not text:
+            return jsonify({"error": "Missing 'text' field"}), 400
+
+        # Validate input length
+        if len(text) > 1000:
+            return jsonify({"error": "Text quá dài. Vui lòng nhập tối đa 1000 ký tự."}), 400
+
+        # Tokenize
+        inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128).to(device)
+
+        # Inference
+        with torch.no_grad():
+            logits_sent, logits_topic = model(inputs["input_ids"], inputs["attention_mask"])
+            sent = torch.argmax(logits_sent, dim=1).item()
+            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"}
+
+        return jsonify({
+            "sentiment": sent_map[sent],
+            "topic": topic_map[topic],
+            "confidence": {
+                "sentiment": float(torch.softmax(logits_sent, dim=1).max().item()),
+                "topic": float(torch.softmax(logits_topic, dim=1).max().item())
+            }
+        })
+    except Exception as e:
+        return jsonify({"error": f"Có lỗi xảy ra khi xử lý: {str(e)}"}), 500
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 10000))
+    app.run(host="0.0.0.0", port=port)

requirements.txt

@@ -0,0 +1,9 @@
+Flask==3.0.3
+torch==2.3.1
+transformers==4.44.0
+tokenizers==0.19.1
+huggingface-hub>=0.23.2
+tqdm
+gunicorn
+numpy
+requests

static/css/style.css

@@ -0,0 +1,289 @@
+/* Custom styles for Student Feedback Analysis */
+
+:root {
+    --primary-color: #84adec;
+    --success-color: #198754;
+    --info-color: #0dcaf0;
+    --warning-color: #ffc107;
+    --danger-color: #dc3545;
+    --light-color: #f8f9fa;
+    --dark-color: #212529;
+}
+
+body {
+    background: linear-gradient(135deg, #5e84cb 0%, #6fa0f4 100%);
+    min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.container-fluid {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    margin: 20px;
+    padding: 0;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Header Styles */
+header {
+    background: linear-gradient(135deg, #7c97f0, #3b82f6);
+    color: white;
+    border-radius: 20px 20px 0 0;
+    margin: 0;
+}
+
+header h1 {
+    color: #ffd700 !important;
+    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.8);
+    margin: 0;
+    font-weight: 800;
+    letter-spacing: 1px;
+}
+
+/* Force header text colors with high specificity */
+header .display-4,
+header h1.display-4,
+header .text-primary {
+    color: #ffd700 !important;
+}
+
+header p,
+header .lead,
+header p.lead {
+    color: #ffffff !important;
+    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
+    font-weight: 500;
+    font-size: 1.2rem;
+}
+
+/* Additional specificity for Bootstrap classes */
+.container-fluid header h1,
+.container-fluid header .display-4 {
+    color: #ffd700 !important;
+}
+
+.container-fluid header p,
+.container-fluid header .lead {
+    color: #ffffff !important;
+}
+
+/* Card Styles */
+.card {
+    border: none;
+    border-radius: 15px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
+}
+
+.card-header {
+    border-radius: 15px 15px 0 0 !important;
+    border: none;
+    padding: 1.5rem;
+}
+
+.card-body {
+    padding: 2rem;
+}
+
+/* Form Styles */
+.form-control {
+    border-radius: 10px;
+    border: 2px solid #e9ecef;
+    padding: 1rem;
+    font-size: 1.1rem;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    background-color: #ffffff;
+    color: #212529;
+}
+
+.form-control:focus {
+    border-color: #1e40af;
+    box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
+    background-color: #ffffff;
+}
+
+.form-label {
+    color: #1f2937 !important;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.form-text {
+    color: #6b7280 !important;
+}
+
+/* Button Styles */
+.btn {
+    border-radius: 10px;
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #1e40af, #3b82f6);
+    border: none;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #1e3a8a, #2563eb);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(30, 64, 175, 0.4);
+    color: white;
+}
+
+/* Results Styles */
+#results .card-header {
+    font-weight: 600;
+}
+
+#sentimentIcon i,
+#topicIcon i {
+    transition: transform 0.3s ease;
+}
+
+#sentimentIcon:hover i,
+#topicIcon:hover i {
+    transform: scale(1.1);
+}
+
+/* Sentiment Colors */
+.sentiment-positive {
+    color: var(--success-color) !important;
+}
+
+.sentiment-neutral {
+    color: var(--warning-color) !important;
+}
+
+.sentiment-negative {
+    color: var(--danger-color) !important;
+}
+
+/* Topic Colors */
+.topic-lecturer {
+    color: var(--primary-color) !important;
+}
+
+.topic-training_program {
+    color: var(--info-color) !important;
+}
+
+.topic-facility {
+    color: var(--success-color) !important;
+}
+
+.topic-others {
+    color: var(--warning-color) !important;
+}
+
+/* Loading Spinner */
+.spinner-border {
+    width: 3rem;
+    height: 3rem;
+}
+
+/* Alert Styles */
+.alert {
+    border-radius: 10px;
+    border: none;
+    padding: 1.5rem;
+}
+
+/* Blockquote Styles */
+blockquote {
+    border-left: 4px solid var(--primary-color);
+    padding-left: 1.5rem;
+    font-style: italic;
+    color: var(--dark-color);
+}
+
+/* Footer Styles */
+footer {
+    background: var(--light-color);
+    border-radius: 0 0 20px 20px;
+    margin: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container-fluid {
+        margin: 10px;
+        border-radius: 15px;
+    }
+    
+    header {
+        border-radius: 15px 15px 0 0;
+        padding: 2rem 1rem !important;
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+    
+    .card-body {
+        padding: 1.5rem;
+    }
+    
+    .btn {
+        padding: 0.75rem 1.5rem;
+    }
+}
+
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.slide-up {
+    animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #0056b3;
+}

static/js/app.js

@@ -0,0 +1,294 @@
+// Student Feedback Analysis - Frontend JavaScript
+
+document.addEventListener('DOMContentLoaded', function() {
+    const feedbackForm = document.getElementById('feedbackForm');
+    const loadingSpinner = document.getElementById('loadingSpinner');
+    const results = document.getElementById('results');
+    const errorMessage = document.getElementById('errorMessage');
+    const analyzeBtn = document.getElementById('analyzeBtn');
+
+    // Form submission handler
+    feedbackForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const feedbackText = document.getElementById('feedbackText').value.trim();
+        
+        if (!feedbackText) {
+            showError('Vui lòng nhập feedback trước khi phân tích!');
+            return;
+        }
+
+        // Show loading state
+        showLoading();
+        
+        try {
+            const response = await fetch('/predict', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: feedbackText })
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                displayResults(data, feedbackText);
+            } else {
+                showError(data.error || 'Có lỗi xảy ra khi phân tích feedback!');
+            }
+        } catch (error) {
+            showError('Không thể kết nối đến server. Vui lòng thử lại!');
+            console.error('Error:', error);
+        } finally {
+            hideLoading();
+        }
+    });
+
+    // Show loading spinner
+    function showLoading() {
+        loadingSpinner.style.display = 'block';
+        results.style.display = 'none';
+        errorMessage.style.display = 'none';
+        analyzeBtn.disabled = true;
+        analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Đang phân tích...';
+    }
+
+    // Hide loading spinner
+    function hideLoading() {
+        loadingSpinner.style.display = 'none';
+        analyzeBtn.disabled = false;
+        analyzeBtn.innerHTML = '<i class="fas fa-search me-2"></i>Phân Tích Feedback';
+    }
+
+    // Display results
+    function displayResults(data, originalText) {
+        const { sentiment, topic } = data;
+        
+        // Update sentiment result
+        updateSentimentResult(sentiment);
+        
+        // Update topic result
+        updateTopicResult(topic);
+        
+        // Show original text
+        document.getElementById('originalText').textContent = originalText;
+        
+        // Show results with animation
+        results.style.display = 'block';
+        results.classList.add('fade-in');
+        
+        // Scroll to results
+        results.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // Update sentiment result
+    function updateSentimentResult(sentiment) {
+        const sentimentResult = document.getElementById('sentimentResult');
+        const sentimentIcon = document.getElementById('sentimentIcon');
+        const sentimentDescription = document.getElementById('sentimentDescription');
+        
+        // Remove existing classes
+        sentimentResult.className = 'mb-2';
+        sentimentIcon.innerHTML = '';
+        
+        const sentimentConfig = getSentimentConfig(sentiment);
+        
+        // Update icon
+        sentimentIcon.innerHTML = `<i class="fas ${sentimentConfig.icon} fa-3x ${sentimentConfig.colorClass}"></i>`;
+        
+        // Update text
+        sentimentResult.textContent = sentimentConfig.label;
+        sentimentResult.className += ` ${sentimentConfig.colorClass}`;
+        
+        // Update description
+        sentimentDescription.textContent = sentimentConfig.description;
+    }
+
+    // Update topic result
+    function updateTopicResult(topic) {
+        const topicResult = document.getElementById('topicResult');
+        const topicIcon = document.getElementById('topicIcon');
+        const topicDescription = document.getElementById('topicDescription');
+        
+        // Remove existing classes
+        topicResult.className = 'mb-2';
+        topicIcon.innerHTML = '';
+        
+        const topicConfig = getTopicConfig(topic);
+        
+        // Update icon
+        topicIcon.innerHTML = `<i class="fas ${topicConfig.icon} fa-3x ${topicConfig.colorClass}"></i>`;
+        
+        // Update text
+        topicResult.textContent = topicConfig.label;
+        topicResult.className += ` ${topicConfig.colorClass}`;
+        
+        // Update description
+        topicDescription.textContent = topicConfig.description;
+    }
+
+    // Get sentiment configuration
+    function getSentimentConfig(sentiment) {
+        const configs = {
+            'positive': {
+                icon: 'fa-smile',
+                label: 'Tích Cực',
+                colorClass: 'sentiment-positive',
+                description: 'Feedback thể hiện thái độ tích cực và hài lòng'
+            },
+            'neutral': {
+                icon: 'fa-meh',
+                label: 'Trung Tính',
+                colorClass: 'sentiment-neutral',
+                description: 'Feedback thể hiện thái độ trung lập, không rõ ràng'
+            },
+            'negative': {
+                icon: 'fa-frown',
+                label: 'Tiêu Cực',
+                colorClass: 'sentiment-negative',
+                description: 'Feedback thể hiện thái độ tiêu cực và không hài lòng'
+            }
+        };
+        
+        return configs[sentiment] || configs['neutral'];
+    }
+
+    // Get topic configuration
+    function getTopicConfig(topic) {
+        const configs = {
+            'lecturer': {
+                icon: 'fa-user-tie',
+                label: 'Giảng Viên',
+                colorClass: 'topic-lecturer',
+                description: 'Feedback liên quan đến chất lượng giảng dạy của giảng viên'
+            },
+            'training_program': {
+                icon: 'fa-graduation-cap',
+                label: 'Chương Trình Đào Tạo',
+                colorClass: 'topic-training_program',
+                description: 'Feedback về nội dung và cấu trúc chương trình học'
+            },
+            'facility': {
+                icon: 'fa-building',
+                label: 'Cơ Sở Vật Chất',
+                colorClass: 'topic-facility',
+                description: 'Feedback về phòng học, thiết bị và cơ sở hạ tầng'
+            },
+            'others': {
+                icon: 'fa-ellipsis-h',
+                label: 'Khác',
+                colorClass: 'topic-others',
+                description: 'Feedback về các chủ đề khác không thuộc các danh mục trên'
+            }
+        };
+        
+        return configs[topic] || configs['others'];
+    }
+
+    // Show error message
+    function showError(message) {
+        document.getElementById('errorText').textContent = message;
+        errorMessage.style.display = 'block';
+        errorMessage.classList.add('fade-in');
+        
+        // Hide results if showing
+        results.style.display = 'none';
+        
+        // Scroll to error
+        errorMessage.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // Clear form function
+    function clearForm() {
+        document.getElementById('feedbackText').value = '';
+        results.style.display = 'none';
+        errorMessage.style.display = 'none';
+        
+        // Reset character counter
+        const charCount = document.getElementById('charCount');
+        if (charCount) {
+            charCount.textContent = '0';
+        }
+        
+        // Reset counter color
+        const charCounter = document.querySelector('.form-text');
+        if (charCounter) {
+            charCounter.style.color = '#6c757d';
+        }
+    }
+
+    // Add clear button functionality
+    const clearBtn = document.createElement('button');
+    clearBtn.type = 'button';
+    clearBtn.className = 'btn btn-outline-secondary mt-2';
+    clearBtn.innerHTML = '<i class="fas fa-trash me-2"></i>Xóa Form';
+    clearBtn.onclick = clearForm;
+    
+    feedbackForm.appendChild(clearBtn);
+
+    // Add example feedbacks
+    const exampleBtn = document.createElement('button');
+    exampleBtn.type = 'button';
+    exampleBtn.className = 'btn btn-outline-info mt-2 ms-2';
+    exampleBtn.innerHTML = '<i class="fas fa-lightbulb me-2"></i>Ví Dụ';
+    exampleBtn.onclick = showExamples;
+    
+    feedbackForm.appendChild(exampleBtn);
+
+    // Show example feedbacks
+    function showExamples() {
+        const examples = [
+            "Giảng viên giảng bài rất hay và dễ hiểu, sinh viên rất thích",
+            "Phòng học quá nóng và không có điều hòa, rất khó chịu",
+            "Chương trình học quá khó và không phù hợp với sinh viên",
+            "Cơ sở vật chất rất hiện đại và đầy đủ tiện nghi",
+            "Thầy cô rất nhiệt tình và hỗ trợ sinh viên học tập tốt"
+        ];
+        
+        const randomExample = examples[Math.floor(Math.random() * examples.length)];
+        document.getElementById('feedbackText').value = randomExample;
+        
+        // Trigger input event to update character counter
+        const textarea = document.getElementById('feedbackText');
+        textarea.dispatchEvent(new Event('input'));
+        
+        // Scroll to form
+        feedbackForm.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl + Enter to submit form
+        if (e.ctrlKey && e.key === 'Enter') {
+            feedbackForm.dispatchEvent(new Event('submit'));
+        }
+        
+        // Escape to clear form
+        if (e.key === 'Escape') {
+            clearForm();
+        }
+    });
+
+    // Add character counter
+    const textarea = document.getElementById('feedbackText');
+    const charCounter = document.createElement('small');
+    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ự';
+    
+    textarea.parentNode.appendChild(charCounter);
+    
+    textarea.addEventListener('input', function() {
+        const count = this.value.length;
+        document.getElementById('charCount').textContent = count;
+        
+        // Change color based on length
+        if (count > 500) {
+            charCounter.style.color = '#dc3545';
+        } else if (count > 300) {
+            charCounter.style.color = '#ffc107';
+        } else {
+            charCounter.style.color = '#6c757d';
+        }
+    });
+});

templates/index.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Student Feedback Sentiment Analysis</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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">
+        <!-- Header -->
+        <header class="text-center py-4 mb-4">
+            <div class="row">
+                <div class="col-12">
+                    <h1 class="display-4 fw-bold text-primary">
+                        <i class="fas fa-graduation-cap me-3"></i>
+                        Student Feedback Analysis
+                    </h1>
+                    <p class="lead text-muted">Phân tích sentiment và topic cho feedback của sinh viên</p>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <!-- Input Form -->
+                <div class="card shadow-lg mb-4">
+                    <div class="card-header bg-primary text-white">
+                        <h3 class="card-title mb-0">
+                            <i class="fas fa-comment-dots me-2"></i>
+                            Nhập Feedback
+                        </h3>
+                    </div>
+                    <div class="card-body">
+                        <form id="feedbackForm">
+                            <div class="mb-3">
+                                <label for="feedbackText" class="form-label fw-bold">
+                                    <i class="fas fa-edit me-2"></i>
+                                    Feedback của bạn:
+                                </label>
+                                <textarea 
+                                    class="form-control" 
+                                    id="feedbackText" 
+                                    rows="4" 
+                                    placeholder="Nhập feedback về giảng viên, chương trình đào tạo, cơ sở vật chất..."
+                                    required
+                                ></textarea>
+                                <div class="form-text">
+                                    <i class="fas fa-info-circle me-1"></i>
+                                    Nhập feedback bằng tiếng Việt để có kết quả chính xác nhất
+                                </div>
+                            </div>
+                            <div class="d-grid">
+                                <button type="submit" class="btn btn-primary btn-lg" id="analyzeBtn">
+                                    <i class="fas fa-search me-2"></i>
+                                    Phân Tích Feedback
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Loading Spinner -->
+                <div id="loadingSpinner" class="text-center mb-4" 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 phân tích feedback...</p>
+                </div>
+
+                <!-- Results -->
+                <div id="results" style="display: none;">
+                    <!-- Sentiment Result -->
+                    <div class="card shadow-lg mb-3">
+                        <div class="card-header bg-success text-white">
+                            <h4 class="card-title mb-0">
+                                <i class="fas fa-heart me-2"></i>
+                                Phân loại cảm xúc của feedback
+                            </h4>
+                        </div>
+                        <div class="card-body">
+                            <div class="row align-items-center">
+                                <div class="col-md-3">
+                                    <div id="sentimentIcon" class="text-center">
+                                        <i class="fas fa-smile fa-3x"></i>
+                                    </div>
+                                </div>
+                                <div class="col-md-9">
+                                    <h3 id="sentimentResult" class="mb-2"></h3>
+                                    <p id="sentimentDescription" class="text-muted mb-0"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Topic Result -->
+                    <div class="card shadow-lg mb-4">
+                        <div class="card-header bg-info text-white">
+                            <h4 class="card-title mb-0">
+                                <i class="fas fa-tags me-2"></i>
+                                Chủ đề liên quan đến nội dung feedback
+                            </h4>
+                        </div>
+                        <div class="card-body">
+                            <div class="row align-items-center">
+                                <div class="col-md-3">
+                                    <div id="topicIcon" class="text-center">
+                                        <i class="fas fa-user-tie fa-3x"></i>
+                                    </div>
+                                </div>
+                                <div class="col-md-9">
+                                    <h3 id="topicResult" class="mb-2"></h3>
+                                    <p id="topicDescription" class="text-muted mb-0"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Original Text -->
+                    <div class="card shadow-sm">
+                        <div class="card-header bg-light">
+                            <h5 class="card-title mb-0">
+                                <i class="fas fa-quote-left me-2"></i>
+                                Feedback Gốc
+                            </h5>
+                        </div>
+                        <div class="card-body">
+                            <blockquote class="blockquote mb-0">
+                                <p id="originalText" class="mb-0"></p>
+                            </blockquote>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Error Message -->
+                <div id="errorMessage" class="alert alert-danger" style="display: none;">
+                    <i class="fas fa-exclamation-triangle me-2"></i>
+                    <span id="errorText"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="text-center py-4 mt-5">
+            <div class="row">
+                <div class="col-12">
+                    <p class="text-muted mb-0">
+                        <i class="fas fa-robot me-2"></i>
+                        Powered by Tư _ Đức _ Nghĩa _ Hà
+                    </p>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+</body>
+</html>