ĐỀ ÁN THAM DỰ UNESCO YOUTH HACKATHON 2026

TÊN DỰ ÁN: EchoShield Vietnam Khẩu hiệu (Tagline): Ngừng hùa theo. Bảo vệ nạn nhân. Chữa lành không gian mạng. (Pause the pile-on. Support the person. Repair the space.)

TÓM TẮT DỰ ÁN (EXECUTIVE SUMMARY)

Dự án EchoShield Vietnam giải quyết một thách thức nghiêm trọng nhưng thường bị bỏ qua trong giáo dục năng lực truyền thông số (MIL): Sự thờ ơ và bất lực của đám đông nhân chứng (bystanders) trước bạo lực mạng và các làn sóng tấn công hội đồng (online pile-ons). Khoảng 60-80% thanh thiếu niên đã từng chứng kiến bạo lực mạng ^[1]. Tuy nhiên, đa số chọn cách im lặng hoặc hùa theo vì sợ bị liên lụy hoặc không biết cách can thiệp an toàn.

EchoShield tập trung giải quyết MỘT VẤN ĐỀ DUY NHẤT thực tế và nhức nhối nhất trong đời sống học đường số Việt Nam hiện nay: Sự hủy hoại danh dự học sinh qua các trang Confession ẩn danh trường học (Anonymous School Confessions).

Dự án chuyển dịch trọng tâm giáo dục từ "lý thuyết một chiều" sang "tập dượt phản xạ hành động" thông qua một hệ sinh thái mô phỏng tương tác gồm 5 cấu phần chính:

1. Pile-On Lab (Trò chơi sinh tồn xã hội): Trò chơi visual novel tương tác phân nhánh dài trên 2 tiếng ("Bão Confession") với 5 Chương lớn, 4 kết cục (Endings) và hệ thống chỉ số động (Vy's Trust, Stress, Viral Index) giúp học sinh tập đưa ra các quyết định can thiệp an toàn.
2. CARE Coach (Trợ lý phản ứng nhanh): Trợ lý định hướng sơ cứu tâm lý (PFA) kết nối người dùng đến các nguồn lực hỗ trợ thực tế khi có tình huống khẩn cấp.
3. Evidence Path (Lưu trữ an toàn): Hướng dẫn ghi nhận bằng chứng riêng tư mã hóa đầu cuối cục bộ.
4. Upstander Studio (Mẫu tin nhắn hỗ trợ): Các mẫu câu an ủi riêng tư tinh tế giúp bảo vệ nạn nhân mà không bị gắn mác mách lẻo (snitch).
5. Recovery Map (Bản đồ hồi phục): Kết nối nạn nhân trực tiếp với phòng tham vấn học đường và chuyên gia tâm lý học đường địa phương.
6. Mascot đồng hành Shieldy: Linh vật gấu trúc công nghệ thông minh, đồng hành cùng người chơi trong các tình huống khó khăn, đưa ra gợi ý an toàn và động viên tinh thần.
7. Sidequests điều tra: Các nhiệm vụ phụ (thu thập manh mối, giải mã tin nhắn ẩn) giúp học sinh rèn luyện kỹ năng Fact-Check (Kiểm chứng thông tin) và tìm ra kẻ đứng sau trang Confession.

1) ĐỘI NGŨ THỰC HIỆN & PHÂN CHIA VAI TRÒ (TEAM ROLES)

Chúng tôi không xây dựng dự án này chỉ để đi thi lấy giải rồi bỏ. EchoShield được định hình từ lòng nhiệt thành của những người trẻ thực sự muốn giải quyết bấn loạn học đường. Từng thành viên cam kết đồng hành lâu dài để đưa sản phẩm đi vào đời sống thực tế:

• Vũ Bình Minh (Trưởng dự án & Điều phối - Lead): Chịu trách nhiệm kết nối thực địa với các trường học THPT, thiết lập quan hệ đối tác đưa Toolkit giảng dạy vào các tiết sinh hoạt lớp chính thức, đảm bảo tính pháp lý và quy trình an toàn thông tin (Safeguarding).
• Nguyễn Đào Phương Uyên (MIL & Thiết kế Nội dung): Nghiên cứu sâu các tài liệu MIL (Media and Information Literacy) của UNESCO, chuyển hóa lý thuyết khô khan thành kịch bản tương tác và bộ tài liệu hướng dẫn giáo viên nhằm tối đa hóa tác động giáo dục số.
• Trần Thị Như Quỳnh (Thiết kế UX/UI & Mỹ thuật): Chuyển dịch kịch bản chữ thành hình ảnh truyện tranh (Webtoon) sinh động, gần gũi với thị hiếu Gen Z, tối ưu hóa giao diện ứng dụng để học sinh cảm thấy an tâm và dễ tương tác.
• Phạm Phú Nguyễn Hưng (Phát triển Sản phẩm - Dev): Lập trình bản chạy thử (MVP) Web-app tối giản (<2MB) dùng PhaserJS để chạy mượt mà ngay cả trên thiết bị RAM 2GB hoặc mạng 3G yếu của học sinh vùng sâu vùng xa.
• Lê Ngọc Hiếu Nhi (Đánh giá & Kiểm chứng - QA/Test): Trực tiếp chạy thử nghiệm thực địa (Pilot Test), quan sát hành vi, ghi chép biểu cảm khuôn mặt của người chơi thử để liên tục tinh chỉnh kịch bản theo hướng thấu cảm thực tế nhất.

Ma trận trách nhiệm (RACI Matrix)

2) VẤN ĐỀ THỰC TẾ & PHÂN TÍCH THỊ TRƯỜNG (PROBLEM STATEMENT)

A. Vấn đề thực tế từ đời sống học đường

Chúng tôi bắt đầu dự án từ một quan sát nhức nhối ở các trường học Việt Nam: Sự bùng nổ của các trang "Confession" ẩn danh trên mạng xã hội. Đây là những kênh tự phát ngoài tầm kiểm soát của nhà trường, nơi học sinh tự do gửi bài bôi nhọ, vu khống bạn bè.

Khi một bài viết công kích xuất hiện, thuật toán câu tương tác của Facebook/TikTok lập tức đẩy nó lên xu hướng của hàng ngàn học sinh cùng trường. Một cơn "bão phẫn nộ tập thể" (online pile-ons) bùng phát dồn dập trong vài giờ đầu. Nạn nhân bị khủng hoảng tinh thần nghiêm trọng, sợ hãi không dám đi học, rơi vào trạng thái cô độc và u uất ^[2].

Nguyên nhân sâu xa khiến vấn nạn này leo thang không nằm ở admin trang Confession, mà nằm ở sự tiếp tay thụ động của đám đông nhân chứng (bystanders). Đó là những học sinh cùng trường bấm Like, thả phẫn nộ, tag tên bạn bè hoặc chia sẻ bài phốt chỉ để mua vui ^[3]. Đa phần các em chọn im lặng vì sợ nếu lên tiếng bênh vực sẽ bị đám đông quay sang "tế sống" và cô lập, hoặc đơn giản là các em không biết cách can thiệp thế nào cho an toàn.

B. Phân tích thị trường: Tại sao chưa có giải pháp triệt để?

Hiện tại trên thị trường chưa có bất kỳ giải pháp nào xử lý triệt để được vấn đề này do các lỗ hổng thực tế sau:

• Nhà trường cấm đoán: Ra nội quy cấm học sinh lập và đọc trang Confession.
  • Thực tế: Thất bại hoàn toàn. Các trang này ẩn danh ngoài trường học, cấm đoán chỉ khiến học sinh chuyển sang các nhóm kín kín kẽ hơn (Telegram, Discord), làm khoảng cách thế hệ càng xa.
• Báo cáo (Report) lên Facebook/TikTok: Gửi yêu cầu gỡ bài viết vi phạm tiêu chuẩn cộng đồng.
  • Thực tế: Quá chậm trễ. Nền tảng thường mất 24 đến 72 giờ để duyệt gỡ bài. Trong thời gian đó, danh dự và tâm lý của nạn nhân đã bị bão dư luận nghiền nát hoàn toàn.
• Tuyên truyền lý thuyết một chiều: Các bài giảng đạo đức khô khan kiểu "không được nói xấu bạn bè" dưới sân cờ.
  • Thực tế: Học sinh nghe tai này ra tai kia. Lý thuyết suông không tạo ra phản xạ hành vi. Khi đối mặt với bão dư luận thực tế, học sinh bị tê liệt bởi nỗi sợ bị liên lụy nên vẫn chọn im lặng hùa theo.

[!IMPORTANT] Lỗ hổng lớn nhất: Các giải pháp hiện nay luôn đi sau sự việc hoặc chỉ khuyên nạn nhân né tránh (victim-centric). Chưa có công cụ nào tập trung đào tạo phản xạ hành động cho đám đông nhân chứng (bystanders) để ngắt mạch lan truyền tin độc hại ngay tại khoảnh khắc tương tác đầu tiên trên màn hình điện thoại.

3) THUYẾT THAY ĐỔI (THEORY OF CHANGE) & SỰ PHÙ HỢP VỚI UNESCO

Chúng tôi áp dụng mô hình Thuyết Thay Đổi (Theory of Change - ToC) chuẩn quốc tế để kết nối chặt chẽ giữa nguyên nhân gốc rễ và giải pháp thực tế:

A. Chuỗi Logic Thuyết Thay Đổi (ToC) của EchoShield

1. Vấn đề cốt lõi: Học sinh bị bạo lực mạng và bôi nhọ danh dự trên các trang Confession ẩn danh, trong khi bạn bè xung quanh im lặng tiếp tay vì sợ bị liên lụy.
2. Nguyên nhân sâu xa (Root Causes):
   • Hiệu ứng người ngoài cuộc: Sợ can thiệp sẽ trở thành mục tiêu tiếp theo của kẻ bắt nạt.
   • Thiếu kỹ năng thực tế: Mơ hồ giữa đùa giỡn và bạo lực mạng; không biết cách can thiệp an toàn.
   • Thuật toán phẫn nộ: MXH ưu tiên đẩy các nội dung tranh cãi thu hút tương tác.
   • Khoảng cách thế hệ: Sợ người lớn phản ứng cực đoan (tịch thu điện thoại, cấm mạng) nên giấu kín vấn đề.
3. Giải pháp trong mơ (Dream Solution) dựa trên nguồn lực người trẻ:
   • Pile-On Lab: Không gian giả lập an toàn để học sinh "diễn tập" đối mặt với bão truyền thông học đường, thấy trước hậu quả của các lựa chọn hành vi.
   • CARE Coach: Trợ lý ảo định hướng sơ cứu tâm lý (PFA) và lưu chứng cứ mã hóa cục bộ.
   • Upstander Studio & Recovery Map: Cung cấp mẫu câu nhắn tin hỗ trợ riêng tư (Quiet Upstanding) và kết nối nhanh với chuyên gia/phòng tham vấn học đường.
4. Kết quả đo lường được (Measurable Outcomes):
   • Giảm tỷ lệ hùa theo phẫn nộ (Like/Share bài phốt); tăng tỷ lệ nhắn tin an ủi nạn nhân.
   • Học sinh biết cách lưu trữ bằng chứng bảo mật để nộp cho thầy cô thay vì phát tán rộng rãi.
   • Nhà trường nhận diện sớm xu hướng bắt nạt thông qua báo cáo Stress Index ẩn danh.

B. Sơ đồ chuỗi logic (ToC Diagram)

graph TD
    A[Nguyên nhân gốc rễ: Sợ bị liên lụy + Thuật toán phẫn nộ + Áp lực đồng lứa hóng drama] --> B(Hoạt động 1: Game Pile-On Lab mô phỏng duy nhất kịch bản bão Confession trường học)
    A --> C(Hoạt động 2: CARE Coach hướng dẫn sơ cứu tâm lý & lưu bằng chứng bảo mật)
    
    B --> D[Đầu ra: Học sinh biết áp dụng Fact-Check Sandbox phản biện tin đồn; gửi tin nhắn an ủi riêng tư]
    C --> E[Đầu ra: Nạn nhân tự bảo vệ trang cá nhân; lưu bằng chứng mã hóa nộp nhà trường]
    
    D --> F{Kết quả ngắn hạn: Giảm 50% hành vi hùa theo phẫn nộ; tăng tỷ lệ hỗ trợ nạn nhân lên 85%}
    E --> F
    
    F --> G[Tác động dài hạn: Triệt tiêu văn hóa công kích ẩn danh, xây dựng không gian học đường lành mạnh]

C. UNESCO Fit: Làm thế nào để dự án đi xa hơn khi thắng giải?

EchoShield không dừng lại ở một bản demo đi thi. Chúng tôi có một tầm nhìn nhất quán và cần sự đồng hành của UNESCO làm đòn bẩy thay đổi hệ thống:

• Uy tín & Thẩm định (Endorsement): Sự bảo trợ từ Văn phòng UNESCO Hà Nội là tấm vé vàng giúp dự án vượt qua các rào cản hành chính, tiếp cận trực tiếp với Bộ Giáo dục & Đào tạo Việt Nam để chính thức tích hợp Toolkit giảng dạy vào chương trình Giáo dục Công dân/Hoạt động trải nghiệm hướng nghiệp.
• Mạng lưới trường học (ASPnet): UNESCO sẽ giúp chúng tôi triển khai thử nghiệm thực tế (Pilot) trên diện rộng thông qua Mạng lưới các trường liên kết của UNESCO (ASPnet) tại Việt Nam.
• Nhân rộng khu vực Đông Nam Á: UNESCO hỗ trợ tài trợ dịch thuật và cố vấn văn hóa để điều chỉnh bối cảnh game, nhân rộng dự án sang các nước Đông Nam Á khác (Thái Lan, Indonesia, Philippines) - nơi bão mạng học đường cũng đang cực kỳ nhức nhối.

4) THIẾT KẾ SẢN PHẨM & TRẢI NGHIỆM CHI TIẾT (GAME & UX)

A. Thiết kế 1 Kịch bản Game duy nhất: "Bão Confession" (The Confession Storm)

Game được thiết kế dưới dạng Visual Novel phân nhánh kịch tính chia thành 5 Chương hoàn chỉnh tương đương hơn 120 phút trải nghiệm cốt truyện (Cinematic Branching Script hỗ trợ Gemini Omni / Seedance sinh video anime Nhật Bản). Đặc biệt, dự án đã có sẵn bản chạy thử thực tế (MVP) viết bằng Next.js + Zustand + Dexie (IndexedDB) lưu trữ tại thư mục game-demo/ để kiểm chứng và chạy thử.

• Bối cảnh phức tạp:
  • Người chơi nhập vai Nam (16 tuổi): Đang là ứng viên sáng giá nhất cho chiếc ghế Chủ tịch CLB Truyền thông trường THPT – tấm vé vàng giúp Nam đạt học bổng du học 4 tỷ, niềm hy vọng duy nhất khi gia đình đã phải thế chấp sổ đỏ để đầu tư cho cậu. Cha mẹ Nam đặt kỳ vọng cực lớn vào cột mốc này.
  • Nạn nhân Vy: Bạn thân từ thuở ấu thơ của Nam. Vy bị một bài đăng Confession ẩn danh vu khống ăn cắp quỹ lớp để mua đồ hiệu kèm bức ảnh chụp lén cảnh cô bé đứng cự cãi với thủ quỹ. Làn sóng tấn công hội đồng (online pile-on) bùng nổ dữ dội.
  • Thế lực ẩn danh: Kẻ giật dây trang Confession ẩn danh chính là đối thủ cạnh tranh trực tiếp chiếc ghế Chủ tịch CLB với Nam. Kẻ này nắm giữ những bí mật riêng tư và trực tiếp gửi tin nhắn đe dọa Nam.

graph TD
    Start["Vy bị vu khống ăn cắp trên Confession"] --> Dilemma1{"DILEMMA 1:<br>Cơ hội tương lai (Chủ tịch CLB)<br>VS. Tình bạn thân thiết (Vy)"}
    
    Dilemma1 -->|Lựa chọn A: Bênh Vy công khai| PublicJustice["Mất ghế Chủ tịch, bị cô lập,<br>cha mẹ thất vọng.<br>Vy được minh oan nhưng dằn vặt."]
    Dilemma1 -->|Lựa chọn B: Im lặng vì tương lai| PrivateSafety["Nam làm Chủ tịch.<br>Vy bị phản bội, trầm cảm nặng,<br>bỏ học. Nam dằn vặt hèn nhát."]
    
    PublicJustice --> Dilemma2{"DILEMMA 2:<br>Minh oan nhanh (Lộ tin nhạy cảm)<br>VS. Bảo mật Evidence Path<br>(An toàn nhưng chậm trễ)"}
    PrivateSafety --> Dilemma2
    
    Dilemma2 -->|Lựa chọn A: Gửi thẳng ảnh gốc| QuickLeaked["Minh oan ngay lập tức.<br>Nhưng tin nhắn riêng tư bị lộ,<br>Vy bị bố mẹ bạo hành và bắt chuyển trường."]
    Dilemma2 -->|Lựa chọn B: Dùng Evidence Path làm mờ AI| SecureDelayed["Mã hóa an toàn cho Vy.<br>Nhưng quy trình xử lý mất 24h.<br>Vy hoảng loạn quá độ, tự hại trong nhà vệ sinh."]

Cấu trúc 5 Chương kịch tính:

• Chương 1: Mặt Hồ Phẳng Lặng & Mồi Lửa (40 phút): Giới thiệu mâu thuẫn, Vy bị phốt quỹ lớp, Nam đối mặt với áp lực Đoàn trường và quyết định lên tiếng hay im lặng.
• Chương 2: Sóng Ngầm & Sự Cô Lập (25 phút): Vy chịu cảnh tẩy chay, Nam đối mặt sự mắng mỏ của bố mẹ và áp lực đồng lứa.
• Chương 3: Bóng Ma AI & Tối Hậu Thư (20 phút): Ảnh nhạy cảm ghép AI Deepfake của Vy bị phát tán trên Telegram, kẻ xấu tống tiền ép Vy làm bài tập hộ.
• Chương 4: Nước Mắt & Sự Thỏa Hiệp (20 phút): Dilemma khốc liệt về việc minh oan nhanh (lộ tin nhạy cảm Vy bị bạo hành gia đình) VS mã hóa Evidence Path (an toàn nhưng bị chậm trễ khiến Vy tự hại).
• Chương 5: Phán Quyết Cuối Cùng & Con Đường Hồi Phục (15 phút): Đối chất Minh (admin) trước BGH và sự can thiệp của Công an phường. 4 kết cục Endings dằn vặt đạo đức.

Bản đồ đặc tả chi tiết 80 phân cảnh phân nhánh nhằm đảm bảo thời lượng game trên 120 phút thực tế (theo mô hình chiều sâu hội thoại của Genshin Impact) được trình bày cụ thể tại phụ lục đính kèm: pile_on_lab_missions_redesign.md.

5) KIẾN TRÚC CÔNG NGHỆ & RÀO CẢN AN TOÀN (TECHNICAL & SAFEGUARDING)

Để đảm bảo dự án khả thi tối đa và vượt qua các kiểm duyệt kỹ thuật nghiêm ngặt, chúng tôi thiết lập kiến trúc thế giới Web3D Cel-Shaded Open World (phong cách Genshin Impact tối giản cho Web di động):

A. Web3D Cel-Shaded Engine (Genshin Impact Web Architecture)

• Cel/Toon-Shading Shader (Three.js/R3F): Sử dụng custom GLSL Shader (Banded Lighting và Outline Inverted Hull) để render đồ họa 3D nhân vật Nam, Vy, và bối cảnh lớp học theo phong cách hoạt hình anime 2D vẽ tay mượt mà.
• Draco Compression & Spatial Chunking: Mô hình 3D được nén bằng thuật toán Google Draco giảm 85% dung lượng (bundle < 3MB). Bản đồ trường học chia theo cấu trúc Octree, chỉ stream và render các khu vực gần nhân vật để duy trì tốc độ 60 FPS ổn định trên dòng điện thoại RAM 2GB.
• Vật lý WASM Rapier.js: Nhúng engine vật lý Rapier được biên dịch sang WebAssembly để tối ưu hiệu năng xử lý va chạm 3D mà không gây nóng máy.
• Spatial Audio (Web Audio API): Mô phỏng âm thanh môi trường 3D theo định hướng HRTF (tiếng xì xào, trống trường to nhỏ dần và định hướng theo vị trí nhân vật).

B. Tự động che mờ ảnh nhạy cảm cục bộ (On-device Face Blur)

• Nhúng mô hình TensorFlow.js (BlazeFace model ~86KB) chạy trực tiếp trên trình duyệt của người dùng.
• Khi học sinh tải ảnh chụp màn hình Confession lên để lưu bằng chứng, AI sẽ tự động phát hiện khuôn mặt và áp dụng bộ lọc canvas blur để làm mờ ngay lập tức, bảo vệ tâm lý học sinh (tránh bắt họ tự vẽ tay bôi ảnh nhạy cảm gây sang chấn lần 2).

C. Bảo mật cục bộ Zero-Knowledge (Evidence Path Vault)

• Mã hóa bằng chứng cục bộ bằng thuật toán AES-GCM 256-bit kết hợp khóa PBKDF2 sinh ra từ vân tay (FaceID/TouchID) hoặc mã PIN của chính người dùng (không dùng mật mã gia đình khó nhớ).
• Lưu trữ offline bền vững qua IndexedDB (sử dụng Dexie.js để tránh bị hệ điều hành tự dọn dẹp cache của Zalo Webview). Sao lưu E2EE lên AWS S3/IPFS bảo mật (máy chủ hoàn toàn không giữ khóa giải mã).

6) PHƯƠNG ÁN KIỂM CHỨNG & KẾ HOẠCH BỀN VỮNG (VALIDATION & PLAN)

A. Phương án chạy thử nghiệm thực địa (Pilot Test)

• Quy mô chạy thử: 30 học sinh (15-17 tuổi) và 10 phụ huynh tại một trường THPT ngoại thành TP.HCM trong 2 tuần.
• Đo lường: Đánh giá nhận thức trên lý thuyết và phản xạ kịch bản giả lập thông qua Pre-test và Post-test (có thiết lập nhóm đối chứng Control Group để triệt tiêu hiệu ứng Hawthorne).
• Kiểm chứng Trải nghiệm Người dùng & Biểu cảm (Footnotes thực địa): Chúng tôi không dừng lại ở khảo sát định lượng chung chung. Nhóm đã thực hiện quan sát và ghi chép chi tiết biểu cảm khuôn mặt của người chơi thử qua từng phân cảnh kịch tính để liên tục tối ưu hóa trải nghiệm thấu cảm (đo lường độ ngập ngừng ra quyết định, nhịp thở, phản ứng vật lý).

B. Trích dẫn thực tế từ thực địa (Footnotes)

↩ [1] Khảo sát WHO/Europe 2024 & UNICEF Viet Nam: 15% học sinh từng bị bắt nạt trên không gian mạng; bạo lực trực tuyến gây ảnh hưởng nặng nề đến tâm lý thanh thiếu niên.

↩ [2] Phỏng vấn bạn T. (16 tuổi, THPT Bình Chánh): "Vy lớp em bị đăng Confession vu khống ăn cắp quỹ lớp. Cả trường nhảy vào chửi bới, share bài bôi nhọ. Vy khóc suốt 3 ngày không dám đi học. Em muốn nhắn tin bênh bạn nhưng sợ cả nhóm lớp quay sang tẩy chay em, nên em chọn im lặng thả icon hóng hớt."

↩ [3] Phỏng vấn Cô Hương (38 tuổi, Giáo viên Chủ nhiệm): "Nhà trường không có cách nào dẹp các trang Confession tự phát ngoài trường học. Học sinh bị bôi nhọ thường chịu đựng một mình vì sợ báo giáo viên sẽ bị chế giễu là kẻ mách lẻo. Chúng tôi cần công cụ giúp các em biết cách tự bảo vệ nhau và lưu bằng chứng gửi phòng tham vấn xử lý âm thầm."

C. Mô hình vận hành & Tài chính B2B2C bền vững

• Tận dụng nguồn ngân sách CSR (Trách nhiệm xã hội doanh nghiệp) đáp ứng tiêu chí ESG của các ngân hàng và tập đoàn viễn thông lớn tại Việt Nam (những bên có ngân sách lớn chống lừa đảo mạng) để tài trợ server và LLM API miễn phí cho các trường học công lập.
• Triển khai gói Premium Dashboard cho các trường tư thục/quốc tế để theo dõi chỉ số an toàn học đường và cung cấp cẩm nang siêu nhỏ cho phụ huynh để tự trang trải chi phí vận hành.

Đề án được nghiên cứu và thực hiện bởi hungpixi cùng hàng chục AI subagents hỗ trợ trong phiên làm việc. Tài liệu tham khảo và công cụ áp dụng: Theory of Change Tool Tài liệu chi tiết đính kèm trong codebase:

• Báo cáo nghiên cứu 2026: bao_cao_nghien_cuu_echoshield_2026.md
• Báo cáo kiểm chứng trải nghiệm người dùng & biểu cảm khuôn mặt: bao_cao_kiem_chung_trai_nghiem_nguoi_dung.md
• Thiết kế Game & Bản đồ 80 Phân cảnh: pile_on_lab_missions_redesign.md
• Kịch bản chi tiết 5 Chương:
  • Chương 1 - Mồi Lửa: chapter_1_the_spark.md
  • Chương 2 - Sóng Ngầm: chapter_2_the_silent_treatment.md
  • Chương 3 - Bóng Ma Deepfake: chapter_3_the_deepfake_nightmare.md
  • Chương 4 - Quyết Định: chapter_4_the_breaking_point.md
  • Chương 5 - Phán Quyết: chapter_5_the_aftermath.md
• Kiến trúc Công nghệ & GDD Kỹ thuật: technical_architecture_gdd.md & kien_truc_game_3d_genshin_style.md
• Slide UNESCO Fit & Video Pitch: video_pitch_and_unesco_slide.md

CHIẾN LƯỢC & CẢM HỨNG PHÁT TRIỂN SẢN PHẨM: TRIẾT LÝ "TIỆM PHỞ ANH HAI" TINH GỌN & THỰC TẾ

Dự án: EchoShield Vietnam Phương châm: Tập trung tối đa vào sản phẩm cốt lõi kịch tính, bản địa hóa cực hạn và vận hành tinh gọn.

I. TRIẾT LÝ "TIỆM PHỞ ANH HAI" & 3 NGUYÊN LÝ CỐT LÕI

