18d • General discussion
Nuovo Video: Prompt per Creare Contenuti Social AI con 1 Clic
## Prompt per ricreare "Citazioni 2026"
Crea una web app chiamata **"Citazioni 2026"** con tema scuro/lusso (sfondo nero, accenti dorati, tipografia elegante). L'app serve per caricare immagini di citazioni e rigenerarle con stili diversi usando l'API di **[Kie.ai](https://kie.ai)** (modello **Nano Banana Pro**).
### Struttura principale
**Header fisso** con:
- Titolo "Citazioni 2026" con testo dorato
- Selettore stile globale (dropdown)
- Menu "Azioni" con: Applica stile a tutte, Genera tutte, Traduci tutte
- Pannello Avatar/Mascotte
- Pulsante Archivio
**Griglia principale** di card (massimo 15), con pulsante "+" per aggiungerne di nuove.
### Ogni ImageCard ha:
- Area immagine cliccabile per upload (JPEG, PNG, WebP)
- Pulsante X per rimuovere (visibile al hover)
- **Selettore Stile**: Luxury, Dark, Minimal, Roseo, Nero, Elegante, Moderno, Vintage
- **Selettore Modalità**: Nessuno, 🎨 Illustrazione (aggiunge elementi grafici che rappresentano il significato della citazione)
- **Selettore Ratio**: 1:1, 9:16, 16:9, 4:5
- **Textarea** per note aggiuntive al prompt
- **Pulsante "Genera"**: avvia la generazione con progresso circolare (0-100%)
- **Pulsante Download**: scarica l'immagine generata
- **Pulsante Traduci**: apre popover con 5 lingue (🇮🇹 Italiano, 🇪🇸 Spagnolo, 🇫🇷 Francese, 🇸🇦 Arabo, 🇷🇺 Russo). Cliccando una lingua, rigenera l'immagine traducendo solo il testo mantenendo lo stile.
- Label "✅ Immagine scaricata" dopo il download
### Pannello Avatar
- Upload di un'immagine avatar/mascotte
- Selezione posizione: top-left, top-right, center, bottom-left, bottom-right
- L'avatar viene integrato nella generazione tramite input multi-immagine
### Archivio (Dialog)
- Mostra tutte le immagini generate salvate nel database
- Selezione multipla di immagini
- Pulsante **Scarica** per le immagini selezionate
- Pulsante **Traduci** con popover lingue (stesse 5 lingue) e pulsante "Applica"
- Quando si traduce dall'archivio, viene creato un nuovo placeholder nella griglia principale e si avvia la generazione automatica
### Backend (Lovable Cloud / Supabase)
**Tabella `generated_images`**: id, generated_url, original_url, prompt, style, notes, created_at
**Storage bucket** `generated-images` (pubblico) per upload immagini originali e avatar.
1. **Creazione task**: `POST https://api.kie.ai/api/task`
```json
{
"prompt": "...",
"imageUrls": ["url1", "url2"],
"aspectRatio": "1:1",
"resolution": "4K",
"model": "nano-banana-pro"
}
```
Header: `Authorization: Bearer ${KIE_AI_API_KEY}`
2. **Polling task**: `GET https://api.kie.ai/api/task/{taskId}` ogni 3 secondi fino al completamento. Ritorna lo stato (pending/processing/completed) e la percentuale di progresso.
3. **Download proxy**: scarica l'immagine risultante bypassando CORS, restituendo il blob binario con `Content-Type` corretto (es. `image/png`).
API Key `KIE_AI_API_KEY` salvata come secret nell'edge function.
### Flusso di generazione
1. Upload immagine su storage → ottieni URL pubblico
2. Se c'è avatar, upload anche quello → aggiungi all'array `imageUrls`
3. Costruisci prompt basato su stile + modalità + note + posizione avatar + eventuale lingua traduzione
4. Crea task via edge function → ottieni `taskId`
5. Polling con progresso circolare animato (0-100%)
6. Al completamento: mostra immagine generata, salva in archivio (DB), **download automatico** via proxy edge function
7. Mostra label "✅ Immagine scaricata"
### Download automatico
Usa `fetch` diretto all'edge function (NON `supabase.functions.invoke`) per ottenere il blob binario, crea un `URL.createObjectURL(blob)` e triggera il download via anchor tag programmatico. Dopo 1 secondo, rilascia la memoria con `URL.revokeObjectURL`.
### Design System
- Background: nero profondo
- Accenti: gradiente dorato (`gold-gradient`, `gold-text`)
- Card: `glass-card` con effetto glassmorphism
- Font display per il titolo
- Componenti shadcn/ui personalizzati (Select, Popover, Dialog, Button, Textarea, DropdownMenu)
- Supporto dark mode nativo
---
Testa generazione in 4K
Selettore risoluzione per card
markdown:
# Nano Banana Pro API Documentation
> Generate content using the Nano Banana Pro model
## Overview
This document describes how to use the Nano Banana Pro model for content generation. The process consists of two steps:
1. Create a generation task
2. Query task status and results
## Authentication
All API requests require a Bearer Token in the request header:
```
Authorization: Bearer YOUR_API_KEY
```
Get API Key:
2. Add to request header: `Authorization: Bearer YOUR_API_KEY`
---
## 1. Create Generation Task
### API Information
- **URL**: `POST https://api.kie.ai/api/v1/jobs/createTask`
- **Content-Type**: `application/json`
### Request Parameters
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| model | string | Yes | Model name, format: `nano-banana-pro` |
| input | object | Yes | Input parameters object |
| callBackUrl | string | No | Callback URL for task completion notifications. If provided, the system will send POST requests to this URL when the task completes (success or fail). If not provided, no callback notifications will be sent. Example: `"https://your-domain.com/api/callback"` |
### Model Parameter
The `model` parameter specifies which AI model to use for content generation.
| Property | Value | Description |
|----------|-------|-------------|
| **Format** | `nano-banana-pro` | The exact model identifier for this API |
| **Type** | string | Must be passed as a string value |
| **Required** | Yes | This parameter is mandatory for all requests |
> **Note**: The model parameter must match exactly as shown above. Different models have different capabilities and parameter requirements.
### Callback URL Parameter
The `callBackUrl` parameter allows you to receive automatic notifications when your task completes.
| Property | Value | Description |
|----------|-------|-------------|
| **Purpose** | Task completion notification | Receive real-time updates when your task finishes |
| **Method** | POST request | The system sends POST requests to your callback URL |
| **Timing** | When task completes | Notifications sent for both success and failure states |
| **Content** | Query Task API response | Callback content structure is identical to the Query Task API response |
| **Parameters** | Complete request data | The `param` field contains the complete Create Task request parameters, not just the input section |
| **Optional** | Yes | If not provided, no callback notifications will be sent |
**Important Notes:**
- The callback content structure is identical to the Query Task API response
- The `param` field contains the complete Create Task request parameters, not just the input section
- If `callBackUrl` is not provided, no callback notifications will be sent
### input Object Parameters
#### prompt
- **Type**: `string`
- **Required**: Yes
- **Description**: A text description of the image you want to generate
- **Max Length**: 20000 characters
- **Default Value**: `"Comic poster: cool banana hero in shades leaps from sci-fi pad. Six panels: 1) 4K mountain landscape, 2) banana holds page of long multilingual text with auto translation, 3) Gemini 3 hologram for search/knowledge/reasoning, 4) camera UI sliders for angle focus color, 5) frame trio 1:1-9:16, 6) consistent banana poses. Footer shows Google icons. Tagline: Nano Banana Pro now on Kie AI."`
#### image_input
- **Type**: `array`
- **Required**: No
- **Description**: Please provide the URL of the uploaded file,Input images to transform or use as reference (supports up to 8 images)
- **Max File Size**: 30MB
- **Accepted File Types**: image/jpeg, image/png, image/webp
- **Multiple Files**: Yes
- **Default Value**: `[]`
#### aspect_ratio
- **Type**: `string`
- **Required**: No
- **Description**: Aspect ratio of the generated image
- **Options**:
- `1:1`: 1:1
- `2:3`: 2:3
- `3:2`: 3:2
- `3:4`: 3:4
- `4:3`: 4:3
- `4:5`: 4:5
- `5:4`: 5:4
- `9:16`: 9:16
- `16:9`: 16:9
- `21:9`: 21:9
- `auto`: Auto
- **Default Value**: `"1:1"`
#### resolution
- **Type**: `string`
- **Required**: No
- **Description**: Resolution of the generated image
- **Options**:
- `1K`: 1K
- `2K`: 2K
- `4K`: 4K
- **Default Value**: `"1K"`
#### output_format
- **Type**: `string`
- **Required**: No
- **Description**: Format of the output image
- **Options**:
- `png`: PNG
- `jpg`: JPG
- **Default Value**: `"png"`
### Request Example
```json
{
"model": "nano-banana-pro",
"input": {
"prompt": "Comic poster: cool banana hero in shades leaps from sci-fi pad. Six panels: 1) 4K mountain landscape, 2) banana holds page of long multilingual text with auto translation, 3) Gemini 3 hologram for search/knowledge/reasoning, 4) camera UI sliders for angle focus color, 5) frame trio 1:1-9:16, 6) consistent banana poses. Footer shows Google icons. Tagline: Nano Banana Pro now on Kie AI.",
"image_input": [],
"aspect_ratio": "1:1",
"resolution": "1K",
"output_format": "png"
}
}
```
### Response Example
```json
{
"code": 200,
"msg": "success",
"data": {
"taskId": "281e5b0*********************f39b9"
}
}
```
### Response Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| code | integer | Response status code, 200 indicates success |
| msg | string | Response message |
| data.taskId | string | Task ID for querying task status |
---
## 2. Query Task Status
### API Information
- **URL**: `GET https://api.kie.ai/api/v1/jobs/recordInfo`
- **Parameter**: `taskId` (passed via URL parameter)
### Request Example
```
```
### Response Example
```json
{
"code": 200,
"msg": "success",
"data": {
"taskId": "281e5b0*********************f39b9",
"model": "nano-banana-pro",
"state": "waiting",
"param": "{\"model\":\"nano-banana-pro\",\"input\":{\"prompt\":\"Comic poster: cool banana hero in shades leaps from sci-fi pad. Six panels: 1) 4K mountain landscape, 2) banana holds page of long multilingual text with auto translation, 3) Gemini 3 hologram for search/knowledge/reasoning, 4) camera UI sliders for angle focus color, 5) frame trio 1:1-9:16, 6) consistent banana poses. Footer shows Google icons. Tagline: Nano Banana Pro now on Kie AI.\",\"image_input\":[],\"aspect_ratio\":\"1:1\",\"resolution\":\"1K\",\"output_format\":\"png\"}}",
"resultJson": "{\"resultUrls\":[\"[https://static.aiquickdraw.com/tools/example/1763662100739_DlBXJvdR.png\](https://static.aiquickdraw.com/tools/example/1763662100739_DlBXJvdR.png)"]}",
"failCode": null,
"failMsg": null,
"costTime": null,
"completeTime": null,
"createTime": 1757584164490
}
}
```
### Response Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| code | integer | Response status code, 200 indicates success |
| msg | string | Response message |
| data.taskId | string | Task ID |
| data.model | string | Model name used |
| data.state | string | Task status: `waiting`(waiting), `success`(success), `fail`(fail) |
| data.param | string | Task parameters (JSON string) |
| data.resultJson | string | Task result (JSON string, available when task is success). Structure depends on outputMediaType: `{resultUrls: []}` for image/media/video, `{resultObject: {}}` for text |
| data.failCode | string | Failure code (available when task fails) |
| data.failMsg | string | Failure message (available when task fails) |
| data.costTime | integer | Task duration in milliseconds (available when task is success) |
| data.completeTime | integer | Completion timestamp (available when task is success) |
| data.createTime | integer | Creation timestamp |
---
## Usage Flow
1. **Create Task**: Call `POST https://api.kie.ai/api/v1/jobs/createTask` to create a generation task
2. **Get Task ID**: Extract `taskId` from the response
3. **Wait for Results**:
- If you provided a `callBackUrl`, wait for the callback notification
- If no `callBackUrl`, poll status by calling `GET https://api.kie.ai/api/v1/jobs/recordInfo`
4. **Get Results**: When `state` is `success`, extract generation results from `resultJson`
## Error Codes
| Status Code | Description |
|-------------|-------------|
| 200 | Request successful |
| 400 | Invalid request parameters |
| 401 | Authentication failed, please check API Key |
| 402 | Insufficient account balance |
| 404 | Resource not found |
| 422 | Parameter validation failed |
| 429 | Request rate limit exceeded |
| 500 | Internal server error |
3
3 comments
Nuovo Video: Prompt per Creare Contenuti Social AI con 1 Clic
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