Facial Advocacy: Designing Climate Awareness Filters

Slide 1, 2

Pause at this slide and allow learners to go through the objectives.

Slide 3

"Alright, everyone, take a look at this image. What do you notice? What's your initial reaction to this picture? I'll give you a moment to think about it and then I'd like to hear your thoughts. What do you think this image might be trying to tell us?"
Facilitate a brief discussion, encouraging students to share their interpretations and thoughts.

Slide 4

Did you know that this meeting took place underwater? Ministers gathered below the sea to draw attention to the dangers caused by global warming. What do you think the purpose of this meeting was? Why do you think they chose to have it underwater?"
Encourage students to think about the symbolism and significance of such an event, prompting discussion about the impact of climate change.

Slide 5

Encourage students to consider the implications of losing landmass due to climate change and discuss the role of leaders in addressing these challenges.

Slide 6

Briefly define global warming as the gradual increase in Earth's average temperature due to human activities, leading to various environmental changes.
Encourage engagement by asking thought-provoking questions:
"What do you already know about global warming?"
"How might global warming affect our daily lives?"
"Why is it essential for us to address global warming?"

Slide 7, 8

Explain that NASA provides powerful tools to observe and understand changes in our planet's climate.Encourage students to interact with the tool and note any significant observations or trends they find.
Facilitate a discussion around their discoveries during the exploration by asking "What changes do you notice in global temperature over the years?"

Slide 9

Begin by asking "What modern approaches or tools can we use to inform others about climate change and its impact?". 
You can also share some examples: 
Podcasts or YouTube Channels: Creating informative podcasts or YouTube videos discussing climate issues, solutions, or personal experiences.
Interactive Websites or Apps: Developing interactive platforms or apps that educate users about climate change and suggest sustainable practices.
Online Petitions or Activism Platforms: Participating in or initiating online petitions or campaigns urging action from governments or corporations regarding environmental policies.
Virtual Reality (VR) Experiences: Using VR technology to simulate the effects of climate change, offering immersive learning experiences.

You could emphasize the importance of adapting to modern communication channels for effective outreach on climate change issues by stating:
"In today's digital age, our ability to address global challenges like climate change relies heavily on our adaptation to modern communication channels. Utilizing platforms like social media, podcasts, interactive websites, and virtual reality isn't just a trend; it's a powerful strategy. These channels offer us the reach and engagement needed to spread awareness far and wide. They enable us to connect with diverse audiences, inspire action, and foster a sense of collective responsibility towards our planet. Embracing these tools empowers us to amplify our voices, create meaningful conversations, and drive change on a scale never seen before.

Slide 10

Explain the task that students will embark on to create online face filters aimed at raising awareness about climate change and urging action.

Task Description:

• "Your task is to design online face filters using digital design tools or software."
• "These filters should creatively convey messages about climate change and inspire action."
• "Consider incorporating symbols, messages, or elements that highlight the urgency of addressing climate issues."

Slide 11

Have you ever snapped pictures using facial filters? Instagram and Snapchat have popularized these filters online, but have you wondered about their mechanics? Interested in crafting your own facial filters?
Throughout this project, you'll delve into the workings of a cutting-edge AI technology known as Facemesh. This model, developed by Google and accessible to everyone, will be our focus for learning and creating facial filters.

So what is the Facemesh Model?
The Facemesh model is designed to capture various facial features by pinpointing specific coordinates, like the X and Y locations of your nose, forehead, and mouth within an image. With this data, creating facial filters becomes possible, where images precisely align with specific points on your face.
To access the Facemesh model, we'll utilize the FaceExtension—a tool within App Inventor. This tool acts as a gateway, allowing you to integrate the model into your personal mobile application. The ultimate goal of this project is to develop your own filter camera! This app will enable you to capture imaginative photos and easily share them with your friends.
 

Slide 12

Walk learners through the components added and their utility.
CaptureButton: Enables users to capture a photo.
FaceExtension:
AI technology tracking facial key points for creating facial filters.
Connected to the WebViewer component, necessitating a web browser to operate.
WebViewer's visibility is deactivated as the Canvas is utilized for viewing.
Canvas: Displays the live camera view as a background and the selected facial filter (e.g., cat/lion).
Matching Dimensions:The dimensions of the WebViewer component, the Canvas component, and the FaceExtension must match in order to facilitate face tracking. If you change the default values of the height and width or any one of the three components, make sure that you change it identically for all three of them.

Slide 13

The key points of the face tracked by Facemesh are:
forehead
chin
left cheek
left eye bottom
left eye inner corner
left eye top
left eyebrow
left forehead
left nose
mouth top
mouth bottom
nose bottom
right cheek
right eye bottom
right eye inner corner
right eye top
right eyebrow
right forehead
right nose.

Slide 14

Each key point is returned as a list of two elements representing the x and y-coordinates.
For example, the key point “forehead” will be a list of 2 elements:
[forehead x-coord, forehead y-coord]
When Facemesh is unable to track the entirety of a face, it will return an empty list so the filter will not work; make sure the face is within the camera frame!

Slide 15

Explain to learners how they they can activate the facemesh extension and see the key points on their face. 

Slide 16, 17

Some code that is already present in the blocks are does the following tasks:
The first code block state simply that Here we have two variables: “photocount”simply counts how many photos have been taken, and “mostrecentphoto”stores the file name of the most recently taken photo.
When you press the CaptureButton, it updates the file name of the mostRecentPhoto to the latest image, and the photoCount goes up by 1. The first picture you take gets named ‘image1.jpg,’ the second one is ‘image2.jpg,’ and so on. All these pictures are saved on your device. Depending on your device, you can find these photos in the place where files usually go. For instance, on a Google Pixel, you can see them in the “Files” app.
We keep track of photoCount and add 1 each time so that each picture has a different name. If we didn’t do this, every photo you take would be saved with the same name, replacing the previous one.

placeImage procedure places the center of img, the ImageSprite, on the facePoint, the key point tracked by Facemesh.

Slide 18

Time to add visuals of your choice to the face filter you are creating. 

Slide 19, 20, 21

The way a basic filter works has two parts.
moving: when the face moves, the images move along with the face.
resizing: when the face becomes bigger or smaller, the images are resized accordingly.

Enter the code as shown. 

Slide 22

Learners can watch the Video Tutorial and create their own face filter app.

Slide 22

Designated Presentation Area: Set up a specific area in the classroom where students can demonstrate their apps. It could be a table with devices or laptops, or a projection screen connected to a computer displaying the apps.
Rotation System: Create a rotation schedule where each student or group gets a designated time slot to showcase their app. This ensures everyone gets an equal opportunity to present.
Peer Engagement: Encourage students not presenting at that moment to actively engage with the presenters. They can ask questions, try out the apps, and provide positive feedback or suggestions.
Encourage learners to fill up the app evaluation worksheet.

Slide 23

Allow learners to reflect on the question provided.