Sự thành công của tựa game indie Việt Nam xuất sắc "Tiệm phở của Anh Hai" (Brother Hai's Pho Restaurant) đem lại một bài học kinh điển về cách tạo ra một sản phẩm gây sốt (viral) toàn quốc với chi phí sản xuất tối thiểu nhờ vào 3 nguyên lý thiết kế:

1. Vỏ bọc đánh lừa (The Safe Facade) & Cú Twist u tối (The Dark Underbelly): Trò chơi bắt đầu bằng một giao diện bình dị, vô hại. Nhưng càng đi sâu, thế giới u tối đầy kịch tính, bí ẩn kinh dị và tâm lý giật gân mới bắt đầu lộ diện qua từng chi tiết nhỏ, tạo sức hút lôi cuốn khó cưỡng.
2. Bản địa hóa cực hạn (Hyper-local): Từng viên gạch bông cổ, chiếc bàn nhựa xanh, bảng hiệu bám bụi cổng trường được tái hiện chân thực. Sự quen thuộc đời thường này tạo ra sợi dây kết nối cảm xúc cực mạnh với người chơi bản địa.
3. Tập trung tối thượng vào trải nghiệm độc bản (Core Focus): Không dàn trải tài nguyên cho thế giới mở rộng lớn hay đồ họa 3D siêu khủng. Game chỉ tập trung vào đúng một bối cảnh tiệm phở nhưng khai thác cực sâu kịch bản và bầu không khí tâm lý.

Áp dụng vào EchoShield Vietnam, chúng ta loại bỏ hoàn toàn các ý tưởng ứng dụng cồng kềnh, phức tạp để tập trung phát triển một sản phẩm game duy nhất có chiều sâu cốt truyện và tính chân thực bản địa tối đa.

II. ĐẶC TẢ THIẾT KẾ GAMEPLAY: "BÃO CONFESSION"

Không đi theo lối mòn của các game giáo dục MIL (Media and Information Literacy) khô khan, EchoShield khoác lên mình lớp vỏ mô phỏng đời sống học đường vui nhộn, từ từ dẫn dắt người chơi vào một tấn bi kịch tâm lý nghẹt thở.

1. Vỏ bọc "Chủ tịch CLB" (Chương 1)

• Lối chơi: Người chơi nhập vai Nam, quản lý trang tin Confession của CLB Truyền thông trường. Nhiệm vụ ban đầu rất nhẹ nhàng: duyệt các tin nhắn tỏ tình dễ thương, tìm đồ thất lạc, canh giờ đăng bài câu tương tác để tích điểm danh vọng nộp hồ sơ học bổng du học.
• Không khí: Nhạc nền lo-fi học đường du dương, tiếng trống trường rộn rã, không gian lớp học tràn ngập ánh nắng.

2. Cú Twist "Bẫy ngầm Confession" (Chương 2 trở đi)

• Điểm bẻ gãy: Xuất hiện một confession nặc danh vu khống Vy (bạn học của Nam) ăn cắp quỹ lớp. Nhạc lo-fi biến mất, thay bằng những tiếng thì thầm rầm rì xung quanh lớp học.
• Chuyển đổi lối chơi: Từ duyệt bài thông thường, game chuyển thành cuộc điều tra trinh thám học đường. Người chơi phải điều khiển Nam lén lút tìm kiếm chứng cứ trong phòng máy, lục tủ đồ, giải mã IP và đối mặt với kẻ tống tiền nặc danh.
• Cảnh báo đỏ: Mascot Shieldy (tinh linh AI đồng hành) bắt đầu phát cảnh báo khẩn cấp khi chỉ số Stress của Nam và Vy chạm mức nguy hiểm.

3. Bản địa hóa cực hạn (Vietnamese Authenticity)

Để bất kỳ học sinh Việt Nam nào khi chơi cũng phải thốt lên "Đúng là trường mình rồi!":

• Hình ảnh thân thuộc: Bảng đen bám bụi phấn, chiếc quạt trần ba cánh cọc cạch cũ kỹ, dãy bàn gỗ khắc chi chít chữ vẽ bậy, căng tin vỉa hè với trà đá và nước ngọt xá xị Chương Dương.
• Giao diện thực tế: Bong bóng thoại chat mô phỏng chuẩn 100% Messenger, Zalo và các nhóm chat lớp "không có giáo viên".
• Slang Gen Z đời thực: Sử dụng ngôn ngữ tự nhiên như "bóc phốt", "nằm vùng", "tế sống", "cào bàn phím", "mõm". Các bình luận toxic dưới bài viết được mô phỏng trần trụi để người chơi cảm nhận rõ sức sát thương của bạo lực mạng.

III. GIÁ TRỊ GIÁO DỤC UNESCO & MÔ HÌNH VẬN HÀNH THỰC TẾ

1. Giáo dục ẩn (Learning by Stealth) & Trách nhiệm đám đông

Người chơi không bị nhồi nhét lý thuyết suông. Họ phải tự đưa ra quyết định: Có bấm chia sẻ bài phốt không? Có hùa theo chửi rủa trong phần bình luận không? Mỗi quyết định tò mò vô hại của đám đông nhân chứng (bystanders) sẽ đẩy thanh Stress của Vy lên cao. Trò chơi trừng phạt sự thờ ơ bằng các kết cục (Endings) ám ảnh tâm lý nặng nề, buộc người chơi tự rút ra bài học sâu sắc về lòng thấu cảm số.

2. "Xe phở nhượng quyền" (Phân phối siêu nhẹ & Dễ tiếp cận)

Để trò chơi lan tỏa nhanh chóng mà không gặp rào cản kỹ thuật:

• Web-App siêu nhẹ (Bundle size < 2MB): Sử dụng PhaserJS tối giản. Học sinh chỉ cần quét mã QR tại bảng tin trường hoặc click link trên Facebook/Zalo là chơi được ngay trên mọi điện thoại giá rẻ hoặc mạng 3G yếu, không cần tải app từ cửa hàng ứng dụng.
• Toolkit Boardgame PDF (Print & Play): Đóng gói toàn bộ kịch bản rẽ nhánh thành file thẻ bài PDF miễn phí. Giáo viên chỉ cần tải về, in ra giấy A4 là có thể tổ chức chơi trực tiếp trong các tiết sinh hoạt lớp không cần internet.

3. "Tài trợ tô phở" (Mô hình tài chính B2B2C bền vững)

• Tài trợ CSR (Corporate Social Responsibility): Các ngân hàng và tập đoàn công nghệ lớn (đối tượng chịu thiệt hại nhiều nhất từ deepfake và lừa đảo mạng) sẽ tài trợ dự án dưới dạng chương trình an toàn số CSR. Logo của họ xuất hiện tinh tế trên các màn hình công cụ để bảo trợ thương hiệu, giúp EchoShield có ngân sách duy trì server miễn phí cho học sinh.
• Premium Dashboard cho trường học: Cung cấp báo cáo phân tích Stress Index (chỉ số căng thẳng ẩn danh) cho các trường THPT tư thục/quốc tế để nhận diện sớm các xu hướng bắt nạt học đường.

IV. KẾ HOẠCH TRIỂN KHAI SPRINT 3 BƯỚC (ROADMAP)

graph LR
    Step1[Bước 1: Chạy thử bản Demo<br>Pilot Test 30 học sinh<br>tinh chỉnh Emotion Logs] --> Step2[Bước 2: Chuyển giao bộ Toolkit<br>Boardgame PDF miễn phí<br>cho 5 trường THPT tại TP.HCM]
    Step2 --> Step3[Bước 3: UNESCO bảo trợ<br>Tiếp cận Bộ GD&ĐT Việt Nam<br>đưa vào môn học chính thức]

1. Bước 1: Nấu thử nước dùng (Tháng 1 - 2): Chạy thử nghiệm bản game PhaserJS với nhóm 30 học sinh để đánh giá phản ứng cảm xúc của người chơi, qua đó tinh chỉnh lời thoại kịch bản thực tế hơn.
2. Bước 2: Mở quán phở đầu tiên (Tháng 3 - 6): Đóng gói bộ boardgame PDF (Print & Play). Chuyển giao và hướng dẫn 5 trường THPT chạy thử nghiệm trong các giờ sinh hoạt lớp.
3. Bước 3: Nhượng quyền quy mô lớn (Tháng 7 - 12): Tận dụng sự bảo trợ danh tiếng từ UNESCO Hà Nội để trình đề án lên Bộ Giáo dục & Đào tạo Việt Nam, hướng tới tích hợp bộ toolkit này vào môn Giáo dục Công dân/Hoạt động trải nghiệm hướng nghiệp THPT trên toàn quốc.

KIẾN TRÚC THẾ GIỚI 3D TRÊN WEB PHONG CÁCH GENSHIN IMPACT

Dự án: EchoShield Vietnam Phương châm: Trải nghiệm 3D nhập vai hoạt hình (Cel-shaded) mượt mà không cần cài đặt

Để tái hiện lại trải nghiệm nhập vai 3D thế giới mở sống động giống như Genshin Impact ngay trên trình duyệt web di động (Zalo/Facebook Webview) mà không bắt người dùng cài đặt ứng dụng nặng hàng chục GB, EchoShield thiết lập kiến trúc kỹ thuật Web3D Cel-Shaded Engine tối ưu theo các trụ cột sau:

+-------------------------------------------------------------------+
|                        ECHOSHIELD GAME CLIENT                     |
|  +--------------------+  +------------------+  +---------------+  |
|  | R3F Render (WebGL2)|  | Rapier WASM Phys |  | Spatial Audio |  |
|  |  * Cel/Toon Shader |  |  * Collisions    |  |  * HRTF 3D    |  |
|  |  * Outline Shader  |  |  * Movement      |  |  * Sound Env  |  |
|  +--------------------+  +------------------+  +---------------+  |
+-------------------------------------------------------------------+
                                  |
                                  v
+-------------------------------------------------------------------+
|                        INFRASTRUCTURE LAYER                       |
|  +--------------------+  +------------------+  +---------------+  |
|  | Draco Asset Stream |  | Cloudflare DO    |  | Dexie Save DB |  |
|  |  * GLTF Chunking   |  |  * WebSocket Sync|  |  * IndexedDB  |  |
|  +--------------------+  +------------------+  +---------------+  |
+-------------------------------------------------------------------+

I. CÁC TRỤ CỘT KIẾN TRÚC KỸ THUẬT 3D

1. Rendering Pipeline: Toon/Cel-Shading Shader (Đồ họa hoạt hình 3D Anime)

• Bản chất: Genshin Impact nổi tiếng với phong cách đồ họa hoạt hình Cel-shaded 3D. Trên Web, chúng ta không dùng đổ bóng thực tế (Realistic Shading) vì gây nặng GPU di động, mà viết custom GLSL Shaders tích hợp vào Three.js/React Three Fiber:
  • Banded Lighting Shader (Đổ bóng phân dải): Thay vì chuyển sắc độ bóng mượt từ sáng sang tối, shader này chia mức độ ánh sáng trên mô hình 3D thành 2-3 dải màu sắc nét (Hard-edged shadows) để tạo cảm giác anime vẽ tay 2D.
  • Outline Effect Shader (Vẽ nét viền nhân vật): Sử dụng kỹ thuật Inverted Hull trong Vertex Shader (nhân rộng mô hình nhân vật lên một chút, đảo ngược mặt polygon và tô màu đen) để vẽ đường viền nét thanh nét đậm xung quanh Nam, Vy, Minh và bàn ghế.
  • Specular Highlight (Phản xạ tóc & Mắt phát sáng): Viết Fragment Shader tùy chỉnh để vùng highlight trên tóc nhân vật luôn giữ hình dáng lấp lánh đặc trưng khi camera di chuyển, và mắt nhân vật có chiều sâu anime.

2. Asset Streaming: Draco Nén & Phân Vùng Bản Đồ (World Chunking & LOD)

Để giảm dung lượng game từ mức khổng lồ xuống dưới 3MB tải lần đầu, EchoShield áp dụng chiến lược tối ưu hóa tài nguyên thế giới mở:

• Draco GLTF Compression: Toàn bộ mô hình 3D trường học THPT và nhân vật được nén bằng thư viện Google Draco, giảm dung lượng file .glb xuống 85% (từ 15MB xuống dưới 2MB).
• Spatial Partitioning (Phân vùng không gian bằng Octree): Bản đồ trường học được chia nhỏ thành các "chunk" không gian 10m x 10m. Khi nhân vật Nam đi đến đâu, game engine chỉ stream và load tài nguyên 3D của các chunk lân cận. Các chunk ở xa sẽ bị giải phóng khỏi RAM trình duyệt để tránh tràn bộ nhớ trên điện thoại RAM 2GB.
• LOD (Level of Detail): Bàn học, bảng đen, tủ locker ở xa camera sẽ được tự động thay thế bằng phiên bản đa giác cực thấp (Low-poly) hoặc ảnh phẳng 2D (Billboarding), giúp tốc độ khung hình luôn đạt 60 FPS ổn định trên Safari/Chrome của điện thoại cũ.

3. Engine Vật Lý: WebAssembly Rapier.js (Va chạm 3D hiệu năng cao)

• Bản chất: Thay vì sử dụng các engine vật lý nặng nề chạy bằng JavaScript thuần dễ gây giật lag (như Cannon.js), EchoShield nhúng Rapier.js biên dịch trực tiếp sang WebAssembly (WASM).
• Tính năng: Rapier WASM chịu trách nhiệm tính toán trọng lực, chuyển động trượt mượt mà của Nam trên mặt đất khi bấm WASD, và phát hiện va chạm hộp (AABB Collisions) xung quanh Vy, Minh và các bức tường. Do chạy bằng mã máy WASM, hiệu năng xử lý vật lý nhanh gấp 10 lần JS thông thường, giảm tối đa mức độ nóng máy và hao pin của điện thoại.

4. Hệ Thống Âm Thanh Không Gian (Spatial Audio via Web Audio API)

• Bản chất: Genshin Impact có âm thanh môi trường cực kỳ chân thực. EchoShield mô phỏng điều này trên Web bằng cách sử dụng PannerNode của Web Audio API:
  • HRTF (Head-Related Transfer Function): Tái tạo âm thanh lập thể 3D định hướng theo vị trí camera và nhân vật Nam.
  • Trải nghiệm thực tế: Khi Nam đi lại gần nhóm học sinh đang xì xào bàn tán về Vy ở cuối lớp, tiếng thì thầm to dần ở tai bên trái/phải tương ứng với hướng đứng của họ. Khi đi ra xa hoặc đi qua bức tường, âm thanh tự động bị suy hao và lọc tần số thấp (low-pass filter) giống như âm thanh bị cản ngoài đời thực.

5. Multiplayer Co-op (Đồng hành lá chắn số thời gian thực)

• Bản chất: Hỗ trợ sảnh chờ multiplayer ẩn danh giữa các học sinh trong trường:
  • Sử dụng WebSockets kết nối đến Cloudflare Workers + Durable Objects (máy chủ proxy biên siêu nhẹ, độ trễ cực thấp < 10ms).
  • Học sinh khi online sẽ nhìn thấy vị trí 3D của nhau di chuyển dưới dạng các tinh linh "Khiên nhỏ - Shieldy" bay lơ lửng xung quanh hành lang lớp học.
  • Các em có thể cùng nhau tham gia giải đố Fact-check, tương tác với các tủ đồ để tìm manh mối thẻ nhớ bác bảo vệ và cùng chia sẻ chứng cứ thu thập được (E2EE) vào Vault tập thể để đối chất trước BGH.

Tài liệu Kiến trúc Kỹ thuật Game Visual Novel - EchoShield

Tài liệu này cung cấp kiến trúc mã nguồn React/Next.js hoàn chỉnh cho game Visual Novel phân nhánh dài trên 2 tiếng, lấy cảm hứng từ cấu trúc của Claude Code Game Studios.

1. Zustand Store (gameStore.ts)

Quản lý trạng thái 3 chỉ số động (Trust, Stress, Viral), lịch sử lựa chọn, chương hiện tại, và đồng bộ tự động với IndexedDB (Dexie.js).

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { db } from './db'; // Dexie instance

interface GameState {
  trust: number;
  stress: number;
  viral: number;
  currentChapter: string;
  currentNode: string;
  choiceHistory: string[];
  
  updateStat: (stat: 'trust' | 'stress' | 'viral', amount: number) => void;
  makeChoice: (choiceId: string, nextNode: string) => void;
  setChapter: (chapterId: string, startNode: string) => void;
  resetGame: () => void;
}

export const useGameStore = create<GameState>()(
  persist(
    (set) => ({
      trust: 50,
      stress: 0,
      viral: 0,
      currentChapter: 'prologue',
      currentNode: 'start',
      choiceHistory: [],

      updateStat: (stat, amount) => 
        set((state) => ({ [stat]: Math.max(0, Math.min(100, state[stat] + amount)) })),
      
      makeChoice: (choiceId, nextNode) =>
        set((state) => ({
          choiceHistory: [...state.choiceHistory, choiceId],
          currentNode: nextNode
        })),

      setChapter: (chapterId, startNode) =>
        set({ currentChapter: chapterId, currentNode: startNode }),

      resetGame: () => set({
        trust: 50, stress: 0, viral: 0,
        currentChapter: 'prologue', currentNode: 'start', choiceHistory: []
      })
    }),
    {
      name: 'echoshield-storage',
      // Custom storage engine using Dexie.js
      storage: createJSONStorage(() => ({
        getItem: async (name: string) => {
          const record = await db.store.get(name);
          return record?.value ?? null;
        },
        setItem: async (name: string, value: string) => {
          await db.store.put({ key: name, value });
        },
        removeItem: async (name: string) => {
          await db.store.delete(name);
        },
      })),
    }
  )
);

2. Dialog Manager (DialogManager.tsx)

Nhận file kịch bản JSON (Dialog Trees) và render giao diện hội thoại, sprite nhân vật, bối cảnh, âm thanh, và các nút bấm lựa chọn.

import React, { useEffect } from 'react';
import { useGameStore } from '../store/gameStore';
import { motion, AnimatePresence } from 'framer-motion';
import useSound from 'use-sound';

interface Choice {
  id: string;
  text: string;
  nextNode: string;
  stateEffects?: { trust?: number; stress?: number; viral?: number };
}

interface DialogNode {
  id: string;
  speaker: string;
  text: string;
  background: string;
  sprite: string;
  bgm?: string;
  sfx?: string;
  choices?: Choice[];
  nextNode?: string; // Nếu không có choices, nút tiếp tục
}

interface DialogManagerProps {
  dialogTree: Record<string, DialogNode>;
}

export const DialogManager: React.FC<DialogManagerProps> = ({ dialogTree }) => {
  const { currentNode, makeChoice, updateStat } = useGameStore();
  const node = dialogTree[currentNode];
  
  const [playBgm, { stop: stopBgm }] = useSound(node?.bgm || '', { loop: true });
  const [playSfx] = useSound(node?.sfx || '');

  useEffect(() => {
    if (node?.bgm) playBgm();
    if (node?.sfx) playSfx();
    return () => { stopBgm(); };
  }, [node?.bgm, node?.sfx, playBgm, playSfx, stopBgm]);

  if (!node) return <div>Đang tải dữ liệu...</div>;

  const handleChoice = (choice: Choice) => {
    if (choice.stateEffects) {
      if (choice.stateEffects.trust) updateStat('trust', choice.stateEffects.trust);
      if (choice.stateEffects.stress) updateStat('stress', choice.stateEffects.stress);
      if (choice.stateEffects.viral) updateStat('viral', choice.stateEffects.viral);
    }
    makeChoice(choice.id, choice.nextNode);
  };

  return (
    <div className="relative w-full h-screen overflow-hidden bg-black flex flex-col justify-end">
      {/* Background */}
      <motion.img 
        key={node.background}
        src={node.background} 
        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
        className="absolute inset-0 w-full h-full object-cover z-0"
      />
      
      {/* Character Sprite */}
      <AnimatePresence>
        {node.sprite && (
          <motion.img 
            key={node.sprite}
            src={node.sprite}
            initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ opacity: 0 }}
            className="absolute bottom-0 left-1/2 -translate-x-1/2 h-[80%] z-10"
          />
        )}
      </AnimatePresence>

      {/* Dialog Box */}
      <div className="relative z-20 w-full max-w-4xl mx-auto p-6 bg-black/80 text-white rounded-t-2xl border-t-4 border-indigo-500 shadow-2xl backdrop-blur-sm">
        <h3 className="text-xl font-bold text-indigo-300 mb-2">{node.speaker}</h3>
        <p className="text-lg leading-relaxed mb-6">{node.text}</p>
        
        {/* Choices */}
        <div className="flex flex-col gap-3">
          {node.choices ? (
            node.choices.map(choice => (
              <button 
                key={choice.id}
                onClick={() => handleChoice(choice)}
                className="p-3 bg-indigo-900/50 hover:bg-indigo-600 transition-colors rounded-lg border border-indigo-500/30 text-left"
              >
                {choice.text}
              </button>
            ))
          ) : node.nextNode ? (
            <button 
              onClick={() => makeChoice('continue', node.nextNode!)}
              className="p-3 bg-gray-800 hover:bg-gray-700 transition-colors rounded-lg text-center"
            >
              Tiếp tục
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );
};

3. Crypto & Evidence Path Vault (cryptoHelper.ts)

Mã hóa AES-GCM 256 cục bộ bằng mã PIN (hoặc vân tay), kết nối Dexie.js để lưu cục bộ bền vững an toàn (Zero-knowledge architecture).

import Dexie, { Table } from 'dexie';

// 1. Dexie DB Setup for Secure Vault
export class SecureVaultDB extends Dexie {
  evidence!: Table<{ id: string; encryptedData: string; iv: string }, string>;
  
  constructor() {
    super('EchoShieldVault');
    this.version(1).stores({
      evidence: 'id'
    });
  }
}
export const vaultDb = new SecureVaultDB();

// 2. Web Crypto API Helpers (AES-GCM 256)
export class CryptoVault {
  // Derive key from PIN/Password using PBKDF2
  static async deriveKey(pin: string, salt: Uint8Array): Promise<CryptoKey> {
    const enc = new TextEncoder();
    const keyMaterial = await window.crypto.subtle.importKey(
      "raw", enc.encode(pin), { name: "PBKDF2" }, false, ["deriveBits", "deriveKey"]
    );
    return window.crypto.subtle.deriveKey(
      { name: "PBKDF2", salt, iterations: 100000, hash: "SHA-256" },
      keyMaterial,
      { name: "AES-GCM", length: 256 },
      false, ["encrypt", "decrypt"]
    );
  }

  static async encryptData(data: any, key: CryptoKey): Promise<{ encrypted: string, iv: string }> {
    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    const enc = new TextEncoder();
    const encryptedBuffer = await window.crypto.subtle.encrypt(
      { name: "AES-GCM", iv }, key, enc.encode(JSON.stringify(data))
    );
    return {
      encrypted: btoa(String.fromCharCode(...new Uint8Array(encryptedBuffer))),
      iv: btoa(String.fromCharCode(...iv))
    };
  }

  static async decryptData(encryptedBase64: string, ivBase64: string, key: CryptoKey): Promise<any> {
    const encrypted = Uint8Array.from(atob(encryptedBase64), c => c.charCodeAt(0));
    const iv = Uint8Array.from(atob(ivBase64), c => c.charCodeAt(0));
    
    const decryptedBuffer = await window.crypto.subtle.decrypt(
      { name: "AES-GCM", iv }, key, encrypted
    );
    const dec = new TextDecoder();
    return JSON.parse(dec.decode(decryptedBuffer));
  }

  // Save evidence to Dexie
  static async saveEvidence(id: string, data: any, pin: string) {
    const salt = window.crypto.getRandomValues(new Uint8Array(16));
    localStorage.setItem(`salt_${id}`, btoa(String.fromCharCode(...salt)));
    
    const key = await this.deriveKey(pin, salt);
    const { encrypted, iv } = await this.encryptData(data, key);
    
    await vaultDb.evidence.put({ id, encryptedData: encrypted, iv });
  }

  // Load evidence from Dexie
  static async loadEvidence(id: string, pin: string) {
    const record = await vaultDb.evidence.get(id);
    if (!record) return null;
    
    const saltBase64 = localStorage.getItem(`salt_${id}`);
    if (!saltBase64) throw new Error("Salt not found");
    const salt = Uint8Array.from(atob(saltBase64), c => c.charCodeAt(0));
    
    const key = await this.deriveKey(pin, salt);
    return await this.decryptData(record.encryptedData, record.iv, key);
  }
}

4. Auto Blur Filter (faceBlur.ts)

Sử dụng TensorFlow.js BlazeFace để nhận diện và làm mờ khuôn mặt tự động trên client (bảo vệ danh tính nhân vật/chứng cứ trong game).

import * as blazeface from '@tensorflow-models/blazeface';
import '@tensorflow/tfjs-backend-webgl';

let model: blazeface.BlazeFaceModel | null = null;

export const loadModel = async () => {
  if (!model) {
    model = await blazeface.load();
  }
  return model;
};

/**
 * Áp dụng bộ lọc mờ lên khuôn mặt được nhận diện trong ảnh/video
 * @param sourceElement Element gốc (HTMLImageElement | HTMLVideoElement)
 * @param canvas Canvas đích để vẽ kết quả đã làm mờ
 */
export const applyAutoFaceBlur = async (
  sourceElement: HTMLImageElement | HTMLVideoElement,
  canvas: HTMLCanvasElement
) => {
  const loadedModel = await loadModel();
  const ctx = canvas.getContext('2d');
  if (!ctx) return;

  // Đồng bộ kích thước canvas với source
  canvas.width = sourceElement instanceof HTMLVideoElement ? sourceElement.videoWidth : sourceElement.width;
  canvas.height = sourceElement instanceof HTMLVideoElement ? sourceElement.videoHeight : sourceElement.height;

  // Vẽ ảnh gốc lên canvas
  ctx.drawImage(sourceElement, 0, 0, canvas.width, canvas.height);

  // Nhận diện khuôn mặt
  const returnTensors = false;
  const predictions = await loadedModel.estimateFaces(sourceElement, returnTensors);

  if (predictions.length > 0) {
    // Làm mờ từng khuôn mặt
    predictions.forEach(prediction => {
      const topLeft = prediction.topLeft as [number, number];
      const bottomRight = prediction.bottomRight as [number, number];
      
      const x = topLeft[0];
      const y = topLeft[1];
      const width = bottomRight[0] - x;
      const height = bottomRight[1] - y;
      
      const padding = width * 0.2; // Mở rộng vùng làm mờ
      const blurX = Math.max(0, x - padding);
      const blurY = Math.max(0, y - padding);
      const blurW = width + padding * 2;
      const blurH = height + padding * 2;

      ctx.save();
      ctx.filter = 'blur(15px)'; // Hiệu ứng làm mờ
      // Ghi đè vùng khuôn mặt bằng hiệu ứng làm mờ
      ctx.drawImage(
        canvas, 
        blurX, blurY, blurW, blurH, 
        blurX, blurY, blurW, blurH  
      );
      ctx.restore();
    });
  }
};