« Je crois qu’il faut que j’aille m’allonger un peu. »

• Impression après avoir testé la démo Make Real de TLDraw
• Un outil qui utilise l’IA pour transformer un dessin en logiciel fonctionnel
  • Convertit des images vectorielles en HTML/TailWind CSS et Javascript à l’aide d’OpenAI's GPT-4V

[GN⁺]

Avis sur Hacker News

• Steve de tldraw ici. Désolé, c’est un projet jouet aux pratiques de sécurité exécrables. Si vous voulez l’exécuter en local ou consulter le code source, c’est ici : https://github.com/tldraw/draw-a-ui
  Vous pouvez voir d’autres exemples sur https://twitter.com/tldraw. Je peux répondre aux questions sur tldraw ou sur ce projet. Ce n’est pas un truc qui va supprimer le travail de qui que ce soit, mais c’est vraiment amusant à bricoler, et il y a un exemple plus complexe ici : https://twitter.com/tldraw/status/1725083976392437894

  • Il faut le lancer tout de suite. C’est vraiment un produit brillant, il suffit de facturer 5 $ par mois et de demander aux utilisateurs d’apporter leur propre clé OpenAI
    Il y a aussi un serveur de licences que je viens de publier sous licence MIT. Il est écrit en Elixir et fait tourner https://go.robocoder.app. Si vous avez besoin d’aide pour la configuration, vous pouvez me contacter : https://github.com/emcmanus/robocoder-server/
  • Steve, où est-ce qu’on envoie l’argent ? Blague à part, c’est assez convaincant. C’est peut-être un jouet, mais tout le monde s’amuse avec comme ça
  • Super projet, félicitations pour le lancement. J’ai essayé d’entrer ma clé OpenAI, mais j’ai eu l’erreur « you exceeded your current quota, check billing ». Je me demandais si l’abonnement OpenAI Pro à 20 $ par mois suffisait, ou s’il fallait des droits supplémentaires
    J’ai trouvé la réponse dans le README GitHub. Il y est indiqué que « pour utiliser votre propre clé API, vous devez avoir accès au usage tier 1 ; consultez vos paramètres OpenAI pour voir votre tier actuel et comment l’augmenter »
  • Cet exemple de diagramme de flux est vraiment le point essentiel, et j’ai l’impression que ce genre d’outil devrait le traiter comme un concept de premier ordre. Cela commence à fournir les prises qui permettent de créer quelque chose d’utile plutôt qu’un simple jouet
  • Le dernier exemple est amusant, et c’est impressionnant de pouvoir donner un feedback de cette façon. Je me demande ce qu’il reçoit réellement en entrée quand on sélectionne à la fois l’application générée et le texte. Est-ce qu’il reçoit le code précédemment généré avec le nouveau texte ?

• Le prompt système dans le dépôt est le suivant :

  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.  
  

  Je ne sais pas très bien pourquoi il y est question de « creative license ». Pour chaque génération, le prompt utilisateur est le suivant :

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

  https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
  Il semble assez simple de faire tourner ça « en privé » en prenant une capture d’écran d’un canevas tldraw normal et en l’envoyant à l’API avec ce prompt

  • En anglais courant, « creative license » signifie ne pas trop se soucier des contraintes et faire ce qui semble le mieux. Ça ne semble pas avoir de rapport avec les licences logicielles

• J’ai essayé d’y mettre une maquette tirée d’une question d’entretien Facebook. Il y avait deux listes de cases à cocher et deux boutons permettant de déplacer les éléments cochés de l’une à l’autre, et il s’en est bien sorti : https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...

  • Je ne savais pas du tout que toList.appendChild(item.closest('li')); déplaçait l’élément. On apprend quelque chose tous les jours
  • J’ai testé avec un lecteur d’écran : quand on appuie sur le bouton, rien n’est annoncé. C’est un problème. Il faudrait dire quelque chose comme « Checkbox B moved to the left »
    Sans aucune annonce, l’utilisateur ne peut pas savoir si quelque chose s’est réellement passé lorsqu’il a appuyé sur le bouton. Page de test : https://output.jsbin.com/jixoqur/quiet

• Ces démos récentes montrent à la fois à quel point les progrès récents du machine learning/de l’IA sont impressionnants, et combien des millions de développeurs dans le monde continuent de réimplémenter des tâches répétitives et peu créatives.
  La plupart des écrans d’UI peuvent être décrits précisément en un ou deux paragraphes ; il n’est donc pas étonnant qu’ils puissent être représentés assez finement dans un vecteur d’embedding relativement petit.

  • Je suis d’accord avec l’idée générale, mais il est aussi important de noter que la plupart de ces démos sont des cas soigneusement sélectionnés. Si l’on ne voit que les démos virales sur les réseaux sociaux, on finit par croire que l’IA est bien plus avancée qu’elle ne l’est réellement sur des tâches complexes.
    Les métiers non techniques qui n’ont pas beaucoup utilisé l’IA dans leur travail réel y sont particulièrement vulnérables. Ceux qui la pratiquent sur le terrain ont généralement une vision plus nuancée. C’est extrêmement utile, mais cela se trompe souvent, et il faut retoucher avec soin pour obtenir un résultat de niveau production. Même en tant qu’optimiste de l’IA, je pense que la valeur est réelle et que les démos impressionnantes montrent la direction que nous prenons, mais il faudra du temps avant que les résultats moyens rattrapent les attentes exagérées.
  • Beaucoup de façons d’exprimer des idées logicielles sont aussi très inefficaces. La partie réellement intéressante, c’est-à-dire l’entropie, est très faible.
    Dans cette démo, il s’agit littéralement de deux sliders qui ajustent deux propriétés CSS, donc la quantité d’information dans la spécification de l’UI n’est pas très élevée. Avec un langage de spécification d’UI approprié, cela tiendrait en trois lignes de code. La difficulté vient de la gestion du boilerplate des UI web.
  • Cela exprime bien pourquoi le battage B2C autour de l’IA, construit sur des centaines de démos façon « Hello World », me mettait mal à l’aise. L’ambiance est du genre : « Mon Dieu, la programmation est morte ! »
    Ce qui est étrange, c’est que sur HN, quand il est question des plateformes no-code traditionnelles, les gens repèrent facilement leurs limites de scalabilité et de maintenance ; mais dès qu’on ajoute de l’IA, on dirait que ces problèmes disparaissent soudainement et qu’il n’y a plus à s’inquiéter du spaghetti produit par une boîte noire.
  • Cela ne fait que révéler à quel point notre stack logicielle est stupide. Tout fonctionne comme si l’on disait : « vous pourriez vouloir personnaliser ceci, cela, et aussi 300 détails inutiles ».
    Ce qu’on voulait vraiment, c’était séparer la fonctionnalité de la présentation. Par coïncidence, c’est exactement ce qu’était le Web en HTML pur de 1996. Quelque chose a horriblement mal tourné, d’une manière inimaginablement stupide, et personne n’a fait mieux. À la place, il nous reste des ombres portées et des flexbox internes.
  • La réimplémentation permanente de tâches répétitives et peu créatives n’est pas un problème propre aux développeurs. De la saisie de données à la comptabilité en passant par les métiers créatifs, cela concerne la plupart des emplois de bureau.
    Une grande partie du travail de bureau consiste à refaire sans cesse la même chose, souvent avec différentes personnes qui répètent essentiellement les mêmes tâches dans différentes entreprises.

• Cela ressemble à un outil qui donne l’air intelligents et compétents aux designers UI, et peut-être aux product owners. Mais le vrai travail retombera sur les programmeurs, comme aujourd’hui.
  Le designer UI pourra fournir une « démo », mais comment cette fonctionnalité de base s’intégrera-t-elle au reste de l’app ? Elle ne le fera pas.

  • Cela débouchera sûrement sur des conversations agréables et productives du type : « Mais ça marche déjà juste là ! Pourquoi est-ce si long de l’intégrer dans l’app ? Vous ne pouvez pas simplement le télécharger ? »
    Avant même GPT, certains défendaient l’idée que les prototypes très précoces ou les maquettes devaient avoir un rendu visuel aussi peu abouti que leur niveau de fonctionnalité interne. Les prototypes uniquement UI, jolis et qui « fonctionnent » en apparence, créent des attentes irréalistes même lorsqu’on les explique clairement, et augmentent le risque de proto-duction, où le prototype devient directement la production.
  • Je déteste quand un designer montre dans Figma une UI qui ressemble à un produit fini. Aux yeux des dirigeants, cela ressemble à un produit terminé, et des attentes irréalistes s’immiscent dans un processus de conception UI qui devrait être itératif.
    J’ai vu plusieurs projets où de mauvaises conceptions système ont été imposées aux ingénieurs à cause des contraintes d’un design Figma approuvé par un dirigeant. Bien sûr, ces organisations avaient aussi des problèmes plus profonds, mais les maquettes haute fidélité faciles à produire ont aggravé ce genre de situation par rapport aux wireframes.
  • La méthode est simple. Il suffit de donner un nouveau prompt à GPT-4 : "Thanks. Please connect it to the rest of this code:"
    Si vous voulez le rendre encore plus performant, ajoutez aussi "it's very important for my career".

• Les développeurs qui font des démos pour agrandir et faire tourner des boîtes risquent maintenant de perdre leur emploi.

  • Seulement ceux qui n’arrivent même pas à aligner les sliders.

• Pendant que nous discutions avec un client de la façon d’intégrer notre logiciel à son logiciel, il nous a envoyé une capture d’écran de son formulaire principal.
  J’ai mis cette capture dans ChatGPT et demandé : « fais-moi un formulaire React de ce style avec Bootstrap ». Après quelques ajustements, j’y ai raccordé mon logiciel, et quelques heures plus tard le client a été surpris de voir une preuve de concept intégrée aussi rapidement. Quand j’ai des problèmes de mise en page CSS en développement web, il m’arrive de téléverser une capture d’écran dans ChatGPT et de demander comment les résoudre ; la démo du tweet semble assez similaire.

  • Créer une page de formulaire basique était déjà simple. Ce qui est étonnant, c’est qu’après environ 25 ans de développement web, nous continuions à créer de nouveaux frameworks web et à rendre cela inutilement complexe.
    Des frameworks excellents pour des cas d’usage sophistiqués, mais excessifs pour des tâches courantes et basiques, n’ont cessé d’apparaître. Il y a parfois eu des exceptions, mais la plupart des développeurs web ne les aiment pas. Ce n’est pas très valorisant sur un CV et, franchement, qui a envie de ne faire que des formulaires web pendant toute sa carrière ?
  • Le client sera impressionné par la vitesse la première fois. La deuxième fois, il s’y attendra. La troisième fois, quand les exigences auront dépassé ce que ChatGPT peut gérer, il se mettra en colère parce que le planning aura explosé.
  • Si vous discutez avec le client par e-mail ou par chat, on peut imaginer que lui aussi demande à ChatGPT comment vous transmettre au mieux ses exigences.
    Au final, ce sont des tortues sur des tortues :+)
  • Mais le client ne voulait peut-être pas que ses données soient exposées à ChatGPT.
  • Téléverser dans ChatGPT une capture d’écran d’un problème de mise en page CSS pour le corriger est une idée élégante à laquelle je n’avais pas pensé. D’habitude, je manipule assez bien le CSS pour corriger dans les outils de développement puis reporter les styles dans le code, mais c’est à retenir.
    Pour coder, je m’en suis davantage servi pour transformer rapidement des données avec des pipelines en ligne de commande ou des scripts Bash que pour autre chose. Donner la sortie d’une commande et demander du Bash pour le formatage, l’agrégation, le tri ou l’extraction voulus rend faciles des choses que je n’aurais normalement pas faites, comme du débogage ou la vérification d’hypothèses. On peut aussi le faire à la main, mais c’est lent, et il faut chercher ou consulter les pages man pour se souvenir des options et des arguments. Pour le code, j’utilise surtout GH Copilot.

• Vous pouvez me traiter de sceptique, mais je ne crois pas à l’avenir des solutions no-code. Il faut aligner des boutons sur de petites résolutions d’appareils, prévoir des marges pour que ce soit joli dans d’autres langues, et il y a sans cesse d’autres exigences
  Au mieux, cela permettra de créer des applis plus vite avec un langage plus abstrait. Ça fonctionne pour des choses extrêmement basiques et courantes comme le morpion, mais ce n’est pas adapté aux travaux originaux

  • Le gros problème du no-code fondé sur les LLM, c’est que la sortie est non déterministe, si bien qu’au final on ne peut mettre sous gestion de versions que la sortie elle-même
    Imaginez des dizaines de personnes ayant juste quelques notions techniques qui font des croquis et appuient sur « fais-le vraiment » pour ajouter des fonctionnalités. Chacune produit des centaines de lignes de code. À la fin de la journée, quelqu’un doit comprendre ce résultat, mais comme la sortie est non déterministe, c’est tout ce qu’il nous reste
  • C’est comparable à l’Auto-Tune. Les artisans capables de chanter juste continueront à créer des choses intéressantes
    En même temps, de nouveaux venus qui n’ont pas appris, ou n’ont pas voulu apprendre, à chanter juste créeront avec beaucoup moins d’efforts des genres musicaux entièrement nouveaux et de la pop grand public. Les artisans l’utiliseront aussi, plus rarement, pour renforcer certains workflows, améliorer la finition et aller plus vite
  • Beaucoup de ces démos ne cherchent pas vraiment à pousser une approche purement no-code ; elles montrent plutôt qu’on peut créer presque instantanément des wireframes fonctionnels
    Je pense que des outils comme Canva ou Figma vont adopter activement ce type de fonctions et améliorer fortement les wireframes et démos haute fidélité
  • J’ai eu la même intuition au départ. La personnalisation et l’intégration vont être un cauchemar total. En revanche, c’est excellent pour le prototypage
  • Soit les LLM/IA deviendront parfaits, soit nous commencerons à utiliser du code et des frameworks beaucoup plus faciles à exploiter pour les LLM/IA

• Squarespace, Wix, etc. ont déjà capté le bas du marché ; sinon, l’externalisation en Inde l’aurait fait
  C’est l’évolution naturelle du même concept. Si j’étais chef de produit d’un constructeur de sites web, je me précipiterais sur ce type d’intégration de builder IA. Ça ne marchera absolument pas pour des tâches métier complexes et à peine définies, mais ça pourra très bien créer un calculateur de coûts pour une activité de photographe

  • La plupart des PME n’ont toujours pas d’application ni de site web, ou alors quelque chose d’inutile. Il y a énormément de place pour des marchés de niche et de bons outils
  • Cela semble utile comme outil de création de démos interactives et de prototypes pour itérer rapidement sur des idées. Cela permet de garder des boucles de feedback courtes avec les clients et de réduire les malentendus. Par exemple, Figma pourrait probablement implémenter quelque chose comme ça
  • Je ne vois pas pourquoi on penserait que cela ne fonctionne que pour des tâches triviales. C’est presque du déni
    Les logiciels de workflows de processus métier sont assez populaires. Il existe beaucoup d’apps où les gens font des choses similaires avec du glisser-déposer ou des éditeurs de widgets interactifs, et qui peuvent gérer des formulaires complexes, des relations parent-enfant et des transitions d’état. Avec quelque chose comme GPT Vision, on peut sauter l’étape du glisser-déposer de widgets et utiliser un outil de dessin plus libre ou des croquis faits à la main. L’exemple le plus populaire aujourd’hui est probablement Notion, et il existait déjà depuis bien plus longtemps des exemples plus complexes

• Je me sens vieux maintenant. Il y a des décennies, on pouvait déjà faire à peu près ça à une vitesse similaire avec VB ou Delphi. Simplement, le résultat était un peu plus déterministe, au lieu que l’outil infère à partir du nom des labels
  Nous avions déjà ce genre de choses, et nous avons oublié qu’on pouvait le faire sans tout pousser dans le navigateur ni utiliser l’énorme puissance de calcul des modèles d’IA générative. J’ai l’impression d’être le vieux qui crie sur les nuages

  • Je pense à peu près la même chose. Pour le dire de façon un peu plus provocatrice, quand les gens montrent comment ils transforment Figma en HTML avec l’IA, je réponds : « Vous avez entendu parler de Dreamweaver ? »
    Bien sûr, le code de Dreamweaver était laid et pratiquement inutilisable, tandis que le code généré par l’IA n’est parfois pas si mauvais. Mais j’ai quand même l’impression qu’on était déjà assez proche de la situation actuelle
  • Ce n’est pas un problème de navigateur, mais de savoir à quel point le framework est opinionated
    VB était un outil très opinionated, qui ne produisait que des UI natives de style Windows. On ne reproduisait pas au pixel près dans VB une maquette arbitraire apportée par un designer, avec une apparence entièrement personnalisée. Aujourd’hui, la plupart des GUI de produits font partie de la marque. Pour le meilleur ou pour le pire, chaque entreprise veut une apparence et un comportement d’UI distinctifs. Les outils qui les construisent doivent donc être beaucoup plus complexes. On peut recréer VB dans le navigateur, et beaucoup l’ont effectivement fait de manière similaire, mais les entreprises ne veulent pas d’UI ennuyeuses et génériques, donc ce n’est pas très utilisé pour le développement produit
  • Je vois l’idée, mais elle ne vaut que pour les exemples les plus simples. Cet outil peut faire plusieurs choses. Si vous regardez plus loin dans ce fil, il implémente aussi le morpion
    En gros, cela fonctionne en envoyant une capture d’écran d’un diagramme à GPT-4 avec la consigne « implémente ça »
  • Il y a longtemps, dans le hall graphique du Comdex, il y avait un système d’exploitation tout frais présenté comme l’étape suivante. Un énorme nerd faisait glisser des éléments avec la souris, « prouvant » qu’il n’était pas nécessaire d’être programmeur pour créer des applications
    Dix ans plus tard, quelque chose appelé Visix Vibe, qui proposait la même chose pour Java, un langage alors relativement nouveau, a circulé pendant un an ou deux. Toutes les quelques années, grosso modo tous les 4 ou 5 ans, ou tous les 10 ans, quelqu’un veut faire disparaître toute la complexité. Mais au final, ils finissent par créer un système d’exploitation
  • On voit encore ce genre de choses avec les principaux toolkits d’UI natives. Ce n’est peut-être pas aussi rapide que le RAD, mais toutes sortes d’éléments et d’interactions qui, sur le web, exigent du JavaScript personnalisé et généralement fragile sont fournis « gratuitement »
    Et en pratique, cela fonctionne correctement, interagit avec le reste du toolkit comme prévu, et l’internationalisation comme l’accessibilité fonctionnent aussi de manière cohérente. Il n’y a aucune raison pour que HTML ne puisse pas faire beaucoup plus de choses par défaut ; cela permettrait d’économiser chaque année une quantité énorme de temps développeur et de frustration utilisateur. Mais ce n’est tout simplement pas ce qui se passe