IO – An AI Framework for Designers
Artificial intelligence already has a significant influence on our society, and this influence is likely to continue to grow in the future. The profession of designers will also be permanently influenced and progressively shaped by artificial intelligence. Artificial intelligence should not be perceived exclusively as a risk, but also as an opportunity and thus as an additional design tool for designers.
However, working with artificial intelligence is very complex and involves many hurdles. A lack of knowledge of programming and the tools used makes it difficult for designers to use artificial intelligence as a design tool. My bachelor's thesis, IO – An AI Framework for Designers, addresses this problem and offers a multi-level framework to make artificial intelligence accessible to designers.
Concept
The intention is to introduce designers with little or no AI experience to the topic of AI and design through a multi-stage process. The first step in this multi-stage process is to introduce participants to the world of AI models, specifically GAN models, and image datasets, in order to develop a basic understanding and highlight possibilities. The second step involves conducting initial experiments in working with AI models and creating datasets. Low-threshold interfaces are used in conjunction with explanatory material so that no programming skills are necessary and the process remains clearly understandable. After successful experimentation with the models and datasets, the final step is to encourage independent work and training of GAN models.
Technologically, the framework is based on the medium of computational notebooks, specifically Jupyter notebooks. This format combines code sections with explanatory texts in a single document and enables the step-by-step execution of programmes. This has the didactic advantage that code is not only documented but also accompanied by understandable explanations. At the same time, designers are introduced directly to a standard tool of AI development, which enables them to work independently with new models and technologies in the future.
The framework is accessed via a central website, which serves as a starting point and provides access to three specific use cases: data set creation via web crawling, image generation using VQGAN-CLIP and training StyleGAN3 models. To alleviate any apprehension about complex editors, these notebooks initially launch in a greatly simplified, reader-friendly web view. The code is executed using pre-built widgets. These graphical components abstract the code into simple interfaces, allowing users to experiment without having to program directly.
Once a basic understanding has been established, the framework allows for a seamless transition to a customised Jupyter Lab environment. Here, the user interface has been deliberately stripped of irrelevant elements to make it more intuitive to use. In this mode, designers have full insight into the underlying code and can edit existing notebooks or implement their own projects from scratch. This openness of the system ensures that the framework not only serves as a learning tool, but can also be used as a platform for free experimentation and the exploration of new creative approaches with AI.
Implementation
The framework was developed with the aim of making technical complexity accessible through clear design and modern web technologies. Visually, this approach translates into a minimalist design system: an accent colour in muted orange creates a link to the Jupyter identity, while the font families Slussen and Slussen Mono create a harmonious connection between continuous text explanations and technical code blocks. User guidance is supported by the clear icon set of the IBM Carbon Design System.
Technologically, the framework is based on a modular open-source architecture. The entry point is the website, which was implemented using the JavaScript framework Svelte to ensure high-performance, component-based development. Specific extensions are used for the core of the framework, the interactive notebooks: The beginner-friendly web view is technically implemented using the Voilà extension. This converts the classic Jupyter notebooks into a pure web application, where the code is executed in the background, but the interface is reduced to the essential interaction elements.
For advanced work, the Jupyter Lab environment has been modified with custom extensions and customisations. Unnecessary elements such as status bars have been removed, while new features such as a drag-and-drop collection for code snippets have been integrated. The custom-developed widgets are also used here to ensure intuitive operation. These are technically based on Svelte templates and communicate with the Python code in the background via the ipywidgets library.
Learn more
Further information on the IO framework can be found on the website for the thesis. A more detailed insight into the research, conception and implementation of the thesis can be found in the written thesis (only available in german).
I continued developing the framework as part of my employment as a research assistant on the KITeGG research project. The results of this further development are documented in the publication Creating easy to use interfaces to work with artificial intelligence.