AI follow up: continuation (#83)

* od 4 do 6

* few small code adjustments

* little joke added

* od 5 do 7

* formatting fixes + new slide

* further work

* formatting fixes

* Linked follow-up from README

* moar images

* uwagi od Leny Sędkiewicz :)

* praktyka

* feat: bonusowe slajdy na zakonczenie

* formatowanie

* wincyj formatowania

* feat: tresc bonusowych slajdow na koniec

* zmiana kolorów

* changed specificity of one selector

---------

Co-authored-by: Daria Puchnarewicz <d.puchnarewicz@rynekpierwotmy.pl>
Co-authored-by: soofka <pansoofka@gmail.com>

follow-ups/ai-assisted-coding/dist/custom.css

@@ -355,4 +355,18 @@ figure a:before {
   background: rgba(255, 255, 255, 0.4);
   padding: 0.2em 0;
   border-radius: 15px;
+}
+
+code.prompt::before {
+  content: "\f120";
+  font-family: 'FontAwesome';
+  margin-right: 0.5em;
+}
+
+code.prompt {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.5em;
+  border-radius: 5px;
+  display: flex;
+  text-align: left;
 }

follow-ups/ai-assisted-coding/index.html

@@ -50,7 +50,7 @@ <h3 class="fragment grow">Cześć!</h3>
 			<section data-markdown="slides/06_prompt-engineering.md" data-separator-vertical="^\r?\n\r?\n\r?\n"></section>
 			<section data-markdown="slides/07_bezpieczenstwo_i_etyka.md" data-separator-vertical="^\r?\n\r?\n\r?\n"></section>
 			<section data-markdown="slides/08_praktyka.md" data-separator-vertical="^\r?\n\r?\n\r?\n"></section>
-			<!-- <section data-markdown="slides/09_bullshit.md" data-separator-vertical="^\r?\n\r?\n\r?\n"></section> -->
+			<section data-markdown="slides/09_bullshit.md" data-separator-vertical="^\r?\n\r?\n\r?\n"></section>
 			<section>
 				<h3>Dziękujemy za udział!</h3>
 				<div class="big-logo">

follow-ups/ai-assisted-coding/slides/06_prompt-engineering.md

@@ -81,3 +81,5 @@ Promptowanie oparte na łańcuchu myślenia (Chain-of-thought Prompting)
 Najlepiej jest zawrzeć w pytaniu jak najwięcej informacji i oczekiwań, jeśli mamy już jakiś pomysł na rozwiązanie. Jeśli wiemy bardzo mało, pozwólmy odpowiedzieć modelowi a potem zadawajmy dodatkowe pytania, żeby stopniowo dostosowywać odpowiedź. 
 
 Chat pamięta całą rozmowę otwartą w jednym oknie więc możemy odnosić się do jej kontekstu!
+
+note: czasem niestety ten kontekst bywa ograniczeniem, tj. ChatGPT kręci się wokół tego samego rodzaju rozwiązań nawet jak prosimy go, by spróbował inaczej. Jak widzimy, że biedak się zablokował otwieramy nowe okno i zadajemy pytanie precyzyjniej, na bazie zebranych informacji z pierwszego czatu. Zazwyczaj to pomaga :)

follow-ups/ai-assisted-coding/slides/08_praktyka.md

@@ -8,9 +8,7 @@ Jak w praktyce możemy korzystać z asystentów?
 
 Smutna prawda jest taka, że nie ma rozwiązań darmowych*
 
-note:
-podobno github oferuje Copilota za darmo studentom oraz kontrybutorom open source
-do pewnego stopnia darmowy jest asystent o nazwie bito.ai
+note: podobno github oferuje Copilota za darmo studentom oraz kontrybutorom open source
 
 
 Nawet ChatGPT w wersji "darmowej" jest limitowany do konkretnej liczby zapytań dziennie
@@ -19,13 +17,6 @@ Nawet ChatGPT w wersji "darmowej" jest limitowany do konkretnej liczby zapytań
 Dobra wiadomość jest taka, że niektórzy producenci asystentów AI oferują darmowy okres próbny, dzięki czemu można przynajmniej sprawdzić, czy faktycznie to się przydaje
 
 
-### Dygresja (acz nie całkiem)
-
-Konto openAI to nie jest to samo, co konto ChatGPT.\
-Rozszerzenia VS Code oferujące ChatGPT zwykle wymagają wklejenia klucza API z openAI.\
-Jeśli masz wykupionego Chata GPT, nie uda Ci się wygenerować klucza API.
-
-
 ## Sprawdzamy!
 
 
@@ -38,12 +29,82 @@ Jeśli masz wykupionego Chata GPT, nie uda Ci się wygenerować klucza API.
   - można pisać prompty w komentarzach w kodzie i asystent powinien to wychwycić <!-- .element: class="fragment fade-in" -->
 
 
-### Poproś asystenta o pomoc przy:
+### Instalacja Copilota
+
+
+### Tetsujemy czy wszystko działa
+Utwórzmy w edytorze pusty plik z rozszerzeniem js i zacznijmy coś pisać (jak zwykle function)
+
+
+### Skróty klawiaturowe
+
+* Akceptuj sugestię — `Tab`
+* Odrzuć sugestię — `Esc`
+* Następna sugestia — `Alt` + `]` lub `⌥` + `]`
+* Poprzednia sugestia — `Alt` + `[` lub `⌥` + `[`
+* Wywołaj sugestię — `Alt` + `\` lub `⌥` + `\`
+* Okno chatu `Ctrl` + `Alt` + `I` lub\
+  `Ctrl` + `⌘` + `I`.
+* Okno chatu inline `Alt` + `I` lub `⌘` + `I`.
+
+
+
+### Gra "Zgadnij literę"
+Polega na zgadywaniu litery alfabetu wylosowanej przez komputer
+
+![](img/gra.png)<!-- .element: style="width: 40%" -->
+
+
+### Co jest potrzebne, żeby powstała aplikacja internetowa?
+
+![](img/document.png)<!-- .element: style="width: 30%" -->
+
+
+### Tworzymy index.html
+
+`Utwórz pusty dokument html z napisem Hello`<!-- .element: class="prompt" -->
+
+Uruchommy ten dokument w przeglądarce, że by zobaczyć jak obecnie wygląda
+
+
+
+### Dodajemy przycisk i pole do wpisania litery
+W dokumencie html zacznij pod nagłówkiem `<h1>` pisać `<button>`, 
+Copilot dokończy cały kod przycisku za Ciebie.
+
+Podobnie dodaj `<input>`
+
+
+### Programujemy zachowanie aplikacji w JS
+Wyniki zapytań mogą się różnić, dlatego musimy dostosowywać do nich dalsze kroki. 
+
+
+### Zacznijmy od wylosowania litery:
+
+`napisz funkcję losującą literę polskiego alfabetu od a do z`<!-- .element: class="prompt" -->
+
+
+### później mogą być potrzebne: 
+`po wejściu na stronę wylosuj literę a gdy użytkownik wpisze literę do inputu to porównaj ją z wylosowaną literą`<!-- .element: class="prompt" -->
+
+`pod inputem napisz czy odpowiedź była prawidłowa`<!-- .element: class="prompt" -->
+
+
+### Poprawiamy wygląd
+
+`Wygeneruj style dla przycisku oraz wyniku użytkownika w light mode w motywie neomorphic ui`<!-- .element: class="prompt" -->
+
+
+### Rozwijamy nasz program
+
+Czego tu brakuje? Jakie funkcjonalności możemy dodać? Zastanówmy się wspólnie i spróbujcie zrealizować któryś z tych pomysłów samodzielnie.
+
+
+### Można jeszcze szybciej
+
+Czemu nie poprosić od razu o cały program?
 
-- stworzeniu funkcji konwertującej stopnie Celsjusza na Fahrenheita
-- napisaniu prostej funkcji pobierającej dane z API Instagrama
-- napisaniu funkcji obliczającej silnię (działanie matematyczne)
-- wygenerowaniu testów jednostkowych do w/w funkcji
+`stwórz aplikację kalkulator w html js i css`<!-- .element: class="prompt" -->
 
 
-### Czy jesteś zadowolona z pomocy asystenta?
+## Czy jesteś zadowolona z pomocy asystenta?

follow-ups/ai-assisted-coding/slides/09_bullshit.md

@@ -1,7 +1,22 @@
 ## A co, jeśli asystent zmyśla?
 
-### czyli jak rozpoznać, że asystent się myli
 
+## Jak to tak naprawdę działa?
+- na początku był neuron
+- "Sieci neuronowe często określane są jako tzw. czarna skrzynka, z powodu tego że nie jest możliwe zrozumienie jak naprawdę działają, gdy używają dużej ilości parametrów" - Wikipedia
+- "Emergent behaviors" - zachowanie lub umiejętność modelu, która nie została w nim umieszczona przez autora, pojawia się w sposób nieprzewidywalny wraz z wzrostem ilości neuronów w sieci
+- podsumowując: nie wiadomo!!!
 
-- najprościej jest uruchomić kod wygenerowany przez asystenta i sprawdzić, czy działa
-- można też spytać go, czy jest pewny - jeśli zacznie kręcić, to znaczy, że nie jest
+
+## Kto trenuje algorytm?
+- LLM wie tylko to, czego mógł nauczyć się z danych treningowych
+- do trenowania modelu GTP-3.5 używane były dane do czerwca 2021, więc on nie wie o niczym, co wydarzyło się później
+- model GPT-3 uczy się głównie z Internetu, więc jego informacje mogą mieć zróżnicowaną wiarygodność, w zależności od tematu i jego popularności
+- Google ogłasza że model Gemini trenowany jest na Reddicie - użytkownicy Reddita trollują
+
+
+## Dead Internet Theory
+- internetowy end game: nic nie jest prawdą
+- już dziś szacuje się że ponad połowa profilów, komentarzy i polubień na Instagramie to boty
+- wraz ze wzrostem możliwości i popularności LLM, w internecie może być coraz trudniej o prawdziwą, ludzką interakcję
+- a może już teraz tak jest?