This tutorial series is to teach people how to build ChatGPT with Django, Hotwire, Websocket and Celery.
- Streaming: With OpenAI streaming API call, the response is sent back incrementally in chunks via an event stream, so user do not need to wait seconds for long response.
- Supports Markdown and code highlighting
- The input box can autofocus and message list can auto scroll to display the new messages.
- The input box height can grow with the content, so user can see the whole content when typing.
Ctrl + Enterto send message, without clicking the submit button
What is Hotwire
Below are some popular websites built by Hotwire:
- Github (https://github.com/), Github is built using Turbo and Catalyst (A tech inspired by Stimulus)
- Hey (https://hey.com/), Hey is an email service and productivity platform that aims to revolutionize the way people manage their email
- Basecamp (https://basecamp.com/), Basecamp is a project management and collaboration tool designed to help teams stay organized and work together effectively
- Forem (https://github.com/forem/forem): Forem is an open-source platform for building online communities, dev.to is built using Forem.
I know there are some tutorials teaching people to build similar features using HTMX, however, I think Hotwire is a very great option in this case, and I'd like to show people how to do that.
By the end of this book, you will be able to:
- Learn Hotwire includes
Stimulus, and what problem they can help solve.
- Jump start frontend project bundled by Webpack.
- Setup Turbo and Stimulus.
- Learn what is
Turbo Frameand how it works.
- Learn what is
Turbo Streamand how it works.
- Understand the difference between
- Learn what is Websocket and how to make it work with
- Use Django Channels to implement Websocket.
- Learn what is Celery and how to set it up.
highlight.jsto render Markdown and highlight code block in the browser.
- Write Stimulus controller to improve the UI/UX of the ChatGPT, such as auto scroll to bottom, autofocus input box, grow input box height with content, etc.
Table Of Content
Django ChatGPT Tutorial Series:
- Create Django Project with Modern Frontend Tooling
- Create Chat App
- Partial Form Submission With Turbo Frame
- Use Turbo Stream To Manipulate DOM Elements
- Send Turbo Stream Over Websocket
- Using OpenAI Streaming API With Celery
- Use Stimulus to Render Markdown and Highlight Code Block
- Use Stimulus to Improve UX of Message Form
- Source Code chatgpt-django-project