“A picture is worth a thousand words.”

Definition

“A picture is worth a thousand words.”

...

• Wie unterstützt dieses Metadatum die Auffindbarkeit?

  • Gute Vorschaubilder unterstützen die Auffindbarkeit, das zeigten Nutzerbefragungen.

  • Screenshots, die von Crawlern automatisch generiert werden, sind aber nicht immer hilfreich (und Cookie-Banner stören teilweise dieses Verfahren)

• Verwenden Nutzende dieses Metadatum bei Suchvorgängen?

• Welche Praxis existiert bei der Erstellung dieses Metadatums seitens Nutzenden.

• Welche Anleitungen / Best practices sind in der Praxis wie erfolgreich?

• Kann man die Qualität von Vorschaubildern maschinell bewerten?

Tests

• Praxistests vom Co-Working am 06.11.2024

Hintergrundwissen zur Bildgenerierung

Die Bildgenerierung mittels Künstlicher Intelligenz (KI) hat in den letzten Jahren erhebliche Fortschritte gemacht.. Text-zu-Bild-Modelle wie DALL·E von OpenAI und Midjourney können aus Texteingaben Bilder erstellen. Sie nutzen umfangreiche Datensätze von Text-Bild-Text-Paaren, um die Beziehung zwischen Sprache und visuellen Darstellungen zu erlernen. Weitere Infos zur Funktionsweise gibt es hier: [ 14 ].

...

• GANs (Generative Adversarial Networks): Diese Netzwerke bestehen aus zwei konkurrierenden Modellen – einem Generator, der versucht, realistische Bilder zu erzeugen, und einem Diskriminator, der zwischen echten und generierten Bildern unterscheidet. Durch dieses Zusammenspiel entstehen besonders realistische Bilder.

• VAE (Variational Autoencoders): Diese Modelle komprimieren Bilddaten in einen latenten Raum und generieren daraus neue, ähnliche Bilder. Sie sind nützlich für die Datenkompression und die Generierung variantenreicher Bilder.

• Diffusionsmodelle: Ein neuer Ansatz zur Bildgenerierung, bei dem ein Bild aus einem „Rauschen“ entsteht, das schrittweise durch das Modell verfeinert wird. Diffusionsmodelle gelten als sehr leistungsfähig für hochauflösende und detailreiche Bilder.

• Prompts: Sind Textbeschreibungen oder kommagetrennte Schlagwörter, die das zu erzeugende Bild beschreiben und Hinweise zum Stil und zur Gestaltung geben können.

• Negativ-Prompts: Sind Textbeschreibungen oder kommagetrennte Schlagwörter, die beschreiben, was nicht dargestellt werden soll z.B. Text oder Rauschen.

• Prompt Engineering: Die Technik, Textanfragen („Prompts“) so zu gestalten, dass die KI die bestmöglichen Ergebnisse liefert. Für Bildgeneratoren bedeutet dies, detaillierte Beschreibungen zu formulieren, die das gewünschte Bild möglichst genau beschreiben.

• ControlNets: basieren auf neuronalen Netzwerken, die zusätzlich zum Hauptmodell trainiert werden. Sie fungieren als eine Art "Leitplanke" für den Generierungsprozess.

• Latenter Raum (Latent Space): Eine reduzierte Darstellung von Bilddaten, die KI-Modelle verwenden, um wichtige Merkmale eines Bildes zu speichern und daraus Variationen zu erstellen.

• LoRAs (Low-Rank Adaptations): LoRAs sind spezialisierte Erweiterungen bestehender KI-Modelle wie Stable Diffusion. Sie ermöglichen es, spezifische Stile oder Konzepte in die Bildgenerierung zu integrieren, ohne das gesamte Modell neu zu trainieren. Dies spart Ressourcen und Zeit.

• CLIP (Contrastive Language–Image Pretraining): Ein KI-Modell, das Texte und Bilder miteinander verknüpfen kann. Es ist besonders nützlich für Text-zu-Bild-Modelle, bei denen ein Bild auf Basis einer textlichen Beschreibung erstellt wird.

• Prompt Engineering: Die Technik, Textanfragen („Prompts“) so zu gestalten, dass die KI die bestmöglichen Ergebnisse liefert. Für Bildgeneratoren bedeutet dies, detaillierte Beschreibungen zu formulieren, die das gewünschte Bild möglichst genau beschreiben.

• Neural Radiance Fields (Neural Radiance Fields (NeRFs): Eine Methode zur 3D-Bildgenerierung, die Ansichten eines Objekts aus verschiedenen Perspektiven erstellt und ein 3D-Modell generiert.

• Segmentierung (Segmentation): Eine Technik zur Unterteilung eines Bildes in verschiedene Bereiche oder Objekte, die KI-Modelle verwenden, um bestimmte Bildteile gezielt zu bearbeiten oder zu erzeugen.

• Style Transfer: Mit dieser Technik wird der Stil eines Bildes auf ein anderes übertragen, zum Beispiel der eines Gemäldes auf ein Foto.

• Image-to-Image Translation: Diese Methode übersetzt ein Bild in ein anderes, etwa von Schwarz-Weiß zu Farbe.

• Steps (Schritte): bezieht sich auf die Anzahl der Iterationen, die ein KI-Modell während des Bildgenerierungsprozesses durchläuft. Jeder Schritt verfeinert das Bild weiter, indem Rauschen reduziert und Details hinzugefügt werden. Eine höhere Anzahl von Schritten kann zu detaillierteren und realistischeren Bildern führen, erhöht jedoch auch die Rechenzeit. Neuere Modelle versuchen auch mit einer geringeren Anzahl an Schritten gute Ergebnisse zu erzielen und schneller zu arbeiten.

• Super Resolution: KI-Algorithmen erhöhen die Auflösung von Bildern und machen sie detailreicher.

• Image Inpainting: Diese Technik füllt fehlende oder beschädigte Bereiche in Bildern realistisch auf.

• Multimodale KI: Multimodale KI kann verschiedene Datentypen wie Text, Bild und Ton kombinieren und miteinander verarbeiten, um vielseitigere Anwendungen zu ermöglichen.

...

• Fähigkeiten: Häufig auftretende Herausforderungen wie z.B. die Darstellung von Schrift, Händen und konsistenten Charakteren wird werden unterschiedlich gut gemeistert. Aktuell erhält z.B. Flux viel Aufmerksamkeit für die bessere Generierung von Schriften. Aber andere Modelle besser werden auch fortlaufend nachverbessert.

• Die technischen Anforderungen für KI-Bildgenerierungsmodelle variieren je nach Komplexität und Architektur des jeweiligen Modells. Häufig werden GPUs mit hohem Speicher benötigt.

• Weiterführende Vergleichen Vergleiche und Tests findet man hier: [ 15, 16 ].

...

• Stable Diffusion: Innerhalb der Modell-Familie gibt es auf Geschwindigkeit optimierte Modelle wie z.B. SD XL Turbo oder SD XL Lightning von ByteDance.

• Fooocus: Fooocus ist ein Open-Source-Bildgenerator, der auf dem eigenen PC betrieben werden kann. Es zeichnet sich durch einfache Bedienung und professionelle Funktionen aus und basiert intern auf SD XL.

• FLUX.1 [schnell]: Diese Variante des Flux-Modells ist speziell für schnelle und ressourcenschonende Bildgenerierung optimiert. Sie kann auf weniger leistungsfähiger Hardware betrieben werden und bietet dennoch qualitativ hochwertige Ergebnisse.

...

• Open Graph Images sind Bilddateien, die auf Ihrer Website gehostet werden. Sie werden durch spezielle Meta-Tags im HTML-Header Ihrer der Webseite referenziert, um festzulegen, welches Bild angezeigt wird, wenn Ihre die Seite in sozialen Netzwerken geteilt wird. Mit ihnen werden Banner-ähnliche Vorschaubilder realisiert, die aus grafischen Elementen, Text und Bildern bestehen können. Anbieter für solche sind Generatoren sind z.B. https://www.bannerbear.com/demos/open-graph-image-generator-tool/ oder https://placid.app/tools/free-open-graph-image-generator/.

• Dynamische Bildgenerierung mit Programmiersprachen: Mit einer Text KI können Bilder “programmiert” werden z.B. Vektorgrafiken im SVG Standard oder Canvas.

• Nutzung von ASCII-Art: Erstellung von Bildern und Designs ausschließlich mit Textzeichen.

• Einsatz von Icon-Fonts: Icon-Fonts bieten skalierbare Symbole, die wie Schriftarten behandelt werden.

Tools und Scripte für Text zu Bildgeneratoren

Siehe Tools Rubirk.

Prompt-Erstellung für Text zu Bild Generatoren

...

Eine gute Demonstration zur Umsetzung von Styles mit passenden Prompt-Anweisungen findet man bei Fooocus: https://docs.google.com/spreadsheets/d/1qtpG06Oxvl6ZtKb9F4_p4qNJxNaUW8TXaxC6LrFa9yM/edit?gid=2125777153#gid=2125777153

...

Style-Vorschläge für Bildung (auf Basis der Anforderungen)

Style 1: Klarer und

...

einfacher Stil mit warmen Farben

Beschreibung: Dieser Stil legt den Fokus auf Klarheit, Einfachheit und Übersichtlichkeit, um den Lerninhalt prägnant und leicht verständlich darzustellen. Ideal für grundlegende Bildungsressourcen, die eine schnelle Orientierung und minimale kognitive Belastung bieten sollen.

highly detailed, sharp focus, polished, pristine, attractive, symmetry, coherent, minimalistic, clean, uncluttered, warm colors, natural light, clear lines, simple shapes, balanced composition, professional quality, high-resolution, elegant, straightforward, modern, clear visual hierarchy

Style 2: Interaktive und

...

engagierende Darstellung mit hohen Kontrasten

Beschreibung: Dieser Stil fördert die Motivation und das Engagement der Lernenden durch dynamische, lebendige und ansprechende visuelle Elemente. Ideal für interaktive Lernmaterialien, die Bewegung, Zusammenarbeit und aktive Teilnahme visualisieren sollen.

cinematic, dramatic light, vibrant, dynamic compositions, volumetric lighting, energetic, colorful, high contrast, detailed textures, interactive, engaging, lively, modern aesthetics, professional quality, high-resolution, bright colors, sharp focus, polished, attractive, motion blur, creative compositions, immersive details

Style 3: Kulturell Sensible und

...

inklusive Darstellung mit weicher Beleuchtung

Beschreibung: Dieser Stil stellt sicher, dass Bildungsinhalte alle Lernenden ansprechen, indem kulturelle Vielfalt und Inklusion authentisch und respektvoll dargestellt werden. Ideal für multikulturelle und inklusive Lernumgebungen, die Diversität betonen.

...

• Spezifische Adjektive: Verwenden von klaren Adjektiven zur Beschreibung (z. B. hell, rund, glatt).

• Experimentieren mit Formulierungen: Verschiedene Satzstellungen und Wortwahl ausprobieren.

• Negative Prompts: Begriffe, die explizit ausgeschlossen werden sollen (z. B. „kein Text“).

• Gewichtungen und Iterationen: Anpassung der Wichtigkeit einzelner Begriffe und schrittweises Verfeinern basierend auf den Ergebnissen.

• Sprache: Es empfiehlt sich den Prompt in die englische Sprache zu übersetzen, da die meisten Modelle mit mehr englisch-sprachigen Quellen trainiert wurden.

• Bildgröße: Beachten Sie die empfohlene Bildgröße der Modelle. In der Regel mind. 512 x 512. Darunter können Qualitätsverluste auftreten. Quadratisches Formate werden z.T. bevorzugt.

• CFG-Scale (Classifier Guidance Scale): Regelt, wie strikt das Modell den Prompt befolgt. (nicht bei allen Modellen verfügbar)

  • 1 = Prompt wird fast ignoriert.

  • 7 = Gleichgewicht zwischen Einhaltung und kreativer Freiheit.

  • 30 = Strikte Einhaltung des Prompts.

• Sampling-Steps: Mehr Schritte erhöhen die Bildqualität. Empfehlung: 20 Schritte mit Euler-Sampler.

• Batch-Größe: Mehrere Bilder (4 oder 8) gleichzeitig generieren, um verschiedene Varianten zu erhalten.

Prompt-Generator für Bildung

Es empfiehlt sich zunächst mit einer Text-KI einen englischen Prompt basierend auf den Beschreibungstexten der Bildungsinhalte zu erstellen, der dann für die Bild-KI genutzt werden kann. Hierbei können die Anforderungen, Styles und Hinweise mit eingearbeitet werden.

Hier ist ein Beispiel für einen Prompt-Generator, der den zuvor definierten Stil 1 nutzt. Es müssen an der markierten Stelle die Infos zum Bildungsinhalt gefügt werden (der damit erzeugte Prompt kann dann in der Bild-KI genutzt werden).

Erstellen Sie einen englischen Prompt für eine Bild-KI basierend auf der folgenden Beschreibung des Bildungsinhalts. Der Prompt soll:

Alle hier genannten Hinweise und Anforderungen einfließen lassen.
Wichtige Schlagworte zum Bildungsinhalt enthalten.
Sicherstellen, dass Objekte, Szenen und Sachverhalte möglichst realistisch und ohne Text dargestellt werden.
Der erzeugte Prompt sollte dazu dienen, ein ansprechendes Vorschaubild zu generieren, das den Bildungsinhalt treffend widerspiegelt und die Lernenden motiviert.

Beschreibung des Bildungsinhalts
[Beschreibungstext des Bildungsinhaltes hier einfügen ...]

Anforderungen und Hinweise

Hauptmotiv klar beschreiben: Identifizieren Sie das zentrale Element, das den Bildungsinhalt repräsentiert, und beschreiben Sie es detailliert.
Relevante Details hinzufügen: Ergänzen Sie Kontext oder Umgebung, um das Verständnis zu unterstützen.
Einfachheit und Klarheit betonen: Halten Sie das Design minimalistisch und vermeiden Sie unnötige Elemente, um die kognitive Belastung zu reduzieren.
Realistische Darstellung: Stellen Sie sicher, dass Objekte, Szenen und Sachverhalte möglichst realistisch wiedergegeben werden und nicht verfälscht sind.
Text im Bild vermeiden: Verzichten Sie auf jeglichen Text im Bild, um technische Schwierigkeiten und Redundanz zu vermeiden.
Emotionale Ansprache: Verwenden Sie warme Farben und natürliches Licht, um eine einladende und motivierende Atmosphäre zu schaffen.
Professionelle Qualität anstreben: Achten Sie auf hohe Auflösung, scharfen Fokus, klare Linien und eine ausgewogene Komposition.
Kulturelle Sensibilität: Stellen Sie sicher, dass das Bild kulturell inklusiv und sensitiv ist, um alle Lernenden anzusprechen.

Stilvorgaben

Attribute: hochdetailliert, scharfe Fokussierung, poliert, makellos, ansprechend, Symmetrie, kohärent, minimalistisch, sauber, aufgeräumt
Farben und Beleuchtung: warme Farben, natürliches Licht
Designelemente: klare Linien, einfache Formen, ausbalancierte Komposition
Qualität: professionelle Qualität, hohe Auflösung
Ästhetik: elegant, geradlinig, modern, klare visuelle Hierarchie

Hinweise zur Erstellung des Prompts

Integrieren Sie wichtige Schlagworte aus dem Bildungsinhalt in den Prompt.
Formulieren Sie den Prompt klar und präzise, um ein optimales Ergebnis von der Bild-KI zu erhalten.
Stellen Sie sicher, dass der erzeugte englische Prompt alle Anforderungen erfüllt und alle Worte aus den Stilvorgaben enthält.
Der Prompt sollte so formuliert sein, dass er von der Bild-KI direkt verwendet werden kann, um das gewünschte Vorschaubild zu generieren.
Vermeiden Sie Texte im Bild, um technische Schwierigkeiten und das Prinzip der Redundanz zu berücksichtigen.

Beispiel mit einem WLO-Inhalt:

• https://redaktion.openeduhub.net/edu-sharing/components/render/df7959ca-b57f-4643-bb33-8b53c4774f0a?closeOnBack=true

• Beschreibung: Die Welt in allen Farben sehen -- das ermöglichen spezialisierte Lichtsinneszellen der Netzhaut, die Zapfen. Es gibt drei verschiedene Arten, die Licht unterschiedlicher Wellenlänge rezipieren. Doch die Buntheit der Welt schafft erst das Gehirn.

Ergebnis des Prompts für die Bild-KI (mit gpt-4o erstellt):

Create a high-resolution, realistic illustration focusing on the specialized photoreceptor cells called cone cells within the human retina, which enable vision in a full spectrum of colors. Show three types of cone cells in close-up, with microscopic precision and clear differentiation, each representing distinct light wavelengths. In the background, subtly include neural pathways leading towards the brain, symbolizing the brain’s critical role in creating the perception of color. The composition should be minimalistic, with balanced symmetry and a clean design, using warm colors and natural lighting to evoke an inviting, motivational atmosphere. Emphasize clarity and simplicity with clean lines, straightforward forms, and an organized, cohesive visual structure that directs attention toward the main elements without unnecessary details. Attributes should include high detail, sharp focus, polished and pristine aesthetics, and an appealing, culturally inclusive presentation. Avoid any text in the image to ensure clarity and avoid distractions. Attributes: highly detailed, sharp focus, polished, pristine, symmetrical, cohesive, minimalistic, clean, and organized.

Ergebnis mit Dall-E3 (OpenAI):

...

Bestimmung der Bildqualität

Menschliche Bestimmung der Bildqualität

Dies wird meist durch paarweise Vergleiche generierter Bilder von unterschiedlichen KI-Modellen realisiert und in Leaderboards abgebildet z.B. hier: https://huggingface.co/spaces/ArtificialAnalysis/Text-to-Image-Leaderboard

Alternativ könnte ein Fragenkatalog mit einer Bewertungsmatrix entwickelt werden, der die oben genannten Anforderungen berücksichtigt. Beispiel:

Fragenkatalog zur Bewertung von Vorschaubildern für Bildungsinhalte

Jede Frage kann auf einer 5-Punkte-Likert-Skala bewertet werden,
wobei 1 = Stimme überhaupt nicht zu und 5 = Stimme voll und ganz zu bedeutet.

Relevanz und Inhalt

1. Das Vorschaubild spiegelt den Inhalt des Bildungsangebots treffend wider.

   • 1 ← → 5

2. Das Hauptmotiv des Bildes ist klar erkennbar und unterstützt die Lernziele.

   • 1 ← → 5

3. Das Bild vermittelt einen ersten Eindruck vom Thema oder der Art des Inhalts.

   • 1 ← → 5

Gestaltung und Ästhetik

4. Das Design des Vorschaubildes ist klar und einfach, ohne überflüssige Elemente.

   • 1 ← → 5

5. Die Farb- und Kontrastwahl ist ansprechend und unterstützt die visuelle Orientierung.

   • 1 ← → 5

6. Das Bild ist in hoher Qualität (Auflösung, Schärfe) gestaltet.

   • 1 ← → 5

Benutzerfreundlichkeit und Zugänglichkeit

7. Die Hauptmerkmale des Bildes sind auch in kleiner Größe gut erkennbar.

   • 1 ← → 5

8. Das Vorschaubild berücksichtigt Barrierefreiheitsaspekte (z.B. kontrastreiche Farben, keine Textelemente).

   • 1 ← → 5

Didaktische und Kulturelle Aspekte

9. Das Bild unterstützt den pädagogischen Zweck des Inhalts und hebt die Lernziele visuell hervor.

   • 1 ← → 5

10. Die Bildsprache ist altersgerecht und entspricht dem Entwicklungsstand der Zielgruppe.

    • 1 ← → 5

11. Das Vorschaubild ist kulturell sensibel und inklusiv gestaltet, sodass es alle Lernenden anspricht.

    • 1 ← → 5

Konsistenz und Markenidentität

12. Das Vorschaubild ist konsistent mit anderen Bildern innerhalb derselben Serie oder Plattform.

    • 1 ← → 5

Skalenbeschreibung

• 1 – Stimme überhaupt nicht zu

• 2 – Stimme eher nicht zu

• 3 – Neutral

• 4 – Stimme eher zu

• 5 – Stimme voll und ganz zu

Optional: Offene Fragen zur Ergänzung

Zusätzlich zu den bewertenden Fragen können folgende offene Fragen hilfreich sein, um detailliertes Feedback zu erhalten:

• Welche Elemente des Vorschaubildes finden Sie besonders ansprechend oder unpassend?

• Haben Sie Verbesserungsvorschläge für das Design oder die Darstellung des Bildes?

• Inwiefern unterstützt das Vorschaubild Ihre Motivation, die Bildungsinhalte zu nutzen?

Maschinelle Bestimmung der Bildqualität

Für die maschinelle Bewertung bieten sich verschiedene Metriken an. Diese können unterschieden werden, ob neben dem generieten Bild noch eine Referenz und/oder der Prompt notwendig ist. Neben allgemeinen Aussagen zur Qualität des Bilds, lassen sich u.a. auch die Befolgung des Prompts und die Übereinstimmung zur Referenz bewerten.

Metriken ohne Referenz (Allgemeine Metriken)

Diese Metriken bewerten die Qualität der Bilder unabhängig von einem spezifischen Referenzbild.

Metriken mit Referenz

Diese Metriken vergleichen das generierte Bild mit einem oder mehreren Referenzbildern, um die Qualität und Ähnlichkeit zu bewerten.

Metriken mit Promptbezug

Diese Metriken bewerten, wie gut das generierte Bild den Vorgaben des Textprompts entspricht.

Quellen

[ 1 ] https://www.e-teaching.org/didaktik/gestaltung/visualisierung/abstrakt/schaubild

...

[ 5 ] https://de.wikipedia.org/wiki/Kognitive_Theorie_des_multimedialen_Lernens

[ 6 ] https://link.springer.com/chapter/10.1007/978-3-662-54368-9_4

[ 7 ] https://wirkungswerk.de/glossary/dual-coding-theorie/

...