Table of Contents
TwOp is a Chrome browser extension which returns engaging tweets based on user input. The tweets are AI generated via the API request method of OpenAI with Node.js. TwOp captures four sources of user information to identify the context of the desired tweet:
- Topic - headline or brief description of tweet context (ie "announcement of Italian restaurant opening")
- Keywords - any words that must be included in the tweet response (ie "delicious")
- Theme - an overarching and specific theme describing context (ie "leisure / restaurant")
- Tone - an overarching and specific mood/style aimed to be expressed with the tweet (ie "positive / excited")
The user entered values are pulled into a prompt and sent to OpenAI to generate a tweet. A second follow-up request is made to OpenAI to fine-tune the first result. The second result is then returned in the UI which the user can use as inspiration for posting a tweet. Here is an actual result using the above example values as input:
We're thrilled to announce the grand opening of our new Italian restaurant! Come and sample our deliciously crafted dishes and enjoy an unforgettable dining experience.
The query can be called multiple times without limits and the AI produces a unique result each time. The TwOp extension is available in the Chrome Web Store.
A key piece of the functionality of this app is derived from the starter template of the build your own AI writing assistant w/ GPT-3 project by Buildspace. It describes the development of a browser extension that generates a blog post in Calmly based off of selected text on a website using a multi-chain prompt with OpenAI. The open source code provided by Buildspace has inspired the creation of TwOp.
To install the official Node.js library, run the following command in your Node.js project directory:
npm install openai
TwOp uses the Complete mode specified in the official OpenAI API docs described here: https://api.openai.com/v1/completions.
The main function of the code is generateCompletionAction() inside the getTweet.js file. This function takes user input from text fields and dropdown menus and calls the OpenAI completions endpoint to generate a tweet. It then cleans up the tweet by removing hashtag references and emojis, and returns the cleaned up tweet. The generateCompletionAction() function is called with an event listener attached to a submit button.
The app saves the OpenAI API key from the user in the local storage via the saveKey() function. The code contains a function getKey() that retrieves the key from storage and decodes it.
const getKey = () => { return new Promise((resolve, reject) => { chrome.storage.local.get(['openai-key'], (result) => { if (result['openai-key']) { const decodedKey = atob(result['openai-key']); resolve(decodedKey); } else { reject(new Error('Failed to retrieve openai-key')); } }); }); };
Social media platform expansion - The app can be upgraded to produce adequate results for other social media platforms. Hard coded references to "tweet" can be updated into variable user selection inputs (ie Twitter, Facebook, Instagram, etc) and the code then executes those inputs accordingly, where applicable. For example, one of the key differences between social media platforms are the different character length limitations which could be mapped values inside an object for social media platforms.
Direct insert - The app could also be expanded by inserting the output directly into the corresponding social media platform fields similar to how Buildspace has demonstrated it for Calmly.
Copyright (c) 2023 ZorroZ77
Esther Woo - @estiewoo
Oliver Zerhusen - @OliverZerhusen