![ChatGPT Voice-Powered Chatbot Build with React and FastAPI [Video]](https://content.packt.com/V21200/cover_image_small.jpg)
ChatGPT Voice-Powered Chatbot Build with React and FastAPI [Video]
Subscription
FREE
Video
$109.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video
$109.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction and Resources
-
Extra: (Optional) - React Crash Course
- Create React App with Vite
- Install Tailwind
- What We Are Building
- Your First Component
- What Just Happened
- Styling Our First Button
- Running a Parent Function From a Child (Passing Props)
- Monitor State and Handle Side Effects with useEffect
- BetBox Structuring
- Adding BetButton Functionality
- Send Axios Fetch Request
- Final Updates and Finishing Touches
- React Learning Next Steps
-
Environment Setup - Frontend and Backend
-
Backend Build - Working with AI
- Backend Initialization with Imports and CORS
- About Docs and Endpoints
- Record Voice Snippet
- Convert Voice to Text with Whisper
- Prompt Engineering ChatGPT
- Receiving ChatGPT Response
- Store and Reset Message Data
- Eleven Labs API Docs Walkthrough
- Giving Rachel a Human Sounding Voice
- Frontend Preparation and Troubleshooting Discussion
-
Frontend - React Web Application
- Structuring Controller Component
- Title Component - Part I (Reset Function)
- Title Component - Part II (Render Completion)
- Controller Recorder Container
- Adding Audio Recording Functionality
- Animating a Record Icon
- Playing Back Audio and Blob Encoding
- Hello Rachel
- Full User Interaction and Tweaking
- Making Production Ready
-
Next Steps
About this video
This course is designed to help you harness the power of ChatGPT and create a lifelike voice assistant or sales chatbot that is fluent in any language. You will learn how to build a web application that showcases the power of Eleven Labs and ChatGPT AI technology.
In the first section, you will set up your environment for front-end and back-end development, including installing the necessary packages and tools. The second section covers the basics of web development and creating a simple UI for your application. The third section dives deeper into the backend, working with AI and building the core functionality of your chatbot.
In the fourth section, you will learn how to integrate ChatGPT into your application and create a smooth conversational flow. The fifth section covers building the frontend of your application and adding audio recording and playback functionality. Finally, in the sixth section, you will learn about further prompt engineering and use cases for your chatbot.
By the end of this course, you will be able to build a fully functional voice assistant or sales chatbot using the power of Eleven Labs and ChatGPT AI technology. You will have gained valuable experience in web development, working with AI, and integrating different technologies to build a complex application.
- Publication date:
- May 2023
- Publisher
- Packt
- Duration
- 5 hours 18 minutes
- ISBN
- 9781835084625