Show HN: Dùng GPT Vision (công cụ OSS) để chuyển ảnh chụp màn hình thành mã HTML gọn gàng
(github.com/abi)Ứng dụng chuyển ảnh chụp màn hình thành mã
- Một ứng dụng đơn giản chuyển ảnh chụp màn hình thành HTML/Tailwind CSS
- Dùng GPT-4 Vision để tạo mã, và DALL-E 3 để tạo hình ảnh tương tự
- Xem phần ví dụ bên dưới để xem bản demo
Nội dung cập nhật
- Thêm tùy chọn tắt việc tạo ảnh DALL-E nếu không cần tạo hình ảnh
- Có thể xem trực tiếp mã ngay trong ứng dụng
- Nếu AI áp dụng sai kiểu dáng hoặc bỏ sót phần nào, có thể yêu cầu cập nhật mã
Bắt đầu
- Ứng dụng gồm frontend React/Vite và backend FastAPI
- Cần khóa API OpenAI có quyền truy cập GPT-4 Vision API
- Có hướng dẫn chạy backend và frontend để dùng ứng dụng trên máy cục bộ
Câu hỏi thường gặp (FAQ)
- Có hướng dẫn cách xử lý khi gặp lỗi trong lúc cấu hình backend
- Có hướng dẫn cách lấy khóa API OpenAI bao gồm mô hình GPT4 Vision
- Có hướng dẫn cách gửi phản hồi, yêu cầu tính năng và báo lỗi
Ví dụ
- Có các ví dụ so sánh bản gốc và bản sao của NYTimes, Instagram, Hacker News, v.v.
Phiên bản được host
- Bạn phải có khóa OpenAI và cần có quyền truy cập GPT-4 Vision
- Có thể xem hướng dẫn cài đặt cục bộ trong phần Bắt đầu
Ý kiến của GN⁺
Ứng dụng này là một công cụ đột phá để chuyển ảnh chụp màn hình thành mã web, với điểm quan trọng nhất là tận dụng các công nghệ AI mới nhất như GPT-4 Vision và DALL-E 3. Công nghệ này đặc biệt thú vị và hấp dẫn vì giúp các nhà phát triển web và nhà thiết kế tiết kiệm thời gian, từ đó tập trung nhiều hơn vào công việc sáng tạo. Ngoài ra, tính năng cho phép người dùng trực tiếp chỉ dẫn AI để chỉnh sửa mã còn giúp cải thiện trải nghiệm người dùng và nâng cao độ chính xác của AI.
1 bình luận
Ý kiến Hacker News
Có ý kiến cho rằng công nghệ này giống như phép màu; dù hiểu khái niệm mạng nơ-ron mô hình hóa một tập hàm ánh xạ đầu vào sang đầu ra, việc GPT mô hình hóa quá trình ánh xạ hình ảnh thành các token văn bản HTML+Tailwind rồi để trình duyệt render chúng vẫn rất đáng kinh ngạc.
Có câu hỏi 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 nó có thể trở thành một phần của pipeline build chuyển đổi các artifact được tạo từ những công cụ như Sketch hoặc Figma sang HTML/CSS/JS hay không.
Có ví dụ về prompt dùng Tailwind, HTML và JS để xây dựng ứng dụng single-page dựa trên ảnh chụp màn hình trang web do người dùng cung cấp, đồng thời nhấn mạnh chỉ dẫn phải sao chép thiết kế thật chính xác.
Có ý kiến cá nhân rằng một hướng tiếp cận khác, thay vì defensive prompting, có thể sẽ tốt hơn, nhưng bản thân việc công nghệ này hoạt động được đã là điều đáng kinh ngạc.
Có người nhắc đến một video nghiên cứu trên YouTube nói rằng thêm câu "điều này rất quan trọng với sự nghiệp của tôi" sẽ cải thiện chất lượng đầu ra, và cho rằng cụm này giúp cải thiện chất lượng cho nhiều loại tác vụ khác nhau.
Có ý kiến cho rằng công nghệ này làm mở rộng phạm vi vấn đề có thể giải quyết, từ đó dẫn đến băn khoăn nên tạo ra điều gì và cần nhìn nhận, giải quyết vấn đề theo cách khác đi.
Có người cho rằng việc dùng một mô hình tổng quát để làm việc này là rất ấn tượng, nhưng dữ liệu cho supervised learning cũng có thể được tạo ra khá dễ dàng.
Có thông tin rằng sẽ cung cấp phiên bản được host thông qua Pico trên GitHub Pages, kèm theo câu hỏi vì sao lại chọn Pico.
Có lời khen rằng cách hiển thị bản demo website được tạo ra theo thời gian thực bằng
iframevớisrcdocvừa đơn giản vừa thanh lịch.Có ý kiến cho rằng nếu muốn sao chép một website có sẵn thì dùng Httrack có thể cho kết quả giống hơn và tiết kiệm được chi phí API của GPT.
Có lo ngại rằng công nghệ này sẽ khiến việc tạo các trang phishing trở nên nhanh hơn rất nhiều.
Có ý kiến rằng công cụ này hoàn hảo để đáp ứng các yêu cầu thay đổi liên tục từ quản lý dự án, đồng thời đặt câu hỏi liệu nó có hoạt động cả với những đầu vào mơ hồ như "Make it pop" hay không.