Engaged and Learning in a Digital World Justin Hodgson | Director, IU Digital Gardener Initiative

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

Overview

Today we will explore generative AI technologies, including text generators and image generators, and pair them with Adobe Express to create deliverable, multimedia assets. This page will first provide a bit of context and then present one of two challenges: Challenge 1 focuses on fun and building creative confidence; Challenge 2 starts us toward more formative productions.

After the Challenge Section, this page also offers visual guide on how to create an Adobe Express webpage.

Example Creations

Challenge 1 | Example Creation (Justin Hodgson)
Challenge 2 | Example Creation (Justin Hodgson)

A few additional Adobe Express Webpages examples

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

What is Generative AI?

The most prominent Generative AI tool people are discussing in higher education is ChatGPT, a product from OpenAI. Generative AI tools can create new data – like text and images (see below) – based on patterns it has learned from the large sets of existing data on which it is trained. ChatGPT is a chatbot tool intended to generate text in response to requests and input from users. Tools have also been developed to generate other types of data, such as Adobe Firefly & OpenAI’s DALL-E 2, which can produce images based on short strings of text provided by users, and Soundful.com, which is AI generated audio. Other technologies, including generative AI video, seem to appear every day.

Left Image was created with Adobe Firefly | Right Image is a screen shot of ChatGPT responding to key issues on DeepFakes and PostTruth

While Google, Microsoft and other companies have featured AI in tools and platforms for years, they, along with companies like Adobe, Instructure (Canvas), and countless others have integrated generative AI into their varying platforms. For example, Microsoft is now featuring CoPilot as part of its 365 suite, Google has fully launched Gemini (as seen in recent Olympic commercials), and Adobe most recently announced its AI Assistant for Acrobat beta (among other generative AI / Firefly-based option in Express, Photoshop, and the like).

Chart featured in Olivia Moore blog post (3.13.24) on the Andreeson Horowitz website. Visual was created by a16zConsumer.

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

Why does it matter? Ai/Gen Ai + Digital Literacy

INCLUSIVITY - The digital divide is most pronounced across issues of Race, Gender, and Class, and that gap widens progressively as students move primary to secondary education--as students from more affluent areas and/or with greater levels of access gain distinct advantages over their peers. What's more, when we fail to integrate digital literacy into higher education, we create double-jeopardy digital inequity (McLay & Reyes, 2019): a process by which we unintentionally continue to widen that gap.

ENGAGEMENT - Bringing digital literacy/digital creativity practices in the classroom has a positive impact on student engagement, performance, and retention. This is even more pronounced (nearly 2 times more) for BIPOC and first generation students (Civitas, Adobe, and UT San Antonio, 2020).

ACCOUNTABILITY - In a 2022 survey, over 80% of Students, Faculty, and Administrators agree/strongly agree that teaching digital literacy skills, which now includes AI / Generative AI literacies, should be part of the curriculum (Chronicle of Higher Ed, 2022).

Ok, but what does this mean for education?

This moment in time is strangely still something of the "Wild West" when it comes to Generative AI and K-20 education. The truth is that while many in higher education have shifted away from the initial "culture of fear," most across the wider educational landscape are still only scratching the surface of digital innovation with generative AI teaching and learning. Put simply, lots of questions remain--with answer often only partial or perpetually in flux. Some common questions or concerns from I've heard in just the last few months include:

  • Do we have any policies on Generative AI? If so, how do we enforce them? If we don't, what policies might we want?
  • Given its potential, how might we address Generative AI in our learning outcomes, activities, and assessments?
  • If students or faculty are using these tools, can they be trusted? Can their content be trusted? Are these tools still producing biased or even incorrect outputs?
  • How might these platforms aid in teaching and learning? Are there any best practices or guides available?
  • How are these tools impacting our specific subject areas? What we can do to help prepare students for a world where skills in using Generative AI will be of tremendous value?
5 Tips for Understanding AI for Today's Classrooms (Instructure)
4 Tips for GenAI and Syllabi (Justin Hodgson)
Generative AI | Ethics of Practice PDF (Justin Hodgson)

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

LEARNING BY DOING - CHALLENGE 1 Building Creative Confidence

The TASK

Working in small groups (2 or 3):

  • use a generative AI platform (e.g., CoPilot) to to come up with 3 to 5 ideas for a digital narrative related to a concept from a subject area you teach;
  • use the same generative AI platform to create a micro-story (300 words or so) related to one of the generated ideas;
  • use another generative AI platform (e.g., Adobe Firefly) to create 3-4 images for that micro-story; and then
  • combine the text and images into a published, scrolling, multimedia webpage using Adobe Express webpage

