Upload 3 files

static/script.js

@@ -0,0 +1,140 @@
+async function correctText() {
+    const inputText = document.getElementById("inputText").value;
+    const outputTextElem = document.getElementById("outputText");
+    const btn = document.getElementById("submitBtn");
+    const loading = document.getElementById("loading");
+    const analysisSection = document.getElementById("analysisSection");
+    
+    const mode = document.querySelector('input[name="modelType"]:checked').value;
+
+    analysisSection.style.display = "none";
+    outputTextElem.value = "";
+
+    if (!inputText.trim()) {
+        document.getElementById("inputText").focus();
+        return;
+    }
+
+    btn.disabled = true;
+    loading.style.display = "flex";
+
+    try {
+        const response = await fetch('/correct', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ 
+                text: inputText,
+                mode: mode 
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            outputTextElem.value = "Lỗi: " + data.error;
+        } else {
+            const resultText = data.result;
+            // Lấy thêm mảng confidences, mặc định là mảng rỗng nếu không có
+            const confidences = data.confidences || []; 
+            
+            outputTextElem.value = resultText;
+            
+            analysisSection.style.display = "block";
+            setTimeout(() => {
+                analysisSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }, 100);
+
+            // Truyền thêm confidences vào hàm so sánh
+            generateDiff(inputText, resultText, confidences);
+        }
+    } catch (error) {
+        outputTextElem.value = "Lỗi kết nối: " + error;
+        console.error(error);
+    } finally {
+        btn.disabled = false;
+        loading.style.display = "none";
+    }
+}
+
+// Hàm switch mode giữ nguyên
+function handleModeChange() {
+    document.getElementById("analysisSection").style.display = "none";
+    document.getElementById("outputText").value = "";
+    document.getElementById("inputText").focus();
+}
+
+// Cập nhật hàm generateDiff để nhận tham số confidences
+function generateDiff(original, corrected, confidences) {
+    const originWords = original.trim().split(/\s+/);
+    const correctWords = corrected.trim().split(/\s+/);
+    
+    const highlightContainer = document.getElementById("highlightedText");
+    const tableBody = document.getElementById("comparisonTableBody");
+
+    highlightContainer.innerHTML = "";
+    tableBody.innerHTML = "";
+
+    const minLen = Math.min(originWords.length, correctWords.length);
+    let htmlHighlight = "";
+    let hasError = false;
+
+    for (let i = 0; i < minLen; i++) {
+        const oWord = originWords[i];
+        const cWord = correctWords[i];
+        
+        // Lấy score tương ứng với từ đã sửa (cWord)
+        // Format phần trăm
+        let scoreVal = confidences[i];
+        let scoreText = "N/A";
+        let scoreColor = "#999"; // Màu mặc định
+
+        if (scoreVal !== undefined) {
+            const percent = (scoreVal * 100).toFixed(1);
+            scoreText = percent + "%";
+            
+            // Tô màu dựa trên độ tin cậy
+            if (scoreVal >= 0.9) scoreColor = "#2e7d32"; // Xanh đậm (Cao)
+            else if (scoreVal >= 0.7) scoreColor = "#f57f17"; // Cam (Trung bình)
+            else scoreColor = "#c62828"; // Đỏ (Thấp)
+        }
+
+        if (oWord !== cWord) {
+            hasError = true;
+            htmlHighlight += `<span class="highlight-word" title="Sửa thành: ${cWord} (${scoreText})">${oWord}</span> `;
+            
+            const row = document.createElement("tr");
+            row.innerHTML = `
+                <td style="color: #d32f2f;">${oWord}</td>
+                <td style="color: #2e7d32; font-weight:bold;">${cWord}</td>
+                <td style="color: ${scoreColor}; font-weight:600;">${scoreText}</td>
+            `;
+            tableBody.appendChild(row);
+        } else {
+            htmlHighlight += `<span>${oWord}</span> `;
+        }
+    }
+
+    // Xử lý trường hợp input dài hơn output (Từ bị xóa)
+    if (originWords.length > minLen) {
+        for (let i = minLen; i < originWords.length; i++) {
+             hasError = true;
+             htmlHighlight += `<span class="highlight-word" title="Đã xóa">${originWords[i]}</span> `;
+             const row = document.createElement("tr");
+             row.innerHTML = `
+                <td>${originWords[i]}</td>
+                <td>(Xóa)</td>
+                <td>-</td>
+             `;
+             tableBody.appendChild(row);
+        }
+    }
+    
+    // Lưu ý: Trường hợp output dài hơn input (Thêm từ mới) thường ít gặp trong task sửa l���i chính tả 
+    // nhưng nếu có thì logic hiện tại sẽ bỏ qua phần dư của correctWords. 
+    // Nếu muốn hiển thị, bạn cần thêm vòng lặp xử lý từ index minLen -> correctWords.length.
+
+    highlightContainer.innerHTML = htmlHighlight.trim();
+    if (!hasError) {
+        tableBody.innerHTML = `<tr><td colspan="3" style="color:#888;">Văn bản không thay đổi.</td></tr>`;
+    }
+}

