1.2.4 Automazione tramite connettori

Ora inizierai a utilizzare i connettori predefiniti di Workfront Fusion per Photoshop e connetterai la richiesta Firefly Text-2-Image e le richieste Photoshop in un unico scenario.

1.2.4.1 Aggiorna variabili

Prima di continuare con la configurazione del connettore, è necessario aggiungere le seguenti variabili al modulo Initialize Constants.

Torna al primo nodo, seleziona Inizializza costanti, quindi scegli Aggiungi elemento per ciascuna di queste variabili.

Puoi trovare le variabili tornando a Postman e aprendo Variabili di ambiente.

Copiate questi valori in Workfront Fusion e aggiungete un nuovo elemento per ciascuna di queste 4 variabili.

Lo schermo dovrebbe essere simile al seguente. Selezionare OK.

1.2.4.2 Attiva lo scenario utilizzando un webhook

Finora lo scenario è stato eseguito manualmente per essere testato. Aggiorniamo ora lo scenario con un webhook, in modo che possa essere attivato da un ambiente esterno.

Seleziona +, cerca webhook, quindi seleziona Webhook.

Seleziona WebHook personalizzato.

Trascina il modulo Webhook personalizzato all'inizio dello scenario. Quindi, seleziona l'icona orologio e trascinala nel modulo Webhook personalizzato.

Dovresti vedere questo. Quindi, trascina il punto rosso del primo modulo verso il punto viola del secondo modulo.

Dovresti vedere questo. Fare quindi clic sul modulo Webhook personalizzato.

Fai clic su Aggiungi.

Imposta Nome webhook su --aepUserLdap-- - Firefly + Photoshop Webhook. Fai clic su Salva.

L’URL del webhook è ora disponibile. Fai clic su Copia indirizzo negli Appunti per copiare l'URL.

Apri Postman e aggiungi una nuova cartella nella raccolta FF - Firefly Services Tech Insiders.

Denomina la cartella --aepUserLdap-- - Workfront Fusion.

Nella cartella appena creata, seleziona i tre punti … e seleziona Aggiungi richiesta.

Imposta il tipo di metodo su POST e incolla l'URL del webhook nella barra degli indirizzi.

È necessario inviare un corpo personalizzato, in modo che gli elementi della variabile possano essere forniti da un’origine esterna allo scenario Workfront Fusion.

Vai a Body e seleziona raw.

Incolla il testo seguente nel corpo della richiesta. Seleziona Invia.

{
    "psdTemplate": "citisignal-fiber.psd",
    "xlsFile": "placeholder",
    "prompt":"misty meadows",
    "cta": "Buy this now!",
    "button": "Click here to buy!"
}

In Workfront Fusion, sul webhook personalizzato viene visualizzato un messaggio con il seguente messaggio: Determinato correttamente.

Connettore Adobe Firefly 1.2.4.3

Fai clic sull'icona + per aggiungere un nuovo modulo.

Immettere il termine di ricerca Adobe Firefly e selezionare Adobe Firefly.

Seleziona Genera un'immagine.

Fai clic sul modulo Adobe Firefly per aprirlo, quindi fai clic su Aggiungi per creare una nuova connessione.

Compila i campi seguenti:

Puoi trovare ID client e Segreto client del progetto Adobe I/O qui.

Dopo aver compilato tutti i campi, fai clic su Continua. La connessione verrà quindi convalidata automaticamente.

Selezionare quindi la variabile prompt fornita allo scenario dal webhook personalizzato in ingresso.

Impostare Model version prompt su image4 standard. Fai clic su OK.

Fai clic su Salva per salvare le modifiche, quindi fai clic su Esegui una volta per verificare la configurazione.

Vai a Postman, verifica la richiesta nella richiesta, quindi fai clic su Invia.

Dopo aver fatto clic su Invia, torna a Workfront Fusion e fai clic sull'icona a forma di bolla nel modulo Adobe Firefly per verificare i dettagli.

Vai in OUTPUT a Dettagli > url per trovare l'URL dell'immagine generata da Adobe Firefly.

Copia l’URL e trasmettilo nel browser. Ora dovresti vedere un'immagine che rappresenta il prompt inviato dalla richiesta di Postman, in questo caso prati nebbiosi.

1.2.4.2 Cambia lo sfondo del file PSD

Ora aggiornerai lo scenario per renderlo più intelligente utilizzando più connettori preconfigurati. Collegherai inoltre l’output da Firefly a Photoshop, in modo che l’immagine di sfondo del file PSD cambi dinamicamente utilizzando l’output dell’azione Genera immagine di Firefly.

Dovresti vedere questo. Passa il puntatore del mouse sul modulo Adobe Firefly e fai clic sull'icona +.

Nel menu Cerca, immetti Photoshop e quindi fai clic sull'azione Adobe Photoshop.

Selezionare Applica modifiche PSD.

Dovresti vedere questo. Fai clic su Aggiungi per aggiungere una nuova connessione ad Adobe Photoshop.

Configura la connessione come segue:

Fai clic su Continua.

Per trovare il ID client e il Segreto client, vai a https://developer.adobe.com/console/home e apri il progetto Adobe I/O, denominato --aepUserLdap-- One Adobe tutorial. Vai a OAuth Server-to-Server per trovare l'ID client e il segreto client. Copiare tali valori e incollarli nella configurazione della connessione in Workfront Fusion.

Dopo aver fatto clic su Continua, verrà visualizzata brevemente una finestra popup durante la verifica delle credenziali. Una volta fatto, dovresti vedere questo.

È ora necessario immettere la posizione del file PSD con cui si desidera utilizzare Fusion. Per Archiviazione, selezionare Azure e per Percorso file, immettere {{1.AZURE_STORAGE_URL}}/{{1.AZURE_STORAGE_CONTAINER}}/{{1.AZURE_STORAGE_SAS_READ}}. Posizionare il cursore accanto al secondo /. Quindi, controlla le variabili disponibili e scorri verso il basso per trovare la variabile psdTemplate. Fai clic sulla variabile psdTemplate per selezionarla.

Dovresti vedere questo.

Scorri fino in fondo fino a visualizzare Livelli. Fare clic su Aggiungi elemento.

Dovresti vedere questo. Ora devi immettere il nome del livello nel modello Photoshop PSD utilizzato come sfondo del file.

Nel file citisignal-fiber.psd, troverai il livello utilizzato per lo sfondo. In questo esempio, il livello è denominato 2048x2048-background.

Incolla il nome 2048x2048-background nella finestra di dialogo di Workfront Fusion.

Scorri verso il basso fino a visualizzare Input. Ora è necessario definire cosa deve essere inserito nel livello di sfondo. In questo caso, è necessario selezionare l'output del modulo Adobe Firefly, che contiene l'immagine generata dinamicamente.

Per Archiviazione, selezionare Esterna. Per Percorso file, è necessario copiare e incollare la variabile {{XX.details[].url}} dall'output del modulo Adobe Firefly, ma è necessario sostituire XX nella variabile con il numero di sequenza del modulo Adobe Firefly, che in questo esempio è 5.

Quindi scorri verso il basso fino a visualizzare Modifica. Imposta Modifica su Sì e Tipo su Livello. Fai clic su Aggiungi.

Dovresti vedere questo. Successivamente, devi definire l’output dell’azione. Fai clic su Aggiungi elemento in output.

Seleziona Azure per Archiviazione, incolla {{1.AZURE_STORAGE_URL}}/{{1.AZURE_STORAGE_CONTAINER}}/citisignal-fiber-replacedbg.psd{{1.AZURE_STORAGE_SAS_WRITE}} in Posizione file e seleziona vnd.adobe.photoshop in Tipo. Fare clic per abilitare Mostra impostazioni avanzate.

In Impostazioni avanzate, selezionare Sì per sovrascrivere i file con lo stesso nome.
Fai clic su Aggiungi.

Dovresti avere questo. Fai clic su OK.

Fai clic su Salva per salvare le modifiche, quindi fai clic su Esegui una volta per verificare la configurazione.

Vai a Postman, verifica la richiesta nella richiesta, quindi fai clic su Invia.

Dovresti vedere questo. Fai clic sul fumetto nel modulo Adobe Photoshop - Applica modifiche PSD.

È ora possibile vedere che un nuovo file PSD è stato generato correttamente e archiviato nell'account di archiviazione di Microsoft Azure.

1.2.4.3 Modificare i livelli di testo del file PSD

Passa il puntatore del mouse sul modulo Adobe Photoshop - Applica modifiche PSD e fai clic sull'icona +.

Seleziona Adobe Photoshop.

Selezionare Modifica livelli di testo.

Dovresti vedere questo. Selezionare innanzitutto la connessione Adobe Photoshop già configurata in precedenza, che deve essere denominata --aepUserLdap-- Adobe I/O.

Per il file di input, selezionare Azure per Archiviazione file di input e assicurarsi di selezionare l'output della richiesta precedente, Adobe Photoshop - Applica modifiche PSD, che è possibile definire come segue: {{XX.data[].`_links`.renditions[].href}} (sostituire XX con il numero di sequenza del modulo precedente Adobe Photoshop - Applica modifiche PSD).

Fare clic su +Aggiungi elemento in Livelli per iniziare ad aggiungere i livelli di testo da aggiornare.

È necessario apportare due modifiche. È necessario aggiornare il testo di CTA e il testo del pulsante nel file citisignal-fiber.psd.

Per trovare i nomi dei livelli, apri il file citisignal-fiber.psd. Nel file, noterai che il livello contenente il call to action è denominato 2048x2048-cta.

Nel file citisignal-fiber.psd, noterai inoltre che il livello contenente il call to action è denominato 2048x2048-button-text.

Devi innanzitutto configurare le modifiche da apportare al livello 2048x2048-cta. Immetti il nome 2048x2048-cta in Nome nella finestra di dialogo.

Scorri verso il basso fino a visualizzare Testo > Contenuto. Selezionare la variabile cta dal payload del webhook. Fai clic su Aggiungi.

Dovresti vedere questo. Fai clic su +Aggiungi elemento in Livelli per iniziare ad aggiungere il livello di testo successivo da aggiornare.

Immetti il nome 2048x2048-button-text in Name nella finestra di dialogo.

Scorri verso il basso fino a visualizzare Testo > Contenuto. Seleziona la variabile button dal payload del webhook. Fai clic su Aggiungi.

Dovresti vedere questo.

Scorri verso il basso fino a visualizzare Output. Per Archiviazione, selezionare Azure. Per Percorso file, immettere il percorso seguente. Si noti l'aggiunta della variabile {{timestamp}} al nome file utilizzata per garantire che ogni file generato abbia un nome univoco. Impostare inoltre Type su vnd.adobe.photoshop.

{{1.AZURE_STORAGE_URL}}/{{1.AZURE_STORAGE_CONTAINER}}/citisignal-fiber-changed-text-{{timestamp}}.psd{{1.AZURE_STORAGE_SAS_WRITE}}

Imposta Type su vnd.adobe.photoshop. Fai clic su OK.

Fai clic su Salva per salvare le modifiche.

1.2.4.4 risposta webhook

Dopo aver applicato queste modifiche al tuo file Photoshop, ora devi configurare una risposta webhook che verrà rimandata a qualsiasi applicazione abbia attivato questo scenario.

Passa il puntatore del mouse sul modulo Adobe Photoshop - Modifica livelli di testo e fai clic sull'icona +.

Cerca webhooks e seleziona Webhook.

Seleziona Risposta webhook.

Dovresti vedere questo. Incolla il payload seguente in Body.

{
    "newPsdTemplate": ""
}

Copiare e incollare la variabile {{XX.data[]._links.renditions[].href}} e sostituire XX con il numero di sequenza dell'ultimo modulo Adobe Photoshop - Modifica livelli di testo, che in questo caso è 7.

Abilitare la casella di controllo per Mostra impostazioni avanzate, quindi fare clic su Aggiungi elemento.

Nel campo Chiave immettere Content-Type. Nel campo Valore immettere application/json. Fai clic su Aggiungi.

Dovresti avere questo. Fai clic su OK.

Fare clic su Allineamento automatico.

Dovresti vedere questo. Fai clic su Salva per salvare le modifiche, quindi fai clic su Esegui una volta per verificare lo scenario.

Torna a Postman e fai clic su Invia. Il prompt utilizzato è nebbiosi prati.

Lo scenario verrà quindi attivato e, dopo un certo periodo di tempo, in Postman verrà visualizzata una risposta contenente l’URL del file PSD appena creato.

Come promemoria: una volta che lo scenario è stato eseguito in Workfront Fusion, potrai visualizzare le informazioni su ciascun modulo facendo clic sulla bolla sopra ogni modulo.

Utilizzando Azure Storage Explorer, è quindi possibile trovare e aprire il file PSD appena creato facendo doppio clic su di esso in Azure Storage Explorer.

Il file dovrebbe quindi essere simile al seguente, con lo sfondo sostituito da uno sfondo con prati nebbiosi.

Se esegui nuovamente lo scenario e invii una nuova richiesta da Postman utilizzando un prompt diverso, vedrai quanto lo scenario è diventato semplice e riutilizzabile. In questo esempio, il nuovo prompt utilizzato è deserto soleggiato.

E un paio di minuti dopo, è stato generato un nuovo file PSD con un nuovo sfondo.

Passaggi successivi

Vai a 1.2.3 Frame.io e Workfront Fusion

Torna a Automazione dei flussi di lavoro Creative con Workfront Fusion

Torna a Tutti i moduli