Deconstructing Hugging Face Chat

Slide 1

Slide 1 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Deconstructing Hugging Face Chat Nitya Narasimhan, PhD Senior Cloud Advocate (AI/ML) Microsoft Global AI Conference 2023

Slide 2

Slide 2 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat We’re all very familiar with this chat UI! • Conversational history • Chat UI with input field • Ability to switch models • Ability to theme UI/UX Image Credit: https://openai.com/chatgpt

Slide 3

Slide 3 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Building it from scratch can be .. challenging • Front-end frameworks • Backend integrations • Model configurations • Extensibility to new ideas Image Credit: https://oai.azure.com/portal

Slide 4

Slide 4 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat What if we had an open-source starter project? • Deployed in production • Community supported • Containerization friendly • Easy model integrations https://huggingface.co/chat/ Project is under active development – v0.6.0

Slide 5

Slide 5 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Learning Objectives 1. Understand the Hugging Face Platform and Community 2. Setup your local development environment to build & preview Hugging Face Chat from code 3. Explore the codebase & discuss ideas to extend it (e.g., with Azure)

Slide 6

Slide 6 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat What is Hugging Face? What is Hugging Face Chat? Deconstruct it to Learn it! Build It with Github Codespaces Explore it with GitHub Copilot Extend it with Azure It’s a Wrap! What I hope to cover today

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Hugging Face is a platform & a community! • Models & Datasets Hub • Spaces for Deployment • Users & Organizations • Knowledge Exchange • Society for Ethical AI You can access the Hugging Face Models Hub from Azure AI Studio for seamless deployment and integration into your end-to-end AI solution workflows

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Hugging Face is a platform & a community! • Models & Databases Hub • Spaces for Deployment • Users & Organizations • Knowledge Exchange Setup a user profile. Join organizations of interest. Curate collections of models, datasets and papers. Deploy application demos (containerized) to Spaces ..

Slide 11

Slide 11 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Hugging Face is a platform & a community! • Models & Databases Hub • Spaces for Deployment • Users & Organizations • Knowledge Exchange Daily Papers is a collection that actively curates and shares knowledge about the latest AI/ML papers

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Hugging Face Chat is an open- source chat UI • Open-Source Repo • Deployed Application • Spaces Docker Template • Text Inference Toolkit

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Clone repo and build locally to preview usage • MongoDB database • Node.js runtime • Requires HF Token • Requires Docker Desktop docker run -d -p 27017:27017 --name mongo-hf-chatui mongo:latest npm install npm run dev Demo

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Under the Hood: GitHub Codespaces • Docker Container • Azure Cloud • Visual Studio Code Editor • “Dev Container” benefits

Slide 21

Slide 21 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Under The Hood: Dev Containers • Docker Container • Consistent Environment • Customizable Configuration • Docker Desktop comptabile

Slide 22

Slide 22 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Under The Hood: Dev vs. Production • Consistent runtime across entire lifecycle • Tests in development will reflect production and CI/CD environments

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat What & Why GitHub Copilot • Explain unfamiliar code • Code Generation • Write Unit Tests • Stay in focused mode Demo Chat mode keeps you in-editor while searching for answers. Inline chat provides fine-grained context for asks

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Ideas for Azure Integrations • Azure Cosmos DB • Azure Static Web Apps • Azure AI Deployment EP • AZD Template Demo

Slide 27

Slide 27 text

Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Learning Objectives ✅ Understand the Hugging Face Platform and Community ✅ Setup your local development environment to build & preview Hugging Face Chat from code ✅ Explore the codebase & discuss ideas to extend it (e.g., with Azure)