update formatting T1&2

Author: sarahciston

src/content/tutorials/en/criticalAI1-chatting-with-about-code.mdx

@@ -19,7 +19,6 @@ authors:
 ---
 
 # Chatting With/About Code
-#### Critical AI: Tutorial 1
 
 ## What are we making?
 
@@ -54,14 +53,14 @@ For this example, I chose a tutorial I haven't been able to find elsewhere:
 >[!TIP]  
 >Keep the project scope small to start. Do you have different versions of the idea, a simpler version and a more complex one? Write them out separately. For example, here are some other features that would be nice to include, but let's wait to add them later:  
 
-`- Output as a GIF`   
-`- Make 2-color halftone pixels instead of grayscale`  
+>`- Output as a GIF`   
+>`- Make 2-color halftone pixels instead of grayscale`
+
+You can follow along with this example in the [p5.js Web Editor](https://editor.p5js.org/sarahciston/sketches/LiHcPXdv1), and you can also follow the [chat thread](https://chatgpt.com/share/67094820-dc28-8003-bd34-14cc1e7b4572) used to create it.
 
 >![IMPORTANT]  
 >Critical Context: When will you choose to use GPT tools for your project, and when will you skip them? A ChatGPT query requires almost 10 times as much electricity as a Google search (O'Brien 2024). Sometimes the code challenge is something you can easily find on Google or StackOverflow. Sometimes it's better just to call a friend and figure it out together!
 
-You can follow along with this example in the [p5.js Web Editor](https://editor.p5js.org/sarahciston/sketches/LiHcPXdv1), and you can also follow the [chat thread](https://chatgpt.com/share/67094820-dc28-8003-bd34-14cc1e7b4572) used to create it.
-
 ### 2. Gather your tools
 
 Start by logging into your preferred chat-based AI tool. Some options include [OpenAI's ChatGPT](https://chat.openai.com), [Replit Ghostwriter](https://replit.com/), [Blackbox.ai](https://www.blackbox.ai/) — each of these have limited free access. 
@@ -85,23 +84,23 @@ With all this in mind, once you've picked your tools, you can begin by prompting
 Pause. Rather than prompting ChatGPT with your whole project idea at once, let's break it down into parts. It's okay if you don't know every part of the process you want to create — that's why we're asking for help. We do this to understand more about what we are trying to make, and so that we receive less generic code more tailored to our project. Don't forget to tell it we're coding in p5.js!
 
 `Help me code a project in p5.js. I'd like to describe features and then have them added please.`  
-`First, import webcam video`  
-`Convert video to pixels`  
-`Turn pixels into dots`  
-`Make dot size based on the brightness and contrast of the pixel`
+`- First, import webcam video`  
+`- Convert video to pixels`  
+`- Turn pixels into dots`  
+`- Make dot size based on the brightness and contrast of the pixel`
 
 >[!TIP]  
 >Try writing the steps out in pseudocode, where you describe the steps of coding it without actually writing the code. This breaks your steps into smaller, more programmatic steps. For example, I could change the video processing steps to read: 
 
-`Import webcam video`  
-`Access each frame of the video`  
-`Convert each video frame to pixels`  
-`Make each pixel of each frame into a dot`  
-`Convert the dots to grayscale`  
-`Make dot size based on how dark they are. Darker pixels will have larger dots, while brighter pixels will have smaller dots.`
+>`- Import webcam video`  
+>`- Access each frame of the video`  
+>`- Convert each video frame to pixels`  
+>`- Make each pixel of each frame into a dot`  
+>`- Convert the dots to grayscale`  
+>`- Make dot size based on how dark they are. Darker pixels will have larger dots, while brighter pixels will have smaller dots.`
 
 >[!TIP]  
->You can run and compare the code at each step. This may also help you learn more about how the code works interactively, and give you new ideas to try.
+>Type out, run, and compare the code at each step. This may also help you learn more about how the code works interactively, and give you new ideas to try.
 
 >![WARNING]  
 >Review the answers it provides before you decide to use them. The code may include more advanced techniques than you know or than you actually need for your problem. 
@@ -154,23 +153,23 @@ Interestingly, this still looks gray, because the two colors it chose for our pi
 
 Find the line of code that says `let fillColor = isDark ? 0 : 255;` . This determines the two colors it uses to fill the dots. Let's try changing them by first creating some new fill colors, then updating the `fillColor` variable:
 
-```javascript
+```js
 let fillA = color(255,0,0) //red 
 let fillB = color(0,255,0) //green  
 let fillColor = isDark ? fillA : fillB;
 ```
 
 You can also change the background from gray to black or white, so it pops more.
 
-```javascript
+```js
 function draw() { 
    background(255)   
 ...}
 ```
 
 Now let's add an additional feature, so we can output our videos as GIFs. Here ChatGPT actually gets it wrong, but p5.js has a simple [`saveGif()`](https://p5js.org/reference/p5/saveGif/) function built in. You can add this code at the bottom of your sketch:
 
-```javascript
+```js
 function keyPressed() {
   if (key === 's') { 
 	saveGif('halftoneGif', 3);  

src/content/tutorials/en/criticalAI2-prompt-battle.mdx

@@ -10,8 +10,10 @@ relatedContent:
     - en/criticalAI1-chatting-with-about-code
     - en/criticalAI3-sentiment-dataset-explorer
     - en/criticalAI4-no-ai-chatbot
-#   references:
-    # - en/p5/saveGif
+  references:
+    - en/p5/createInput
+    - en/p5/mousePressed
+    - en/p5/keyCode
 authors:
   - Sarah Ciston
   - Emily Martinez
@@ -69,6 +71,9 @@ Similarly fill in with a description about the type of family, where they are fr
 
 This example comes directly from testing for GPT-3, which filled in the blanks with jobs `["engineer", "teacher", "nurse"]` to test which were most coded for particular genders.
 
+>![TIP]  
+>Try updating your prompt with new variables to see how your outputs change, or try a new prompt template altogether. Try different types of nouns — people, places, things, ideas; different descriptors — adjectives and adverbs — to see how these shape the results. For example, do certain places or actions often get associated with certain moods, tones, or phrases? Where are these based on outdated or stereotypical assumptions? 
+
 Here are a few more examples:
 
 `The doctor is wearing a ["lab coat", "suit", "headscarf"]`
@@ -77,18 +82,12 @@ Here are a few more examples:
 
 `The ["queer", "trans", "straight"] person was stopped while on their way to ...`
 
->![TIP]  
->Try updating your prompt with new  variables to see how your outputs change, or try a new prompt template altogether. Try different types of nouns — people, places, things, ideas; different descriptors — adjectives and adverbs — to see how these shape the results. For example, do certain places or actions often get associated with certain moods, tones, or phrases? Where are these based on outdated or stereotypical assumptions? 
-
-### >![IMPORTANT]
-
-### >Critical context: Subtle changes in your inputs can lead to large changes in the output. Sometimes these also reveal large gaps in the model's available knowledge. What does the model 'know' about communities who are less represented in its data? How has this data been limited? 
-
-### 
+>![IMPORTANT]  
+>Critical context: Subtle changes in your inputs can lead to large changes in the output. Sometimes these also reveal large gaps in the model's available knowledge. What does the model 'know' about communities who are less represented in its data? How has this data been limited? 
 
 ### 2. Import the Hugging Face library
 
-Open the [tutorial example]() in the p5.js Web Editor. Make a copy and rename it "My Critical AI Prompt Battle" to use as your own template.
+Open the [tutorial example](https://editor.p5js.org/sarahciston/sketches/siBTII_bC) in the p5.js Web Editor. Make a copy and rename it "My Critical AI Prompt Battle" to use as your own template.
 
 We will use the Hugging Face library to work with machine learning models directly, and we will use p5.js to build our own interface to do so. Start by putting this code at the top of `sketch.js`:
 
@@ -321,27 +320,27 @@ We assign new variables to the results of these models, so that we can then iter
 
 ### 8. Try this: Put your tool to the test
 
+>[IMPORTANT]  
+>Critical context: Is the model capable of representing a variety of contexts? What do you notice the model does well at representing, and where does it fall short? Where do you sense gaps, and how does it expose these or patch them over? Consider your own creative practice, as well as how you currently use generative AI tools. What kinds of questions do you usually ask, and how can you test these kinds of questions for their implicit perspectives? How do these perspectives impact your practice?
+
 Try new varieties of prompts with more complex examples. Notice how the outputs shift with each word choice. What is different in each case that you didn't expect? What environment is the subject in? Are they indoors or outdoors? Who are they around and what are they doing? What tropes are unsurprising?
 
 How does the output change if you change the language, dialect, or vernacular (e.g. slang versus business phrasing)? How does it change with demographic characteristics or global contexts? (Atairu 2024). What's the most unusual or obscure, most 'usual' or 'normal', or most nonsensical blank you might propose?
 
->[IMPORTANT]  
->Critical context: Is the model capable of representing a variety of contexts? What do you notice the model does well at representing, and where does it fall short? Where do you sense gaps, and how does it expose these or patch them over? Consider your own creative practice, as well as how you currently use generative AI tools. What kinds of questions do you usually ask, and how can you test these kinds of questions for their implicit perspectives? How do these perspectives impact your practice?
-
 >![TIP]
 >Expand your tool: Currently, this tool lets you scale up how you prompt models. It compares word choices in the same basic prompt. You've also built a simple interface for accessing pre-trained models that does not require using another company's interface. It lets you easily control your input and output, with the interface you built. You can keep playing with the p5.js DOM functions to build your interface with the HuggingFace API. There are many more aspects we could add to this interface that would let you adjust more features and explore even further. You might add more inputs, change up a parameter, add another model. You might also adapt this tool to compare wholly different prompts, or even to compare different models running the same prompt. We could also try different machine learning tasks you might use in your creative coding practice. 
 
 ## Takeaways 
 
 Here we have created a tool to test different kinds of prompts quickly and to modify them easily, allowing us to compare prompts at scale. By comparing how outputs change with subtle shifts in prompts, we can explore how implicit biases emerge from being repeated by and amplified through large-scale machine learning models. It helps us understand that unwanted outputs are not just glitches in an otherwise working system, and that every output (no matter how boring) contains the influence of its dataset.
 
->![WARNING]
+>![WARNING]  
 >Reconsider neutral. No language or image model is neutral. Each result is informed by context. Each result reflects differences in representation and cultural understanding, which have been amplified by the statistical power of the model. 
 
->![IMPORTANT]
+>![IMPORTANT]  
 >Critical context: Consider your choice of both words and tools. How does this help you think "against the grain" when working with AI models? Rather than taking the output of a system for granted as valid, how might you question or reflect on it? How will you use this tool in your practice? 
 
->![TIP]
+>![TIP]  
 >Flag your work: Make it a habit to add text like "AI generated" to the title of any content you produce using a generative AI tool, and include details of your process in its description (Atairu 2024).
 
 ## References