Merge pull request #2 from ScilifelabDataCentre/revamp-session-2

Revamped hands-on session 2

FF2024/assistant.html

@@ -48,23 +48,27 @@
 <p><a href="index.html">Hands-on sessions</a> / <a href="exercise_session_2.html">Hands-on session 2</a> /</p>
 <section id="scilifelab-chat-assistant" class="level2">
 <h2 class="anchored" data-anchor-id="scilifelab-chat-assistant">SciLifeLab chat assistant</h2>
-<p>LLMs can be reasonably good at general knowledge collected from the internet but in some cases you might want it to focus on more specific documents or knowledge or add some knowledge and documents to what it already knows. This is possible with the so-called Retrieval-Augmented Generation aka RAG. Roughly, one creates a RAG by providing additional information to an LLM.</p>
-<p>In order to allow you to test out a RAG we created such a tool for SciLifeLab. This tool is based on ChatGPT and in addition it learnt all the information that is published on https://www.scilifelab.se as well as public PDF documents about SciLifeLab (such as regulations, SciLifeLab board minutes, etc.).</p>
-<p>You can try out interacting with this tool using the chat window that appears on bottom right of this page. You can imagine this as a chatbot that could be shown to the visitors of https://scilifelabs.se</p>
+<div class="col-8">
+<p>LLMs can be good at answering questions based on general knowledge collected from the internet but in some cases you might want it to focus on more specific documents or knowledge or add some knowledge and documents to what it already knows. This is possible with the so-called Retrieval-Augmented Generation aka RAG. Roughly, one creates a RAG by providing additional information from external resources to an LLM.</p>
+<p>In order to allow you to test out a RAG we created such a tool for SciLifeLab. This tool is based on ChatGPT and in addition we provided it with a lot of information about SciLifeLab that is publicly available.</p>
+<p>You can try out interacting with this tool using the chat window that appears on bottom right of this page. You can imagine this as a chatbot that could be shown to the visitors of <a href="https://scilifelab.se/">https://scilifelabs.se</a>. Try asking people about infrastructure units, people, steering, events, etc.</p>
+<p><button id="launchButton">Launch the assistant</button></p>
+<p><button onClick="window.location.reload();">Close the assistant</button></p>
+</div>
 </section>
 
 </main>
 <!-- /main column -->
 <script src="https://console.stage.centaura.ai/static/js/chat.js"></script>
-        <script>
-            window.onload = function () {
-                CentauraAI.init({
-                    assistant_id: "8c705e4c-7ebe-47c3-84a1-d163f2dda26c",
-                    channel_id: "0325f424-39e9-4994-a2a2-eef5cea7b259",
-                    base_url: "https://console.stage.centaura.ai/assistant/channels/",
-                });
-            };
-        </script>
+<script>
+    document.getElementById('launchButton').addEventListener('click', function() {
+        CentauraAI.init({
+            assistant_id: "8c705e4c-7ebe-47c3-84a1-d163f2dda26c",
+            channel_id: "0325f424-39e9-4994-a2a2-eef5cea7b259",
+            base_url: "https://console.stage.centaura.ai/assistant/channels/",
+        });
+    });
+</script>
 <script id="quarto-html-after-body" type="application/javascript">
 window.document.addEventListener("DOMContentLoaded", function (event) {
   const toggleBodyColorMode = (bsSheetEl) => {

FF2024/browser_game.html

@@ -77,10 +77,21 @@
 
 <main class="content" id="quarto-document-content">
 
-
-
 <p><a href="index.html">Hands-on sessions</a> / <a href="exercise_session_2.html">Hands-on session 2</a> /</p>
 <section id="using-llms-to-create-a-browser-game" class="level2">
+  <div class="callout callout-style-default callout-note callout-titled">
+<div class="callout-header d-flex align-content-center">
+<div class="callout-icon-container">
+<i class="callout-icon"></i>
+</div>
+<div class="callout-title-container flex-fill">
+🤓 Challenge
+</div>
+</div>
+<div class="callout-body-container callout-body">
+<p>Make a single page game, save it as an <i>.html</i> file and post it in <a href="https://scilifelab.slack.com/archives/C078FF8UBFD">the Slack channel for this session</a>. We will demo the submissions on the big screen.</p>
+</div>
+</div>
 <h2 class="anchored" data-anchor-id="using-llms-to-create-a-browser-game">Using LLMs to create a browser game</h2>
 <p>This is another example of using LLMs to generate code. We will try to create a simple browser based html game and add some game elements to see how the LLM can help us create the game. The aim of the exercise is not to recreate the same thing as the LLM generates different code on separate interactions and neither to use the LLM in an "efficient" way by following prompt best practices but just to give an overview of what it can understand and do. In this instance we will create a game of Tic Tac Toe and build on top of it but you can try it with other simple games as well. At the end of the page you will find a link with the whole interartion we had with the LLM, all the prompts and resulting code, so you can look at that later as well.</p>
 
@@ -94,7 +105,7 @@ <h3 class="anchored" data-anchor-id="creating-a-simple-browser-game">Creating a
 </blockquote>
 <p>You can start with the following prompt:</p>
 <div class="cell">
-<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Can you help me develop an html game based on tic tac toe</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co">Can you help me develop an html game based on tic tac toe</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <p>This will generate the code for you and the LLM might give instructions as well on how to setup this code. It usually generates 3 different code files for you. These are the html file called <em>index.html</em>, the css file called <em>styles.css</em> and the javascript file called <em>script.js</em>. You will need to manually create files with these names on you computer and save them in the same directory. Then you can copy the code for each file into the corresponding file locally and save the file. Make sure you have the file names and extensions set up correctly. When this is done you can open the <em>index.html</em> file in a browser and you should be able to see the game created by the LLM. You will need to repeat this process every time new code is generated to check the results.</p>
 <p>The first prompt created the code for the game and after following the setup steps mentioned in the paragraph above the resulting game looked like this: <a href="https://blobserver.dc.scilifelab.se/blob/facility_forum_borwser_game_1.png">facility_forum_browser_game_1.html</a></p>
@@ -103,7 +114,7 @@ <h3 class="anchored" data-anchor-id="creating-a-simple-browser-game">Creating a
 <h3 class="anchored" data-anchor-id="adding-interactive-elements">Adding complex elements</h3>
 <p>Now that there is a structure for a basic game of tic tac toe, we can try to add more complex elements such as an AI player and multiple difficulty levels. To add an AI opponent to the game you can prompt</p>
 <div class="cell">
-<div class="sourceCode cell-code" id="cb2"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Can we add an ai opponent to the game that moves automatically on its turn.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="sourceCode cell-code" id="cb2"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co">Can we add an ai opponent to the game that moves automatically on its turn.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <p>LLMs are becoming increasingly good at writing code so we can ask for more advanced elements. In principle, you can try anything you can describe reasonably well.</p>
 <blockquote class="blockquote">
@@ -113,7 +124,7 @@ <h3 class="anchored" data-anchor-id="adding-interactive-elements">Adding complex
 </blockquote>
 <p>The LLM creates a new player that makes moves on their turn. You can now ask it to create multiple difficulty levels with a prompt like this</p>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Can we make multiple levels of difficulty with the AI player. The first level is easy and ai moves randomly. The second level is the current ai player.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">Can we make multiple levels of difficulty with the AI player. The first level is easy and ai moves randomly. The second level is the current ai player.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
   </div>
 <p>At this stage, the game still used basic UI elements but now had a difficulty setting in the interface: <a href="https://blobserver.dc.scilifelab.se/blob/facility_forum_borwser_game_2.png">facility_forum_borwser_game_2.png</a></p>
 <blockquote class="blockquote">
@@ -123,12 +134,12 @@ <h3 class="anchored" data-anchor-id="adding-interactive-elements">Adding complex
 <h3 class="anchored" data-anchor-id="improving-the-look">Improving the look</h3>
 <p>To improve the look of the game we can use libraries such as Bootstrap to make it look more appealing. We can be as specific or as general as we want. I will be a bit general and ask it to use bootstrap to with a prompt like this</p>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Can you improve it visually by adding more colors and use bootstrap to make this look better. Can you also move the tic tac toe grid to the centre and create a popup for the winner. Add a scoreboard as well.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">Can you improve it visually by adding more colors and use bootstrap to make this look better. Can you also move the tic tac toe grid to the centre and create a popup for the winner. Add a scoreboard as well.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <p>Now, the game used UI elements from bootstrap and looked visually "better": <a href="https://blobserver.dc.scilifelab.se/blob/facility_forum_borwser_game_4.png">facility_forum_borwser_game_3.png</a></p>
 <p>To make it slightly more relevant we can ask the LLM to change the theme with a prompt like this</p>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Change the theme to life science and use information on this page for color scheme https://www.scilifelab.se/community-pages/resources/visual-identity/.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">Change the theme to life science and use information on this page for color scheme https://www.scilifelab.se/community-pages/resources/visual-identity/.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <blockquote class="blockquote">
 <p>☝️ <strong>TIP</strong>: In this case we have asked the LLM to look at the Scilifelab website visual identity page and use those color themes in the game. We can be more specific about the colors and what elements should have these colors but in this case its interesting to see the variation there is when we allow the LLM some "artistic freedom".</p>
@@ -139,13 +150,13 @@ <h3 class="anchored" data-anchor-id="improving-the-look">Improving the look</h3>
 
 <p>To wrap up we added used prompts to make UI improvements. Some of them were </p>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Create a border for the main game board and shift scoreboard and difficulty to a side menu on the left.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">Create a border for the main game board and shift scoreboard and difficulty to a side menu on the left.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># The heading should have the look of a navbar.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">The heading should have the look of a navbar.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Make the content in the side menu fit better and give the scoredboard a separate border and scilifelab visual background.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">Make the content in the side menu fit better and give the scoredboard a separate border and scilifelab visual background.</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 
 <p>This was the final result: <a href="https://blobserver.dc.scilifelab.se/blob/facility_forum_borwser_game_6.png">facility_forum_borwser_game_5.png</a></p>
@@ -155,7 +166,7 @@ <h3 class="anchored" data-anchor-id="improving-the-look">Improving the look</h3>
 <h3 class="anchored" data-anchor-id="advanced-hosting-the-game">Hosting the game</h3>
 <p>After the code in generated you can ask the LLM if it can host the game. It can't do that but it can give you suggestions. I asked it if if could deploy the app to a service called netlify</p>
 <div class="cell">
-  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Can you deploy this to netlify?</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+  <div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="co">Can you deploy this to netlify?</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 
 <p>The LLM gave useful information on how this can be done.</p>

FF2024/data_analysis.html

@@ -158,37 +158,6 @@ <h3 class="anchored" data-anchor-id="advanced-generating-code-for-plots-and-dash
 <div class="sourceCode cell-code" id="cb10"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a>When I select columns containing a space <span class="cf">in</span> the column names I see an error message. Correct the code to avoid this error.</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 </section>
-<section id="challenges" class="level3">
-<h3 class="anchored" data-anchor-id="challenges">💪 Challenges</h3>
-<p>Here are some other interesting ways in which you might want to test LLMs:</p>
-<section id="tables" class="level5">
-<h5 class="anchored" data-anchor-id="tables">Tables</h5>
-<ol type="1">
-<li>make a table of ten important pathways associated with RA and drugs targeting these pathways</li>
-<li>Export as excel file</li>
-<li>double-check that the drugs listed are correct</li>
-<li>redo the table, but only take information from drugbank</li>
-<li>draw the chemical structure of Baricitinib</li>
-<li>[compare smiles, hallucinations]</li>
-</ol>
-</section>
-<section id="synthetic-data" class="level5">
-<h5 class="anchored" data-anchor-id="synthetic-data">Synthetic data</h5>
-<ol type="1">
-<li>create an excel spreadsheet with 100 rows and 5 columns, where each column has values drawn from a normal distribution with a random mean.</li>
-<li>Include an extra column (Y) with either 1 or 2 as values.</li>
-<li>Scale column 3 to unit variance make a violin plot of the data with a black and white color scheme Make a PCA-plot, color by the column Y</li>
-<li>Redo PCA with a red and blue color scheme</li>
-</ol>
-</section>
-<section id="upload-dataset" class="level5">
-<h5 class="anchored" data-anchor-id="upload-dataset">Upload dataset</h5>
-<ol type="1">
-<li>Upload file ames-opti.txt at <a href="https://drive.google.com/drive/folders/1PLm_wAUhM8JJsmzCAMHk7z5ON8Gp0jXt?usp=sharing" class="uri">https://drive.google.com/drive/folders/1PLm_wAUhM8JJsmzCAMHk7z5ON8Gp0jXt?usp=sharing</a>&nbsp;</li>
-<li>These are results from an optimization. Interpret them</li>
-</ol>
-</section>
-</section>
 </section>
 
 </main>