Try: realazthat.github.io/chatgpt2graph

🎇Features  •  🏠Installation  •  🚜💻CLI Usage  •  🚜🌐Local Page Usage  •  💻CLI Options

✅Requirements  •  🐳Docker  •  🚸Gotchas

Graph ChatGPT usage over time.

---

	Status	Stable	Unstable
Master
Develop

• ❔ What: A web page (and CLI) to generate a graph from exported ChatGPT history.
• Why: I wanted to know if I was going crazy, or, if ChatGPT was actually getting worse over time.

🎇 Features

• Uses OpenAI's history export feature.
• Graph to SVG or PNG.
• Graph frustrations over time.

🏠 Installation

# Option 1: Install globally from npm registry:
npm install -g chatgpt2graph

# Option 2: Or install globally, direct from GitHub:
npm install -g https://github.com/realazthat/chatgpt2graph.git#v0.2.0

# Option 3: Or install in a directory:
git clone https://github.com/realazthat/chatgpt2graph
cd chatgpt2graph
npm install

🚜💻 Usage: Local CLI

Example:

npx chatgpt2graph \
  -i ./examples/conversations.json \
  -w idiot \
  -o "./examples/simple_example_output.svg"

ls "./examples/simple_example_output.svg"

And the resulting graph (svg):

🚜🌐 Usage: Local Page

# Option 1: Download https://realazthat.github.io/chatgpt2graph/index.html to a local file and visit it:
wget -O chatgpt2graph.html https://realazthat.github.io/chatgpt2graph/
# Open chatgpt2graph.html in your browser.
# Note: This might not be the same version that in the git repo.

# Option 2: In a directory installation, Build first in dist/ and then visit the
# page:
git clone https://github.com/realazthat/chatgpt2graph/
cd chatgpt2graph
# Checkout develop if you want that branch.
npm run build
# Open dist/chatgpt2graph/index.html in your browser.
# Note: This is most straight forward way to test the latest version from the
# git repo.

# Option 3: In a directory installation, Build first in dist/ and then serve:
git clone https://github.com/realazthat/chatgpt2graph/
# Checkout develop if you want that branch.
cd chatgpt2graph
npm run build
npm run serve
# Navigate to http://localhost:3000/chatgpt2graph/. Note the trailing slash!
# This is the best way to test the site as if it were being served from GitHub
# Pages, without actually deploying it.

# Option 4: In a directory installation, Start the development server (directory
# from the source code):
git clone https://github.com/realazthat/chatgpt2graph/
# Checkout develop if you want that branch.
cd chatgpt2graph
npm run start
# Navigate to http://localhost:1234/chatgpt2graph/. Note the trailing slash!

💻 Command Line Options

✅ Requirements

• Supported Node versions: >=18.0.0 <19.0.0 || >=20.0.0 <21.0.0 || >=21.0.0 <22.0.0 || >=22.0.0 <23.0.0 (See ./package.json). These versions were chosen from current supported and upcoming versions of node, from Node.js: Previous Releases.
• Tested Node versions on GitHub Actions: ["18.20.2","20.12.1","21.7.3","22.0.0"].

Tested on

• WSL2 Ubuntu 20.04, Node v20.12.1.

🐳 Docker Image

Docker images are published to [ghcr.io/realazthat/chatgpt2graph][49] at each tag.

# Use the published images at ghcr.io/realazthat/snipinator.
# /data in the docker image is the working directory, so paths are simpler.
docker run --rm --tty \
  -u "$(id -u):$(id -g)" \
  -v "${PWD}:/data" \
  ghcr.io/realazthat/chatgpt2graph:v0.2.0 \
  -i ./examples/conversations.json \
  -w idiot \
  -o "./examples/simple_example_output.svg"

ls "./examples/simple_example_output.svg"

If you want to build the image yourself, you can use the Dockerfile in the repository.

docker build -t my-chatgpt2graph-image .

# /data in the docker image is the working directory, so paths are simpler.
docker run --rm --tty \
  -u "$(id -u):$(id -g)" \
  -v "${PWD}:/data" \
  my-chatgpt2graph-image \
  -i ./examples/conversations.json \
  -w idiot \
  -o "./examples/simple_example_output.svg"

ls "./examples/simple_example_output.svg"

🤏 Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

🔑 License

This project is licensed under the MIT License - see the ./LICENSE.md file for details.

🫡 Contributions

Development environment: Linux-like

• For running pre.sh (Linux-like environment).

  • From ./.github/dependencies.yml, which is used for the GH Action to do a fresh install of everything:

    bash: scripts.
    findutils: scripts.
    grep: tests.
    xxd: tests.
    git: scripts, tests.
    xxhash: scripts (changeguard).
    rsync: out-of-directory test.
    expect: for `unbuffer`, useful to grab and compare ansi color symbols.
    jq: dependency for [yq](https://github.com/kislyuk/yq), which is used to generate
      the README; the README generator needs to use `tomlq` (which is a part of `yq`)
      to query `pyproject.toml`.
    libcairo2-dev: For node canvas library.
    libjpeg-dev: For node canvas library.
    libpango1.0-dev: For node canvas library.
    libgif-dev: For node canvas library.
    build-essential: For node canvas library.
    g++: For node canvas library.
    ffmpeg: For compressing the demo videos for the web.
    gifsicle: Optimizing demo videos.
    

  • Requires pyenv, or an exact matching version of python as in scripts/.python-version (which is currently 3.8.18 ).

  • jq, (installation) required for yq, which is itself required for our ./README.md generation, which uses tomlq (from the yq package) to include version strings from ./scripts/pyproject.toml.

  • act (to run the GH Action locally):

    • Requires nodejs.
    • Requires Go.
    • docker.

  • Generate animation:

    • docker

Commit Process

1. (Optionally) Fork the develop branch.
2. Stage your files: e.g git add path/to/file.py.
3. bash ./scripts/pre.sh, this will format, lint, and test the code. If there is an error then fix it and repeat this step.
4. git status check if anything changed (generated README.md for example), if so, git add the changes, and go back to the previous step.
5. git commit with an appropriately detailed commit message.
6. Make a PR to develop (or push to develop if you have the rights).

Deplying to GH Pages

This requires permissions in the remote repository.

1. npm run build to build the site.
2. npm run deploy to deploy the site to GitHub Pages.

🔄🚀 Release Process

These instructions are for maintainers of the project.

1. In the develop branch, run bash ./scripts/pre.sh to ensure everything is in order.
2. In the develop branch, bump the version in package.json, following semantic versioning principles. Run bash ./scripts/pre.sh to ensure everything is in order.
   • If anything got generated (e.g README or terminal output images), you will have to stage those.
3. In the develop branch, commit these changes with a message like "Prepare release X.Y.Z". (See the contributions section above).
4. Merge the develop branch into the master branch: git checkout master && git merge develop --no-ff.
5. master branch: Tag the release: Create a git tag for the release with git tag -a vX.Y.Z -m "Version X.Y.Z".
6. Publish to NPM: Publish the release to NPM with bash ./scripts/deploy-to-npm.sh. This step requires an NPM account with permissions to publish the package.
7. Push to GitHub: Push the commit and tags to GitHub with git push && git push --tags.
8. The --no-ff option adds a commit to the master branch for the merge, so refork the develop branch from the master branch: git checkout develop && git merge master.
9. Push the develop branch to GitHub: git push origin develop.