“Có lẽ tôi phải đi nằm một lúc.”

• Cảm nhận sau khi thử bản demo Make Real của TLDraw
• Công cụ dùng AI để biến hình vẽ thành phần mềm có thể hoạt động
  • Sử dụng GPT-4V của OpenAI để chuyển hình ảnh vector thành HTML/TailWind CSS và Javascript

[GN⁺]

Ý kiến trên Hacker News

• Tôi là Steve của tldraw. Xin lỗi vì đây là một dự án đồ chơi với các mẫu bảo mật rất tệ. Nếu muốn chạy cục bộ hoặc xem mã nguồn thì ở đây: https://github.com/tldraw/draw-a-ui
  Có thể xem các ví dụ khác tại https://twitter.com/tldraw. Tôi có thể trả lời các câu hỏi về tldraw hoặc dự án này. Đây không phải thứ sẽ lấy mất việc của ai, nhưng chơi thử thì thật sự rất vui, và có một ví dụ phức tạp hơn ở đây: https://twitter.com/tldraw/status/1725083976392437894

  • Nên ra mắt ngay. Đây thật sự là một sản phẩm lóe sáng, cứ thu 5 USD/tháng và để người dùng tự mang key OpenAI của họ vào là được
    Tôi cũng có một server cấp phép vừa mở công khai theo giấy phép MIT. Nó được viết bằng Elixir và đang chạy https://go.robocoder.app. Nếu cần trợ giúp cấu hình thì cứ liên hệ: https://github.com/emcmanus/robocoder-server/
  • Steve, gửi tiền vào đâu đây? Đùa vậy thôi chứ thứ này khá thuyết phục. Có thể chỉ là đồ chơi, nhưng ai cũng đang vui vẻ với nó như thế này
  • Dự án tuyệt vời, chúc mừng ra mắt. Tôi thử nhập key OpenAI của mình thì gặp lỗi "you exceeded your current quota, check billing". Tôi tự hỏi liệu gói đăng ký OpenAI Pro 20 USD/tháng có đủ không, hay cần quyền bổ sung nào đó
    Tôi đã tìm thấy câu trả lời trong README trên GitHub. Nội dung là: “Để dùng API key của riêng bạn, bạn cần quyền truy cập usage tier 1; hãy kiểm tra tier hiện tại và cách nâng tier trong phần cài đặt OpenAI”
  • Ví dụ lưu đồ kia thật sự là điểm mấu chốt, và tôi nghĩ trong các công cụ như thế này nó nên được coi là một khái niệm hạng nhất. Nó bắt đầu cung cấp các tay nắm giúp tạo ra thứ hữu ích thay vì chỉ là đồ chơi
  • Ví dụ cuối cùng thú vị, và thật ngạc nhiên là có thể đưa phản hồi như vậy. Tôi tò mò khi chọn cả ứng dụng đã tạo lẫn văn bản thì thực tế nó nhận gì làm đầu vào. Nó nhận cả mã đã tạo trước đó và văn bản mới à?

• System prompt trong repository như sau:

  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.  
  

  Tôi không rõ vì sao ở đây lại nhắc đến "creative license". Với mỗi lần tạo, prompt của người dùng như sau:

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

  https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
  Có vẻ đủ đơn giản để chụp màn hình một canvas tldraw thông thường rồi gửi kèm prompt này tới API để chạy “riêng tư”

  • "creative license" trong tiếng Anh thông thường có nghĩa là đừng quá bận tâm đến các ràng buộc, cứ làm theo cách bạn cảm thấy là tốt nhất. Có vẻ không liên quan đến giấy phép phần mềm

• Tôi đã đưa vào một mô hình từ câu hỏi phỏng vấn Facebook. Nó gồm hai danh sách checkbox và hai nút để chuyển các mục đã chọn qua lại, và nó đã làm đúng: https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...

  • Tôi hoàn toàn không biết rằng toList.appendChild(item.closest('li')); sẽ di chuyển mục đó. Mỗi ngày lại học được một điều
  • Tôi kiểm tra bằng screen reader thì khi bấm nút không có thông báo gì. Đây là vấn đề. Nó cần nói kiểu như “Checkbox B moved to the left”
    Nếu không có bất kỳ thông báo nào, người dùng sẽ không biết liệu khi bấm nút có thực sự xảy ra điều gì hay không. Trang thử nghiệm: https://output.jsbin.com/jixoqur/quiet

