"Sepertinya saya harus pergi berbaring sebentar."

• Kesan setelah mencoba demo Make Real dari TLDraw
• Alat yang menggunakan AI untuk mengubah gambar menjadi perangkat lunak yang dapat dijalankan
  • Menggunakan OpenAI's GPT-4V untuk mengonversi gambar vektor menjadi HTML/TailWind CSS dan Javascript

[GN⁺]

Komentar Hacker News

• Saya Steve dari tldraw. Maaf, ini adalah proyek mainan dengan pola keamanan yang buruk. Kalau ingin menjalankannya secara lokal atau melihat source code-nya, ada di sini: https://github.com/tldraw/draw-a-ui
  Contoh lain bisa dilihat di https://twitter.com/tldraw. Saya bisa menjawab pertanyaan tentang tldraw atau proyek ini. Ini bukan sesuatu yang akan menghilangkan pekerjaan orang, tapi sangat menyenangkan untuk dimainkan, dan ada contoh yang lebih kompleks di sini: https://twitter.com/tldraw/status/1725083976392437894

  • Harus langsung dirilis. Ini benar-benar produk yang cemerlang, cukup kenakan $5 per bulan dan biarkan pengguna membawa key OpenAI mereka sendiri
    Ada juga license server yang baru saja dirilis dengan lisensi MIT. Ditulis dengan Elixir dan menjalankan https://go.robocoder.app. Jika butuh bantuan untuk setup, silakan hubungi saya: https://github.com/emcmanus/robocoder-server/
  • Steve, uangnya dikirim ke mana? Bercanda aside, ini cukup meyakinkan. Mungkin mainan, tapi semua orang terlihat sangat menikmatinya
  • Proyek yang keren, selamat atas peluncurannya. Saya coba memasukkan key OpenAI saya dan mendapat error "you exceeded your current quota, check billing". Saya penasaran apakah ini bekerja dengan langganan OpenAI Pro $20 per bulan, atau butuh akses tambahan
    Saya menemukan jawabannya di README GitHub. Isinya: “untuk memakai API key sendiri, Anda memerlukan akses usage tier 1, dan tier saat ini serta cara menaikkannya bisa dilihat di pengaturan OpenAI”
  • Contoh flowchart itu benar-benar poin utamanya, dan rasanya harus diperlakukan sebagai konsep kelas satu di alat seperti ini. Ini mulai memberi pegangan yang memungkinkan orang membuat sesuatu yang berguna, bukan sekadar mainan
  • Contoh terakhir itu menarik, dan mengejutkan bahwa feedback bisa diberikan seperti itu. Jika aplikasi yang dihasilkan dan teks dipilih bersama, saya penasaran apa yang sebenarnya diterima sebagai input. Apakah kode yang sebelumnya dihasilkan dan teks baru dikirim bersama?

• System prompt di repositorinya seperti ini:

  You are an expert tailwind developer. A user will provide you with a  
  low-fidelity wireframe of an application and you will return  
  a single html file that uses tailwind to create the website.  
  They may also provide you with the html of a previous design that they want you to iterate from.  
  Carry out any changes they request from you.  
  In the wireframe, the previous design's html will appear as a white rectangle.  
  Use creative license to make the application more fleshed out.  
  if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file.  
  

  Saya kurang paham kenapa "creative license" disebut di sini. Untuk setiap generasi, prompt pengguna adalah sebagai berikut:

  [IMAGE_LINK]  
  Turn this into a single html file using tailwind.  
  

  https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
  Kelihatannya cukup sederhana untuk mengambil screenshot kanvas tldraw biasa dan mengirimkannya ke API bersama prompt ini agar bisa dijalankan “secara privat”

  • "creative license" dalam bahasa Inggris umum berarti jangan terlalu terpaku pada batasan, lakukan apa yang menurutmu terbaik. Sepertinya tidak ada hubungannya dengan lisensi perangkat lunak

• Saya memasukkan model yang berasal dari pertanyaan wawancara Facebook. Isinya dua daftar checkbox, dan dua tombol untuk memindahkan item yang dicentang di antara keduanya, dan hasilnya berhasil: https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...

  • Saya sama sekali tidak tahu bahwa toList.appendChild(item.closest('li')); akan memindahkan item tersebut. Selalu belajar hal baru setiap hari
  • Saya mengeceknya dengan screen reader, dan saat tombol ditekan tidak ada apa pun yang diumumkan. Ini masalah. Seharusnya ada ucapan seperti “Checkbox B dipindahkan ke kiri”
    Tanpa pemberitahuan apa pun, pengguna tidak bisa tahu apakah benar-benar terjadi sesuatu ketika tombol ditekan. Halaman uji: https://output.jsbin.com/jixoqur/quiet

