Aller au contenu
kenjtecJournal
Rechercher dans le Journal

Un curseur explique plus qu’un paragraphe : des modèles interactifs avec ChatGPT

Un petit modèle de tables rend l’arrondi concret. Avec le JavaScript bien visible et des limites claires, il devient un élément de site web traçable, conçu par vous-même.

Ana fait glisser des marque-places avec une règle ; le cinquième, rouge, se trouve déjà à la deuxième table. Illustration réalisée par IA.

Quatre personnes ont besoin d’une table. La cinquième personne a soudain besoin d’une deuxième. C’est précisément lors de tels sauts qu’un modèle réglable explique plus qu’un nombre décimal lisse. Vous ne voyez pas seulement un résultat, mais aussi la règle qui le produit.

Dans les interfaces prises en charge, ChatGPT peut afficher des explications et des calculateurs interactifs. La disponibilité dépend notamment du compte et de l’interface. Une seule relation suffit pour un début judicieux. Le modèle de tables ci-dessous est une illustration de notre cru ; il n’a pas été généré dans une session ChatGPT ni testé en tant qu’application.

L’hypothèse a sa place à côté du curseur

Notre modèle simplifié suppose quatre places par table. Nous cherchons un nombre entier de tables pour un nombre entier non négatif de participants. La forme de la salle, les issues de secours, l’accessibilité et les besoins d’espace particuliers ne sont pas calculés. Le champ d’application reste lisible juste à côté de l’affichage.

La règle est la suivante : diviser le nombre de personnes par quatre et arrondir à l’entier supérieur. Avec zéro personne, ce modèle donne zéro. D’une à quatre personnes, on obtient une table ; de cinq à huit, deux. Ces valeurs découlent mathématiquement de la règle choisie ; ce ne sont pas des résultats observés d’une évaluation de modèle.

Une petite fonction rend la règle visible

function tische(personen) {
  if (!Number.isInteger(personen) || personen < 0) {
    throw new Error("Number of participants must be a whole number from zero.");
  }
  return Math.ceil(personen / 4);
}

Notre propre fonction JavaScript ne contient délibérément que la relation propre au sujet. Elle ne sait rien d’une salle ni de réservations. Cette portée restreinte est utile : le calcul peut être lu indépendamment des couleurs, des animations et des commandes.

Pour l’interface, un champ numérique avec une valeur visible peut suffire. Un curseur est un moyen supplémentaire de le manipuler, pas un substitut au résultat exact. L’extrait HTML suivant, de notre cru, montre l’étiquetage et une zone pour le retour d’information.

<label for="personen">Number of participants</label>
<input id="personen" type="number" min="0" max="200" step="1" value="0">
<p>Assumption: four places per table.</p>
<output id="bedarf" aria-live="polite">0 tables</output>

Relier délibérément la saisie et le calcul

Un morceau de code de liaison lit le texte du champ numérique, vérifie qu’il s’agit d’un nombre entier admissible et n’appelle qu’ensuite la fonction de calcul. Un champ vide doit déclencher un retour compréhensible au lieu d’être traité, involontairement, comme un zéro saisi exprès.

const eingabe = document.querySelector("#personen");
const ausgabe = document.querySelector("#bedarf");
eingabe.addEventListener("input", () => {
  const text = eingabe.value.trim();
  const n = Number(text);
  if (text === "" || !Number.isInteger(n) || n < 0 || n > 200) {
    ausgabe.textContent = "Please enter a whole number from 0 to 200.";
    return;
  }
  const anzahl = tische(n);
  ausgabe.textContent = `${anzahl} ${anzahl === 1 ? "table" : "tables"}`;
});

La limite supérieure de 200 est une limite que nous avons choisie pour cette interface d’apprentissage. Ce n’est pas une preuve factuelle de capacité. Placez la partie exécutante du script après le champ numérique et la sortie. Réunissez la fonction et l’extrait dans le même petit document si vous les expérimentez ; ce sont des éléments lisibles, pas une livraison déjà exécutée.

Le mouvement ne doit pas remplacer le seul texte qui affiche le résultat. Quiconque réduit les animations ou ne lit que le nombre doit pouvoir comprendre la même règle. Gardez donc l’hypothèse et le résultat calculé visibles en permanence.

Vérifier séparément les sauts et les commandes

Calculez vous-même les cas de zéro, une, quatre, cinq et huit personnes. Examinez aussi un champ vide, un nombre négatif et une valeur décimale. Vous examinez ainsi à la fois la règle et le traitement de la saisie. Ensuite, vérifiez l’utilisation au clavier et la lisibilité du retour d’information.

Si vous souhaitez réutiliser ce même élément de votre cru sur un site web, le mode développeur de KENJTEC WebSiteBuilder ai, par exemple, offre un emplacement pour vos propres HTML, CSS et JavaScript, avec un aperçu et une publication séparée du code. Le transfert se fait délibérément sous forme de code ; une visualisation de chat n’est pas reprise automatiquement.

Au bout du compte, le modèle répond exactement à sa propre petite question. Sa force réside dans le fait que la saisie, la formule et la limite sont visibles ensemble. Une véritable planification de salle nécessite d’autres informations que cet affichage, explicitement, ne fournit pas.

Sources et état de la documentation : 25 octobre 2026.

Hambourg est notre point de départ.

L’utile vous accompagne.

L’IA en pratique depuis Hambourg, expliquée pour tous.

Articles enregistrés