static/style.css

@@ -0,0 +1,248 @@
+:root {
+    --brand-gradient: linear-gradient(90deg, #00316C 0%, #004E9A 50%, #85B106 100%);
+    --bg-white: #ffffff;
+    --text-primary: #1F1F1F;
+    --text-secondary: #5F6368;
+    --border-color: #E0E0E0;
+    --highlight-bg: #FFF9C4;
+    --highlight-text: #F57F17;
+}
+
+* { box-sizing: border-box; outline: none; }
+
+body {
+    font-family: 'Inter', sans-serif;
+    margin: 0;
+    padding: 0; /* Bỏ padding mặc định để căn giữa chuẩn hơn */
+    min-height: 100vh; /* Bắt buộc chiều cao tối thiểu bằng màn hình */
+    background: var(--brand-gradient);
+    
+    /* CĂN GIỮA TUYỆT ĐỐI */
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+}
+
+.main-card {
+    background-color: var(--bg-white);
+    width: 90%; /* Dùng % để responsive tốt hơn */
+    max-width: 1100px;
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+    animation: zoomIn 0.4s ease-out;
+    margin: 20px; /* Cách lề một chút trên màn hình nhỏ */
+}
+
+@keyframes zoomIn {
+    from { transform: scale(0.95); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+.card-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.app-title {
+    margin: 0 0 20px 0;
+    font-size: 28px;
+    font-weight: 800;
+    /*text-transform: uppercase;*/
+    background: var(--brand-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    line-height: 1.4; /* Tăng khoảng cách dòng */
+    padding: 10px 0;  /* Tạo không gian cho dấu không bị cắt */
+    display: block;   /* Đảm bảo padding có tác dụng */
+}
+
+/* --- MODE SWITCHER STYLES (Mới) --- */
+.mode-switcher {
+    display: inline-flex;
+    background: #F0F2F5;
+    padding: 4px;
+    border-radius: 50px;
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.mode-option {
+    position: relative;
+    cursor: pointer;
+}
+
+.mode-option input {
+    display: none; 
+}
+
+.mode-btn {
+    display: block;
+    padding: 8px 24px;
+    border-radius: 40px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    transition: all 0.3s ease;
+}
+
+.mode-option input:checked + .mode-btn {
+    background: var(--bg-white);
+    color: #004E9A;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.mode-option:hover .mode-btn {
+    color: #004E9A;
+}
+/* ----------------------------- */
+
+.editor-section {
+    display: flex;
+    gap: 30px;
+    margin-bottom: 30px;
+}
+
+.text-box-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.box-label {
+    font-size: 13px;
+    font-weight: 700;
+    color: #004E9A;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+
+textarea {
+    width: 100%;
+    height: 200px;
+    padding: 20px;
+    font-size: 16px;
+    line-height: 1.6;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    resize: none;
+    font-family: inherit;
+    background-color: #F8F9FA;
+    transition: all 0.2s;
+}
+
+textarea:focus {
+    background-color: #fff;
+    border-color: #004E9A;
+    box-shadow: 0 0 0 3px rgba(0, 78, 154, 0.1);
+}
+
+#outputText { background-color: #fff; }
+
+.action-section {
+    text-align: center;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+button#submitBtn {
+    background: var(--brand-gradient);
+    color: white;
+    border: none;
+    padding: 14px 60px;
+    font-size: 15px;
+    font-weight: 700;
+    border-radius: 50px;
+    cursor: pointer;
+    box-shadow: 0 10px 20px rgba(0, 78, 154, 0.25);
+    transition: transform 0.2s, box-shadow 0.2s;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+button#submitBtn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 30px rgba(0, 78, 154, 0.35);
+}
+
+button#submitBtn:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+#loading {
+    display: none;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #004E9A;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+.analysis-section {
+    display: none;
+    border-top: 1px dashed var(--border-color);
+    padding-top: 30px;
+    margin-top: 30px;
+}
+
+.section-title {
+    text-align: center;
+    color: #004E9A;
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.highlight-box {
+    text-align: center;
+    font-size: 18px;
+    line-height: 1.8;
+    color: var(--text-primary);
+    margin-bottom: 30px;
+    background: #FAFAFA;
+    padding: 20px;
+    border-radius: 12px;
+    border: 1px solid #eee;
+}
+
+.highlight-word {
+    background-color: var(--highlight-bg);
+    color: var(--highlight-text);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-weight: 600;
+    border-bottom: 2px solid #FBC02D;
+    cursor: help;
+}
+
+.table-wrapper {
+    overflow-x: auto;
+    border-radius: 12px;
+    border: 1px solid #eee;
+}
+
+table { width: 100%; border-collapse: collapse; background: #fff; }
+thead { background: var(--brand-gradient); color: white; }
+th, td { padding: 12px 20px; text-align: center; border-bottom: 1px solid #eee; }
+th { font-weight: 600; text-transform: uppercase; font-size: 13px; }
+tbody tr:hover { background-color: #f8fbff; }
+
+@media (max-width: 768px) {
+    .editor-section { flex-direction: column; }
+    .main-card { padding: 20px; margin: 10px; width: 95%; }
+}

templates/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VietCorrect AI - Normalization</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+    <div class="main-card">
+        <!-- Header -->
+        <div class="card-header">
+            <h1 class="app-title">CÔNG CỤ CHUẨN HÓA VĂN BẢN</h1>
+            
+            <!-- MODEL SELECTION UI (Giao diện chọn model) -->
+            <div class="mode-switcher">
+                <label class="mode-option">
+                    <!-- Mặc định checked vào Sửa lỗi, bạn có thể đổi nếu app.py đang chạy model khác -->
+                    <input type="radio" name="modelType" value="correction" checked onchange="handleModeChange()">
+                    <span class="mode-btn">Sửa lỗi chính tả</span>
+                </label>
+                <label class="mode-option">
+                    <input type="radio" name="modelType" value="diacritics" onchange="handleModeChange()">
+                    <span class="mode-btn">Thêm dấu</span>
+                </label>
+            </div>
+        </div>
+
+        <!-- Input / Output Section -->
+        <div class="editor-section">
+            <div class="text-box-wrapper">
+                <div class="box-label">Văn bản gốc</div>
+                <textarea id="inputText" placeholder="Nhập văn bản vào đây..."></textarea>
+            </div>
+
+            <div class="text-box-wrapper">
+                <div class="box-label">Kết quả xử lý</div>
+                <textarea id="outputText" readonly placeholder="Kết quả sẽ hiện ở đây..."></textarea>
+            </div>
+        </div>
+
+        <!-- Button Section -->
+        <div class="action-section">
+            <button id="submitBtn" onclick="correctText()">
+                <span>THỰC HIỆN XỬ LÝ</span>
+            </button>
+            <div id="loading">
+                <div class="spinner"></div> Đang xử lý...
+            </div>
+        </div>
+
+        <!-- Analysis Section -->
+        <div id="analysisSection" class="analysis-section">
+            <h2 class="section-title">PHÂN TÍCH THAY ĐỔI</h2>
+            <div id="highlightedText" class="highlight-box"></div>
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Trước khi sửa</th>
+                            <th>Sau khi sửa</th>
+                            <th style="width: 150px;">Độ tin cậy</th>
+                        </tr>
+                    </thead>
+                    <tbody id="comparisonTableBody"></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>