How to create ChatGPT-alike interface with Hotwire, Django and Celery

This tutorial series is to teach people how to build ChatGPT with Django, Hotwire, Websocket and Celery.

Highlight Features

1. 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.
2. Supports Markdown and code highlighting
3. The input box can autofocus and message list can auto scroll to display the new messages.
4. The input box height can grow with the content, so user can see the whole content when typing.
5. Press Ctrl + Enter to send message, without clicking the submit button

What is Hotwire

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.

Below are some popular websites built by Hotwire:

1. Github (https://github.com/), Github is built using Turbo and Catalyst (A tech inspired by Stimulus)
2. Hey (https://hey.com/), Hey is an email service and productivity platform that aims to revolutionize the way people manage their email
3. Basecamp (https://basecamp.com/), Basecamp is a project management and collaboration tool designed to help teams stay organized and work together effectively
4. 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.

Objectives

By the end of this book, you will be able to:

1. Learn Hotwire includes Turbo and Stimulus, and what problem they can help solve.
2. Jump start frontend project bundled by Webpack.
3. Setup Turbo and Stimulus.
4. Learn what is Turbo Frame and how it works.
5. Learn what is Turbo Stream and how it works.
6. Understand the difference between Turbo Frame and Turbo Stream.
7. Learn what is Websocket and how to make it work with Turbo Stream
8. Use Django Channels to implement Websocket.
9. Learn what is Celery and how to set it up.
10. Learn how to update the web page in Celery worker, via the Django Channels layer, without writing Javascript.
11. Use marked and highlight.js to render Markdown and highlight code block in the browser.
12. 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:

1. Introduction
2. Create Django Project with Modern Frontend Tooling
3. Create Chat App
4. Partial Form Submission With Turbo Frame
5. Use Turbo Stream To Manipulate DOM Elements
6. Send Turbo Stream Over Websocket
7. Using OpenAI Streaming API With Celery
8. Use Stimulus to Better Organize Javascript Code in Django
9. Use Stimulus to Render Markdown and Highlight Code Block
10. Use Stimulus to Improve UX of Message Form
11. Source Code chatgpt-django-project