Đề xuất giao diện · exam.flyer.us

AI Tutors — mỗi Pet 3D là một thầy cô

Trang nói chuyện với AI hiện xếp theo chủ đề, tám bạn Pet 3D chưa có mặt. Bản đề xuất đưa thầy cô lên trước: chọn bạn pet, rồi mới chọn chủ đề.

Áp dụng cho: exam.flyer.us/en/real-time-conversation/topic
Lấy nhân vật từ: roadmap.flyer.vn/pet-3d — 8 pet
Ngày dựng: 13/10/2026
Trạng thái: Đề xuất — chưa thống nhất

5 màn bấm thử · màu đo từ production

Xuất xứ / Prompt / Giới hạn

Yêu cầu ngày 13/10/2026:

Mỗi bạn Pet 3D này sẽ là một AI Teacher để dạy giao tiếp cho học sinh — demo cho anh một version UI/UX để apply vào page AI Tutors này nhé

Căn cứ: màu và phông đo bằng getComputedStyle trên chính trang production ngày 13/10/2026, không chép tay — nền trang #F0E7FF, dải tím #6A23B1, thẻ cấp độ rgb(158,95,221), thẻ chủ đề nền rgb(245,255,232) chữ rgb(118,159,65), nút cam gradient rgb(244,142,119)→rgb(227,98,69), phông LinotteFont. Tám chân dung pet chụp từ /pet-3d bằng Playwright, tên và nhóm tuổi đọc từ mã nguồn pet-3d/app.js.

Giới hạn: đây là bản dựng tĩnh để xem và góp ý, không nối API thật · số lượt nói trong thẻ chủ đề chép từ production ngày 13/10, không tự cập nhật · phần ghép pet với chủ đề và nhóm tuổi là đề xuất của người dựng, chưa hỏi đội Học thuật · chưa bàn chi phí giọng nói và chi phí mô hình khi nhân lên tám nhân vật · chưa có bản tiếng Anh.

Hiện trạng

Trang đang chạy xếp theo chủ đề. Tiêu đề ghi “AI Tutors” nhưng không có nhân vật nào — mỗi thẻ chỉ là một hình minh hoạ, học sinh không biết mình sắp nói chuyện với ai.

Trang AI Tutors hiện tại trên điện thoại

Đổi gì

Việc	Hiện tại	Đề xuất
Thứ tự chọn	Chọn chủ đề, không biết ai dạy	Chọn thầy cô trước, rồi chọn chủ đề của thầy cô đó
Nhân vật	Hình minh hoạ chung, không tên	Tám pet có tên, loài, giọng và nhóm tuổi riêng
Phân tuổi	Chỉ lọc theo cấp độ Pre A1 → A2	Mỗi pet gắn nhóm tuổi sẵn có trong /pet-3d: 3+, 6+, 9+
Gắn bó	Không có	Mức thân thiết theo số câu đã nói, dùng lại cơ chế đã chạy ở /pet-3d
Sau buổi nói	Chưa thấy màn tổng kết	Sao, từ mới đã dùng, lỗi phát âm nên sửa

Bản dựng thử

Khung máy giữ đúng kích thước thật rồi thu nhỏ cả khung: điện thoại 390×844, máy tính 1180×760.

‹

Chọn thầy cô

8 bạn

Bingo Mọi lứa tuổi

Linh vật FLYER

Chào hỏi · Giới thiệu bản thân

Mochi 3+

Thỏ

Màu sắc · Đồ chơi

Pip 3+

Gà con

Con vật · Đồ ăn

Bao 3+

Gấu trúc

Gia đình · Trong nhà

Lumi 6+

Kỳ giông

Biển · Thời tiết

Kiko 6+

Cáo

Sở thích · Thể thao

Draco 9+

Rồng

Kể chuyện · Tranh luận

Bolt 9+

Chó máy

Khoa học · Công nghệ

1 · Chọn thầy cô

‹

Bingo

♥ Lv 3

Bingo

Linh vật FLYER · Mọi lứa tuổi

Chào hỏi · Giới thiệu bản thân

“Hi! I'm Bingo. Let's learn English together — tell me your name!”

Giọng Anhnữ, trẻ

Chậm rãinói lại khi cần

12 chủ đềPre A1 → A1

Chủ đề Bingo dạy

Pre A1 At the beach17.250

Pre A1 Clothes12.119

Pre A1 Rooms and objects6.606

Pre A1 Hobbies7.823

Pre A1 Sports7.690

2 · Hồ sơ thầy cô

‹ Bingo · At the beach02:14

“What can you see at the beach?”
Nghe lại · Dịch

I can see a boatI see the seaThere is sand

3 · Đang nói

‹

Xong buổi nói

⭐⭐⭐

Giỏi lắm!

Bingo · At the beach · 8 câu · 2 phút 14

Từ mới con đã dùng

boatsandshellswim

Phát âm nên sửa

beachđọc dài /iː/, đừng thành /ɪ/

shellbật âm /ʃ/ ở đầu

Bingo thân hơn

♥ Lv 3 → Lv 4 · còn 2 câu nữa lên mức sau

4 · Sau buổi nói

SPEAKING WITH AI TUTORS

🔍 Tìm chủ đề hoặc thầy cô…

Thầy cô AI

BingoLinh vật FLYER · Mọi lứa tuổi

MochiThỏ · 3+

PipGà con · 3+

BaoGấu trúc · 3+

LumiKỳ giông · 6+

KikoCáo · 6+

DracoRồng · 9+

BoltChó máy · 9+

Bingo

Linh vật FLYER · Mọi lứa tuổi · giọng Anh nữ, nói chậm

Chào hỏi · Giới thiệu bản thân 12 chủ đề

🏖️

Pre A1 Places

At the beach

👥 17.250 lượt nói

👕

Pre A1 Describe people

Clothes

👥 12.119 lượt nói

🏠

Pre A1 Objects

Rooms and objects

👥 6.606 lượt nói

🎨

Pre A1 Entertainment

Hobbies

👥 7.823 lượt nói

⚽

Pre A1 Entertainment

Sports

👥 7.690 lượt nói

🧍

Pre A1 Describe people

Parts of the body

👥 4.767 lượt nói

5 · Bản máy tính — danh sách thầy cô bên trái, chủ đề bên phải

Vuốt ngang để xem hết khung máy tính.

Phương án B · giữ nguyên flow chọn chủ đề, đổi thầy cô ngay trong màn nói

Không thêm bước chọn thầy cô trước. Học sinh vẫn vào Speaking with AI Tutors → chọn chủ đề → nói như hiện tại, mặc định là Bingo. Bộ đổi nằm sẵn trong màn hội thoại: trên máy tính là hai mũi tên hai bên ảnh cộng dãy ảnh nhỏ, trên điện thoại là vuốt ngang. Bốn khung dưới dựng lại đúng màn hội thoại thật (đo màu ngày 13/10/2026).

Đổi giữa chừng thì xử lý thế nào

Luật	Cách chạy	Được	Mất
A · Chỉ đổi trước câu đầu	Vuốt được khi chưa nói câu nào, nói rồi thì khoá	Không phải bàn giao ngữ cảnh, điểm sạch	Chọn xong mới biết không hợp thì phải thoát ra làm lại
B · Đổi bất kỳ lúc nào, giữ lịch sử đề xuất	Thầy cô mới đọc lại câu cuối rồi nói tiếp; đồng hồ, chủ đề và learning outcome giữ nguyên	Liền mạch, đúng nghĩa "switch", vẫn tính trọn một buổi	Phải truyền ngữ cảnh sang giọng mới; giới hạn 2 lần/buổi để không thành trò chơi
C · Đổi thì làm lại từ đầu	Xoá hội thoại, đồng hồ chạy lại	Dễ làm nhất	Mất câu đã nói, trẻ ngại đổi

Chọn B. Chủ đề không đổi nên learning outcome, đồng hồ và kết quả không phải tính lại — đổi thầy cô chỉ đổi giọng, nhân vật và phong cách câu gợi ý.

Ba chỗ đặt nút đổi

Cột giữa (máy tính)	Hai mũi tên ‹ › ôm ảnh, dưới tên là dãy tám ảnh nhỏ. Thấy ngay, không cần dạy.
Vuốt ngang (điện thoại)	Cột giữa bị ẩn ở khổ nhỏ trên bản thật, nên vùng ảnh nằm trên khung chat và vuốt được, có chấm trang.
Bảng Settings	Thêm một dòng AI Tutor · Bingo › cạnh "Hide AI answer" và "Always show suggestions" đang có sẵn.

Bốn ràng buộc

Lọc theo tuổi	Chủ đề Pre A1 vẫn hiện đủ tám bạn nhưng Draco và Bolt làm mờ kèm chú "hợp từ 9 tuổi"; bấm vào vẫn đổi được, chỉ là cảnh báo.
Giới hạn số lần	Hai lần mỗi buổi. Hết lượt thì mũi tên xám, chạm vào hiện "đổi ở buổi sau nhé".
Nhớ lựa chọn	Buổi sau mở lên là thầy cô vừa chọn, không quay về Bingo.
Free talk	Nút Free talk ở trang chủ đề vào thẳng với thầy cô đang được nhớ.

←Conversation04:12

Learning outcome

Students can name clothes such as "T-shirt", "jeans", and "boots."

Students can describe what they are wearing, including colors.

Students can use imperative sentences such as "Look at this T-shirt."

Settings

Hide AI answer

Always show suggestions

AI Tutor

Bingo ›

Dòng mới thêm vào đúng bảng Settings đang có thật.

‹

›

Bingo

Listening…

Bấm ‹ › hoặc vuốt ảnh để đổi thầy cô
Hai bạn mờ chỉ hợp từ 9 tuổi

Còn 2 lần đổi trong buổi này

Hello! Great to see you! Today, let's talk about Clothes

🔊 🐌 🔤

Hello?

Hi! I'm so happy you're here! Are you ready to play with me? 😊

🔊 🐌 🔤

Suggested sentences for you to talk to Bingo

🔊 Sounds good! I'm wearing a blue T-shirt today.

🔊 What clothes should we talk about first?

🔊 I like learning words for clothes.

🎤

B1 · Máy tính — bộ đổi thầy cô nằm trong cột giữa, không thêm bước nào trước đó

Vuốt ngang để xem hết khung máy tính.

←Conversation04:12

‹

›

Bingo

Listening…

Vuốt ngang vùng ảnh để đổi thầy cô

Hello! Great to see you! Today, let's talk about Clothes

🔊 🐌 🔤

Hello?

Suggested sentences

🔊 I'm wearing a blue T-shirt.

🔊 I like these boots!

🎤

B2 · Điện thoại — vuốt ngang vùng ảnh, chấm trang cho biết đang ở bạn thứ mấy

←Conversation04:12

Mochi

Chưa vào buổi

Hello! Great to see you! Today, let's talk about Clothes

Hello?

→

Đổi sang Mochi?

Thỏ · 3+ · giọng nữ, nói chậm

✓
Giữ nguyên chủ đề Clothes và đồng hồ 04:12
✓
Mochi đọc lại câu cuối của Bingo rồi nói tiếp, không mất câu nào
!
Sau lần này còn 1 lần đổi trong buổi

B3 · Hỏi một câu trước khi đổi — nói rõ cái gì giữ, cái gì mất

←Conversation04:12

‹

›

Mochi

Listening…

Còn 1 lần đổi

Hi! I'm so happy you're here! Are you ready to play with me? 😊

Hello?

Mochi tiếp lời

Hi! I'm Mochi 🐰 Bingo told me we're talking about clothes. What colour is your T-shirt?

🔊 🐌 🔤

Suggested sentences for you to talk to Mochi

🔊 It's blue!

🔊 My T-shirt is pink.

🎤

B4 · Sau khi đổi — đồng hồ, chủ đề và learning outcome giữ nguyên, chỉ đổi giọng

Ghép pet với nội dung

Nhóm tuổi lấy từ mã nguồn /pet-3d, phần thế mạnh là đề xuất.

Pet	Loài	Nhóm tuổi	Thế mạnh đề xuất
Bingo	Linh vật FLYER	Mọi lứa tuổi	Chào hỏi, giới thiệu bản thân
Mochi	Thỏ	3+	Màu sắc, đồ chơi
Pip	Gà con	3+	Con vật, đồ ăn
Bao	Gấu trúc	3+	Gia đình, đồ trong nhà
Lumi	Kỳ giông	6+	Biển, thời tiết
Kiko	Cáo	6+	Sở thích, thể thao
Draco	Rồng	9+	Kể chuyện, tranh luận
Bolt	Chó máy	9+	Khoa học, công nghệ

Ba việc phải chốt trước khi dựng thật

Giọng nói	/pet-3d hiện chỉ có hai giọng ElevenLabs cho tám pet, phân biệt bằng cao độ. Trang nói chuyện cần giọng riêng từng pet hay giữ cách này?
Chi phí	Nhân vật nhiều không làm tăng chi phí mô hình, nhưng giọng riêng thì có. Cần một mức trần cho mỗi học sinh mỗi ngày.
Nhóm tuổi	Pet 9+ như Draco và Bolt chỉ hợp A2 trở lên; kho chủ đề hiện phần lớn là Pre A1. Thiếu nội dung cho hai bạn này.