Journal Faire un calendrier de l'avent par une IA

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes :
13
30
nov.
2023

Bonjour tout le monde,

Que faire par un beau dimanche pluvieux de novembre ? Bricoler, par exemple. Comme Noël approche, je me suis dit que je vais me faire un calendrier de l'avent.

Après mûre réflexion, je me suis dit : "Tiens, essayons de le faire faire par ChatGPT, comme on en parle beaucoup ces temps-ci." Et je l'ai guidé, étape par étape.

J'ai commencé par le contenu. Je lui ai demandé de raconter la naissance de Jésus en partant des prophéties messianiques de l'Ancien Testament. Ensuite, je lui ai demandé une "réflexion" sur chaque passage de la Bible qu'il m'a sorti.

Puis, je lui ai demandé de construire le site web en PHP et de créer la feuille de style. Après, je lui ai demandé d'intégrer le contenu (il a choisi deux fichiers JSON, un pour les passages bibliques et l'autre pour ses réflexions).

Enfin, je lui ai demandé de générer les images chaque jour et la bannière en haut, vu qu'il a décidé d'en mettre une. Seule l'image de l'introduction vient de stable diffusion.

J'ai corrigé les bugs d'affichage, comme le centrage, demandé de refaire quatre images qui n'étaient pas terribles, et collé les passages de la Bible depuis une vraie Bible (pour prendre ceux de la Segond 21).

Voici le résultat : https://avent.trachsel.info

Ce fut une expérience intéressante, et c'est impressionnant comme ça va vite.

  • # La concurrence et rude !

    Posté par  . Évalué à 2.

    Merci pour ce partage. J'aime bien ces usages maîtrisés des IA/LLM, où tu sais avoir un regard critique sur le résultat donné. Je crois que c'est peut-être ce qui fait le plus souvent défaut aux utilisateurs de l'IA, et que c'est ainsi qu'on se retrouve à croire des faits inventés (générés serait plus juste), justifiés par des sources… qui n'existent pas non plus.

    Quant au sujet du calendrier de l'avent, la concurrence fait rage : hier on me proposait https://adventofcode.com/ et aujourd'hui celui-ci :) Allez je me mets le tien en page d'accueil jusqu'à Noël, comme je verrai les messages chaque jour (sans tricher avec l'inspecteur web).

    • [^] # Re: La concurrence et rude !

      Posté par  (Mastodon) . Évalué à 6. Dernière modification le 30 novembre 2023 à 15:55.

      J'aime bien ces usages maîtrisés des IA/LLM

      Oui, c'est là où ça marche dès aujourd'hui : dans un domaine où tu as la compétence (mais pas forcément le temps). Dernier exemple en date : j'ai demandé à ChatGPT de me traduire mon CV en Anglais. J'ai un bon niveau d'Anglais, mais je n'aurais pas forcément les bonnes formulations qui tombent rapidement.

      Là c'est traduit en quelques secondes, la relecture et les menues corrections m'ont pris 5mn maxi, pb réglé, j'ai une super traduction de mon CV. Ça m'aurait pris au moins 1h et ça n'aurait pas été aussi bien fait (même si c'est sûrement pas parfait).

      En théorie, la théorie et la pratique c'est pareil. En pratique c'est pas vrai.

  • # La concurrence est vraiment, mais alors vraiment très rude

    Posté par  . Évalué à 7.

    Un jour, pendant que je vaquais à mes occupations procrastinatives, voilà que je tombe sur ce vieil article sur La Croix :

    Une nouvelle religion fondée sur l’intelligence artificielle suscite des inquiétudes

    Et là, ce fut comme une révélation ! mais avec de l'IA dedans.

    Bon, le bonhomme en question aurait dissout son organisation en 2021. Mais, à en juger par le comportement de l'espèce humaine cette dernière dizaine de millénaires, il est fort à parier qu'un autre illuminé à eu la même idée lumineuse ; et qu'avec les progrès récents de l'IA et quelques dividendes dormantes ici et là pour financer le bousin, cette idée pourrait tout aussi probablement devenir réalité.

    Bientôt donc la première religion Turing-complete, avec un e-Dieu miséricordieux et compatissant, mais qui punit iniquité des développeurs qui ne font pas leurs tests unitaires jusqu'à la troisième et à la quatrième génération.

    Bref, j'ai peur.

    Nec spe, nec metu

  • # le code source

    Posté par  (site web personnel) . Évalué à 5.

    Ce qui m'intéresse, c'est le code source produit (après relecture, tant qu'à faire).

    Voir un peu de quoi il est capable.

    Pourquoi bloquer la publicité et les traqueurs : https://greboca.com/Pourquoi-bloquer-la-publicite-et-les-traqueurs.html

    • [^] # Re: le code source

      Posté par  (Mastodon) . Évalué à 5. Dernière modification le 01 décembre 2023 à 08:02.

      En gros c'est du StackOverflow mais :

      • la réponse tombe directement, tu n'as pas à lire 3 ou 4 pages
      • elle est adaptée à ton cas (changement des noms des variables, petits algo supplémentaires…)

      Mais dans tous les cas, tu relis, tu testes etc… comme sur StackOverflow, ni plus ni moins.

      En théorie, la théorie et la pratique c'est pareil. En pratique c'est pas vrai.

      • [^] # Re: le code source

        Posté par  (site web personnel) . Évalué à 6.

        la réponse tombe directement, tu n'as pas à lire 3 ou 4 pages

        Après lire justement les différentes réponses permet souvent d'apprendre des trucs ou de voir d'autres manières de faire avec des avantages et inconvénients. Ce qui peut servir dans le contexte du moment voire pour totalement autre chose.

        Cela ne retire pas l'intérêt de ce genre d'outils pour autant.

        Mais dans tous les cas, tu relis, tu testes etc… comme sur StackOverflow, ni plus ni moins.

        Il est évident qu'il faut vérifier la réponse, ne serait-ce pour garder le contrôle du savoir nécessaire à la maintenance du code et parce que parfois ça ne fonctionne pas comme prévu.

        En tout cas pour des petits bouts de code simples ou des mini applications ça semble aller mais je suis plus dubitatif quand le code devient conséquent. Sans compter la question aussi du secret industriel que ce genre d'outils peuvent avaler sans que certains n'y fassent particulièrement attention…

    • [^] # Re: le code source

      Posté par  . Évalué à 4.

      Pour ce que ça vaut, je m'en sers pour des scripts shells un peu rébarbatifs à faire sur du traitement vidéo par exemple…Si je lui donne la bonne structure, le code est utilisable en l'état 90% du temps. Si je ne lui donne pas, on tombe à 75% avec une bonne dose de relecture.

    • [^] # Re: le code source

      Posté par  (site web personnel) . Évalué à 3.

      Oui bien tu as raison,
      voici le code source la page index.php 

      <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Calendrier de l'Avent</title>
    <link rel="stylesheet" href="style.css"> <!-- Lien vers votre feuille de style CSS -->
    <script src="script.js"></script> <!-- Lien vers votre fichier JavaScript -->
</head>
<body>
    <div class="container">
        <header class="banner">
            <h1><span class="banner">Calendrier de l'Avent généré par ChatGpt</span></h1>
        </header>

        <div class="calendar">
            <!-- Bouton d'introduction -->
            <button class="day" onclick="openDay('00')">Introduction</button>

            <!-- Boucle PHP pour générer les boutons des jours -->
            <?php
            // Obtenir le jour actuel
            $jourActuel = (int)date("d");
            $moisActuel = (int)date("m");
            //$moisActuel = 12;
            for ($i = 1; $i <= 25; $i++) {
                $dayFormatted = str_pad($i, 2, "0", STR_PAD_LEFT);
                // Vérifier si le jour du calendrier est passé ou est le jour actuel
                if ($i <= $jourActuel && $moisActuel == 12) {
                    echo "<button class='day' onclick='openDay(\"$dayFormatted\")'>Jour $dayFormatted</button>";
                } else {
                    // Désactiver le bouton pour les jours futurs
                    echo "<button class='day inactive' disabled>Jour $dayFormatted</button>";
                }
            }
            ?>
        </div>

        <footer>
            <!-- Contenu du pied de page -->
            <a href="https://www.selnet.ch/#contact">Contact</a>
        </footer>
    </div>

    <!-- Overlay pour l'affichage du contenu de chaque jour -->
    <div id="overlay" style="display:none;">
        <div id="overlay-content">
            <h2 id="day-title"></h2>    
            <p class="subtitle">Passage du jour</p>
            <p id="day-verse"></p>
            <img id="day-image" src="" alt="Image du jour">
            <p class="subtitle">Réflexion de l'IA</p>
            <p id="day-reflection"></p>
            <button onclick="closeOverlay()">Fermer</button>
        </div>
    </div>
</body>
</html>

      et voici le fichier script.js (bon celui la vous pouviez le voir :-)

      function openDay(day) {
    // Charger les données JSON
    document.getElementById('day-title').innerText = day + " décembre";

   fetch('versets.json').then(response => response.json()).then(versets => {
        const versetText = versets[day];
        const versetHtml = versetText.replace(/ - ([^ ]+ [^ ]+)$/, "<br/><span class='verse-reference'>$1</span>");
        document.getElementById('day-verse').innerHTML = versetHtml;
    });


    fetch('reflexion.json').then(response => response.json()).then(reflexions => {
        document.getElementById('day-reflection').innerText = reflexions[day];
    });

    // Définir l'image pour le jour
    document.getElementById('day-image').src = `images/${String(day).padStart(3, '0')}.jpg`;

    // Afficher l'overlay
    document.getElementById('overlay').style.display = 'block';
}

function closeOverlay() {
    document.getElementById('overlay').style.display = 'none';
}

      En fait le code est très simple.

  • # Chez moi c'est cassé

    Posté par  (site web personnel) . Évalué à 2.

    Le site a eu un bug de l'an 2024 non?

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.