Screenshot-to-Code là dự án mã nguồn mở cho phép người dùng chỉ cần kéo một ảnh chụp màn hình hoặc một video ngắn của giao diện web, sau đó AI sẽ tự động tạo ra mã nguồn tương ứng (HTML, Tailwind, React hoặc Vue). Ứng dụng được xây dựng với frontend React/Vite và backend FastAPI, hỗ trợ các nhà phát triển nhanh chóng tạo prototype từ thiết kế thực tế.
Để đạt chất lượng cao nhất, dự án khuyến nghị sử dụng các khóa API từ Gemini (để trích xuất tài sản như logo, hình ảnh) và Replicate (để tạo ảnh, loại bỏ nền). Khi có nhiều khóa API, hệ thống sẽ tự động kết hợp các mô hình mạnh hơn; nếu chỉ có một khóa, sẽ dùng mô hình của nhà cung cấp đó. Ngoài ra, người dùng có thể chạy phiên bản mở nguồn trên Ollama, nhưng kết quả có thể không đạt chuẩn.
Hướng dẫn triển khai nhanh:
- Cài đặt backend:
poetry installvà cấu hình.envvới các khóa API. - Chạy
poetry run uvicorn main:app --reload --port 7001để khởi động server. - Frontend được phục vụ tại
http://localhost:5173sau khi chạynpm install && npm run devhoặc dùng Docker Compose.
Với khả năng chuyển đổi nhanh từ hình ảnh sang mã, Screenshot-to-Code giúp các nhà phát triển Việt Nam rút ngắn thời gian triển khai UI, giảm phụ thuộc vào việc viết code thủ công và mở ra cơ hội sáng tạo nhanh chóng trong môi trường thiết kế và phát triển web.
Nguồn: GitHub Trending — Biên dịch & tổng hợp: danhbaai.com