Einleitung

Nachdem ich im vor­he­ri­gen Artikel Schnelle und ein­fa­che Bildgenerierung mit Fabric und OpenAI einen ein­fa­chen Workflow vor­ge­stellt habe, um für einen Artikel ein Schmuckbild zu erstel­len, möch­te ich mit die­sem Artikel einen Schritt wei­ter­ge­hen und zei­gen, wie aus einer kur­zen Beschreibung, mit­hil­fe von Fabric, DALL‑E und Vektorisierungstools, ein frei ska­lier­ba­res Logo im SVG-Format ent­steht.

Voraussetzungen

Wie im vor­her­ge­hen­den Artikel sind fol­gen­de Voraussetzungen zu erfül­len:

1. Ein OpenAI-Account und einen OpenAI-API-Key (OpenAI Platform).
2. Eine lauf­fä­hi­ge Installation von Fabric. Siehe Installation und ers­te Schritte mit Fabric – dem Prompt-Optimierer.
3. Das Kommandozeilenprogramm jq, um JSON-Daten zu ver­ar­bei­ten.

Für die­sen Workflow wer­den noch fol­gen­de Kommandozeilenprogramme benö­tigt:

4. Autotrace: Konvertiert ein­fa­che Bitmaps in Vektorgrafiken und unter­stützt Farben.
5. Potrace: Konvertiert mono­chro­me Bitmaps in prä­zi­se­re Vektorgrafiken.
6. ImageMagick: Leistungsfähiges Kommandozeilen-Grafiktool, hier genutzt zur Konvertierung von Bitmap-Grafiken.

Ich nut­ze Autotrace und Potrace für die Erstellung der Vektorgrafiken, da sie unter­schied­li­che Ergebnisse pro­du­zie­ren. Aber dazu unten mehr.

Diese Programme las­sen sich auf dem Mac am ein­fachs­ten mit Homebrew instal­lie­ren:

brew install autotrace potrace imagemagick

Der Workflow

Wie die meis­ten Workflows mit Fabric star­tet auch die­ser mit einer Texteingabe, je nach Komplexität der Beschreibung ent­we­der mit einer Textdatei oder mit einem ein­fa­chen String. Diese Eingabe wird dann von Fabric und einem spe­zi­el­len, auf Logos opti­mier­ten Pattern bear­bei­tet. Der dar­aus gene­rier­te Prompt wird an ein Skript über­ge­ben, das DALL‑E mit die­sem Prompt auf­ruft, das gene­rier­te PNG spei­chert und des­sen Pfad an das nächs­te Skript über­gibt. Dieses kon­ver­tiert dann das PNG in eine vek­tor­ba­sier­te SVG-Datei.

Das Logo-Pattern

Mit der Installation von Fabric steht bereits ein Pattern zur Verfügung, das spe­zi­ell für die Logoerstellung opti­miert wur­de: create_logo. Diesen Ordner im Patterns-Ordner habe ich dupli­ziert und in create_mylogo umbe­nannt und den Inhalt der ent­hal­te­nen system.md durch fol­gen­den Inhalt ersetzt:

# IDENTITY and PURPOSE

You create simple, elegant, and impactful company logos based on the input given to you. The logos are super minimalist, minimal colors.

Take a deep breath and think step by step about how to best accomplish this goal using the following steps.

# OUTPUT SECTIONS

- Output a prompt that can be sent to an AI image generator for a simple and elegant logo that captures and incorporates the meaning of the input sent. 
- The prompt should take the input and create a simple, vector graphic logo description for the AI to generate. 
- This logo should be optimal for convert it with potrace. Only white backgound. No Colors, No Text.
- Make an very detailed description with 100 words


# OUTPUT INSTRUCTIONS

- Ensure the description asks for a simple, vector graphic logo with a white background.
- Ensure the description asks for minimalist vector graphic logo. 
- Ensure the description asks for a design that emphasizes smooth curves and geometric shapes.
- Ensure the description asks for an entirely in black on a white background.
- Ensure the description asks for stylized form of all objects. 
- Do not output anything other than the raw image description that will be sent to the image generator.
- You only output human-readable Markdown.
- Do not output warnings or notes —- just the requested sections.

# INPUT:

INPUT:

Natürlich kann die­se Datei an die eige­nen Anforderungen ange­passt und wei­ter opti­miert wer­den. Nachdem wir nun das Pattern vor­be­rei­tet haben, gehen wir zum nächs­ten Schritt über: die eigent­li­che Erstellung des Logos.

Das CreateLogo Skript

Dieses Skript über­nimmt den Prompt von Fabric und über­gibt ihn über die OpenAI API an DALL‑E. Eigentlich woll­te ich für die Erstellung eines Logos DALL-E‑2 in der Größe 512x512 auf­ru­fen, da damit die Bildgenerierung etwas kos­ten­güns­ti­ger ist. Am Ende hat mich aber die bes­se­re Interpretation des Prompts und die Qualität des Ergebnisses davon über­zeugt, doch eher die Logos mit DALL-E‑3 zu gene­rie­ren.

Im Großen und Ganzen ent­spricht das Skript dem Skript zur Artikelbildgenerierung aus dem vor­he­ri­gen Artikel. Nur für die Bildgröße wird das qua­dra­ti­sche Format 1024x1024 ver­wen­det. Die erstell­ten Logos wer­den auch in einem ande­ren Ordner gespei­chert. Am Ende des Skripts habe ich die Zeilen für die Speicherung der Prompts aus­kom­men­tiert. Falls die­se z.B. für die Optimierung des Patterns ein­ge­se­hen wer­den sol­len, muss in die­sen Zeilen das Kommentarzeichen ent­fernt wer­den. Wichtig ist, dass das Skript nur den Pfad der erstell­ten PNG-Datei aus­gibt!

Wie immer spei­che­re ich das Skript in dem Ordner $HOME/Applications/ mit dem Namen CreateLogo und mar­kie­re es mit chmod +x als aus­führ­bar.

#!/bin/zsh

# Überprüfen, ob Daten in das Skript gepiped werden
if [ -t 0 ]; then
  # Es wurden keine Eingaben gepiped
  exit 1
else
  # Alle gepipeten Eingaben lesen
  prompt=$(cat -)
fi

# Der OpenAI API-Schlüssel sollte als Umgebungsvariable gesetzt sein
api_key="$OPENAI_API_KEY"

# JSON-Nutzlast erstellen
json_payload=$(jq -n \
  --arg model "dall-e-3" \
  --arg prompt "$prompt" \
  --argjson n 1 \
  --arg size "1024x1024" \
  '{model: $model, prompt: $prompt, n: $n, size: $size}'
)

# Aktuelles Datum und Uhrzeit für den Dateinamen abrufen
timestamp=$(date +"%Y%m%d_%H%M%S")

# Den curl-Befehl ausführen und die Antwort speichern
response=$(curl -s https://api.openai.com/v1/images/generations \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $api_key" \
  -d "$json_payload")

# Die Bild-URL aus der Antwort extrahieren
image_url=$(echo $response | jq -r '.data[0].url')


# Das Bild mit Datum und Uhrzeit im Dateinamen speichern
curl -s "$image_url" -o "$HOME/Pictures/CreateLogo/image_${timestamp}.png"

# Den überarbeiteten Prompt aus der Antwort extrahieren
# revised_prompt=$(echo $response | jq -r '.data[0].revised_prompt')
# echo "$revised_prompt" > "$HOME/Pictures/CreateLogo/revised_prompt_${timestamp}.txt"
# echo "Revised Prompt wurde als prompt_${timestamp}.txt gespeichert"

# Den von Fabrix erstellten Prompt in einer Textdatei speichern
# echo "$prompt" > "prompt_${timestamp}.txt"
# echo "Prompt wurde als prompt_${timestamp}.txt gespeichert"


# Erfolgsnachricht ausgeben
echo $HOME/Pictures/CreateLogo/image_${timestamp}.png

# Das bild wird geöffnet
# open image_${timestamp}.png

Das Vektorisieren

Wie schon erwähnt, nut­ze ich in die­sem Beispiel zwei unter­schied­li­che Kommandozeilenprogramme, die den Teil der Umwandlung von dem PNG in das Vektorformat SVG über­neh­men. Ich habe nur die­se bei­den Tools gefun­den, die inter­es­san­ter­wei­se schon recht alt sind. Es gibt im Netz eini­ge KI-basier­te Services, die aber nicht unbe­dingt eine API zur Verfügung stel­len und teil­wei­se auch recht teu­er sind.

Beide Programme sind zwar Kommandozeilen-Tools, las­sen sich aber nicht so ohne Weiteres in einen Fabric-Workflow ein­bau­en, da sie nicht den Standard-Input auf­neh­men. Daher habe ich sie bei­de in Skripte ein­ge­packt, die den Dateipfad des PNGs auf­neh­men, die Verarbeitung star­ten und dann das SVG ent­spre­chend benen­nen.

Das Autotrace Skript

Das Skript tes­tet zunächst, ob über­haupt eine Datei über­ge­ben wur­de, ob der Pfad stimmt und ob es sich um eine PNG-Datei han­delt. Das ist für den Fabric-Workflow viel­leicht nicht so wich­tig, aber falls das Skript z.B. „stan­da­lo­ne” ver­wen­det wird, ist es hilf­reich, eini­ge Fehlerprüfungen zu haben. Im Prinzip kann Autotrace auch ande­re Bitmap-Formate ver­ar­bei­ten, aber da OpenAI PNG-Dateien erzeugt, beschrän­ke ich mich in dem Skript auf die­ses Format.

Nach den Prüfungen wer­den der Pfad zur Datei und der Name sepa­riert, damit das SVG unter dem glei­chen Pfad und Namen, nur mit der Extension .svg, gespei­chert wer­den kann.

Jetzt wird Autotrace mit dem Pfad der PNG-Datei und eini­gen Optionen auf­ge­ru­fen und das SVG gespei­chert. Die Optionen habe ich noch nicht sys­te­ma­tisch aus­pro­biert. Da gibt es sicher noch Potential für bes­se­re Ergebnisse.

#!/bin/bash

# Überprüfen, ob Daten über die Pipe übergeben wurden
if [ -t 0 ]; then
    echo "Keine Datei übergeben."
    exit 1
fi

# Lese den Dateinamen aus der Standardeingabe
read -r input_file_path

# Überprüfen, ob der Dateipfad leer ist oder die Datei nicht existiert
if [ -z "$input_file_path" ] || [ ! -f "$input_file_path" ]; then
    echo "Ungültiger Dateipfad: $input_file_path"
    exit 1
fi

# Überprüfen, ob die Datei eine PNG-Datei ist
if [[ "$input_file_path" != *.png ]]; then
    echo "Die Datei ist keine PNG-Datei."
    exit 1
fi

# Den Namen der Eingabedatei ohne Pfad und Erweiterung extrahieren
input_filename=$(basename "$input_file_path")
input_basename="${input_filename%.*}"

# Verzeichnis der Eingabedatei ermitteln
input_dir=$(dirname "$input_file_path")

# Ausgabedateipfad festlegen
output_file="$input_dir/$input_basename.svg"


# Aufruf von autotrace mit den angegebenen Parametern
if ! autotrace "$input_file_path" \
    --output-file "$output_file" \
    --input-format png \
    --output-format svg \
    --color-count 256 \
    --background-color FFFFFF \
    --despeckle-level 20 \
    --remove-adjacent-corners \
    --corner-threshold 0.5 \
    --line-threshold 1; then
    echo "Fehler bei der Konvertierung mit autotrace."
    exit 1
fi

echo $output_file

Dieses Skript wird als svgAuto im Ordner $HOME/Applications gespei­chert und als aus­führ­bar mar­kiert.

Nun kann das Skript getes­tet wer­den. Es wird dabei der echo Befehl ver­wen­det, da der Pfad und nicht der Inhalt der PNGs über­ge­ben wird.

echo /path/to/logo.png | svgAuto

Hier als Beispiel das Bild logo.png

Sowie hier das gene­rier­te SVG logo.svg:

Das Ergebnis ist nicht schlecht, aber nicht ganz nah an den Originalkonturen. Hier könn­ten ande­re Werte bei den Optionen oder auch die Verwendung wei­te­rer Optionen eine Verbesserung brin­gen. Mehr Optionen und wei­te­re Informationen kön­nen am ein­fachs­ten im Terminal mit dem Befehl man autotrace abge­ru­fen wer­den.

Das Potrace Skript

Potrace kann nur mono­chro­me Vektordateien erstel­len. Es arbei­tet bei Graustufen oder far­bi­gen Bitmaps mit Schwellenwerten, die ggf. an die Art des Bildes ange­passt wer­den müs­sen. Allerdings war für mich die Standardeinstellung, wie in dem Skript, bis­her aus­rei­chend. Interessant in die­sem Zusammenhang ist, dass Inkscape intern auch Potrace zum Vektorisieren ver­wen­det, aber auch far­bi­ge Bitmaps damit ver­ar­bei­ten kann. Soweit ich das ver­stan­den habe wird dafür das Bild in meh­re­ren Durchläufen mit unter­schied­li­chen Schwellenwerten vek­to­ri­siert und dann die­se erstell­ten SVGs am Ende wie­der zusam­men­ge­baut. Aber für mei­ne Zwecke reicht die mono­chro­ma­ti­sche Ausgabe. Auch für Potrace kön­nen wei­te­re Optionen mit man potrace im Terminal abge­ru­fen wer­den.

Das Skript, das mit dem Programm Potrace arbei­tet, funk­tio­niert ähn­lich wie das mit Autotrace. Der ers­te Teil ist iden­tisch. Der Dateipfad wird mit echo über­ge­ben, aus­ein­an­der­ge­baut und um die SVG-Datei an der rich­ti­gen Stelle mit dem rich­ti­gen Namen zu spei­chern.

Bevor aber Potrace auf­ge­ru­fen wird, wird das Original-PNG-Bild zunächst mit dem Befehl magick, der mit imagemagick instal­liert wur­de, in das PGM-Format kon­ver­tiert, da Potrace kei­ne PNG-Dateien ver­ar­bei­ten kann. Danach wird Potrace mit eini­gen Optionen auf­ge­ru­fen, die eben­so wie bei dem Autotrace-Skript opti­miert oder ergänzt wer­den kön­nen.

#!/bin/bash

# Überprüfen, ob Daten über die Pipe übergeben wurden
if [ -t 0 ]; then
    echo "Keine Datei übergeben."
    exit 1
fi

# Lese den Dateipfad aus der Standardeingabe
read -r input_file_path

# Überprüfen, ob der Dateipfad leer ist oder die Datei nicht existiert
if [ -z "$input_file_path" ] || [ ! -f "$input_file_path" ]; then
    echo "Ungültiger Dateipfad: $input_file_path"
    exit 1
fi

# Überprüfen, ob die Datei eine PNG-Datei ist
if [[ "$input_file_path" != *.png ]]; then
    echo "Die Datei ist keine PNG-Datei."
    exit 1
fi

# Verzeichnis und Dateiname der Eingabedatei ohne Erweiterung ermitteln
input_dir=$(dirname "$input_file_path")
input_basename=$(basename "$input_file_path" .png)

# Erstellen des PGM-Ausgabepfads
output_pgm_path="$input_dir/$input_basename.pgm"

# Erstellen des SVG-Ausgabepfads
output_svg_path="$input_dir/$input_basename.svg"

# Schritt 1: Konvertierung von PNG zu PGM mithilfe von ImageMagick 

magick "$input_file_path" "$output_pgm_path"
if [ $? -ne 0 ]; then
    echo "Fehler bei der Konvertierung von PNG zu PGM."
    exit 1
fi

# Schritt 2: Konvertierung von PGM zu SVG mithilfe von 'potrace' mit den angegebenen Optionen
if ! potrace "$output_pgm_path" \
    --svg \
    --output="$output_svg_path" \
    --turdsize 2 \
    --turnpolicy black \
    --alphamax 1 \
    --opttolerance 0.2; then
    echo "Fehler bei der Konvertierung mit potrace."
    exit 1
fi

# Erfolgreiche Konvertierung
echo $output_svg_path

# Bereinigen der Zwischendatei
rm "$output_pgm_path"

exit 0

Das Ergebnis einer Vektorisierung mit Potrace des obi­gen Original-PNG sieht dann so aus (ggf. den Darkmode kurz mal aus­schal­ten, falls nur eine schwar­ze Fläche zu sehen ist):

Das von Potrace kon­ver­tier­te SVG hat die Konturen viel genau­er nach­ge­zeich­net als Autotrace. Außerdem las­sen sich die Pfade auch bes­ser in Programmen wie Inkscape oder Affinity Designer bear­bei­ten.

Das Problem mit dem Darkmode liegt dar­an, dass das obi­ge SVG trans­pa­rent ist. Eigentlich soll­te es dafür eine Option in Potrace geben die den Hintergrund füllt, das klapp­te bei die­sem Bild irgend­wie nicht. Es gibt jedoch eine Lösung dafür, denn SVG ist ein XML-Textformat, sodass man rela­tiv leicht eine Definition ein­fü­gen kann, die dafür sorgt, dass der Hintergrund weiß wird. Es muss der Kopfbereich der SVG-Datei

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
 preserveAspectRatio="xMidYMid meet">
 <metadata>

um die Zeile <rect width="100%" height="100%" fill="white"/> vor dem Tag <metadata> ergänzt wer­den. Das wird, falls gewünscht, von fol­gen­dem Skript erle­digt, das aller­dings auf die von Potrace erzeug­ten SVG-Dateien ange­passt ist und nicht bei jeder SVG-Datei funk­tio­niert:

#!/bin/zsh

# Check if input is provided via a pipe
if [ -t 0 ]; then
    echo "No file path provided through the pipe."
    exit 1
fi

# Read the file path from the standard input (pipe)
read -r input_file

# Check if the file exists and is an SVG file
if [ ! -f "$input_file" ] || [[ "$input_file" != *.svg ]]; then
    echo "Invalid or non-SVG file provided: $input_file"
    exit 1
fi

# Create the output file path with the "_weiss" suffix
output_file="${input_file%.svg}_weiss.svg"

# Insert <rect> tag before <metadata> and save to new file
sed '/<metadata>/i\
<rect width="100%" height="100%" fill="white"/>' "$input_file" > "$output_file"

# Output the new file path
echo "$output_file"

Wie alle ande­ren Skripte, wird die­ses im Ordner $HOME/Applications als add_white_background gespei­chert. Der ent­spre­chen­de Aufruf kann dann z.B. so aus­se­hen:

echo "/path/to/image.png" | potrace | add_white_background

Die Autotrace-Lösung kann zwar in gewis­sem Rahmen mit Farben umge­hen, dafür ist das Ergebnis nicht so nah am Original und die erstell­ten Pfade sind eigent­lich nur Pfadfragmente. Aber um schnell eine eini­ger­ma­ßen ähn­li­che Vektorgrafik zum Skalieren von Bildern zu erzeu­gen, mag es rei­chen. Außerdem kann es gut sein, dass durch bes­se­re Einstellungen in den Optionen bes­se­re Ergebnisse erreicht wer­den kön­nen. Für Tipps wäre ich dank­bar.

Der ganze Aufruf

Nun sind alle Teile zusam­men und es kann ein Logo z.B. für einen Blog über Obsidian erstellt wer­den.

echo "erstelle ein Logo für ein Blog in dem über das PKM Tool Obsidian geschrieben wird" | fabric -sp create_mylogo | CreateLogo | svgPot | add_white_background 

Beim die­sem Aufruf wur­de die­ses Image, das das Thema recht gut trifft, erstellt:

Sowie das ent­spre­chen­de SVG:

Wird das Autotrace-Skript statt des Potrace-Skript ver­wen­det wird, sieht die SVG Datei bei dem glei­chen PNG, so aus. Hier müss­te etwas an dem Schwellenwert gear­bei­tet wer­den, um ein bes­se­res Ergebnis zube­kom­men. Achtung: Auch hier den Darkmode aus­stel­len! Das Skript zum Setzen des wei­ßen Hintergrunds müss­te für die SVG, die von Autotrace erstellt wer­den, ange­passt wer­den.

Fazit

DALL‑E, Autotrace und Potrace bie­tet eine effi­zi­en­te Möglichkeit, schnell Vektorgrafiken zu erzeu­gen. Wie bereits in mei­nem Fazit im Artikel Schnelle und ein­fa­che Bildgenerierung mit Fabric und OpenAI erwähnt, sind die­se Workflows zwar hilf­reich, aber in ers­ter Linie als Inspirationsquelle und Ausgangspunkt für eige­ne Ideen gedacht.

Dieser Artikel soll auch zei­gen, wie leis­tungs­fä­hig und fle­xi­bel die Kombination von ver­schie­de­nen Tools mit Fabric sein kann, und bie­tet eine soli­de Grundlage für die wei­te­re Automatisierung und Optimierung von Grafikprozessen.