xAI TTS v1 Sub-Second Speech

Tạo một trang web HTML tương tác, hoàn chỉnh và trau chuốt trong một tệp duy nhất, có tiêu đề “Điều phối khinh khí cầu Cloudborne”. Chỉ xuất tài liệu HTML cuối cùng, với toàn bộ CSS và JavaScript được viết inline. Trang phải mở và hoạt động trực tiếp trong trình duyệt hiện đại, không cần bước build và không sử dụng dependency, thư viện, font, CDN, URL hình ảnh, API hoặc tệp bổ sung bên ngoài. Đây là một trang web responsive, không phải bố cục cố định 16:9. Thiết kế một trạm điều khiển đội khinh khí cầu thời bình minh sống động, kết hợp các thiết bị hàng không cổ điển, bản đồ địa hình in lưới, chất liệu giấy sờ được, bộ điều khiển bằng đồng thau và mô phỏng thời gian thực hiện đại. Sử dụng bảng màu được phân lớp cẩn thận gồm xanh cobalt, vàng kem, đỏ san hô, trắng ấm, than chì và đồng thau trầm. Ánh sáng buổi sáng ấm áp phải dần sáng lên từ góc trên bên trái. Biểu diễn độ cao, các lớp gió và mức độ nguy hiểm một cách nhất quán bằng màu sắc, độ dày đường nét, hoa văn và chú giải rõ ràng. Tạo toàn bộ hình ảnh bằng HTML, CSS, Canvas và SVG inline khi phù hợp. Khu vực trung tâm phải là một bản đồ không phận nhìn từ trên xuống, kích thước lớn và có hoạt ảnh, hiển thị một hẻm núi, các đường đồng mức, ít nhất 12 khinh khí cầu có thể nhận diện riêng, nhiều lớp gió thay đổi, một hệ thống bão mây vũ tích đang dịch chuyển, các vùng nhiễu loạn và một ngọn hải đăng nổi làm điểm đến. Triển khai một mô phỏng vật lý nhẹ nhưng thực sự hoạt động: mỗi khinh khí cầu phải theo dõi vị trí, vận tốc, độ cao, nhiên liệu, ballast, nhiệt độ, rủi ro và lịch sử lộ trình; hướng và cường độ gió phải thay đổi theo độ cao và diễn biến theo thời gian; đầu đốt làm tăng lực nâng nhưng tiêu hao nhiên liệu; xả ballast làm khinh khí cầu tăng độ cao nhưng giảm vĩnh viễn lượng ballast; làm mát khiến khinh khí cầu hạ xuống; vách hẻm núi và các lõi bão tạo ra những mối nguy có ý nghĩa. Khinh khí cầu phải liên tục di chuyển và để lại các vệt bay hiển thị rồi mờ dần. Mục tiêu là đưa toàn bộ đội bay an toàn đến ngọn hải đăng trước khi cạn tài nguyên hoặc hết thời gian. Bao gồm bộ đếm ngược phóng nổi bật lúc bình minh cùng các nút điều khiển Bắt đầu, Tạm dừng, Tiếp tục, Đặt lại và tốc độ mô phỏng. Trước khi phóng, khinh khí cầu phải đung đưa nhẹ còn các thiết bị đo khẽ rung động. Sau khi phóng, hãy tạo hoạt ảnh cho các hạt gió, chuyển động của khinh khí cầu, sự phát triển của bão, việc vẽ vệt bay, xung cảnh báo và ánh sáng thay đổi. Người dùng phải có thể kéo trực tiếp các nút điều hướng gió trên bản đồ để thay đổi luồng không khí cục bộ theo thời gian thực, với phản hồi hình ảnh và vật lý tức thì. Khi nhấp vào một khinh khí cầu, phải chọn nó, làm nổi bật lộ trình, đưa dữ liệu của nó vào trung tâm trên toàn giao diện và mở một bảng kiểm tra chi tiết nhỏ gọn. Cung cấp các nút điều khiển đầu đốt và ballast có cảm giác vật lý cho khinh khí cầu được chọn, bao gồm hành vi nhấn-giữ đầu đốt, thao tác xả ballast có hậu quả rõ ràng, phím tắt và nút có khả năng truy cập. Cho phép chọn nhiều khinh khí cầu hoặc ra lệnh cho toàn đội để hỗ trợ lối chơi nâng cao. Bố trí một thanh bên dọc gồm các thẻ nhiệm vụ hiển thị mục tiêu đội bay, cảnh báo đang hoạt động, bản tin thời tiết và tóm tắt trạng thái của từng khinh khí cầu. Các thẻ nhiệm vụ phải cập nhật theo thời gian thực và hỗ trợ lọc theo các trạng thái an toàn, cảnh báo, nguy cấp, đã đến và đã mất. Đặt một dải telemetry dày đặc nhưng dễ đọc dọc theo cạnh dưới, với các biểu đồ Canvas cuộn mượt cho độ cao, tốc độ thẳng đứng, nhiên liệu, khoảng cách đến bão và tiến độ của đội bay. Khi di chuột hoặc rà trên biểu đồ, phải hiển thị các giá trị đồng bộ và làm nổi bật thời điểm tương ứng trên vệt bay của khinh khí cầu được chọn. Thêm các đồng hồ đo cổ điển, kim quay, số liệu, đèn cảnh báo, nhãn đóng dấu, tọa độ bản đồ, các dải độ cao, một minimap hoặc bản tổng quan nhỏ gọn và chú giải rõ ràng. Sử dụng hành vi bố cục responsive thay vì chỉ thu nhỏ bố cục desktop. Trên màn hình rộng, hiển thị đồng thời thanh bên, bản đồ trung tâm, bảng kiểm tra và telemetry. Trên máy tính bảng, thu gọn các thẻ phụ thành tab hoặc ngăn kéo. Trên thiết bị di động, ưu tiên bản đồ và các nút điều khiển khinh khí cầu được chọn, cung cấp vùng chạm lớn, xếp chồng các bảng telemetry và duy trì tương tác kéo. Đảm bảo trang lấp đầy viewport linh hoạt ở nhiều tỷ lệ khung hình và vẫn sử dụng được bằng chuột, cảm ứng và bàn phím. Khiến mô phỏng có cảm giác hoàn chỉnh: bao gồm điều kiện thành công và thất bại, hoạt ảnh cập bến khi đến ngọn hải đăng nổi, phản hồi va chạm hoặc mất do bão, tooltip theo ngữ cảnh, hướng dẫn lần đầu sử dụng, trạng thái trống và vô hiệu hóa, xác nhận trước thao tác xả ballast không thể hoàn tác, luồng khởi động lại, thông báo trạng thái và báo cáo nhiệm vụ cuối cùng với các thống kê như số khinh khí cầu đến nơi, số bị mất, hiệu suất nhiên liệu, rủi ro trung bình và thời gian đã trôi qua. Khởi tạo trạng thái ban đầu để kịch bản ngay lập tức hấp dẫn nhưng vẫn có thể chiến thắng. Sử dụng requestAnimationFrame cho hoạt ảnh mượt và Canvas cho bản đồ cũng như telemetry khi phù hợp. Duy trì hiệu năng render, sử dụng devicePixelRatio để Canvas sắc nét, xử lý đúng các sự kiện resize và tránh lỗi trong console. Ưu tiên hệ thống phân cấp thị giác xuất sắc, các tương tác vi mô tinh tế, hành vi thiết bị đo thuyết phục, trạng thái được liên kết giữa mọi bảng và mức độ hoàn thiện chi tiết. Không tạo một mockup tĩnh. Không sử dụng các hình chữ nhật giữ chỗ, gradient chung chung làm toàn bộ thiết kế, điều khiển giả không hoạt động, tài nguyên bên ngoài, font bên ngoài, hộp thoại alert(), quá nhiều văn bản giải thích, tràn ngang, nhãn quá nhỏ khó đọc hoặc các tương tác chỉ hoạt động bằng chuột. Không ép Canvas 16:9 hoặc viewport kích thước cố định. Mọi điều khiển chính đang hiển thị đều phải hoạt động và mọi dữ liệu hiển thị phải bắt nguồn từ trạng thái mô phỏng trực tiếp.

Tạo một trang web HTML tương tác trong một tệp duy nhất, hoàn chỉnh và trau chuốt, có tiêu đề “Tiệm bánh tự động lúc nửa đêm”, chỉ sử dụng HTML inline, CSS và JavaScript thuần. Xuất toàn bộ tài liệu HTML có thể chạy được và không xuất thêm bất kỳ nội dung nào khác. Không sử dụng thư viện, framework, CDN, font, hình ảnh, tệp SVG, tệp âm thanh, API hoặc network request bên ngoài; toàn bộ hình ảnh, biểu tượng, phản hồi giống âm thanh, hiệu ứng và logic trò chơi phải được tạo cục bộ bằng HTML/CSS/JS. Xây dựng một trò chơi lập lịch đơn hàng có thể chơi đầy đủ, lấy bối cảnh trong một tiệm bánh tự động lúc nửa đêm. Các miếng bột phải liên tục đi vào hệ thống băng chuyền isometric, với hình dạng, công thức, nhiệt độ nướng yêu cầu, thời lượng nướng, giới hạn độ tươi và giá trị điểm được phân biệt rõ ràng. Tổ chức giao diện xoay quanh một lò nướng công nghiệp lớn ở trung tâm, một mạng băng chuyền vòng lặp có các đường ray chuyển đổi được và các bảng thiết bị đo thời gian thực gắn ở hai bên. Người chơi phải có thể kéo và sắp xếp lại các miếng bột trong hàng đợi lò, kéo chúng giữa các ô tương thích khi phù hợp, nhấp vào công tắc đường ray để chuyển hướng bột mới đến, nhấp vào các nút điều khiển lò để điều chỉnh nhiệt độ hoặc kích hoạt hệ thống và sử dụng các phím điều khiển được mô tả rõ ràng để tạm thời tăng tốc băng chuyền và làm mát khẩn cấp. Mọi tương tác bằng chuột, cảm ứng, nhấp, kéo và bàn phím phải phản hồi ngay lập tức và dễ nhận thấy. Triển khai lối chơi có trạng thái thực sự thay vì mockup tĩnh. Bao gồm nhiều đơn hàng bột đồng thời, chuyển động băng chuyền, định tuyến đường ray, kiểm tra va chạm và snap khi kéo-thả, giới hạn sức chứa, bộ đếm thời gian cho từng vật phẩm, quán tính nhiệt độ lò, tiến độ nướng, trạng thái chưa chín/chín hoàn hảo/quá lửa, điểm số, combo nhân điểm, mạng hoặc danh tiếng, độ khó tăng dần, tạm dừng/tiếp tục, khởi động lại và một lớp hướng dẫn hoặc trợ giúp tương tác ngắn gọn. Các công thức phải tạo ra những xung đột lịch trình có ý nghĩa: các sản phẩm khác nhau cần nhiệt độ và thời lượng khác nhau, khuyến khích sắp xếp lại hàng đợi cũng như làm mát hoặc tăng tốc một cách chiến lược. Bánh mì được nướng hoàn hảo phải xuất hiện với màu vàng óng, kích hoạt một vụ nổ hạt thỏa mãn, thắp sáng cửa sổ trưng bày của tiệm bánh, tăng combo và cập nhật nhật ký đơn hàng. Sai sót phải tạo ra bánh mì cháy rõ rệt, khói và hạt than bay lên, đèn cảnh báo, thiết bị rung lắc, mất combo và phản hồi phi âm thanh dễ hiểu. Cung cấp tùy chọn bật/tắt âm thanh, nhưng mô phỏng phản hồi âm thanh bằng hình ảnh và Web Audio được tạo hoàn toàn trong JavaScript khi bật; trò chơi vẫn phải dễ hiểu khi tắt tiếng. Sử dụng ngôn ngữ hình ảnh nguyên bản và thống nhất, kết hợp pixel art isometric chi tiết với thiết bị đo công nghiệp chính xác. Tạo độ tương phản giữa ánh sáng lò màu hổ phách ấm, điểm nhấn đồng, bánh mì phát sáng và nhãn màu kem dịu trên nền midnight xanh chàm đậm. Tạo chiều sâu bằng máy móc vẽ bằng CSS, sàn lát, đường ống, lỗ thông hơi, bóng đổ, vùng sáng, cạnh bậc pixel, scanline tinh tế, đèn báo, màn hình phân đoạn, đồng hồ đo, sọc cảnh báo và các chi tiết cơ khí có hoạt ảnh. Khiến lò trung tâm có cảm giác sống động với buồng lò chập chờn, cửa lò, núm nhiệt độ, hiệu ứng rung nhiệt và đèn trạng thái. Tạo hoạt ảnh cho băng chuyền, bánh răng, chuyển động của bột, khói, tia lửa, hơi làm mát, ánh sáng cửa sổ, phản hồi combo và chuyển cảnh giữa các bảng bằng CSS và JavaScript hiệu năng cao. Duy trì khả năng đọc rõ ràng và hệ thống phân cấp mạnh dù mang phong cách phòng điều khiển dày đặc. Bao gồm nội dung phong phú được sắp xếp cẩn thận: sàn tiệm bánh có thể chơi, hàng đợi đơn hàng mới, hàng đợi lò, bảng tham khảo công thức, hiển thị điểm/combo trực tiếp, thiết bị đo nhiệt độ và thông lượng, nhật ký sự kiện, chú giải điều khiển, thông báo trạng thái và modal tổng kết trò chơi hoặc ca làm với kết quả chi tiết cùng thao tác chơi lại. Thêm nhãn có khả năng truy cập, trạng thái focus hiển thị rõ, khả năng vận hành bằng bàn phím, hỗ trợ giảm chuyển động và tín hiệu trạng thái không phụ thuộc vào màu sắc. Làm cho bố cục responsive trên trình duyệt desktop, máy tính bảng và di động, tự động sắp xếp lại các bảng và thay đổi tỷ lệ tiệm bánh mà vẫn đảm bảo khả năng sử dụng. Đây là một trang web, vì vậy không ép Canvas 16:9 hoặc kích thước viewport cố định; hãy sử dụng bố cục responsive linh hoạt, đặc biệt đẹp trên các màn hình widescreen phổ biến nhưng vẫn thích ứng mượt mà với màn hình dọc. Ưu tiên tính hoàn chỉnh, cảm giác chơi game, quản lý trạng thái đáng tin cậy, định thời chính xác, xử lý kéo-thả chắc chắn, quy tắc va chạm rõ ràng, chuyển cảnh trau chuốt và phản hồi hình ảnh. Trang phải hoạt động ngay khi được lưu dưới dạng một tệp .html duy nhất và mở cục bộ. Tránh: concept art tĩnh, dashboard không hoạt động, điều khiển giữ chỗ, tương tác kéo giả, bộ đếm thời gian bị lỗi, văn bản chồng lấn, nhãn quá nhỏ khó đọc, quá nhiều nội dung giải thích, các thẻ phẳng chung chung, hình ảnh chân thực, tài nguyên bên ngoài, dependency bên ngoài, hình ảnh base64 nhúng, network access, bước build, nhiều tệp, kích thước cố định 16:9, âm thanh bắt buộc, âm thanh tự động phát, cảnh báo trình duyệt, phản hồi chỉ xuất hiện trong console và các phần TODO chưa hoàn thiện.