paint-brush
Comment automatiser les flux de production d'images avec l'API Photoshoppar@raymondcamden
2,425 lectures
2,425 lectures

Comment automatiser les flux de production d'images avec l'API Photoshop

par Raymond Camden7m2023/06/30
Read on Terminal Reader

Trop long; Pour lire

Pipedream est une solution low-code/no-code pour la création de workflows génériques. C'est dans le même espace que Microsoft PowerAutomate et Workfront Fusion. Dans cet article, nous vous montrerons comment utiliser Pipedream pour créer un flux de travail basé sur Dropbox.
featured image - Comment automatiser les flux de production d'images avec l'API Photoshop
Raymond Camden HackerNoon profile picture

Récemment, nous avons discuté de la manière dont les développeurs pourraient utiliser l' API Photoshop . Dans cet article, nous avons partagé un simple script Node.js qui appellerait l'une des API à l'aide d'un fichier stocké dans Azure.


C'était simple - obtenir un jeton d'accès, démarrer une tâche d'API avec un document d'entrée, interroger pour l'achèvement, puis vérifier le résultat.


Simple, c'est bien, car cela signifie qu'il est facile à intégrer dans des flux de travail personnalisés. Dans le post d'aujourd'hui, nous allons faire exactement cela.

Notre flux de travail

Commençons par définir ce que notre flux de travail va faire. Imaginons que nous utilisions un fournisseur de stockage en nuage, dans ce cas, Dropbox, pour stocker des photos. Notre flux de travail va surveiller ce dossier et se déclencher lorsque de nouvelles images sont ajoutées.


Lorsque l'image est ajoutée, nous récupérons le fichier et l'envoyons à un point de terminaison qui exécute la fonction "AutoTone" de Lightroom. Cette fonction tente de corriger l'exposition, le contraste et d'autres problèmes sur les photos.


À titre d'exemple (que nous avons volé directement dans la documentation ), voici un avant et un après montrant l'impact des corrections :


Avant et après impact sur l'image.

Une fois l'API terminée, nous stockerons ensuite le résultat dans un autre dossier de Dropbox. Nous pourrions écraser l'original, mais très probablement, les gens voudront les deux copies afin qu'ils puissent faire une dernière vérification pour voir ce qu'ils préfèrent.

La plateforme Workflow

Pour notre workflow, nous utiliserons Pipedream . Pipedream est une solution low-code/no-code pour la création de workflows génériques. C'est dans le même espace que Microsoft PowerAutomate et Workfront Fusion. (Et vous pouvez vous attendre à voir bientôt des exemples de notre part sur ces plateformes également.)


Pipedream aide vraiment les développeurs en rendant les aspects les plus difficiles, voire ennuyeux, d'un projet "plug and play". Par exemple, lors de la définition de ce qui démarre un flux de travail, un déclencheur, Pipedream est livré avec un vaste ensemble de blocs de code prédéfinis.


Lorsque nous commencerons à démontrer comment nous avons construit notre flux de travail, vous le verrez en action. Pipedream a un niveau gratuit, donc ceux d'entre vous qui veulent suivre peuvent le faire après s'être inscrits.


Si vous n'avez jamais utilisé Pipedream auparavant, consultez leur excellente université Pipedream pour une introduction à son fonctionnement. Ils ont aussi d'excellents docs . Enfin, votre sympathique auteur a également écrit sur Pipedream.


Avec cela à l'écart, commençons à construire!

Première étape - Le déclencheur

Les flux de travail Pipedream commencent par un déclencheur qui représente «l'événement» qui devrait lancer notre processus. Pipedream a beaucoup, beaucoup de ces déclencheurs intégrés (et vous pouvez écrire le vôtre), et heureusement, un déclencheur « Nouveau fichier » dans Dropbox est pris en charge :


Configurer le déclencheur Pipedream


Après avoir sélectionné le déclencheur "Nouveau fichier", une interface simple vous est proposée pour le configurer :


Spécification des options pour le déclencheur Dropbox New File


En haut se trouve l'aspect authentification. Ici, vous pouvez connecter Pipedream à votre compte Dropbox. Mieux encore, une fois que vous avez fait cela une fois, vous pouvez réutiliser cette connexion dans plusieurs flux de travail.


