Une photo n’est que des nombres
Un ordinateur ne regarde pas une photo. Il garde une grille de nombres, un par point. Un modèle qui reçoit des images lit ces nombres.
Cela compte, car plus la grille est grande, plus elle coûte cher à envoyer. Cette leçon vous montre la grille et son prix.
À la fin de cette leçon
Remarque
Je peux dire comment une image devient des nombres que lit un modèle, et ce que la taille et les tuiles changent au coût.
Mots clés
| Mot | Ce que ça veut dire |
|---|---|
| Pixel | un point d’une image, gardé sous forme de nombre |
| Canal | une part de couleur d’un pixel : rouge, vert ou bleu |
| Redimensionner | changer la largeur et la hauteur d’une image |
| Tuile | un petit carré découpé dans une image |
| Multimodal | qui accepte plusieurs sortes d’entrées, comme du texte et des images |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une image est une grille de nombres
Une image est découpée en lignes de petits points appelés pixels. Pour une image en gris, chaque pixel est un nombre de 0 (noir) à 255 (blanc).
Une image en couleurs garde trois nombres par pixel, un par canal : rouge, vert et bleu. Elle contient donc trois fois plus de nombres qu’une image grise de même taille.
Une image grise et un pixel en couleurs
| Ligne | Pixel 1 | Pixel 2 | Pixel 3 |
|---|---|---|---|
| 1 | 0 | 128 | 255 |
| 2 | 64 | 128 | 192 |
| 3 | 255 | 128 | 0 |
| Un pixel en couleurs | rouge 200 | vert 30 | bleu 30 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
On réduit d’abord les grandes images
Un modèle n’accepte que des images jusqu’à une certaine taille. Une image plus grande est redimensionnée avant d’être lue, sinon elle est refusée.
Le moyen le plus simple de réduire une grille est de faire la moyenne de chaque bloc de pixels. Un bloc de 2 sur 2, soit quatre pixels, devient un pixel. L’image est alors deux fois moins large et deux fois moins haute.
Une erreur courante
Attention
Beaucoup pensent qu’un petit fichier coûte toujours moins cher. Le coût suit la largeur et la hauteur en pixels, pas le poids du fichier. Un fichier minuscule peut cacher une énorme grille. Comptez donc toujours les pixels.
Les tuiles fixent le coût
Après le redimensionnement, l’image est découpée en tuiles carrées. Une tuile au bord peut n’être remplie qu’en partie, mais elle compte pour une tuile entière.
Dans ce labo, la règle est 20 de départ plus 10 par tuile de 16 sur 16 pixels. Elle est inventée pour la leçon. Un vrai service a sa propre règle : lisez toujours sa grille de prix.
Compter des tuiles de 16 sur 16
| Image | Tuiles en largeur | Tuiles en hauteur | Tuiles | Coût |
|---|---|---|---|---|
| 16 sur 16 | 1 | 1 | 1 | 30 |
| 17 sur 16 | 2 | 1 | 2 | 40 |
| 40 sur 30 | 3 | 2 | 6 | 80 |
| 64 sur 64 | 4 | 4 | 16 | 180 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Écrire l’assistant du modèle, partie 1
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'const base = process.env.AI_URL || \"http://ai:4000\";' '// Les jetons d’une réponse, ou null si elle n’en donne pas.' 'function compter(donnees, nom) {' ' return donnees.usage && typeof donnees.usage[nom] === \"number\" ? donnees.usage[nom] : null;' '}' > model.js"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Écrire l’assistant du modèle, partie 2
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'async function demander(messages, echantillon, max) {' ' try {' ' const res = await fetch(base + \"/v1/chat/completions\", {' ' method: \"POST\",' ' headers: { \"content-type\": \"application/json\", authorization: \"Bearer lab\" },' ' body: JSON.stringify({ model: \"lab\", messages: messages, max_tokens: max || 100 }),' ' signal: AbortSignal.timeout(30000),' ' });' ' if (res.ok === false) throw new Error(\"statut \" + res.status);' ' const d = await res.json();' ' return { texte: d.choices[0].message.content, entree: compter(d, \"prompt_tokens\"), sortie: compter(d, \"completion_tokens\"), enregistre: false };' ' } catch (erreur) {' ' console.log(\"Échantillon enregistré : aucun modèle n’a répondu (\" + erreur.message + \").\");' ' return { texte: echantillon, entree: null, sortie: null, enregistre: true };' ' }' '}' 'module.exports = { demander };' >> model.js"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Écrire le script de l’image, partie 1
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'const { demander } = require(\"./model\");' 'let graine = 7;' 'function suivant() { graine = (graine * 37 + 11) % 256; return graine; }' 'const image = [];' 'for (let y = 0; y < 6; y++) {' ' const ligne = [];' ' for (let x = 0; x < 6; x++) ligne.push(suivant());' ' image.push(ligne);' '}' > voir1.js"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Écrire le script de l’image, partie 2
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'function reduire(img, f) {' ' const sortie = [];' ' for (let y = 0; y < img.length; y += f) {' ' const ligne = [];' ' for (let x = 0; x < img[0].length; x += f) {' ' let somme = 0;' ' for (let j = 0; j < f; j++) for (let i = 0; i < f; i++) somme += img[y + j][x + i];' ' ligne.push(Math.floor(somme / (f * f)));' ' }' ' sortie.push(ligne);' ' }' ' return sortie;' '}' 'function tuiles(l, h, t) { return Math.ceil(l / t) * Math.ceil(h / t); }' >> voir1.js"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Écrire le script de l’image, partie 3
docker exec -w /home/node/project agent sh -c "printf '%s\n' 'async function main() {' ' const petite = reduire(image, 2);' ' console.log(\"grande \" + image[0].length + \"x\" + image.length + \", ligne 1 : \" + image[0].join(\" \"));' ' console.log(\"petite \" + petite[0].length + \"x\" + petite.length + \", ligne 1 : \" + petite[0].join(\" \"));' ' console.log(\"tuiles de 2 : grande \" + tuiles(6, 6, 2) + \", petite \" + tuiles(3, 3, 2));' ' const q = \"En une phrase courte, pourquoi une image plus petite coûte-t-elle moins cher à envoyer à un modèle ?\";' ' const reponse = await demander([{ role: \"user\", content: q }], \"Une image plus petite a moins de tuiles, et le prix suit le nombre de tuiles.\", 40);' ' console.log(\"réponse : \" + reponse.texte);' '}' 'main();' >> voir1.js"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Réduire une image et compter les tuiles
docker exec -w /home/node/project agent node voir1.jsAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Les lignes affichées
| Ligne | Ce qu’elle montre |
|---|---|
| grande 6x6, ligne 1 : 14 17 128 139 34 245 | La première ligne de l’image inventée |
| petite 3x3, ligne 1 : 88 166 132 | Chaque bloc de 2 sur 2 devient un pixel |
| tuiles de 2 : grande 9, petite 4 | Moins de tuiles après la réduction, donc un prix plus bas |
| réponse : ... | Une phrase du modèle, ou d’abord une ligne Échantillon enregistré |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.