Interface HalfwayBot - génération
Contexte
Au début de l'explosion de ChatGPT, je voulais répondre à une question simple :
« Mes prompts me coûtent combien, concrètement ? »
Dans l'interface ChatGPT, on écrit, on envoie, on itère… mais on ne voit pas directement la consommation en tokens ni une estimation de prix que cela couterait si j'utilisais l'API de OpenAI.
De la simple curiosité finalement.
Le problème
Sans visibilité sur le coût des prompts, difficile de :
- comparer deux prompts
- optimiser un workflow
- comprendre l'impact réel de la formulation de nos prompts
Objectif
Je voulais donc un compteur directement intégré dans ChatGPT, sans changer mes habitudes. Comme ça j'ai un feedback immédiat de mon utilisation.
La solution
J'ai développé ChatGPT Tokenizer, une extension Chrome qui ajoute une toolbar dans l'UI ChatGPT pour afficher :
- le nombre de tokens du prompt en cours
- le nombre de caractères
- une estimation de coût instantanée
- un total cumulé par compte utilisateur
- un total cumulé par conversation
Fonctionnalités principales
- 🔢 Comptage des tokens en temps réel pendant la saisie
- 💵 Estimation du prix en direct (base GPT-3.5 Turbo)
- 🧾 Cumul des tokens envoyés sur la session utilisateur
- 💾 Persistance locale
- 🧼 Bouton reset pour remettre le compteur cumulé à zéro
- ✨ Micro-animation visuelle lors de l'envoi
Fonctionnement technique
Architecture globale
Utilisateur écrit un prompt dans ChatGPT
│
▼
Content script injecté sur chat.openai.com
│
├─ Observe le DOM
├─ Injecte une toolbar React sous la zone de saisie
└─ Monte l'UI dans un Shadow DOM
│
▼
Toolbar React
│
├─ Compte les tokens
├─ Calcule coût estimé en direct
└─ Sur envoi : incrémente le total en stockage local
│
▼
chrome.storage.local (clé profile[userId])
Injection dans une SPA dynamique
ChatGPT étant une SPA (single-page application), les nœuds sont recréés fréquemment.
Pour garder la toolbar active, l'extension :
- observe un élément précis de la page avec
MutationObserver - redétecte la zone de saisi
textarea - réinjecte le composant si nécessaire
Cette logique évite que l'UI disparaisse lors des changements de vue.
Isolation UI avec Shadow DOM
La toolbar est montée dans un élément #tokenizer avec attachShadow({ mode: 'open' }).
Intérêt :
- éviter les collisions CSS avec les styles de ChatGPT
- garder un rendu stable malgré les classes utilitaires du site hôte
Tokenization
Le compteur utilise une implémentation BPE (byte pair encoding) JavaScript (mod.js) avec encoder.js + vocab.bpe.js.
Le flux :
- découpage du texte avec une regex de tokens
- conversion byte → unicode
- fusion BPE selon les ranks
- comptage de la longueur finale du tableau de tokens
Persistance par utilisateur
Le total est stocké dans chrome.storage.local avec une structure profile[userId].
Le userId est récupéré depuis __NEXT_DATA__ (données bootstrap de la page), ce qui permet de séparer les compteurs selon le compte connecté.
Choix produit
J'ai volontairement mis l'accent sur l'usage immédiat :
- interface custom
- feedback en temps réel
- zéro configuration côté utilisateur
Le popup et la page options sont restés secondaires, l'essentiel du produit étant directement dans la page ChatGPT.
Limites du projet
- Le prix affiché est basé sur une valeur fixe (
$0.002 / 1K tokens) et n'intègre pas automatiquement les changements tarifaires. - Le compteur suit surtout les prompts saisis, pas une facturation API exhaustive entrée/sortie.
- L'intégration dépend de sélecteurs DOM ChatGPT, donc sensible aux évolutions d'interface.
Ce que j'ai appris
- architecture d'extension Chrome Manifest V3 (content script + service worker)
- intégration React dans une page tierce via Shadow DOM
- robustesse DOM dans une SPA
- principes BPE/tokenization proches de l'écosystème OpenAI
- design de produit « utilitaire » : peu d'UI, valeur immédiate
J'ai aussi testé l'intégration d'une librairie communautaire dans le projet pour calculer parfaitement le coût de chaque prompt, mais je n'ai pas poursuivi le projet au-delà.
Ce projet à surtout été un bac à sable d'apprentissage. Il m'a servi de pont entre front-end, tooling navigateur et compréhension concrète des coûts liés aux LLM.