tldraw computer: Neuer Workflow mit der Verbindung von Blöcken und Erstellung von komplexen Prozessketten

Das Startup tldraw hat mit “computer” eine neue Anwendung entwickelt, die auf der Basis einer Gemini API von Google läuft und es ermöglicht, mittels Pfeilen diverse Blöcke wie zum Beispiel Anweisungen mit Bildern oder Audio zu verknüpfen. Mit nur einem Klick wird dann eine ganze Kette an Prozessen ausgelöst, aktuell kostenlos nutzbar.

Und so kann es gehen:

  1. Kostenlos über ein Google-Konto anmelden https://computer.tldraw.com/
  2. Neues Projekt starten und in der linken Navigation die Blöcke auswählen
  3. Den Block Anweisung (mit Text) und einen weiteren Block wie z.B. Bild auf das Canvas ziehen
  4. Beide Blöcke unten in der Leiste mittels Pfeil verbinden. Zentraler Klick in die Mitte beider Blöcke und die Verbindung steht
  5. Auslösung des Prozesses über das Play-Symbol oben rechts im Block Anweisung
  6. Beliebig viele Elemente verbinden, auch Design etwa zu Schriftfarbe auswählen. Download der erstellten Medien ist möglich
draw
Verbindung von Text und Bild-KI mittels Pfeil

Neuer Workflow: Blöcke auf Canvas ziehen und mit Pfeilen verbinden

In der oberen Abbildung habe ich den Block “Anweisung” und Block “Bild” auf das Canvas gezogen und mittels Pfeil verbunden, wodurch eine Prozesskette entsteht. Um die Blöcke zu verbinden, wird unten in der Leiste auf das Pfeil-Symbol geklickt und im Anschluss ein Klick in Block 1 und dann in Block 2. Das läuft immer gleich ab. Übrigens die linke Navigation lässt sich auch unten in der Liste über das Plus-Symbol öffnen, falls man gerne die linke Navi über “Hide” verschwinden lassen möchte.

Im “Anweisung-Block” wurde der simple Prompt “ein bunter Baum” eingetragen und im Anschluss oben rechts innerhalb des Blocks auf den Play-Button geklickt. In der Folge wird ein Prozess ausgelöst, in diesem Fall das Generieren eines Bildes, sodass ein bunter Baum angezeigt wird, den ich so auch herunterladen und für weitere Zwecke nutzen kann. 

draw
Verbinden des Bildes mit einer Audio-Ausgabe mittels Pfeil

Im nächsten Schritt wurde ein Audio-Block hinzugefügt und mit dem Bild-Block mittels Pfeil verbunden. Nun kann der Play-Button des Blocks “Audio” einzeln angeklickt werden, um auf der Grundlage des bunten Baumes ein erklärendes Audio zu erstellen oder der User startet beim Block “Anweisungen” wieder ganz von vorne und erzeugt ein neues Bild und dann erst das Audio.

Wir halten kurz fest: Mit nur drei Wörtern wurde über tldraw computer ein Bild erstellt und wie unten hörbar, ebenfalls ein Audio und zwar über ganze 51 Sekunden. Dies wirkt schon sehr zeiteffizient, wie ich finde, bzw. mit wenig Input lässt sich wohl recht viel Output generieren und dies auch recht schnell, da alles über das mutlimodale Top-Sprachmodell von Google “Gemini” läuft.

Start-Block unterbricht die Prozesskette

Für mehr Kontrolle innerhalb komplexer Prozessketten eignet sich das Einbinden von Start-Buttons, wie einer in der unteren Abbildung zwischen Bild-Block und Audio-Block zwischengeschaltet ist. Gefällt mir zum Beispiel das Bild nicht, dann soll auf dieser Grundlage auch kein Audio abgespielt bzw. generiert werden. Dies spart schlussendlich Ressourcen, zumal die Plattform tldraw computer auf Dauer bezahlpflichtig werden könnte, also sparen User so auch Credits. Also, erst wenn mir der Baum auch wirklich gefällt, erstelle ich dazu manuell das Audio.

draw
Zwischenschaltung enes Play-Button, der vom User ausgeführt werden kann

Möchte man neben einem Block oder einfach ganz allgemein aus Gründen der Übersichtlichkeit einen erklärenden Text einfügen, dann geht dies über den Text-Block und diverse Design-Möglichkeiten, die sehr gerne in der rechten Navigation ausgiebig getestet werden dürfen. 

draw
Auch Hinweise über einen Text können gezielt mit eingefügt werden

Im folgenden Screenshot ist auf der linken Seite die Navigation über den Button “Hide” verschwunden und ganz unten ist die Größeneinstellung geblieben, die im Beispiel mit 50 % angezeigt wird. Dies ist eine wichtige Funktion, vor allem wenn Nutzer sehr umfangreiche Prozessketten etwa mit 45 Blöcken erzeugen möchten. Ein Zoom-out macht die Arbeitsoberfläche dann vielfach übersichtlicher. Um fortan neue Blöcke zu erstellen lässt sich nun elegant die untere Leiste mit dem Plus-Symbol verwenden.

draw
Canvas beliebig um Tools erweitern

Viele weitere Blöcke erkunden und gezielt integrieren

Des Weiteren wurde ein zusätzlicher Bild-Block hinzugefügt, der mit dem ersten Anweisung-Block verbunden wird. So ließen sich zwei Bilder gleichzeitig erstellen. Natürlich können viele weitere Blöcke hinzugefügt werden, wie “Camera“, “File“, “Data” und weitere Elemente, auf die ich in diesem Beitrag nicht näher eingehen möchte. Es lohnt sich an dieser Stelle umfangreich zu testen und dies völlig kostenfrei (Stand 01/25). Zusätzlich lässt sich solch ein Projekt oben rechts über den Button “Publish” veröffentlichen und ist so auch für Externe einsehbar.

draw
Wird das erste Element (Text) akitiviert, startet der gesamte Ablauf

Der letzte Screenshot zeigt eine recht große Arbeitsoberfläche mit diversen Verbindungen, auch unterschiedlichen Anweisungen. Diese soll zu Demonstrationszwecken dienen, also wie komplex solche Prozesse über tldraw computer durchgeführt werden könnten und zwar auch unabhängig voneinander, mit x-beliebigen Blöcken und integrierten Buttons, Text und vieles mehr. 

draw
Auch sehr große Canvas mit vielen Elementen sind möglich

Es lohnt sich definitiv tiefer in dieses Thema einzusteigen, um diesen neuen Workflow zu erleben und ein klein wenig versuchen zu verstehen, in welche Richtung wir uns KI-technisch bewegen könnten. Auch Anwendungen wie Kaiber AI zeigen solche Workflows mit verbundenen Blöcken und ähnlichen. Es macht einfach Spaß so zu arbeiten!

Offizielle Beispiel-Canvas

draw
Offizielle Beispiele diverser Gestaltungsmöglichkeiten

Offizielles Video

Ein Beitrag erstellt von

Ähnliche Beiträge