• Những demo mới nhất này vừa cho thấy sự tiến bộ của machine learning/AI gần đây ấn tượng đến mức nào, vừa cho thấy hàng triệu lập trình viên trên toàn thế giới vẫn đang liên tục triển khai lại những việc lặp đi lặp lại và ít tính sáng tạo ra sao
  Phần lớn màn hình UI có thể được mô tả chính xác bằng một hai đoạn văn, nên cũng không lạ khi chúng có thể được biểu diễn khá chi tiết trong một vector embedding tương đối nhỏ

  • Tôi đồng ý với hướng nhìn chung, nhưng điều quan trọng là phần lớn các demo kiểu này là những ví dụ được tuyển chọn cẩn thận. Nếu chỉ xem các demo viral trên mạng xã hội, ta sẽ dễ nghĩ rằng AI đã tiến xa hơn thực tế rất nhiều ngay cả trong các tác vụ phức tạp
    Các nhóm không thuộc kỹ thuật, chưa từng dùng AI mạnh tay trong công việc thực tế, đặc biệt dễ bị ảnh hưởng. Những người trải nghiệm ngoài hiện trường thường nhìn nhận tinh tế hơn. Nó cực kỳ hữu ích nhưng cũng mắc nhiều lỗi, và để có kết quả ở mức production thì phải chỉnh sửa rất tỉ mỉ. Ngay cả với tư cách một người lạc quan về AI, tôi cũng thấy giá trị là thật và các demo ấn tượng cho thấy hướng chúng ta sẽ đi, nhưng sẽ cần thời gian để kết quả trung bình bắt kịp những kỳ vọng bị thổi phồng
  • Nhiều cách biểu đạt ý tưởng phần mềm cũng rất kém hiệu quả. Phần thực sự thú vị, tức entropy, là rất nhỏ
    Trong demo này, nói đúng nghĩa thì chỉ là hai slider điều chỉnh hai thuộc tính CSS, nên lượng thông tin trong đặc tả UI không nhiều. Nếu có một ngôn ngữ đặc tả UI phù hợp, nó có lẽ chỉ là ba dòng code. Cái khó đến từ việc phải quản lý boilerplate của UI web
  • Cách diễn đạt này nói rất đúng lý do tôi thấy khó chịu với làn sóng thổi phồng AI B2C dựa trên hàng trăm demo kiểu “Hello World”. Kiểu không khí “Trời ơi, lập trình chết rồi!”
    Điều kỳ lạ là trên HN, khi nói về các nền tảng no-code truyền thống, mọi người dễ dàng nhận ra các giới hạn về khả năng mở rộng và bảo trì, nhưng hễ gắn AI vào thì đột nhiên như thể các vấn đề đó đã được giải quyết và ta không còn phải lo về đống spaghetti do hộp đen nhả ra nữa
  • Điều này chỉ phơi bày software stack của chúng ta ngớ ngẩn đến mức nào. Mọi thứ vận hành theo kiểu “biết đâu bạn sẽ muốn tùy biến cái này, cái kia, và cả 300 chi tiết vô dụng nữa”
    Thứ thật sự từng được mong muốn là tách chức năng khỏi cách trình bày. Trùng hợp là web HTML thuần năm 1996 đúng là như vậy. Rồi bằng một cách ngu ngốc đến mức vượt ngoài tưởng tượng, mọi thứ đã sai một cách khủng khiếp, và chẳng ai làm cho nó tốt hơn. Thay vào đó, chỉ còn lại những thứ như hiệu ứng đổ bóng và flexbox bên trong
  • Việc các công việc lặp lại và ít sáng tạo cứ liên tục được triển khai lại không chỉ là vấn đề của lập trình viên. Từ nhập liệu đến kế toán, cho tới công việc sáng tạo, phần lớn công việc văn phòng đều thuộc dạng này
    Một phần đáng kể công việc văn phòng là lặp đi lặp lại cùng một việc, và thường là những người khác nhau ở các công ty khác nhau lặp lại những tác vụ về bản chất là giống nhau

• Đây trông giống một công cụ giúp UI designer, và có lẽ cả product owner, trông thông minh và có năng lực hơn. Nhưng công việc thật sự vẫn sẽ đổ về cho lập trình viên như hiện nay
  UI designer có thể đưa ra một “demo”, nhưng chức năng cơ bản này sẽ kết nối với phần còn lại của ứng dụng như thế nào? Nó sẽ không kết nối được

  • Chắc chắn sẽ dẫn đến những cuộc trò chuyện vui vẻ và hiệu quả kiểu “Nó đã chạy ngay kia rồi mà! Sao đưa vào app lại mất lâu thế? Không thể chỉ tải xuống được à?”
    Từ trước thời GPT đã có lập luận rằng các prototype hoặc mockup rất sơ khai nên được làm sao cho mức hoàn thiện thị giác thấp tương ứng với mức chức năng bên trong. Một prototype chỉ có UI đẹp và nhìn có vẻ “hoạt động”, dù được giải thích rõ ràng, vẫn tạo ra kỳ vọng phi thực tế và làm tăng khả năng xảy ra proto-duction, tức prototype trở thành production nguyên xi
  • Tôi không thích việc designer trình bày UI trông như sản phẩm hoàn chỉnh trong Figma. Trong mắt lãnh đạo, nó trông như một sản phẩm đã hoàn tất, khiến kỳ vọng phi thực tế len vào quy trình thiết kế UI vốn phải mang tính lặp lại
    Tôi đã thấy nhiều dự án trong đó thiết kế hệ thống tệ hại bị đẩy sang cho kỹ sư vì các ràng buộc của một thiết kế Figma đã được lãnh đạo nào đó phê duyệt. Tất nhiên những tổ chức như vậy còn có vấn đề lớn hơn, nhưng các mockup độ trung thực cao quá dễ làm đã khiến vấn đề này tệ hơn so với wireframe
  • Cách làm đơn giản thôi. Chỉ cần đưa prompt mới cho GPT-4: "Thanks. Please connect it to the rest of this code:"
    Nếu muốn nó làm tốt hơn thì thêm cả "it's very important for my career" là được

• Những lập trình viên chuyên làm demo phóng to và xoay hộp giờ có vẻ sắp mất việc rồi

  • Chỉ áp dụng với những người còn không căn chỉnh nổi slider thôi

• Trong lúc thảo luận với khách hàng về cách tích hợp phần mềm của chúng tôi vào phần mềm của họ, khách hàng gửi cho tôi ảnh chụp màn hình form chính
  Tôi đưa ảnh đó vào ChatGPT và nói “hãy tạo cho tôi một form React kiểu này bằng Bootstrap”. Sau vài chỉnh sửa, tôi gắn phần mềm của mình vào, và vài giờ sau khách hàng đã ngạc nhiên khi thấy proof of concept về việc hệ thống được tích hợp nhanh đến vậy. Khi gặp vấn đề về CSS layout trong phát triển web, tôi thường tải ảnh chụp màn hình lên ChatGPT và hỏi cách giải quyết; demo trong tweet trông cũng khá tương tự

  • Việc tạo một trang form cơ bản vốn dĩ đơn giản. Điều đáng kinh ngạc là sau khoảng 25 năm phát triển web, chúng ta vẫn tiếp tục tạo ra các web framework mới và làm nó phức tạp hơn mức cần thiết
    Các framework rất giỏi cho những use case hào nhoáng nhưng lại quá mức cho các tác vụ phổ biến, cơ bản cứ liên tục xuất hiện. Thỉnh thoảng cũng có ngoại lệ, nhưng phần lớn lập trình viên web không thích những thứ đó. Chúng cũng không làm CV trông ngầu hơn, và nói thật thì có ai muốn cả sự nghiệp chỉ làm web form đâu
  • Lần đầu khách hàng sẽ ấn tượng với tốc độ. Lần thứ hai họ sẽ kỳ vọng tốc độ đó. Lần thứ ba, khi yêu cầu đã phình ra quá mức ChatGPT có thể xử lý, họ sẽ nổi giận vì lịch trình nổ tung
  • Nếu bạn trao đổi với khách hàng qua email hoặc chat, bạn cũng có thể tưởng tượng rằng khách hàng đang hỏi ChatGPT cách truyền đạt yêu cầu cho bạn sao cho tốt nhất
    Cuối cùng thì cũng là rùa chồng lên rùa thôi :+)
  • Nhưng có thể khách hàng không muốn để lộ dữ liệu của họ cho ChatGPT
  • Tải ảnh chụp màn hình vấn đề CSS layout lên ChatGPT để sửa là một ý tưởng gọn gàng mà tôi chưa từng nghĩ tới. Thường thì tôi xử lý CSS đủ để sửa trong developer tools rồi chuyển style vào code, nhưng đáng để ghi nhớ
    Với coding, tôi dùng nó nhiều hơn để xử lý dữ liệu nhanh bằng command-line pipe hoặc Bash script hơn là dùng ChatGPT. Đưa output của lệnh rồi yêu cầu Bash để định dạng, tổng hợp, sắp xếp, trích xuất theo ý muốn khiến cả những việc trước đây tôi vốn sẽ không làm, như debug hoặc kiểm tra giả thuyết, cũng trở nên dễ dàng. Làm thủ công cũng được nhưng chậm, còn để nhớ option và tham số thì phải tìm kiếm hoặc xem man page. Với code, tôi chủ yếu dùng GH Copilot

