RAYMA Knowledge Hub & Video System Portal

Ecosystem Launchpad

Bảng Điều Hướng Hệ Sinh Thái Video 3 Chiều

Ba trung tâm vận hành với kiến trúc phân phối độc lập, bảo đảm tỷ lệ sẵn sàng 99.99%.

PLATFORM 01 · GỐC LIVE Hostinger LiteSpeed

video.rayma.vn

Máy chủ gốc máy tính vật lý Hostinger Cloud Enterprise (IP 153.92.11.186). Cấu hình LiteSpeed Web Server, máy chủ phân phối bản quyền, lưu trữ log lỗi tập trung (log_error.php) và dashboard theo dõi view_logs.php.

Hạ Tầng: Hostinger Cloud (153.92.11.186)

Web Engine: LiteSpeed Enterprise

Security Header: COOP / COEP Active

Trạng Thái Lưu Trữ: Production Live

Truy Cập video.rayma.vn

PLATFORM 02 · CLONE 1:1 EDGE Cloudflare Global

rayma-video-clone.pages.dev

Bản sao chép chuẩn hóa 1:1 phân phối qua 300+ Edge Data Centers của Cloudflare Pages. Tích hợp Cloudflare Worker thông minh giả lập API log_error.php, phục vụ trực tiếp file nhị phân .wasm.gz giải nén trong suốt.

Hạ Tầng: Cloudflare Pages Anycast

WASM Delivery: Gzip Direct On-the-Fly

Độ Trễ Phân Phối: < 15ms CDN Edge

Worker Proxy: Embedded _worker.js

Mở Bản Clone Cloudflare Edge

PLATFORM 03 · ULTRA STUDIO Next-Gen Edge

rayma-video-ultra.pages.dev ULTRA

Bản Siêu Công Nghệ Video Studio thế hệ mới. Giao diện Dark UI tân tiến nhất, tích hợp bộ kiểm soát phần cứng WebGL/WASM MT, bộ tối ưu bộ nhớ thông minh và cơ chế giải phóng bộ đệm tự động tránh crash Safari/Chrome.

Giao Diện: Ultra Modern Studio

GPU Acceleration: Hardware WebGL 2.0

Engine Sẵn Sàng: Multi-track + 3D Parallax

Phân Phối: Cloudflare Edge Pages

Khởi Chạy Ultra Studio

Interactive Knowledge Graph

Đồ Thị Tri Thức Kiến Trúc Toàn Dự Án

Trực quan hóa cấu trúc phụ thuộc AST Tree-sitter quét từ toàn bộ mã nguồn video.rayma.vn.

Mở Tab Độc Lập Tải File graph.json

Graphify Engine

| 2,700 Nodes | 6,668 Edges | 127 Communities

God Nodes (Điểm Tập Trung Cốt Lõi) Các điểm neo có liên kết dày đặc nhất: ue() (390 liên kết), a() (113 liên kết), i() (112 liên kết) điều phối vòng đời React & Virtual DOM.

Tách Biệt Module (Zero Import Cycles) Độ độc lập kiến trúc đạt 100%, không phát hiện vòng lặp phụ thuộc (0 Import Cycles), đảm bảo khả năng mở rộng và nâng cấp độc lập từng phân hệ.

Độ Tin Cậy Khai Thác (Extraction Rate) 86% quan hệ được trích xuất trực tiếp qua phân tích AST Tree-sitter tĩnh, 14% suy luận gián tiếp qua luồng runtime call graph.

Architecture Deep-Dive

Cẩm Nang Kiến Trúc & 5 Phân Hệ Cốt Lõi

Điểm neo kỹ thuật, thuật toán xử lý và luồng dữ liệu của toàn bộ hệ thống xử lý video RAYMA.

01

AutoCut Engine — Phân Hệ Xử Lý Video Đa Luồng & Ghép Batch

File nguồn: app.jsx · Trách nhiệm: Multi-track Pipeline, Smart Watermark, Batch Rendering

Status: Production Ready

AutoCut Engine là hạt nhân xử lý video tự động hàng loạt phục vụ cho 12 thương hiệu của tập đoàn RAYMA (TikTok, Reels, Shorts). Ứng dụng chạy hoàn toàn phía trình duyệt (Client-Side), không tiêu tốn tài nguyên GPU máy chủ và bảo mật 100% dữ liệu media.

Kiến Trúc Bộ Nhớ Ảo (Virtual Storage):

Sử dụng IndexedDB (AutoCutIDB / store fs_handles) kết hợp File System Access API để lưu trữ trực tiếp File Handle từ đĩa cứng người dùng, cho phép đọc/ghi hàng chục GB video không lo tràn RAM.

Smart Dynamic Watermarking:

Tự động căn chỉnh vị trí logo (Top-Left, Top-Right, Bottom-Left, Bottom-Right, Center), hỗ trợ hiệu ứng mờ dần (Fade-in/Fade-out), điều chỉnh độ trong suốt Opacity động theo từng frame của video.

Luồng Xử Lý (Execution Pipeline):

1. Media Ingestion: Load File Handle qua verifyPermission() & IndexedDB cache.
2. Frame Slicing: Trích xuất frame timecodes theo thông số preset cấu hình.
3. Canvas Composition: Vẽ khung hình gốc + lớp watermark + typography động trên Canvas 2D.
4. WebAssembly Piping: Chuyển luồng stream sang FFmpeg WASM MT qua WorkerFS.
5. Output Delivery: Kết xuất file MP4 H.264 / AAC chuẩn nén bitrate tối ưu.

Code Anchor Snippet app.jsx

const DB_NAME = 'AutoCutIDB';
const STORE_NAME = 'fs_handles';

const saveHandle = async (key, handle) => {
  const db = await getDB();
  const tx = db.transaction(STORE_NAME, 'readwrite');
  tx.objectStore(STORE_NAME).put(handle, key);
};

// Stream to WebAssembly via WorkerFS
await ffmpeg.FS('mount', 'WORKERFS', {
  files: [inputFile]
}, '/work');

⚠️ Điểm neo an toàn: Không bypass hàm verifyPermission(); luôn check trạng thái tx.oncomplete để tránh khoá IndexedDB transaction.

02

PhotoLoop 3D Engine — Hiệu Ứng Chiều Sâu 3D Parallax & Ảnh Động Lặp

File nguồn: photoloop.jsx · Trách nhiệm: Depth Map Synthesis, Dynamic Camera Trajectories, Seamless Looping

Status: AI Synthesis Active

PhotoLoop 3D Engine là đột phá công nghệ biến ảnh sản phẩm 2D tĩnh (lookbook thời trang, phụ kiện, streetwear) thành video chuyển động 3D chiều sâu ngoạn mục mà không cần chụp multi-angle hoặc quét 3D scanner.

Thuật Toán Depth Gradient Synthesis:

Tự động ước tính bản đồ độ sâu (Depth Map) dựa trên độ sáng (Luminance), tiêu cự trung tâm và thuật toán phân lớp tiền cảnh - hậu cảnh (Foreground/Background separation).

Quỹ Đạo Camera Đa Chiều (6 Trajectories):

Hỗ trợ các chuyển động quay camera: Orbital Circle (quay quanh trục), Dolly Zoom (Vertigo effect), Horizontal Pan (lướt ngang), Vertical Tilt (lướt dọc), Roll và Infinity 8-Loop (quỹ đạo số 8 vô cực).

Công Nghệ Chống Xé Hình & Seamless Loop:

Khi camera di chuyển theo chiều sâu, các vùng khuất (occlusions) dễ để lại vệt trống. PhotoLoop 3D áp dụng kỹ thuật Edge Inpainting nội suy trên Canvas kết hợp hàm sóng điều hoà lượng giác (sin/cos timecode smoothing) giúp điểm đầu và điểm cuối của video khớp nối 100%, lặp vô tận không giật mắt.

Camera Trajectory Matrix photoloop.jsx

// 3D Parallax Camera Interpolation
const progress = frame / totalFrames;
const angle = progress * Math.PI * 2;

// Infinity 8-Loop Motion
const offsetX = Math.sin(angle) * amplitudeX;
const offsetY = Math.sin(angle * 2) * amplitudeY;

// Apply depth displacement mapping
applyDepthDisplacement(ctx, srcImg, depthMap, offsetX, offsetY);

💡 Mẹo hiệu năng: Sử dụng TypedArrays (Float32Array) cho ma trận pixel depth để tăng 300% tốc độ nội suy hình ảnh trên CPU.

03

Face Guard Engine — Bộ Nhận Diện & Khóa Bảo Vệ Khuôn Mặt AI

File nguồn: photoloop.jsx:671, 708, 1571 · Trách nhiệm: Face Depth Flattening, Anti-Distortion, Safe Watermarking

Status: AI Guard Active

Face Guard Engine giải quyết bài toán cốt tử trong xử lý ảnh thời trang & người mẫu: khi áp dụng hiệu ứng chiều sâu 3D Parallax hoặc chèn watermark thương hiệu, khuôn mặt người mẫu rất dễ bị biến dạng, kéo méo vẹo hoặc bị logo đè mất biểu cảm.

Cơ Chế Face Depth Flattening:

Khi AI nhận diện thấy khuôn mặt qua hàm detectFaceFromCanvas(), hệ thống tự động làm phẳng (flatten) bản đồ độ sâu quanh vùng tâm mặt (cx, cy, radius), biến khuôn mặt thành một mặt phẳng cứng cáp (rigid body). Khi camera 3D di chuyển, gương mặt xoay tự nhiên mà KHÔNG bị gãy vẹo sống mũi hay méo mắt miệng.

Bộ Nhớ Đệm Nhận Diện Siêu Tốc:

Triển khai faceDetectionCacheRef bằng Map trong bộ nhớ. Mỗi ảnh chỉ cần quét AI nhận diện đúng 1 lần duy nhất, các frame sau tái sử dụng toạ độ tức thì dưới 0.1ms.

Vùng Cấm Đè Watermark (Safe Area Exclusion):

Tự động đối chiếu toạ độ bounding box của khuôn mặt với vị trí đặt logo/watermark. Nếu toạ độ watermark trùng hoặc giao nhau với bán kính an toàn (faceRadius = 0.20), AutoCut sẽ tự động dời logo sang góc đối xứng an toàn nhất mà không cần người dùng chỉnh tay.

Face Lock & Flattening photoloop.jsx:1571-1620

// 3D Face Guard Scan & Lock
const face = await detectFaceFromCanvas(canvas);
faceDetectionCacheRef.current.set(cacheKey, face);

if (face && face.hasFace) {
  const focusX = Number(face.cx.toFixed(3));
  const focusY = Number(face.cy.toFixed(3));
  const faceRadius = Number(face.radius.toFixed(3)) || 0.20;

  // Flatten depth in face region to prevent warp
  applyFaceDepthFlattening(depthMap, focusX, focusY, faceRadius);
}

🛡️ Cam kết chất lượng: 100% hình ảnh có người mẫu thời trang của RAYMA Corporation giữ nguyên thần thái khuôn mặt tự nhiên tuyệt đối.

04

WebAssembly FFmpeg & WorkerFS — Bộ Chuyển Mã Tốc Độ Cao Client-Side

File nguồn: lib/ffmpeg.js, lib/ffmpeg-core-mt.js, lib/ffmpeg-core-mt.wasm.gz · Trách nhiệm: Multi-threading, Zero-Copy Virtual FS

Status: Multi-Threading Active

WebAssembly FFmpeg Engine là bộ máy render video mạnh mẽ chạy trực tiếp bằng nhị phân C/C++ biên dịch sang WebAssembly (WASM). Với sự kết hợp của SharedArrayBuffer và WorkerFS, hiệu năng render tiệm cận 85% tốc độ của FFmpeg native trên máy tính cá nhân.

Kiến Trúc Đa Luồng (Multithreading MT):

Sử dụng ffmpeg-core-mt.js tận dụng toàn bộ số nhân CPU máy tính người dùng (4, 8, 16 Cores). Tốc độ encode H.264 nhanh gấp 4 đến 8 lần so với phiên bản đơn luồng (Single Thread).

Cơ Chế Stream WorkerFS (Zero-Copy):

Gắn kết tệp tin ảo trực tiếp từ Blob/File vào hệ thống tệp của Emscripten bằng WorkerFS. Không cần sao chép toàn bộ video vào RAM JavaScript, giảm 80% áp lực RAM, loại bỏ triệt để lỗi Crash trình duyệt Out of Memory (OOM).

Yêu Cầu Tiên Quyết Bảo Mật HTTP (COOP & COEP):

Để trình duyệt cho phép kích hoạt SharedArrayBuffer đa luồng, máy chủ bắt buộc phải trả về 2 headers: Cross-Origin-Opener-Policy: same-origin và Cross-Origin-Embedder-Policy: require-corp.

WASM MT Initialization lib/ffmpeg.js

// Check SharedArrayBuffer availability
const isMTSupported = typeof SharedArrayBuffer !== 'undefined';

const ffmpeg = createFFmpeg({
  corePath: isMTSupported 
    ? 'lib/ffmpeg-core-mt.js' 
    : 'lib/ffmpeg-core.js',
  log: false
});

await ffmpeg.load();
// High speed multithread render initialized

⚡ Tối ưu hoá nhị phân: Bản ffmpeg-core-mt.wasm.gz dung lượng 25MB được nén Gzip còn 9MB, tải về chỉ mất 0.5s trên Cloudflare Edge CDN.

05

Gateway & Telemetry Engine — Hạ Tầng Kép & Giám Sát Lỗi Thời Gian Thực

File nguồn: .htaccess, _headers, _worker.js, log_error.php, view_logs.php · Trách nhiệm: COOP/COEP Enforcement, Telemetry Monitoring

Status: Telemetry 24/7

Gateway & Telemetry Engine đảm nhận nhiệm vụ điều phối an ninh HTTP, bảo đảm mọi asset được phục vụ đúng MIME type và giám sát sức khỏe trải nghiệm của người dùng trên toàn bộ các trình duyệt thông qua hệ thống log lỗi client-side.

Kiến Trúc Dual Backend Độc Lập:

Hỗ trợ song song cả môi trường Apache/LiteSpeed trên Hostinger (thông qua tệp điều khiển .htaccess) và môi trường Edge Serverless trên Cloudflare Pages (thông qua tệp _headers và mã điều phối _worker.js).

Hệ Thống Telemetry Thời Gian Thực:

Tự động ghi nhận mọi sự cố liên quan đến WebAssembly, bộ nhớ RAM, phiên bản trình duyệt và lỗi render gửi về /log_error.php. Ban quản trị có thể giám sát trực tiếp qua trang theo dõi view_logs.php.

Cloudflare Worker Transparent Decompression:

Tại tầng Edge của Cloudflare, file _worker.js chặn (intercept) các yêu cầu tới tệp nhị phân .wasm, tự động định tuyến đến bản nén sẵn .wasm.gz và trả về header Content-Encoding: gzip, giúp tiết kiệm 70% băng thông tải trang.

Edge Worker Interceptor _worker.js

// Intercept WASM for transparent gzip serving
if (url.pathname.endsWith('.wasm')) {
  const gzUrl = new URL(url.pathname + '.gz', request.url);
  const resp = await env.ASSETS.fetch(gzUrl);
  const headers = new Headers(resp.headers);
  headers.set('Content-Type', 'application/wasm');
  headers.set('Content-Encoding', 'gzip');
  headers.set('Cross-Origin-Opener-Policy', 'same-origin');
  headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
  return new Response(resp.body, { headers });
}

📊 Giám sát: Xem trực tiếp log người dùng tại video.rayma.vn/view_logs.php.

Engineer's Field Manual

Bảng Cheat Sheet Nâng Cấp Mã Nguồn Cho Kỹ Sư

Điểm neo an toàn, hàm cốt lõi, cảnh báo chống lỗi tiềm ẩn và quy trình kiểm toán mã nguồn.

6 Core Modules Documented

Tệp Nguồn / File	Phân Hệ	Hàm Cốt Lõi / Core Functions	Điểm Neo Nâng Cấp An Toàn	Cấm & Bẫy Lỗi (Anti-Patterns)
app.jsx	AutoCut	getDB(), saveHandle(), verifyPermission(), renderVideo()	Đọc/ghi qua IndexedDB transaction, giữ nguyên cấu trúc async Promise.	Không nạp cả file video 2GB vào mảng Uint8Array bằng JS (sẽ gây OOM lập tức).
photoloop.jsx	PhotoLoop 3D	applyDepthDisplacement(), generateDepthMap(), renderLoop()	Dùng Float32Array cho ma trận toạ độ; khống chế biên độ offset < 0.15.	Không thay đổi hàm điều hoà sin/cos chu kỳ 2π làm hỏng tính chất seamless loop.
photoloop.jsx	Face Guard	detectFaceFromCanvas(), faceDetectionCacheRef, applyFaceFlattening()	Kiểm tra cache trước khi chạy detector; giới hạn bán kính bảo vệ faceRadius 0.15 - 0.25.	Không gọi AI detector trên mỗi frame (giảm FPS xuống 2fps); chỉ quét frame 0.
lib/ffmpeg.js	WebAssembly	createFFmpeg(), ffmpeg.load(), ffmpeg.run(), ffmpeg.FS()	Duy trì fallback tự động sang bản đơn luồng nếu SharedArrayBuffer bị trình duyệt chặn.	Không load song song nhiều instance FFmpeg trong cùng 1 tab trình duyệt.
_worker.js / _headers	Edge Gateway	fetch(request, env), interceptWasm(), mockLogError()	Luôn trả về đủ bộ 2 headers COOP same-origin và COEP require-corp trên mọi route.	Cấm xoá header Content-Encoding: gzip đối với file .wasm.gz phục vụ on-the-fly.
log_error.php	Telemetry	file_put_contents('user_errors.log'), CORS handler	Giới hạn dung lượng file log tối đa 10MB và lọc sạch chuỗi nhạy cảm (sanitization).	Không lưu token người dùng hay IP thô mà không băm hash bảo mật.

Checklist Kiểm Thử Trước Khi Triển Khai (Pre-Flight Checks)

✓ Kiểm tra SharedArrayBuffer: window.crossOriginIsolated === true trên console trình duyệt.
✓ Kiểm tra nạp file WASM MT: File ffmpeg-core-mt.wasm tải thành công với status 200/206.
✓ Kiểm tra Face Guard: Toạ độ khuôn mặt nhận diện trong phạm vi [0..1], không gây NaN.
✓ Kiểm tra WorkerFS: Render thử video 500MB đảm bảo RAM heap không tăng quá 150MB.

Thông Tin Hạ Tầng & Điểm Liên Kết (Ecosystem Anchors)

Cổng Tri Thức (Portal): trithuc.rayma.vn / rayma-trithuc.pages.dev

Máy Chủ Gốc Live (Hostinger): 153.92.11.186 (FTP User: u610424004)

Tài Khoản Cloudflare Edge: rayma.asia (eec0999f19f3722c2216329e92f47df1)

Tổ Chức Điều Hành: RAYMA Corporation Enterprise