Spaces:

QuarterZip
/

PINE-AI-Amdocs

Sleeping

App Files Files Community

maitrang04 commited on Dec 21, 2025

Commit

63661d0

verified ·

1 Parent(s): 0649d3e

Upload test_fr.html

Browse files

Files changed (1) hide show

frontend/test_fr.html +524 -0

frontend/test_fr.html ADDED Viewed

	@@ -0,0 +1,524 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PINE AI - VNPT Smart Contact Center</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --vnpt-blue: #00a1e4;
+            --vnpt-dark: #0072bc;
+            --bg-body: #f4f7fa;
+            --chat-bot: #ffffff;
+            --chat-user: #e3f2fd;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            margin: 0; display: flex; height: 100vh; background: var(--bg-body);
+            color: #333; overflow: hidden;
+        }
+        /* --- SIDEBAR --- */
+        .sidebar {
+            width: 320px;
+            background: linear-gradient(160deg, var(--vnpt-dark) 0%, var(--vnpt-blue) 100%);
+            display: flex; flex-direction: column; align-items: center;
+            padding: 40px 20px; color: white;
+            box-shadow: 4px 0 20px rgba(0,0,0,0.1);
+            z-index: 10;
+            overflow-y: auto; /* Cho phép cuộn nếu màn hình nhỏ */
+        }
+        .mascot-container {
+            width: 120px; height: 120px; /* Thu nhỏ chút để nhường chỗ cho Metrics */
+            background: rgba(255,255,255,0.1);
+            border-radius: 50%; display: flex; align-items: center; justify-content: center;
+            margin-bottom: 15px; border: 3px solid rgba(255,255,255,0.3);
+            transition: 0.3s;
+            position: relative;
+            flex-shrink: 0;
+        }
+        .mascot-container.active {
+            border-color: #fff;
+            box-shadow: 0 0 30px rgba(255,255,255,0.6);
+            transform: scale(1.05);
+        }
+        .mascot-container img { width: 70%; }
+        .brand-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: 1px; margin-top: 5px; }
+        .brand-sub { font-size: 12px; opacity: 0.8; margin-top: 2px; font-weight: 300; margin-bottom: 20px; }
+        .timer-box {
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            color: #fff;
+            background: rgba(0,0,0,0.2);
+            padding: 5px 15px;
+            border-radius: 20px;
+            margin-top: 10px;
+            display: none;
+        }
+        /* VISUALIZER */
+        .visualizer {
+            display: flex; gap: 4px; height: 40px; margin-top: 20px; align-items: center; flex-shrink: 0;
+        }
+        .bar {
+            width: 5px; height: 5px; background: rgba(255,255,255,0.6);
+            border-radius: 5px; transition: 0.1s;
+        }
+        /* --- MAIN CONTENT --- */
+        .main-content {
+            flex: 1; display: flex; flex-direction: column;
+            background: white; border-radius: 30px 0 0 30px;
+            margin-left: -20px; z-index: 20; overflow: hidden;
+            box-shadow: -5px 0 20px rgba(0,0,0,0.05);
+        }
+        .top-bar {
+            padding: 20px 40px; display: flex; justify-content: space-between; align-items: center;
+            border-bottom: 1px solid #eee; background: white;
+        }
+        .call-input { display: flex; gap: 15px; align-items: center; }
+        .input-group { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 5px 15px; border-radius: 12px; }
+        .input-group label { font-size: 13px; font-weight: 600; color: #555; }
+        .input-group input {
+            border: none; background: transparent; width: 50px; font-weight: bold;
+            color: var(--vnpt-dark); outline: none; font-size: 16px; text-align: center;
+        }
+        #btnCall {
+            background: #27ae60; color: white; border: none; padding: 12px 25px;
+            border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s;
+            display: flex; align-items: center; gap: 8px;
+        }
+        #btnCall:hover { background: #219150; transform: translateY(-2px); }
+        #btnCall:disabled { background: #ccc; cursor: not-allowed; transform: none; }
+        /* CHAT LOG */
+        .chat-area {
+            flex: 1; padding: 40px; overflow-y: auto; display: flex;
+            flex-direction: column; gap: 15px; scroll-behavior: smooth;
+        }
+        .msg {
+            max-width: 70%; padding: 12px 18px; border-radius: 18px;
+            font-size: 15px; line-height: 1.5; position: relative;
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .msg.bot {
+            background: var(--chat-bot); border: 1px solid #eee;
+            align-self: flex-start; border-bottom-left-radius: 2px; color: #444;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
+        }
+        .msg.user {
+            background: var(--chat-user); color: #0d47a1;
+            align-self: flex-end; border-bottom-right-radius: 2px;
+        }
+        .msg.info {
+            align-self: center; font-size: 12px; color: #999;
+            background: #f5f5f5; padding: 5px 15px; border-radius: 20px;
+        }
+        /* CONTROLS */
+        .control-panel {
+            padding: 30px; display: flex; flex-direction: column;
+            align-items: center; border-top: 1px solid #f0f0f0;
+        }
+        #recordBtn {
+            width: 70px; height: 70px; border-radius: 50%; border: none;
+            background: var(--vnpt-blue); color: white; font-size: 24px;
+            cursor: pointer; box-shadow: 0 5px 15px rgba(0,161,228,0.3);
+            transition: 0.2s; display: flex; align-items: center; justify-content: center;
+        }
+        #recordBtn.recording {
+            background: #ff4757; transform: scale(1.1);
+            box-shadow: 0 0 0 8px rgba(255, 71, 87, 0.2);
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255, 71, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); } }
+        .status-text { margin-top: 15px; font-weight: 600; color: #888; font-size: 14px; }
+        .status-text.error { color: #ff4757; }
+        #stopAiBtn { display: none; }
+        /* ========================================= */
+        /* --- CHANGED: UX DASHBOARD (INSIDE SIDEBAR) --- */
+        /* ========================================= */
+        .ux-dashboard {
+            width: 100%;
+            background: rgba(255, 255, 255, 0.1); /* Glassmorphism */
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 16px;
+            padding: 15px;
+            box-sizing: border-box;
+            margin-top: 10px;
+            margin-bottom: auto; /* Đẩy xuống dưới nếu có khoảng trống */
+            animation: fadeIn 0.5s ease;
+        }
+        .ux-header {
+            font-size: 12px; font-weight: 700; color: #fff;
+            margin-bottom: 12px; padding-bottom: 8px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            display: flex; justify-content: space-between; align-items: center;
+        }
+        .metric-item { margin-bottom: 12px; }
+        .metric-label { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-bottom: 3px; font-weight: 500; text-transform: uppercase; }
+        .metric-value { font-size: 16px; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: baseline; }
+        .metric-unit { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.6); }
+        /* Sentiment Bar (Dark theme compatible) */
+        .sentiment-track {
+            width: 100%; height: 6px; background: rgba(0, 0, 0, 0.3); border-radius: 3px; overflow: hidden; margin-top: 5px;
+        }
+        .sentiment-fill {
+            height: 100%; width: 50%; background: #f1c40f; transition: width 0.5s ease, background 0.5s ease;
+        }
+        .detail-row {
+            display: flex; justify-content: space-between; font-size: 10px; color: rgba(255, 255, 255, 0.6); margin-top: 2px;
+        }
+        /* Override Colors for Sidebar Context */
+        .val-good { color: #2ecc71 !important; }
+        .val-avg { color: #f1c40f !important; }
+        .val-bad { color: #ff6b6b !important; }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <div class="mascot-container" id="mascotBox">
+            <img src="https://github.com/chydua/PINE/blob/main/Screenshot_2025-12-18_at_19.19.29-removebg-preview.png?raw=true" alt="PINE Mascot">
+        </div>
+        <div class="brand-title">PINE AI</div>
+        <div class="brand-sub">VNPT Smart Contact Center</div>
+        <div class="ux-dashboard">
+            <div class="ux-header">
+                <span><i class="fas fa-chart-line"></i> UX METRICS</span>
+                <span style="font-size: 9px; background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 4px;">LIVE</span>
+            </div>
+            <div class="metric-item">
+                <div class="metric-label">ĐỘ TRỄ (LATENCY)</div>
+                <div class="metric-value" id="ux-latency">0.00 <span class="metric-unit">s</span></div>
+                <div class="detail-row">
+                    <span>STT: <b id="ux-stt">0</b>s</span>
+                    <span>Logic: <b id="ux-logic">0</b>s</span>
+                </div>
+            </div>
+            <div class="metric-item">
+                <div class="metric-label">CẢM XÚC</div>
+                <div class="metric-value" id="ux-sentiment-text" style="font-size: 14px;">---</div>
+                <div class="sentiment-track">
+                    <div class="sentiment-fill" id="ux-sentiment-bar" style="width: 50%;"></div>
+                </div>
+            </div>
+            <div class="metric-item" style="margin-bottom: 0;">
+                <div class="metric-label">Ý ĐỊNH</div>
+                <div class="metric-value" id="ux-intent" style="color: #4fc3f7; font-size: 14px;">---</div>
+            </div>
+        </div>
+        <div style="flex: 1;"></div>
+        <div class="visualizer" id="visualizer">
+            <div class="bar"></div><div class="bar"></div><div class="bar"></div>
+            <div class="bar"></div><div class="bar"></div><div class="bar"></div>
+            <div class="bar"></div><div class="bar"></div><div class="bar"></div>
+        </div>
+        <div style="margin-top: 20px; font-size: 11px; opacity: 0.6; text-align: center;">
+            © 2024 VNPT GROUP
+        </div>
+        <div class="timer-box" id="aiTimer"></div>
+        <button id="stopAiBtn"></button>
+    </div>
+    <div class="main-content">
+        <div class="top-bar">
+            <div class="call-input">
+                <div class="input-group">
+                    <label><i class="fas fa-user"></i> ID KHÁCH:</label>
+                    <input type="number" id="customerId" value="1" min="1" max="10">
+                </div>
+                <button id="btnCall" onclick="startCall()">
+                    <i class="fas fa-phone-alt"></i> BẮT ĐẦU GỌI
+                </button>
+            </div>
+            <div style="font-weight: 600; color: var(--vnpt-dark);">
+                <img src="https://github.com/chydua/PINE/blob/main/fda.png?raw=true" height="30">
+            </div>
+        </div>
+        <div class="chat-area" id="logArea">
+            <div class="msg info">Vui lòng chọn ID khách hàng và nhấn "Bắt đầu gọi"</div>
+        </div>
+        <div class="control-panel" id="chatArea">
+            <button id="recordBtn" onmousedown="startRecording()" onmouseup="stopRecording()" onmouseleave="stopRecording()" disabled>
+                <i class="fas fa-microphone"></i>
+            </button>
+            <div class="status-text" id="status">Sẵn sàng kết nối</div>
+        </div>
+    </div>
+    <script>
+        const API_URL = "http://localhost:8000";
+        let mediaRecorder;
+        let audioChunks = [];
+        // --- LOGIC STREAMING (QUEUE) ---
+        let audioQueue = [];
+        let isPlaying = false;
+        let currentAudioObject = null;
+        let audioContext, analyser, dataArray, animationId;
+        // --- 1. VISUALIZER ---
+        function initVisualizer(stream) {
+            if(!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const source = audioContext.createMediaStreamSource(stream);
+            analyser = audioContext.createAnalyser();
+            analyser.fftSize = 64;
+            source.connect(analyser);
+            dataArray = new Uint8Array(analyser.frequencyBinCount);
+            drawVisualizer();
+        }
+        function drawVisualizer() {
+            if (!analyser) return;
+            requestAnimationFrame(drawVisualizer);
+            analyser.getByteFrequencyData(dataArray);
+            const bars = document.querySelectorAll('.bar');
+            bars.forEach((bar, i) => {
+                const h = Math.max(5, dataArray[i] / 255 * 40);
+                bar.style.height = h + 'px';
+            });
+        }
+        // --- 2. AUDIO PLAYER ---
+        async function processAudioQueue() {
+            if (isPlaying || audioQueue.length === 0) return;
+            isPlaying = true;
+            document.getElementById('mascotBox').classList.add('active');
+            document.getElementById('status').innerText = "PINE đang trả lời...";
+            const base64Data = audioQueue.shift();
+            const audio = new Audio("data:audio/wav;base64," + base64Data);
+            currentAudioObject = audio;
+            audio.onended = () => {
+                isPlaying = false;
+                if (audioQueue.length === 0) {
+                    document.getElementById('mascotBox').classList.remove('active');
+                    document.getElementById('status').innerText = "Đến lượt bạn nói...";
+                }
+                processAudioQueue();
+            };
+            audio.onerror = (e) => {
+                console.error("Lỗi phát Audio:", e);
+                isPlaying = false;
+                processAudioQueue();
+            };
+            try { await audio.play(); } catch (e) { isPlaying = false; }
+        }
+        // --- 3. STREAM READER ---
+        async function readStream(response) {
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = "";
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split("\n");
+                buffer = lines.pop();
+                for (const line of lines) {
+                    if (!line.trim()) continue;
+                    try {
+                        const data = JSON.parse(line);
+                        if (data.user_text) log(data.user_text, 'user');
+                        if (data.bot_text) log(data.bot_text, 'bot');
+                        if (data.audio_base64) {
+                            audioQueue.push(data.audio_base64);
+                            processAudioQueue();
+                        }
+                        if (data.type === "metrics_update") {
+                            updateUXDashboard(data.data);
+                        }
+                    } catch (e) { console.error("Parse JSON Lỗi:", e); }
+                }
+            }
+        }
+        // --- NEW: HÀM CẬP NHẬT UI METRICS ---
+        function updateUXDashboard(metrics) {
+            // 1. Latency
+            const latVal = document.getElementById("ux-latency");
+            latVal.innerText = metrics.latency_total;
+            latVal.className = "metric-value " + (metrics.latency_total < 1.5 ? "val-good" : (metrics.latency_total < 3.0 ? "val-avg" : "val-bad"));
+            document.getElementById("ux-stt").innerText = metrics.latency_stt;
+            document.getElementById("ux-logic").innerText = metrics.latency_logic;
+            // 2. Sentiment
+            const score = metrics.sentiment;
+            const bar = document.getElementById("ux-sentiment-bar");
+            const text = document.getElementById("ux-sentiment-text");
+            const percent = ((score + 1) / 2) * 100;
+            bar.style.width = `${percent}%`;
+            if (score > 0.3) {
+                text.innerText = "Tích cực 😄";
+                text.style.color = "#2ecc71";
+                bar.style.background = "#2ecc71";
+            } else if (score < -0.3) {
+                text.innerText = "Tiêu cực 😡";
+                text.style.color = "#ff6b6b";
+                bar.style.background = "#ff6b6b";
+            } else {
+                text.innerText = "Trung tính 😐";
+                text.style.color = "#f1c40f";
+                bar.style.background = "#f1c40f";
+            }
+            // 3. Intent
+            document.getElementById("ux-intent").innerText = metrics.intent;
+        }
+        // --- 4. GIAO DIỆN ---
+        function log(msg, type='info') {
+            const logArea = document.getElementById('logArea');
+            if (document.querySelector('.msg.info')) {
+               // document.getElementById('logArea').innerHTML = '';
+            }
+            const div = document.createElement('div');
+            div.className = `msg ${type}`;
+            div.innerHTML = msg;
+            logArea.appendChild(div);
+            logArea.scrollTo({ top: logArea.scrollHeight, behavior: 'smooth' });
+        }
+        // --- 5. HÀM START CALL ---
+        async function startCall() {
+            const cid = document.getElementById('customerId').value;
+            const btnCall = document.getElementById('btnCall');
+            btnCall.disabled = true;
+            btnCall.innerHTML = '<i class="fas fa-spinner fa-spin"></i> ĐANG KẾT NỐI...';
+            document.getElementById('logArea').innerHTML = '';
+            document.getElementById('status').innerText = "Đang khởi tạo...";
+            audioQueue = [];
+            isPlaying = false;
+            if(currentAudioObject) currentAudioObject.pause();
+            try {
+                const formData = new FormData();
+                formData.append('customer_id', cid);
+                const res = await fetch(`${API_URL}/start-call`, { method: 'POST', body: formData });
+                await readStream(res);
+                btnCall.innerHTML = '<i class="fas fa-phone-slash"></i> ĐANG GỌI';
+                btnCall.style.background = '#95a5a6';
+                document.getElementById('recordBtn').disabled = false;
+                document.getElementById('status').innerText = "Nhấn giữ Mic để nói";
+            } catch (e) {
+                console.error(e);
+                log("Lỗi kết nối Server! Kiểm tra Terminal.", 'info');
+                btnCall.disabled = false;
+                btnCall.innerHTML = '<i class="fas fa-redo"></i> THỬ LẠI';
+            }
+        }
+        // --- 6. HÀM GHI ÂM ---
+        navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
+            initVisualizer(stream);
+            mediaRecorder = new MediaRecorder(stream);
+            mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
+            mediaRecorder.onstop = sendAudio;
+        }).catch(err => {
+            log("Lỗi: Không có quyền truy cập Micro", 'info');
+            document.getElementById('status').classList.add('error');
+        });
+        function startRecording() {
+            if (!mediaRecorder) return;
+            if(currentAudioObject) {
+                currentAudioObject.pause();
+                currentAudioObject = null;
+            }
+            audioQueue = [];
+            isPlaying = false;
+            document.getElementById('mascotBox').classList.remove('active');
+            audioChunks = [];
+            mediaRecorder.start();
+            document.getElementById('recordBtn').classList.add('recording');
+            document.getElementById('status').innerText = "Đang nghe bạn nói...";
+        }
+        function stopRecording() {
+            if (mediaRecorder && mediaRecorder.state === "recording") {
+                mediaRecorder.stop();
+                document.getElementById('recordBtn').classList.remove('recording');
+                document.getElementById('status').innerText = "Đang xử lý...";
+            }
+        }
+        async function sendAudio() {
+            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+            if (audioBlob.size < 1000) {
+                document.getElementById('status').innerText = "Nói quá ngắn, thử lại.";
+                return;
+            }
+            const cid = document.getElementById('customerId').value;
+            const formData = new FormData();
+            formData.append('file', audioBlob, 'voice.webm');
+            formData.append('customer_id', cid);
+            try {
+                const res = await fetch(`${API_URL}/chat-voice`, { method: 'POST', body: formData });
+                await readStream(res);
+            } catch (e) {
+                log("Lỗi xử lý AI", 'info');
+            }
+        }
+    </script>
+</body>
+</html>