From bd2fdac6920520ab1bad78258a2819ddbfd2c4b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=B8ran=20Basso?= <goran.basso@kantega.no>
Date: Sun, 17 Sep 2023 15:41:21 +0200
Subject: [PATCH] Lagt inn workshop-oppgavene som sider i jekyll

---
 docs/_config.yml                              |   5 +-
 docs/index.md                                 | 139 ++++----------
 docs/pages/codebase.md                        |   7 +
 docs/pages/exercises.md                       |  27 +++
 docs/pages/exercises/ASCII-kunst.md           |  30 ++++
 docs/pages/exercises/Discord-bot.md           |  25 +++
 .../pages/exercises/Diverse-oppgaveforslag.md | 121 +++++++++++++
 docs/pages/exercises/JSON-omstrukturere.md    | 169 ++++++++++++++++++
 docs/pages/exercises/SQL-opprett-tabeller.md  |  31 ++++
 docs/pages/exercises/Webapp-komponent.md      |  32 ++++
 docs/pages/quickstart.md                      |   7 +
 docs/pages/tips.md                            |  54 ++++++
 12 files changed, 540 insertions(+), 107 deletions(-)
 create mode 100644 docs/pages/codebase.md
 create mode 100644 docs/pages/exercises.md
 create mode 100644 docs/pages/exercises/ASCII-kunst.md
 create mode 100644 docs/pages/exercises/Discord-bot.md
 create mode 100644 docs/pages/exercises/Diverse-oppgaveforslag.md
 create mode 100644 docs/pages/exercises/JSON-omstrukturere.md
 create mode 100644 docs/pages/exercises/SQL-opprett-tabeller.md
 create mode 100644 docs/pages/exercises/Webapp-komponent.md
 create mode 100644 docs/pages/quickstart.md
 create mode 100644 docs/pages/tips.md

diff --git a/docs/_config.yml b/docs/_config.yml
index a34d4bd..6cfc72b 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -20,8 +20,9 @@
 
 title: Kantega AI-dev Workshop
 email: goran.basso@kantega.no
-description: >- # this means to ignore newlines until "baseurl:"
-  Denne workshopen dekker de praktiske delene med å benytte store språkmodeller i utviklingsarbeid.
+description:
+  #>- # this means to ignore newlines until "baseurl:"
+  #Denne workshopen dekker de praktiske delene med å benytte store språkmodeller i utviklingsarbeid.
 #baseurl: "ai-dev-workshop/" # the subpath of your site, e.g. /blog
 #url: "https://kantega.github.io" # the base hostname & protocol for your site, e.g. http://example.com
 #twitter_username: --
diff --git a/docs/index.md b/docs/index.md
index c71a86c..98f5ce8 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,131 +2,60 @@
 layout: default
 ---
 
-Text can be **bold**, _italic_, or ~~strikethrough~~.
-
-[Link to another page](./another-page.html).
-
-There should be whitespace between paragraphs.
-
-There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
-
 # Innføring i bruk av ChatGPT / GitHub Copilot
 
 Denne workshop'en er ment som en innføring i hvordan man kan benytte
-LLM'er i utviklingsarbeid, og er ingen endelig eller komplett guide
+språkmodeller i utviklingsarbeid, og er ingen endelig eller komplett guide
 på alt man kan bruke det til eller problemstillinger rundt det.
+
+Språkmodeller er verktøy, og har fordeler og ulemper. Og som de fleste verktøy, så må man øve for kunne bruke det effektivt. 
+
 Det handler først og fremst bare om å bli kjent med det,
 hvilke oppgaver de er gode til å løse, og hvilke ufordringer man kan
 støte på underveis.
 
-# Header 1
-
-This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
-
-## Header 2
-
-> This is a blockquote following a header.
->
-> When something is important enough, you do it even if the odds are not in your favor.
-
-### Header 3
-
-```js
-// Javascript code with syntax highlighting.
-var fun = function lang(l) {
-  dateformat.i18n = require('./lang/' + l)
-  return true;
-}
-```
-
-```ruby
-# Ruby code with syntax highlighting
-GitHubPages::Dependencies.gems.each do |gem, version|
-  s.add_dependency(gem, "= #{version}")
-end
-```
-
-#### Header 4
-
-*   This is an unordered list following a header.
-*   This is an unordered list following a header.
-*   This is an unordered list following a header.
-
-##### Header 5
-
-1.  This is an ordered list following a header.
-2.  This is an ordered list following a header.
-3.  This is an ordered list following a header.
-
-###### Header 6
-
-| head1        | head two          | three |
-|:-------------|:------------------|:------|
-| ok           | good swedish fish | nice  |
-| out of stock | good and plenty   | nice  |
-| ok           | good `oreos`      | hmm   |
-| ok           | good `zoute` drop | yumm  |
-
-### There's a horizontal rule below this.
-
-* * *
+Workshop'en er ment å være språkmodell-agnostisk, og i utgangspunktet kan man bruke akkurat den modellen man vil.
+Per i dag er det 2 verktøy som utmerker seg: ChatGPT og GitHub Copilot.
 
-### Here is an unordered list:
+Man kan få tilgang til ChatGPT via [chat.openai.com/](https://chat.openai.com/), der man kan logge seg inn med 
+eksempelvis Google. ChatGPT basert på GPT-3.5 er gratisversjonen, men man må betale for å få tilgang til GPT-4 versjonen av ChatGPT.
 
-*   Item foo
-*   Item bar
-*   Item baz
-*   Item zip
+GitHub Copilot er et verktøy spesifikt ment for koding, og er basert på en språkmodell som er trent og finetunet for programmering.
+Man kan få tak i en 30 dagers gratis prøveversjon via [https://github.com/github-copilot/signup](https://github.com/github-copilot/signup) - 
+men vær obs på hva du tilgjengeliggjør, da Copilot sender data ut til sine servere.
 
-### And an ordered list:
 
-1.  Item one
-1.  Item two
-1.  Item three
-1.  Item four
+# Gjennomføring
 
-### And a nested list:
+Dette er i utgangspunktet en ganske åpen workshop, og kan gjennomføres på flere måter:
+- Dersom du er litt usikker på hvordan du skal begynne, så kan du starte på denne siden: [Hurtigstart](pages/quickstart.md)
+- Dersom du ønsker et kode-repo å starte med, ta en titt her: [Utvid en kodebase](pages/codebase.md)
+- Dersom du ønsker en liste av oppgaver, ta en titt her: [Oppgaver](pages/exercises.md)
 
-- level 1 item
-    - level 2 item
-    - level 2 item
-        - level 3 item
-        - level 3 item
-- level 1 item
-    - level 2 item
-    - level 2 item
-    - level 2 item
-- level 1 item
-    - level 2 item
-    - level 2 item
-- level 1 item
+Noen tips for å få best mulig effekt ut av språkmodeller: [Tips](pages/tips.md)
 
-### Small image
 
-![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png)
+# Litt kort om språkmodeller
 
-### Large image
+En stor språkmodell (large language model, eller LLM) er en maskinlæringsmodell som er trent på et enormt datasett,
+gjerne 'hele' internett, og som i korte trekk prøver å forutsi neste ord i en tekst, gitt en kontekst og input.
 
-![Branching](https://guides.github.com/activities/hello-world/branching.png)
+De store språkmodellene i dag baserer seg ofte på GPT-arkitekturen - der GPT står for Generative Pre-trained Transformer.
+Dette betyr egentlig bare at det er en modell som er trent på forhånd, som genererer noe form for output, basert på et eller annet input.
 
+For ChatGPT, så genererer den tekst, og er trent på språkkilder som bøker, internett, osv, og gir et svar som skal matche et gitt prompt.
+En GPT-modell trenger ikke være tekstbasert, for eksempel er DALL-E også basert på GPT, men genererer bilder, og ikke tekst.
 
-### Definition lists can be used with HTML syntax.
+### Copilot
 
-<dl>
-<dt>Name</dt>
-<dd>Godzilla</dd>
-<dt>Born</dt>
-<dd>1952</dd>
-<dt>Birthplace</dt>
-<dd>Japan</dd>
-<dt>Color</dt>
-<dd>Green</dd>
-</dl>
+GitHub Copilot er en LLM som er finetunet for å fungere som en kodeassistent,
+ved å foreslå kodesnutter etterhvert som man jobber i et integrert miljø.
+Den er også basert på GPT-modellen, men fokuset under treningen og tuningen
+har vært å lage en modell som er god til å forstå og generere kode.
 
-```
-Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
-```
+Den ser på hele repoet mens man jobber, og prøver å foreslå kode som gir
+mening i kontekst av hele prosjektet.
 
-```
-The final element.
-```
\ No newline at end of file
+Her er det utfordringer rundt om man har anledning til å dele kodebasen
+sin med en ekstern aktør, samt problemstillinger rundt personvern,
+og det vil ikke egne seg i alle prosjekt.
\ No newline at end of file
diff --git a/docs/pages/codebase.md b/docs/pages/codebase.md
new file mode 100644
index 0000000..9585a69
--- /dev/null
+++ b/docs/pages/codebase.md
@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+heihei codebase
+
+[< Tilbake](../)
\ No newline at end of file
diff --git a/docs/pages/exercises.md b/docs/pages/exercises.md
new file mode 100644
index 0000000..a9f0c70
--- /dev/null
+++ b/docs/pages/exercises.md
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+Disse oppgavene er ganske åpne, og kan gjennomføres på mange måter.
+
+Poenget med denne workshop'en er ikke å faktisk løse oppgavene - men å øve på hvordan språkmodeller
+kan passe inn i en eksisterende arbeidsflyt.
+
+Dersom du ikke er vant til å benytte språkmodeller, så 'tving' deg selv til å gjøre så mye som mulig
+med modellen. Da vil du erfare hva som fungerer godt, og hva som fungerer dårlig.
+
+Dette er bare forslag på oppgaver, og kan gjøres i hvilken som helst rekkefølge, og man kan
+gjerne blande konsepter fra flere av oppgavene.
+
+## Ferdige oppgaver
+### Utvikling
+- [ASCII-kunst](./exercises/ASCII-kunst.md)
+- [Discord-bot](./exercises/Discord-bot.md)
+- [JSON omstrukturering](./exercises/JSON-omstrukturere.md)
+- [SQL Opprette tabeller](./exercises/SQL-opprett-tabeller.md)
+- [Webapp komponent](./exercises/Webapp-komponent.md)
+
+### Diverse oppgaveforslag
+- [Diverse oppgaver](./exercises/Diverse-oppgaveforslag.md)
+
+[< Tilbake](../)
\ No newline at end of file
diff --git a/docs/pages/exercises/ASCII-kunst.md b/docs/pages/exercises/ASCII-kunst.md
new file mode 100644
index 0000000..756f4e0
--- /dev/null
+++ b/docs/pages/exercises/ASCII-kunst.md
@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+# ASCII-kunst
+
+## Generer ASCII-kunst fra en bildefil
+
+Velg et programmeringsspråk, gjerne et du ikke kan særlig godt, men ønsker å lære.
+Helst ikke for obskurt, men noe som Go, Rust, Kotlin, eller Haskell kan egne seg.
+
+Oppgaven går ut på å, ved hjelp av LLM (ChatGPT, og kanskje Copilot, om du har tilgang til det),
+å skrive et program fra scratch, som tar inn en bildefil, og genererer ASCII-kunst basert på dette.
+
+Poenget her er å få med seg oppsett av et nytt språk (installasjon og miljø),
+installering og bruk av biblioteker (antakeligvis må man bruke et bibliotek for å håndtere bildefiler),
+lesing fra og skriving til disk, og en kjent problemstilling rundt det å algoritmisk
+produsere ASCII-kunst fra en bildefil.
+
+Gjerne begynn med å få en høynivå algoritme, hvor du beskriver hvert steg du må
+gjennom for å oppnå dette, og så bryt det ned i mindre problemer som du kan 
+få generert kode til.
+
+Om du støter på problemer underveis, spør LLM'en. Kopier inn feilen du får, og beskriv
+problemet, og gjerne konteksten rundt problemet (hvilken prosjekt-struktur du har, hvilket miljø, etc).
+
+Vær obs på at LLM'en kan fortsatt hallusinere, og for eksempel foreslå klasser, funksjoner,
+og metoder som ikke finnes i språket eller biblioteket som blir brukt.
+
+[< Tilbake](../exercises.md)
\ No newline at end of file
diff --git a/docs/pages/exercises/Discord-bot.md b/docs/pages/exercises/Discord-bot.md
new file mode 100644
index 0000000..04b57b1
--- /dev/null
+++ b/docs/pages/exercises/Discord-bot.md
@@ -0,0 +1,25 @@
+---
+layout: default
+---
+
+# Discord-bot
+
+## Skriv en Discord-bot som man kan spille spill med
+
+Skriv en Discord-chatbot som man kan spille enkle spill med.
+Start med å opprette en Discord-server (det er kjempelett, bare spør ChatGPT!), og deretter en bot som svarer når man skriver.
+
+Deretter gjør den mer avansert, du kan gjerne begynne med noe enkelt som stein-saks-papir, 
+men seinere noe mer avansert, som tripp-trapp-tresko (bondesjakk / tic-tac-toe).
+Vær kreativ, og gjerne drøm stort.
+Kan du for eksempel lage en trivia-bot, som henter spørsmål og svar fra et eksternt API?
+
+Det finnes en del funksjonalitet rundt Discord-bot'er, så gjerne gjør noe spenstig.
+
+Målet er å se hvordan LLM'en forholder seg til eksterne biblioteker og programvare.
+Discord-API'et (og biblioteker rundt) har endret seg en del, og det finnes en haug med repoer 
+som løser kodeproblem på mange forskjellige måter.
+
+Hvordan håndterer LLM'en dette? Opprettholder den en konsekvent kodestil? Hallusinerer den ofte?
+
+[< Tilbake](../exercises.md)
\ No newline at end of file
diff --git a/docs/pages/exercises/Diverse-oppgaveforslag.md b/docs/pages/exercises/Diverse-oppgaveforslag.md
new file mode 100644
index 0000000..e96020b
--- /dev/null
+++ b/docs/pages/exercises/Diverse-oppgaveforslag.md
@@ -0,0 +1,121 @@
+---
+layout: default
+---
+
+# Potensielle oppgaver - Utvikling
+
+### Utvide en eksisterende kodebase
+
+Ta en eksisterende kodebase som du har jobbet på (gitt, selvfølgelig, at det ikke bryter noen lisens eller noe lovverk å bruke det i denne sammenhengen),
+eventuelt last ned et open source prosjekt som du enten er kjent med eller som er smått nok til at du lett kan forstå det.
+
+Utvid deretter denne kodebasen med noe som mangler, og bruk LLM'en hele veien.
+Noen eksempler på konkrete oppgaver:
+
+- Få det til å kjøre, uten å lese README
+- Utvide modeller i kodebasen, med ekstra felter
+- Hente data fra et eksternt API
+- Skrive flere tester
+- Skrive det om til et annet språk
+- Lage et API som tilgjengeliggjør data
+
+### Håndtere JSON
+
+- Ta en JSON-modell, generer en Java-klasse basert på denne (DTO, REST-kontroller, DAO) -
+  kan utvides til å gå fra "konsumer JSON via en POST mot et REST-endepunkt, og insert det i en database"
+- Ta en liste av JSON'er, som har en property som er en enum (`type: 'IMAGE'`) - omstrukturer denne til et Map som nøkler på enum-verdien:
+
+```javascript
+const originalArray = [
+    { title: 'dog.jpg', type: 'IMAGE' },
+    { title: 'cat.mp4', type: 'VIDEO' },
+    { title: 'fish.jpg', type: 'IMAGE' },
+    /* etc, etc... */
+];
+
+const expectedMap = {
+    'IMAGE': [
+        { title: 'dog.jpg' },
+        { title: 'fish.jpg' }
+    ],
+    'VIDEO': [
+        { title: 'cat.mp4' }
+    ]
+};
+```
+
+### SQL
+
+- Denormaliser en tabellstruktur
+- Konstruer en rekke SQL-spørringer som oppretter tabeller og inserter data
+
+### Algoritmer
+
+- Forslag til forskjellige algoritmer for å løse et konkret problem, og trade-offs med de forskjellige algoritmene -
+  en konkret oppgave her kan være å traversere en trestruktur, og ta med relevante noder videre
+- Optimaliser en funksjon / kodeblokk
+
+### Generere kode
+
+- Hvordan lese en fil
+- Hvordan gjøre API-kall
+- Hvordan lese / skrive til en database
+- Hvordan implementere en algoritme
+- Generer en nettside
+- Generer en komponent til en web-applikasjon
+- Formatter en rekke data
+- Oversett fra et språk til et annet
+- Parse et gitt filformat, få ut spesifisert informasjon, med en rekke forutsetninger
+
+### Tester
+
+- Generer tester basert på eksisterende kode
+- Generer test-data
+
+### Dokumentasjon
+
+- Forklar hva et stykke kode gjør
+- Finn et godt navn for en metode
+- Bruke LLM'er som en 'live StackOverflow' - be om å forklare klasser og funksjoner i rammeverk / biblioteker
+- Finskriving av tekst til issue-trackers (beskrivelsen til en Jira-oppgave, for eksempel)
+- Generere dokumentasjon til et API
+
+### Fagstoff
+
+- Forklare terminologi, konsepter, rammeverk, biblioteker, språk; foreslå læringskilder -
+  her har man muligheten til å ha en dialog med LLM'en, og spisse inn på begreper man sliter med
+- Best practices og design patterns - forslag og forklaringer
+- Valg av teknologi til et prosjekt (språk, rammeverk, biblioteker, etc)
+- Arkitekturelle beslutninger
+- Foreslå et roadmap for å lære en gitt teknologi
+
+### Review
+
+- Be LLM om å gjøre code review av et stykke kode, foreslå forbedringer
+
+### Integrasjoner i IDE'er
+
+- Praktisk bruk av Copilot i IntelliJ / VSCode
+- Plugins
+
+### Feilsøking
+
+- Hva er galt med denne koden her?
+- Debugging, forklar problemet, få forslag til hva det kan være og hvordan løse det
+
+### Sikkerhet
+
+- Finn potensielle sikkerhetshull i en gitt kodeblokk
+
+
+## Potensielle oppgaver - Drift
+
+### Automasjon
+
+Man kan finne konkrete deler av en arbeidsflyt som potensielt kan automatiseres, og forsøke å benytte språkmodellen til å
+avdekke hva som potensielt kan automatiseres, og hvordan det rent praktisk kan automatiseres.
+
+For eksempel om man i en fly det gjøres en del manuell konfigurasjon, med flere steg, så kan man prøve å få språkmodellen til å
+skrive et script eller utforme en prosedyre slik at man ikke behøver alle de manuelle stegene.
+
+[< Tilbake](../exercises.md)
\ No newline at end of file
diff --git a/docs/pages/exercises/JSON-omstrukturere.md b/docs/pages/exercises/JSON-omstrukturere.md
new file mode 100644
index 0000000..3996ff7
--- /dev/null
+++ b/docs/pages/exercises/JSON-omstrukturere.md
@@ -0,0 +1,169 @@
+---
+layout: default
+---
+
+# JSON
+
+## Omstrukturere data
+
+Gitt en JSON-array, med objekter som inneholder en verdi som kan uttrykkes som en enum, omstrukturer dette til et map som
+nøkler på disse enum-verdiene.
+
+Du kan be LLM'en om å gjøre det direkte, eller be om en funksjon som gjør det samme.
+
+Be gjerne LLM'en om å generere den opprinnelige dataen som det jobbes med.
+
+```javascript
+// Opprinnelig array som skal restruktureres
+const originalArray = [
+    { title: 'dog.jpg', type: 'IMAGE', size: 100 },
+    { title: 'dog.mp4', type: 'VIDEO', size: 1000 },
+    { title: 'dog.flac', type: 'AUDIO', size: 100 },
+    // etc etc
+];
+
+// Forventet struktur etter omstrukturere
+const expectedMap = {
+    'IMAGE': [
+        { title: 'dog.jpg' },
+        { title: 'fish.jpg' }
+    ],
+    'VIDEO': [
+        { title: 'cat.mp4' }
+    ]
+    // etc etc
+};
+```
+
+---
+
+Eksempel på generert data fra ChatGPT:
+
+**Prompt:**
+>Generate a JSON-array of 20 objects.
+The objects in the array has the following fields:
+>
+>- "filename": A string-value, containing random type of animal, ending with a file-extension (for example: ".jpg") a common filetype for either video, audio, or images
+>- "filetype": A string-value, given the file-extension in the name, have a corresponding filetype, either "VIDEO", "AUDIO", or "IMAGE"
+>- "size": An number-value, should be a random integer between 10 and 10000 (images should have smaller values than audio; audio should have smaller values than video)
+>- "description": A string-value, a short description of the given animal (max 10 words)
+
+**Svar:**
+
+```json
+[
+  {
+    "filename": "elephant.jpg",
+    "filetype": "IMAGE",
+    "size": 500,
+    "description": "Large mammal with a long trunk."
+  },
+  {
+    "filename": "lion.mp4",
+    "filetype": "VIDEO",
+    "size": 5000,
+    "description": "Fierce predator found in grasslands."
+  },
+  {
+    "filename": "cat.jpg",
+    "filetype": "IMAGE",
+    "size": 100,
+    "description": "Adorable domestic companion."
+  },
+  {
+    "filename": "dog.mp3",
+    "filetype": "AUDIO",
+    "size": 50,
+    "description": "Loyal and friendly pet."
+  },
+  {
+    "filename": "giraffe.jpg",
+    "filetype": "IMAGE",
+    "size": 700,
+    "description": "Tall herbivorous animal with a long neck."
+  },
+  {
+    "filename": "dolphin.mp3",
+    "filetype": "AUDIO",
+    "size": 20,
+    "description": "Highly intelligent marine mammal."
+  },
+  {
+    "filename": "tiger.jpg",
+    "filetype": "IMAGE",
+    "size": 800,
+    "description": "Powerful carnivore with distinctive stripes."
+  },
+  {
+    "filename": "bird.mp4",
+    "filetype": "VIDEO",
+    "size": 3000,
+    "description": "Feathered creature capable of flight."
+  },
+  {
+    "filename": "snake.mp3",
+    "filetype": "AUDIO",
+    "size": 30,
+    "description": "Slithering reptile found in various habitats."
+  },
+  {
+    "filename": "elephant.mp4",
+    "filetype": "VIDEO",
+    "size": 7000,
+    "description": "Largest land animal with an elongated nose."
+  },
+  {
+    "filename": "fish.jpg",
+    "filetype": "IMAGE",
+    "size": 200,
+    "description": "Aquatic animal with gills and fins."
+  },
+  {
+    "filename": "cat.mp3",
+    "filetype": "AUDIO",
+    "size": 40,
+    "description": "Independent and agile domestic pet."
+  },
+  {
+    "filename": "lion.jpg",
+    "filetype": "IMAGE",
+    "size": 900,
+    "description": "King of the jungle with a majestic mane."
+  },
+  {
+    "filename": "dog.mp4",
+    "filetype": "VIDEO",
+    "size": 4000,
+    "description": "Faithful and trainable companion animal."
+  },
+  {
+    "filename": "bird.jpg",
+    "filetype": "IMAGE",
+    "size": 300,
+    "description": "Feathered creature capable of melodious songs."
+  },
+  {
+    "filename": "tiger.mp3",
+    "filetype": "AUDIO",
+    "size": 25,
+    "description": "Ferocious feline with distinct black stripes."
+  },
+  {
+    "filename": "dolphin.jpg",
+    "filetype": "IMAGE",
+    "size": 600,
+    "description": "Marine mammal known for its playful behavior."
+  }
+]
+```
+
+(traff fort token-begrensningen på gratisversjonen av ChatGPT 3.5 - kan man gjøre noe for å omgå denne problemstillingen?)
+
+Merk en feil, vårt krav om at "size"-propertyen skulle ha sjikter basert på filtypen ble ikke helt riktig.
+"AUDIO"-objektene har konsekvent en lavere verdi enn "IMAGE"-objektene.
+Hvorfor det? Kan man forbedre promptet til å sikre seg mot dette?
+
+Kan gjøre flere ting her, først lage dette map'et, så sortere listene i map'et etter filstørrelse,
+så filtrere ned til 3 elementer per liste.
+
+[< Tilbake](../exercises.md)
\ No newline at end of file
diff --git a/docs/pages/exercises/SQL-opprett-tabeller.md b/docs/pages/exercises/SQL-opprett-tabeller.md
new file mode 100644
index 0000000..8d9c0c0
--- /dev/null
+++ b/docs/pages/exercises/SQL-opprett-tabeller.md
@@ -0,0 +1,31 @@
+---
+layout: default
+---
+
+# SQL
+
+## Opprette tabeller
+
+Begynn med å få LLM'en til å generere noe data.
+Dette kan for eksempel være land i verden, bilmerker, etc.
+
+Deretter utvid dataen, gi den egenskaper, noen som kan ha en-til-mange-forhold.
+(For eksempel vil flere land høre til et kontinent, den type ting).
+
+Deretter be den lage SQL-spørringer som oppretter relasjonelle tabeller for å holde denne daten, og så inserte det.
+
+Deretter kan man be LLM'en om å opprette en DAO-klasse for dette.
+
+Målet her er å se hvordan LLM'en kan generere data dynamisk, og hvordan den kan bruke dette videre til å generere
+kode som er basert på denne dataen.
+
+Eksempel på start:
+Liste av prompts:
+
+> List out 10 countries, from different continents around the world.
+>
+> Format the list in a table
+>
+> Add a column, containing the capital city of each country
+> 
+> [< Tilbake](../exercises.md)
\ No newline at end of file
diff --git a/docs/pages/exercises/Webapp-komponent.md b/docs/pages/exercises/Webapp-komponent.md
new file mode 100644
index 0000000..d565f36
--- /dev/null
+++ b/docs/pages/exercises/Webapp-komponent.md
@@ -0,0 +1,32 @@
+---
+layout: default
+---
+
+# Webapp
+
+## Opprette komponenter
+
+Be LLM'en om å generere en webapp-komponent med en valgfri frontend-teknologi.
+For eksempel kan du spesifisere React, og lage en enkel webapp (eksempelvis med `npx create-react-app some-app-name`),
+slik at du kan teste komponenten.
+Eventuelt kan du be LLM'en om å generere en lett skjelett-app, som du utvider etterhvert.
+
+Be deretter LLM'en om å generere et enkelt skjema for å registrere en bruker.
+Gjerne ønsker man brukernavn, navn, epost-adresse, telefonnummer, etc.
+Andre felter kan være nedtrekkslister, checkboxes, og radiobuttons - som man typisk finner i et skjema.
+
+Prøv å sett inn komponenten i applikasjonen, og se om det fungerer.
+Om det er noe som er feil, eller ikke fungerer - prøv å spør LLM'en om hva som er galt med koden,
+og evnetuelt hvordan du bør gå frem for å fikse det. Gi den feilmeldingene, og eventuelt kodesnutter.
+
+Fortsett å utvide komponenten og webappen, og legg til for eksempel styling,
+persistering, og vising av registrert data i en annen, separat komponent, og eventuelt andre ting man kommer på underveis.
+Poenget er ikke å produsere en nettside eller komponent, men å opparbeide erfaring rundt det å ha en arbeidsflyt
+der man aktivt bruker en LLM.
+
+Hvordan fungerer denne flyten, med å spørre LLM'en om hvordan man skal gjøre noe, følge det,
+og så spørre tilbake dersom ting ikke fungerer?
+Hva er den god til, og hva er den dårlig til?
+Hvilke utfordringer møter man på underveis, og hvordan kan man endre måten man spør på for å forbedre flyten?
+
+[< Tilbake](../exercises.md)
\ No newline at end of file
diff --git a/docs/pages/quickstart.md b/docs/pages/quickstart.md
new file mode 100644
index 0000000..17cc494
--- /dev/null
+++ b/docs/pages/quickstart.md
@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+heihei quickstart
+
+[< Tilbake](../)
\ No newline at end of file
diff --git a/docs/pages/tips.md b/docs/pages/tips.md
new file mode 100644
index 0000000..906bd4a
--- /dev/null
+++ b/docs/pages/tips.md
@@ -0,0 +1,54 @@
+---
+layout: default
+---
+
+## Råd til å få best effekt ut av LLM'er
+
+For å få gode svar fra LLM'er, så må man spørre på riktig måte.
+Man må være presis og tydelig, gi nok informasjon til at det kan utføres, og vite hva slags svar man forventer.
+Enkelte typer prompts gir bedre svar enn andre, og dette er noe som vil endres over tid, etterhvert som LLM'er blir utviklet.
+
+Konsepter man kan vurdere å ha med i et gitt prompt:
+
+- Klassifisering - hva er problemet vi ønsker å adressere?
+- Kontekst - hva er bakgrunnen for problemet?
+- Motivasjon - hvorfor er det viktig å løse problemet?
+- Konsepter - hvilke konsepter og idéer er viktig for å tilnærme problemet?
+- Eksempler - finnes det noen eksempler på hvilken løsning man forventer?
+- Konsekvenser - ønsker man å vite tradeoffs ved en gitt løsning?
+
+En LLM som ChatGPT, som er trent på internett, vil nøvendigvis gi bedre svar dersom promptet spør om noe som er veldig vanlig.
+For eksempel, så vil det å spørre om veldig vanlige biblioteker i veldig vanlige språk (som for eksempel Java og Spring), gi veldig gode resultater,
+siden det finnes veldig mange guider, tutorials, og Stack Overflow-tråder (og lignende) som den er trent på.
+
+Men dess mer obskurt og uvanlig språket eller biblioteket er, dess større er sjangsen for at man ender opp med hallusinasjoner.
+
+En utfordring kan være størrelsen på svaret, da det er begrenset hvor mange tegn man kan få ut fra gratisversjonen av ChatGPT, for eksempel.
+Gjerne får man bare så-så mange svar før man må starte en ny samtale, så ChatGPT mister konteksten.
+Ofte kan det være greit at hver samtale er atomisk, og bare omhandler en liten bit av puslespillet.
+Men en del av puslespillet kan for eksempel være en samtale på et høyere nivå, om hvordan man bryter et
+problem ned i mindre biter, og hvordan man kan angripe det.
+
+Forstå problemet du prøver å løse så godt som mulig. Da kan du på en tydelig måte forklare til språkmodellen
+hva du prøver å oppnå.
+
+På denne måten kan du bruke flere samtaler til å løse et større problem.
+Med andre ord, så bryt ned problemet i mindre problemer.
+
+Det hjelper å gi så mye kontekst som du kan.
+
+Se på samtalen som en iterativ prosess, regn med å stille oppfølgningsspørsmål for å komme frem til et godt svar.
+
+Alltid se over og tenk på svarene du får. Ikke stol blindt på svarene.
+
+Prøv å eksperimenter, gjerne still det samme spørsmålet på flere måter.
+Ofte kan en omformulering gi et svar som er betydelig annerledes enn det opprinnelige.
+Språkmodeller reagerer ofte godt på å få konkrete eksempler på hvilket type svar du forventer.
+
+Vær obs på å ikke dele sensitiv informasjon.
+
+Husk at AI-verktøy er verktøy, og vil ikke erstatte egen tenkning.
+De vil hjelpe deg, men du selv må forstå og løse problemene.
+Målet med denne workshop'en er å trene på å bruke disse verktøyene.
+
+[< Tilbake](../)
\ No newline at end of file