• Demo-demo terbaru seperti ini menunjukkan betapa mengesankannya kemajuan machine learning/AI belakangan ini, sekaligus memperlihatkan betapa jutaan developer di seluruh dunia terus mengimplementasikan ulang pekerjaan yang sangat repetitif dan kurang orisinal
  Kebanyakan layar UI bisa dijelaskan dengan tepat hanya dalam satu atau dua paragraf, jadi tidak aneh jika itu bisa direpresentasikan cukup rinci dalam vektor embedding yang relatif kecil

  • Saya setuju dengan arah besarnya, tetapi penting juga untuk diingat bahwa kebanyakan demo seperti ini adalah contoh yang dipilih dengan sangat hati-hati. Jika hanya melihat demo viral di media sosial, orang bisa mengira AI jauh lebih maju dari kenyataannya bahkan untuk tugas yang rumit
    Orang nonteknis yang belum pernah benar-benar memakai AI secara intens dalam pekerjaan nyata sangat rentan terhadap hal ini. Orang yang mengalaminya langsung biasanya melihatnya dengan lebih bernuansa. AI sangat berguna, tetapi juga sering salah, dan untuk mendapatkan hasil setingkat produksi perlu dipoles dengan teliti. Sebagai seorang optimis AI, saya tetap melihat nilainya nyata dan demo yang mengesankan memang menunjukkan arah yang akan kita tuju, tetapi hasil rata-ratanya masih butuh waktu untuk menyamai ekspektasi yang dibesar-besarkan
  • Banyak cara untuk mengekspresikan ide perangkat lunak juga sangat tidak efisien. Bagian yang benar-benar menarik, yaitu entropi, sebenarnya sangat kecil
    Dalam demo ini, secara harfiah hanya ada dua slider yang mengatur dua properti CSS, jadi tidak banyak informasi dalam spesifikasi UI-nya. Jika ada bahasa spesifikasi UI yang tepat, ini mungkin hanya akan menjadi kode tiga baris. Kesulitannya muncul karena harus mengelola boilerplate UI web
  • Ini menjelaskan dengan baik kenapa hype berlebihan B2C AI yang dibangun di atas ratusan demo ala “Hello World” terasa mengganggu. Suasananya seperti, “Ya ampun, pemrograman sudah mati!”
    Yang aneh, di HN orang mudah menyadari keterbatasan skalabilitas dan maintainability ketika membahas platform no-code tradisional, tetapi begitu ada AI, tiba-tiba seolah masalah-masalah itu terselesaikan dan kita tidak perlu mengkhawatirkan spaghetti yang dimuntahkan oleh kotak hitam
  • Ini cuma memperlihatkan betapa bodohnya software stack kita. Semuanya berjalan dengan logika “siapa tahu orang ingin mengustomisasi ini itu, plus 300 detail tak berguna lainnya”
    Yang sebenarnya kita inginkan adalah memisahkan fungsi dan presentasi. Ironisnya, web HTML murni tahun 1996 justru seperti itu. Ada sesuatu yang salah secara mengerikan dengan cara yang nyaris tak terbayangkan bodohnya, dan tak ada seorang pun yang membuatnya lebih baik. Yang tersisa malah hanya efek bayangan dan flexbox internal semacam itu
  • Pekerjaan repetitif dan kurang orisinal yang terus diimplementasikan ulang bukan cuma masalah developer. Dari entri data sampai akuntansi dan pekerjaan kreatif, sebagian besar pekerja kantoran termasuk di dalamnya
    Sebagian besar pekerjaan kantoran adalah mengulang hal yang sama terus-menerus, dan di banyak perusahaan orang yang berbeda sering mengulang pekerjaan yang pada dasarnya sama

• Ini terlihat seperti alat yang membuat desainer UI, atau mungkin product owner, tampak cerdas dan kompeten. Tetapi pekerjaan yang sesungguhnya akan tetap jatuh ke programmer seperti sekarang
  Desainer UI mungkin bisa memberikan “demo”, tetapi bagaimana fungsi dasar ini akan terhubung dengan bagian lain dari aplikasi? Tidak akan bisa

  • Jelas ini akan berujung pada percakapan yang menyenangkan dan produktif seperti, “Kan sudah jalan di situ! Kenapa butuh waktu lama sekali untuk memasukkannya ke aplikasi? Kenapa tidak tinggal diunduh saja?”
    Bahkan sebelum GPT, sudah ada argumen bahwa prototipe atau mockup yang sangat awal harus dibuat dengan tingkat penyelesaian visual yang rendah, sebanding dengan level fungsi internalnya. Prototipe UI yang cantik dan tampak “berfungsi”, meskipun sudah dijelaskan dengan jelas, tetap menciptakan ekspektasi yang tidak realistis dan meningkatkan kemungkinan proto-duction, yaitu prototipe yang berubah langsung menjadi produksi
  • Saya tidak suka ketika desainer menunjukkan UI yang terlihat seperti produk jadi di Figma. Di mata para eksekutif, itu terlihat seperti produk yang sudah selesai, sehingga ekspektasi yang tidak realistis masuk ke proses desain UI yang seharusnya iteratif
    Saya sudah beberapa kali melihat proyek di mana rancangan sistem yang buruk dibebankan kepada engineer karena adanya batasan dari desain Figma yang sudah disetujui seorang eksekutif. Tentu, organisasi seperti itu punya masalah yang lebih besar juga, tetapi mockup fidelity tinggi yang mudah dibuat memperparah masalah ini dibanding wireframe
  • Caranya sederhana. Cukup beri GPT-4 prompt baru: "Thanks. Please connect it to the rest of this code:"
    Kalau mau dibuat lebih bagus, tambahkan juga "it's very important for my career"

• Para developer yang membuat demo memperbesar dan memutar kotak sekarang tampaknya akan kehilangan pekerjaan

  • Itu cuma berlaku untuk orang yang bahkan tidak bisa merapikan alignment slider

• Saat berdiskusi dengan klien tentang cara mengintegrasikan perangkat lunak kami ke perangkat lunak mereka, klien mengirimkan screenshot form utama
  Saya memasukkan screenshot itu ke ChatGPT dan berkata, “buatkan form React seperti ini dengan Bootstrap.” Setelah beberapa penyesuaian saya sambungkan perangkat lunak saya, dan beberapa jam kemudian klien terkejut melihat proof of concept bahwa sistem bisa diintegrasikan secepat itu. Saat ada masalah layout CSS dalam pengembangan web, saya kadang mengunggah screenshot ke ChatGPT dan menanyakan cara menyelesaikannya, dan demo di tweet itu juga tampak sangat mirip

  • Membuat halaman form dasar memang dari awal sudah sederhana. Yang mengejutkan adalah bahwa setelah sekitar 25 tahun pengembangan web, kita masih terus membuat framework web baru dan membuatnya lebih rumit dari yang perlu
    Terus bermunculan framework yang hebat untuk use case mencolok tetapi berlebihan untuk tugas-tugas umum dan mendasar. Sesekali memang ada pengecualian, tetapi kebanyakan developer web tidak menyukai hal seperti itu. Tidak terlihat keren di CV, dan jujur saja, siapa yang ingin menghabiskan seluruh kariernya hanya membuat form web
  • Klien akan terkesan pada kecepatan di pertama kali. Pada kali kedua, mereka akan mengharapkan kecepatan itu. Pada kali ketiga, mereka akan marah karena jadwal meledak saat kebutuhan mereka sudah terlalu besar untuk ditangani ChatGPT
  • Jika situasinya Anda berbicara dengan klien lewat email atau chat, bisa dibayangkan bahwa klien juga sedang bertanya ke ChatGPT bagaimana cara terbaik menyampaikan kebutuhannya kepada Anda
    Pada akhirnya ini seperti kura-kura di atas kura-kura :+)
  • Tetapi mungkin klien tidak ingin datanya terekspos ke ChatGPT
  • Mengunggah screenshot masalah layout CSS ke ChatGPT untuk memperbaikinya adalah ide rapi yang belum pernah terpikir oleh saya. Biasanya saya memperbaikinya di developer tools lalu memindahkan style-nya ke kode, tetapi ini layak diingat
    Untuk coding, saya lebih sering memakainya daripada ChatGPT untuk memproses data dengan cepat lewat command-line pipe atau skrip Bash. Jika saya memberinya output perintah lalu meminta Bash untuk formatting, agregasi, pengurutan, atau ekstraksi yang saya inginkan, hal-hal yang tadinya tidak akan saya lakukan, seperti debugging atau memeriksa hipotesis, jadi lebih mudah. Sebenarnya bisa juga dilakukan secara manual, tetapi lebih lambat dan untuk mengingat opsi serta argumennya biasanya perlu mencari di web atau membuka man page. Untuk kode, saya terutama memakai GH Copilot

• Silakan sebut saya skeptis, tetapi saya tidak percaya pada masa depan solusi no-code. Anda tetap harus menyelaraskan tombol pada resolusi perangkat kecil, menyisakan ruang agar tampil bagus dalam bahasa lain, dan masih ada berbagai kebutuhan lain yang terus muncul
  Paling-paling, ini hanya akan membantu membuat aplikasi lebih cepat dengan bahasa yang lebih terabstraksi. Ini mungkin cocok untuk hal yang sangat dasar dan umum seperti tic-tac-toe, tetapi tidak cocok untuk pekerjaan yang orisinal

  • Masalah besar no-code berbasis LLM adalah keluarannya non-deterministik, sehingga pada akhirnya yang bisa dimasukkan ke version control hanyalah hasil keluarannya itu sendiri
    Bayangkan puluhan orang yang hanya sedikit paham teknologi membuat sketsa lalu menekan tombol “tolong buatkan ini sungguhan” untuk menambahkan fitur. Masing-masing menghasilkan ratusan baris kode. Di akhir hari, seseorang harus memahami output itu, tetapi karena output-nya non-deterministik, hanya itu yang tersisa bagi kita
  • Ini mirip dengan Auto-Tune. Para ahli yang memang bisa bernyanyi dengan nada yang tepat akan terus membuat hal-hal menarik
    Pada saat yang sama, orang-orang baru yang tidak pernah belajar atau tidak ingin belajar bernyanyi dengan nada yang tepat akan menciptakan genre musik yang sepenuhnya baru dan pop arus utama dengan usaha yang jauh lebih sedikit. Para ahli juga sesekali akan memakainya untuk memperkuat sebagian workflow, meningkatkan kualitas akhir, dan mempercepat pekerjaan
  • Banyak demo seperti ini lebih dekat pada menunjukkan bahwa kita bisa membuat wireframe yang benar-benar berfungsi hampir seketika, bukan mendorong pendekatan no-code murni
    Rasanya alat seperti Canva dan Figma akan secara agresif mengadopsi fitur seperti ini dan sangat meningkatkan wireframe serta demo berfidelitas tinggi
  • Kesan awal saya juga sama. Kustomisasi dan integrasi akan menjadi mimpi buruk total. Namun, ini sangat bagus untuk prototyping
  • Entah LLM/AI akan menjadi sempurna, atau kita akan mulai memakai kode dan framework yang jauh lebih mudah digunakan oleh LLM/AI

• Squarespace, Wix, dan lainnya sudah mengambil bagian bawah pasar, dan kalau tidak, outsourcing ke India yang akan mengambilnya
  Ini adalah evolusi alami dari konsep yang sama. Jika saya adalah manajer produk untuk website builder, saya akan langsung mengejar integrasi AI builder seperti ini. Ini jelas tidak akan berhasil untuk pekerjaan bisnis kompleks yang definisinya pun belum jelas, tetapi untuk kalkulator biaya bagi bisnis fotografi misalnya, ini mungkin bisa membuatnya dengan baik

  • Sebagian besar UKM masih belum punya aplikasi atau website, atau kalau punya pun sering kali tidak berguna. Masih ada ruang yang sangat besar untuk pasar niche dan alat yang bagus
  • Ini tampak berguna sebagai alat untuk membuat demo interaktif dan prototipe yang bisa diiterasi dengan cepat. Itu bisa menjaga loop umpan balik dengan pelanggan tetap pendek dan mengurangi salah paham. Misalnya, saya bisa membayangkan Figma mengimplementasikan hal seperti ini
  • Saya tidak paham kenapa orang mengira ini hanya cocok untuk pekerjaan sepele. Itu hampir seperti penyangkalan
    Perangkat lunak workflow proses bisnis cukup populer. Ada banyak aplikasi tempat orang melakukan hal serupa lewat drag-and-drop atau editor widget interaktif, dan bisa menangani form yang kompleks, relasi parent-child, serta transisi state. Dengan sesuatu seperti GPT Vision, Anda bisa melewati drag-and-drop widget dan memakai alat menggambar yang lebih bebas atau sketsa tangan. Contoh paling populer saat ini mungkin Notion, dan sudah ada contoh yang lebih kompleks jauh sebelum itu

