index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HPS' ChatGPT Tools</title>
    <meta name="description" content="Installer for various bookmarklets for and around ChatGPT">
    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="canonical" href="https://chatGPTtools.stoerr.net/"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"/>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-SL01MYCNDC"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'G-SL01MYCNDC');
    </script>
    <style>.github-fork-ribbon:before {
        background-color: #090;
    }</style>
</head>
<body>
<div class="container-xxl">
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <h1 class="card-header">Some tools around ChatGPT / OpenAI APIs</h1>
                <div class="card-body">
                    <a class="github-fork-ribbon" href="https://github.com/stoerr/chatGPTtools"
                       data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
                    <p class="card-text">
                        The main part of my
                        <a href="https://github.com/stoerr/chatGPTtools">ChatGPT tools</a> (available on Github)
                        is a set of command line tools around most of the OpenAI API
                        functions, starting from the swiss knife type tool
                        <code><a
                                href="https://github.com/stoerr/chatGPTtools/blob/develop/bin/chatgpt">chatgpt</a></code>
                        around the <a href="https://platform.openai.com/docs/api-reference/chat">chat completion API</a>
                        featuring adding files, images, using dictation for prompting and chat on the command line,
                        and going on to tools for text to speech, speech to text, image generation and more.
                    </p>
                    <p class="card-text">
                        In addition to that there is a number of more or less interesting
                        <a href="chatgpttools/0README.html">experiments and ChatGPT related toy web applications</a>
                        here, and I have
                        some ChatGPT related bookmarklets - see below. (All this is hosted for your convenience here on
                        <a href="https://chatGPTtools.stoerr.net/">https://chatGPTtools.stoerr.net/</a>).
                        There is also a <a href="dictation/index.html">Dictation App</a> that uses the excellent OpenAI
                        whisper API for speech recognition.
                    </p>
                    <p class="card-text">
                        To install the bookmarklets in your browser, you can drag the following links into your
                        bookmarks bar. Or you can right-click and copy the link, then add it as a bookmark manually. You
                        can even try this on this page by clicking on it.
                        BTW: if you like creating bookmarklets - I had the
                        <a href="https://github.com/stoerr/chatGPTtools/blob/develop/docs/bookmarkletmaker">AI make</a>
                        a
                        <a href="https://chatgpttools.stoerr.net/bookmarkletmaker/bookmarkletmaker.html">Bookmarklet
                            Maker</a>
                        for that.
                    </p>
                    <p>If you have problems, please contact me, <a href="http://www.stoerr.net/">Hans-Peter Störr</a>.
                        See also my <a href="https://github.com/stoerr">other projects on Github</a>,
                        links to <a href="https://www.stoerr.net/ai.html">AI related projects</a> and
                        <a href="https://www.stoerr.net/blog.html">my blog</a>.
                    </p>
                    <!-- <p class="card-text">Base Url: <span id="baseurldisplay"></span></p> -->
                    <script>
                        const baseurl = location.protocol + '//' + location.host + location.pathname.replace("index.html", "");
                        const display = document.getElementById("baseurldisplay");
                        if (display) display.innerText = baseurl;
                    </script>

                    <hr>

                    <h4 class="card-subtitle mb-2">Experiments and small ChatGPT related web applications</h4>
                    <p class="card-text">
                        See <a href="chatgpttools/0README.html">here</a> for a list.
                    </p>

                    <hr>

                    <h4 class="card-subtitle mb-2">ChatGPT Bookmarklet</h4>
                    <p class="card-text">
                        This allows you to send the text of any page to ChatGPT for summarization. You can also ask any
                        followup question on the content.
                        It has growing functionality - see the help for details.
                        See also my blog <a href="http://www.stoerr.net/blog/2023-04-10-readingWithChatGPT.html">Reading
                        with ChatGPT</a> about this.
                    </p>

                    <p class="card-text">
                        <a href="ChatGPTBookmarklet/index.html" class="btn btn-primary">Install ChatGPT Bookmarklet</a>
                    </p>

                    <hr>

                    <h4 class="card-subtitle mb-2">Grab Styles Bookmarklet</h4>
                    <p class="card-text">
                        This lets you select an element in the page and then copies out just that element and its
                        subelements, and all CSS
                        rules that apply to any of those. That way you can copy out the HTML and CSS needed to have
                        ChatGPT answer questions
                        about the CSS. Press 'h' to see the help.
                        See also my blog entry <a href="http://www.stoerr.net/blog/2023-05-10-cssWithChatGPT.html">Some
                        experiences using ChatGPT to develop CSS</a> for what this is good for.
                    </p>

                    <p class="card-text">Bookmarklet to drag: <a id="grabstyles"></a></p>

                    <script>
                        function load(basePath) {
                            if (!window.netStoerrGrabStyles) {
                                var script = document.createElement('script');
                                script.type = 'text/javascript';
                                script.src = basePath + '/grabStyles.js';
                                script.onload = function () {
                                    window.netStoerrGrabStyles.init(basePath);
                                    window.netStoerrGrabStyles.start();
                                };
                                document.body.appendChild(script);
                            } else {
                                window.netStoerrGrabStyles.start();
                            }
                        }

                        var bookmarklet = "javascript:" + encodeURIComponent(
                            "/*net.stoerr.chatGPT.grabStyles*/(function () {" +
                            load.toString() +
                            "\nload('THEURL');" +
                            "})()"
                        )
                        var url = baseurl + "grabStyles";
                        var element = document.getElementById("grabstyles");
                        element.setAttribute("href", bookmarklet.replace("THEURL", encodeURIComponent(url)));
                        element.innerText = "Grab Styles";
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>
</html>