Show HN: screenshot-to-code - chuyển ảnh chụp màn hình thành mã HTML gọn gàng bằng GPT Vision (công cụ OSS)
(github.com/abi)- Đây là công cụ dùng AI để chuyển ảnh chụp màn hình, mockup, thiết kế Figma và bản ghi màn hình thành mã sạch, có thể hoạt động
- Các stack được hỗ trợ gồm HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind
- Cũng hỗ trợ tính năng nhận bản ghi màn hình về hoạt động của website và chuyển thành nguyên mẫu có thể chạy được
- Các mô hình AI mặc định là Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, Claude Opus 4.8; còn việc tạo ảnh sử dụng z-image-turbo dựa trên Replicate
- Để chạy cục bộ cần có khóa API cùng cấu hình backend và frontend; cấu trúc ứng dụng gồm frontend React/Vite và backend FastAPI
- Cần khóa từ ít nhất một nhà cung cấp mô hình trong OpenAI, Anthropic hoặc Gemini
- Gemini trích xuất logo và hình ảnh thực từ ảnh chụp màn hình, đồng thời cần cho chế độ video
- Replicate kích hoạt chỉnh sửa ảnh, xóa nền và tạo ảnh dựa trên Replicate
- Khi thêm nhiều khóa hơn, hệ thống sẽ tự động chọn tổ hợp mô hình mạnh hơn theo từng variant; nếu chỉ có một khóa thì chỉ dùng các mô hình của nhà cung cấp đó
- Tính năng tùy chọn screenshot preview sẽ render trang đã tạo trong headless browser sau khi cài Chromium để kiểm tra trực quan; nếu không có Chromium thì công cụ đó sẽ bị bỏ qua
- Hỗ trợ các cách chạy gồm phát triển cục bộ, dùng ứng dụng được host sẵn và chạy bằng Docker; khi chạy Docker, ứng dụng sẽ chạy tại
http://localhost:5173
1 bình luận
Ý kiến trên Hacker News
Cái này trông đúng là như phép màu, và tôi không biết phải đặt nó vào đâu trong mô hình tinh thần của mình về cách việc tính toán hoạt động
Tôi hiểu rằng mạng nơ-ron là bộ xấp xỉ hàm phổ quát, nghĩa là nó mô hình hóa một tập các hàm ánh xạ đầu vào sang đầu ra trong một miền nhất định, và các ví dụ như MNIST thì về mặt khái niệm còn có thể hiểu được
Nhưng ở đây, tôi tự hỏi có phải quá trình học tổng quát của GPT đang thực hiện phép ánh xạ giá trị từ cường độ pixel sang các token văn bản HTML+Tailwind, rồi kết quả khi trình duyệt diễn giải và render các token đó sẽ xấp xỉ ảnh đầu vào hay không
Nếu vậy thì GPT không chỉ mô hình hóa chuyển đổi pixel→HTML/CSS mà còn cả cách trình duyệt render HTML/CSS, và dù tôi có thể chấp nhận rằng một ánh xạ như vậy tồn tại, điều đáng kinh ngạc là GPT lại suy ra được nó trong khi còn viết về vô số chủ đề khác nữa
Thực tế hơn thì tôi cũng tò mò liệu có thể xem công cụ này như một trình biên dịch sơ đồ hay không, và liệu sau này nó có thể trở thành một phần của pipeline build nhận đầu ra từ Sketch/Figma rồi xuất HTML/CSS/JS hay không
Không gian tiềm ẩn là một không gian n chiều nơi các ý tưởng và khái niệm càng giống nhau thì càng nằm gần nhau, và cách sắp xếp này được tạo ra từ dữ liệu huấn luyện trong quá trình học, nên quá trình huấn luyện cũng chính là quá trình tạo ra không gian tiềm ẩn
Hãy tưởng tượng trong một lưới 2 chiều, “house” và “mansion” nằm gần nhau, còn “growling” thì ở tận một góc hoàn toàn khác. Không gian tiềm ẩn của GPT-4 cũng tương tự như vậy nhưng có hàng trăm đến hàng nghìn chiều, và sự khác biệt về quy mô đó cho phép nó sắp xếp một lượng kiến thức khổng lồ theo cách hữu ích
Quay lại việc đọc ảnh, trong dữ liệu huấn luyện có các hình ảnh trang web và đoạn mã tương ứng, và chính đoạn mã đó đã cho quá trình huấn luyện biết nên đặt các cặp mã-hình ảnh ở đâu. Nhãn và chú thích cũng giúp đặt hình ảnh vào không gian tiềm ẩn như văn bản
Vì vậy khi đưa cho GPT-4 một hình ảnh website mới và yêu cầu HTML tương ứng, nó có thể đặt hình ảnh đó vào không gian tiềm ẩn rồi lấy HTML tương ứng ở gần đó
Nhưng điều đó không nói gì về khả năng học được hay cấu trúc cần thiết, và cấu trúc cần thiết có thể lớn đến mức phi thực tế
Thuật toán huấn luyện được dùng, tức lan truyền ngược với hạ gradient ngẫu nhiên, không phải là một bộ học phổ quát và cũng không có gì đảm bảo nó sẽ tìm được cực tiểu toàn cục
Có vẻ nó bỏ qua bước Sketch/Figma để đi thẳng tới nguyên mẫu có thể chạy được
Góc nhìn “có thể khớp bất kỳ hàm nào” là đúng, nhưng nó không cho biết liệu với tài nguyên hữu hạn có thực sự làm được như vậy hay không, nên tự nó không quá hữu ích
Điều đáng kinh ngạc lúc này không phải là bộ xấp xỉ phổ quát đã có từ lâu, mà là việc nó xấp xỉ các khái niệm trừu tượng tốt đến vậy, và câu trả lời nằm ở quy mô dữ liệu
Có một góc nhìn cho rằng nén chính là trí tuệ, và các mô hình này có thể xem như những bộ nén tốt. Trong quá trình huấn luyện, trọng số có kích thước cố định và nhỏ hơn rất nhiều so với dữ liệu cần khớp, và nếu mục tiêu là khôi phục văn bản gốc, tức dự đoán token tiếp theo, thì không còn cách nào khác ngoài việc nén dữ liệu thật tốt
Càng thông minh thì càng dự đoán/nén tốt hơn, và khi bị buộc phải nén thì về thực chất cũng bị buộc phải đạt được trí tuệ. Nó giống như trước kỳ thi bạn có thể học vẹt đáp án, nhưng nếu có hàng nghìn câu hỏi đến mức không thể học thuộc, thì cách tốt nhất là học môn đó để suy ra đáp án trong lúc làm bài
Tính hai mặt nén/trí tuệ này vẫn còn gây tranh cãi đối với những người phủ nhận khả năng khái quát hóa của LLM, nhưng hiện tại đó là mô hình tinh thần của tôi và vẫn chưa bị phản chứng
Nếu chấp nhận góc nhìn này thì năng lực đa phương thức gần như là một vấn đề kỹ thuật. Tôi không biết chính xác bên trong GPT-4V ra sao, nhưng có thể suy đoán từ các nghiên cứu đa phương thức công khai
Nếu có các cặp hình ảnh và văn bản mô tả hình ảnh đó, thì có thể token hóa/nhúng hình ảnh tương tự như văn bản. Chẳng hạn như ViT (Visual Transformer) có thể biến ảnh thành các đặc trưng thị giác theo từng patch rồi tạo thành một chuỗi dài
Đưa phần nhúng này vào một LLM đã tiền huấn luyện và buộc nó dự đoán văn bản mô tả ảnh thì không còn cách nào khác ngoài việc học được khả năng hiểu ảnh nói chung từ phần nhúng ảnh đó
Sau khi đã có thể hiểu thông tin trong một ảnh nhất định và diễn đạt nó bằng ngôn ngữ tự nhiên, thì chỉ cần tinh chỉnh theo chỉ dẫn để buộc nó sử dụng sự hiểu biết đó
Các mô hình tạo ảnh như Stable Diffusion cũng tương tự, bằng cách huấn luyện một mô hình đối chiếu như CLIP để đưa phần nhúng ảnh và phần nhúng văn bản của cùng một khái niệm lại gần nhau, rồi dùng thông tin kép đó để điều khiển hướng sinh
Điều đáng kinh ngạc là nó đã có sẵn năng lực ở quy mô này, và chỉ với nhiều tính toán hơn thì có thể có thêm nhiều năng lực hơn nữa. Nếu loss cuối cùng hiện tại của GPT-4 là 1, thì khi bằng cách nào đó hạ được xuống 0.1, rất có thể nó sẽ trở nên năng lực hơn rất nhiều
Còn về câu hỏi thứ hai thì đúng là có vẻ đang đi theo hướng đó, và có lẽ ngay cả bây giờ cũng đã làm được
Điểm cốt lõi nằm ở đây: https://github.com/abi/screenshot-to-code/blob/main/backend/...
Prompt hướng dẫn mô hình, với vai trò là một chuyên gia Tailwind cho người dùng, nhìn ảnh chụp màn hình và tạo một ứng dụng một trang bằng Tailwind, HTML và JS.
Trong đó có các chỉ thị như phải khớp chính xác màu nền, màu chữ, cỡ chữ, padding, margin, viền, v.v., dùng nguyên văn phần chữ trong ảnh chụp màn hình, “viết toàn bộ mã”, khớp số lượng phần tử lặp lại, không được lược bỏ bằng chú thích, dùng ảnh placehold.co và thêm mô tả chi tiết trong alt.
Có thể dùng Tailwind qua
https://cdn.tailwindcss.com, Google Fonts và Font Awesome, và được yêu cầu chỉ trả về toàn bộ mã bên trong các thẻ, không dùng Markdown code fence.Cá nhân tôi không nghĩ prompt phòng thủ là con đường về sau, nhưng việc thứ này hoạt động thực sự rất ấn tượng. Cảm giác như điều tôi từng mơ khi còn tuổi teen giờ đã có thể làm được với tương đối ít công sức.
tuân lệnh một cách thất thường, tạo ra bug, rồi phải quát vào cái máy để sửa nó.
Nếu còn phải thấy “đây là một thử thách phức tạp” thêm một lần nữa chắc tôi phát mệt mất. Kể cả hiệu năng chỉ 60% thì đôi khi một mô hình ít “lười” hơn lại tốt hơn. Để khai thác nốt 40% còn lại đó thì phải làm thêm prompt engineering, và cảm giác này giống như bị làm yếu đi có chủ đích hơn là giới hạn kỹ thuật.
Dù vậy, đây vẫn là yêu cầu khó với các đối thủ cạnh tranh nên hiện tại OpenAI vẫn thắng.
Dĩ nhiên thứ này vẫn cực kỳ ngầu và hữu ích, nên nếu có đối thủ nào xuất hiện mà thực sự làm được thay vì chỉ than phiền, thì vài năm tới sẽ rất thú vị.
Có lẽ nên thử thêm câu “làm tốt việc này là điều rất quan trọng đối với sự nghiệp của tôi”.
Giờ tôi không tìm lại được, nhưng theo một video nghiên cứu nào đó trên YouTube thì chất lượng đầu ra được cải thiện rõ rệt trong nhiều tác vụ.
Theo nghiên cứu, các prompt có dùng ngôn ngữ cảm xúc đã mang lại mức cải thiện hiệu năng 8% tổng thể trong các tác vụ như “chuyển câu sang văn phong trang trọng” hay “tìm đặc điểm chung của các đối tượng cho trước”.
Giờ tôi không còn biết phải nghĩ gì về việc nên xây cái gì nữa.
Tôi hoàn toàn không có ý hạ thấp dự án này, và cũng cảm ơn vì đã open source, nhưng giờ xuất hiện cả một cụm vấn đề có vẻ đã trở nên khá dễ giải quyết, nên tạo cảm giác “vậy thì còn làm để làm gì?”.
Có lẽ cần hiệu chỉnh lại cách đặt vấn đề ở cả hai phía: cái gì đáng để giải, và nên giải nó như thế nào.
Nếu một công cụ như thế này có thể tạo ra đoạn mã đủ ổn chỉ cần chỉnh sửa nhẹ thì sẽ tiết kiệm được rất nhiều thời gian.
Nếu nó chỉ nhả ra một mớ mã lộn xộn thì sẽ ít hữu ích hơn.
Giới kỹ sư có xu hướng ám ảnh quá mức với chính những công cụ họ dùng. Tôi không biết đã thấy bao nhiêu dự án “hello world” rỗng tuếch, cực kỳ tầm thường được đem ra khoe chỉ vì nó gắn ép Framework A với Toolkit B, và thật sự rất chán.
Công nghệ dựa trên LLM gây thách thức trong bối cảnh này vì nó buộc ta phải suy nghĩ lại về chính những gì là khả thi. Nếu công cụ mang tính đa dụng, thì việc làm một màn trình diễn đơn thuần không còn nhiều ý nghĩa.
Điều đáng kinh ngạc dĩ nhiên là việc này làm được với một mô hình đa dụng, nhưng có vẻ cũng khá dễ tạo ra dữ liệu học có giám sát cho chính tác vụ này.
Tạo HTML → render và chụp màn hình → rồi dùng ngược lại dữ liệu đó để huấn luyện.
Trên trang GitHub có ghi là sẽ cung cấp bản host thông qua Pico, nên tôi tò mò không hiểu vì sao lại chọn Pico.
Tôi vừa mới biết đến Pico qua chính trang đó, và Pico có vẻ như chỉ trả 30% doanh thu. Đó là bằng một nửa mức chia 60% của các app store thông thường, và theo cách tôi đọc thì chỉ trả khi người dùng miễn phí dùng thử ứng dụng rồi đăng ký; còn nếu là người dùng đã có sẵn trên nền tảng thì có vẻ không được trả.
Điều kiện có vẻ tệ hơn nhiều so với các nền tảng truyền thống, trong khi tệp người dùng cũng nhỏ hơn, nên tôi tò mò về lý do chọn nó.
Và Pico là một nền tảng tạo web app nói chung. Phần 30% doanh thu chỉ áp dụng cho affiliate, không áp dụng cho thanh toán trong ứng dụng. Pico hiện vẫn chưa hỗ trợ thanh toán trong ứng dụng.
Tôi không rõ lắm ý chính ở đây. Nếu mục tiêu là sao chép một website hiện có, thì tôi không hiểu tại sao không dùng Httrack.
Website gốc lúc nào cũng sẽ giống hơn, lại còn tiết kiệm được chi phí GPT API. Kỹ thuật này thực sự tỏa sáng khi đi từ bản phác thảo sang website.
Tôi thực sự thích cách họ hiển thị ngay bản demo website được tạo ra trong một iframe có
srcdocngay khi đang sinh ra nó.Đơn giản và thanh lịch.
Bỏ qua các chi tiết triển khai “AI”, về cơ bản đây là việc tạo ra HTML theo nghĩa khá giống với chuyện chuyển ảnh raster sang SVG rồi khi phóng to thì trông rất tệ, đồng thời khiến trình render vẽ ra các đường nét và vùng tô không cần thiết
Nói cách khác, đầu ra có vẻ không đủ sạch để bàn giao cho lập trình viên web. Có vẻ lập trình viên sẽ phải viết lại gần như mọi thứ, ngoài phần cấu trúc cấp cao hiển nhiên nhất mà plugin snippet trong trình soạn thảo văn bản còn làm tốt hơn ngay từ đầu, nên cũng chẳng cần đến công cụ cao cấp này
Phần lớn công việc phát triển web vốn không nhìn thấy được. Khả năng truy cập là metadata không thể lấy từ ảnh chụp màn hình, còn CSS responsive thì có lẽ sẽ cần cả video ghi lại đầy đủ mọi tương tác và hoạt ảnh
JavaScript dường như gần như không thể suy ra chỉ bằng bất kỳ mức độ nhận diện hình ảnh nào
Chẳng phải thà sao chép trực tiếp HTML thật từ công cụ dành cho nhà phát triển còn hơn sao?
Có vẻ tốc độ tạo trang web lừa đảo sẽ nhanh hơn rất nhiều