Mobirise Tutorials
Künstliche Intelligenz

Vielfältige Einsatzmöglichkeiten der künstlichen Intelligenz

KI im VN Designer VN Übersetzer Verbrauch VN KI Bild

KI Verwendung

Der VN-Designer setzt gezielt verschiedene KI-Technologien ein. Die KI kann euren HTML- und CSS-Code individuell anpassen und codieren. Außerdem lassen sich Seiten mithilfe der KI in jede Sprache übersetzen.

Die Integration von KI in die Software des VN-Designers ist außergewöhnlich – in dieser Form ist mir dieses Potenzial bisher nirgends begegnet. Über API‑Schlüssel lässt sich sowohl auf Cloud‑KI als auch auf lokal installierte KI zugreifen. So könnt ihr eigene Blöcke direkt auf eurer Arbeitsseite erstellen und jeden Block individuell anpassen. Das gilt sowohl für die Codierung als auch für die Gestaltung von Bildern und Texten.


Weiter zum API-Schlüssel ↓

KI-API-Schlüssel

VN Designer

So erhältst Du einen API-Schlüssel für eine KI

Wähle in der Tabelle einen Anbieter und öffne den Link zum API-Schlüssel. Erstelle dort ein Konto oder melde Dich an. Im Entwicklerbereich kannst Du einen neuen Schlüssel erzeugen. Kopiere ihn und trage ihn in die Anwendung ein, mit der Du die KI nutzen möchtest.

Prüfe vorher die Preise und möglichen Freikontingente des gewählten Modells. Je nach Anbieter musst Du für die Nutzung eine Zahlungsmethode hinterlegen. Behandle den API-Schlüssel wie ein Passwort: Veröffentliche ihn nicht im Quellcode Deiner Webseite.

Menü → Einstellungen → KI-API-Schlüssel

Weiter ↓

KI Chat

Künstliche Intelligenz

Hier ChatGPT

Über den Button „KI“ in der oberen Menüleiste könnt ihr einen Chat mit der KI starten. Verschiedene KIs stehen zur Auswahl – außerdem könnt ihr eine lokale KI verwenden. Tragt zuvor im Menü unter Einstellungen → KI‑API‑Schlüssel die API‑Keys ein, die euch von den jeweiligen Anbietern bereitgestellt werden (einige kostenlos, andere kostenpflichtig; die Gebühren sind in der Regel gering). Unten eine Tabelle einiger Anbieter.

Unten findet ihr ein Dropdown-Menü, mit dem ihr wählen könnt, ob ihr nur chatten möchtet oder Änderungen am aktuell aktiven Block beziehungsweise an der gesamten Seite vornehmen wollt.

Es werden maximal 50 Chats gespeichert.

Übersicht einiger KI Anbieter

Dienst API-Key erstellen und verwalten Modelle Preise
OpenAI (ChatGPT) API-Key verwalten Modelle anzeigen Preise anzeigen
Google Gemini API-Key verwalten Modelle anzeigen Preise anzeigen
Groq API-Key verwalten Modelle anzeigen Preise anzeigen
Anthropic Claude API-Key verwalten Modelle anzeigen Preise anzeigen
Mistral AI API-Key verwalten Modelle anzeigen Preise anzeigen

Hinweis: Ein kostenpflichtiges ChatGPT-Abonnement wie ChatGPT Plus enthält kein Guthaben für die OpenAI-API. Das Abonnement und die API-Nutzung werden unabhängig voneinander abgerechnet.

VN Übersetzer

Der VN‑Übersetzer ist ein kostenlos in die Software integriertes Werkzeug, das ebenfalls eine Cloud‑KI verwendet. Ihr erstellt erneut einen Schlüssel (API‑Key) und tragt ihn im Werkzeug des VN‑Übersetzers ein.

Ich verwende derzeit den KI‑Dienst von Microsoft Azure. Die Übersetzungen werden in einer JSON‑Datei gespeichert; die Seiten werden deshalb nur einmalig und nur bei Änderungen neu übersetzt. Andernfalls werden die Inhalte aus der gespeicherten JSON‑Datei geladen. Microsoft stellt monatlich 2 Millionen kostenlose Zeichen zur Verfügung.

Beim erstmaligen Anlegen eines kostenlosen Azure-Kontos steht zunächst ein Azure-Testabonnement mit einem Startguthaben zur Verfügung. Dieses Testabonnement läuft nach 30 Tagen ab – unabhängig davon, ob das Guthaben vollständig verbraucht wurde.

Damit der Azure Translator anschließend weiterhin genutzt werden kann, muss das Azure-Abonnement einmalig auf die nutzungsbasierte Abrechnung („Pay-As-You-Go“) umgestellt werden. Hierfür verlangt Microsoft die Hinterlegung eines gültigen Zahlungsmittels.

Der Translator-Tarif "F0 bleibt dennoch kostenlos", solange das monatliche Freikontingent von 2 Millionen Zeichen nicht überschritten wird. Erst bei einer Nutzung oberhalb der kostenlosen Kontingente oder bei Verwendung anderer kostenpflichtiger Azure-Dienste können Kosten entstehen.

Die Umstellung nach den ersten 30 Tagen ist nur einmal erforderlich, sonst wird die Anwendung deaktiviert. Das Azure-Abonnement muss anschließend nicht alle 30 Tage erneut manuell verlängert werden.


Siehe auch mein Tutorial Werkzeuge. Weitere Informationen zum Übersetzer findet ihr auf meiner Mobirise-Tutorials-Seite.

Unten eine Übersicht einiger API-Key Anbieter.

Nachdem ihr den API‑Schlüssel in den Einstellungen eingetragen und den Schalter aktiviert habt, erscheint das Symbol zur Sprachauswahl nach dem Veröffentlichen auf dem Bildschirm. Auf dem Smartphone könnt ihr das Symbol optional verkleinert anzeigen. Das Symbol lässt sich an der Punktleiste mit der Maus greifen und an eine beliebige Position auf dem Bildschirm verschieben; das gilt auch für mobile Geräte.

Hier mein Verbrauch von diesem Projekt sowie ein Beispiel der Verbrauchsansicht in Azure.

Weiter zum API-Schlüssel ↓

Übersetzer

VN Designer

So erhältst du einen API‑Schlüssel für eine KI, mit der du Texte übersetzen kannst.

Wähle in der Tabelle einen Anbieter und öffne den Link zum API-Schlüssel. Erstelle dort ein Konto oder melde Dich an. Im Entwicklerbereich kannst Du einen neuen Schlüssel erzeugen. Kopiere ihn und trage ihn in die Anwendung ein, mit der Du die KI nutzen möchtest.

Prüfe vorher die Preise und möglichen Freikontingente des gewählten Modells. Je nach Anbieter musst Du für die Nutzung eine Zahlungsmethode hinterlegen. Behandle den API-Schlüssel wie ein Passwort: Veröffentliche ihn nicht im Quellcode Deiner Webseite.

Menü → Klick auf Symbol zwischen WhatsApp und Seitenpanel im Menü

API Keys für den VN-Übersetzer

Dienst API-Key erstellen und verwalten Modelle / Sprachen Preise
Microsoft Azure Translator API-Key verwalten Modelle und Sprachen anzeigen Preise anzeigen
Google Cloud Translation API-Key verwalten Modelle und Sprachen anzeigen Preise anzeigen
Azure Translate

Microsoft Azure Translate Beispielansicht Verbrauch

KI Bildbearbeitung 

VN KI Bild Erweiterung kostenpflichtig

Mit dieser Erweiterung könnt ihr eure Projektbilder bequem von einer KI überarbeiten lassen oder vollständig neue Bilder erstellen. Die KI leistet dabei wertvolle Dienste: Sie führt jede Art von Überarbeitung durch — einschließlich des Freistellens — schnell und mühelos.

Dafür könnt ihr entweder zwei lokale KI‑Modelle verwenden, die eine leistungsstarke Grafikkarte erfordern, oder eine Online‑KI wie das Modell „Nano Banana“ von Google Gemini nutzen. Den Link zum API‑Schlüssel findet ihr oben.

Zur Verarbeitung der Bilder in dieser Erweiterung wird zusätzlich das Programm „VN KI Bild“ gestartet. Den Downloadlink zur benötigten EXE-Datei, die ihr zuvor auf eurem Computer installieren müsst, findet ihr beim Erwerb der Erweiterung. Das Programm wird bei Nutzung der Erweiterung „VN KI Bild“ automatisch gestartet.
Weiter ↓

VN KI Bild

Erweiterung VN KI Bild - Weiter ↓

Bild erstellen

VN Designer

Bild erstellen

Gebt der KI einfach einen Prompt, der beschreibt, was geschehen soll. In diesem Beispiel soll ein neues Bild eines Strandes auf den Malediven erzeugt werden.

Aus den verfügbaren Einstellungen habe ich das breite Seitenverhältnis 21:9 und die Auflösung 1K (statt 2K oder 4K) gewählt.

Weiter ↓

Bild erstellt

VN Designer

Bild von KI erstellt

Diese Bild wurde hier innerhalb von etwa 15 Sekunden erzeugt.

Es kann sofort im Verzeichnis /assets/images/ gespeichert und weiterverwendet werden. Das Bild gehört euch und ist einmalig.

Die Kosten für die KI sind minimal: Für die Erzeugung eines solchen Bildes fallen weniger als 10 Cent an. Ihr müsst allerdings ein Guthaben bei Gemini hinterlegt haben.

VN KI Bild ↑