Heute lernst du, wie man mithilfe von Künstlicher Intelligenz Bilder generiert. Du wirst erfahren, wie man ein HTML-Element erstellt, es stilvoll gestaltet und es mit JavaScript reaktiv macht.
Nachdem du das Programm gestartet hast, öffnen sich drei neue Browser-Tabs. Im ersten Tab, betitelt Bilder Generierung, findest du die Webseite, auf der du praktisch arbeiten wirst. Der zweite Tab, Aufgaben, enthält die dazugehörigen Übungen. Im dritten Tab, Svelte Chat, befindet sich ein Chatbot, den du zur Unterstützung heranziehen kannst. Dieser Chatbot kennt alle Aufgaben und deren Lösungen. Nutze den Chatbot, wenn du Hilfe bei einer Aufgabe benötigst, oder kontaktiere uns direkt.
Beginne nun mit den Aufgaben, indem du den Tab Bilder Generierung öffnest.
Füge der Webseite einen Titel mit dem Text Bild Generierung hinzu.
Ein Titel, auch Überschrift genannt, kann in HTML in sechs verschiedenen Größen dargestellt werden:
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>Dabei ist <h1> die größte Überschrift und <h6> die kleinste.
Du solltest den Titel über dem Forum einfügen:
<h1>Dein Titel</h1>
<!-- Form, Bild & Error -->Ersetze <h> durch ein geeignetes Überschrift-Tag, indem du die passende Größe (1-6) wählst.
<h1>Dein Titel</h1>
<!-- Form, Image & Error -->Ändere die Beschriftung des Buttons, der momentan Generate lautet.
Ein Button, im HTML als <button> bezeichnet, sieht wie folgt aus:
<button>
Button Beschriftung
</button>Dabei ist Button Beschriftung der Text, der auf dem Button dargestellt wird.
TIPP
Hier siehst du den Abschnitt, wo du die Beschriftung des Buttons verändern kannst.
<button
class="submit-button"
on:click={handleGenerate}
>
Neuer Button Text
</button><form
class="form"
on:submit|preventDefault
>
<!-- Eingabeaufforderung -->
<button
class="submit-button"
on:click={handleGenerate}
>
Neuer Button Text
</button>
</form>
<!-- Bild & Fehlermeldung -->Verändere den aktuellen Prompt "Eine siamesische Katze mit blauen Augen."
Experimentiere ein wenig mit dem Prompt und betrachte, wie sich die Ergebnisse verändern.
Hier siehst du, wo du den Prompt verändern sollst.
<script lang="ts">
// Importiere notwendige Quellen und initialisiere Variablen.
let prompt = "Eine siamesische Katze mit blauen Augen."; // <-- Hier Anpassungen vornehmen
// Funktion zum Auslösen der Generierung
</script>Verwende let prompt als Suchbegriff, nutze CTRL + F auf Windows & Linux oder Command + F auf MacOS, um zu suchen.
<script lang="ts">
let prompt = "Ein neuer Prompt.";
</script>Mit CSS kannst du die Erscheinung von HTML-Elementen anpassen, einschließlich ihrer Farbe, Form und Position.
Deine Aufgabe ist es, die Textfarbe, Hintergrundfarbe und Rahmenfarbe des Generierungsbuttons und des Eingabefelds für den Prompt zu ändern.
Zwei Klassen sind bereits vorgesehen und warten auf deine Anpassungen.
<style>
.prompt-input {
/* Füge deine Eigenschaften hier ein. */
}
.submit-button {
/* Füge deine Eigenschaften hier ein. */
}
</style>TIPP
Du kannst Eigenschaften wie background, color und border verwenden.
.class {
/* Du kannst die meisten Farben mit ihrem englischen Namen verwenden. */
background: red;
/* Gilt auch für Textfarbe. */
color: black;
/* Der Rahmen (border) setzt sich aus drei Werten zusammen. */
/* Erst wird die Dicke angegeben, z.B. 1px. */
/* Danach folgt der Stil des Rahmens. 'solid' für eine durchgezogene Linie, es gibt aber auch 'dotted' für gepunktet oder 'dashed' für gestrichelt. */
/* Zu guter Letzt die Farbe des Rahmens, die wie bei background und color, in den meisten Fällen in Englisch angegeben wird. */
border: 1px solid black;
}<style>
.prompt-input {
background: red;
color: green;
}
.submit-button {
background: orange;
color: white;
}
</style>Füge Margin und Padding dem Input und dem Button hinzu.
Du kannst die gleichen Klassen vor bei Aufgabe 4 verwenden.
Randabstand (Margin) und Innenabstand (Padding) dienen beide dazu, zusätzlichen Platz um ein Element herum zu schaffen.
Um das besser zu veranschaulichen, sieh dir dieses Bild an:
Betrachten wir zunächst die orangefarbene Fläche - das ist der Inhalt, z.B. bei einem <p>-Tag wäre das der Text.
Direkt um den Inhalt herum befindet sich eine gelbe Zone, das Padding. Diese Zone liegt zwischen dem Rahmen (Border) und dem Inhalt. Wenn du die Hintergrundfarbe eines Elements festlegst, wird sowohl der Inhalt als auch der Innenabstand (Padding) beeinflusst.
Die blauen Linien stellen den Rahmen (Border) dar und grenzen unser Element vom Rest der Webseite ab. Diesen Rahmen hast du eventuell bereits angepasst.
Die weiße Fläche, das Margin, definiert den Mindestabstand zum nächsten Element.
So wendest du Padding und Margin an:
<div class="container">
<!-- Inhalt -->
</div>
<style>
.container {
padding: 8px; /* Anpassung möglich */
margin: 8px; /* Anpassung möglich */
}
</style><style>
.prompt-input {
margin: 4px;
padding: 4px;
}
.submit-button {
margin: 4px;
padding: 4px;
}
</style>Setze den Hintergrund des Lösch Buttons auf rot.
Dir wurde bereits eine Klasse zur Verfügung gestellt.
<style>
.delete-button {
/* Füge deine Eigenschaften hier ein. */
}
</style><style>
.delete-button {
background: red;
}
</style>Füge wie bei Aufgabe 5 Platz um den Lösch Button herum.
Du kannst die gleiche Klasse wie bei Aufgabe 6
<style>
.delete-button {
padding: 4px;
margin: 4px;
}
</style>Füge einen Rand um jedes Bild und runde die Ecken ab.
Hierzu kannst du border und border-radius erneut benutzen.
<style>
.image-container {
border: 1px solid black;
border-radius: 4px;
}
</style>Füge ein Grid um die Bildergalerie hinzu.
Hierzu musst du die Bilder Galerie in einem <div> ummanteln.
Dazu musst du ihm eine Klasse geben und folgende Styles auf dieser Klasse setzen
<style>
.image-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
</style><style>
.image-gallery /* Can change */ {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
</style>Ein Lade-Indikator wird verwendet, um anzuzeigen, dass etwas gerade geladen wird.
Hier siehst du ein Beispiel dafür:
In deinem Fall soll jedoch ein Text eingesetzt werden, um zu signalisieren, dass das Bild momentan erstellt wird.
Nutze für diese Aufgabe eine Variable und eine if-Bedingung.
Wir haben dir schone eine Variable, loading, zu Verfügung gestellt. Diese kannst du wie folgt benutzen
{#if $loading}
<p>Wird generiert...</p>
{/if}Setze den Lade Text am besten zwischen das Form un die Bilder.
<div class="app">
<!-- Formular -->
{#if $loading}
<p>Wird generiert...</p>
{/if}
<!-- Bild & Fehlermeldung -->
</div>Wir empfehlen den Chatbot spätestens hier zu gebrauchen!
Ein Alt-Text ist bei Bildern im Internet wichtig, falls das Bild nicht geladen werden kann oder für Personen mit Sehbehinderungen, die auf Deine Webseite zugreifen. Ersteres kann z. B. geschehen, wenn die Internetverbindung zu langsam ist oder das Bild aus irgendeinem Grund nicht mehr verfügbar ist.
Setze den Alt-Text des Bildes auf den Text des Prompts.
In Svelte ist es möglich, den Wert einer Variablen dynamisch als Attribut in Elemente einzufügen.
Hier ein Beispiel:
<script>
let altText = "Ein Bild von einer Katze";
</script>
<img alt="{altText}" />Indem man { und } in einem Attribut verwendet, kann man Variablen einfügen.
<div class="app">
<!-- Formular & Laden -->
<img
class="image"
src={url}
alt={prompt}
/>
<!-- Fehlermeldung -->
</div>Du hast alles erledigt, frage uns für weitere Aufgaben.