An overlooked, but important aspect of customising Dataverse tables and Dynamics 365 instances, is the icons that are involved. While the use of icons isn’t essential, not incorporating them creates a default puzzle-shaped image that can negatively impact user experience.
In some instances, the logos are created, but they lack consistency in relation to the overall design, scalability, colour choices etc. It’s also not uncommon for them to be overlooked when implementing ad hoc changes, with some of them remaining untouched for several months to years.
However, not everybody has the skills or time to generate these UX design-enhancing icons. But there are plenty of resources out there, both free and paid, that can be used to overcome this common challenge.
An example of bad UX design, incorporating generic icons.With this in mind, we wanted to leverage the resources that are currently out there and explore the possibilities of automating this part of the design process. We are currently harnessing the power of AI and expanding our own toolset to see what is currently capable, using the likes of ChatGPT, Google’s Bard AI and other large language models (LLMs).
Is it possible to use AI tools to generate icons?
Yes it is. Here, our Web Developer, Zach, shares his approach to and experience of doing just that:
I wanted to see how far we could go with language models before deciding if using them to create icons was a project we could fully invest time in. If they couldn’t be used to replicate some of the basic requirements of the icons we needed, i.e. actually create something recognisable and legible, moving towards implementing an LLM into our regular workflow was a moot point. To keep things simple, I decided to use ChatGPT and Bard as the starting point.
To start with, I simply prompted both AI with a simple task, “Can you generate an account svg icon?”
In both cases, they were able to output SVG code into a non-broken state. However, the results were mixed, to say the least…
Left: ChatGPT. Right: Bard’s attempts at creating an “Account” icon.ChatGPT’s icon shows, “a person’s silhouette inside a circular shape,” while Bard’s more abstract attempt is somewhat confusing. It’s worth noting here that this shows that both LLMs can create SVG code, with ChatGPT’s attempt being more accurate. Given this, I would consider ChatGPT’s attempt as being a success. It did demonstrate to me though that I needed to be more clear and thorough when generating prompts.
Next, I ask both AI to refine their efforts further to look more like icons. In both cases, I was presented with variations of the same icon, with ChatGPT removing shapes and going more circular.
The result was good, but not a significant change. Next, I specified some options: {Colour: #333333, Dimensions: {16 x 16, 32 x 32}, Size: < 10KB}, but it still wasn’t enough and only generated minor changes.
One thing was clear, while these models could derive the type of image they were generating, that alone would not be enough to get them to a usable state.
Refine, refine, refine
Zach conducted some further research into crafting stronger prompts to make sure he got the most from ChatGPT, which including reading this post on using ChatGpt as a self generating prompt engineer. He explains what happened next:
My next prompt was, “Can you generate a svg icon for “Contacts”? This prompt should represent a person and be easy to distinguish in this format. And the result was…still not great. But it was moving in the right direction!
Left: ChatGPT. Right: Bard’s attempts at creating a “Contact” icon.In ChatGPT’s case, while the outcome looked jumbled up, we can see it starting to form something legible and readable as a person; it just needed a steer in the right direction. Bard generated two icons, with the textless one being an “abstract and stylised” representation of a contact icon. Zach explains:
I asked ChatGPT to refine its result by providing more direct instructions, which made things even more interesting. As you can see in the screenshot below, while all of the lines are overlapping and filled in the same colour, we are inching closer to creating something that is person-like!
Prompt: “Can you refine the SVG to closer resemble a person? Ideally, this SVG should use as many elements as possible and multiple paths, circles etc. to generate said image.Zach continues: With a few adjustments to the prompts, I was still not getting much back in the way of something usable. Being more specific produced stronger results, so with that in mind, I tweaked the prompt again and asked, “Using circles, semi circles, generate svg Code to represent a person icon.” This created something that was similar to the last result, but it was inching closer to creating a collection of shapes that could work to look like a person.
Left: Editing SVG icon to see the overlapping shapes. Right: Unaltered SVG iconI wondered at this point if it was simply a case of AI not recognising where to correctly place each of the shapes, so I then asked ChatGPT, “Using a series of simple shapes and paths, generate svg code to represent an account icon. Each element of the svg should not overlap each other but can be placed at the edges of each other.”
The results for ChatGPT were certainly starting to become viable, each time getting closer to something I expect an account icon to look like. Bard was not equipped to handle this type of prompt, as the results it generated became more-and-more abstract (shared below). At this point, I ruled out Bard as an option.
Left: ChatGPT with outlines highlighted. Right: Bard.ChatGPT it is then?
Having decided to stick to ChatGPT, Zach’s aim was to get at least two legible icons outputted to determine whether this would be a project the XRM team could invest time in.
Following the idea of ChatGPT being a prompt generator and adapting the results, his next prompt was, “Using a series of simple shapes and paths, generate svg code to represent an account icon. Each element of the svg should not overlap each other. It should be inside a rectangle with no fill and a 2px stroke. Only include the required elements.”
Bingo!
We have a person! An actual usable icon!Zach explains: Delighted with this result, I was ready to generate my next icon, thinking I had solved the riddle of correctly creating a useable prompt for ChatGPT. Keeping our own use cases in mind, I drafted my next prompt, “Using a series of simple shapes and paths, generate svg code to represent legal entity icon. Each element of the svg should not overlap each other. It should be inside a rectangle with no fill and a 2px stroke. Only include the required elements.”
The hope here was to keep things generic, but with an emphasis on what we needed and having direct instructions, such as the no overlapping rule, we could craft a handy little system of generating some typically used prompts.
Unfortunately, this is what I was presented with…
Nice to see ChatGPT being inspired by Cubism?Two steps forward, one step back
Back to the abstract again. Thinking maybe he had gone too generic with the prompt once again, Zach returned to the Prompt generator to try and craft variations of the prompts he had previously used, as this would be the most viable use case for creating an icon with user input on the direction.
However, this approach proved to be a fruitless. The prompt generator itself worked just fine and helped craft prompts with exact details in it as before. But, the resulting icons from these generated prompts often went back to the more abstract and ‘interesting’ methods of conveying an account entity icon.
Here are the mixed results generated by ChatGPT and Bard:
Top row: ChatGPT. Bottom row: BardConclusion
Zach concludes: Having spent some time tinkering with and adjusting the prompts to try and mould them to what I think would work, it became evident I was spending more time on trying to correct my own wording to get one icon to work, and losing sight of the original scope of this project.
Using LLM can be ideal for plenty of tasks and automating features with the Dataverse and other systems, as we will explore further in future blog posts. But it’s clear our current intended use to streamline the generation of icons is some way off.
We hope to test the limits of image-generating AI for optimising our workflow and improving the overall UX across various projects. Hopefully, the lessons learned here will help create a more positive outcome in the future.
What is ChatGPT used for?
ChatGPT is essentially a chatbot that’s capable of having human-like conversations. As such, it can be used for a variety of tasks, from generating simple code tasks, writing emails, generating paragraphs of content, asking questions to assist with tasks and, of course, serving as a customer-facing chatbot.
Can I use ChatGPT for free?
Yes, the basic version is free to use and there’s no limit on how much you can use it per day. However, it does restrict the words/characters in each response, as well as access during high capacity times.
How do I log into ChatGPT?
You can sign up and log into ChatGPT here: https://chat.openai.com/
Is ChatGPT 4 better?
Yes. GPT-4 is a multimodal model, meaning it is AI system designed to simultaneously process multiple forms of input. As such, this means it can accept both text and images and allows for the model to be trained from a wider pool of sources (worksheets, graphs, charts etc). Thus, it can output more informed text than ChatGPT 3.5 and avoid some of the pitfalls and incorrect outputs associated with its predecessor.
Written By: Simon Jackson
With over two decades of hands-on experience with Microsoft Dynamics and an impressive 25-year track record in coding and business solutions consultancy, Simon brings a unique blend of expertise to his clients. His deep-rooted knowledge in Microsoft Technolgies, coupled with his extensive coding experience, equips him with a competitive edge in delivering effective and efficient solutions. Simon's distinguished career has largely been dedicated to serving clients within the financial sector and the burgeoning fintech industry. His client base is diverse and expansive, ranging from startups to established corporations, all of which have benefited from his invaluable insights and solutions. This demand for his expertise is a testament to his adeptness and reliability in the field. Simon's expertise extends beyond Dynamics solutions. He possesses a profound understanding of databases and software integrations, AI, security architectures, and the deployment of multi-country models. His proficiency in these areas ensures he can navigate complex technical landscapes and deliver tailored solutions that align with clients' strategic goals. His proven ability to integrate complex systems while ensuring robust security models stands as a testament to his adaptability and technical prowess.
