https://github.com/paul-gauthier/easy-chat
A ChatGPT UI for young readers, written by ChatGPT
https://github.com/paul-gauthier/easy-chat
Last synced: 29 days ago
JSON representation
A ChatGPT UI for young readers, written by ChatGPT
- Host: GitHub
- URL: https://github.com/paul-gauthier/easy-chat
- Owner: paul-gauthier
- Created: 2023-03-31T13:46:33.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-05T21:05:16.000Z (about 2 years ago)
- Last Synced: 2025-02-28T00:36:31.675Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://paul-gauthier.github.io/easy-chat/
- Size: 1.35 MB
- Stars: 68
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - paul-gauthier/easy-chat - A ChatGPT UI for young readers, written by ChatGPT (JavaScript)
README
# Easy Chat
[Easy Chat](https://paul-gauthier.github.io/easy-chat/)
is a user interface for ChatGPT, designed specifically for young readers.
Almost all the code for Easy Chat was written by ChatGPT.
## Features
- Typography, layout and text spacing which is helpful for young, early or struggling readers.
- Large, easy-to-read text in the Open Dyslexic font.
- No incremental "live typing" of the ChatGPT response, which is distracting when trying to read. Responses display when they are fully loaded.
- Text-to-speech of individual words by clicking on any word.
- Text-to-speech of entire passages with Immersive Reading (highlights each word as it is read aloud at a moderate reading speed). Click on the speaker icons.
- A system prompt that tells ChatGPT it is speaking to a child and to use common words, short sentences and short paragraphs.
## Usage
Try it out here: [Easy Chat](https://paul-gauthier.github.io/easy-chat/)
## Created by ChatGPT
Almost all the code in this repository was written by ChatGPT, using what I think is a novel workflow.
I started by asking it to create the html for a simple chat app, with embedded css and js. After that, I just asked for changes, bug fixes, new features and improvements in plain English.
For each change, I passed ChaptGPT the change request and a copy of the **entire codebase**.
It returned a new copy of the codebase, with the requested changes.
ChatGPT figured out how to make the requested changes, what parts of the code needed to be modified and what modifications to make.
I reviewed the diffs it generated, and either accepted or rejected the proposed changes. If the changes weren't acceptable, I discarded them and improved my request to be more specific or explicit -- and tried again.
In essence, I worked with ChatGPT like it was a junior web developer.
### All code in, all code out
I have starting thinking about this as an "all code in, all code out" pattern:
- Send all the (relevant) code to GPT along with a change request
- Have it reply with all the code, modified to include the requested change
- Automatically replace the original files with the GPT edited versions
- Use git diff, etc to review and either accept/reject the changes.
GPT is **significantly** better at modifying code when following this "all code in, all code out" pattern. This pattern has downsides: you can quickly exhaust the context window, it's slow waiting for GPT to re-type your code (most of which it hasn't modified) and of course you're running up token costs. But the ability of GPT to understand and execute high level changes to the code is far superior with this approach.
I have tried quite a large number of alternative workflows. Outside the "all code in/out" pattern, GPT gets confused, makes mistakes, implements the requested change in different ways in different sections of the code, or just plain fails.
If you're asking for self contained modifications to a single function, that's all the code that needs to go in/out.
On the other side of the spectrum, GPT built this entire webapp using this pattern by repeatedly feeding it all the html/css/js along with a series of feature requests. Many feature requests required coordinated changes across html/css/js.
### Example prompts
Most of my prompts were basically feature requests, like you might file in a JIRA ticket.
Here's an example prompt:
> Use text-to-voice to speak the highlighted word.
Which resulted in
[these changes](commits.md#user-content-62e0862ce0cf1017082e30ec7fa4034cfaf80137) to the code:
```
diff --git a/chat.html b/chat.html
index 4ed5668..7d3d563 100644
--- a/chat.html
+++ b/chat.html
@@ -206,8 +206,17 @@
const highlightedWords = chatBox.querySelectorAll('.highlight');
highlightedWords.forEach(word => word.classList.remove('highlight'));
event.target.classList.add('highlight');
+ const textToSpeak = event.target.textContent;
+ const speech = new SpeechSynthesisUtterance(textToSpeak);
+ speechSynthesis.speak(speech);
}
});
+
+ /* New code for text-to-speech */
+ const speak = (text) => {
+ const speech = new SpeechSynthesisUtterance(text);
+ speechSynthesis.speak(speech);
+ };