• Sekarang saya merasa tua. Rasanya beberapa dekade lalu kita sudah bisa melakukan hal yang hampir sama secepat ini dengan VB atau Delphi. Hanya saja hasilnya sedikit lebih deterministik, alih-alih alatnya menyimpulkan dari nama label
  Kita dulu sebenarnya sudah punya hal seperti ini, dan melupakannya karena ternyata kita bisa melakukannya tanpa mendorong semuanya ke browser dan tanpa memakai komputasi masif dari model AI generatif. Rasanya seperti orang tua yang berteriak ke awan

  • Pikiran saya mirip. Sedikit lebih provokatif, kalau ada orang menunjukkan AI yang mengubah Figma menjadi HTML, saya bilang, “pernah dengar Dreamweaver?”
    Tentu saja kode Dreamweaver jelek dan nyaris tak bisa dipakai, dan kode hasil AI kadang tidak seburuk itu. Meski begitu, rasanya kita dulu sudah cukup dekat dengan posisi sekarang
  • Ini bukan masalah browser, melainkan seberapa opinionated design suatu framework
    VB adalah alat yang sangat opinionated, dan hanya membuat UI bergaya Windows native. Tidak ada orang yang mengambil mockup acak dari desainer lalu mereplikasi tampilan dan nuansa yang sepenuhnya dikustomisasi sampai tingkat piksel di VB. Saat ini, GUI kebanyakan produk adalah bagian dari merek. Baik atau buruk, semua perusahaan menginginkan look-and-feel dan perilaku UI yang unik. Karena itu, alat untuk membuatnya harus jauh lebih kompleks. Anda bisa mereproduksi VB di browser, dan banyak orang memang sudah membuat sesuatu yang mirip, tetapi itu tidak banyak dipakai dalam pengembangan produk karena perusahaan tidak menginginkan UI yang membosankan dan generik
  • Saya paham maksudnya, tetapi itu hanya berlaku untuk contoh yang paling sederhana. Alat ini bisa melakukan berbagai hal. Kalau Anda membaca thread itu lebih jauh, bahkan tic-tac-toe pun diimplementasikan
    Pada dasarnya, cara kerjanya adalah mengirim screenshot diagram ke GPT-4 lalu berkata, “tolong implementasikan ini”
  • Dulu di aula pameran grafis Comdex ada sistem operasi baru yang segar dan diperkenalkan sebagai langkah berikutnya. Seorang nerd besar sedang menyeret dan meletakkan berbagai hal dengan mouse, “membuktikan” bahwa untuk membuat aplikasi Anda tidak perlu menjadi programmer
    Sepuluh tahun setelah itu, ada sesuatu bernama Visix Vibe yang selama sekitar satu atau dua tahun menawarkan hal yang sama untuk Java, yang saat itu masih bahasa yang relatif baru. Setiap beberapa tahun, kira-kira setiap 4–5 tahun atau 10 tahun sekali, seseorang ingin membuat semua kompleksitas menghilang. Namun pada akhirnya, mereka malah membuat sistem operasi
  • Jika Anda memakai toolkit UI native utama, Anda masih bisa melihat hal seperti ini. Mungkin tidak secepat RAD, tetapi di web, segala macam elemen dan interaksi yang memerlukan JavaScript kustom dan biasanya rapuh tersedia “gratis”
    Dan itu benar-benar berfungsi dengan baik, berinteraksi dengan sisa toolkit sebagaimana mestinya, serta internasionalisasi dan aksesibilitasnya juga bekerja dengan konsisten. Tidak ada alasan HTML tidak bisa melakukan jauh lebih banyak hanya dengan bawaan dasarnya, dan jika demikian, itu bisa mengurangi banyak sekali waktu pengembang dan frustrasi pengguna setiap tahun. Hanya saja, itu tidak dilakukan