Ensuite, notez la valeur Path. Vous pouvez taper ici, et Pipedream tentera de compléter automatiquement en fonction de votre compte, ou entrez simplement un chemin. Nous allons utiliser /PSAPI_Input comme dossier qui attend d'obtenir des images.


Les deux paramètres suivants peuvent être ignorés, mais le paramètre final, Include Link , doit être défini sur vrai. Nous aurons besoin de ce lien pour indiquer à l'API comment récupérer les données.


Voici le déclencheur final configuré pour notre flux de travail :


Dernière étape de déclenchement configurée


Pour récapituler, à ce stade, nous avons configuré le flux de travail pour qu'il se déclenche automatiquement dès qu'un fichier est ajouté à un dossier particulier de notre compte Dropbox.

Deuxième étape - Obtenir une URL de téléchargement

Lorsque l'API Photoshop s'exécute, elle attend au moins deux choses : une URL d'entrée et une URL de sortie. Fondamentalement, où lire son entrée et où stocker le résultat.


Notre entrée va être le nouveau fichier ajouté à Dropbox. Notre sortie va être l'emplacement de l'image corrigée par Lightroom.


Pour cela, nous devons demander à Dropbox de générer une URL spéciale pouvant être utilisée pour stocker des données. Pipedream a beaucoup d'actions Dropbox intégrées mais malheureusement, n'a pas celle-ci en particulier.


Heureusement, Pipedream vous permet de créer une étape avec un code personnalisé où il gère déjà l'authentification pour vous. N'oubliez pas que dans le déclencheur, nous avons spécifié un compte Dropbox existant. Parce que nous avons fait cela, nous pouvons ensuite écrire du code et laisser Pipedream gérer l'authentification.


En consultant l' API Dropbox , nous trouvons le point de terminaison get_temporary_upload_link qui est exactement ce dont nous avons besoin.


Dans Pipedream, nous ajoutons une nouvelle étape et sélectionnons "Utiliser n'importe quelle API Dropbox dans Node.js". Cela nous donne un code passe-partout atteignant un exemple de point de terminaison :

Plus important encore, notez que les informations d'authentification sont automatiquement fournies. Tout ce que nous avons à faire est de modifier le point de terminaison et de définir notre entrée :

Notez que nous utilisons un chemin qui est un dossier différent, /PSAPI_Output . La valeur suivante, ${steps.trigger.event.name} , illustre l'utilisation d'informations antérieures dans notre flux de travail, en particulier le nom de fichier de l'événement qui a déclenché notre flux de travail et le nom du fichier lui-même.


Le code se termine en renvoyant le résultat de l'appel API, qui dans notre cas, va être une URL spéciale que nous pouvons utiliser avec notre appel API.

Troisième étape - Obtenir un jeton d'accès

Dans notre article de blog précédent , nous avons expliqué comment obtenir des informations d'identification pour l'API Photoshop et comment les utiliser ensuite dans le code pour obtenir un jeton d'accès. Dans Pipedream, nous pouvons ajouter une étape à notre flux de travail pour exécuter du code personnalisé.


Vous l'avez vu à l'étape précédente lorsque nous avons atteint l'API Dropbox. Pipedream prend en charge à la fois Node.js et Python, vous avez donc quelques options là-bas. Nous allons ajouter une nouvelle étape de code et la nommer getAccessToken .


Cette étape sera responsable de l'utilisation de nos informations d'identification pour générer un JWT et l'échanger contre un jeton d'accès.


Dans ce billet de blog précédent, le code utilisait le package @adobe/jwt-auth pour simplifier le processus. Cependant, ce package ne fonctionne pas comme une importation ES6 prise en charge par Pipedream. Heureusement, nous pouvons passer à un autre package NPM, jsonwebtoken . Jetons un œil au code :

Donc, quelques choses ici. Tout d'abord, chaque étape de code Node Pipedream utilise un formulaire comme celui-ci :

La fonction run est appelée automatiquement et transmet les données de toutes les étapes précédentes ainsi qu'un gestionnaire ( $ ) pour les autres opérations dont nous n'aurons pas besoin. Fondamentalement, nous mettrons nos importations en haut et notre logique à l'intérieur.


Vous pouvez voir un ensemble de variables copiées depuis l'environnement car, sans surprise, Pipedream nous permet également de définir des variables d'environnement personnalisées.


Le bloc de code suivant génère notre JWT. Il s'agit principalement de passe-partout, mais faites particulièrement attention à la partie jwtOptions . Cette variable, "https://ims-na1.adobelogin.com/s/ent_ccas_sdk": true, est ce qui définit la portée de notre jeton et est nécessaire pour fonctionner avec les API.


Une fois le JWT créé, il peut être envoyé à un point de terminaison Adobe générique pour générer un jeton d'accès. Le dernier élément de logique consiste à renvoyer ce jeton. Si vous vous souvenez de l'étape précédente, tout ce que nous renvoyons peut être utilisé plus tard. Vous le verrez bientôt en action.

Étape 4 - Appel de l'API Lightroom Autotone

Maintenant, il est temps de se mettre au travail. Notre déclencheur nous a donné un lien vers la nouvelle image. L'étape de code suivante a généré un lien nous permettant de télécharger le résultat final. Nous avons alors obtenu un jeton d'accès. Nous avons tout ce qu'il faut pour démarrer le processus.


Encore une fois, nous allons ajouter une étape Node.js à notre workflow. Le voici en action.

L' API Autotone nécessite quelques paramètres, dans ce cas, une valeur d'entrée et de sortie. Dans notre cas, nous transmettons le lien du déclencheur et l'URL de téléchargement spéciale générée précédemment.


Et c'est tout! Le résultat de cet appel est un lien vers le travail auquel nous retournons à la fin.

Cinquième étape - Ne rien faire

Ok, pas exactement rien , mais voici une question intéressante. L'ensemble de ce flux de travail s'exécute automatiquement, sans interaction humaine. L'étape précédente lance un processus qui, une fois terminé, enregistrera le résultat dans Dropbox. Avons-nous besoin de faire autre chose ? Pas vraiment.


Il est tout à fait possible que l'API échoue pour une raison quelconque. Il est possible que quelque chose d'autre se passe mal aussi. Il est également possible que nous souhaitions alerter quelqu'un du changement, peut-être par e-mail. Honnêtement, c'est à vous de décider.


Dans notre exemple de flux de travail, nous avons décidé de simplement vérifier le travail et d'attendre qu'il se termine. Voici cette étape de code, et elle est assez similaire à notre article de blog précédent. Nous vérifions le travail, attendons et vérifions à nouveau.

C'est là que nous terminons le flux de travail, mais nous pourrions, et probablement devrions, ajouter une logique pour vérifier le résultat du travail et faire quelque chose. Peut-être que sur un bon résultat, on ne fait rien, mais en cas d'erreur, on envoie alors un mail. (Et au fait, Pipedream rend l'envoi d'e-mails ridiculement facile.)


Ce qui est bien, c'est que nous pouvons décider cela plus tard.


Une fonctionnalité vraiment intéressante de Pipedream est qu'il permet de vérifier facilement quand les flux de travail ont été exécutés. Par exemple, voici une liste des exécutions passées :


Liste des précédentes exécutions de workflow Pipedream


Les erreurs que vous y voyez viennent du fait que j'ai joué avec l'API et compris comment cela fonctionnait. Vous pouvez également cliquer sur l'un d'eux et voir les données qui y circulent.

Le résultat

Avec le flux de travail en place, nous avons téléchargé une nouvelle image dans un dossier Dropbox, regardé le flux de travail se déclencher dans un onglet ouvert et, une fois terminé, vérifié le résultat. Voici avant :


Cayenne, mon gros chien puant

Et voici après :


Cayenne après l'appel API, plus beau, toujours puant.

Le résultat est plus net, et absolument une amélioration ! Vous pouvez créer votre propre copie de mon workflow ici : https://pipedream.com/new?h=tch_3xxfJA . Si vous souhaitez en savoir plus, consultez nos documents et partagez ce que vous avez construit !


Également publié ici