ChatBuddy AI App: Build with JS, React Native & Hugging Face

Name: ChatBuddy AI App: Build with JS, React Native & Hugging Face
Rating: 4.9 (6 reviews)

Build an AI Chat app with NodeJS, React Native, and Hugging Face's Inference APIs. Start free, scale to Pro or dedicated

Created byShadi Ghaith

Last updated 6/2024

English

English [Auto],

What you'll learn

Understand Hugging Face Inference Endpoints and their configurations.
Integrate Hugging Face models with NodeJS for AI-powered chat applications.
Maintain and manage chat history in a NodeJS backend.
Develop a responsive webpage for AI chat interactions.
Use the Expo framework to integrate chat interfaces in Android and iOS apps with React Native.
Embed the chat interface in a Google Chrome Extension.

Course content

4 sections • 17 lectures • 2h 44m total length

Course Introduction8:29
Build a chat buddy ai app with Node.js and React Native. Leverage hugging face inference APIs, serverless free tier to pro or dedicated endpoints, and a chrome extension.
Exploring Hugging Face Platform6:49
Navigate the Hugging Face platform, sign up for free, manage tokens, and learn to use serverless inference with llama 3 8b instruct, llama 2 7b chat, and star chat 2.
Development Environment Setup11:53
Set up a node back-end with express and axios, building a REST API from the config and exposing Huggingface model configs and system prompts for chat buddy.

Building the Backend Controller Using Llama 315:59
Build the back end controller using llama three, implementing a retry call via axios, composing a single-message prompt with system and user headers, and handling 503 errors.
Handling Chat History and Managing Content Length19:38
Learn to preserve chat history across multiple messages by using a messages array, manage content length, and tailor prompts for different models to maintain context.
Expanding Model Support - Llama 28:15
Expand model support by adding llama two, adapt the prompt format while reusing the messages array and system prompt tokens to generate prompts for model responses.
Expanding Model Support - StarChat 27:46
Expand model support to StarChat 2, a coding assistant trained on English and programming languages, and format prompts with system, user, and assistant tokens within token limits.
Implement Continuous Chat Interaction6:09
Implement continuous chat interaction by repeatedly prompting the user, updating a messages array with user and assistant entries, and querying the lama3 model for new responses.
Finalizing the backend API, turning it into a RESTful API7:18
Finalize the back end api by turning the generate chat function into a RESTful API and exposing a get models endpoint, tested with postman.

Setting Up the Frontend Framework4:42
Set up the frontend framework to create the web page and a Google Chrome extension that loads it, including localhost:4000 hosting and preparing a future React Native app.
Setting up HTML for Chat Interactions7:23
Set up the chat HTML page with bootstrap, font awesome, highlight.js, and custom CSS, then build the chat UI with a settings modal, top bar, messages area, and input.
Integrate Basic Chat Functionality17:39
Build basic chat in the ChatBuddy app by writing JavaScript to call the backend, parse responses, and update the chat UI while handling Chrome extension versus mobile environments.
Output Code Blocks9:16
Learn to output code blocks in a chat app, including code headers, language detection, copy-to-clipboard, and highlight.js integration with Chrome extension messaging.
Handle Settings12:44
Learn to load, update, and save chat app settings by calling a models API, populating ui controls, adjusting token limits per model, and syncing with mobile or extension storage.
Applying Themes and Finalizing the Frontend5:37
Apply themes and finalize the frontend by implementing dark and light modes with body classes, updating css for chat ui, modals, and icons, and testing the Chrome extension.

Requirements

Good Command of JavaScript: Learners should have a solid understanding of JavaScript for both frontend and backend development.
Basic Knowledge of REST APIs and Postman: A general understanding of REST APIs and basic usage of Postman for testing endpoints.
General HTML and CSS: Basic knowledge of HTML and CSS is required to develop and style the webpage.
Basic Knowledge of React Native: Some familiarity with React Native is beneficial, though only a very general knowledge is needed.
No Prior Knowledge of Google Chrome Extensions: No experience with Chrome extensions is necessary, as it will be covered in the course.
Free Hugging Face Account: Learners need to create a free account on Hugging Face for accessing the Inference Endpoints.
Free Expo Framework Account: A free account on Expo Framework is required for developing the mobile application with React Native.
Phone or Emulator for Testing: Learners should have access to a smartphone or an emulator to test the mobile application.

