AI-Powered Gamification For The Web by Courtney Yatteau

AI-Powered Gamification For The Web by Courtney Yatteau 🔗 **Source:** [AI-Powered Gamification For The Web by Courtney Yatteau](https://www.youtube.com/watch?v=7UFUlVzrm-I) > [!note]+ Document Notes > tags: [gamification, AI, web-development] > author: Courtney Yatteau > source: YouTube > reference: https://www.youtube.com/watch?v=7UFUlVzrm-I > date created: 2024-12-28 12:00 > > # 🏷️ Title: AI-Powered Gamification For The Web >  ## 🧰 Action Inbox - [H1] Explore TensorFlow.js for dynamic difficulty systems — web-based ML #tensorflow - [H2] Implement sentiment analysis with Transformers.js — real-time feedback #sentiment-analysis - [H3] Try Hugging Face models for sentence similarity matching — project discovery #huggingface ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Video Demo Link](https://www.youtube.com/watch?v=7UFUlVzrm-I) - [CodePen Demos](https://codepen.io/courtney-yatteau) ## 📝 Summary - Courtney Yatteau demonstrates how AI can enhance web gamification using open-source tools - Core focus on TensorFlow.js and Hugging Face Transformers for browser-based AI - Four practical demos showing sentiment analysis, dynamic difficulty, sentence similarity, and combined geo-exploration - Emphasizes that AI-powered gamification creates personalized, adaptive user experiences - Bottom line: AI makes gamification responsive and intelligent without requiring complex backend infrastructure ## 📖 Main Content Gamification traditionally relies on static mechanics like progress bars, badges, and leaderboards to engage users. AI transforms these mechanics into dynamic, personalized experiences that adapt in real-time to user behavior. The core principles of effective gamification include progress and rewards (creating momentum), challenges and goals (providing direction), feedback and reinforcement (instant responses), and social interaction and competition (leveraging human social nature). AI enhances gamification through two key capabilities: personalization (tailoring experiences to individual users based on their patterns and preferences) and adaptation (dynamically adjusting difficulty, pacing, or tone based on performance). Modern browser-based tools like TensorFlow.js and Hugging Face Transformers make AI-powered gamification accessible to web developers without requiring extensive machine learning expertise or server-side infrastructure. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=0) — [H1] Loading Bar Psychology Introduction - Key idea: Loading bars work psychologically even when they lie to users - Evidence: "Even when it actually lies to us it keeps us watching" #### ⏱️ [02:30](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=150) — [H1] Speaker Background and Teaching Experience - Key idea: Gamification was essential for student engagement in math and CS education - Evidence: "Gamification really was something that I constantly used in my classroom to keep the students engaged" #### ⏱️ [04:15](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=255) — [H2] Definition of Gamification - Key idea: Gamification applies game mechanics to non-game experiences for psychological engagement - Evidence: "Good gamification is really about engagement through psychology" #### ⏱️ [05:45](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=345) — [H2] Four Core Gamification Principles - Key idea: Progress/rewards, challenges/goals, feedback/reinforcement, and social interaction drive engagement - Evidence: "When you bring all of this together... you get an application that users really do want to keep coming back to" #### ⏱️ [07:30](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=450) — [H1] AI's Role in Personalization - Key idea: AI tailors experiences to individual user patterns rather than one-size-fits-all approaches - Evidence: "Instead of giving every user like the same challenge or the same reward, AI can understand patterns" #### ⏱️ [08:45](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=525) — [H1] AI-Driven Gamification Flow - Key idea: Continuous cycle of user action, AI analysis, personalization, feedback, and adaptation - Evidence: "The system does then tailor what the user sees of course next" #### ⏱️ [11:00](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=660) — [H2] Sentiment Analysis Demo - Key idea: Browser-based sentiment analysis provides instant visual feedback without servers - Evidence: "Everything happening right in the browser" with real-time emoji and bar updates #### ⏱️ [15:30](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=930) — [H2] Dynamic Difficulty with TensorFlow.js - Key idea: AI adjusts quiz difficulty in real-time based on accuracy and response speed - Evidence: "It adapted in real time on the fly. It looked at again both how accurate you are and how quickly you respond" #### ⏱️ [20:15](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=1215) — [H2] Sentence Similarity for Project Matching - Key idea: AI matches user interests to GitHub projects beyond simple keyword matching - Evidence: "It did look beyond keywords. It did actually look for you know intentions and meaning behind it" #### ⏱️ [24:00](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=1440) — [H1] Combined Geo-Explorer Demo - Key idea: Multiple AI techniques can be integrated into a cohesive gamified mapping experience - Evidence: Shows TensorFlow.js dynamic difficulty, sentiment analysis, and badge systems working together #### ⏱️ [30:45](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=1845) — [H2] Accessibility of AI Tools - Key idea: Modern browser-based AI makes machine learning accessible to web developers - Evidence: "AI is very accessible for web developers... It doesn't take some big giant backend" #### ⏱️ [32:30](https://www.youtube.com/watch?v=7UFUlVzrm-I?t=1950) — [H1] Dynamic Engagement Conclusion - Key idea: AI and gamification together create experiences that evolve with users - Evidence: "They create dynamic engagement and so experiences that evolve with the user" ## 📚 References - [TensorFlow.js Documentation](https://www.tensorflow.org/js) - [Hugging Face Transformers.js](https://huggingface.co/docs/transformers.js) - [Leaflet Mapping Library](https://leafletjs.com/) - [Esri Leaflet Plugin](https://developers.arcgis.com/esri-leaflet/) ## 🗣️ Paraphrase - AI-powered gamification transforms static game mechanics into personalized, adaptive experiences that respond to individual user behavior patterns - Browser-based AI tools like TensorFlow.js and Hugging Face Transformers make machine learning accessible without complex backend infrastructure - Effective gamification combines progress tracking, goal-setting, instant feedback, and social elements to create psychological engagement that keeps users returning ## 📰 Newsletter 🎮 **AI-Powered Gamification: Making Web Apps More Engaging** Web developers can now create intelligent, adaptive user experiences using browser-based AI tools! Courtney Yatteau's presentation shows how combining traditional gamification with AI creates apps that learn and adapt to each user. **Key Benefits:** - Real-time difficulty adjustment based on user performance - Sentiment analysis for instant visual feedback - Intelligent project matching using sentence similarity - All running locally in the browser - no server required! **Getting Started:** Try TensorFlow.js for dynamic systems and Hugging Face Transformers for natural language processing. These tools make AI accessible to any web developer. Resources: [TensorFlow.js](https://www.tensorflow.org/js), [Hugging Face](https://huggingface.co/), [Demo CodePens](https://codepen.io/courtney-yatteau) ## ✅ Action Items #### DevRel - Developer advocacy: Create workshops demonstrating AI-powered gamification techniques, measure engagement through hands-on coding sessions - Education: Develop curriculum combining gamification psychology with practical AI implementation using browser-based tools - Developer experience: Improve documentation for TensorFlow.js and Transformers.js integration patterns - Developer marketing: Showcase real-world AI gamification examples in blog posts and conference talks - Community management: Foster discussions around ethical AI gamification practices and user privacy #### OSPO - Policy & Governance: Establish guidelines for responsible AI gamification in open source projects - License Compliance: Review AI model licenses from Hugging Face and TensorFlow ecosystems - Security Management: Assess privacy implications of browser-based AI processing vs server-side alternatives - Software Inventory: Track AI dependencies and model versions in gamified applications - Developer Support: Provide training on integrating AI models ethically and effectively - Community Engagement: Support open source AI gamification libraries and model development - Strategic Alignment: Align AI gamification initiatives with broader open source AI strategy #### Community - Maintainers: Create templates and examples for adding AI-powered gamification to existing projects - Contributors: Design beginner-friendly AI gamification projects for new contributors to learn from - Sponsors: Develop transparent impact metrics showing how AI gamification improves user engagement - Ecosystem: Coordinate with AI model creators to ensure gamification use cases are well-supported #### WordPress - Core: Explore AI-powered onboarding experiences that adapt to user skill levels - Core Performance: Monitor performance impact of browser-based AI models on WordPress sites - Core AI: Establish best practices for integrating AI gamification into WordPress core features - Community: Design AI-powered contribution matching system for WordPress contributors - Training: Create adaptive learning paths that adjust to individual learner progress - Marketing: Develop gamified WordPress adoption campaigns using sentiment analysis - Support: Implement AI-powered difficulty adjustment in support documentation - Design: Research AI-driven personalization for WordPress admin interfaces - Documentation: Create interactive, gamified documentation that adapts to user expertise - Meta: Implement AI-powered project matching for WordPress.org contributor onboarding #### The WPCC - Programs: Design AI-powered mentorship matching using sentence similarity techniques - Projects: Create gamified contribution tracking with adaptive difficulty and personalized goals - Funding: Develop AI-driven project recommendation systems for grant applicants #### FAIR - Technical independence: Ensure AI gamification tools remain vendor-neutral and interoperable - Policies: Establish transparent data usage policies for AI-powered personalization - Governance artifacts: Create ethical guidelines for AI gamification in community projects ## 🧪 Hypotheses - Browser-based AI gamification increases user engagement without compromising privacy compared to server-side alternatives - Dynamic difficulty adjustment using TensorFlow.js reduces user churn in educational web applications by 25-40% - Sentiment analysis feedback loops create stronger emotional connections between users and web applications - Combining multiple AI techniques (sentiment, similarity, difficulty adjustment) produces exponentially better engagement than single-technique approaches ### 📊 Methodology - A/B test traditional vs AI-powered gamification features measuring time-on-site, task completion, and return visits - Analyze performance metrics of browser-based AI models across different devices and network conditions - Conduct user interviews comparing static vs adaptive gamification experiences across different skill levels ### ❓ Questions - How do we balance AI personalization with user privacy in browser-based gamification systems? - What performance thresholds make browser-based AI models viable for real-time gamification features? - How can we ensure AI-powered gamification remains accessible across different devices and abilities? ### 🔮 Future Research - Investigate federated learning approaches for gamification that improve across users while preserving privacy - Explore multimodal AI integration combining text, voice, and behavioral signals for richer gamification - Research ethical frameworks for AI gamification that avoid manipulative dark patterns ### 💡 Implications - Practice: Web developers can now implement intelligent gamification without machine learning expertise or complex infrastructure - Policy: Need for clear guidelines on ethical AI gamification practices and user consent for behavioral adaptation - Security: Browser-based AI processing reduces server attack surfaces but requires new client-side security considerations - Education: Traditional UX design curricula need updating to include AI-powered interaction patterns - Funding: Organizations should budget for AI model hosting, updates, and ethical review processes in gamified applications ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 12 #### 👀 Visual learners - Present: Multiple live demos with visual feedback (emojis, progress bars, map updates) - Improve: Architecture diagrams showing AI data flow, visual comparison charts of traditional vs AI gamification #### 🔊 Aural learners - Present: Video presentation with clear narration and explanation - Improve: Audio-only summary version, podcast-style deep dive on individual techniques #### 🗣️ Verbal learners - Present: Clear technical term definitions, analogies (loading bar psychology), step-by-step explanations - Improve: Glossary of AI/gamification terms, story-driven case studies from classroom experience #### 🧩 Kinesthetic learners - Present: Interactive CodePen demos, hands-on coding examples - Improve: Step-by-step tutorial worksheets, interactive debugging exercises #### 🧠 Logical learners - Present: Clear cause-effect relationships in AI gamification flow, systematic demo progression - Improve: Decision trees for choosing AI techniques, performance benchmarking data #### 🧑‍🤝‍🧑 Social learners - Present: Examples of social gamification features (leaderboards, badges) - Improve: Group coding challenges, peer review rubrics for AI gamification projects #### 🧘‍♀️ Solitary learners - Present: Individual demos to explore at own pace, self-contained code examples - Improve: Self-assessment quizzes, personal reflection prompts on gamification ethics #### 🌿 Naturalistic learners - Present: Geographic mapping demo connecting AI to real-world locations - Improve: Environmental impact discussions of client vs server AI processing ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Video has clear verbal descriptions of visual elements and code examples - Improve: Transcript with detailed descriptions of UI interactions and visual changes #### Keyboard navigation - Present: CodePen demos support keyboard navigation - Improve: Explicit keyboard shortcuts documentation for demo interactions #### Contrast and readability - Present: Demo interfaces use reasonable contrast ratios - Improve: High contrast mode support for AI feedback visualizations #### Text resizing and reflow - Present: Web-based demos should support browser zoom - Improve: Responsive design validation for AI gamification components #### Media and captions - Present: Video available on YouTube with automatic captions - Improve: Professional captions, downloadable transcript with code snippets #### Forms and interactions - Present: Simple form interactions in demos - Improve: Error handling for AI model failures, accessible progress indicators #### Standards reference - Map demo interfaces to WCAG 2.2 AA guidelines, particularly for dynamic content updates and user notifications ### 🌍 DEIB Assessment #### Cultural breadth - Present: GitHub project discovery spans global open source community - Improve: Examples from diverse cultural contexts, internationalization considerations for AI models #### Inclusive language - Present: Neutral technical terminology, clear explanations - Improve: Avoid gaming metaphors that exclude non-gamers, define technical jargon consistently #### Neurodiversity support - Present: Multiple interaction modes (visual, textual, interactive) - Improve: Sens --- ## Full Transcript [00:05] Hello everyone. Thank you for coming. [00:08] I'm very excited to talk to you guys [00:10] about AI powered gamification. [00:13] And before we get into that, [00:15] I [00:17] have a confession to make. Let me go [00:20] back. There we go. Okay. So, I have [00:22] never trusted a loading bar. And the [00:25] reason is that little progress bar that [00:28] says like 99% it could stay there for a [00:31] whole well what feels like forever. So [00:35] there's something interesting about a [00:37] progress bar though because it it does [00:39] work. So even when it actually lies to [00:41] us it keeps us watching. It keeps us [00:44] focused on hey when's it going to [00:46] finish? So that's really the psychology [00:49] behind gamification. You've got [00:51] progress, you've got feedback and [00:54] rewards. So now let's imagine if this [00:57] bar were to actually learn from you. So [01:01] for instance, maybe it's going to speed [01:03] up if you are a bit impatient or maybe [01:06] it will slow down when you need a little [01:09] bit of a breather or maybe it will [01:12] celebrate some of your small wins. [01:15] And that's really what we're going to be [01:17] exploring today. So, how can AI make [01:20] those little interactions feel alive? [01:23] Um, using open source tools. We're going [01:25] to be using TensorFlowJS. We're going to [01:27] be using some hugging face um [01:29] transformers models to give your web [01:31] apps uh this sense of responsiveness and [01:35] personality. [01:39] All right. So, this will be our agenda. [01:41] We will first look at what gamification [01:43] is and the principles behind it. Uh and [01:47] then we will talk about how AI fits into [01:49] that picture and the tools that make it [01:51] all possible and then from there we will [01:54] run through a few live demos and finally [01:57] we will wrap up with some key takeaways. [02:01] Now I do have the slides and demos up [02:03] here um the QR code and a link for you. [02:06] I will have that a couple more times in [02:08] the slides once right before the demos [02:10] and once again at the very end. So, if [02:12] you want to snatch it later, if you miss [02:14] it now, you'll be able to. And those I [02:17] made it really simple that for for you [02:19] to just start playing around with the [02:21] demos. Um, they're all just very simple [02:24] code pen demos. So, you can just, you [02:26] know, immediately start playing with [02:27] testing out the code. Um, so yeah, let's [02:31] go ahead and get into it. Now, I want to [02:32] go ahead and introduce myself. Uh, my [02:34] name is Courtney. I am a developer [02:37] advocate at EZRI, which is a GIS uh [02:41] mapping software company, geographic [02:43] information systems. [02:45] Who's heard of it? Oh, wow. Okay, [02:49] awesome. That's a lot more than I [02:51] usually get. Um, so I've been there for [02:53] a little over three years now. Uh, and [02:56] previously before that, I was actually a [02:58] high school math and computer science [02:59] teacher. Uh, and I did that for 10 [03:02] years. And then I transitioned into more [03:04] of the CS side of things. I was [03:06] selftaught in the CS realm and [03:08] gamification really was something that I [03:10] constantly used in my classroom to keep [03:13] the students engaged. So as I've [03:15] transitioned into this more like [03:17] front-end web developer type role, I've [03:20] looked for ways to use it in my [03:22] applications and my demos to get people [03:25] excited uh to try out cool new things. [03:31] Okay, so let's go ahead and start with [03:32] the basics. What exactly is [03:34] gamification? [03:36] Um, so really at its core, it's about [03:39] taking the mechanics that make games fun [03:42] and applying them to non-game apps or [03:45] experiences. So these are things like [03:47] progress bars, uh, levels, badges, [03:50] challenges, rewards. And gamification [03:53] really does work because it taps into [03:56] how we're wired. It taps into our uh [03:58] intrinsic motivations and exttrinsic as [04:01] well. We like that feedback. Uh we like [04:03] goals and we really like that sense of [04:06] achievement and it's honestly it is not [04:09] just about the points and like the [04:11] prizes and rewards and things. Good [04:13] gamification is really about engagement [04:15] through psychology. So it's a whole [04:17] experience, right? You're creating [04:19] experiences that make people want to [04:21] keep coming back to your apps. [04:27] Okay, so now that we've figured out what [04:30] gamification is, let's talk about some [04:32] principles behind gamification. So, [04:35] first we have progress and rewards. And [04:37] this is really what keeps the users [04:38] coming back. So, when you see your [04:40] progress laid out right for you, whether [04:43] it's a streak or a level or a reward [04:45] meter or something like that, it does [04:47] create a sense of momentum. And so, it's [04:50] a it's almost that like motivating sense [04:52] of I'm almost there. [04:56] All right. Um, oh, and by the way, [04:58] Starbucks does a really good job at the [05:00] progress and rewards. Um, in that image [05:02] you can see, you can actually see how [05:03] close you are getting to that next free [05:06] drink or reward, whatever it may be. All [05:08] right, so the next one is challenges and [05:10] goals. And now these actually do give [05:12] the user a bit of direction, uh, [05:15] something to work towards, right? So [05:17] this could be something like your daily [05:19] goals, um, achievements or maybe [05:21] milestones. So, in apps like Dolingo, [05:25] uh, which I know several of my friends [05:27] at least do use this app, um, that daily [05:30] XP, that target that you have, it keeps [05:33] coming back. It keeps like reminding you [05:35] to say, "Hey, be sure to practice [05:37] today." So, you don't want to make the [05:39] bird mad. [05:42] All right? And then there is feedback [05:45] and reinforcement. And this here is the [05:49] key is really your instant response. So [05:52] when you do say finish a lesson and do a [05:54] lingo, um you don't just get silence. [05:56] You do get some kind of like maybe [05:58] confetti or you know some kind of reward [06:01] um progress updates. So it tells you you [06:03] did something good and you need to keep [06:04] going. [06:07] And then finally we have social [06:10] interaction and competition. So humans [06:13] of course we are all very social [06:15] creatures and we do love like comparing [06:17] and sharing and we all have that bit of [06:19] competitiveness in us at some points. Um [06:22] and sometimes we just like celebrating [06:24] together too. So that's why leaderboards [06:26] like friends lists um or even small [06:29] community shoutouts those kind of things [06:30] really do work well. So when you bring [06:33] all of this together, your progress, [06:35] goals, feedback, and social connection, [06:37] you get um an application that users [06:40] really do want to keep coming back to. [06:43] All right, [06:46] so now that we've talked about what [06:48] gamification is and the principles that [06:51] make them work, we're going to go ahead [06:53] and start to really see how we can throw [06:55] in AI into the picture. So the first [06:59] role that AI plays is personalization [07:02] and it helps tailor your experiences to [07:05] different individuals. So instead of [07:07] giving um every user like the same [07:09] challenge or the same reward, AI can [07:12] understand patterns like how often [07:14] someone actually engages with the [07:15] application or they drop off or maybe [07:18] what helps motivate them. Um and of [07:21] course the more that the user interacts [07:23] the more the system learns what keeps [07:24] them motivated. [07:28] And then the second role is adaption and [07:31] this is about dynamic analysis. So there [07:34] will be a demo that I'll show in a bit [07:35] with um dynamic difficulty. So AI can [07:38] adjust like I just said difficulty, [07:40] pacing um or even potentially the tone [07:43] that is being uh used toward the user uh [07:46] based on their performance. So for [07:48] example, if a user is breezing through a [07:50] quiz really quickly, um maybe try to [07:53] make the questions a little bit tougher. [07:55] Uh, and if they're struggling, of [07:56] course, kind of maybe dial it down a bit [07:58] to help motivate them to keep going. [08:05] All right. So, here's what happens when [08:07] we put everything together. And this is [08:10] an AI driven gamification flow. I've [08:13] used Starbucks as the example for this. [08:16] So, it starts out with your user action. [08:18] So, this is going to be someone just [08:19] makes like say a purchase or completes a [08:21] challenge or checks their app. And this [08:24] is really the signal that starts this [08:26] cycle. [08:27] So then we have AI analysis. And here is [08:31] where some data comes in. So it could be [08:33] potentially the time of day that the [08:35] user is placing an order, using the app, [08:37] past behaviors, preferences, you know, [08:40] patterns, all that kind of stuff. So the [08:42] AI looks for trends uh like when does [08:45] the person say maybe engage most with um [08:48] the app or what kind of challenges are [08:50] going to keep them coming back. So it [08:51] does a little bit of analysis on what [08:54] they've uh interacted, how they've [08:56] interacted with the app. And then we [08:58] have personalization. [08:59] And so the system does then tailor what [09:02] the user sees of course next. Uh maybe [09:04] it could be say a cozy drink on a cold [09:07] morning or it could offer some kind of [09:09] bonus that's based on previous [09:11] purchases. Uh and yeah, so that's really [09:14] trying to get them to actually go [09:16] through with potentially a a purchase or [09:18] an action. [09:21] All right. And then comes user feedback. [09:24] So this could be direct like a rating or [09:26] a survey, you know, something very [09:29] specifically direct by them giving their [09:30] feedback or it could be indirect by them [09:32] just ignoring whatever it was that was [09:34] pushed to them. So it could be say maybe [09:38] easier wins to re-engage a quiet user or [09:40] adding difficulty or adding difficulty [09:42] for someone on a hot streak. So it could [09:44] there's many different ways that the [09:47] user could actually interact with the um [09:49] app. And finally the um the AI creates [09:52] an adapted challenge. So this is this is [09:54] really where the whole experience um [09:57] comes to you know a finish and then [09:58] we'll kind of continue to go um through [10:02] the flow. So after the user does [10:04] whatever kind of interaction uh the [10:06] challenges are adapted based on their [10:09] their feedback and based on the whole [10:11] experience. And so hopefully the next [10:13] time the flow happens again, hopefully [10:15] it's been adapted in a more personalized [10:17] way and it keeps them again coming back [10:20] to the application. [10:24] All right, so I have built a few [10:27] browserbased demos to show these in [10:29] action. So if you didn't grab that yet, [10:31] you want to go ahead. Um, all of these [10:33] are going to be running locally using [10:35] open source AI libraries, of course, and [10:38] they are available at that link. [10:42] I'm gonna pull up the first one. Just a [10:44] second. [10:46] Okay. [10:48] All right. Let's check it out. Okay. So, [10:51] this first one um is something fun. It's [10:53] going to be sentiment analysis. So, [10:56] let's take a look at it. [11:00] Okay. All right. So, this is a simple [11:02] sentiment analyzer that runs of course [11:05] entirely in the browser here. Um it is [11:07] using uh an open source model from [11:10] transformers.js [11:12] u to detect if something is positive, [11:15] negative or neutral tone in the text. So [11:19] the model has already loaded. In fact, I [11:21] can refresh it. So you can see up there [11:23] uh where it says model ready up here in [11:25] the top right. Refresh. Loading model. [11:28] There you go. So it's been loaded. And [11:30] then I can click analyze. And I've [11:32] already got uh a couple sentences [11:33] plugged in here for us to test out. So [11:35] let's see what happens. [11:39] All right. Okay. So we can see that [11:41] right away what happened is we got an [11:43] overall sentiment of positive. It was [11:45] able to detect that generally this seems [11:47] like a pretty positive um paragraph here [11:51] couple of sentences. Now what it [11:52] actually did though was it was able to [11:54] actually split up the first sentence. So [11:57] it detected a little bit of nuance [11:59] there. It said okay coding is fun. So [12:01] that detected that as positive. But then [12:03] it says, "Sometimes it's difficult, [12:05] right? Sometimes difficult." So then [12:07] there you've got a bit of neutral and [12:09] negative. [12:10] And then finally, the last one was also [12:12] very positive as well. I love to eat [12:13] snacks while coding. And so that came [12:16] out to be um very positive. So overall [12:18] sentiment positive. So as you can see, [12:21] it can handle not only multiple [12:23] sentences, but it can handle again that [12:26] breaking up of sentences maybe if [12:28] there's a bit of like nuance uh with [12:30] within the sentence itself. So, um, we [12:34] can test out, let me just test out [12:35] something else just to see how it looks [12:37] when I do something very simple. I'm [12:39] just going to say today is Monday. I [12:41] would assume that should be very [12:42] neutral. And yes, it is quite quite [12:44] neutral. [12:46] So again, everything happening right in [12:48] the browser. Let's go ahead and take a [12:50] look at a bit of the code that's used to [12:52] make this application. And again, you [12:55] can see it all um if you brought up your [12:57] the demos from the QR code. [13:02] All right. Okay. So the first thing is I [13:05] do start by importing the pipeline [13:07] helper from transformers.js. [13:09] And this does allow me to run the AI [13:12] models directly of course in the [13:13] browser. Uh and the next thing that we [13:16] do is I load the sentiment model and [13:20] that one specifically here you can see [13:21] the name of it quite long. Um and it [13:25] runs locally in web assembly. So once [13:27] it's loaded, everything happens [13:29] instantly on your um computer or device. [13:36] All right. And then when you click [13:37] analyze, the text is trimmed and split [13:40] into sentences like we saw before. So [13:43] each sentence does get sent to the model [13:45] and it gives back the scores negative, [13:47] positive or neutral. Uh and then we do [13:50] store each one for each sentence. And [13:52] finally, we do calculate an average of [13:54] the scores and display it on our web [13:57] page. [14:01] So that is the heart of the sentiment [14:03] analysis demo. [14:07] All right, so let me go ahead and do [14:08] just a little bit of takeaways from [14:09] this. We're going to look at AI and [14:10] gamification. So on the AI side, [14:13] everything does of course run locally. [14:14] Like I said, um this does mean that the [14:17] model is completely self-contained and [14:19] fast. Um the model itself is a sentiment [14:22] classifier and it can handle [14:25] different types of sentences whether [14:26] that has all positivity or a bit of a [14:29] mix. Um and it can also handle multiple [14:32] sentences. [14:34] And then the gamification part is a [14:36] little bit more um hidden kind of. It's [14:39] not as obvious um but really every time [14:42] that you analyze a text you do get that [14:44] immediate visual feedback. So, we had [14:46] the emoji change if it was positive, [14:49] negative, or neutral. The bar did the [14:51] bars, all of the bars did update. Uh, [14:53] and you can literally watch the tone [14:55] shift. So, it's a very visual experience [14:58] for the user. And that's really the key [15:00] idea. I mean, gamification, it doesn't [15:02] always have to be some kind of reward or [15:04] points. Sometimes it could just be [15:06] feedback that is nice and instant and [15:09] rewarding in a more visual way. [15:15] All right. So the next demo that I have [15:17] is a dynamic difficulty demo and this is [15:20] going to be using TensorFlowJS. [15:28] All right. [15:31] Get that loaded. And I'm going to go [15:33] ahead and actually refresh this page so [15:36] we can actually see to pay attention to [15:39] those numbers right there. [15:43] Okay, so we can see the training at the [15:45] bottom and it shows the epics and loss. [15:49] Um, basically epic is just the number of [15:51] times that it does a full pass through [15:53] the training data. Uh, and the loss just [15:56] shows the a bit of error that's [15:57] happening within the model. So you can [15:59] um I had to play around with this quite [16:01] a bit for this really simple quiz. You [16:03] would have to play around with the [16:04] numbers and just see, you know, kind of [16:05] what gets you a good um a good small [16:09] loss. So, the number of EP epics that [16:11] you do, um, and honestly the the amount [16:14] of training data as well. All right, so [16:17] I'm going to go ahead and click start. [16:19] Um, a few other things to pay attention [16:21] to. Uh, we've we've got the current [16:23] level here, so it's going to start out [16:25] as easy. Um, and it's also listed here. [16:28] And then each time I answer a question, [16:30] it's going to give a certain percentage [16:31] of what it thinks u the next question [16:34] difficulty should be. Now, this is a [16:36] really simple quiz that I made. These [16:38] are hard-coded questions. It's just a [16:40] small set of questions. Um, so there's [16:43] only about like three or four for each [16:45] level. So I probably get some repeats [16:46] here, but let's see what happens. [16:50] All right, banana color. [16:54] All right, I answered that correctly. [16:56] And I answered that pretty quickly, too. [16:58] So right away it was like, okay, let's [17:00] try go try to go to medium. Now, it gave [17:01] me 74% for medium. Now, as I'm talking, [17:04] it's actually, you know, on a timer. So, [17:08] if I even if I get this right right now, [17:10] I probably won't progress to the next [17:12] level. [17:14] There it is. In fact, I got it right, [17:16] but I took so long that it bump me back [17:17] down to easy. And we have the banana [17:21] color one again. [17:24] And then we have Whoops, I hit that too [17:27] quickly. This one we have chemical for [17:30] gold. And I took too long there. And [17:32] let's see if I can get back up to hard [17:34] there. Okay. Yeah, just showing you the [17:35] different levels of um basically how [17:38] this could work in a very very small set [17:40] of data that was used to train this um [17:43] this little application. So of course [17:45] the more data that you have the better [17:48] the application will run based on um the [17:52] number of cycles or epics that you do. [17:56] All right. Now, [17:59] um, one other thing I want to say about [18:01] this is this was definitely something [18:03] that, you know, when I was in the [18:04] classroom, I certainly enjoyed having [18:08] experiences like this for my students [18:09] because it made it to where I didn't [18:11] just have to make say like a worksheet [18:13] or something. It was really, you know, [18:15] allowing the students to kind of work at [18:17] their own pace while still learning. So [18:20] the ones that were, you know, a little [18:21] bit more advanced, they were able to, [18:23] you know, still feel like they were not [18:25] bored and actually progressing versus [18:28] the ones that were challenging or [18:30] challenged a bit and they, you know, [18:32] needed the level to be a bit easier. [18:33] They were still able to, you know, [18:35] participate and um learn as they went [18:37] through. [18:39] So let's look at a bit of the code for [18:41] this one. [18:50] There it goes. Okay. Now, I don't I'm [18:54] not going to get into super details [18:55] about this because it's easy to just [18:58] discover what TensorFlow umJS actually [19:01] does. Uh but I will describe a bit about [19:04] why I chose some of these things. Um so [19:06] it's again it's created with [19:08] TensorFlow.js using um TF sequential. [19:10] Basically this just means that we are uh [19:12] stacking layers one one in another. Um [19:15] and so the first layer does take in [19:17] three inputs [19:19] as we can see here. Um so that is [19:22] whether the answer was correct how fast [19:24] I answered and the current difficulty [19:26] level. Uh and then the let's see the [19:31] next part. Oh the output layer. Okay. So [19:33] the next part is our output layer. And [19:35] so u this has three neurons. That's what [19:38] this three here is for. um with a [19:40] softmax activation, one for each [19:43] possible difficulty. So, we've got easy, [19:45] medium, or hard. [19:48] And there's a lot more there's a lot [19:49] more details like I could go into about [19:51] why I chose to use like softmax or relu [19:54] here. Uh but don't have a ton of time [19:57] for that. Um then the other thing, so [20:00] here's what happens when I do hit [20:02] submit. So the app checks whether my [20:05] answer was correct. uh it measures how [20:07] long I took and normalizes the time to a [20:10] scale um between zero and one. So it [20:14] does a bit of normalization there. Uh [20:15] and then it actually turns the three [20:18] values into tensors which it's just [20:21] really a fancy word for how the model [20:23] understands and then they're able to um [20:25] predict. So that's what's happening on [20:27] this second to last line there. And then [20:29] the model instantly does return uh a [20:32] probability for each difficulty level. [20:36] And so that's the gist of it. [20:38] Again, all in the browser, very nice and [20:41] fast. [20:46] All right, here are some takeaways from [20:48] this. [20:50] So again, this little quiz, it adapted [20:52] in real time on the fly. Um, it looked [20:55] at again both how accurate you are and [20:56] how quickly you respond. And the best [20:59] part is that it was, you know, not [21:01] connecting to any kind of server. [21:05] So from a gamification perspective here, [21:08] this really uh was about progressive [21:11] mastery. So you do start with um easy [21:14] questions and then you automatically [21:16] raise the challenge if they get it [21:18] correct quickly. Uh so you have that [21:20] instant feedback with every answer. So [21:21] it does feel, you know, responsive. [21:28] And a little bit of extra is that of [21:29] course it's great for some kind of like [21:31] learning or training app. Uh I could [21:34] certainly see something like this uh [21:36] working in a workplace environment for [21:38] training uh employees as well. [21:42] So it's pretty simple but it actually is [21:44] pretty powerful uh when you dig into the [21:47] code and you know start to play around [21:49] with it and think about the different [21:50] applications of where this potentially [21:52] could be used. [21:57] All right. So then we have a sentence [22:00] similarity demo. And this one's this [22:02] one's pretty fun. I uh I actually this [22:04] is a newer one that I came up with um [22:07] not just a few weeks ago. I was thinking [22:09] about different ways to use similarity [22:13] of sentences or words, you know, how [22:14] that actually could work uh for a [22:17] developer uh who is trying to find [22:20] different places where they can u [22:22] contribute during well it happens to be [22:25] Hacktoberfest right now. So that's kind [22:27] of like the um idea behind how I came up [22:29] with this app. [22:31] So, let's take a look. [22:37] There we go. All right. Okay. So, this [22:40] says, "Use a hugging faces sentence [22:42] similarity model um to match what you're [22:45] interested in with real GitHub [22:47] projects." So, I actually am using uh [22:50] GitHub's API to pull in information [22:53] about different repositories that you [22:55] potentially may want to contribute to. [22:58] So, let's go ahead and try out a [23:03] prompt here. I'm going to say I love [23:05] writing docs and building accessible [23:07] React components. I'll click find [23:09] projects. [23:11] All right. And here's what comes up. It [23:13] says your interests, what I uh already [23:16] typed in, and then it says top matches. [23:18] And so here, basically, again, it [23:20] fetches these from GitHub and it ranks [23:22] them by similarity score. So each card [23:25] does show a little badge here which that [23:27] could be earned if you do contribute. [23:29] Now that is something that I didn't [23:31] actually connect in the code, but that's [23:33] the idea behind it. That's a little bit [23:34] of fun gamification where if you were [23:36] using this app, you could say, hey, you [23:37] know, if I actually do contribute, I [23:39] could earn this badge. And then you can [23:42] click good first issues and it'll open [23:44] up and it'll go straight to GitHub and [23:46] it'll show you all the good first issues [23:47] that are related to the sentence or [23:51] information that you gave it. [23:54] So, a fun little way to discover [23:56] potentially where you could contribute [23:58] based on your interests. [24:01] Let me try one more. [24:07] All right. I like testing with Jess and [24:09] Cyprus. [24:10] And there it goes. Once again, we do see [24:13] um the matches update and we see a bunch [24:16] of different options here. [24:21] All right. [24:24] So that is a very simple again a very [24:27] simple demo but it's pretty powerful [24:30] because it's actually able to um you [24:32] know do the sentence matching um among [24:35] the different words that you've put in [24:37] with descriptions and names of the [24:40] different GitHub repos. [24:42] So let's look at a bit of the code for [24:44] that. [24:51] All right. So here we'll look at that [24:54] top box first. So I set two different [24:57] values. Um and so the first value is uh [25:00] the web address of a sentence similarity [25:03] model that I was mentioning. Um that can [25:05] compare my sentence to a list of the [25:07] repo descriptions. And then the second [25:09] value um is my access key. So obviously [25:13] I'd be able to use uh the service. And [25:16] then the other function uh and this is [25:18] really just know the main core of how [25:19] this this all works. Uh first it asks [25:21] GitHub for a small set of repositories [25:24] that have good first issues and keeps [25:26] only the three pieces of information [25:28] that I need which are really the name of [25:30] the repo, the link and the description. [25:33] And then second it does send my sentence [25:36] and all of those descriptions to the [25:38] sentence similarity model. uh and each [25:41] one receives a score and then it does uh [25:44] the bit of pairing uh for that with [25:46] pairing with each repository and then [25:49] after the scores it does sort them by [25:51] highest. That's what we got. [25:59] All right. [26:01] Okay. So, a bit of takeaways for this [26:04] demo. So this demo again it did use [26:06] hugging faces transformers to match [26:08] contributors uh repos to or contribute [26:11] potential contributors to open source [26:13] projects. So on the AI side um I did use [26:17] sentence similarity to compare what a [26:19] user types against GitHub repos um [26:22] descriptions and this was the model that [26:24] was used and then um it did look beyond [26:28] keywords. It did actually look for you [26:30] know intentions and meaning behind it. [26:32] So it's it's not as just straightforward [26:34] as looking for the word react. It's [26:37] doing a bit more. The model is handled [26:39] to train um actual intentions. [26:43] And then on the [26:46] gamification side, um the app does turn [26:49] into a bit of a light challenge. Um and [26:51] that's really just where those badges [26:53] come into play. Um, I could certainly [26:55] see, you know, expanding that kind of [26:57] application to maybe having some kind of [26:59] social leaderboard, you know, to [27:01] encourage um that that kind of [27:03] interaction uh with others. [27:08] And finally, and the extras is we were [27:11] using the GitHub search API for all of [27:13] the different candidates. [27:19] All right. [27:22] Now, I do have a full combined demo. Um, [27:26] and this is going to be one where I've [27:27] used a lot of different things to put it [27:30] together. So, I've used everything that [27:31] we've talked about so far. Um, along [27:34] with another open source, two open [27:36] source libraries actually. We're using [27:38] um the mapping library leaflet. And then [27:41] we are also using um a plug-in which is [27:44] Ezri Leaflet. And so, this offers um [27:46] extended functionality of just the basic [27:48] leaflet map. So, this is going to be a [27:51] fun geo explorer type demo. Uh, so the [27:55] idea behind it is you travel somewhere [27:57] and you're wanting to learn more about [27:59] the area. Uh, there's going to be [28:01] multiple different things that I'll show [28:03] you that I've embedded into this fun [28:06] gamified uh, mapping demo. Um, just out [28:09] of curiosity, has anyone ever used Leaf [28:11] Live before? Okay, nice. Awesome. Yeah, [28:15] I would say if you've never used um a [28:17] mapping library and you want to, I say [28:20] Leaflet is definitely one of the first [28:21] ones to go to. Um, of course, I'm [28:24] talking about in the JavaScript world. [28:27] There is also Map Libre. There's also [28:30] Open Layers. Um, CZM for 3D. [28:34] All of those are pretty good. Just [28:35] depends on your use case needs. [28:39] All right, let me bring this up. [28:47] Okay. Okay. So, like I said, um we have [28:52] a map using Leaflet and Ezri Leaflet. Uh [28:54] it is currently centered around the [28:56] Raleigh area. Um and there are a couple [29:00] different modes that are a part of this [29:03] uh demo. So, we have a quiz mode and [29:06] then we also have a sentiment mode. So, [29:08] I'm going to keep it on quiz mode for [29:10] now and talk through the rest of what's [29:11] on the side here. So, uh, we are using [29:13] TensorFlow for dynamic difficulty and [29:17] it's going to use that within our quiz [29:20] that you'll get to see in a minute. And [29:22] then we have the number of attempts, we [29:24] have our accuracy, we have our average [29:26] time that it takes, we have if we are on [29:29] a streak or not for answering questions [29:31] correctly. Uh, and we have an abandoned [29:34] section. So, I could say I just didn't [29:35] want to answer a question. All right. [29:38] The next thing is we do have a bunch of [29:40] different uh badges that are going to be [29:42] possible to earn. So, we have an [29:44] explorer badge, we have a local expert [29:46] badge, uh we have a super raider one, [29:48] and we have a legend one. And then we'll [29:50] also have some fun hidden ones that will [29:52] show up too as I go through and do some [29:55] of some of these other things. Okay, [29:58] another fun thing is the base map [30:00] unlocks. So, what I've done here is the [30:03] map that we're seeing right now, the the [30:05] way that it's styled. It's called um the [30:08] ArcGIS navigation style. Uh and this is [30:11] just a very good general use case type [30:13] of map. Now, as you continue through and [30:17] answer questions when we get to the [30:19] question part of this, we will be able [30:21] to unlock more base maps and see, you [30:24] know, kind of the cool um the cool [30:27] styling for how they're made. And then [30:29] we do actually get to learn a little bit [30:30] about why that style or how that styling [30:33] is used. So again here for navigation [30:36] says clean labels great for general use. [30:38] So we'll see a bit more when we get to [30:40] the questions. And then finally I have a [30:42] reset button down here. Okay. So um I [30:46] will go ahead and click on here. Now we [30:48] are using um transformers.js JS for the [30:52] majority of what's about to happen other [30:54] than the dynamic difficulty different [30:57] models. [31:00] All right. And it it does take a few [31:02] seconds to load on that first time. Um [31:04] there it goes. So it says which of these [31:06] is near 300-358 [31:09] North Salisbury Street? I don't know. [31:12] But I will tell you I didn't randomize [31:14] the answers. So the answer should be a [31:15] every time. I just made that easy on me. [31:19] Um, so I got it correct. Great. That's [31:21] awesome. So, we see everything over here [31:23] actually update. We see that time, you [31:25] know, the accuracy. Um, our difficulty [31:28] level is still easy because I did take [31:29] quite a bit of time to answer it. It [31:31] took 11.6 seconds. So, let's try again. [31:33] And I'll answer quickly. [31:38] Yay. Okay, I got it right in 1.2 [31:41] seconds. And now my difficulty level is [31:44] medium. And we can see, you know, our [31:46] average time has been updated. Now, as [31:48] I'm doing this, we can see that all the [31:49] different base maps over here. Um, we [31:52] are adding up how close we are to [31:54] earning each one. So, just another [31:56] little form of, you know, gamification [31:57] there. So, it means I only need to do [31:59] one more. I unlock at three. I will [32:01] unlock another one. So, let's try one [32:03] more. [32:06] Hey, there it is. And right away, the [32:08] base map did update. And that that just [32:09] kind of gives it a fun feel of say, you [32:11] know, it's very visual, right? It's not [32:14] like, oh, hey, you unlock something. It [32:16] literally changes it for you, so you [32:17] know, hey, whoa, something happened. [32:19] It's kind of fun. Um, yeah, and then it [32:22] does say street detail with subtle [32:24] terrain. [32:26] All right, now the other fun part to [32:28] this app is the sentiment part to it. [32:34] All right, I've activated sentiment [32:36] mode. So, I'm going to go ahead and [32:37] click somewhere. And the idea behind [32:39] this is you are supposed to really just [32:42] state the sentiment that you feel about [32:44] a specific location. I made it very [32:47] simple, but you know, you could [32:48] certainly take it to the next level [32:50] where you could say maybe this would be [32:52] like when you go on um Google Maps and [32:55] you're reviewing places like that kind [32:56] of thing. [32:58] And it could be used even in an AI sense [33:01] to then maybe eventually predict places [33:03] that are similar to what you do like [33:06] potentially based on your sentiment [33:07] about that place or the other way around [33:10] saying maybe you don't want to go here. [33:13] All right. So this says Jones Corner [33:15] Studio is where I clicked. I'm going to [33:17] go ahead and do something very simple. [33:18] I'm just going to type love [33:21] save note. And right away it says saved [33:23] positive. Um it's kind of fun because it [33:25] does actually show an emoji. I'll show [33:26] that in a sec. One other thing is it did [33:29] say hashtagfamilyfriendly [33:30] 43%. [33:32] So this is just a bit of extra detection [33:35] of okay positive negative but then it's [33:37] also using that sentence similarity to [33:39] hit it against potential different [33:41] hashtags. [33:44] And so there's our fun little smiley. So [33:46] I'm going to do a couple more just to [33:48] show you what happens after I do a few [33:50] more. And I'm just gonna honestly I'm [33:52] just going to do love two more times [33:54] real quick [33:56] so we can get what I want to pop up. [34:02] There we go. Okay. Right there at the [34:04] bottom corner we can see that it says um [34:06] topic badge earned top voice in hash [34:09] familyfriendly. So after you answer u or [34:12] you do leave a response in a certain [34:14] number of it was three places this time [34:16] you actually earn an a hidden badge [34:19] there. So, it's kind of fun. Uh, yeah, I [34:22] will show one more just for the sake of [34:23] showing the other emoji face. [34:30] And that one, it actually came out to be [34:32] neutral. I said bad. So, could be it was [34:36] probably in the middle between negative [34:38] and neutral, but it doesn't look too [34:40] happy. So, all right. So, this is a fun [34:44] little demo that, you know, could [34:45] certainly again be expanded. Um, but it [34:47] does uh it does actually, you know, save [34:49] all of your different uh sentiments [34:51] there for future use. Um, and I didn't [34:54] actually have it save questions, but you [34:56] certainly could do that, you know, as [34:58] well. [35:00] All right, let me go back. [35:07] There we go. Okay, so um before I go [35:10] ahead and wrap up, I do want to of [35:13] course talk about these libraries that I [35:15] did use. Um so first uh TensorFlow it [35:18] did let us build the dynamic difficulty [35:21] um app that we did and it uh it was [35:25] actually cool to see you know all of the [35:27] changes in real time that were [35:29] happening. So it really does feel like [35:30] the game is actually keeping up with the [35:33] player uh and yeah making it more [35:36] engaging for them. And then there's [35:38] hugging face which you know is basically [35:39] the community home for machine learning [35:41] models as um I'm sure most of us know. [35:44] Uh it's where you can find your [35:45] pre-trained models from uh for [35:48] everything from really like sentiment [35:49] analysis like we did to um text [35:51] generation which actually I forgot to [35:53] call that out but that was actually what [35:55] was happening um a bit more behind the [35:57] scenes of that map demo. Um certainly [36:00] again you could check out the code but [36:02] you will see that it was doing a bit of [36:04] geocoding there uh which you know just [36:07] changing um a location to um a name [36:10] basically. Uh, so it just tells you, you [36:12] know, what's where is this place [36:13] located? Um, it sends that information [36:16] to the text generation model. Uh, and [36:19] then it's able to come back with a fun [36:22] little quiz question about it. [36:25] And then transformers.js, which is [36:28] hugging faces JavaScript library, right? [36:30] I used it for several different of my [36:32] demos here. Um, it does run obviously [36:35] those same models completely on device. [36:37] Uh, no server, very fast. So together, I [36:40] mean, all of these really should [36:42] hopefully make you realize that AI is [36:44] very accessible for web developers. Um, [36:47] hopefully you've been, you know, a bit [36:48] inspired to maybe try some of these [36:50] different uh models out, right? It [36:52] doesn't take some big giant backend um [36:55] or some kind of maybe PhD in data [36:58] science or whatever. [37:02] Okay. And then we're going to wrap this [37:05] up with really the core two things that [37:08] we talked about, gamification um and AI. [37:10] So gamification does give us the um [37:13] structure for things like progress and [37:16] challenges, feedback and social [37:19] interaction. [37:20] And then when we threw in the AI, uh we [37:24] actually [37:26] bring in that personalization element. [37:28] So it makes the user feel like they're [37:30] actually being heard and are really the [37:32] app is actually adapting to them making [37:35] the experience better for them [37:39] and the word I just used adaption. They [37:41] kind of go hand in hand there, right? [37:43] It's constantly um evolving and changing [37:46] so that the user feels heard and so [37:50] overall together they create dynamic [37:53] engagement and so experiences that [37:55] evolve with the user and they're not [37:58] just uh rewarding them, right? So it's [38:00] it's a whole dynamic experience. We saw [38:02] the flow earlier. Um so it's constantly [38:05] um adapting to the users and creating [38:08] the engagement experience for them. [38:13] So, this is a a list of different [38:15] resources that um I use to help build [38:18] all of these demos. And I will say if [38:21] you um if you do end up using any of the [38:24] demos, uh playing around with them, [38:26] creating something fun of your own, uh [38:28] definitely please share it with me. I [38:30] hope everyone has, you know, been [38:31] inspired a bit to try some of this out. [38:34] And I know gamification in general is [38:37] something that some people think maybe [38:39] it's kind of silly, but I hope you see a [38:40] bit more of the the usefulness of adding [38:43] it to one of your potential [38:44] applications. So, uh yeah, here is the [38:47] demos once again if you didn't grab it [38:49] yet, and I would love to connect with [38:51] you on social. So, there's that. Thank [38:53] you all very much, and happy coding. [38:56] [Applause]  ## 📺 Video ![](https://www.youtube.com/watch?v=7UFUlVzrm-I) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=7UFUlVzrm-I)* **[00:05]** Hello everyone. Thank you for coming. I'm very excited to talk to you guys about AI powered gamification. And before we get into that, I have a confession to make. Let me go back. There we go. Okay. So, I have never trusted a loading bar. And the reason is that little progress bar that says like 99% it could stay there for a whole well what feels like forever. So there's something interesting about a **[00:37]** progress bar though because it it does work. So even when it actually lies to us it keeps us watching. It keeps us focused on hey when's it going to finish? So that's really the psychology behind gamification. You've got progress, you've got feedback and rewards. So now let's imagine if this bar were to actually learn from you. So for instance, maybe it's going to speed up if you are a bit impatient or maybe it will slow down when you need a little **[01:09]** bit of a breather or maybe it will celebrate some of your small wins. And that's really what we're going to be exploring today. So, how can AI make those little interactions feel alive? Um, using open source tools. We're going to be using TensorFlowJS. We're going to be using some hugging face um transformers models to give your web apps uh this sense of responsiveness and personality. All right. So, this will be our agenda. **[01:41]** We will first look at what gamification is and the principles behind it. Uh and then we will talk about how AI fits into that picture and the tools that make it all possible and then from there we will run through a few live demos and finally we will wrap up with some key takeaways. Now I do have the slides and demos up here um the QR code and a link for you. I will have that a couple more times in the slides once right before the demos and once again at the very end. So, if **[02:12]** you want to snatch it later, if you miss it now, you'll be able to. And those I made it really simple that for for you to just start playing around with the demos. Um, they're all just very simple code pen demos. So, you can just, you know, immediately start playing with testing out the code. Um, so yeah, let's go ahead and get into it. Now, I want to go ahead and introduce myself. Uh, my name is Courtney. I am a developer advocate at EZRI, which is a GIS uh mapping software company, geographic **[02:43]** information systems. Who's heard of it? Oh, wow. Okay, awesome. That's a lot more than I usually get. Um, so I've been there for a little over three years now. Uh, and previously before that, I was actually a high school math and computer science teacher. Uh, and I did that for 10 years. And then I transitioned into more of the CS side of things. I was selftaught in the CS realm and gamification really was something that I constantly used in my classroom to keep the students engaged. So as I've **[03:15]** transitioned into this more like front-end web developer type role, I've looked for ways to use it in my applications and my demos to get people excited uh to try out cool new things. Okay, so let's go ahead and start with the basics. What exactly is gamification? Um, so really at its core, it's about taking the mechanics that make games fun and applying them to non-game apps or experiences. So these are things like **[03:47]** progress bars, uh, levels, badges, challenges, rewards. And gamification really does work because it taps into how we're wired. It taps into our uh intrinsic motivations and exttrinsic as well. We like that feedback. Uh we like goals and we really like that sense of achievement and it's honestly it is not just about the points and like the prizes and rewards and things. Good gamification is really about engagement through psychology. So it's a whole **[04:17]** experience, right? You're creating experiences that make people want to keep coming back to your apps. Okay, so now that we've figured out what gamification is, let's talk about some principles behind gamification. So, first we have progress and rewards. And this is really what keeps the users coming back. So, when you see your progress laid out right for you, whether it's a streak or a level or a reward meter or something like that, it does create a sense of momentum. And so, it's **[04:50]** a it's almost that like motivating sense of I'm almost there. All right. Um, oh, and by the way, Starbucks does a really good job at the progress and rewards. Um, in that image you can see, you can actually see how close you are getting to that next free drink or reward, whatever it may be. All right, so the next one is challenges and goals. And now these actually do give the user a bit of direction, uh, something to work towards, right? So this could be something like your daily goals, um, achievements or maybe **[05:21]** milestones. So, in apps like Dolingo, uh, which I know several of my friends at least do use this app, um, that daily XP, that target that you have, it keeps coming back. It keeps like reminding you to say, "Hey, be sure to practice today." So, you don't want to make the bird mad. All right? And then there is feedback and reinforcement. And this here is the key is really your instant response. So **[05:52]** when you do say finish a lesson and do a lingo, um you don't just get silence. You do get some kind of like maybe confetti or you know some kind of reward um progress updates. So it tells you you did something good and you need to keep going. And then finally we have social interaction and competition. So humans of course we are all very social creatures and we do love like comparing and sharing and we all have that bit of competitiveness in us at some points. Um and sometimes we just like celebrating **[06:24]** together too. So that's why leaderboards like friends lists um or even small community shoutouts those kind of things really do work well. So when you bring all of this together, your progress, goals, feedback, and social connection, you get um an application that users really do want to keep coming back to. All right, so now that we've talked about what gamification is and the principles that make them work, we're going to go ahead and start to really see how we can throw **[06:55]** in AI into the picture. So the first role that AI plays is personalization and it helps tailor your experiences to different individuals. So instead of giving um every user like the same challenge or the same reward, AI can understand patterns like how often someone actually engages with the application or they drop off or maybe what helps motivate them. Um and of course the more that the user interacts the more the system learns what keeps them motivated. **[07:28]** And then the second role is adaption and this is about dynamic analysis. So there will be a demo that I'll show in a bit with um dynamic difficulty. So AI can adjust like I just said difficulty, pacing um or even potentially the tone that is being uh used toward the user uh based on their performance. So for example, if a user is breezing through a quiz really quickly, um maybe try to make the questions a little bit tougher. Uh, and if they're struggling, of course, kind of maybe dial it down a bit to help motivate them to keep going. **[08:05]** All right. So, here's what happens when we put everything together. And this is an AI driven gamification flow. I've used Starbucks as the example for this. So, it starts out with your user action. So, this is going to be someone just makes like say a purchase or completes a challenge or checks their app. And this is really the signal that starts this cycle. So then we have AI analysis. And here is where some data comes in. So it could be potentially the time of day that the user is placing an order, using the app, **[08:37]** past behaviors, preferences, you know, patterns, all that kind of stuff. So the AI looks for trends uh like when does the person say maybe engage most with um the app or what kind of challenges are going to keep them coming back. So it does a little bit of analysis on what they've uh interacted, how they've interacted with the app. And then we have personalization. And so the system does then tailor what the user sees of course next. Uh maybe it could be say a cozy drink on a cold morning or it could offer some kind of **[09:09]** bonus that's based on previous purchases. Uh and yeah, so that's really trying to get them to actually go through with potentially a a purchase or an action. All right. And then comes user feedback. So this could be direct like a rating or a survey, you know, something very specifically direct by them giving their feedback or it could be indirect by them just ignoring whatever it was that was pushed to them. So it could be say maybe easier wins to re-engage a quiet user or **[09:40]** adding difficulty or adding difficulty for someone on a hot streak. So it could there's many different ways that the user could actually interact with the um app. And finally the um the AI creates an adapted challenge. So this is this is really where the whole experience um comes to you know a finish and then we'll kind of continue to go um through the flow. So after the user does whatever kind of interaction uh the challenges are adapted based on their their feedback and based on the whole **[10:11]** experience. And so hopefully the next time the flow happens again, hopefully it's been adapted in a more personalized way and it keeps them again coming back to the application. All right, so I have built a few browserbased demos to show these in action. So if you didn't grab that yet, you want to go ahead. Um, all of these are going to be running locally using open source AI libraries, of course, and they are available at that link. **[10:42]** I'm gonna pull up the first one. Just a second. Okay. All right. Let's check it out. Okay. So, this first one um is something fun. It's going to be sentiment analysis. So, let's take a look at it. Okay. All right. So, this is a simple sentiment analyzer that runs of course entirely in the browser here. Um it is using uh an open source model from transformers.js **[11:12]** u to detect if something is positive, negative or neutral tone in the text. So the model has already loaded. In fact, I can refresh it. So you can see up there uh where it says model ready up here in the top right. Refresh. Loading model. There you go. So it's been loaded. And then I can click analyze. And I've already got uh a couple sentences plugged in here for us to test out. So let's see what happens. All right. Okay. So we can see that right away what happened is we got an **[11:43]** overall sentiment of positive. It was able to detect that generally this seems like a pretty positive um paragraph here couple of sentences. Now what it actually did though was it was able to actually split up the first sentence. So it detected a little bit of nuance there. It said okay coding is fun. So that detected that as positive. But then it says, "Sometimes it's difficult, right? Sometimes difficult." So then there you've got a bit of neutral and negative. And then finally, the last one was also very positive as well. I love to eat snacks while coding. And so that came **[12:16]** out to be um very positive. So overall sentiment positive. So as you can see, it can handle not only multiple sentences, but it can handle again that breaking up of sentences maybe if there's a bit of like nuance uh with within the sentence itself. So, um, we can test out, let me just test out something else just to see how it looks when I do something very simple. I'm just going to say today is Monday. I would assume that should be very neutral. And yes, it is quite quite neutral. **[12:46]** So again, everything happening right in the browser. Let's go ahead and take a look at a bit of the code that's used to make this application. And again, you can see it all um if you brought up your the demos from the QR code. All right. Okay. So the first thing is I do start by importing the pipeline helper from transformers.js. And this does allow me to run the AI models directly of course in the browser. Uh and the next thing that we **[13:16]** do is I load the sentiment model and that one specifically here you can see the name of it quite long. Um and it runs locally in web assembly. So once it's loaded, everything happens instantly on your um computer or device. All right. And then when you click analyze, the text is trimmed and split into sentences like we saw before. So each sentence does get sent to the model and it gives back the scores negative, **[13:47]** positive or neutral. Uh and then we do store each one for each sentence. And finally, we do calculate an average of the scores and display it on our web page. So that is the heart of the sentiment analysis demo. All right, so let me go ahead and do just a little bit of takeaways from this. We're going to look at AI and gamification. So on the AI side, everything does of course run locally. Like I said, um this does mean that the model is completely self-contained and **[14:19]** fast. Um the model itself is a sentiment classifier and it can handle different types of sentences whether that has all positivity or a bit of a mix. Um and it can also handle multiple sentences. And then the gamification part is a little bit more um hidden kind of. It's not as obvious um but really every time that you analyze a text you do get that immediate visual feedback. So, we had the emoji change if it was positive, **[14:49]** negative, or neutral. The bar did the bars, all of the bars did update. Uh, and you can literally watch the tone shift. So, it's a very visual experience for the user. And that's really the key idea. I mean, gamification, it doesn't always have to be some kind of reward or points. Sometimes it could just be feedback that is nice and instant and rewarding in a more visual way. All right. So the next demo that I have is a dynamic difficulty demo and this is **[15:20]** going to be using TensorFlowJS. All right. Get that loaded. And I'm going to go ahead and actually refresh this page so we can actually see to pay attention to those numbers right there. Okay, so we can see the training at the bottom and it shows the epics and loss. Um, basically epic is just the number of **[15:51]** times that it does a full pass through the training data. Uh, and the loss just shows the a bit of error that's happening within the model. So you can um I had to play around with this quite a bit for this really simple quiz. You would have to play around with the numbers and just see, you know, kind of what gets you a good um a good small loss. So, the number of EP epics that you do, um, and honestly the the amount of training data as well. All right, so I'm going to go ahead and click start. Um, a few other things to pay attention **[16:21]** to. Uh, we've we've got the current level here, so it's going to start out as easy. Um, and it's also listed here. And then each time I answer a question, it's going to give a certain percentage of what it thinks u the next question difficulty should be. Now, this is a really simple quiz that I made. These are hard-coded questions. It's just a small set of questions. Um, so there's only about like three or four for each level. So I probably get some repeats here, but let's see what happens. All right, banana color. **[16:54]** All right, I answered that correctly. And I answered that pretty quickly, too. So right away it was like, okay, let's try go try to go to medium. Now, it gave me 74% for medium. Now, as I'm talking, it's actually, you know, on a timer. So, if I even if I get this right right now, I probably won't progress to the next level. There it is. In fact, I got it right, but I took so long that it bump me back down to easy. And we have the banana color one again. **[17:24]** And then we have Whoops, I hit that too quickly. This one we have chemical for gold. And I took too long there. And let's see if I can get back up to hard there. Okay. Yeah, just showing you the different levels of um basically how this could work in a very very small set of data that was used to train this um this little application. So of course the more data that you have the better the application will run based on um the number of cycles or epics that you do. **[17:56]** All right. Now, um, one other thing I want to say about this is this was definitely something that, you know, when I was in the classroom, I certainly enjoyed having experiences like this for my students because it made it to where I didn't just have to make say like a worksheet or something. It was really, you know, allowing the students to kind of work at their own pace while still learning. So the ones that were, you know, a little bit more advanced, they were able to, you know, still feel like they were not bored and actually progressing versus **[18:28]** the ones that were challenging or challenged a bit and they, you know, needed the level to be a bit easier. They were still able to, you know, participate and um learn as they went through. So let's look at a bit of the code for this one. There it goes. Okay. Now, I don't I'm not going to get into super details about this because it's easy to just **[18:58]** discover what TensorFlow umJS actually does. Uh but I will describe a bit about why I chose some of these things. Um so it's again it's created with TensorFlow.js using um TF sequential. Basically this just means that we are uh stacking layers one one in another. Um and so the first layer does take in three inputs as we can see here. Um so that is whether the answer was correct how fast I answered and the current difficulty level. Uh and then the let's see the **[19:31]** next part. Oh the output layer. Okay. So the next part is our output layer. And so u this has three neurons. That's what this three here is for. um with a softmax activation, one for each possible difficulty. So, we've got easy, medium, or hard. And there's a lot more there's a lot more details like I could go into about why I chose to use like softmax or relu here. Uh but don't have a ton of time for that. Um then the other thing, so here's what happens when I do hit **[20:02]** submit. So the app checks whether my answer was correct. uh it measures how long I took and normalizes the time to a scale um between zero and one. So it does a bit of normalization there. Uh and then it actually turns the three values into tensors which it's just really a fancy word for how the model understands and then they're able to um predict. So that's what's happening on this second to last line there. And then the model instantly does return uh a probability for each difficulty level. **[20:36]** And so that's the gist of it. Again, all in the browser, very nice and fast. All right, here are some takeaways from this. So again, this little quiz, it adapted in real time on the fly. Um, it looked at again both how accurate you are and how quickly you respond. And the best part is that it was, you know, not connecting to any kind of server. So from a gamification perspective here, **[21:08]** this really uh was about progressive mastery. So you do start with um easy questions and then you automatically raise the challenge if they get it correct quickly. Uh so you have that instant feedback with every answer. So it does feel, you know, responsive. And a little bit of extra is that of course it's great for some kind of like learning or training app. Uh I could certainly see something like this uh working in a workplace environment for **[21:38]** training uh employees as well. So it's pretty simple but it actually is pretty powerful uh when you dig into the code and you know start to play around with it and think about the different applications of where this potentially could be used. All right. So then we have a sentence similarity demo. And this one's this one's pretty fun. I uh I actually this is a newer one that I came up with um not just a few weeks ago. I was thinking **[22:09]** about different ways to use similarity of sentences or words, you know, how that actually could work uh for a developer uh who is trying to find different places where they can u contribute during well it happens to be Hacktoberfest right now. So that's kind of like the um idea behind how I came up with this app. So, let's take a look. There we go. All right. Okay. So, this **[22:40]** says, "Use a hugging faces sentence similarity model um to match what you're interested in with real GitHub projects." So, I actually am using uh GitHub's API to pull in information about different repositories that you potentially may want to contribute to. So, let's go ahead and try out a prompt here. I'm going to say I love writing docs and building accessible React components. I'll click find projects. **[23:11]** All right. And here's what comes up. It says your interests, what I uh already typed in, and then it says top matches. And so here, basically, again, it fetches these from GitHub and it ranks them by similarity score. So each card does show a little badge here which that could be earned if you do contribute. Now that is something that I didn't actually connect in the code, but that's the idea behind it. That's a little bit of fun gamification where if you were using this app, you could say, hey, you know, if I actually do contribute, I could earn this badge. And then you can **[23:42]** click good first issues and it'll open up and it'll go straight to GitHub and it'll show you all the good first issues that are related to the sentence or information that you gave it. So, a fun little way to discover potentially where you could contribute based on your interests. Let me try one more. All right. I like testing with Jess and Cyprus. And there it goes. Once again, we do see **[24:13]** um the matches update and we see a bunch of different options here. All right. So that is a very simple again a very simple demo but it's pretty powerful because it's actually able to um you know do the sentence matching um among the different words that you've put in with descriptions and names of the different GitHub repos. So let's look at a bit of the code for **[24:44]** that. All right. So here we'll look at that top box first. So I set two different values. Um and so the first value is uh the web address of a sentence similarity model that I was mentioning. Um that can compare my sentence to a list of the repo descriptions. And then the second value um is my access key. So obviously I'd be able to use uh the service. And **[25:16]** then the other function uh and this is really just know the main core of how this this all works. Uh first it asks GitHub for a small set of repositories that have good first issues and keeps only the three pieces of information that I need which are really the name of the repo, the link and the description. And then second it does send my sentence and all of those descriptions to the sentence similarity model. uh and each one receives a score and then it does uh the bit of pairing uh for that with **[25:46]** pairing with each repository and then after the scores it does sort them by highest. That's what we got. All right. Okay. So, a bit of takeaways for this demo. So this demo again it did use hugging faces transformers to match contributors uh repos to or contribute potential contributors to open source projects. So on the AI side um I did use **[26:17]** sentence similarity to compare what a user types against GitHub repos um descriptions and this was the model that was used and then um it did look beyond keywords. It did actually look for you know intentions and meaning behind it. So it's it's not as just straightforward as looking for the word react. It's doing a bit more. The model is handled to train um actual intentions. And then on the gamification side, um the app does turn **[26:49]** into a bit of a light challenge. Um and that's really just where those badges come into play. Um, I could certainly see, you know, expanding that kind of application to maybe having some kind of social leaderboard, you know, to encourage um that that kind of interaction uh with others. And finally, and the extras is we were using the GitHub search API for all of the different candidates. All right. **[27:22]** Now, I do have a full combined demo. Um, and this is going to be one where I've used a lot of different things to put it together. So, I've used everything that we've talked about so far. Um, along with another open source, two open source libraries actually. We're using um the mapping library leaflet. And then we are also using um a plug-in which is Ezri Leaflet. And so, this offers um extended functionality of just the basic leaflet map. So, this is going to be a fun geo explorer type demo. Uh, so the **[27:55]** idea behind it is you travel somewhere and you're wanting to learn more about the area. Uh, there's going to be multiple different things that I'll show you that I've embedded into this fun gamified uh, mapping demo. Um, just out of curiosity, has anyone ever used Leaf Live before? Okay, nice. Awesome. Yeah, I would say if you've never used um a mapping library and you want to, I say Leaflet is definitely one of the first ones to go to. Um, of course, I'm talking about in the JavaScript world. **[28:27]** There is also Map Libre. There's also Open Layers. Um, CZM for 3D. All of those are pretty good. Just depends on your use case needs. All right, let me bring this up. Okay. Okay. So, like I said, um we have a map using Leaflet and Ezri Leaflet. Uh it is currently centered around the Raleigh area. Um and there are a couple **[29:00]** different modes that are a part of this uh demo. So, we have a quiz mode and then we also have a sentiment mode. So, I'm going to keep it on quiz mode for now and talk through the rest of what's on the side here. So, uh, we are using TensorFlow for dynamic difficulty and it's going to use that within our quiz that you'll get to see in a minute. And then we have the number of attempts, we have our accuracy, we have our average time that it takes, we have if we are on a streak or not for answering questions **[29:31]** correctly. Uh, and we have an abandoned section. So, I could say I just didn't want to answer a question. All right. The next thing is we do have a bunch of different uh badges that are going to be possible to earn. So, we have an explorer badge, we have a local expert badge, uh we have a super raider one, and we have a legend one. And then we'll also have some fun hidden ones that will show up too as I go through and do some of some of these other things. Okay, another fun thing is the base map unlocks. So, what I've done here is the **[30:03]** map that we're seeing right now, the the way that it's styled. It's called um the ArcGIS navigation style. Uh and this is just a very good general use case type of map. Now, as you continue through and answer questions when we get to the question part of this, we will be able to unlock more base maps and see, you know, kind of the cool um the cool styling for how they're made. And then we do actually get to learn a little bit about why that style or how that styling **[30:33]** is used. So again here for navigation says clean labels great for general use. So we'll see a bit more when we get to the questions. And then finally I have a reset button down here. Okay. So um I will go ahead and click on here. Now we are using um transformers.js JS for the majority of what's about to happen other than the dynamic difficulty different models. All right. And it it does take a few seconds to load on that first time. Um **[31:04]** there it goes. So it says which of these is near 300-358 North Salisbury Street? I don't know. But I will tell you I didn't randomize the answers. So the answer should be a every time. I just made that easy on me. Um, so I got it correct. Great. That's awesome. So, we see everything over here actually update. We see that time, you know, the accuracy. Um, our difficulty level is still easy because I did take quite a bit of time to answer it. It took 11.6 seconds. So, let's try again. And I'll answer quickly. **[31:38]** Yay. Okay, I got it right in 1.2 seconds. And now my difficulty level is medium. And we can see, you know, our average time has been updated. Now, as I'm doing this, we can see that all the different base maps over here. Um, we are adding up how close we are to earning each one. So, just another little form of, you know, gamification there. So, it means I only need to do one more. I unlock at three. I will unlock another one. So, let's try one more. Hey, there it is. And right away, the base map did update. And that that just **[32:09]** kind of gives it a fun feel of say, you know, it's very visual, right? It's not like, oh, hey, you unlock something. It literally changes it for you, so you know, hey, whoa, something happened. It's kind of fun. Um, yeah, and then it does say street detail with subtle terrain. All right, now the other fun part to this app is the sentiment part to it. All right, I've activated sentiment mode. So, I'm going to go ahead and click somewhere. And the idea behind this is you are supposed to really just **[32:42]** state the sentiment that you feel about a specific location. I made it very simple, but you know, you could certainly take it to the next level where you could say maybe this would be like when you go on um Google Maps and you're reviewing places like that kind of thing. And it could be used even in an AI sense to then maybe eventually predict places that are similar to what you do like potentially based on your sentiment about that place or the other way around saying maybe you don't want to go here. **[33:13]** All right. So this says Jones Corner Studio is where I clicked. I'm going to go ahead and do something very simple. I'm just going to type love save note. And right away it says saved positive. Um it's kind of fun because it does actually show an emoji. I'll show that in a sec. One other thing is it did say hashtagfamilyfriendly 43%. So this is just a bit of extra detection of okay positive negative but then it's also using that sentence similarity to hit it against potential different hashtags. **[33:44]** And so there's our fun little smiley. So I'm going to do a couple more just to show you what happens after I do a few more. And I'm just gonna honestly I'm just going to do love two more times real quick so we can get what I want to pop up. There we go. Okay. Right there at the bottom corner we can see that it says um topic badge earned top voice in hash familyfriendly. So after you answer u or you do leave a response in a certain **[34:14]** number of it was three places this time you actually earn an a hidden badge there. So, it's kind of fun. Uh, yeah, I will show one more just for the sake of showing the other emoji face. And that one, it actually came out to be neutral. I said bad. So, could be it was probably in the middle between negative and neutral, but it doesn't look too happy. So, all right. So, this is a fun little demo that, you know, could **[34:45]** certainly again be expanded. Um, but it does uh it does actually, you know, save all of your different uh sentiments there for future use. Um, and I didn't actually have it save questions, but you certainly could do that, you know, as well. All right, let me go back. There we go. Okay, so um before I go ahead and wrap up, I do want to of course talk about these libraries that I **[35:15]** did use. Um so first uh TensorFlow it did let us build the dynamic difficulty um app that we did and it uh it was actually cool to see you know all of the changes in real time that were happening. So it really does feel like the game is actually keeping up with the player uh and yeah making it more engaging for them. And then there's hugging face which you know is basically the community home for machine learning models as um I'm sure most of us know. Uh it's where you can find your **[35:45]** pre-trained models from uh for everything from really like sentiment analysis like we did to um text generation which actually I forgot to call that out but that was actually what was happening um a bit more behind the scenes of that map demo. Um certainly again you could check out the code but you will see that it was doing a bit of geocoding there uh which you know just changing um a location to um a name basically. Uh, so it just tells you, you know, what's where is this place located? Um, it sends that information **[36:16]** to the text generation model. Uh, and then it's able to come back with a fun little quiz question about it. And then transformers.js, which is hugging faces JavaScript library, right? I used it for several different of my demos here. Um, it does run obviously those same models completely on device. Uh, no server, very fast. So together, I mean, all of these really should hopefully make you realize that AI is very accessible for web developers. Um, **[36:47]** hopefully you've been, you know, a bit inspired to maybe try some of these different uh models out, right? It doesn't take some big giant backend um or some kind of maybe PhD in data science or whatever. Okay. And then we're going to wrap this up with really the core two things that we talked about, gamification um and AI. So gamification does give us the um structure for things like progress and challenges, feedback and social **[37:19]** interaction. And then when we threw in the AI, uh we actually bring in that personalization element. So it makes the user feel like they're actually being heard and are really the app is actually adapting to them making the experience better for them and the word I just used adaption. They kind of go hand in hand there, right? It's constantly um evolving and changing so that the user feels heard and so **[37:50]** overall together they create dynamic engagement and so experiences that evolve with the user and they're not just uh rewarding them, right? So it's it's a whole dynamic experience. We saw the flow earlier. Um so it's constantly um adapting to the users and creating the engagement experience for them. So, this is a a list of different resources that um I use to help build all of these demos. And I will say if **[38:21]** you um if you do end up using any of the demos, uh playing around with them, creating something fun of your own, uh definitely please share it with me. I hope everyone has, you know, been inspired a bit to try some of this out. And I know gamification in general is something that some people think maybe it's kind of silly, but I hope you see a bit more of the the usefulness of adding it to one of your potential applications. So, uh yeah, here is the demos once again if you didn't grab it yet, and I would love to connect with you on social. So, there's that. Thank **[38:53]** you all very much, and happy coding. [Applause]