The RULES

  • Story must be between 200-350 words, created by (or at least in collaboration with) generative AI
  • Final creations, in Adobe Express, must include a title image and 2-3 "in-text" visuals created by (or at least in collaboration with) an image generative AI platform
  • Final output must be completed as a published Adobe Express webpage (i.e., live, online, with shareable URL).

The DELIVERABLE

When your Express page is completed, go to Share --> Publish so that your Express page is live online. Then copy/paste the link and share it, with your thoughts, on the shared Google Slides (use button below).

Share Published Creations Here

The goal here is to play with the tools, to continue to familiarize yourself with how descriptive language (through prompt interactivity) can impact output. For example, asking Firefly for "a painting of four wizards eating pizza in a college town in the style of Norman Rockwell" will produce a more detailed set of images than a prompt asking for "a painting of wizards"). Also, with claude.ai and lex.page (among others), results can be iterative: i.e., you can ask it to revise its previous output to add detail, emphasize certain elements of what was previously produced, etc. Take advantage of these features.

Tips & Example

When it comes to prompting Generative AI platforms like CoPilot, ChatGPT, claude.ai, and other large language model (LLM) platforms, it helps to designate the information in the prompts in digestible ways for the tool. I tend to use the following categories:

  • Role: assign it a role so it operates with a particular perspective or approach
  • Goal: describe your goal / what you need help doing
  • Context: offer relevant context to the goal and task
  • Other: provide additional information, attachments, etc. so it has more information to work with
  • Task: tell it what to generate and offer specific steps/guides as appropriate
My Example Prompt
  • [Role] You are a professional writing consultant specializing in helping Youth Fiction writers create story ideas and draft stories.
  • [Goal] I need help writing a story for 6th graders that will help them understand key rhetorical concepts and how they operate in the world.
  • [Context] I’ll be presenting this story to a group of students in a local Catholic School, using the story as a way to help illustrate key concepts
  • [Other info] The rhetorical concepts being focused on are ethos, pathos, and logos as introduced by Aristotle.
  • [Task] You will provide a list of three possible story ideas for demonstrating the rhetorical concept of pathos. Once you generate the list, you will wait for my response selecting the desired story idea and then complete the task of creating a 250 word micro story about that story idea.
Challenge 1 | Example Creation - "The Plight of Lilly" | Justin Hodgson

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

LEARNING BY DOING - CHALLENGE 2 Assignments and Assessments

The TASK

Working individually (or in groups)

  • use a generative AI platform (e.g., claude.ai) to come up with ideas for a multimedia assignment,
  • select one of those ideas and have the platform help you generate the text of that assignment,
  • use the same generative AI platform to create a rubric for assessment,
  • use a generative AI platform (e.g., Adobe Firefly) to create at least one visual (if not several visuals) for the assignment handout,
  • combine the text and images into a digital, published, multimedia guide/handout (i.e., as Adobe Express webpage or Google Slides/site).

The RULES

  • Assignments must include learning objectives and should identify the final format expectations (e.g., medium, delivery format, duration, genre, number of images, citations, etc.).
  • Creation must include at least 1 visual create by (or at least in collaboration with) generative AI.
  • Creation must include sections (e.g., overview, description, expectations, etc.) that are visually identifiable as sections (i.e., visual breaks in the Express page).
  • Final output must be a published online (i.e., as Adobe Express webpage, Google Slide/Site, other) with shareable URL.

The DELIVERABLE

If completing an Adobe Express webpage, when completed go to Share --> Publish so that your Express page is live online. Then copy/paste the link and share it, with your thoughts, on the shared Google Slides (use button below).

Share Published Creations Here

Tips and Workflows

When it comes to prompting Generative AI platforms like CoPilot, ChatGPT, claude.ai, and other large language model (LLM) platforms, it helps to designate the information in the prompts in digestible ways for the tool. I tend to use the following categories:

  • Role: assign it a role so it operates with a particular perspective or approach
  • Goal: describe your goal / what you are trying to achieve
  • Context: offer relevant context to the goal and would-be task
  • Other: provide additional information and/or content when relevant - the more information it has to work in relation to, the likelier it is to achieve something of value to you.
  • Task: tell it what to generate and offer specific steps/guides as appropriate
My Example Workflow

Role, Goal, Context, Other, & Task

Generated Ideas & Waiting on Selection

Prompt Selected and CoPilot generating requested content for the Task assigned

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

Co-Pilot | A Starting Guide

Step 1 | Sign in

  • If you have a Microsoft 365 account, go to copilot.microsoft.com and click "Sign in" button (red arrow)

OR...you can try a free version of copilot by going to https://www.microsoft.com/en-us/microsoft-copilot and selecting the "Try free version of Copilot" button.

Step 2 | Generate Some Ideas

Use the prompt bar (green arrow) to get CoPilot to generate 3-5 ideas for a story related to a disciplinary concept: e.g., rhetorical concept of pathos.

Step 3 | From Idea to MicroStory

Select one of the story ideas and ask CoPilot to write a microstory about that story ideas.

  • Be specific and be sure to limit the word count.

You might also try using/modifying the Roles, Goals, Context, Other, Task structure from Tips & Workflows sections above.

Bonus Step | Copy & Paste

Step 4 in the Create an Adobe Express webpage sequence will invite you to Copy/Paste your CoPilot created story into your Express webpage. At that point, return to CoPilot and use the copy button (green arrow) to copy the generated text.

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

Firefly | An Intro

Step 1 | Login

  • Click "Sign in" (green arrow) to sign in with email
  • Enter email (blue arrow) and click "Continue" (red arrow)
  • Complete your institutional secure login

OR you can create an account by using one of the preset login options (Google, Facebook, Apple) or creating your own account with your St. Charles email.

Step 2 | Generate Some Images

Generate an image by typing a description into the prompt bar (green arrow) and click "Generate" (purple arrow).

Firefly will generate four options. You can use one of these images or manipulate the content description (red box) or the image aesthetics (blue box) and try again:

  • Once you made changes (description or aesthetic), click "Generate" button to get a new set of creations.

Step 3 | Select and Download

  • Hover the cursor over the image you want to keep
  • Click the Options submenu (red arrow)
  • Select "Download" (blue arrow)

The "Promoting transparency in AI" notification will pop up on the screen, providing an overview of Adobe's commitment to content credentialing.

  • Click the "Continue" button to complete the image download process

Repeat the steps above as needed to generate the varying images for your Challenge.

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express

Build an Express Webpage

Step 1 | Login

For the first step, create a new Adobe CC Express Web page:

Full Process Overview

  • Go to the Adobe Express website: https://express.adobe.com {*If you are still signed in from Firefly, you may be able to skip right to Step 2 below}
  • If you are not signed-in, you will need to login to the Express site.

Step 2 | Create a Webpage

  • On the Adobe Express landing page, click the large round "+" button (green arrow) and then select "Web page" (blue arrow) in submenu

Step 3 | Build the Opening

Add title, subtitle, and opening image:

  • Once the new Web page project launches, click "Add a title" (green arrow) and add a title for your challenge: e.g., Challenge 1 - "The Story of Pathos"
  • Click "Add a subtitle" (blue arrow) and add your byline.
  • Click Photo icon (purple arrow), select "Upload from device" in photo submenu and add title image you created using Adobe Firefly.

Example

For Accessibility purposes: be sure to click the gear icon in the lower right corner of image (green arrow) an add Alt-text (blue arrow) or designate the image as decorative (red arrow). Click Save button when done.

Step 4 | Add Story Text

Add story text you created in collaboration with Co-Pilot:

  • Scroll down on the page, click the "+" in the center of the page (green arrow), and select "Text" button (blue arrow).
  • Copy/Paste text from Co-Pilot into Express

Once the text is on the page, you can select it and adjust it's appearance using the text submenu: i.e., designating header levels (purple arrow), call-out quotes, bulleted/numbered lists, bold, italics, links, and alignment.

Step 5 | Add Images

Locate strategic places to add/insert the other Firefly generative images into your story. Try to use at least 2 different photo or layout options.

  • Find place in text to add image
  • Click the "+" button and select "Photo" from submenu.
  • Click "Upload from Device" to add image
  • Once on the Express page, choose image display style: inline (default), Fill screen, Window, or Full width.

For each image added, be sure to address Accessibility: i.e., add Alt-text or designate the image as decorative.

Step 6 | Bonus Step

You can complete Step 5 by just adding your additional images and repeating the process. But you migth try playing with other 2 other layout options and features:

  • Photo grid if you have several photos you want to feature together
  • Split Layout for side-by-side (text and image) options

NOTE: You can also add images by selecting from the available stock image options rather than Firefly created images. To do this, search photos by keywords/phrases and select your choice to insert a photo.

  • Click the "+" button (green arrow), select Photo (blue arrow) and type description / keywords for image in "Search Photos" search bar (purple arrow).

Like in the previous steps, be sure to add Alt-Text to any images you add.

Step 7 | Share/Publish

Once completed, you need to publish your Express webpage

  • Click "Share" in the upper right corner (purple arrow) and select "Publish to web" (green arrow)
  • Click "Create link" (blue arrow)
  • Once done processing, click "Copy" (red arrow) to copy the URL for your published Adobe Express webpage and paste/share that link with us via the shared Google Slides
Share Published Creations Here

GEN AI |~| CHALLENGES |~| GUIDES: CoPilot | Firefly | Adobe Express