Tutorial · VelinStyle · 02.08.2026

Transparency Framework nutzen: Bilder und Medien kennzeichnen

Schritt-Tutorial: Velin Transparency in 1.2.1 — HTML-Attribute, Badge-Overlay, JavaScript API und CLI für AI-Markierung von Bildern und Medien.

Tutorial · VelinStyle 1.2.1

Transparency Framework nutzen

Bilder und Medien sichtbar kennzeichnen

In diesem Tutorial markieren Sie Medien mit dem Velin Transparency Framework — klar als Bild-Kennzeichnung, ohne dass der ganze Beitrag als KI wahrgenommen wird.

Voraussetzungen

VelinStyle 1.2.1 oder neuer (npm i @birdapi/velinstyle@1.2.1). CSS aus dem Bundle laden. Für sichtbare Badges: Wrapper (figure/div) um das Bild, nicht nur Attribute am nackten img.

1. Paket aktualisieren

npm install @birdapi/velinstyle@1.2.1
# CSS (z. B. in Ihrer App-CSS):
# @import '@birdapi/velinstyle/css';

2. Bild mit HTML kennzeichnen

Für ein sichtbares Badge legen Sie die Attribute auf einen Wrapper (figure). Der Label-Text sollte klar machen, dass nur das Bild gemeint ist — z. B. „Bild KI-generiert“.
<figure
  class="media"
  velin-transparency
  velin-transparency-id="blog-hero-01"
  velin-type="ai"
  velin-status="generated"
  velin-review="human-reviewed"
  velin-label="Bild KI-generiert"
  velin-description="Nur dieses Bild wurde mit KI erstellt und geprüft."
  velin-overlay="badge"
  velin-position="bottom-left"
  velin-tone="generated"
  velin-created-at="2026-08-01"
  velin-approved-by="Redaktion"
  velin-source="/images/hero.jpg"
  velin-version="1.2.1"
  velin-license="All rights reserved">
  <img src="/images/hero.jpg" alt="Hero">
</figure>

Wichtige Attribute

  • velin-transparency — Host aktivieren
  • velin-type=\"ai\" — Säule AI
  • velin-status=\"generated\" | assisted | verified
  • velin-review=\"human-reviewed\" — menschliche Prüfung
  • velin-label — sichtbarer Text (z. B. Bild KI-generiert)
  • velin-overlay — badge, ribbon, overlay, footer, …
  • velin-position — top-right, top-left, bottom-right, bottom-left

3. Runtime starten

Ohne JavaScript bleiben die Attribute im Markup (maschinenlesbar). Für sichtbare Badges rufen Sie die API einmal beim Seitenstart auf.
import { VelinTransparency } from '@birdapi/velinstyle/transparency';

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[velin-transparency]').forEach((el) => {
    VelinTransparency.attach(el, {
      position: el.getAttribute('velin-position') || 'bottom-left',
      tone: el.getAttribute('velin-tone') || undefined,
      overlay: el.getAttribute('velin-overlay') || 'badge',
    });
  });
});

4. Renderer wählen

Wann welcher Overlay?

  • badge — kompakt auf Fotos und Karten (empfohlen)
  • ribbon — auffälliger Diagonal-Hinweis
  • footer / banner — unter dem Inhalt, gut für Artikel
  • inline — im Fließtext
  • panel / tooltip — mehr Details auf Abruf
  • icon — minimal, Label nur für Screenreader

5. Bestehende Seiten prüfen (CLI)

# Fehlende Disclosures finden
velinstyle transparency doctor .

# Report erzeugen
velinstyle transparency report . --out transparency-report

# Vorschläge / Migration (vorsichtig, --apply schreibt Dateien)
velinstyle transparency migrate .
velinstyle transparency migrate . --apply

Empfohlener Ablauf

  1. Inventar

    doctor ausführen und Bilder/Videos ohne Disclosure listen.

  2. Wrapper + Label

    figure um Medien, Label „Bild KI-generiert“ oder „KI-unterstützt“ je nach Fall.

  3. Runtime

    attach/enhanceAll im Frontend-Bundle.

  4. Review

    Menschliche Freigabe in velin-review / approved-by dokumentieren.

6. Vier Säulen kurz

Nicht nur KI

  • AI — generated / assisted
  • Trust — human-reviewed, verified
  • Compliance — license, policy
  • Metadata — version, source, dates, authors

Beta / Foundation

Das Framework ist in 1.2.1 Beta. Architektur und HTML-Bridge stehen; weitere Provider und tiefere Ökosystem-Integration folgen.

Offizielle Dokumentation mit Live-Beispielen, Renderer-Übersicht und Architektur.

Transparency Guide

Alles Neue in VelinStyle 1.2.1 im Überblick.

Zur News 1.2.1