A font tester made by ChatGPT

Shotaro Nakano

I know some of you have interested in ChatGPT. I have been testing what I can do with it. Ask it to write Python scripts for Glyphs App and so on. During the experiments, I made a Font Tester. It was a strange experience to make something with it. I had no idea about Javascript but I made something that worked.

I release it under CC0, because it was made by ChatGPT. It must be interesting to hear how you utilize ChatGPT in your workflow.

https://github.com/ShoExperiment/font-tester

Roel Nieskens

Interesting. Did you instruct it to use opentype.js or is that something it figured out on its own based on your cues? Can you tell a bit more about how the back-and-forth went until you got to this tester?

Small observation: curious as to why it decides to query the OpenType feature buttons by data attributes (instead of the more common class or name). I wonder if you dig into Github projects using opentype.js if someone is doing it that way. Then you could figure out who ChatGPT has borrowed its inspiration from...

jeremy tribby

some experiences with GPT3.5 and 4:

a few months ago I wrote a drawbot script that goes through the git history of a font and does a timelapse animation of a specified glyph in a .glyphspackage file as it changes per commit. the part where it retrieves things from the github API was entirely written by chatGPT

I later asked chatGPT to clone the repo via SSH instead of using github's API, and it refactored it perfectly in one shot

I've been working on an all-caps roman titling typeface and decided it would be a fun thing to ask it to make opentype-based roman numerals, with regular digits as input. it gave a very confidently wrong answer where classes contained the wrong number of glyphs and so on. I informed it of @Igor Freiberger' paper on how to do it, and it said something along the lines of oh, yes, sorry, that one shows a special method, let me fix that for you — and then broke the feature code in 10 other ways completely unrelated to the article.

I have found that where there is very specific code and there are only a few examples out there, it is a bit like someone with a poor memory. it might know what you're talking about but can't really help you

on the other hand, at my day job where I am writing a lot of typescript/react it is excellent most of the time, because the training corpus is so large

one of the superpowers with an ecosystem like react is you can tell it to use the library you prefer. "use material design (MUI) to ____, use bootstrap to _____, use react-select to _____"

I like the experiment in this thread and how someone can go from something to nothing without even knowing javascript. but I think to take something from "it works" to "it's excellent" still requires human intervention, from an expert, as roel highlighted with his comment

Shotaro Nakano

I can write simple programs with Python/Processing but I have almost no experience with Javascript and very limited knowledge of HTML and CSS.

I wanted to test how far I can go with it. I might be able to read the code with the knowledge borrowed from Python but I did not read the codes for the experiment. It took two days to make. 

There are MANY back and forths that were part of my strategy. (It is far from a straight forward process)

When I read how ChatGPT work, there is a key idea "step-by-step."

So I thought that to create something complex, I should make something simple and then add functions later on.

If ChatGPT successfully adds a new function I asked it to add a different function.

Debugging was tricky and implementing opentype.js was frustrating.

It seemed that ChatGPT did not implement opentype.js correctly because it did not have the latest information.

There were two interactions I gave along with some small suggestions that everybody could do with rational decisions and patients: gave the correct URL and suggested how to get a correct family name with my instinct as a type designer but not as a programmer.

For the first one: I did a Google search and gave information on the correct URL. Because the original URL that ChatGPT used had an error.

For the second: I read errors from the console of the browser, ChatGPT failed to get the family name even though it tried to debag by itself so many times.

When I saw the code, ChatGPT wrote something like

font.names.fullName.en || font.names.fullName['en-US'] || font.names.fontFamily.en 

so I suggest

font.postScriptName

This interaction might be cheating but I thought that was OK. Because I did not read the specification of opentype.js but I did with my instinct as a type designer.

Also, I gave texts that were on the page of opentype.js, it seemed that the ChatGPT interpret the code. (I had no idea whether ChatGPT used it or not since I did not read the code.)

There are many strategies I learned to create something complex.

1. It is really important to make many backups.

For almost every conversion you had and change you made, you should make a backup.

If ChatGPT started to mess up your codes because of the wrong assumptions of the previous codes, it is easy to give entire codes which previously written and start over rather than fix the code with wrong assumptions.

2. It is important to make layouts and add functions later.

I used a drawer to place sliders and buttons but I originally did not use it. It was time-consuming for me to make the change.

Something simple is amazingly difficult for AI but something difficult is amazingly easy for AI.

Also, I would like to know how people debug their codes with ChatGPT, I have been experimenting it.

@Roel Nieskens

Small observation: curious as to why it decides to query the OpenType feature buttons by data attributes (instead of the more common class or name). 

I can not tell exactly because I do not know how ChatGPT thought.

Originally I thought that predefined feature tags are easier so I gave feature tags because ChatGPT failed to implement opentype.js so many times and failed to do everything automatically.

For predefined feature tags, I was asked by ChatGPT to do some repetitive tasks.(This is so silly... I do not want to do the repetitive tasks.)

After I gave the URL and suggest the way to get the font name, it automatically got feature tags but it kept using the feature tags I gave.

Also, I asked it to create buttons that correspond to the tags so that might affect the result as well.

I believe there are extra codes that I asked to write for my different attempts. ChatGPT usually reflects the older conversations. If there are redundant codes in it that results. 

@jeremy tribby 

That is a good idea to let it write scripts for Drawbot. I have not tested it yet.

As you see in my comment, there are a lot of human interventions required even though the human may not understand the code.

Human intelligence is still required a lot even though ChatGPT writes codes for you.

For example, in the tester, you can apply size and features to the selected text. Originally it was really difficult to implement the function with ChatGPT. I had to think of a nice way to tell it in English that might be more creative than writing codes.

James Puckett

We have a font generator, we have a font tester, now we just need a backend for retail and we can replace MyFonts.