Description

Join this hands-on Udemy course to master building the ChatBuddy AI app—a cross-platform AI chat application. Learn to integrate Hugging Face's serverless Inference APIs, using Node.js for the backend and React Native for mobile development, as well as building a Google Chrome Extension. Start with the Hugging Face Inference Endpoint (Serverless) free tier and learn how to scale to Pro (for pilot) or a dedicated endpoint for production use.

The app allows the user to chat with an AI assistant. The AI models are from the Hugging Face hub using the Inference API Endpoints (Serverless). Users can select between various models, set configuration parameters, and maintain chat history. The course covers both the frontend and backend development, ensuring you have a comprehensive understanding of the entire development process.

What You'll Learn:

Understand Hugging Face Inference Endpoints: Learn about Hugging Face's transformative AI technology and how to utilize their Inference Endpoints for AI integration.
Backend Development with Node.js: Build a robust backend using Node.js, manage API requests, and maintain chat history effectively.
Frontend Development for Web and Chrome Extension: Create an interactive webpage to communicate with the AI models, and embed this webpage into a Google Chrome extension.
Mobile App Development with React Native and Expo: Use the Expo framework to develop a React Native app for Android and iOS, integrating the chat interface seamlessly.

Requirements:

Good Command of JavaScript: Essential for both frontend and backend development.
Basic Knowledge of REST APIs and Postman: General understanding of REST APIs and basic usage of Postman for testing endpoints.
General HTML and CSS: Basic knowledge for developing and styling the webpage.
Basic Knowledge of React Native: Some familiarity with React Native is beneficial.
Free Hugging Face Account: Required for accessing the Inference Endpoints.
Free Expo Framework Account: Needed for developing the mobile application with React Native.
Phone or Emulator for Testing: Access to a smartphone or an emulator for testing the mobile application.

Who This Course is For:

Web Developers: Enhance your web projects with AI capabilities.
Mobile Developers: Integrate AI functionalities into your Android and iOS apps.
Machine Learning Engineers: Apply your AI models in real-world software applications.
Software Engineers: Expand your skill set by incorporating AI into your development toolkit.
Tech Enthusiasts and Hobbyists: Experiment with AI integration in various applications.
Students and Academics: Understand practical applications of AI in software development.

By the end of this course, you will have the skills and knowledge to build and deploy an AI-powered chat application, integrating cutting-edge AI models into both web and mobile environments. Get ready to transform your development capabilities and create intelligent, interactive applications!

Who this course is for:

Web Developers: If you're a web developer looking to enhance your projects with machine learning and AI capabilities, this course will guide you through integrating Hugging Face's powerful models into your web applications.
Mobile Developers: Mobile developers aiming to integrate AI functionalities into their Android and iOS apps will find this course invaluable. You will learn how to use the Expo framework and React Native to bring AI-powered features to your mobile applications.
Machine Learning Engineers: For machine learning engineers who want to see their models in action, this course provides practical insights into deploying and integrating AI models into software applications.
Software Engineers: If you're a software engineer interested in exploring AI and incorporating it into your existing skill set, this course offers a comprehensive overview of using AI models in backend and frontend development.
Students and Academics: Students and researchers looking to understand practical applications of AI in real-world software development can benefit from the hands-on approach of this course.

ChatBuddy AI App: Build with JS, React Native & Hugging Face

What you'll learn

Explore related topics

Course content

Getting Started with ChatBuddy3 lectures • 27min

Developing the Backend6 lectures • 1hr 5min

Crafting the Frontend6 lectures • 57min

Building the Mobile Application2 lectures • 15min

Requirements

Description

Who this course is for: