En del av det som behövs för denna övning kommer vi gå igenom på lektionerna. Ni kan dock börja med att få upp en grundläggande chatbot och börja fundera kring era prompts med prompt templates.

I denna övning ska du bygga en chatbot som kan prata om kaffebeställningar.
Kaffechatbotten ska först hämta kaffemenyn från API:et nedan och skicka med som kontext till en språkmodell tillsammans med frågan.

1. Anropa ett externt API och använda svaret som kontext i en språkmodell.

Till denna övning behöver du ha igång en språkmodell i terminalen med Ollama.

Du ska i React skapa en enklare chatbot som ska fungera som en "språkcoach" med ett gränssnitt där användaren kan skicka meningar och få dessa översätta till ett annat språk eller korrigera en mening grammatiskt. En användare får i en dropdown välja mellan att chatbot:en antingen översätter eller korrigerar grammatiken.

Du ska i koden med Langchain.js ställa olika frågor baserat på valet som användaren gjort ex. "översätt denna mening" eller "korrigera denna mening grammatiskt" samt skicka med det som användaren ha skrivit.

Du ska i denna övning designa en e-postklient för PRO(s). Målgruppen är 65+ och fokus ligger på enkelhet, tydlighet och tillgänglighet.

Detta ska resultera i en Figma-prototyp.

I nuläget är det aktuellt enbart med en mobilanpassad e-postklient.

Funktionalitet

• Kunna se sina mejl i lista

Bygg din React-app enligt nedanstående skiss (hur mycket CSS du vill göra är upp till dig).

Steg 1

Koppla ihop varje datapunkt ( klass, titel, förnamn, efternamn, godkänner ) med en funktion i din React-komponent som lyssnar efter inmatning och sparar det som skrivs in i ett inputfält i en variabel.

Steg 2

I denna övning ska du göra en React-applikationen enligt designen som du kan på bilden nedanför (du kan skippa bilden på Sherlock). Denna sida kommer i denna övning vara statisk d.v.s. du kan hårdkoda all information och knapparna etc behöver inte göra något. Vi kommer återvända till denna övning och fixa det senare. Gällande bilden i övre vänstra hörnet kan ni välja valfri bild till.

Följande komponenter bör finnas med:

• App
• Header
• Cart (som ligger i Header)
• Product

Första steget i att skapa en dynamisk web app med Vue.js är att koda upp den med statiska komponenter och innehåll.

Koda upp nedanstående Todo App skiss med dessa komponenter ( håll CSS:en enkel, behöver inte vara lika grafisk som skissen, dock samma funktionalitet och struktur. Notera att todo-header har en komponent ( counter) inuti sig. Glöm inte att hårdkoda in innehållet också i todo-items etc.

Komponenter

• header
  • counter ( du har 3 todos kvar att göra )
• todos ( inkl 4 todos, en är avbockad/done )
• new-todo

Have you no wit, manners, nor honesty but to gabble like tinkers at this time of night? - Twelfth Night

I denna övning ska du få bygga ett API som returnerar en förolämpning från Shakespeare. En "sick burn" från Shakespeare ger en bra start på dagen!

Nedanför har du 10 förolämpningar från olika pjäser att använda dig av. Skapa ett objekt för varje förolämpning som har två egenskaper. Den första som heter insult som innehåller en sträng med förolämpningen och den andra som heter play med pjäsen namn. Lägg sedan alla objekt i en array. Du kan spara detta direkt som en variabel i din NodeJS - applikation eller i en JSON-fil likt det vi gjorde med childrensbooks.json.

I denna övning ska du göra ett bibliotek av barnböcker. Du hittar en JSON-fil med böcker här med som heter childrensbooks.json som du kan importera med import books from '../assets/childrensbooks.json'; (skapa en mapp som heter assets samt skapa en fil som heter childrensbooks.json och lägg in nedanstående innehåll).

Använd dig av React router med två vyer, en för alla böcker och en för en detaljerad vy av en bok.

Figmaskiss: https://www.figma.com/file/lm4l7OViUO8ypfQn9IBG91/Mini-Library?node-id=2%3A41

En övning i att få en första inblick i kursen samt det mindset vi kommer arbeta. Fundera inte så mycket kring koden utan mer på det tankesätt som gås igenom i artikeln nedan.

Börja med att läsa denna artikel om att tänka i komponenter för att få en första förståelse

Have you no wit, manners, nor honesty but to gabble like tinkers at this time of night? - Twelfth Night

I denna övning ska du få bygga en sida som slumpar en förolämpning från Shakespeare och visar denna för användaren. En "sick burn" från Shakespeare ger en bra start på dagen!

Nedanför har du 10 förolämpningar från olika pjäser att använda dig av. Skapa ett objekt för varje förolämpning som har två egenskaper. Den första som heter insult som innehåller en sträng med förolämpningen och den andra som heter play med pjäsen namn. Lägg sedan alla objekt i en array och slumpa en förolämpning. Det ska finnas en knapp där man kan slumpa en ny förolämpning.

Ex: