jcubic/chat-gpt

Variant that saves to a github gist, then opens preview...

oaustegard opened this issue · 8 comments

oaustegard commented

I've been using this with great success (or at least personal enjoyment), coupled with my fork of the htmlpreview tool:
so far my workflow has basically been:

  1. Chat
  2. Click save chat bookmarklet
  3. Open gist.github.com
  4. Drag and drop the downloaded file
  5. Hit Create secret gist
  6. Copy the gist id
  7. Using that for my htmlpreview fork (e.g. https://austegard.com/pv?139656f21cc3ecf71ee76820438b4185)

...but that takes like, seconds.

Many many iterations of the above later I got fed up and asked Chat to tweak it. It did great right off the bat; I further tweaked it just a bit as follows

javascript:(function() {
  const githubAccessToken = 'YOUR_GITHUB_PAT_HERE';
  const dom = document.querySelector('main > .flex-1 > .h-full .flex:has(> .w-full)');
  const template = document.createElement('template');
  template.innerHTML = dom.innerHTML;
  ['.items-end', 'img', 'svg', 'button', ':empty'].forEach(selector => {
    template.content.querySelectorAll(selector).forEach(node => {
      node.remove();
    });
  });

  const title = document.title.replace(/[^a-z0-9]/gi, '_');
  const content = `<!DOCTYPE html>
<html lang="en">
<head>
  <title>Chat GPT: ${title}</title>
  <meta name="generator" content="chatGPT Saving Bookmark"/>
  <style>
    body {
      background-color: rgb(32,33,35);
      color: rgb(236,236,241);
      font-size: 20px;
      font-family: Calibri,Arial, sans-serif;
      margin: -10px;
    }
    body > .w-full {
      padding: 40px;
    }
    /* prompt */
    body > .w-full:nth-child(2n+1) {
      background: rgb(52,53,65);
    }
    /* response */
    body > .w-full:nth-child(2n+2) {
      background: rgb(68,70,84);
    }
    .whitespace-pre-wrap {
      white-space: pre-wrap;
    }
    .flex-col {
      max-width: 1000px;
      margin: 0px auto;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css"/>
</head>
<body>${template.innerHTML}</body>
</html>`;

  const gistDescription = `Chat GPT transcript: ${title}`;
  const gistFilename = `${title}.html`;
  const gistContent = {};
  gistContent[gistFilename] = { content };

  const data = {
    description: gistDescription,
    public: false,
    files: gistContent,
  };

  fetch('https://api.github.com/gists', {
    method: 'POST',
    headers: {
      'Authorization': `token ${githubAccessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(gist => {
    const gistId = gist.id;
    const previewUrl = `https://austegard.com/pv?${gistId}`;
    navigator.clipboard.writeText(previewUrl).then(() => {
      console.log('Preview url copied to clipboard:', previewUrl);
    }).catch(error => {
      console.error('Failed to copy preview url to clipboard:', error);
    });
    window.open(previewUrl);
  })
  .catch(error => {
    console.error(error);
    alert('An error occurred while creating the Gist.');
  });
})();

et voila!

single click from chat to self-hosted copy of the chat

oaustegard commented

(keep in mind my copy of this that I started from is a bit dated, so tweak as needed -- or just ask Chat to do it for you)

jcubic commented

Not sure what to do with this, you have a fork that does something different good for you.

oaustegard commented
jcubic commented

I think that I will start a section in README with different usage of the bookmark, if you want to write an article somewhere that will showcase my library (add a link) I can link to that article in README. Here is example article from @scripting http://scripting.com/2023/03/08/153909.html

oaustegard commented
jcubic commented

Do you want to write an article about this somewhere that will explain how to use your solution? Maybe on dev.to. I will be able to link to that article. So I will be able to close the issue that supposes to be about things to do to the project.

jcubic commented

Just have an idea, I can add Bookmark examples to the app and use different saving strategies from the dropdown window that will update the bookmark.

The default will be download but there can be other strategies like Gist or single GitHub repo.

I will add another issue to track this.

  • 👍1
oaustegard commented

Feel free to close the issue; I might see if I can merge your later changes into mine and possibly make it more generic. The combo of your bookmarklet with my fork of the html preview is what provides the 1-click magic of chat to persistent shareable url