paint-brush
So automatisieren Sie Bild-Workflows mit der Photoshop-APIvon@raymondcamden
2,008 Lesungen
2,008 Lesungen

So automatisieren Sie Bild-Workflows mit der Photoshop-API

von Raymond Camden7m2023/06/30
Read on Terminal Reader
Read this story w/o Javascript

Zu lang; Lesen

Pipedream ist eine Low-Code/No-Code-Lösung zum Erstellen generischer Workflows. Es befindet sich im selben Bereich wie Microsoft PowerAutomate und Workfront Fusion. In diesem Beitrag zeigen wir Ihnen, wie Sie mit Pipedream einen Dropbox-basierten Workflow erstellen.
featured image - So automatisieren Sie Bild-Workflows mit der Photoshop-API
Raymond Camden HackerNoon profile picture

Kürzlich haben wir darüber gesprochen, wie Entwickler die Photoshop-API nutzen können. In diesem Beitrag haben wir ein einfaches Node.js-Skript geteilt, das eine der APIs mithilfe einer in Azure gespeicherten Datei aufruft.


Es war ganz einfach: Holen Sie sich ein Zugriffstoken, starten Sie einen API-Job mit einem Eingabedokument, fragen Sie den Abschluss ab und überprüfen Sie dann das Ergebnis.


Einfach ist jedoch gut, da es sich leicht in benutzerdefinierte Arbeitsabläufe integrieren lässt. Im heutigen Beitrag werden wir genau das tun.

Unser Workflow

Beginnen wir damit, zu definieren, was unser Workflow tun soll. Stellen Sie sich vor, wir nutzen einen Cloud-Speicheranbieter, in diesem Fall Dropbox, zum Speichern von Fotos. Unser Workflow überwacht diesen Ordner und löst aus, wenn neue Bilder hinzugefügt werden.


Wenn das Bild hinzugefügt wird, greifen wir auf die Datei zu und senden sie an einen Endpunkt, auf dem die Lightroom-Funktion „AutoTone“ ausgeführt wird. Diese Funktion versucht, Belichtung, Kontrast und andere Probleme in Fotos zu korrigieren.


Als Beispiel (das wir direkt aus den Dokumenten geklaut haben) sehen Sie hier ein Vorher und Nachher, das die Auswirkungen der Korrekturen zeigt:


Vor und nach der Auswirkung auf das Bild.

Sobald die API fertig ist, speichern wir das Ergebnis in einem anderen Ordner in Dropbox. Wir könnten das Original überschreiben, aber höchstwahrscheinlich möchten die Leute beide Kopien, damit sie abschließend prüfen können, welche sie bevorzugen.

Die Worfklow-Plattform

Für unseren Workflow verwenden wir Pipedream . Pipedream ist eine Low-Code/No-Code-Lösung zum Erstellen generischer Workflows. Es befindet sich im selben Bereich wie Microsoft PowerAutomate und Workfront Fusion. (Und Sie können damit rechnen, bald auch auf diesen Plattformen Beispiele von uns zu sehen.)


Pipedream hilft Entwicklern wirklich, indem es die schwierigeren oder sogar langweiligen Aspekte eines Projekts „Plug-and-Play“ macht. Wenn Sie beispielsweise definieren, was einen Workflow startet, einen Auslöser, verfügt Pipedream über einen riesigen Satz vorgefertigter Codeblöcke.


Wenn wir beginnen zu demonstrieren, wie wir unseren Workflow aufgebaut haben, werden Sie dies in Aktion sehen. Pipedream verfügt über ein kostenloses Kontingent, sodass diejenigen unter Ihnen, die mitlesen möchten, dies nach der Anmeldung tun können.


Wenn Sie Pipedream noch nie verwendet haben, schauen Sie sich die hervorragende Pipedream University an, um eine Einführung in die Funktionsweise zu erhalten. Sie haben auch ausgezeichnete Dokumente . Schließlich hat Ihr freundlicher Autor hier auch über Pipedream geschrieben .


Wenn das erledigt ist, fangen wir mit dem Bauen an!

Schritt eins – Der Auslöser

Pipedream-Workflows beginnen mit einem Auslöser, der das „Ereignis“ darstellt, das unseren Prozess starten soll. Pipedream hat viele, viele dieser Trigger integriert (und Sie können Ihre eigenen schreiben), und glücklicherweise wird ein „Neue Datei“-Trigger in Dropbox unterstützt:


Einrichten des Pipedream-Triggers


Nachdem Sie den Auslöser „Neue Datei“ ausgewählt haben, erhalten Sie eine einfache Schnittstelle zum Konfigurieren:


Angeben von Optionen für den Dropbox-Auslöser „Neue Datei“.


An oberster Stelle steht der Authentifizierungsaspekt. Hier können Sie Pipedream mit Ihrem Dropbox-Konto verbinden. Und das Beste: Sobald Sie dies einmal getan haben, können Sie diese Verbindung in mehreren Arbeitsabläufen wiederverwenden.


Notieren Sie sich als Nächstes den Pfadwert. Sie können hier etwas eingeben, und Pipedream versucht, basierend auf Ihrem Konto eine automatische Vervollständigung durchzuführen, oder geben Sie einfach einen Pfad ein. Wir werden /PSAPI_Input als Ordner verwenden, der Bilder abrufen soll.


Die nächsten beiden Einstellungen können ignoriert werden, aber die letzte Einstellung, Include Link , sollte auf true gesetzt werden. Wir benötigen diesen Link, damit wir der API mitteilen können, wie die Daten abgerufen werden sollen.


Hier ist der endgültig konfigurierte Auslöser für unseren Workflow:


Endgültig konfigurierter Triggerschritt


Um es noch einmal zusammenzufassen: An dieser Stelle haben wir den Workflow so konfiguriert, dass er automatisch ausgelöst wird, sobald eine Datei zu einem bestimmten Ordner in unserem Dropbox-Konto hinzugefügt wird.

Schritt zwei – Holen Sie sich eine Upload-URL

Wenn die Photoshop-API ausgeführt wird, erwartet sie mindestens zwei Dinge – eine Eingabe-URL und eine Ausgabe-URL. Grundsätzlich geht es darum, wo die Eingabe gelesen und das Ergebnis gespeichert werden soll.


Unsere Eingabe wird die neue Datei sein, die zu Dropbox hinzugefügt wird. Unsere Ausgabe wird die Position des von Lightroom korrigierten Bildes sein.


Um dies zu unterstützen, müssen wir Dropbox bitten, eine spezielle URL zu generieren, die zum Speichern von Daten verwendet werden kann. Pipedream verfügt über viele integrierte Dropbox-Aktionen, leider jedoch nicht über diese spezielle Aktion.


Glücklicherweise können Sie mit Pipedream einen Schritt mit benutzerdefiniertem Code erstellen, bei dem die Authentifizierung bereits für Sie durchgeführt wird. Denken Sie daran, dass wir im Trigger ein vorhandenes Dropbox-Konto angegeben haben. Da wir dies getan haben, können wir dann Code schreiben und Pipedream die Authentifizierung übernehmen lassen.


Indem wir die Dropbox-API konsultieren, finden wir den Endpunkt get_temporary_upload_link , der genau das ist, was wir brauchen.


In Pipedream fügen wir einen neuen Schritt hinzu und wählen „Beliebige Dropbox-API in Node.js verwenden“ aus. Dadurch erhalten wir Mustercode, der einen Beispielendpunkt erreicht:

Am wichtigsten ist, dass die Authentifizierungsinformationen automatisch bereitgestellt werden. Dann müssen wir nur noch den Endpunkt bearbeiten und unsere Eingabe festlegen:

Beachten Sie, dass wir einen Pfad verwenden, der ein anderer Ordner ist, /PSAPI_Output . Der Wert danach, ${steps.trigger.event.name} , demonstriert die Verwendung von Informationen von früher in unserem Workflow, insbesondere dem Dateinamen des Ereignisses, das unseren Workflow ausgelöst hat, und dem Namen der Datei selbst.


Der Code endet mit der Rückgabe des Ergebnisses des API-Aufrufs, bei dem es sich in unserem Fall um eine spezielle URL handelt, die wir mit unserem API-Aufruf verwenden können.

Schritt drei – Erhalten eines Zugriffstokens

In unserem vorherigen Blogbeitrag haben wir besprochen, wie Sie Anmeldeinformationen für die Photoshop-API erhalten und diese dann im Code verwenden, um ein Zugriffstoken zu erhalten. In Pipedream können wir unserem Workflow einen Schritt hinzufügen, um benutzerdefinierten Code auszuführen.


Das haben Sie im vorherigen Schritt gesehen, als wir auf die Dropbox-API zugegriffen haben. Pipedream unterstützt sowohl Node.js als auch Python, sodass Ihnen dort einige Optionen zur Verfügung stehen. Wir werden einen neuen Codeschritt hinzufügen und ihn getAccessToken nennen.


In diesem Schritt wird es darum gehen, mithilfe unserer Anmeldeinformationen ein JWT zu generieren und dieses gegen ein Zugriffstoken auszutauschen.


In diesem vorherigen Blogbeitrag nutzte der Code das Paket @adobe/jwt-auth , um den Prozess zu vereinfachen. Dieses Paket funktioniert jedoch nicht als ES6-Import, den Pipedream unterstützt. Glücklicherweise können wir auf ein anderes NPM-Paket umsteigen, jsonwebtoken . Werfen wir einen Blick auf den Code:

Also ein paar Dinge hier. Erstens verwendet jeder Node Pipedream-Codeschritt ein Formular wie dieses:

Die run Funktion wird automatisch aufgerufen und übergibt Daten aus allen vorherigen Schritten sowie einen Handler ( $ ) für andere Vorgänge, die wir nicht benötigen. Im Grunde werden wir unsere Importe oben platzieren und unsere Logik hinein.


Sie können sehen, wie eine Reihe von Variablen aus der Umgebung kopiert werden, da wir mit Pipedream – was nicht überraschend ist – auch benutzerdefinierte Umgebungsvariablen definieren können.


Der nächste Codeblock generiert unser JWT. Dabei handelt es sich größtenteils um Standardtexte, aber achten Sie besonders auf den jwtOptions Teil. Diese Variable "https://ims-na1.adobelogin.com/s/ent_ccas_sdk": true, legt den Bereich für unser Token fest und ist für die Arbeit mit den APIs erforderlich.


Nachdem das JWT erstellt wurde, kann es an einen generischen Adobe-Endpunkt gesendet werden, um ein Zugriffstoken zu generieren. Der letzte Teil der Logik besteht darin, dieses Token zurückzugeben. Wenn Sie sich an den vorherigen Schritt erinnern, kann alles, was wir zurückgeben, später verwendet werden. Sie werden dies bald in Aktion sehen.

Schritt vier – Aufrufen der Lightroom Autotone-API

Jetzt ist es an der Zeit, zur Sache zu kommen. Unser Auslöser gab uns einen Link zum neuen Bild. Der nächste Codeschritt generierte einen Link, über den wir das Endergebnis hochladen konnten. Wir haben dann einen Zugangstoken bekommen. Wir haben alles, was Sie brauchen, um den Prozess zu starten.


Wir werden unserem Workflow noch einmal einen Node.js-Schritt hinzufügen. Hier ist es in Aktion.

Die Autotone-API erfordert einige Parameter, in diesem Fall einen Eingabe- und Ausgabewert. In unserem Fall übergeben wir den Link vom Trigger und die zuvor generierte spezielle Upload-URL.


Und das ist es! Das Ergebnis dieses Aufrufs ist ein Link zum Job, den wir am Ende zurückgeben.

Schritt fünf – Nichts tun

Ok, nicht gerade nichts , aber hier ist eine interessante Frage. Dieser gesamte Arbeitsablauf läuft automatisch und ohne menschliche Interaktion ab. Der vorherige Schritt startet einen Prozess, der nach Abschluss das Ergebnis in Dropbox speichert. Müssen wir noch etwas tun? Nicht wirklich.


Es ist durchaus möglich, dass die API aus irgendeinem Grund ausfällt. Es ist möglich, dass auch noch etwas anderes schief geht. Es ist auch möglich, dass wir jemanden über die Änderung informieren möchten, vielleicht per E-Mail. Ehrlich gesagt liegt es an Ihnen.


In unserem Beispielworkflow haben wir uns entschieden, den Job einfach zu überprüfen und zu warten, bis er abgeschlossen ist. Hier ist dieser Codeschritt, der unserem vorherigen Blogbeitrag ziemlich ähnlich ist. Wir prüfen den Auftrag, warten und prüfen ihn erneut.

Hier beenden wir den Workflow, aber wir könnten und sollten wahrscheinlich auch Logik hinzufügen, um das Ergebnis des Jobs zu überprüfen und etwas zu unternehmen. Bei einem guten Ergebnis unternehmen wir vielleicht nichts, aber bei einem Fehler senden wir dann eine E-Mail. (Und übrigens macht Pipedream das Versenden von E-Mails unglaublich einfach.)


Das Schöne ist jedoch, dass wir das später entscheiden können.


Ein wirklich nettes Feature von Pipedream ist, dass es eine einfache Überprüfung ermöglicht, wann Workflows ausgeführt wurden. Hier ist zum Beispiel eine Liste vergangener Hinrichtungen:


Liste früherer Pipedream-Workflow-Ausführungen


Die Fehler, die Sie dort sehen, sind darauf zurückzuführen, dass ich mit der API experimentiert und herausgefunden habe, wie sie funktioniert. Sie können auch auf eine davon klicken und die darin fließenden Daten sehen.

Das Ergebnis

Nachdem der Workflow eingerichtet war, haben wir ein neues Bild in einen Dropbox-Ordner hochgeladen, die Ausführung des Workflows in einem geöffneten Tab beobachtet und als Abschluss das Ergebnis überprüft. Hier ist vorher:


Cayenne, mein großer stinkender Hund

Und hier ist danach:


Cayenne nach dem API-Aufruf, besser aussehend, immer noch stinkend.

Das Ergebnis ist knackiger und eine absolute Verbesserung! Sie können hier Ihre eigene Kopie meines Workflows erstellen: https://pipedream.com/new?h=tch_3xxfJA . Wenn Sie mehr erfahren möchten, besuchen Sie unsere Dokumente und teilen Sie, was Sie erstellt haben!


Auch hier veröffentlicht