The Adventure Continues — A Tangent About Vuetify Components And OpenAI Tokens
Rudeness Translator — Leveraging GPT To Turn Rude Internet Comments Into Constructive Ones
The idea behind Rudeness Translator is to use GPT to automatically turn scathing Medium.com comments into constructive criticism. Last time I noticed a considerable improvement when I switched to GPT-3.5. Before, the results of the supposed “summary” seemed somewhat random, analogous to asking for information about the Biden Administration and then hearing random facts about Abraham Lincoln. Now, they seem a lot closer to being correct.
Not too much to report, this time around. I thought I would use the opportunity to do a tangent on Vuetify components, as well as tokenization.
Vuetify Components
I wanted to focus in on the template portion of this Vuetify file.
That is lines 1–32. There are quite simply three boxes and two buttons, and both buttons will call functions (even though only one of those functions will do anything, currently). What I wanted was something called a v-dialog. Instead of immediately executing the API call and charging the user money, I wanted to have a confirmation.
I can achieve that like this. I surround the v-btn with a v-dialog and a template. I can customize the card as well.
The v-slot:activator on line 3 is explained here, but when I first started using Vuetify I remember simply copying markup from the Vuetify documentation (I can do that, for example, from the dialogs page). Every example has a “view source” button, and for every example there are slight variations. This time getting things set up took me more than one try — I realized I had to put the v-card inside the v-dialog.
But…what are these things? They are not standard HTML. If you run “inspect element” on the webpage it creates, you will not see any of these v- tags — you will see familiar HTML.
These are Vuetify Components. The creator characterizes Vuetify as:
“Vuetify.js is a component framework for Vue.js 3. It aims to provide clean, semantic and reusable components that make building your application a breeze.
Since its initial release in 2014, Vue.js has grown to be among the most popular JavaScript frameworks in the world. One of the reasons for this popularity is the wide use of components which enable developers to create small modules to be used and re-used throughout an application.
Vuetify is a collection of pre-made components paired with powerful features such dynamic themes, global defaults, application layouts, and more. Its goal is to provide developers with all of the necessary tools to build rich and engaging user experiences.”
— Source, emphasis mine
In this tutorial, Ben Hong explains that Vuetify was built on Material Design, and that v-spacer is “a simple wrapper of a div that has the material design CSS for spacer attached to it.” This, he clarifies, is a very simple example.
Tokenization
Why the slow progress this time? Tokenization. I thought it would be neat if the user asked to carry out a command, then first saw an estimate of how much it would cost. This, I figured, would be a simple calculation of multiplying characters by the price per token.
Tokens, it turns out, are not quite that simple. This Educative page explains how to count tokens:
When utilizing the ChatGPT API, it’s important to grasp the idea of tokens. Think of tokens as fragments or parts of words. Before the API begins handling the prompts, they disassemble the input into these individual tokens. An interesting aspect is that tokens may not align perfectly with the beginning or end of words — they could encompass trailing spaces or even divide words into sub-parts.
Someone on StackOverflow asked how to count tokens before sending the request, and like in Educative they were referred to TikToken. If you want to know after sending the request, you can simply refer to one of the values you get from the response. It looks like I still have the screenshot from last time.
If you cannot read the screenshot above, one of the values I receive is called “total_tokens.”
Someone posted on the TikToken GitHub and said it would be really nice to have an NPM package. A user named dqdb responded that he made one. You can install it with
npm install @dqbd/tiktoken
I know that Dqdb has some relationship with OpenAI, at least from an “open source community” perspective. For example, just two weeks ago he publicly interacted with someone from OpenAI about another tokenizer repository he made, which appears to have their blessing.
@dqdb/tiktoken? I am not sure if that has any “official OpenAI” blessing, or if OpenAI itself has any intention of supporting this in the near future (or, better yet, of making Dqdb’s work official and bringing it into their core repository). Currently, it does not work for me. When I try to use it, I just get an error screen.
I suppose the warning dialogue would not be a show-stopper, but it would make things look nicer.
Closing Thoughts
The above was mostly just a joke about all the endless Vue puns, but several angry commenters took it seriously.
Vuetiful.
