VN Umbau

[Volker]

Ha ha ha

Next Tool from Volker

Coode umbauen lassen, block auswählen und los geht - Tommy Testen !!!!!!!

vn-umbau
https://www.niederastroth.de/mobirisebl ... t=VN+Tools

Video heute Abend

[Volker]

So,

der liebe Volker legt dann jetzt auch mal eine schöpferische Pause ein
Ich will Euch ja auch nicht mit den vielen Tools überfordern
Da Tommy eh der einzige ist der mir ernsthaftes Feedback gibt und sich die Mühe macht alles oder fast alles zu testen, denke ich ist es an der Zeit mal wieder kürzer zu treten, zumal ich den Eindruck habe ich baue Tools die nicht wirklich gebraucht werden, bzw. keine Verwendung bei den Forums Mitgliedern finden.

viewtopic.php?t=2199

Also PAUSE !!

[Tommy Herrmann]

Warum finde ich "VN Umbau" nicht unter der Rubrik "VN Tools" - nur wenn ich danach suche erscheint es???

Habe den Download - aber gucke mal warum das so ist.

[Tommy Herrmann]

Hier gab es eine Fehlermeldung bei einem ganz simplen "nur" Textblock von Groq. Dieser Code wurde nicht akzeptiert, da es "uname_*" nicht gibt:

Code: Alles auswählen

<h3 class="mbr-section-title mbr-fonts-style mb-4 display-2" mbr-if="this | fakeFilter uname__6 _params.showTitle" data-app-selector=".mbr-section-title" mbr-class-var="uname__7" mbr-on-change-theme-style="uname__8" data-app-edit="content" mbr-static-html="uname__9" mbr-content-edit="uname__9" data-app-placeholder="Type Text" mbr-on-change-component-node="uname__10" data-app-remove-it="true" data-class-var="display-2" style="display: none;">
    <b>Tutorial</b>
</h3>

Ich weiß sowieso überhaupt nicht was die KI da in das <h3> Tag gepackt hat, das Original sieht so aus

Code: Alles auswählen

<h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
    <b>Tutorial</b>
</h3>

[Tommy Herrmann]

Google-Gemini (bezahlte Version) kam bei dem gleichen HTML Code diese Meldung:

Die Antwort war kein gültiges JSON. Das Modell gemini-pro-latest eignet sich dafür womöglich nicht - in den Einstellungen ein anderes wählen.

Ich hatte allerdings auch unten diesen Sonderwunsch formuliert:

ändere das <h3> Tag in die Farbe Rot.

[Tommy Herrmann]

Google-Gemini (bezahlte Version) kam bei dem gleichen HTML Code diese Meldung:

Die Antwort war kein gültiges JSON. Das Modell gemini-pro-latest eignet sich dafür womöglich nicht - in den Einstellungen ein anderes wählen.

Ich hatte allerdings auschließlich unten diesen Sonderwunsch formuliert:

ändere das h3 Tag in die Farbe Rot

[Volker]

Probier mal groq was der sagt gleiches prompt

[Tommy Herrmann]

Volker,

Ich befürchte, dass diese App "VN Umbau" noch überhaupt nicht funktioniert - hast Du denn mal ein Beispiel was funktioniert hat?

Ich stelle daher erst einmal meine Tests ein.

[Volker]

Bei der Modellwahl habe ich openai/gpt-oss-120b als zweite Wahl ergänzt — das hat bei Groq mehr Spielraum als die Llama-Modelle.

Für große Blöcke ist Gemini ohnehin die bessere Wahl; Groq lohnt sich, wenn es schnell gehen soll und der Block überschaubar ist.

Bitte erneut runter laden und testen

Achtung !!! Im Moment bitte den Code per Hand einfügen, das Auslesen des Blocks hat Fehler

[Tommy Herrmann]

Code: Alles auswählen

& when not (@fullScreen) {
    padding-top: (@paddingTop * 1rem);
    padding-bottom: (@paddingBottom * 1rem);
}

& {
    overflow: hidden;
}

& when (@bg-type ='color') {
    background-color: @bg-value;
}

& when (@bg-type ='image') {
    background-image: url(@bg-value);
}
.mbr-fallback-image.disabled {
    display: none;
}
.mbr-fallback-image {
    display: block;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

    & when (@bg-type ='video') {
        background-image: url(@fallBackImage);
    }
}
& when (@fullWidth) {
    .container-fluid {
        padding: 0 16px;

        @media (max-width: 992px) {
            padding: 0 12px;
        }

        .row {
            padding: 0;
        }
    }
}

.container {
    @media (max-width: 992px) {
        padding: 0 20px;
    }
}

.row {
    & when (@showBorder) {
        border-top: 2px solid @border;
        border-bottom: 2px solid @border;
        margin-top: -2px;
    }
}

.card {
    padding: 0;

    &:first-child {
        .image-wrap {
            height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;

            & when (@showBorder) {
                border-left: 2px solid @border;

                & when not (@reverseContent) {
                    border-left: 0;
                    border-right: 2px solid @border;
                }
            }

            @media (max-width: 992px) {
                height: 280px;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-top-left-radius: 100%;

            }
        }
    }

    &:last-child {
        padding: 0 100px;
        justify-content: center;

        @media (max-width: 992px) {
            padding: 50px 20px;
        }
    }
}

.text-wrapper {
    .mbr-section-title {
        margin-bottom: 32px;
    }

    .mbr-text {
        margin-bottom: 64px;

        @media (max-width: 992px) {
            margin-bottom: 50px;
        }
    }
}

.mbr-section-title {
    color: #1d1d1d;
}

.mbr-text {
    color: #1d1d1d;
}

[Tommy Herrmann]

Volker,

Ich prüfe, wie das Tool die Blöcke und deren CSS zuordnet, und passe es so an, dass es möglichst direkt von der Arbeitsseite aus funktioniert. Anschließend erstelle ich Dir die vollständige .mbrext-Datei neu.

Zwei Fehler sind bereits klar: Das Tool greift beim Code-Editor einfach auf das erste gefundene HTML- und CSS-Feld zu, ohne deren Blockzugehörigkeit zu prüfen. Außerdem sucht es Vorlagen nur nach dem Blocknamen in sämtlichen installierten Themes – dabei können gleichnamige Blöcke verwechselt werden.

Ich ändere die Zuordnung auf den konkreten Block der geöffneten Seite. HTML und CSS sollen dabei immer gemeinsam neu geladen werden.

Ich habe auch einen direkten Zugriff auf Mobirises Seitendaten gefunden: Dort liegen HTML und CSS/LESS gemeinsam im Datensatz des jeweiligen Blocks. Damit entfällt das vorherige Öffnen des Code-Editors.

Die neue Fassung liest diese Daten direkt aus. Die Reihenfolge auf der Arbeitsseite berücksichtige ich getrennt davon, damit eine nach oben versetzte Navbar die Zuordnung nicht verschiebt.

Die überarbeitete Fassung ist fertig. Sie liest HTML und CSS/LESS aus demselben Blockdatensatz und behält auch Deine blockbezogenen Anpassungen bei. Fehlt CSS oder ist ein Block nicht eindeutig zuzuordnen, zeigt sie einen Hinweis statt der CSS eines anderen Blocks.

Ich prüfe jetzt noch die Blockwechsel, gleichnamige Blöcke und das Leeren alter Feldinhalte. Einen echten Importtest in Deiner Mobirise-Installation kann ich hier nicht durchführen.

Die bisherige Fassung konnte HTML und CSS aus unterschiedlichen Blöcken übernehmen oder eine gleichnamige Vorlage aus dem falschen Theme laden.

Das habe ich geändert:

HTML und CSS/LESS werden gemeinsam direkt aus dem ausgewählten Block der geöffneten Seite gelesen.
Der Code-Editor muss vorher nicht geöffnet werden.
Gleichnamige Blöcke werden anhand ihrer eindeutigen Blockkennung unterschieden.
Fehlende CSS führt zu einem Hinweis statt zur Anzeige fremder CSS.
Die splash.html ist ebenfalls aktualisiert.

Bitte nach dem Import Mobirise neu starten. Änderungen in einem bereits geöffneten Code-Editor zuerst dort übernehmen.

Prüfung: JavaScript-Syntax, Archiv und 17 simulierte Tests erfolgreich. Den tatsächlichen Funktionstest in Mobirise musst Du noch durchführen.

[Tommy Herrmann]

Volker,

der "VN Umbau" Anwendung funktioniert jetzt einwandfrei.

Der Code-Editor bleibt geschlossen. Der zu bearbeitende Block kann gewählt werden und die dazugehörige CSS ist nun korrekt.

Die Änderungen der KI sind natürlich individuell und nicht wirklich kontrollierbar. Daher habe ich die erste und einzig zur Zeit getestete Aufgabe sehr einfach gehalten:

Alles abgehakt - außer:

"Eigener Auftrag":

Bitte ändere die Farbe vom <h4> Tag in gelb und den Hintergrund vom Block in Schwarz


Getestet habe ich mit "Gemini-Pro" und auch mit "Groq-kostenlos" und es wurde genau das gemacht und nichts anderes.

Ich sende Dir gleich via PN den Download-Link. Bitte teste auch selbst.

Vielleicht solltest Du auch 10,00 Euro in die bezahlte Pro-Version investieren, die Token gehen sehr langsam runter. Ich habe jetzt gerade mal 1,00 Euro verbraucht.

Hier noch die geänderte "splash.html" zum lesen:

https://www.mobirise-tutorials.com/VN-B ... plash.html

[Volker]

Prima es klappt sehr gut

Also Feierabend und Pause für mich und Euch

PS: Tommy der ist und war immer in der VN Block Galerie - nur sind es jetzt so viel tools, das es Seite 2 gibt

PPS: 200 Blöcke hat der Niederastroth jetzt in seiner Galerie

200.PNG (27.59 KiB) 1792 mal betrachtet

[Tommy Herrmann]

Ach so - stimmt

Dadurch, dass das am kleinen Screen schon lange scrollt hat man jetzt nicht damit gerechnet, dass außerdem nun auch noch Seiten blättern angesagt ist.

Ich gehe mal davon aus, dass der neue Download vom "VN Umbau" jetzt am Server ist.

[Volker]

Ich gehe mal davon aus, dass der neue Download vom "VN Umbau" jetzt am Server ist.

Na logisch

[Tommy Herrmann]

ChatGPT generiert auch einen kostenlosen API-Key, der aber ebenso wenig funktioniert wie der von Gemini

Also habe ich nochmals 30 $ (25 Euro) auch dort hinterlegt

Wenn ich auf 5 $ runter bin, zieht ChatGPT dann automatisch wieder 20 $ ein, bis ich das unterbreche. Ansonsten sind bei ChatGPT auch viel kleinere Summen möglich.

Der Test lief dann ebenso reibungslos, nur 10 Mal so schnell wie bei Gemini.

Ich frage gerade nach wie ich das in Deinem Script auf das Modell meiner Wahl umstellen kann.


ChtaGPT hat geschrieben

Die aktuellen Standardpreise sind:

Modell 1 Million Eingabe-Tokens 1 Million Ausgabe-Tokens GPT-4o mini 0,15 $ 0,60 $ GPT-4o 2,50 $ 10,00 $

Bei gleicher Tokenmenge ist GPT-4o damit rund 16,7-mal so teuer. Quellen: GPT-4o mini, GPT-4o.
Angenommen, ein Umbau benötigt 10.000 Eingabe-Tokens für HTML, CSS und Arbeitsauftrag sowie 5.000 Ausgabe-Tokens für die Antwort:

Modell Kosten je Umbau Rechnerisch für 30 $ GPT-4o mini 0,0045 $ – unter einem US-Cent etwa 6.666 Umbauten GPT-4o 0,075 $ – 7,5 US-Cent etwa 400 Umbauten

Das ist ein Rechenbeispiel, keine Messung Deiner bisherigen Aufträge. Größere Blöcke und längere Antworten kosten entsprechend mehr; mögliche Cache-Rabatte sind nicht berücksichtigt.

Die Bearbeitungsdauer selbst wird hier nicht berechnet: Eine längere Wartezeit kostet nicht automatisch mehr.
Solange die Ergebnisse mit GPT-4o mini für Dich passen, würde ich dabei bleiben. Die größeren Ausgaben für GPT-4o lohnen sich für Dich erst, wenn es bei Deinen Aufgaben auch bessere Ergebnisse liefert.

[Volker]

Hui Tommy haut die Kohle raus
Nicht das Du morgen Pleite bist

Kannst du selber machen Tommy_

Code: Alles auswählen

openai: {
							titel: "ChatGPT",
							schluessel: "openaiKey",
							woher: "platform.openai.com/api-keys",
							ziel: "https://api.openai.com/v1/chat/completions",
							modelle: "https://api.openai.com/v1/models",
							art: "openai",
							bevorzugt: ["gpt-4o-mini", "gpt-4o"],
							grenze: 16384
						},

da einfach das Modell ändern

[Tommy Herrmann]

Nee - da kaufe ich dann Tante KI vorher

[Volker]

Ich könnte noch erweitern um eine lokale KI

Code: Alles auswählen

local: {
						titel: "Lokale KI (Ollama/LM)",
						schluessel: "localKey",
						woher: "localhost:11434",
						ziel: "http://localhost:11434/v1/chat/completions",
						modelle: "http://localhost:11434/v1/models",
						art: "openai",
						bevorzugt: ["llama3", "mistral", "deepseek-r1:8b", "phi3"],
						grenze: 8192
					},

[Tommy Herrmann]

Diese Abrechnung finde ich eigentlich sehr gut, da man nur das bezahlt, was man tatsächlich verbraucht. Mal sehen wie schnell das runter geht. Bei Gemini sind das nach inzwischen 20 Anfragen - für insgesamt 39 Cent.