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

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.

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

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

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.