Show HN: screenshot-to-code - mengubah tangkapan layar menjadi kode HTML yang rapi menggunakan GPT Vision (alat OSS)

• Alat ini menggunakan AI untuk mengubah tangkapan layar, mockup, desain Figma, dan rekaman layar menjadi kode yang rapi dan berfungsi
• Stack yang didukung adalah HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, dan Ionic + Tailwind
• Juga mendukung fitur untuk menerima rekaman layar yang berisi cara kerja situs web lalu mengubahnya menjadi prototipe yang berfungsi
• Model AI bawaan adalah Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, dan Claude Opus 4.8, sementara untuk pembuatan gambar menggunakan z-image-turbo berbasis Replicate
• Untuk menjalankan secara lokal diperlukan API key serta konfigurasi backend dan frontend, dan struktur aplikasinya adalah frontend React/Vite dan backend FastAPI
  • Diperlukan setidaknya satu kunci penyedia model dari OpenAI, Anthropic, atau Gemini
  • Gemini mengekstrak logo dan gambar asli dari tangkapan layar, serta diperlukan untuk mode video
  • Replicate mengaktifkan pengeditan gambar, penghapusan latar belakang, dan pembuatan gambar berbasis Replicate
• Jika menambahkan lebih banyak kunci, sistem akan otomatis memilih kombinasi model yang lebih kuat untuk tiap varian; jika hanya ada satu kunci, maka hanya model dari penyedia tersebut yang digunakan
• Fitur opsional screenshot preview merender halaman yang dihasilkan di browser headless setelah Chromium terpasang untuk pemeriksaan visual, dan jika Chromium tidak ada maka alat tersebut akan dilewati
• Cara menjalankannya mendukung pengembangan lokal, penggunaan aplikasi yang di-host, dan menjalankannya dengan Docker; saat dijalankan dengan Docker, aplikasi berjalan di http://localhost:5173

[GN⁺]

Pendapat di Hacker News

• Ini benar-benar terlihat seperti sihir, dan saya tidak tahu harus menaruhnya di mana dalam model mental saya tentang cara komputasi bekerja
  Saya memahami bahwa jaringan saraf sebagai aproksimator fungsi universal berarti ia memodelkan sekumpulan fungsi yang memetakan input ke output dalam domain tertentu; contoh seperti MNIST terasa masuk akal secara konseptual
  Namun di sini saya penasaran apakah pelatihan umum GPT mengimplementasikan pemetaan nilai dari intensitas piksel ke token teks HTML+Tailwind, lalu hasil browser menafsirkan dan merender token itu menjadi aproksimasi gambar input
  Jika demikian, berarti GPT tidak hanya memodelkan konversi piksel→HTML/CSS, tetapi juga cara browser merender HTML/CSS. Saya bisa menerima bahwa pemetaan semacam itu ada, tetapi tetap mengejutkan bahwa GPT bisa menurunkannya sambil juga menulis tentang begitu banyak topik lain
  Secara lebih praktis, saya juga penasaran apakah alat seperti ini bisa dilihat sebagai kompiler diagram, dan nantinya menjadi bagian dari pipeline build yang menerima output seperti Sketch/Figma lalu menghasilkan HTML/CSS/JS

  • Kalau saya jelaskan dengan cara saya, LLM sebenarnya adalah ruang laten dan sarana untuk menelusurinya
    Ruang laten adalah ruang n-dimensi tempat ide dan konsep diletakkan semakin dekat jika semakin mirip satu sama lain, dan penataan ini dibuat dari data pelatihan selama proses pelatihan; jadi proses pelatihan pada dasarnya adalah proses membangun ruang laten
    Bayangkan pada grid 2 dimensi, “house” dan “mansion” ditempatkan berdekatan, sementara “growling” berada di sudut yang sama sekali berbeda. Ruang laten seperti GPT-4 serupa, tetapi memiliki ratusan hingga ribuan dimensi, dan perbedaan skala itulah yang memungkinkan pengetahuan yang sangat besar tersusun secara berguna
    Kembali ke membaca gambar, dalam data pelatihan ada gambar halaman web dan kode pasangannya, dan kode itu memberi tahu proses pelatihan di mana harus menempatkan pasangan kode-gambar. Label dan caption juga membuat gambar ditempatkan di ruang laten seperti halnya teks
    Jadi saat Anda memberi GPT-4 gambar situs web baru dan meminta HTML pasangannya, ia dapat menempatkan gambar itu di ruang laten lalu mengambil HTML pasangan yang berada di dekatnya
  • Istilah aproksimator fungsi universal hanya berarti jaringan saraf berlapis banyak dapat mendekati fungsi kontinu berbatas apa pun hingga tingkat akurasi yang diinginkan
    Namun itu tidak mengatakan apa pun tentang kemungkinan pelatihannya atau struktur yang dibutuhkan, dan struktur yang diperlukan bisa saja tidak realistis besarnya
    Algoritme pelatihan yang digunakan, yaitu backpropagation melalui stochastic gradient descent, bukanlah pembelajar universal, dan juga tidak ada jaminan akan menemukan minimum global
  • Prosesnya lebih sederhana. GPT membaca gambar dan membuat deskripsi lengkap, lalu pengguna mengambil deskripsi itu dan membuat prompt yang meminta implementasi Tailwind
    Kelihatannya arahnya adalah melewati tahap Sketch/Figma dan langsung menuju prototipe yang dapat dijalankan
  • Rasa penasaran seperti ini terasa menyegarkan setelah berbulan-bulan hanya melihat perdebatan semantik yang tidak bermakna
    Sudut pandang “bisa mencocokkan fungsi sembarang” memang benar, tetapi karena tidak memberi tahu apakah hal itu benar-benar bisa dilakukan dengan sumber daya terbatas, menurut saya itu sendiri tidak terlalu berguna
    Yang menakjubkan sekarang bukanlah aproksimator universal yang sudah ada sejak lama, melainkan bahwa ia mengaproksimasi konsep abstrak sebaik ini, dan jawabannya ada pada skala data
    Ada pandangan bahwa kompresi adalah kecerdasan, dan model-model ini bisa dilihat sebagai kompresor yang baik. Selama pelatihan, bobot memiliki ukuran tetap dan jauh lebih kecil daripada data yang ingin dicocokkan; jika tujuannya adalah memulihkan teks asli, yaitu memprediksi token berikutnya, tidak ada cara lain selain mengompresi data dengan sangat baik
    Semakin pintar, semakin baik ia memprediksi dan mengompresi; dan ketika dipaksa melakukan kompresi, pada dasarnya ia dipaksa memperoleh kecerdasan. Mirip seperti menjelang ujian: Anda bisa menghafal jawaban, tetapi jika ada ribuan soal sehingga tidak mungkin dihafal, cara terbaik adalah mempelajari mata pelajarannya dan menurunkan jawaban saat ujian
    Dualitas kompresi/kecerdasan ini kontroversial bagi pihak yang menyangkal kemampuan generalisasi LLM, tetapi itulah model mental saya saat ini dan saya belum berhasil membantahnya
    Jika menerima sudut pandang ini, kemampuan multimodal lebih mirip masalah rekayasa. Saya tidak tahu persis bagian dalam GPT-4V, tetapi kita bisa memperkirakannya dari riset multimodal yang terbuka
    Jika ada pasangan gambar dan teks yang menjelaskan gambar tersebut, gambar ditokenisasi/di-embedding seperti teks. Seperti ViT (Visual Transformer), gambar bisa diubah menjadi fitur visual per patch dan dibuat menjadi sekuens panjang
    Jika embedding ini diberikan ke LLM yang sudah dipra-latih dan dipaksa memprediksi teks deskripsi gambar, tidak ada cara lain selain memperoleh pemahaman gambar secara umum dari embedding gambar
    Setelah mampu memahami informasi dalam gambar yang diberikan dan mengungkapkannya dalam bahasa alami, tinggal melakukan instruction tuning agar ia menggunakan pemahaman itu
    Model gambar generatif seperti Stable Diffusion juga mirip: mereka melatih model kontrasif seperti CLIP agar embedding gambar dan embedding teks untuk konsep yang sama menjadi dekat, lalu menggunakan informasi ganda itu untuk mengarahkan proses generasi
    Yang menakjubkan adalah kita sudah memiliki kemampuan pada skala ini, dan bisa memperoleh lebih banyak kemampuan hanya dengan lebih banyak komputasi. Jika loss akhir GPT-4 saat ini adalah 1, besar kemungkinan ia akan menjadi jauh lebih mampu ketika entah bagaimana bisa diturunkan hingga 0,1
    Untuk pertanyaan kedua, sepertinya memang mengarah ke sana, dan mungkin saat ini pun sudah bisa
  • Jika mengejutkan bahwa GPT bisa menurunkannya, coba pikirkan jumlah dimensi yang kita hadapi dan kecepatan komputasinya

