more blog

willcyber · Jun 5, 2023 · 6dc9964 · 6dc9964
1 parent 4121e34
commit 6dc9964
Showing 1 changed file with 142 additions and 0 deletions.
diff --git a/_notebooks/2023-06-04-chatgptapi.ipynb b/_notebooks/2023-06-04-chatgptapi.ipynb
@@ -108,6 +108,148 @@
     "</body>\n",
     "</html>"
    ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## In Depth"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "<form id=\"userInputForm\">\n",
+    "    <label for=\"userInput\">Enter your music preference:</label>\n",
+    "    <input type=\"text\" id=\"userInput\" required>\n",
+    "    <button type=\"submit\">Submit</button>\n",
+    "  </form>"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This piece of html takes in and stores the user input"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "<div id=\"outputContainer\"></div>"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is the area where the api will output the response"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "// Encode the API key using Base64\n",
+    "const encodedApiKey = \"encoded API Key\";\n",
+    "const decodedApiKey = atob(encodedApiKey);\n",
+    "const authorizationHeader = 'Bearer ' + decodedApiKey;"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Base64 the key so github won't complain lol"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "try {\n",
+    "    const response = await axios.post('https://api.openai.com/v1/chat/completions', {\n",
+    "    messages: [\n",
+    "        { role: 'system', content: 'You are a user requesting music recommendations.' },\n",
+    "        { role: 'user', content: userInput }\n",
+    "    ],\n",
+    "    model: 'gpt-3.5-turbo' \n",
+    "    }, {\n",
+    "    headers: {\n",
+    "        'Content-Type': 'application/json',\n",
+    "        'Authorization': authorizationHeader\n",
+    "    }\n",
+    "    });\n",
+    "\n",
+    "    const assistantReply = response.data.choices[0].message.content;\n",
+    "    displayAssistantReply(assistantReply);"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is the most important part of the code. These are the options that I had alluded to in the beginning of this blog"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "catch (error) {\n",
+    "    console.error('Error calling ChatGPT API:', error);\n",
+    "    console.error('Error response:', error.response);\n",
+    "    console.error('Error message:', error.message);\n",
+    "    displayAssistantReply('Sorry, an error occurred while processing your request.');\n",
+    "    }\n",
+    "});"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Catches the errors. Outputs it onto html and in the console"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "function displayAssistantReply(reply) {\n",
+    "    const replyElement = document.createElement('p');\n",
+    "    replyElement.textContent = 'Assistant: ' + reply;\n",
+    "    outputContainer.appendChild(replyElement);\n",
+    "  }"
+   ]
+  },
+  {
+   "attachments": {},
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "If a response successfully is sent, it will be shown on the html"
+   ]
   }
  ],
  "metadata": {