hbk-bs · github-classroom · Jul 23, 2024 · Jul 23, 2024 · Sep 3, 2024 · Sep 4, 2024
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,8 @@
 MIT License
 
-Copyright (c) 2024 Fabian Morón Zirfas
+Copyright (c) 2024 <Anne Fiedler>
+
+All images are property of their respective owner.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,3 +1,16 @@
-# DON'T FORGET THE README! Explain what I will find here. Link your projects!
+Diese Webseite von Anne Fiedler zeigt die Dokumentation des Moduls "Grundlagen der digitalen Kommunikation 2" bei Fabian Morón Zirfas an der HBK Braunschweig.
 
-- DONT FORGET THE LICENSE!
+Bei der Auseinandersetzung mit KI habe ich drei Projekte entwickelt, welche auf dieser Seite zu finden sind. 
+
+Das 1. Projekt war zu Googles Teachable Machine, bei dem ich ein Quiz zu der Unterscheidung von fotorealistischen Zeichnungen zu Fotos erstellte. Auf Grund von fehlenden Bildrechten ist die Webseite zu diesem Projekt nicht online zu finden.
+
+
+Das 2. Projekt zu larch language models findet man hier:
+https://postcard-writer.netlify.app/ 
+sowie den code dazu auf github hier: 
+https://github.com/hbk-bs/llm-anne2810.git. 
+Bei diesem Projekt habe ich einen Postkartenschreiber entwickelt.
+
+Das 3. Projekt habe ich mit Mirea Černota (https://github.com/Mirea26) zusammengemacht und zeigt eine generierte graphic novel. Diese ist hier zu finden: https://das-atmende-zimmer.netlify.app/
+der dazugehörige Code ist hier:
+ https://github.com/hbk-bs/a-generative-story-mireanne.git.
diff --git a/about.html b/about.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dokumentation</title>
+ <link rel="stylesheet" href="style.css">
+
+<link rel="icon" href="favicon.ico">
+
+
+</head>
+<body>
+
+
+<header>
+ <a href="index.html" class="left-link">zurück</a>
+ <h1>About</h1>
+
+</header>
+<main>
+
+<p> Hallo, ich bin Anne, 
+</p>
+<p>ich studiere Visuelle Kommunikation im 2. Semester an der Hochschule für Bildende Künste Braunschweig,
+ diese Seite zeigt meine Dokumentation aus dem Modul "Grundlagen der digitalen Kommunikation 2" bei Fabian Morón Zirfas.
+</p>
+<p>
+ Im Sommersemester 2024 ging es um das Thema Künstliche Intelligenz.
+
+ Neben moralischen Fragen ging es vor allem darum zu lernen, wie wir mit KI umgehen können.
+</p>
+<p>Entstanden sind dabei drei Projekte, welche hier dokumentiert sind.
+</p>
+
+</main>
+
+<footer class="footer">
+ <p>Anne Fiedler | Grundlagen der digitale Kommunikation | 2. Semester 2024 | Bei Fabian Morón Zirfas</p>
+</footer>
+
+
+
+ <script src="index.js"></script>
+
+</body>
+</html>
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/12.png b/images/12.png
diff --git a/images/2.jpg b/images/2.jpg
diff --git a/images/3.png b/images/3.png
diff --git a/images/7.png b/images/7.png
diff --git a/images/llm.JPG b/images/llm.JPG
diff --git a/images/story-1.png b/images/story-1.png
diff --git a/images/story-2.png b/images/story-2.png
diff --git a/images/story.JPG b/images/story.JPG
diff --git a/images/tm.JPG b/images/tm.JPG
diff --git a/index.html b/index.html
@@ -3,12 +3,103 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
+ <title>Dokumentation</title>
  <link rel="stylesheet" href="style.css">
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+
+<link rel="icon" href="favicon.ico">
+
+
 </head>
 <body>
- <h1>make me your own!</h1>
+
+
+<header>
+ <a href="about.html" class="right-link">about</a>
+ <h1>Dokumentation</h1>
+ <h3> Anne Fiedler | Grundlagen der digitalen Kommunikation </h3>
+</header>
+<main>
+
+<p>Im 2. Semester des Moduls "Grundlagen der digitalen Kommunikation" ging es um das Thema Künstliche Intelligenz. 
+</p>
+<p>
+ Das Thema hat viele Fragen aufgeworfen und gleichzeitig einen tieferen Einblick in die Thematik ermöglicht. 
+ Dabei stehen besonders die Möglichkeiten der Künstlichen Intelligenz im Fokus: 
+ Kann KI den Menschen ersetzen, oder dient sie lediglich als weiteres Hilfsmittel? 
+ Auch der Wert von KI-generierter Kunst wird hinterfragt. 
+ Wie lässt sich mit KI ein gewünschtes Ergebnis erzielen, und welche Fähigkeiten sind dafür erforderlich?
+
+</p>
+<p>
+ Zur Annäherung an diese Fragen und zum Experimentieren mit Künstlicher Intelligenz wurden drei größere Projekte durchgeführt: 
+ angefangen mit Teachable Machines, über Sprachmodelle (Larch Language Models) bis hin zu einer generierten Graphic Novel.
+
+</p>
+
+<div class="image-gallery">
+ <div class="image-container">
+ <div class="image">
+ <a href="teachablemachine.html">
+ <img src="/images/tm.JPG" alt="Bild von Teachable Machine Projekt" />
+ <div class="overlay"><h5>Teachable Machine</h5></div>
+ </a>
+ </div>
+ </div>
+
+ <div class="image-container">
+ <div class="image">
+ <a href="llm.html">
+ <img src="/images/llm.JPG" alt="Bild von Large Language Model Projekt" />
+ <div class="overlay"><h5>Large Language Model</h5></div>
+ </a>
+ </div>
+ </div>
+
+ <div class="image-container">
+ <div class="image">
+ <a href="story.html">
+ <img src="/images/story.JPG" alt="Bild von Graphic Novel Projekt" />
+ <div class="overlay"><h5>Graphic Novel</h5></div>
+ </a>
+ </div>
+ </div>
+</div>
+
+
+<p>
+ Die Arbeit mit Künstlicher Intelligenz eröffnet zahlreiche neue Möglichkeiten und zeigt eine beeindruckende Vielfalt an Anwendungsmöglichkeiten. 
+ Durch die durchgeführten Projekte konnte festgestellt werden, dass KI in der Lage ist, viele Prozesse zu vereinfachen und zu beschleunigen. 
+ Dennoch bleibt der menschliche Beitrag unverzichtbar. 
+ Das Training einer KI erfordert erhebliche Geduld, um die gewünschten Ergebnisse zu erzielen. 
+ Darüber hinaus ist ein fundiertes Verständnis der Materie notwendig, um präzise Eingaben zu machen und die Qualität der Ergebnisse 
+ angemessen beurteilen zu können.
+ Es ist zu erwarten, dass KI in der Lage ist, bestimmte Arbeitsplätze zu ersetzen. 
+ Meiner Meinung nach, bestehen trotzdem stets die Notwendigkeit, kompetente Fachkräfte zu haben die die Arbeit der KI bewerten und sinnvoll nutzen können. 
+ KI sollte als Werkzeug betrachtet werden, das in spezifischen Bereichen von Nutzen ist.
+ </p> 
+ <p>
+ Im Bereich der generierten Kunst, sehe ich keinen hohen Stellenwert im Vergleich zu menschlich geschaffener Kunst. 
+ Obwohl die Erstellung von KI-generierten Bildern eine gewisse Eigenleistung erfordert, denke ich dass die meisten Leute heutzutage die 
+ von Hand erzeugte Kunst mehr wertschätzen. 
+ Dies liegt daran, dass menschliche Kunstwerke in der Regel mit Geschichte, Emotionen, Zeitaufwand und kreativen Gedanken verbunden sind. 
+ KI-generierte Kunst hingegen basiert auf bestehenden Daten und reproduziert hauptsächlich bereits vorhandenes Material, 
+ wodurch sie wenig Einzigartigkeit vorweist.
+ </p>
+ <p>
+ Zusammenfassend lässt sich sagen, dass KI ein leistungsfähiges Werkzeug ist, das in vielen Bereichen unterstützend wirken kann, 
+ wenn es verantwortungsvoll eingesetzt wird.
+
+
+</p>
+</main>
+
+<footer class="footer">
+ <p>Anne Fiedler | Grundlagen der digitalen Kommunikation | 2. Semester 2024 | Bei Fabian Morón Zirfas</p>
+</footer>
+
+
+
  <script src="index.js"></script>
+
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,23 +1,3 @@
 document.addEventListener('DOMContentLoaded', () => {
- let dark = false;
- setInterval(() => {
- document.body.style = dark
- ? 'background-color:black'
- : Math.random() > 0.4
- ? 'background-color:#ff6347'
- : 'background-color:white';
- dark = !dark;
- document.querySelector('h1').style = dark
- ? Math.random() > 0.6
- ? 'color: white'
- : 'color: black'
- : 'color: #ff6347';
- document.title = dark
- ? Math.random() > 0.5
- ? 'Huh?'
- : '🍅'
- : Math.random() < 0.6
- ? 'hihihihih!'
- : 'HAH!';
- }, 1000);
+
 });
diff --git a/llm.html b/llm.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Large Language Models</title>
+ <link rel="stylesheet" href="style.css">
+
+<link rel="stylesheet" href="favicon.ico">
+
+
+</head>
+<body>
+ <header>
+ <a href="index.html" class="left-link">zurück</a>
+ <h1>Large Language Model</h1>
+ </header>
+ <main>
+
+
+ <p></p>
+ <h4>Definition </h4>
+
+ <p>Large Language Models (LLMs) sind fortschrittliche KI-Systeme, die mithilfe von maschinellem Lernen große Mengen an Textdaten analysieren, 
+ um Sprache zu verstehen und zu generieren. Sie sind darauf trainiert, Muster in Texten zu erkennen und können vielfältige Aufgaben 
+ wie Textvervollständigung, Übersetzung und Beantwortung von Fragen durchführen. Sie sind in der Lage,
+ menschenähnliche Texte zu produzieren, indem sie kontextbezogene Informationen nutzen.
+ Beispielsweise GPT-3 (Generative Pre-trained Transformer 3) ist ein LLM, der von OpenAI entwickelt wurde. 
+
+</p>
+<h4> Funktionsweise</h4>
+
+<p> Um LLMs in eigene Webseiten einzubinden, kann die API von OpenAI genutzt. 
+ Die API ermöglicht es, sie so zu trainieren, dass nur bestimmte Texte generiert werden.
+ So kann man die Texte auf bestimmte Themen oder Stile anpassen, 
+ so dass sie auf die Bedürfnisse der eigenen Webseite passen und nicht zu allgemein sind.
+
+ </p>
+
+ <h6>Projekt</h6>
+ <p>
+ <a href="https://postcard-writer.netlify.app/">Hier</a> 
+ gehts zu der Webseite.
+ </p>
+<h4>Die Idee</h4>
+<p>Viele kennen das Problem: Man möchte zu einem besonderes Ereignis eine Postkarte verschicken, 
+ findet aber nicht die richtigen Worte oder verwendet immer wieder dieselben Phrasen, 
+ wie bei Weihnachtskarten. Um dieses Problem zu lösen, wurde eine Webseite entwickelt, 
+ die personalisierte Postkartentexte erstellt. 
+ Man gibt einfach die Namen und das Ereignis ein, und die Webseite generiert einen passenden Text. 
+ So haben die Nutzer immer die richtigen Worte zur Hand und schreiben vielleicht wieder öfter Postkarten. 
+
+</p>
+ <h4>Vorgehensweise</h4>
+<p>
+ Die entwickelte Webseite ermöglicht es den Nutzern, Namen und Ereignisse einzugeben, 
+ um personalisierte Texte zu generieren. 
+ Das Sprachmodell (LLM) wurde so trainiert, 
+ dass es stets relativ kurze, an den eingegebenen Namen und das Ereignis angepasste Texte erstellt. 
+ Bei jeder Betätigung der „Senden“-Schaltfläche wird ein neuer, einzigartiger Text generiert. 
+ Zudem wurde sichergestellt, dass die Texte stets eine positive Stimmung aufweisen und entsprechende Emojis enthalten.
+</p>
+<h4>Schwierigkeiten</h4>
+<p> Leider war es nicht möglich, die Texte auf Deutsch zu generieren, da die meisten LLMs primär oder ausschließlich auf Englisch trainiert sind. 
+ Die größte Herausforderung bestand darin, ausschließlich Postkartentexte zu erhalten, 
+ sodass das Modell beispielsweise nicht auf Fragen reagierte, die in den Spalte eingegeben wurden. 
+ Insgesamt war sehr viel Experimentieren erforderlich, um die gewünschten Ergebnisse zu erzielen.
+
+
+</p>
+<h4>Darstellung</h4>
+<p> Das Design der Webseite ist bewusst einfach gehalten und verwendet eine Schreibmaschinenschriftart, 
+ um einen nostalgischen Charakter zu vermitteln.
+
+</p>
+<h4>Weiterentwicklung</h4>
+<p>Die Webseite könnte in Zukunft um weitere Funktionen erweitert werden, 
+ beispielsweise könnten verschiedene Stile oder Verwandtschafts- und Bekanntschaftsstufen zur Auswahl gestellt werden, 
+ um die Texte noch besser an die Nutzer anzupassen. 
+ Möglich wäre auch das Layouten der Texte auf der Postkarte und vielleicht ein Bildgenerator für die Vorderseite der Karte.
+ Auch wäre es hilfreich, wenn die Nutzer die generierten Texte noch weiter anpassen könnten, durch Auswählen 
+ von Textstellen, die sie nicht mögen oder durch Hinzufügen von eigenen Textstellen.
+
+</p>
+
+<h4>Mögliche Anwendungen</h4>
+<p>Aber nicht nur zum Generieren von Postkartentexten können LLMs genutzt werden, sie könne in fast jedem Bereich der Textgenerierung eingesetzt werden.
+ Beispielsweise in der Kundenkommunikation, um automatisch auf Anfragen verschiedener Sprachen zu antworten.
+ In der Journalismus- und Medienbranche können sie zum Beispiel bei der Berichterstattung über aktuelle Ereignisse oder 
+ bei der Erstellung von Zusammenfassungen aus Rohdaten eine wichtige Rolle spielen.
+
+
+</p>
+
+<h4>Fazit</h4>
+<p>Die Arbeit mit LLMs hat mir gezeigt, wie vielfältig KI eingesetzt werden kann.
+ Es ist faszinierend, wie LLMs menschenähnliche Texte generieren können und wie sie in der Lage sind, komplexe Aufgaben zu bewältigen.
+ Allerdings ist es auch wichtig sicherzustellen, dass sie verantwortungsbewusst eingesetzt werden.
+ Eine Postkarte die mit KI geschrieben ist, kann lustig sein aber natürlich nicht die persönliche Note ersetzen.
+ Durch dieses Projekt habe ich gelernt, LLMs in die eigene Webseite einzubauen und sie für spezifische Aufgaben zu trainieren.
+</p>
+</main>
+<footer class="footer">
+ <p>Anne Fiedler | Grundlagen der digitalen Kommunikation | 2. Semester 2024 | Bei Fabian Morón Zirfas</p>
+</footer>
+
+
+ <script src="index.js"></script>
+
+</body>
+</html>