• Có thể gọi tôi là người hoài nghi cũng được, nhưng tôi không tin vào tương lai của các giải pháp no-code. Bạn vẫn phải căn chỉnh nút trên độ phân giải của thiết bị nhỏ, chừa khoảng trắng sao cho đẹp trong các ngôn ngữ khác, và còn vô số yêu cầu khác nữa
  Nhiều lắm thì nó chỉ giúp tạo ứng dụng nhanh hơn bằng một ngôn ngữ trừu tượng hơn. Điều này hiệu quả với những thứ cực kỳ cơ bản và phổ biến như tic-tac-toe, nhưng không phù hợp với công việc mang tính độc đáo

  • Vấn đề lớn của no-code dựa trên LLM là đầu ra không xác định, nên cuối cùng chỉ có thể đưa chính sản phẩm đầu ra vào quản lý phiên bản
    Hãy tưởng tượng vài chục người chỉ biết chút ít về kỹ thuật phác thảo rồi bấm “làm thật cho tôi” để thêm tính năng. Mỗi người tạo ra hàng trăm dòng mã. Đến cuối ngày, ai đó phải hiểu được các đầu ra đó, nhưng vì đầu ra không xác định nên đó là thứ duy nhất chúng ta còn lại
  • Nó giống Auto-Tune. Những nghệ nhân có thể hát đúng cao độ vẫn sẽ tiếp tục tạo ra những thứ thú vị
    Đồng thời, những người mới chưa từng học hoặc không muốn học cách hát đúng cao độ sẽ tạo ra các thể loại nhạc hoàn toàn mới và nhạc pop đại chúng với ít công sức hơn rất nhiều. Các nghệ nhân cũng sẽ thỉnh thoảng dùng nó để tăng cường một số workflow, nâng độ hoàn thiện và tăng tốc
  • Phần lớn các demo kiểu này không hẳn nhằm thúc đẩy cách tiếp cận no-code thuần túy, mà gần hơn với việc cho thấy có thể tạo ra wireframe chạy được gần như ngay lập tức
    Có lẽ các công cụ như Canva, Figma sẽ tích cực đưa những tính năng này vào và cải thiện mạnh wireframe cũng như demo độ trung thực cao
  • Trực giác ban đầu của tôi cũng vậy. Tùy biến và tích hợp sẽ là một cơn ác mộng thực sự. Tuy nhiên, nó rất tuyệt cho prototyping
  • Hoặc LLM/AI sẽ trở nên hoàn hảo, hoặc chúng ta sẽ bắt đầu dùng mã và framework mà LLM/AI có thể sử dụng dễ dàng hơn nhiều

• Squarespace, Wix, v.v. đã lấy phần đáy của thị trường rồi; nếu không thì mảng đó hẳn đã rơi vào tay outsourcing ở Ấn Độ
  Đây là sự tiến hóa tự nhiên của cùng một khái niệm. Nếu là product manager của một trình dựng website, tôi sẽ lao ngay vào kiểu tích hợp AI builder này. Nó chắc chắn không hiệu quả với các tác vụ kinh doanh phức tạp gần như chưa được định nghĩa, nhưng có lẽ sẽ làm tốt một công cụ tính chi phí cho dịch vụ nhiếp ảnh chẳng hạn

  • Phần lớn doanh nghiệp vừa và nhỏ vẫn chưa có app hay website, hoặc có thì cũng thường vô dụng. Không gian cho thị trường ngách và công cụ tốt là rất lớn
  • Nó có vẻ hữu ích như một công cụ tạo demo tương tác và prototype để lặp nhanh các ý tưởng. Có thể giữ vòng phản hồi với khách hàng ngắn hơn và giảm hiểu lầm. Ví dụ, Figma có lẽ có thể triển khai thứ như vậy
  • Tôi không hiểu vì sao lại nghĩ nó chỉ làm được các tác vụ vụn vặt. Như vậy gần như là phủ nhận thực tế
    Phần mềm workflow cho quy trình kinh doanh khá phổ biến. Có nhiều ứng dụng nơi mọi người làm những việc tương tự bằng kéo-thả hoặc trình chỉnh sửa widget tương tác, và chúng có thể xử lý cả các form phức tạp, quan hệ cha-con, chuyển đổi trạng thái. Nếu dùng thứ như GPT Vision, có thể bỏ qua việc kéo-thả widget và dùng công cụ vẽ tự do hơn hoặc phác thảo bằng tay. Ví dụ phổ biến nhất hiện nay có lẽ là Notion, và từ lâu đã có những ví dụ phức tạp hơn nhiều

• Giờ tôi thấy mình già rồi. Từ mấy chục năm trước, có vẻ VB hay Delphi cũng đã làm được gần như thế này với tốc độ tương tự. Chỉ là kết quả khi đó xác định hơn một chút, thay vì công cụ suy luận từ tên nhãn
  Chúng ta từng có những thứ như vậy rồi, nhưng đã quên mất rằng có thể làm tất cả mà không cần nhét mọi thứ vào trình duyệt hay dùng lượng tính toán khổng lồ của các mô hình AI tạo sinh. Tôi cảm giác như một ông già đang hét vào mây

  • Tôi cũng nghĩ tương tự. Nói khiêu khích hơn một chút, khi thấy người ta trình diễn AI biến Figma thành HTML, tôi lại nói: “Đã nghe tới Dreamweaver chưa?”
    Tất nhiên mã của Dreamweaver xấu và gần như không dùng được, còn mã do AI tạo đôi khi cũng không quá tệ. Dù vậy, có vẻ chúng ta đã từng tiến khá gần đến vị trí ngày nay rồi
  • Đây không phải vấn đề của trình duyệt, mà là vấn đề framework có thiết kế mang quan điểm mạnh đến mức nào
    VB là một công cụ có quan điểm rất mạnh và chỉ tạo UI theo phong cách Windows native. Không ai lấy một mockup tùy ý do designer đưa tới, với look-and-feel hoàn toàn tùy biến, rồi sao chép từng pixel trong VB. Ngày nay, GUI của hầu hết sản phẩm là một phần của thương hiệu. Dù tốt hay xấu, mọi công ty đều muốn look-and-feel và hành vi UI riêng biệt. Vì vậy công cụ để tạo ra chúng phải phức tạp hơn nhiều. Có thể tái tạo VB trên trình duyệt, và thực tế nhiều người đã làm những thứ tương tự, nhưng các công ty không muốn UI nhàm chán, chung chung nên chúng không được dùng nhiều trong phát triển sản phẩm
  • Tôi hiểu ý chính, nhưng điều đó chỉ đúng với các ví dụ đơn giản nhất. Công cụ này có thể làm nhiều thứ. Nếu xem tiếp thread đó, nó còn triển khai cả tic-tac-toe
    Về cơ bản, nó hoạt động bằng cách gửi ảnh chụp màn hình sơ đồ cho GPT-4 và nói “hãy triển khai cái này”
  • Ngày xưa ở khu trưng bày đồ họa Comdex có một hệ điều hành mới mẻ được giới thiệu là bước tiếp theo. Một gã nerd khổng lồ kéo thả đủ thứ bằng chuột, “chứng minh” rằng bạn không cần là lập trình viên để tạo ứng dụng
    Mười năm sau, có thứ tên Visix Vibe tồn tại khoảng một, hai năm, cung cấp điều tương tự cho Java, khi đó còn là một ngôn ngữ tương đối mới. Cứ vài năm, khoảng 4–5 năm hoặc 10 năm một lần, lại có ai đó muốn làm cho mọi độ phức tạp biến mất. Nhưng cuối cùng họ lại tạo ra một hệ điều hành
  • Bạn vẫn có thể thấy điều này nếu dùng các bộ công cụ UI native chính. Có thể không nhanh như RAD, nhưng mọi thành phần và tương tác mà trên web cần JavaScript tùy biến và thường bất ổn lại được cung cấp “miễn phí”
    Và chúng thực sự hoạt động đúng, tương tác với phần còn lại của toolkit theo cách mong đợi, đồng thời quốc tế hóa và khả năng truy cập cũng hoạt động nhất quán. Không có lý do gì HTML không thể làm được nhiều hơn chỉ với những thứ tích hợp sẵn, và nếu làm vậy có thể tiết kiệm lượng thời gian khổng lồ của lập trình viên cũng như giảm bực bội cho người dùng mỗi năm. Nhưng họ lại không làm như vậy