<!– SEO Title

Xóa Logo Gemini Veo Tự Động Bằng JS Client-Side Trình Duyệt

1. Hạn Chế Của Xử Lý Cloud & Sức Mạnh Client-Side

Khi các công cụ AI sinh ảnh và video như Google Gemini Flow hay Veo ra mắt, chúng thường chèn các dải logo bán trong suốt (watermark) ở góc dưới bên phải nhằm bảo vệ bản quyền. Người dùng sáng tạo nội dung thường có nhu cầu xóa bỏ các logo này để tái sử dụng tư liệu.

Các công cụ xóa logo truyền thống thường yêu cầu người dùng phải tải file lên máy chủ đám mây (Cloud). Điều này mang lại ba nhược điểm chí mạng:

• Rủi ro bảo mật: Dữ liệu cá nhân nhạy cảm có thể bị lưu trữ trái phép trên máy chủ của bên thứ ba.
• Băng thông và Thời gian: Việc tải lên một video AI độ phân giải 4K nặng hàng trăm Megabytes sẽ tiêu tốn rất nhiều thời gian chờ đợi.
• Chi phí vận hành: Nhà phát triển phải trả hàng ngàn USD tiền thuê máy chủ GPU để xử lý ffmpeg và inpainting backend.

Giải pháp tối ưu và đột phá nhất chính là chuyển dịch 100% quá trình xử lý về phía Client-Side (Trình duyệt của người dùng). Bằng cách kết hợp HTML5 Canvas, Web Audio API và MediaRecorder, chúng ta có thể lợi dụng trực tiếp sức mạnh CPU/GPU của máy tính cá nhân để thực hiện các phép toán nội suy xóa logo theo thời gian thực.

2. Kỹ Thuật Nội Suy Biên & Reverse Alpha Blending

Logo của Gemini thường là một lớp phủ bán trong suốt (semi-transparent watermark). Để loại bỏ nó, thay vì dùng các bộ lọc làm nhòe (Blur) thô thiển làm hỏng chi tiết ảnh, chúng ta sử dụng kỹ thuật Inpainting (nội suy điểm ảnh) kết hợp Reverse Alpha Blending.

Bản chất của thuật toán là xác định vùng ma trận chứa logo (Bounding Box), sau đó sao chép một dải pixel sạch sẽ nằm ngay phía trên viền logo và kéo giãn (stretch) đè xuống để lấp đi phần hiển thị logo. Quá trình này diễn ra trên lớp Canvas của JavaScript với hàm drawImage():

// Hàm thực hiện nội suy lấp đầy vùng logo
// Lấy dải pixel mịn sát viền trên (y - 6) với độ dày 4 pixel để đè lấp logo
ctx.drawImage(
    canvas, 
    zone.x, zone.y - 6, zone.w, 4,  // Tọa độ và kích thước nguồn (vùng sạch)
    zone.x, zone.y, zone.w, zone.h  // Tọa độ và kích thước đích (vùng chứa logo)
);

Nhờ đặc tính tương đồng màu sắc của các vùng nền lân cận, phương pháp Inpainting cạnh viền này giúp logo cũ biến mất và hòa quyện mượt mà với phần nền gốc mà không gây ra vết xước kỹ thuật số.

3. Tự Động Hóa Tính Toán Ma Trận BBox Logo

Logo của Gemini/Veo luôn được gắn ở góc dưới bên phải, chiếm một tỷ lệ diện tích cố định so với toàn khung hình. Tuy nhiên, kích thước file đầu vào có thể rất đa dạng (vuông 1:1, dọc 9:16, hoặc ngang 16:9). Nếu lập trình tọa độ cố định, công cụ sẽ cắt lệch vị trí.

Giải pháp lập trình hàm getAutoLogoZone() sẽ tự động tính toán động (dynamic Bounding Box) dựa vào chiều rộng (`width`) và chiều cao (`height`) của bức ảnh:

function getAutoLogoZone(width, height) {
    // Logo thường chiếm khoảng 16% chiều rộng và 6% chiều cao
    const logoWidth = Math.round(width * 0.16);
    const logoHeight = Math.round(height * 0.06);
    
    // Đẩy lùi tọa độ x, y để căn chỉnh khớp chính xác cách lề
    return {
        x: width - logoWidth - Math.round(width * 0.02),
        y: height - logoHeight - Math.round(height * 0.03),
        w: logoWidth,
        h: logoHeight
    };
}

4. Stream Video Trên Canvas & Xử Lý Âm Thanh Bằng Web Audio API

Xóa logo trên video phức tạp hơn nhiều so với ảnh tĩnh. Thay vì cắt từng khung hình, chúng ta truyền video vào một phần tử <canvas> vô hình ẩn dưới nền, xử lý xóa logo trên từng khung hình qua vòng lặp requestAnimationFrame, sau đó dùng captureStream() để gom lại thành luồng video mới.

Tuy nhiên, captureStream() trên Canvas không có khả năng thu nhận âm thanh. Nếu chỉ lưu lại luồng này, video xuất ra sẽ bị câm. Bí quyết kỹ thuật (Hack) ở đây là sử dụng AudioContext để bóc tách luồng âm thanh gốc trực tiếp từ thẻ video, sau đó trộn (Muxing) trở lại bằng MediaStream:

// 1. Thu luồng video đã làm sạch logo từ Canvas (30 FPS)
const canvasStream = canvas.captureStream(30);

// 2. Đồng bộ nhanh Audio nguyên bản không decode/re-encode (giữ nguyên chất lượng)
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaElementSource(videoElement);
const dest = audioContext.createMediaStreamDestination();
source.connect(dest);

// 3. Gộp cả luồng hình ảnh sạch và luồng âm thanh nguyên bản
const combinedStream = new MediaStream([
    canvasStream.getVideoTracks()[0],
    dest.stream.getAudioTracks()[0]
].filter(Boolean));

// 4. Kích hoạt bộ ghi đĩa cục bộ
const mediaRecorder = new MediaRecorder(combinedStream, { 
    mimeType: 'video/webm;codecs=vp9',
    videoBitsPerSecond: 4000000 // Cấu hình Bitrate 4Mbps
});

5. Tối Ưu Hóa: Xử Lý Hàng Loạt (Batch Processing) & Đóng Gói JSZip

Khi có hàng chục hình ảnh hoặc đoạn phim ngắn cần xử lý, việc bắt người dùng chọn từng file sẽ gây lãng phí thời gian. Việc tích hợp cấu trúc Hàng đợi (Queue) bằng Promise giúp ứng dụng chạy song song nhiều bức ảnh tận dụng tối đa RAM, trong khi xếp hàng tuần tự các video để tránh gây tràn bộ nhớ đệm card đồ họa (GPU) của người dùng.

Thay vì tạo ra hàng loạt popup yêu cầu tải xuống khiến trình duyệt bị treo, chúng ta sử dụng thư viện mã nguồn mở JSZip để nén toàn bộ tệp tin sạch vào chung một file duy nhất .zip. Quá trình này tạo ra một tệp nhị phân ảo (Blob) bằng URL.createObjectURL() và kích hoạt lệnh click ảo.

6. Mã Nguồn Hoàn Chỉnh “Ultimate Version” (HTML/JS)

Dưới đây là phiên bản cao cấp nhất của ứng dụng. Phiên bản này tích hợp đầy đủ: Quản lý hàng loạt, thanh tiến trình (Progress Bar), thanh điều khiển Bitrate nén xuất video, chất lượng JPEG, và tính năng chèn đè chữ bản quyền cá nhân lên vị trí logo vừa xóa.

Bạn chỉ cần tạo một tệp index.html trống trên máy tính, dán đoạn mã này vào và mở trực tiếp bằng trình duyệt Chrome hoặc Safari:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xóa Logo Gemini/Veo Ultimate Edition</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 1000px; margin: 30px auto; padding: 20px; background: #f5f5f7; color: #1d1d1f; }
        .card { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
        .upload-area { border: 2px dashed #0071e3; padding: 40px; text-align: center; border-radius: 12px; cursor: pointer; background: #f0f7ff; font-weight: bold; font-size: 16px; }
        .config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; background: #f5f5f7; padding: 20px; border-radius: 12px; margin: 20px 0; font-size: 14px; }
        .config-group { display: flex; flex-direction: column; gap: 6px; }
        select, input[type="text"], input[type="file"] { padding: 8px; border-radius: 6px; border: 1px solid #d2d2d7; }
        .progress-container { display: none; margin: 20px 0; background: #e5e5ea; border-radius: 8px; overflow: hidden; height: 26px; }
        .progress-bar { height: 100%; background: #34c759; width: 0%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 13px; transition: width 0.3s; }
        .btn { background: #0071e3; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; margin-right: 15px;}
        .queue-container { max-height: 300px; overflow-y: auto; border: 1px solid #d2d2d7; border-radius: 8px; padding: 10px; margin-top: 15px; }
        .file-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #e5e5ea; font-size: 14px; }
    </style>
</head>
<body>

<div class="card">
    <h2>Ứng Dụng Xóa Logo AI Client-Side</h2>
    <div class="upload-area" onclick="document.getElementById('fileInput').click()">
        <p>🚀 Kéo & Thả hoặc Nhấp để chọn HÀNG LOẠT Ảnh và Video</p>
        <input type="file" id="fileInput" accept="image/*,video/*" multiple style="display:none">
    </div>

    <div class="config-grid">
        <div class="config-group">
            <label>⚡ <strong>Chất lượng Video:</strong></label>
            <select id="videoBitrate">
                <option value="8000000">Gốc (Bitrate cao - Siêu nét)</option>
                <option value="4000000" selected>Cân bằng (Nét & Nhẹ)</option>
            </select>
        </div>
        <div class="config-group">
            <label>✍️ <strong>Watermark mới (Text):</strong></label>
            <input type="text" id="wmText" placeholder="Ví dụ: @BanQuyen">
        </div>
    </div>

    <div class="progress-container" id="progressWrapper">
        <div class="progress-bar" id="progressBar">0%</div>
    </div>

    <div>
        <button class="btn" id="startBtn" disabled>Bắt đầu xử lý</button>
        <button class="btn" id="downloadZipBtn" style="display:none; background:#34c759;">Tải về (.ZIP)</button>
    </div>

    <div class="queue-container" id="queueContainer" style="display: none;">
        <div id="fileList"></div>
    </div>
</div>

<script>
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
const startBtn = document.getElementById('startBtn');
const downloadZipBtn = document.getElementById('downloadZipBtn');
const progressWrapper = document.getElementById('progressWrapper');
const progressBar = document.getElementById('progressBar');
const wmTextInput = document.getElementById('wmText');

let fileQueue = [];
let processedFiles = [];

fileInput.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);
    if (!files.length) return;
    
    fileQueue = files.map((f, i) => ({ id: i, file: f, type: f.type.split('/')[0], status: 'waiting' }));
    document.getElementById('queueContainer').style.display = 'block';
    startBtn.disabled = false;
    processedFiles = [];
    renderQueue();
});

function renderQueue() {
    fileList.innerHTML = fileQueue.map(item => 
        `<div class="file-item"><span>[${item.type.toUpperCase()}] ${item.file.name}</span><strong>${item.status}</strong></div>`
    ).join('');
}

function getAutoLogoZone(w, h) {
    const lw = Math.round(w * 0.16), lh = Math.round(h * 0.06);
    return { x: w - lw - Math.round(w * 0.02), y: h - lh - Math.round(h * 0.03), w: lw, h: lh };
}

function drawCustomWatermark(ctx, zone) {
    if (wmTextInput.value.trim() !== "") {
        ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
        ctx.font = `bold ${Math.max(12, Math.round(zone.h * 0.45))}px sans-serif`;
        ctx.textBaseline = "middle";
        ctx.fillText(wmTextInput.value.trim(), zone.x, zone.y + (zone.h / 2));
    }
}

startBtn.addEventListener('click', async () => {
    startBtn.disabled = true;
    progressWrapper.style.display = 'block';
    
    for (let i = 0; i < fileQueue.length; i++) {
        fileQueue[i].status = 'processing'; renderQueue();
        progressBar.style.width = `${Math.round((i / fileQueue.length) * 100)}%`;
        
        if (fileQueue[i].type === 'image') await processImage(fileQueue[i]);
        else await processVideo(fileQueue[i]);
        
        fileQueue[i].status = 'done';
    }
    
    progressBar.style.width = '100%';
    progressBar.innerText = 'Hoàn thành!';
    renderQueue();
    
    downloadZipBtn.style.display = 'inline-block';
    downloadZipBtn.onclick = () => {
        const zip = new JSZip();
        processedFiles.forEach(f => zip.file(f.name, f.blob));
        zip.generateAsync({ type: "blob" }).then((content) => {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(content);
            a.download = "Xoa_Logo_AI_Pro.zip";
            a.click();
        });
    };
});

function processImage(item) {
    return new Promise(resolve => {
        const reader = new FileReader();
        reader.onload = e => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = img.naturalWidth; canvas.height = img.naturalHeight;
                ctx.drawImage(img, 0, 0);
                
                const zone = getAutoLogoZone(canvas.width, canvas.height);
                ctx.drawImage(canvas, zone.x, zone.y - 6, zone.w, 4, zone.x, zone.y, zone.w, zone.h);
                drawCustomWatermark(ctx, zone);
                
                canvas.toBlob(blob => {
                    processedFiles.push({ name: "clean_" + item.file.name, blob: blob });
                    resolve();
                }, 'image/jpeg', 0.95);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(item.file);
    });
}

function processVideo(item) {
    return new Promise(resolve => {
        const video = document.createElement('video');
        video.src = URL.createObjectURL(item.file);
        video.muted = true; video.playsInline = true;
        
        video.onloadedmetadata = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = video.videoWidth; canvas.height = video.videoHeight;
            const zone = getAutoLogoZone(canvas.width, canvas.height);
            
            const canvasStream = canvas.captureStream(30);
            const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            const dest = audioCtx.createMediaStreamDestination();
            audioCtx.createMediaElementSource(video).connect(dest);
            
            const combinedStream = new MediaStream([canvasStream.getVideoTracks()[0], dest.stream.getAudioTracks()[0]].filter(Boolean));
            const mediaRecorder = new MediaRecorder(combinedStream, { mimeType: 'video/webm;codecs=vp9', videoBitsPerSecond: parseInt(document.getElementById('videoBitrate').value) });
            const chunks = [];
            
            mediaRecorder.ondataavailable = e => { if(e.data.size > 0) chunks.push(e.data); };
            mediaRecorder.onstop = () => {
                processedFiles.push({ name: "clean_" + item.file.name.replace(/.[^/.]+$/, "") + ".webm", blob: new Blob(chunks, { type: 'video/webm' }) });
                audioCtx.close();
                resolve();
            };
            
            mediaRecorder.start(); video.play();
            
            function step() {
                if (video.ended || video.paused) { mediaRecorder.stop(); return; }
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                ctx.drawImage(canvas, zone.x, zone.y - 6, zone.w, 4, zone.x, zone.y, zone.w, zone.h);
                drawCustomWatermark(ctx, zone);
                requestAnimationFrame(step);
            }
            step();
        };
    });
}
</script>
</body>
</html>

7. Đề Xuất Phần Cứng Phục Vụ Lập Trình Client-Side

Do việc biên dịch và ghi lại (MediaRecorder) các video độ phân giải cao trực tiếp trên trình duyệt sử dụng nhiều tài nguyên bộ nhớ đệm RAM và luồng xử lý CPU/GPU tích hợp, một môi trường phần cứng mạnh mẽ sẽ giúp bạn thử nghiệm WebCodecs không bị giật lag:

8. Tài Liệu Kỹ Thuật Tham Khảo

Mã nguồn và lý thuyết kỹ thuật trong bài viết được đúc kết từ tài liệu chuẩn hóa API của các nền tảng sau (nguồn dẫn thuần):

• developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
• developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
• stuk.github.io/jszip/