Transformers JS: Chrome Ext & Huggingface w/ FREE AI models

Name: Transformers JS: Chrome Ext & Huggingface w/ FREE AI models
Rating: 3.5 (14 reviews)

AI in the browser: A Hands-on Guide to Building Intelligent Chrome Extensions with Javascript and Hugging Face

Created byNerding I/O

Last updated 2/2024

English

What you'll learn

Basic Understanding of Artificial Intelligence
Understanding real-world applications of AI in the Browser
Creating Chrome Extensions
Leveraging Hugging Face and Transformer JS
Grasping Machine Learning concepts
Exploring Natural Language Processing (NLP)

Course content

5 sections • 31 lectures • 4h 23m total length

Introduction2:06
Explore AI in the browser by building a Chrome extension that uses a Hugging Face model, while learning machine learning, NLP, and JavaScript.
Basics of AI, ML, and NLP2:08
Explore the basics of artificial intelligence, machine learning, and natural language processing with in-browser demos and Chrome extension previews using Hugging Face and Transformer.js.
Introduction to Hugging Face and Transformer JS2:26
Learn to use hugging face and transformer js to run pre-trained NLP models in the browser, powering open-source chat and browser-based AI for chrome extensions.
Install Chrome, iTerm & VS Code2:32
Explore essential development tools for the course, including Chrome, iTerm2, and Visual Studio Code, and preview extensions and Hugging Face autocomplete to streamline your editing workflow.
Setup Development Extensions5:24
Install and configure key VS Code extensions to optimize development for transformers js projects, including eslint, prettier, live server, and huggingface code autocomplete, with optional Python tooling.
Primer on JS and Chrome Extensions3:03
Explore JavaScript fundamentals and Chrome extensions to bring AI capabilities to the browser, covering variables, data types, functions, loops, events, promises, async/await, and manifest, background, content, and popup scripts.
Intro to HF Autocomplete & Huggingface6:01
Learn to use huggingface autocomplete and huggingface chat, obtain a read API token, integrate it with the vscode extension, and create main.py to see autocompletion and open source chat outputs.
Feedback0:38
Share your comments, ratings, or reviews to help improve this course and enhance learning experiences for you and future students on the Nerding Isle platform.

Setup Transformer JS Example11:31
Learn how to set up transformers js on your local machine, test chrome extension demos, and run hugging face models for tasks like sentiment analysis and translation using a pipeline.
Introduction11:24
Learn how to set up questionable, a chrome extension that uses transformers for on-page question-and-answer searches, including cloning the repo, installing npm dependencies, and building to test the pipeline.
Architecture Overview16:10
Explore the architecture of Chrome extensions, including the manifest configuration, background service workers, and content scripts. Learn how isolated extension pages like popup and options communicate via messaging and storage.
Install Dependencies & Build10:16
Install transformers dependencies, clone the repo, and set up public Huggingface models with wasm files, then build with webpack watch to load and test the Chrome extension.
Manifest V3 Review and Configuration10:02
Explore manifest file setup for a Chrome extension with manifest version 3, covering permissions, background scripts, icons, and the content security policy to ensure proper deployment.
Understanding Webpack File4:12
Understand how webpack config uses plugins to copy public assets, create an inline source map, and avoid obfuscation, while mapping source files to the build output for a Chrome extension.
Background.js8:23
Explore how the background.js background script powers a Chrome extension, handling messages between the popup and model, tracking progress, and broadcasting status through the Chrome runtime.
Popup4:57
Explore the Chrome extension popup as an isolated UI, wire input events to send messages to the background, and compare fast local JavaScript models with remote Hugging Face APIs.
Content26:19
Learn to add a content script to a Chrome extension, inject it into web pages, and debug background and content script messaging with manifest updates and refresh flows.
Progress Bar for Initialization25:01
Implement async messaging across content, background, and popup to drive a progress bar during model initialization. Update the popup with loaded and progress states to show ready or done.
Returning Data to Context19:10
Learn how to use a background script to send messages to a content script, inject a sticky header notification on the page, and display model progress and readiness.

Introduction4:26
Explore the Hugging Face transformers docs to implement sentiment analysis with predefined tasks. Build and run multilingual, uncased sentiment models locally using Python libraries, and compare to remote models.
Loading a model from Hugging Face18:07
Load and convert Hugging Face models for a Chrome extension using onnx runtime and transformers.js, set up the environment, convert to onnx, and integrate the model.
Configuring the Model5:50
Configure a new NLP model in a Chrome extension by rebuilding with npm watch, updating environment variables, and switching to a Hugging Face sentiment pipeline with tokenizer and model settings.
Token classification7:34
Explore token classification by testing a model in a Chrome extension, swapping tasks like sentiment and chat, and extracting entities such as dates, people, and places.

Introduction2:39
Learn to navigate results with keyboard accessibility using aria roles and tab indexes, and handle JSON results from a transformer in a demo page.
Question-Answering5:37
Explore question-and-answer practices in a Chrome extension, including manifest and scripting permissions, content and background scripts, inner html extraction, embedding, token limits, and chunking page data for accuracy.
Setting Up a Hotkey Command6:41
Explore building hotkey commands for a Chrome extension by configuring OS-specific shortcuts in the manifest, using command and control keys, and testing safe defaults across Mac, Windows, and Linux.
Connecting Results23:52
Load transformer results from json and display them in the popup, handling capitalization, errors, and empty results. Build result elements with a score badge and color-coded entities to visualize results.
Accessibility Basics (Aria Tags, Navigation, Autofocus)7:35
Learn to implement accessible keyboard navigation and aria tagging in a transformer app popup, including autofocus, tabbing through results, aria roles, and screen reader compatibility for WCAG compliance.
Click and Keyboard Events5:25
Attach event listeners for click and keyboard events (enter and space) to each result so clicking or pressing keys triggers an alert or handler.

Requirements

Basic Programming Knowledge
Familiarity with HTML & CSS
Terminal with Node & NPM installed
Text Editor - (We use Visual Studio Code but can use NotePad++, Atom, or Sublime Text)
Google Chrome Browser
Understanding of Web Browsers
Curiosity and Willingness to Learn
A Computer with Internet Connection

Description

Transform your browser into an AI-powered hub with our course - 'AI in the Browser with JS: Chrome Extensions & Huggingface'. This course is a thrilling ride into the world of Artificial Intelligence, Machine Learning, Natural Language Processing, JavaScript, and Chrome Extensions. It's an adventure where technology meets fun, learning meets application, and you meet the future of browsing.

In this hands-on, project-based course, we'll turn your browser into a powerful AI assistant. With JavaScript as our magic wand, Hugging Face as our secret potion, and Chrome Extensions as our playground, we'll bring the wonders of AI to your fingertips.

What are we building? We're crafting 'Questionable', an intelligent Chrome Extension that transforms every webpage into a knowledgeable guide. With 'Questionable', you can ask any question about the content you're viewing, and get instant answers powered by AI.

This isn't just a course, it's a journey of discovery. We'll explore:

Artificial Intelligence (AI): What is AI? How does it work? How is it changing the world?
Machine Learning: How do machines learn? What is supervised learning, unsupervised learning, and reinforcement learning?
Natural Language Processing (NLP): How do machines understand human language? What are tokenization, named entity recognition, and sentiment analysis?
JavaScript (JS): How does JavaScript power the web? What are variables, functions, loops, and events? How does asynchronous JavaScript work?
Chrome Extensions: How can we enhance our browser's capabilities? What are background scripts, content scripts, and popups? How can we interact with webpages?
Hugging Face and Transformer JS: How can we use pre-trained models in our applications? How does transformer js enable machine learning in the browser?

With the help of Transformer JS, a robust library for machine learning in JavaScript, we'll integrate a Hugging Face model into our Chrome Extension. We'll explore how transformer.js provides a smooth bridge between our application and powerful NLP models.

This course is designed to be fun, engaging, and accessible for all levels. Following the Feynman Method, we break down complex ideas into simple, understandable concepts. Even if you're a beginner, you'll find the journey enjoyable and the destination achievable.

By the end of this course, you'll not only have a working Chrome Extension powered by a state-of-the-art machine-learning model, but you'll also possess a deep understanding of how to harness the power of AI in the browser.

Ready for the ride of a lifetime? Join us on this exhilarating journey, and let's code the future together!

Who this course is for:

Developers: Expanding skills with AI integration.
Students: Gaining practical AI application insights.
AI Enthusiasts: Exploring AI and its potential.
Lifelong Learners: Learning cutting-edge technology hands-on.
Professionals: Understanding AI in browser-based applications.

Transformers JS: Chrome Ext & Huggingface w/ FREE AI models

What you'll learn

Explore related topics

Course content

Introduction8 lectures • 24min

Chrome Extension Code11 lectures • 2hr 27min

Looking Under the Hood4 lectures • 36min

Hotkeys, Keyboard Events, & Basic Accessibility6 lectures • 52min

Wrapping Up2 lectures • 4min

Requirements

Description

Who this course is for: