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
<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
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',
});
});
});Position & Layout
Der Wrapper braucht position: relative (setzt enhance/attach bei static automatisch). Badge mit position: absolute, damit das Bild nicht nach unten geschoben wird. CSS aus velinstyle.min.css laden — oder eigene Absicherung für inset am 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 . --applyEmpfohlener Ablauf
-
Inventar
doctor ausführen und Bilder/Videos ohne Disclosure listen.
-
Wrapper + Label
figure um Medien, Label „Bild KI-generiert“ oder „KI-unterstützt“ je nach Fall.
-
Runtime
attach/enhanceAll im Frontend-Bundle.
-
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 GuideAlles Neue in VelinStyle 1.2.1 im Überblick.
Zur News 1.2.1
Kommentare 0
Noch keine Kommentare. Seien Sie der Erste!