AI Whiteboard
Una lavagna a canvas infinito dove puoi creare visivamente, connettere e iterare su immagini generate con AI. Costruita con React e alimentata da multipli provider AI.
Cosa Fa
Pensala come un playground visuale per la generazione di immagini AI:
- Trascina immagini sul canvas (drag & drop o upload)
- Crea nodi prompt con descrizioni testuali
- Collega prompt a immagini per generazione context-aware (img2img)
- Genera nuove immagini usando modelli AI
- Itera visivamente - vedi le relazioni tra prompt e output
Il canvas infinito ti permette di zoomare, pannare e organizzare il tuo flusso creativo spazialmente.
Funzionalità
- Canvas infinito con zoom e pan
- Drag & drop immagini direttamente sul canvas
- Connessioni visuali che mostrano relazioni prompt → immagine
- Multipli provider AI:
- Google Gemini 2.5 Flash (via OpenRouter)
- Modelli Replicate (Seedream 4.0)
- API Gemini diretta
- Editing image-to-image - usa immagini esistenti come contesto
- Persistenza sessione - il tuo canvas si salva automaticamente
- Nessun account richiesto - sessioni salvate lato server
Stack Tecnologico
Frontend
- React 19 con TypeScript
- Vite per sviluppo velocissimo
- Zustand per state management
- Tailwind CSS per lo styling
Backend
- Express.js API server
- Storage sessioni basato su file
- PM2 per process management
- Cleanup automatico sessioni (scadenza 30 giorni)
Integrazione AI
- OpenRouter come gateway API
- Gemini 2.5 Flash per generazione immagini
- Replicate per modelli alternativi
- Gestione immagini Base64 per upload fluidi
Come È Stato Costruito
Questo progetto è stato costruito in un solo giorno usando Claude Code. Il workflow:
- Partito da un export di Google AI Studio (app React base)
- Espanso il sistema canvas con l’aiuto di Claude
- Aggiunto supporto multi-provider iterativamente
- Costruito il backend Express per la persistenza
- Deployato su un sottodominio Virtualmin
Il file CLAUDE.md nel repo documenta l’intera architettura per future sessioni con Claude.
Perché L’ho Costruito
La maggior parte degli strumenti di generazione immagini AI sono lineari - digiti un prompt, ottieni un’immagine, ripeti. Volevo qualcosa di più spaziale e iterativo:
- Vedere tutti i miei esperimenti contemporaneamente
- Capire le relazioni tra prompt e output
- Usare generazioni precedenti come contesto per nuove
- Non perdere il mio lavoro quando chiudo il browser
La metafora del canvas infinito rende facile esplorare variazioni e tenere tutto organizzato.
← Torna ai progetti