HuggiMon — ta carte de dresseur IA depuis ton profil Hugging Face

# HuggiMon — ta carte de dresseur IA depuis ton profil Hugging Face

Un site Next.js qui transforme l’activité publique du Hub en carte Pokémon TCG interactive — holo shaders, binder de followers, PNG et page partageable.

Date: 2026-07-09
Tags: Hugging Face, Next.js, Open source, Side project
URL: https://tamsi.dev/blog/huggimon-ai-trainer-card

Sur Hugging Face, ton profil public raconte déjà une histoire : les modèles que tu publies, les Spaces que tu maintiens, les datasets que tu partages, les likes et les téléchargements qui s’accumulent. **HuggiMon** ([huggimon.co](https://huggimon.co)) prend ces signaux — uniquement des données publiques — et les convertit en **carte de dresseur IA** façon Pokémon TCG : tilt 3D, shaders holo, binder de followers, page dédiée par username.

## Pourquoi ce projet

Le Hub est excellent pour héberger du ML, moins pour « montrer qui tu es » en un coup d’œil. Les README listent des repos ; les stats sont dispersées entre models, datasets et spaces. J’avais envie d’un résumé ludique — pas un leaderboard sérieux, mais une carte que tu peux ouvrir sur `huggimon.co/ton-username`, partager sur X, ou coller dans ton README Hub.

- Zéro auth : un username suffit, tout est lu via l’API publique Hugging Face.
- Carte interactive avec 14 paliers holo selon ton niveau HF.
- Binder 3×3 : tes followers deviennent des mini-cartes à feuilleter.
- PNG téléchargeable + snippet Markdown pour ton README.

## Comment ça marche

Le flux est linéaire : fetch → score → render. Tu ouvres `/{username}` ; HuggiMon récupère l’overview utilisateur et les repos publics (modèles, datasets, spaces). Un module de scoring calcule six stats (0–100), déduit un type, une rareté, un niveau, des attaques et une énergie (basée sur les likes). Le rendu côté client repose sur les shaders holo de [pokemon-cards-css](https://github.com/simeydotme/pokemon-cards-css) ; le serveur compose le visage de la carte en PNG 660×921.

```text
/{username} → hf-fetcher → scoring → PokemonCard (holo + tilt)
↳ /api/card/{username}/face → PNG partageable
```

### Les six stats

- **MODEL** — modèles publiés, likes et downloads.
- **DATA** — datasets et leur traction.
- **SPACE** — Spaces publiés et likes associés.
- **IMPACT** — likes + downloads agrégés sur tout le travail public.
- **COMMUNITY** — followers et discussions.
- **DOCS** — part des repos avec une description.

### Holo, énergie et binder

Ton niveau HF détermine un **palier holo** parmi 14 (reverse holo → Secret Gold). Les likes sur ton travail deviennent des **énergies** sur la carte. Tes **followers** remplissent un binder paginé 3×3 avec animation de feuilletage — clique sur une mini-carte pour l’inspecter en grand.

## Partager et intégrer

Chaque profil a une URL publique et un snippet README prêt à coller :

```markdown
[![HuggiMon](https://huggimon.co/api/card/ImTamsi/face)](https://huggimon.co/ImTamsi)
```

- `GET /{username}` — page profil (carte + binder + partage).
- `GET /api/card/{username}` — métadonnées JSON (stats, type, rareté, énergie).
- `GET /api/card/{username}/face` — PNG composé 660×921.
- `GET /api/binder/{username}` — page binder des followers (`?page=` optionnel).

## Stack technique

- **Next.js** — app dans `web/`, déployée sur Vercel ([huggimon.co](https://huggimon.co)).
- **pokemon-cards-css** — effets holo 3D (tilt, glare, shaders par rareté), port React via `@react-spring/web`.
- **gitfut** — inspiration pour le pattern `/{username}` et l’embed README (appliqué au Hub HF plutôt qu’à GitHub).
- **MIT** — code ouvert sur [github.com/Tamsi/huggimon](https://github.com/Tamsi/huggimon).

## Essayer

Va sur [huggimon.co](https://huggimon.co), entre un @username HF, ou ouvre directement [huggimon.co/ImTamsi](https://huggimon.co/ImTamsi). C’est un side project du Build Small Hackathon : fun d’abord, mais le scoring est transparent — le repo est sur GitHub si tu veux challenger la formule ou contribuer.

- Site : huggimon.co
- Repo : github.com/Tamsi/huggimon