👆 SoloScaleAI #2 - AI UI, Wat ChatGPT, Free Game

Why You Should Keep Reading

• UI with AI

• What is ChatGPT

• Make Me A Game

Generate UI with AI using UIwithAI.com

A lot of generative app functions are behind paywalls or waitlists right now. Not Alexander Macinský’s UI with AI! Just create an account and start playing around. It generates (and updates) Tailwind CSS components based on a natural language request.

In this example, I asked for a button that takes me to a random wikipedia link and the AI actually inserted a working link to wikipedia:random, in addition to generating the button. Give it a try yourself here 👇

Put ChatGPT In Context

Let’s disambiguate some of these AI terms. Hokay, so. First we have tokens. A token is a specialized way of representing text. The more common the text, the easier it is to use a token instead of the text itself. For example, “where is” shows up a lot in English, so rather than use a token for each character [w][h][e][r][e][][i][s] a tokenizer can make it one token [where is].

The tokens then go into Large Language Models (LLMs). These are statistical models. They’ve learned which tokens usually follow other tokens. For example [where is] is likely to be followed by [it], or [the], or [she]. LLMs require a prompt as input and they continue the starting prompt to make it longer by guessing what token should come next in the sentence.

OpenAI is one organization that trains its own LLMs on massive data sets. These data sets need to be both enormous and pristine because the model needs to see enough words in enough combinations to calculate a reliable probability.

A class of model they train is called Generative Pretrained Transformers (GPT). These have been getting bigger and better. For example, GPT-3, GPT-3.5, GPT-4. LLMs are good at a lot of different things, but sometimes you want them to be really good at one thing.

OpenAI fine-tuned some of their models (GPT-3, 4, etc) on additional training data. They gathered thousands of examples of good chatbot behavior. For example: prompt-tell me a joke, response-your face. This way the LLM biased its statistical understanding of language to tend to produce language that sounds like a bot is trying to helpfully respond to a human’s request.

The resulting fine-tuned model is called ChatGPT and it lives at chat.openai.com with a nice user interface.

Make Me A Game

It’s amazing that LLMs like GPT-4 can take natural language instructions and return working code. In the last issue I took a stab at getting a single page game in html, css, and js. This time I tried again, but I tried for something a little harder.

This game has styling and a couple of features. Like the buttons do different things when you click them and the code is having to calculate if it has room to draw new buttons.

I played around with the prompt a lot. I was trying to see if I could get a working game that fulfilled all the requirements in one shot. I tried a dozen variations and never got to the one-shot point. I even tried a few different approaches, like using a “super prompt” to get ChatGPT to build a better prompt for itself. In every case I had to ask it to fix at least one error in its first try. To be honest I stopped out of frustration.

I also tried pasting the mostly working code into a new chat, asking why it has an error, and trying to fix it. That didn’t really work. Sometimes a new generation would fix a bug but then reintroduce the same bug on the next generation. I resorted to manually editing some of the code like changing the “padding” around the buttons so more of them could fit on the screen.

You are a world class web developer. Give me the code for a single html, css, js file I can copy and paste. It will start with a button in the middle of the screen that says "👆 SoloScaleAI". When the user clicks the original button it will change to "Reset" and will generate a random  number (between 2 and 4) of new "Agent" buttons will appear in random locations on the screen Each Agent button will be named in the format "ABC AgentXYZ" where ABC is replaced by a random unicode emoji and "XYZ" is replaced by a single capitalized word describing that emoji (for example ♥ AgentHeart or 🤠 AgentCowboy). Anytime the user clicks an Agent button, an additional group of Agent buttons (random number between 2 and 4) will appear in random locations on the screen. Buttons will never overlap other buttons. Clicking the Reset button will reset the game to initial conditions. Every time the user generates new buttons, the new buttons will be connected by curved lines to the button that generated them. The lines will always be behind all of the buttons. The buttons will be white with a thick black border and the lines will be black with the same thickness as the button border.

About SoloScaleAI

The new wave 🌊 of AI tools, exemplified by ChatGPT, are absurdly powerful 💥 and we’ve barely figured out 🤔 what they can do. I believe it will soon ⌛ be possible for a single person 🙋‍♀️ to orchestrate a $100M 💰 enterprise. Starting in 2024 the wave will turn into a tsunami 🌊🌊🌊 of solo and small team entrepreneurs outcompeting legacy 🏛 companies. 👆 SoloScaleAI is dedicated to exploring this fantastic 🤯 opportunity; maybe even trying to sneak a peek past the event horizon 💫. Join in!