Hướng dẫn dùng Sketch2Code để chuyển bản vẽ tay thành file HTML

Sketch2Code sử dụng AI để chuyển đổi các bản vẽ tay thành file HTML. Bạn chỉ cần lên ý tưởng cho một form thiết kế. Sau đó Upload lên Sketch2Code, mẫu thiết kế vẽ tay của bạn sẽ được trí tuệ nhân tạo phân tích thành code HTML hoàn chỉnh cho bạn. Bạn không cần phải gõ từng dòng Code để tạo thành file HTML nửa.

Tham gia kênh Telegram của AnonyViet 👉 Link 👈

Thông thường, trước khi ra một sản phẩm bạn phải thiết kế mẫu lên giấy hoặc bảng. Chẳng hạn như giao diện Website, Form điền thông tin… Sau khi có mẫu thiết kế, bạn sẽ biên dịch nó thành mã HTML để hoạt động trên nền Web. Việc này làm mất thời gian trong quá trình hoàn thiện sản phẩm của bạn.

Các bài viết liên quan

Computer Vision là gì?

Microsoft đã sử dụng Computer Vision để xây dựng một hệ thống hiểu những gì một nhà thiết kế đã vẽ, sau đó chuyển sự hiểu biết đó sang mã HTML. Bằng cách này, bạn có thể tạo mã HTML trực tiếp từ hình ảnh vẽ tay. Trí tuệ nhân tạo có thể tự học các mô hình để phát hiện các đối tượng HTML, sau đó sử dụng nhận dạng văn bản để trích xuất văn bản viết tay trong thiết kế. Bằng cách kết hợp đối tượng và văn bản, Sketch2Code có thể tạo các đoạn HTML của các giao diện thiết kế khác nhau

Xem thêm: Tạo ảnh GIF theo phong cách hacker + Source code

Computer Vision là một môn học thuộc về trí tuệ nhân tạo. Phương pháp này cung cấp cho ứng dụng khả năng nhìn và hiểu những gì nó đang nhìn thấy. Sử dụng Cognitive Services của Microsoft, bạn có thể dạy cho máy tính các hiểu và phân tích hàng triệu hình ảnh để phân tích, nhận dạng các đối tượng khác nhau

Đối với Sketch2Code, Microsoft đã tạo ra một con AI có khả năng nhận ra các yếu tố thiết kế web là textbox hay button. Microsoft đã sử dụng chức năng nhận dạng chữ viết tay có trong Computer Vision để trích xuất văn bản thành chữ trên máy tính. Bằng cách kết hợp yếu tố thiết kế và nội dung được trích xuất, Sketch2Code có thể tạo các đoạn mã HTML. Sau đó AI có thể suy ra bố cục của thiết kế từ vị trí của các phần tử được xác định và tạo mã HTML hoàn chỉnh.

Có lẽ đây là sản phẩm của Microsoft cạnh tranh với trí tuệ nhân tạo Quick, Draw của Google.

Cách dùng Sketch2Code để chuyển bản vẽ tay thành file HTML

Để sử dụng Sketch2Code chuyển bản vẽ thiết kế thành mã HTML, bạn có thể truy cập vào trang Sketch2Code của Microsoft. Đây là Demo về AI thuộc lĩnh vực Computer Vision.

Bước 1: Hãy vẽ ra giấy bản phát thảo về giao diện bạn sẽ chuẩn bị Code

Bước 2: Bạn có thể dùng điện thoại chụp lại bản phát thảo, hoặc scan thành file hình ảnh

Xem thêm: HackerGPT - Công cụ ChatGPT dành riêng cho Hacker

Bước 3: Truy cập vào trang Sketch2Code của Microsoft.

Bước 4: Click vào nút UPLOAD DESIGN hoặc nếu bạn dùng điện thoại thì chọn TAKE A PICTURE để tải bản phát thảo của bạn lên.

Bước 5: Bạn chờ một chút, Sketch2Code sẽ tự chuyển thành code HTML cho bạn. Bạn có thể click vào nút DOWNLOAD YOUR CODE để tải file HTML và chỉnh sửa lại theo ý muốn.

Có thể nói trí tuệ nhân tạo ngày càng thông minh, cuộc sống con người càng dễ dàng hơn. Bạn không cần phải gõ từng dòng code để tạo ra giao diện Website nửa. Sketch2Code sẽ giúp bạn chuyển từ bản thiết kế vẽ tay thành file HTML hoàn chỉnh. Bạn có thể tiết kiệm hàng giờ đồng hồ trong việc thiết kế Website của mình.

Câu hỏi thường gặp

Sketch2Code có hoạt động như thế nào?

Sketch2Code sử dụng trí tuệ nhân tạo (AI) và Computer Vision để phân tích hình ảnh bản vẽ tay của bạn, nhận diện các thành phần thiết kế (như button, textbox) và văn bản, sau đó tự động tạo ra mã HTML tương ứng.