Hi, I am

Ngô Tôn

I am a programmer.

Home / AI/ML/DL/DS / Tự động tạo code HTML & CSS từ hình ảnh với Deep Learning

Tự động tạo code HTML & CSS từ hình ảnh với Deep Learning

Tiếp tục bài viết trong series Tự học và phát triển ứng dụng thực tế AI, ML, DL, DS hôm nay mình mang đến cho các bạn cách Tự động tạo code HTML & CSS từ hình ảnh với Deep Learning.

Với sự phát triển của Deep Learning, ngành công nghiệp phần mềm và cụ thể là front-end development đã được hỗ trợ và cải thiện đáng kể, mọi việc đã có thể được làm một cách tự động nhờ các thuật toán học sâu.

Trong bài bài này, chúng ta sẽ xây dựng mạng nơ-ron (Neural network) để tự động tạo ra mã code một trang web HTML và CSS cơ bản dựa trên hình ảnh của một bản thiết kế (Mockup). Chương trình được viết bằng PythonKeras, một framework mạnh mẽ của TensorFlow. Các bạn cũng sẽ sử dụng Google Colab để huấn luyện mô hình nhờ GPU mạnh mẽ được cung cấp miễn phí nhé.

Quy trình như sau:

  1. Đưa vào hình ảnh cho mạng nơ-ron đã được huấn luyện (The trained neural network)
  2. Mạng nơ-ron sẽ tiến hành chuyển đổi hình ảnh sang html (Convert image into HTML markup)
  3. Xuất ra kết quả

Xây dựng mạng nơ-ron

Đầu tiên, chúng ta sẽ tạo ra một phiên bản đơn giản.

Phiên bản thứ hai, sẽ tập trung vào việc tự động hóa tất cả các bước.

Trong phiên bản cuối cùng, chúng ta sẽ tạo một mô hình có thể tổng quát hóa và khám phá lớp LSTM.

Khi bạn đào tạo mạng nơ-ron này, bạn cung cấp cho nó một số ảnh chụp màn hình với HTML phù hợp. Nó học bằng cách dự đoán từng thẻ HTML phù hợp. Khi nó dự đoán thẻ tiếp theo, nó sẽ nhận được ảnh chụp màn hình cũng như tất cả các thẻ đánh dấu chính xác cho đến thời điểm đó.

Phiên bản đơn giản

Chúng ta sẽ cung cấp cho mạng nơ-ron một ảnh chụp màn hình có trang web hiển thị “Hello World!” và dạy nó để tạo ra thẻ HTML.

Đầu tiên, mạng nơ-ron ánh xạ mô hình thiết kế thành một danh sách các giá trị pixel. Từ 0–255 ở ba kênh đỏ, xanh dương và xanh lục. Để biểu diễn đánh dấu theo cách mà mạng nơ-ron hiểu được, mình sử dụng one-hot encoding.

Phiên bản nâng cao

Trong phiên bản này, chúng ta sẽ tự động hóa nhiều bước từ mô hình đầu tiên. Phần này sẽ tập trung vào việc tạo ra một phiên bản triển khai có thể mở rộng. Nó sẽ không thể dự đoán HTML từ các trang web ngẫu nhiên, nhưng nó vẫn là một thiết kế tuyệt vời.

Đầu tiên, bộ mã hóa (Encoder). Đây là nơi chúng ta tạo các tính năng hình ảnh và các tính năng đánh dấu trước đó. Các tính năng là các khối xây dựng mà mạng tạo ra để kết nối các mô hình thiết kế với đánh dấu. Ở cuối bộ mã hóa, ta dán các đặc điểm hình ảnh vào từng từ trong phần đánh dấu trước đó.

Sau đó, bộ giải mã (Decoder) sẽ sử dụng tính năng đánh dấu và thiết kế kết hợp và tạo ra một tính năng thẻ tiếp theo. Tính năng này được chạy thông qua một mạng nơ-ron được kết nối đầy đủ để dự đoán thẻ tiếp theo.

Phiên bản cuối cùng

Trong phiên bản cuối cùng, chúng ta sẽ sử dụng tập dữ liệu các trang web bootstrap được tạo từ bài báo pix2code. Bằng cách sử dụng Bootstrap kết hợp HTML và CSS và giảm kích thước của từ vựng.

Các tính năng trích xuất từ ​​các mô hình được đào tạo trước hoạt động tốt trong các mô hình chú thích hình ảnh. Các mô hình được đào tạo trước chưa được đào tạo về dữ liệu web và được tùy chỉnh để phân loại. Trong mô hình này, chúng ta thay thế các tính năng hình ảnh được đào tạo trước bằng một mạng nơ-ron khác. Thay vì sử dụng tổng hợp tối đa để tăng mật độ thông tin, mình sẽ tăng các bước tiến. Điều này duy trì vị trí và màu sắc của các phần tử cho front-end.

Có hai mô hình cốt lõi: mạng tích chập (CNN) và mạng hồi quy (RNN). Và một mạng nơ-ron phổ biến, cải tiến của mạng RNN đó là LSTM (Long Short Term Memory network).

Bây giờ chúng ta xem kết quả

About ngoton

Ngô Tôn is a programmer with passion for tailored software solutions. Comes with 7+ years of IT experience, to execute beautiful front-end experiences with secure and robust back-end solutions.

Check Also

Phục hồi ảnh cũ với Deep Learning

Mục lục Bring Old Photos Back To Life – Old Photo Restoration Phục hồi ảnh cũ …

Leave a Reply

avatar
  Subscribe  
Notify of