• Intinya ada di sini: https://github.com/abi/screenshot-to-code/blob/main/backend/...
  Prompt-nya menginstruksikan model, sebagai pakar Tailwind untuk pengguna, agar melihat screenshot lalu membuat aplikasi satu halaman dengan Tailwind, HTML, dan JS
  Instruksinya mencakup mencocokkan warna latar, warna teks, ukuran font, padding, margin, border, dan sebagainya secara akurat; memakai teks dari screenshot apa adanya; “tulis seluruh kodenya”; cocokkan jumlah elemen yang berulang; jangan menghilangkan bagian dengan komentar; gunakan gambar placehold.co dan masukkan deskripsi detail di alt
  Tailwind boleh memakai https://cdn.tailwindcss.com, Google Fonts, dan Font Awesome; seluruh kode harus dikembalikan hanya di dalam tag, dan tidak boleh memakai code fence Markdown
  Secara pribadi, saya tidak menganggap prompting defensif sebagai jalan ke depan, tetapi fakta bahwa ini bisa bekerja benar-benar luar biasa. Rasanya hal yang saya impikan saat remaja kini bisa dilakukan dengan usaha yang relatif kecil

  • Komputer akhirnya bekerja seperti yang selama ini kita yakini:
    mengikuti perintah secara tidak stabil, membuat bug, lalu diperbaiki dengan meneriaki mesin
  • Saya tidak suka karena cara meneriaki GPT dengan huruf kapital terasa terlalu familier. Sekarang sudah ada 128k token, rasanya ya kerjakan saja dan berikan jawabannya
    Kalau sekali lagi melihat “ini adalah tantangan yang kompleks”, rasanya benar-benar melelahkan. Kadang model yang performanya hanya 60% tetapi tidak terlalu “malas” bisa lebih baik. Untuk membuatnya memakai sisa 40% kemampuannya perlu prompt engineering tambahan, dan itu terasa lebih seperti sengaja dilemahkan daripada batasan teknis
    Meski begitu, tuntutan seperti ini masih sulit bagi para pesaing, jadi untuk saat ini OpenAI menang
    Tentu saja ini tetap sangat keren dan berguna, jadi kalau muncul persaingan yang benar-benar mengeksekusi, bukan hanya mengeluh, beberapa tahun ke depan sepertinya akan menarik
  • Saya tidak tahu bahwa kalimat yang mengancam LLM bisa seampuh itu :D
  • Saya penasaran apakah hasilnya akan lebih baik jika terlebih dahulu menjalankan alat identifikasi tech stack, lalu mengatur prompt sesuai teknologi itu alih-alih selalu memaksa memakai Tailwind

• Coba tambahkan “melakukan ini dengan benar sangat penting bagi karier saya”
  Saya tidak bisa menemukannya sekarang, tetapi menurut sebuah video riset di YouTube, kualitas output meningkat cukup jelas di berbagai tugas

  • “Anda adalah pakar yang berpikir langkah demi langkah tentang betapa pentingnya pekerjaan ini bagi karier saya”
  • Cukup lucu, dan segala hal terkait AI ini selalu mengejutkan. Setelah mencari cepat, ada artikel seperti ini: https://www.businessinsider.com/chatgpt-llm-ai-responds-bett...
    Menurut riset itu, prompt yang berisi bahasa emosional secara umum menghasilkan peningkatan performa 8% pada tugas seperti “mengubah kalimat menjadi bahasa formal” dan “menemukan ciri umum dari objek-objek yang diberikan”

• Sekarang saya tidak tahu harus membuat apa atau bagaimana memikirkannya
  Sama sekali bukan bermaksud meremehkan proyek ini, dan saya juga berterima kasih karena kodenya dibuka, tetapi sekarang ada seluruh kelompok masalah yang tampaknya bisa diselesaikan dengan cukup mudah, sehingga muncul perasaan “kenapa repot-repot?”
  Sepertinya kita perlu mengalibrasi ulang perumusan masalah, baik soal apa yang layak dipecahkan maupun bagaimana cara memecahkannya

  • Kalau output-nya cukup bagus, kita bisa menghemat waktu karena tidak perlu menulis semua HTML secara manual
    Jika alat seperti ini bisa menghasilkan “kode yang cukup baik” dan hanya perlu sedikit pemolesan, itu menjadi penghematan waktu besar
    Kalau hanya menghasilkan kode berantakan, kegunaannya berkurang
  • Buatlah sesuatu yang memecahkan masalah yang menyakitkan atau menarik. Buat hal baru, lalu dorong keadaan saat ini sedikit saja ke arah yang lebih waras, seimbang, dan baik
    Para teknolog cenderung terlalu terpaku pada alat yang mereka gunakan. Entah sudah berapa kali saya melihat proyek “hello world” kosong yang sangat biasa dipamerkan hanya karena Framework A dipaksa digabung dengan Toolkit B, dan itu benar-benar membosankan
    Teknologi berbasis LLM menantang dalam konteks ini karena kita harus memikirkan ulang kemungkinan itu sendiri. Jika alatnya bersifat serbaguna, membuat showcase sederhana tidak banyak artinya

• Hal yang menakjubkan tentu saja adalah ini bisa dilakukan dengan model serbaguna, tetapi membuat data supervised learning untuk tugas ini tampaknya cukup mudah
  Buat HTML → render dan ambil screenshot → gunakan data itu secara terbalik untuk pelatihan

• Di halaman GitHub tertulis bahwa versi yang di-host akan disediakan melalui Pico, dan saya penasaran kenapa memilih Pico
  Saya baru tahu Pico lewat halaman itu, dan Pico tampaknya hanya membayar 30% dari pendapatan. Itu setengah dari porsi app store umum yang 60%, dan dari yang saya baca, pembayaran hanya diberikan ketika pengguna gratis mencoba aplikasi lalu mendaftar, sedangkan pengguna yang sudah ada di platform dan memakai aplikasi tidak dibayar
  Syaratnya tampak jauh lebih buruk dibanding platform tradisional, dan basis penggunanya juga terlihat lebih kecil, jadi saya penasaran alasan pemilihannya

  • Saya pembuat Pico :) Yang saya maksud di sini adalah fitur-fitur ini akan diintegrasikan ke Pico
    Dan Pico adalah platform umum untuk membuat aplikasi web. Bagian 30% pendapatan itu hanya berlaku untuk afiliasi, bukan untuk pembayaran di dalam aplikasi. Pico belum mendukung pembayaran di dalam aplikasi

• Saya kurang menangkap poinnya. Kalau tujuannya menyalin situs web yang sudah ada, kenapa tidak memakai Httrack saja
  Situs web asli pasti selalu lebih mirip, dan biaya GPT API juga bisa dihemat. Teknik ini bersinar ketika berangkat dari sketsa menuju situs web

  • Tidak harus memasukkan situs web yang sudah ada; sepertinya bisa memasukkan screenshot atau desain
  • Menulis ulang antarmuka dari nol lebih baik daripada apa yang dilakukan Httrack

• Saya sangat suka cara demo situs web yang dihasilkan langsung ditampilkan saat sedang dibuat sebagai iframe dengan srcdoc
  Sederhana dan elegan

  • Lebih menarik daripada menunggu AI selesai selama 1 menit tanpa umpan balik apa pun

• Jika mengabaikan detail implementasi “AI”, ini menghasilkan HTML dalam arti yang mirip dengan mengonversi gambar raster menjadi SVG yang terlihat buruk saat diperbesar dan membuat renderer menggambar serta mengisi garis-garis yang tidak perlu.
  Dengan kata lain, output-nya tidak terlihat cukup rapi untuk diserahkan kepada pengembang web. Sepertinya pengembang harus menulis ulang hampir semuanya, kecuali struktur tingkat atas yang paling jelas—yang sejak awal tidak membutuhkan alat canggih dan bisa dilakukan lebih baik oleh plugin snippet di editor teks.
  Banyak bagian dari pengembangan web bahkan tidak terlihat. Aksesibilitas adalah metadata yang tidak bisa diperoleh dari screenshot, dan CSS responsif mungkin membutuhkan video yang memuat semua perilaku, animasi, dan sebagainya tanpa ada yang terlewat.
  JavaScript tampaknya hampir mustahil ditentukan dengan pengenalan gambar sebanyak apa pun.
  Bukankah lebih baik langsung menyalin HTML aslinya dari developer tools?

• Sepertinya ini akan jauh mempercepat pembuatan situs phishing

  • Mungkin saya yang kurang paham, tapi saya tidak mengerti bagaimana ini bisa lebih cepat daripada langsung memakai HTML dan CSS dari situs aslinya