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.
Last active
January 14, 2024 09:27
-
-
Save bollwyvl/82ab55902e0291e40893d4586156bb33 to your computer and use it in GitHub Desktop.
OpenAI API in JupyterLite
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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}:es-module-shims@1.6.2/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}:openai@3.2.1/dist/index.js`\n },\n \"scopes\": {\n \"https://ga.jspm.io/\": {\n \"#lib/adapters/http.js\": `${CDN}:axios@0.26.1/lib/adapters/xhr.js`,\n \"axios\": `${CDN}:axios@0.26.1/index.js`,\n \"form-data\": `${CDN}:form-data@4.0.0/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": [] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment