We prompt ChatGPT (GPT-3.5) this to get the flag description:

Describe the flag of ${name}! Provide color codes, aspect ratio, geometric properties and measurements, and any other relevant information! Don't include a symbolic description of the flag's features!

After it responds, we ask it to write SVG markup for the flag like this:

Please give me a precise SVG markup for that flag, using the xmlns and viewBox attributes and only integers for all number values if possible, otherwise use decimals!

The response then gets trimmed to only include the SVG markup. It then gets optimized using svgo and other simplifying and sanitizing algorithms. This process fails if the resulting SVG markup is found to be invalid.

We prompt ChatGPT (GPT-4) this to get the flag description:

Describe the flag of ${name}! Provide color codes, aspect ratio, geometric properties and measurements, and any other relevant information! Don't include a description of the flag's symbolism!

After it responds, we ask it to write SVG markup for the flag like this:

Please give me a precise SVG markup for that flag!

The response then gets trimmed to only include the SVG markup. It then gets optimized using svgo and other simplifying and sanitizing algorithms. This process fails if the resulting SVG markup is found to be invalid.

We prompt ChatGPT (GPT-4, temperature set to 0) this to get the flag description:

Describe the flag of ${name}! Provide color codes, aspect ratio, geometric properties and measurements, and any other relevant information! Don't include a description of the flag's symbolism!

After it responds, we ask it to write SVG markup for the flag like this:

Please give me a precise SVG markup for that flag!

The response then gets trimmed to only include the SVG markup. It then gets optimized using svgo and other simplifying and sanitizing algorithms. This process fails if the resulting SVG markup is found to be invalid.

We prompt ChatGPT (GPT-4, temperature set to 0.5) this to get the flag description:

Describe the flag of ${name}! Provide color codes, aspect ratio, geometric properties and measurements, and any other relevant information! Don't include a description of the flag's symbolism!

After it responds, we ask it to write SVG markup for the flag like this:

Please give me a precise SVG markup for that flag!

The response then gets trimmed to only include the SVG markup. It then gets optimized using svgo and other simplifying and sanitizing algorithms. This process fails if the resulting SVG markup is found to be invalid.

We first prompt OpenAI's text-davinci-003 model this to generate a description for a flag:

The following is a conversation with an expert vexillologist. They know all of the flags of the world, can describe them to you in detail and tell you their aspect ratio. They answer with a precise geometrical description of the flag.

Me: Describe the flag of ${name}. Vexillologist:

We then create SVG markup of the flag based on the description generated.

This setup first prompts OpenAI's text-davinci-003 model to generate a description for a flag, then prompts OpenAI's code-davinci-002 with a JavaScript comment of this description to generate a SVG markup inside a template literal.

We first prompt OpenAI's text-davinci-003 model this to generate a description for a flag:

The following is a conversation with an expert vexillologist. They know all of the flags of the world, can describe them to you in detail and tell you their aspect ratio. They answer with a precise geometrical description of the flag.

Me: Describe the flag of ${name}. Vexillologist:

Then we prompt OpenAI's code-davinci-002 with the start of JavaScript code like so, using the result from above as description:

// ${description} Here is a precise visualization of it in the form of SVG code:`

const html = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox

The response then gets trimmed to only include the SVG markup. It then gets optimized using svgo and other simplifying and sanitizing algorithms. This process fails if the resulting SVG markup is found to be invalid.

No AI involved. We get the description of a flag by fetching https://en.wikipedia.org/api/rest_v1/page/html/Flag_of_${name} and doing some parsing magic to convert it to markdown. Then we find out the flag SVG url by fetching https://en.wikipedia.org/api/rest_v1/page/media-list/Flag_of_${name} and https://commons.wikimedia.org/w/api.php?action=query&format=json&prop=imageinfo&titles=${fileName}&redirects=1&formatversion=2&iiprop=url, before we downlad the SVG.