15d • General discussion
PROMPT PER CREARE LA WEB APP CLONA CONTENUTI
Crea una webapp React + TypeScript + Tailwind + shadcn/ui chiamata "Carousel Rebrander" che permette di rebrandizzare automaticamente caroselli Instagram applicando un'identità visiva personalizzata.
## SCOPO PRINCIPALE
L'utente carica immagini (drag & drop o click), le vede in anteprima, può definire una di esse come "cover" (con logo personalizzato), applicare note di modifica a tutte le immagini, e avviare l'elaborazione in batch. Il sistema processa le immagini con AI per adattarle al brand.
## FUNZIONALITÀ CHIAVE
### 1. Upload Immagini
- Drag & drop multiplo o selezione file
- Anteprima thumbnail per ogni immagine caricata
- Possibilità di rimuovere singole immagini
- Ordinamento drag & drop delle immagini
### 2. Gestione Cover
- Toggle "Questa è la cover" su ogni immagine
- Quando attivo, mostra un upload aggiuntivo per il logo della cover
- Il logo della cover ha priorità rispetto al logo globale
### 3. Note di Modifica
- Textarea per inserire istruzioni personalizzate
- Pulsante "Applica a tutte" per copiare le note su tutte le immagini
- Ogni immagine può avere le proprie note individuali
### 4. Elaborazione Batch
- Pulsante "Genera Tutto" per avviare l'elaborazione
- Max 3 job paralleli
- Barra di progresso per ogni immagine
- Stati: idle, queued, processing, done, failed
- Possibilità di riprovare immagini fallite
### 5. Modalità di Elaborazione
- **Auto**: Lascia decidere all'AI (traduce, cambia colori, adatta al brand)
- **Fit Only**: Solo conversione 3:4 senza modifiche
- **Rebrand**: Forza traduzione, cambio colori, applicazione brand
### 6. Impostazioni Globali
- Colore brand (color picker)
- Formato output: PNG o JPG
- Qualità JPG (slider 1-100)
- Sfondo testo: nero o bianco
- Upload logo globale
### 7. Archivio
- Pagina "Archivio" con tutte le immagini generate
- Visualizzazione in griglia con data e nome file
- Download singolo
- Cancellazione
### 8. Scraping Instagram
- Input per URL post/carosello Instagram
- Integrazione con API di scraping per estrarre immagini
- Download automatico delle immagini estratte
- Le immagini scaricate vanno direttamente nell'area di upload
## DESIGN SYSTEM
- Tema scuro elegante, minimalista
- Colore primario personalizzabile (default verde)
- Font moderno e pulito
- Card con bordi sottili e ombre morbide
- Transizioni fluide
- Layout responsive
## TECNOLOGIE
- React 18 + TypeScript
- Tailwind CSS + shadcn/ui
- Supabase (storage, database, edge functions)
- AI Image Processing via API esterna
## DATABASE
Tabella `generated_images`:
- id (uuid, primary key)
- original_url (text)
- generated_url (text)
- file_name (text)
- created_at (timestamp)
## EDGE FUNCTIONS
1. `kie-ai-process`: Gestisce la comunicazione con l'API AI per l'elaborazione immagini
2. `apify-scrape`: Gestisce lo scraping di Instagram tramite API esterna
## NOTE IMPLEMENTAZIONE
- Il logo della cover ha priorità assoluta: se una card è cover e ha un logo specifico, usa quello; altrimenti fallback al logo globale
- Le immagini elaborate vengono salvate in storage e il link pubblico restituito
- Il download automatico delle immagini scrapate deve avvenire immediatamente dopo l'estrazione
- Se il testo nell'immagine è in inglese, l'AI deve tradurlo in italiano mantenendo font, dimensione e posizione
0:49
0
0 comments
PROMPT PER CREARE LA WEB APP CLONA CONTENUTI
powered by
skool.com/ai-vision-6487
Una community italiana dedicata a padroneggiare l’automazione con l’AI e gli AI Agent. Impara, collabora e ottimizza i tuoi workflow!
Suggested communities
Powered by