Show HN: Menggunakan GPT Vision (alat OSS) untuk mengubah screenshot menjadi kode HTML yang rapi

 (github.com/abi)
2 poin oleh GN⁺ 2023-11-17 | 1 komentar | Bagikan ke WhatsApp

Aplikasi untuk mengubah screenshot menjadi kode

  • Aplikasi sederhana yang mengubah screenshot menjadi HTML/Tailwind CSS
  • Menggunakan GPT-4 Vision untuk menghasilkan kode, dan DALL-E 3 untuk membuat gambar yang mirip
  • Lihat bagian contoh di bawah untuk melihat demo

Riwayat pembaruan

  • Menambahkan pengaturan untuk menonaktifkan pembuatan gambar DALL-E jika pembuatan gambar tidak diperlukan
  • Kode dapat diperiksa langsung di dalam aplikasi
  • Jika AI menerapkan gaya secara keliru atau melewatkan bagian, pengguna dapat memberi instruksi untuk memperbarui kode

Memulai

  • Aplikasi terdiri dari frontend React/Vite dan backend FastAPI
  • Memerlukan kunci API OpenAI yang dapat mengakses GPT-4 Vision API
  • Menyediakan cara menjalankan backend dan frontend, sehingga aplikasi dapat digunakan secara lokal

Pertanyaan yang Sering Diajukan (FAQ)

  • Menyediakan cara mengatasi masalah jika terjadi error saat menyiapkan backend
  • Menjelaskan cara memperoleh kunci API OpenAI yang mencakup model GPT4 Vision
  • Menjelaskan cara memberikan umpan balik, meminta fitur, dan melaporkan bug

Contoh

  • Menyediakan contoh asli dan hasil replikasi dari NYTimes, halaman Instagram, Hacker News, dan lainnya

Versi hosting

  • Anda harus memiliki kunci OpenAI dan dapat mengakses GPT-4 Vision
  • Petunjuk instalasi lokal dapat dilihat di bagian Memulai

Pendapat GN⁺

Aplikasi ini adalah alat inovatif untuk mengubah screenshot menjadi kode web, dengan poin terpenting berupa pemanfaatan teknologi AI terbaru seperti GPT-4 Vision dan DALL-E 3. Teknologi ini menarik karena memberi pengembang web dan desainer kesempatan untuk menghemat waktu dan lebih fokus pada pekerjaan kreatif. Selain itu, fitur yang memungkinkan pengguna memberi instruksi langsung kepada AI untuk memperbaiki kode membantu meningkatkan pengalaman pengguna dan akurasi AI.

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-17
Komentar Hacker News

  • Ada pendapat bahwa teknologi ini terasa seperti sihir; meskipun konsep bahwa jaringan saraf memodelkan sekumpulan fungsi yang memetakan input ke output bisa dipahami, tetap menakjubkan bahwa GPT memodelkan proses pemetaan gambar menjadi token teks HTML+Tailwind lalu browser merendernya.

    Mengungkapkan kekaguman pada bagaimana GPT memodelkan piksel gambar menjadi token teks HTML dan Tailwind, lalu bagaimana browser menafsirkan dan merender token tersebut.

  • Pertanyaan apakah alat ini bisa dianggap sebagai compiler diagram, dan apakah bisa menjadi bagian dari build pipeline yang mengubah artefak yang dibuat dari alat seperti Sketch atau Figma menjadi HTML/CSS/JS.

    Pertimbangan tentang kemungkinan peran alat ini sebagai compiler diagram dan potensi pemanfaatannya dalam build pipeline.

  • Contoh prompt untuk membangun single-page app berdasarkan screenshot halaman web yang diberikan pengguna dengan menggunakan Tailwind, HTML, dan JS, serta instruksi yang menekankan penyalinan desain secara akurat.

    Contoh prompt yang menginstruksikan penyalinan desain halaman web secara akurat dengan Tailwind, HTML, dan JS.

  • Pendapat pribadi bahwa mungkin ada arah yang lebih baik selain defensive prompting, tetapi fakta bahwa teknologi ini bisa bekerja tetaplah mengejutkan.

    Pandangan skeptis terhadap defensive prompting sekaligus kekaguman bahwa teknologinya benar-benar bekerja.

  • Menyebut video riset di YouTube bahwa menambahkan frasa "ini sangat penting bagi karier saya" dapat meningkatkan kualitas output, dan berpendapat bahwa frasa itu memperbaiki kualitas output untuk berbagai tugas.

    Menyebut efek frasa tertentu dalam meningkatkan kualitas output.

  • Pemikiran bahwa teknologi ini memperluas cakupan masalah yang bisa diselesaikan, sehingga muncul pertanyaan tentang apa yang harus dibuat dan perlunya melihat serta menyelesaikan masalah dengan cara berbeda.

    Renungan tentang perubahan cara menyelesaikan masalah dan mengenali masalah baru akibat kemajuan teknologi.

  • Pendapat bahwa menggunakan model umum untuk melakukan tugas ini sangat mengagumkan, tetapi data untuk supervised learning juga bisa dibuat dengan mudah.

    Pendapat tentang mudahnya menghasilkan data untuk supervised learning.

  • Informasi bahwa versi yang di-host melalui Pico akan disediakan lewat halaman GitHub, serta pertanyaan mengapa memilih Pico.

    Rencana menyediakan layanan hosting melalui Pico dan pertanyaan alasan pemilihannya.

  • Pujian bahwa cara menampilkan demo website yang dihasilkan secara real-time menggunakan iframe dengan srcdoc itu sederhana dan elegan.

    Pujian atas kesederhanaan dan keanggunan cara menampilkan demo website yang dihasilkan secara real-time.

  • Pendapat bahwa saat ingin menyalin website yang sudah ada, menggunakan Httrack bisa menghasilkan hasil yang lebih mirip dan menghemat biaya API GPT.

    Pendapat tentang efisiensi menggunakan Httrack untuk menyalin website yang sudah ada.

  • Kekhawatiran bahwa pembuatan situs phishing akan menjadi jauh lebih cepat.

    Kekhawatiran tentang meningkatnya kecepatan pembuatan situs phishing.

  • Pertanyaan apakah alat ini sempurna untuk menangani permintaan project manager yang terus berubah, dan apakah alat ini juga bekerja untuk masukan yang ambigu seperti "Make it pop".

    Pertanyaan tentang kecocokan alat ini untuk menghadapi perubahan kebutuhan dari project manager dan apakah alat ini bekerja untuk masukan yang ambigu.