OpenAI API in JupyterLite

README.md

OpenAI API in JupyterLite

join the discussion on Jupyter Discourse

Both of these examples require an API key, and neither really do anything at present.

You can drag them into just about any JupyterLite site, such as JupyterLite's own ReadTheDocs or demo.

OpenAI API in JupyterLite JS Knerel.ipynb

{
  "metadata": {
    "language_info": {
      "codemirror_mode": {
        "name": "javascript"
      },
      "file_extension": ".js",
      "mimetype": "text/javascript",
      "name": "javascript",
      "nbconvert_exporter": "javascript",
      "pygments_lexer": "javascript",
      "version": "es2017"
    },
    "kernelspec": {
      "name": "javascript",
      "display_name": "JavaScript (Web Worker)",
      "language": "javascript"
    }
  },
  "nbformat_minor": 4,
  "nbformat": 4,
  "cells": [
    {
      "cell_type": "markdown",
      "source": "# Using the OpenAI API from the JupyterLite JS Kernel\n\n> join the discussion on [Jupyter Discourse](https://discourse.jupyter.org/t/how-to-install-openai-npm-package-in-the-javascript-kernel-in-jupyterlite/19065)",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "## You need a key\n\nIf you don't have one, this isn't going to work at all.",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "OPEN_API_KEY = \"GET YOUR OWN KEY\";",
      "metadata": {
        "trusted": true
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": "## Get Modules\n\nThere's a lot of code needed, and `async` things don't work quite right inside the JS Kernel WebWorker yet. [jspm.io](https://jspm.org/) provides a CDN with shims. ",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "CDN = \"https://ga.jspm.io/npm\"",
      "metadata": {
        "trusted": true
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": "to get to something more like the documentation for [`importMap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)s.",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "importScripts(`${CDN}:[email protected]/dist/es-module-shims.wasm.js`);",
      "metadata": {
        "trusted": true
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": "## Set Import Map\n\nThe upstream code on `npm.js` isn't directly usable, and needs to have first been transpiled to [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "importShim.addImportMap({\n    \"imports\": {\n        \"openai\": `${CDN}:[email protected]/dist/index.js`\n    },\n    \"scopes\": {\n      \"https://ga.jspm.io/\": {\n        \"#lib/adapters/http.js\": `${CDN}:[email protected]/lib/adapters/xhr.js`,\n        \"axios\": `${CDN}:[email protected]/index.js`,\n        \"form-data\": `${CDN}:[email protected]/lib/browser.js`\n      }\n    }\n  });",
      "metadata": {
        "trusted": true
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": "## Main\n\nAgain, as the worker doesn't support top-level `await`, you'll need a function to do any async stuff (which is pretty much everything), with the following lightly adapted from the [documentation](https://github.com/openai/openai-node#usage).",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "async function main () {\n    const { Configuration, OpenAIApi } = await importShim('openai');\n    \n    const configuration = new Configuration({\n        apiKey: OPEN_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const completion = await openai.createCompletion({\n        model: \"text-davinci-003\",\n        prompt: \"Hello world\",\n    });\n    \n    console.log(completion.data.choices[0].text);\n}\n\nasync function mainWithCatch(prompt){\n    try {\n        return await main()\n    } catch(err) {\n        console.error(err)\n    }\n}\n\n// actually call main\nvoid mainWithCatch();",
      "metadata": {
        "trusted": true
      },
      "execution_count": null,
      "outputs": []
    }
  ]
}

OpenAI API in JupyterLite Pyodide Kernel.ipynb