Dans la foulée de ce précédent post dont la fin décrivait le vibe-coding d’une application Android (avec Claude Code exécutant Sonnet), j’ai souhaité explorer davantage cette histoire de vibe-coding, notamment pour essayer Claude Opus et Devstral.

Le prétexte

J’ai récemment voyagé en Nouvelle-Zélande (qui était d’ailleurs absolument magnifique, je prévois de publier des photos quelque part sur ce blog), mais j’ai réalisé sur place que le temps s’annonçait mauvais à de nombreux endroits, et j’ai autant que possible ajusté mon voyage en fonction de la météo. Sauf que… la plupart des sites et des applis de météo sont 1°/ spécifiques à un pays donné, et 2°/ bourrées de pub.

De plus, le fameux site orange a publié début janvier un post sur open-meteo. Qu’à cela ne tienne : j’avais mon prétexte :)

Tatonnement

Parmi les erreurs que j’ai faites sur le premier jet

  • j’ai commencé par demander aux IA de générer une application en Go. Sauf que… ça impliquait 1°/ d’avoir un site web dynamique, i.e. d’exécuter l’app derrière un reverse-proxy, etc. 2°/ toutes les requêtes vers open-meteo seraient faites par cette appli
  • j’ai aussi au départ demandé à sampler de manière périodique e.g. tous les degrés de latitude/longitude. Combiné au fait que Devstral n’avait probablement pas généré le code le plus propre du monde et que de nouvelles requêtes étaient faites dès que je déplaçais ou zoomais sur la carte, je me suis vite retrouvé blacklisté pour la journée par open-meteo.com (limite de 10000 appels par jour :)

C’est alors que j’ai pensé

  • au fait que le navigateur pourrait faire lui-même les requêtes vers open-meteo (ce qui permet de ne pas exposer mon serveur à la limite de open-meteo, même si mon application devait avoir du succès :). De plus cela aurait de plus le mérite d’être très simple : une page web statique à servir via Caddy ou via un CDN
  • au fait que je pourrais demander à l’utilisateur de cliquer sur les quelques points qui l’intéressent plutôt que de sampler toute la terre…

Devstral m’a généré du code “utilisable” mais pas au niveau de Claude Opus plus bas (cela dit, je n’ai rien payé à Mistral alors que j’ai déboursé pas loin de 20 € chez Anthropic donc dans l’ensemble je pense que Mistral ne s’en sort pas si mal, et j’y reviendrai :)

résultat final avec Opus

Le résultat final est visible ici et ci-dessous (pensez bien à cliquer dedans pour ajouter des points, puis à cliquer dans les points pour voir le détail).

Il a été généré avec le prompt suivant, et ça m’a bluffé ! (à la réflexion, vu qu’il a fait les traductions tout seul, j’aurais sûrement pu écrire le prompt directement en Français :)

  1. Can you create a web page (that could be delivered by a simple web server, i.e. pure HTML/JS/CSS to be executed fully on client side) that would display a leaflet.js map for weather forecasts based on open-meteo.com

    • it would start with a blank leaflet.js map. When you click somewhere on the map, it would add a point (lat, lon) to a list. There would also be a “delete” icon in front of each point of the list in order to remove a point. When clicking on a point in the list, the leaflet map would center on that point
    • for each point, a request to https://open-meteo.com/ would be made. The leaflet.js would display a proper emoji to reflect the weather forecast (above a semi-transparent white disc for more readability). When hovering or clicking on that icon, more details would be displayed in a box (temperature, forecasts for the 10 coming days, etc. Basically all informations stored from the request). All WMO codes as described in https://www.nodc.noaa.gov/archive/arc0021/0002199/1.1/data/0-data/HTML/WMO-CODE/WMO4677.HTM would be covered in a table (where each code would have its corresponding english description, together with a proper emoji, and a French translation of the description) so that it is easy to have a function that takes a WMO code and lang (FR or EN) as input and returns the emoji and description
    • above the leaflet.js map, there would be a slider allowing to choose from today to a day within the next 10 days, and change the displayed emojis for all the points
    • there would be a title “Meteo forecast” on the top of the page, and a choice between english and french

  2. Can you change the color of "a semi-transparent white disc" (from previous request) to a semi-transparent color reflecting the temperature ? I would like to have a continous colormap (i.e. function f(temperature) => color, which would be based on a continuous function, not on discrete cases). The colormap control points would be: darkblue below -20°C, darkblue to blue between -20°C and -0°C, blue to green below 0°C and 15°C, green to yellow below 15°C and 25°C, yellow to red between 25°C and 40°C, and darkred above 40°C.

  3. Can you make the page responsive ? (in particular, the list of point takes all the space on smartphones and we cannot see the map…)

  4. It’s better, yet still not good for small screens

    • in horizontal mode, the display is the same as desktop and the point list still takes too much space. Besides, there is also no way to scroll down when looking at a popup. Can you fix this ?
    • maybe we could make the list collapsible (or resizable) even for desktop ?

  5. Can you add a toggle to switch between the hourly forecast and the 10 day forecast ? Can you also make the point list collapsible even in horizontal / desktop mode (it still does not work) ?"

  6. Can you add a description (related to weather code) to the hourly in addition to the emoji ?

Réflexion et impressions

  1. le niveau atteint par les IA telles que Claude Opus est impressionnant. Devstral est un cran en dessous mais a le mérite d’être Français, et auto-hébergeable (je n’ai pas encore les idées claires si le modèle 123B pourrait correctement fonctionner sur le GPU d’une machine telle que le Asus ROG flow z13 dans sa variante avec 128G de mémoire unifiée - non disponible en France)
  2. avec mes tâtonnements, j’ai trouvé qu’il valait mieux orienter d’emblée l’IA dans la bonne direction, que corriger par la suite. Corollaire : j’ai perdu beaucoup de temps avec Devstral à vouloir rectifier des choses qui n’allaient pas, alors que Opus a tout de suite fait ce que je souhaitais (mais même Sonnet - utilisé pour l’appli Android de mon précédent post - avait été impressionnant). Je suis tenté de dire que l’abonnement à 100 € / mois est un faible investissement au regard de la valeur créée
  3. le vrai risque (dont tout le monde parle) est de créer de la dette technique : je ne suis pas capable de débugger facilement les milliers de lignes de code que Claude / Devstral ont généré. C’est bien pour du prototypage et pour automatiser des tâches rébarbatives mais on devient dépendant de l’IA pour le débuggage et la moindre modification ultérieure…