Deconstructing Hugging Face Chat

Want to build a ChatGPT-like experience for your Generative AI use case but don't know where to start? What if you had an open-source project that was exploring the same goals, so you can learn from it and contribute back or transfer knowledge to your own development journey? How do you get started exploring it, especially if you are unfamiliar with the relevant programming framework or technology community? In this talk we'll look the "Hugging Chat" application from the HuggingFace community and deconstruct the open-source "Chat UI" project that powers it. We'll learn how the app is built and deployed, and how it can be customized to work with available LLMs, potentially in a local development environment. And we'll explore the value of tools like GitHub Codespaces and GitHub Copilot to help us navigate unfamiliar codebases with confidence, and even try to extend capabilities to suit our needs.

Watch the recorded talk here:
https://globalai.community/video/global-ai-conference-2023/deconstructing-hugging-chat-explore-an-open-source-chat-ui-for-generative-ai-apps/

Transcript

1. 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
2. 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
3. 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
4. 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
5. 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)
6. 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
7. 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
8. 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
9. 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 • Society for Ethical AI Demo
10. 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 ..
11. 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
12. 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
13. 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
14. 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 Demo
15. 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
16. 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
17. 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
18. 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
19. 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
20. Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Under the Hood: GitHub Codespaces • Docker Container • Azure Cloud • Visual Studio Code Editor • “Dev Container” benefits
21. Nitya Narasimhan, PhD | @nitya Deconstructing Hugging Face Chat Under The Hood: Dev Containers • Docker Container • Consistent Environment • Customizable Configuration • Docker Desktop comptabile
22. 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
23. 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
24. 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
25. 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
26. 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
27. 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)