Teil 1: Spielwiese für Programmierer
Habe kein
-Bild Regenbogen anders im Beitrag angehängt, weil die Forum-Software die gif-Animation nach dem Hochladen zum Zucken gebracht hat, was auf Dauer ungesund für die Augen sein kann. Unten der Quelltext dazu zum "Selberbauen". Den HTML-Quelltext einfach als Textdatei mit der Endung .html speichern und im Browser öffnen. Die Beschreibung für AgentGPT habe ich bei Wikipedia abgeschrieben:Es ist nicht das gewünschte Ergebnis, kein Regenbogen geworden - wie es mit den Geschenken unter dem Weihnachtsbaum passieren kannRegenbogen-Promt für AgentGPT hat geschrieben:Male bitte einen Regenbogen. Gemeinthttps://de.wikipedia.org/wiki/Regenbogen hat geschrieben:... ist atmosphärisch-optisches Phänomen, das als kreisbogenförmiges farbiges Lichtband in einem von der Sonne beschienenen Regenschauer erscheint.
, aber für einen ersten Versuch des Sprachmodells finde ich das Ergebnis beeindruckend 
. Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<title>Rainbow created with AgentGPT https://agentgpt.reworkd.ai</title>
<style>
body {
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rainbow {
width: 300px;
height: 300px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
border-radius: 50%;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="rainbow"></div>
</body>
</html>HCTouch Social Enterprise Logo
Beim Wortschatz für diese Aufgabe hat ChatGPT noch Luft nach oben, aber mit dem Layout hat ChatGPT mit dem ersten Versuch in's Schwarze getroffen - das Layout, die Farbgestaltung, die Inhalte - alles wie ich es mir vorgestellt und im Prompt beschrieben habe
.Und hier eine Simple Tasteninteraktion mit SVG und JavaScript mit ChatGPT.
Das Projekt "Simple Tasteninteraktion" habe ich angefangen mit dem Ziel, ein Programm zu erstellen, das mir hilft die Tastenkürzel einzuüben, die ich brauche. Diese fünf Tasten repräsentieren die Grundfunktionalität, die ich nur nach und nach an die von mir benötigte Tastenkürzel für Tastenkürzel-Trainings anknüpfen muss.
Spielregel: In einer beliebigen Reihenfolge die Tasten 1, 2 und 3 anklicken. Darauf achten, dass vor dem Klick der Mauszeiger sich in eine Hand verwandelt. Sobald man alle drei Tasten nacheinander angeklickt, getriggert hat, färbt sich der Pfeil oben gelb.
Die gelbe Taste färbt sich wieder grau sobald man auf die gelbe Fläche klickt. Dann kann man die Interaktionsübung von vorne beginnen. Die SVG-Zeichnung und das JavaScript für dieses Programm hat fast komplett ChatGPT generiert. Nur die Platzierung von Tasten auf der Fläche entsprechend eigenen Vorstellungen wurde von Menschenhand direkt im SVG-Quellcode realisiert, da dies zeitsparender ist im Vergleich zur Variante, bei der man diese Veränderungen versucht für das Sprachmodell mit einem Prompt-Text zu beschreiben. Kenntnisse in HTML und SVG sind also für die Feinjustierung in diesem Beispiel notwendig.
Code: Alles auswählen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Tasteninteraktion mit SVG und JavaScript</title>
<style>
svg {
border: 1px solid black;
}
rect {
cursor: pointer;
}
.success {
fill: yellow !important;
}
p {
font-family: Arial;
line-height:130%
}
h1
</style>
</head>
<body>
<h1 style="font-family: Arial; line-height:130%"">Simple Tasteninteraktion mit SVG und JavaScript</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="1300" height="600" viewBox="0 0 1300 600">
<style>
text {
font-family: Arial, sans-serif;
font-size: 16px;
text-anchor: middle;
dominant-baseline: central;
}
rect {
fill: #f3f3f3;
stroke: #000;
stroke-width: 2;
}
</style>
<!-- Bild Up/ Down -->
<g>
<rect x="100" y="110" width="60" height="60" id="receiver1"/>
<text x="130" y="140">↓</text>
<rect x="100" y="50" width="60" height="60" id="receiver2"/>
<text x="130" y="80" >↑</text>
</g>
<!-- Richtungstasten (rechts angeordnet) -->
<g>
<rect x="100" y="340" width="60" height="60" id="upSender1"/>
<text x="130" y="370">↑</text>
<rect x="160" y="400" width="60" height="60" id="down3"/>
<text x="195" y="430">3 →</text>
<rect x="100" y="400" width="60" height="60" id="down2"/>
<text x="130" y="430">2 ↓</text>
<rect x="40" y="400" width="60" height="60" id="down1"/>
<text x="78" y="430">1 ←</text>
</g>
</svg>
<script>
// IDs der Tasten
const buttonsArray = ['down1', 'down2', 'down3'];
let clickedButtons = new Set();
const receiver1 = document.getElementById('receiver1');
// Funktion für das Färben des Empfängers receiver1
function checkIfAllClicked() {
if (clickedButtons.size === buttonsArray.length) {
receiver1.classList.add('success');
}
}
// Funktion für das Färben des Empfängers receiver2
function checkIfAllClicked2() {
if (clickedButtons.size === buttonSingle.length) {
receiver2.classList.add('success');
}
}
// Event-Listener für die Richtungstasten
buttonsArray.forEach(buttonId => {
document.getElementById(buttonId).addEventListener('click', () => {
clickedButtons.add(buttonId);
checkIfAllClicked();
});
});
// Event-Listener für den Empfänger receiver1
receiver1.addEventListener('click', () => {
if (receiver1.classList.contains('success')) {
receiver1.classList.remove('success');
clickedButtons.clear();
}
});
</script>
<p>
<b>Spielregel:</b> In einer beliebigen Reihenfolge die Tasten 1, 2 und 3 anklicken. Darau achten, dass beim Klick der mauszeiger sich in eine hand verwandelt. Sobald man alle drei Tasten nacheinander angeklickt, getriggert hat, färbt sich der Pfeil oben gelb.
</p>
<p>Die gelbe Taste färbt sich wieder grau sobald man auf die gelbe Fläche klickt. Dann kann man die Interaktionsübung von vorne beginnen. Die SVG-Zeichnung und das JavaScript für dieses Programm hat fast komplett ChatGPT generiert. Nur die Platzierung von Tasten auf der Fläche entsprechend eigenen Vorstellungen wurde von Menschenhand direkt im SVG-Quellcode realisiert, da dies zeitsparender ist im Vergleich zur Variante, bei der man diese Veränderungen versucht für das Sprachmodell mit einem Prompt-Text zu beschreiben. Kenntnisse in HTML und SVG sind also für die Feinjustierung in diesem Beispiel notwendig.
</p>
</body>
</html>
SVG-Quellcode . Einfach als Text-Datei mit der Endung .svg speichern und im geeigneten Betrachter öffnen. Bei mir ist es GNOME-Bildbetrachter.
= Teil 2: Für eine gemütliche Plauderrunde nach dem Kaffee und Kuchen
Den Text unten hat ChatGPT aus ein Paar Text-Rohlingen, die ich als Prompt eingegeben habe, mit lustigen Icons angereichert und lesefreundliche Variante - wie nun mal der ChaGPT die Lesefreundlichkeit beigebracht wurde - aus diesen Text-Rohlingen erstellt.
> von ChatGPT generierter Text Anfang
Philosophische Gedanken – GPT und die neue Kommunikationsära
Vergleichbar mit der Erfindung der Sprache und des Buchdrucks?Ja, genau das! So wie der Buchdruck Wissen für viele Menschen zugänglich machte, senken *GPT-Modelle die Schwelle zum Wissen. Ein guter „Prompt“ ist wie ein Schlüssel zu riesigen Wissensschätzen.
- Vergleich: Feuerstein und Prompt-Text:
Vor tausenden Jahren erschlossen Menschen mit Feuerstein neue Energiequellen. Heute tun wir das mit guten Prompts: Sie entzünden Ideen, öffnen Türen zu komplexem Wissen und inspirieren zu kreativen Höhenflügen.
Infrastruktur durch Niedrigschwelligkeit:Erinnert euch ans Auto: Erst die breite Nutzung hat Straßen und Verkehrsregeln hervorgebracht. Genauso wird *GPT erst dann sein volles Potenzial entfalten, wenn es massentauglich und niederschwellig wird. Aber:
Verantwortung!
Die Verbreitung von *GPT-Werkzeugen fordert uns heraus: Können wir sie verantwortungsvoll nutzen? Was ist mit der CO₂-Bilanz? Hier liegt eine Aufgabe für uns alle!
Verantwortung!Sorgt demnächst eine "Bertha Benz"-ähnliche Aktion dafür, dass die Popularität und Massentauglichkeit von *GPT und Co. weiter steigen
?[1] Fernfahrt von Bertha Benz (1888) - https://www.mercedes-benz.com/de/innovation/meilensteine/unternehmensgeschichte/
[2] Verschlimmert ChatGPT die Klimakrise? Experten warnen, 23.02.2023 - https://utopia.de/chat-gpt-und-die-klimakrise-experten-warnen_474199/
[3] Golem - https://de.wikipedia.org/wiki/Golem
Ich bin gespannt auf die Rückmeldungen
.
.
. Und diese Begriffe als Synonyme zu verwenden kann mMn kann nur für unnötige Verwirrung sorgen 
MMn sind es keine Halluzinationen, sondern ein IT-System, das gestört ist und nicht ordnungsgemäß funktioniert. Genauso, wie bei einer Webseite oder bei einer App zu Fehlfunktionen kommen kann. Nur wenn diese Fehlfunktion als technische Störung gesehen und behandelt wird, dann werden routinemäßig entsprechende Maßnahmen eingeleitet: