You know how tech people from the aughts loved playing "Spot the XKCD" whenever they chatted online? Imagine if we could create a fancy AI to bring that game to life for today's Discord users. Who knows, Gen Z may even fall in love with XKCD again?
Here’s a mockup of what we want to happen:
An OpenAI Account, with an API key, which can be found here.
Light knowledge of HTML, JavaScript and Python
Working Python Install with openai, pandas, and discord.py
An XKCD comic, like https://xkcd.com/303/, has two elements of note in the HTML: a <div> tag which contains the text transcript of the comic and the <img> tag which has the comic. The img tag contains an alt attribute called title with another short text description. By firing up your developer tools in Chrome you can inspect the HTML and find the above tags as well as use JavaScript query selectors in the console tab.
document.querySelector('#transcript').innerHTML
Using the above “Compiling” comic, the div for the transcript is the following:
Title: The #1 Programmer Excuse for Legitimately Slacking Off:My code's compiling.Two programmers are sword-fighting on office chairs in a hallway. An unseen manager calls them back to work through an open office door. Manager: Hey! Get back to work! Programmer 1: Compiling! Manager: Oh. Carry on. Are you stealing those LCDs? Yeah, but I'm doing it while my code compiles.
OpenAI's Embedding API converts text into numerical lists. For instance, "Hey my code is compiling!" becomes a vector like [0.1, -0.4, 0.4….].
Sending the above transcript to the OpenAI Embedding Endpoint with curl:
curl <https://api.openai.com/v1/embeddings> \\
-H "Content-Type: application/json" \\
-H "Authorization: Bearer $OPENAI_KEY" \\
-d '{"input":""...}'
We get this response: