From 371bd33b2ac54851f916a9cbf054a125f89c51e4 Mon Sep 17 00:00:00 2001 From: akochari Date: Mon, 17 Jun 2024 12:33:44 +0200 Subject: [PATCH] neater way to prevent code execution --- FF2024/data_analysis.html | 20 ++++++++-------- FF2024/data_analysis.qmd | 23 ++++++++++-------- FF2024/website.html | 49 +++++++++++++++++++++------------------ FF2024/website.qmd | 34 ++++++++++++++------------- 4 files changed, 67 insertions(+), 59 deletions(-) diff --git a/FF2024/data_analysis.html b/FF2024/data_analysis.html index 9e414a9..a870915 100644 --- a/FF2024/data_analysis.html +++ b/FF2024/data_analysis.html @@ -103,33 +103,33 @@

Loading the datasetAsking general questions

Now that the dataset is in LLMs memory we can ask different kinds of questions. Below are some examples of questions about the dataset or questions asking for the specific value from the dataset.

-
# For how many years do we have data on divorces?
+
For how many years do we have data on divorces?
-
# How many divorces were registered in 1984?
+
How many divorces were registered in 1984?
-
# How many people emigrated in 2023?
+
How many people emigrated in 2023?
-
# Find the year with the fewest deaths
+
Find the year with the fewest deaths

Asking questions that require calculations based on the provided data

Sometimes the answer we are looking for is not directly in the data that we have. In these cases we can ask the LLMs to do those calculations.

-
# When will the population reach 11 million people?
+
When will the population reach 11 million people?
-
# Calculate whether a higher proportion of the population marry now than 30 years ago
+
Calculate whether a higher proportion of the population marry now than 30 years ago

Creating plots

We can also ask LLMs to create some plots to look at the data visually. It is possible to ask for a plot that will be displayed directly in the chat or alternatively for example R or Python code for a visualisation (see below under ADVANCED topics). Here is an example prompt.

-
# Show me a bar plot of population growth over years. Plot population growth in terms percentage change from the previous year.
+
Show me a bar plot of population growth over years. Plot population growth in terms percentage change from the previous year.

☝️ TIP: One cool use case of LLMs is uploading an image of a plot and asking it to generate the same plot with your own data.

@@ -140,12 +140,12 @@

-
# Write code to produce a line plot in R that will show the population growth over the last 10 years.
+
Write code to produce a line plot in R that will show the population growth over the last 10 years.

While the generated code will be generally correct and in some cases work immediately sometimes you will need to take a look and make corrections.

If we want to go even further in this process and create an interactive dashboard instead of a static plot, we can also try to ask for that.

-
# Now turn this plot into an interactive dashboard where the user can select any of the columns to replace the data in the Y axis.
+
Now turn this plot into an interactive dashboard where the user can select any of the columns to replace the data in the Y axis.

☝️ TIP: When it comes to writing code it is often useful to not ask for everything in one go but to build the complex function or visualization as in this case step-by-step.

@@ -155,7 +155,7 @@

-
# When I select columns containing a space in the column names I see an error message. Correct the code to avoid this error.
+
When I select columns containing a space in the column names I see an error message. Correct the code to avoid this error.

diff --git a/FF2024/data_analysis.qmd b/FF2024/data_analysis.qmd index 8111f63..069bb54 100644 --- a/FF2024/data_analysis.qmd +++ b/FF2024/data_analysis.qmd @@ -1,6 +1,8 @@ --- format: html editor: visual +execute: + eval: false --- [Exercises](index.html) / [Exercise session 2](exercise_session_2.html) / @@ -30,19 +32,20 @@ In our case you can either [copy the dataset from the webpage](https://www.scb.s Now that the dataset is in LLMs memory we can ask different kinds of questions. Below are some examples of questions about the dataset or questions asking for the specific value from the dataset. ```{R} -# For how many years do we have data on divorces? +#| warning: false +For how many years do we have data on divorces? ``` ```{R} -# How many divorces were registered in 1984? +How many divorces were registered in 1984? ``` ```{R} -# How many people emigrated in 2023? +How many people emigrated in 2023? ``` ```{R} -# Find the year with the fewest deaths +Find the year with the fewest deaths ``` ### Asking questions that require calculations based on the provided data @@ -50,11 +53,11 @@ Now that the dataset is in LLMs memory we can ask different kinds of questions. Sometimes the answer we are looking for is not directly in the data that we have. In these cases we can ask the LLMs to do those calculations. ```{R} -# When will the population reach 11 million people? +When will the population reach 11 million people? ``` ```{R} -# Calculate whether a higher proportion of the population marry now than 30 years ago +Calculate whether a higher proportion of the population marry now than 30 years ago ``` ### Creating plots @@ -62,7 +65,7 @@ Sometimes the answer we are looking for is not directly in the data that we have We can also ask LLMs to create some plots to look at the data visually. It is possible to ask for a plot that will be displayed directly in the chat or alternatively for example R or Python code for a visualisation (see below under ADVANCED topics). Here is an example prompt. ```{R} -# Show me a bar plot of population growth over years. Plot population growth in terms percentage change from the previous year. +Show me a bar plot of population growth over years. Plot population growth in terms percentage change from the previous year. ``` > ☝️ **TIP**: One cool use case of LLMs is uploading an image of a plot and asking it to generate the same plot with your own data. @@ -74,7 +77,7 @@ Another way to approach visualisation is asking LLM tools to generate code for c For example, we can ask the following: ```{R} -# Write code to produce a line plot in R that will show the population growth over the last 10 years. +Write code to produce a line plot in R that will show the population growth over the last 10 years. ``` While the generated code will be generally correct and in some cases work immediately sometimes you will need to take a look and make corrections. @@ -82,7 +85,7 @@ While the generated code will be generally correct and in some cases work immedi If we want to go even further in this process and create an interactive dashboard instead of a static plot, we can also try to ask for that. ```{R} -# Now turn this plot into an interactive dashboard where the user can select any of the columns to replace the data in the Y axis. +Now turn this plot into an interactive dashboard where the user can select any of the columns to replace the data in the Y axis. ``` > ☝️ **TIP**: When it comes to writing code it is often useful to not ask for everything in one go but to build the complex function or visualization as in this case step-by-step. @@ -92,7 +95,7 @@ If we want to go even further in this process and create an interactive dashboar In this case the LLM is probably going to generate code for an R Shiny dashboard. Again, it may not work immediately but might will give a good starting point. Already knowing how to build an R Shiny dashboard is useful here because it allows to spot and correct the errors. We can fix the errors ourselves or ask the LLM to correct them, for example. as shown in the following prompt. ```{R} -# When I select columns containing a space in the column names I see an error message. Correct the code to avoid this error. +When I select columns containing a space in the column names I see an error message. Correct the code to avoid this error. ``` ### 💪 Challenges diff --git a/FF2024/website.html b/FF2024/website.html index 0c23b7d..3dbc07d 100644 --- a/FF2024/website.html +++ b/FF2024/website.html @@ -97,7 +97,7 @@

Creating a simpl

You can start with something like this:

-
# This is a Word file with information about an event. Create code for a single page website about this event. Include all information that is provided in the Word file on the website.
+
This is a Word file with information about an event. Create code for a single page website about this event. Include all information that is provided in the Word file on the website.

When you get the HTML code you need to copy it into any text editor. For example, all Macs computers come with TextEdit and all Windows computers come with Notepad. Save this file with an *.html extension; for example name it website.html and open using any web browser. You will now see what the LLM generated. You repeat this every time new code is generated to check the results.

Here you can see the page I had at this stage: facility_forum_website_1.html

@@ -106,12 +106,12 @@

Creating a simpl

Adding interactive elements

Of course each website needs some interactive elements. For example we might want to have a menu on top of the page.

-
# Add a menu on top of the page that will take the users to the corresponding sections of the page.
+
Add a menu on top of the page that will take the users to the corresponding sections of the page.

LLMs are quite good at writing code for websites so we can ask for more advanced interactive elements. In principle, you can try anything you can describe reasonably well. Here is a simple example.

Here you can see the page I had at this stage: facility_forum_website_2.html

-
# Add a new section at the end with a quiz about the event. The quiz contains three multiple choice questions about the event. When the visitor clicks on an answer they see feedback on whether their answer was correct.
+
Add a new section at the end with a quiz about the event. The quiz contains three multiple choice questions about the event. When the visitor clicks on an answer they see feedback on whether their answer was correct.

☝️ TIP: Think about what kind of description you would need to provide to a colleague that is making a website for you, provide that same information to the LLM.

@@ -125,41 +125,44 @@

Adding interac

Improving the look

We can be as specific or as general as we want. For example, we can ask to follow a brand guide to add colors or we can say which exact colors should be used for which elements. SciLifeLab has brand guidelines so we can copy the text from those guidelines into the LLM chat window and let the LLM make the decisions of how to apply it.

-
# Add custom styling to this webpage. Use the following information to add colors and fonts:
+
Add custom styling to this webpage. Use the following information to add colors and fonts:
 
-# Brand colors
-# SciLifeLab's brand colors are Lime, Teal, Aqua and Grape. Lime is the main color, and the other colors can be combined freely with it (however, Grape should be used modestly as a 'color pop' or on smaller details). The 100 % tints are the main shades to use, but there are also lighter tints in 25, 50 and 75 %. These tints are equivalent to opacity of 25, 50 and 75 % which can be used as well.
+Brand colors
+SciLifeLab's brand colors are Lime, Teal, Aqua and Grape. Lime is the main color, and the other colors can be combined freely with it (however, Grape should be used modestly as a 'color pop' or on smaller details). The 100 % tints are the main shades to use, but there are also lighter tints in 25, 50 and 75 %. These tints are equivalent to opacity of 25, 50 and 75 % which can be used as well.
 
-# Complementary colors
-#White, black and gray can be used freely. There are three suggested gray shades but any shades of black 5-90 % can be used.
+Complementary colors
+White, black and gray can be used freely. There are three suggested gray shades but any shades of black 5-90 % can be used.
 
-# SciLifeLab's typefaces are:
-# Lato
-# Lora
+SciLifeLab's typefaces are:
+Lato
+Lora
 
-# Color codes are:
-# Lime: #A7C947
-# Aqua: #4C979F
-# Teal: #045C64
-# Grape: #491F53

+Color codes are:
+Lime: #A7C947
+Aqua: #4C979F
+Teal: #045C64
+Grape: #491F53

☝️ TIP: In this case we know what font and colors we want to use so we provide those. But we could have also asked the LLM to generate a style guide for us based on some description or mood or aesthetic and so on.

Here you can see the page I had at this stage: facility_forum_website_4.html

-
-

💪 ADVANCED Hosting the website

-

Once you generate your website code the next step is to host it. This is something that the LLM cannot do for you but it possible to ask an LLM to provide guidance in this process as well. It is likely to be especially useful to those who are new to website hosting since it can answer beginner questions and provide detailed instructions.

-
-
-

Other use cases

-

Here are some other interesting types of websites you might want to try to create using LLMs.

+
+

💪 Challenges

+

Here are some other interesting types of websites you might want to try to create using LLMs:

  1. Create a web page that asks for weight (kg) and height (cm) of a person and calculates BMI.
  2. Create a web page that asks for the radius of a sphere and calculates the volume.
+
+

🧙‍♂️🧙‍♀️ADVANCED Hosting the website

+

Once you generate your website code the next step is to host it. This is something that the LLM cannot do for you but it possible to ask an LLM to provide guidance in this process as well. It is likely to be especially useful to those who are new to website hosting since it can answer beginner questions and provide detailed instructions.

+
+
+

+
diff --git a/FF2024/website.qmd b/FF2024/website.qmd index a36cd44..513bac0 100644 --- a/FF2024/website.qmd +++ b/FF2024/website.qmd @@ -1,6 +1,8 @@ --- format: html editor: visual +execute: + eval: false --- [Exercises](index.html) / [Exercise session 2](exercise_session_2.html) / @@ -26,7 +28,7 @@ You can ask for a simple website to start with and improve from there asking the You can start with something like this: ```{R} -# This is a Word file with information about an event. Create code for a single page website about this event. Include all information that is provided in the Word file on the website. +This is a Word file with information about an event. Create code for a single page website about this event. Include all information that is provided in the Word file on the website. ``` When you get the HTML code you need to copy it into any text editor. For example, all Macs computers come with *TextEdit* and all Windows computers come with *Notepad*. Save this file with an *\*.html* extension; for example name it *website.html* and open using any web browser. You will now see what the LLM generated. You repeat this every time new code is generated to check the results. @@ -38,7 +40,7 @@ Here you can see the page I had at this stage: [facility_forum_website_1.html](h Of course each website needs some interactive elements. For example we might want to have a menu on top of the page. ```{R} -# Add a menu on top of the page that will take the users to the corresponding sections of the page. +Add a menu on top of the page that will take the users to the corresponding sections of the page. ``` LLMs are quite good at writing code for websites so we can ask for more advanced interactive elements. In principle, you can try anything you can describe reasonably well. Here is a simple example. @@ -46,7 +48,7 @@ LLMs are quite good at writing code for websites so we can ask for more advanced Here you can see the page I had at this stage: [facility_forum_website_2.html](https://blobserver.dc.scilifelab.se/blob/facility_forum_website_2.html) ```{R} -# Add a new section at the end with a quiz about the event. The quiz contains three multiple choice questions about the event. When the visitor clicks on an answer they see feedback on whether their answer was correct. +Add a new section at the end with a quiz about the event. The quiz contains three multiple choice questions about the event. When the visitor clicks on an answer they see feedback on whether their answer was correct. ``` > ☝️ **TIP**: Think about what kind of description you would need to provide to a colleague that is making a website for you, provide that same information to the LLM. @@ -60,23 +62,23 @@ Here you can see the page I had at this stage: [facility_forum_website_3.html](h We can be as specific or as general as we want. For example, we can ask to follow a brand guide to add colors or we can say which exact colors should be used for which elements. SciLifeLab has brand guidelines so we can copy the text from those guidelines into the LLM chat window and let the LLM make the decisions of how to apply it. ```{R} -# Add custom styling to this webpage. Use the following information to add colors and fonts: +Add custom styling to this webpage. Use the following information to add colors and fonts: -# Brand colors -# SciLifeLab's brand colors are Lime, Teal, Aqua and Grape. Lime is the main color, and the other colors can be combined freely with it (however, Grape should be used modestly as a 'color pop' or on smaller details). The 100 % tints are the main shades to use, but there are also lighter tints in 25, 50 and 75 %. These tints are equivalent to opacity of 25, 50 and 75 % which can be used as well. +Brand colors +SciLifeLab's brand colors are Lime, Teal, Aqua and Grape. Lime is the main color, and the other colors can be combined freely with it (however, Grape should be used modestly as a 'color pop' or on smaller details). The 100 % tints are the main shades to use, but there are also lighter tints in 25, 50 and 75 %. These tints are equivalent to opacity of 25, 50 and 75 % which can be used as well. -# Complementary colors -#White, black and gray can be used freely. There are three suggested gray shades but any shades of black 5-90 % can be used. +Complementary colors +White, black and gray can be used freely. There are three suggested gray shades but any shades of black 5-90 % can be used. -# SciLifeLab's typefaces are: -# Lato -# Lora +SciLifeLab's typefaces are: +Lato +Lora -# Color codes are: -# Lime: #A7C947 -# Aqua: #4C979F -# Teal: #045C64 -# Grape: #491F53 +Color codes are: +Lime: #A7C947 +Aqua: #4C979F +Teal: #045C64 +Grape: #491F53 ``` > ☝️ **TIP**: In this case we know what font and colors we want to use so we provide those. But we could have also asked the LLM to generate a style guide for us based on some description or mood or aesthetic and so on.