/chatgpt2graph

Graph ChatGPT usage over time.

Primary LanguageJavaScriptMIT LicenseMIT

ChatGPT2Graph

Try: realazthat.github.io/chatgpt2graph

Audience: Developers Platform: Linux

๐ŸŽ‡Features  โ€ข  ๐Ÿ Installation  โ€ข  ๐Ÿšœ๐Ÿ’ปCLI Usage  โ€ข  ๐Ÿšœ๐ŸŒLocal Page Usage  โ€ข  ๐Ÿ’ปCLI Options

โœ…Requirements  โ€ข  ๐ŸณDocker  โ€ข  ๐ŸšธGotchas

Top language GitHub License npm - version

Node Version

Graph ChatGPT usage over time.


Status Stable Unstable
Master Build and Test since tagged last commit
Develop Build and Test since tagged since tagged last commit

Demo

  • โ” 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.

Demo

๐ŸŽ‡ 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"

Output of `bash ./examples/simple_example.sh`

And the resulting graph (svg):

Graph example output 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

Output of `npx chatgpt2graph --help`

โœ… 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.