# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates
Figure 6: Homepage and subpages of the web application. The colors are automatically determined on subpages based on the featured image. As described in the previous section, our model generates a theme of five basic colors. Inside our application, the colors are used as follows:

* The primary color is used for the background of the hero area, where the feature image, title, and main menu are located;
* The secondary color is used for the CTA button \"Add to Cart\" and the information card;
* The tertiary color is used for all other interactive elements. The variant of tertiary color is used for indicating button states;
* The background and foreground colors are used in the central area where the main content is displayed and for the text color in other elements. ### Development

The web application was developed as a single-page application (SPA) with client-side rendering (CSR). The logic, data retrieval, rendering, and routing are all implemented directly in the browser using JavaScript. This approach enables asynchronous content changes without page refreshes. To simplify the development process, the data are stored in a JSON file instead of a database. The application is built using the React JavaScript library. The Reach Router library is used for routing between pages, and the Service Worker API is employed to enable offline functionality. User settings are stored in the browser's local storage. For rapid development, we used Material UI design system. ### Data and Image Collection

We have obtained data and images for 67 records from the web. The images are shown in Figure 7. Our aim was to select images that are highly diverse in terms of the span and distribution of colors (in both chroma and lightness dimensions), as well as the number of color categories. For images without an attached ICC profile, we assumed they were in the sRGB color space. Figure 7: Images of 67 records that were included in the application. The model input colors were extracted from the images using a model for extracting the most prominent colors [40]. Since the model was developed in a Matlab/Python environment and cannot be directly utilized within the web application, the colors were pre-extracted for each image. These color values were stored in a JSON file and imported into the web application. For each image, we have extracted ten prominent colors. ### Model Implementation

The model was implemented entirely in JavaScript, which makes it more flexible in web application development. The model can be used either on the client side (client-side rendering), as in our case, or on the server side (server-side rendering) inside the Node.js environment. On the subpages where colors were dynamically determined, we have included a button that opens the modal window with all available settings (see Figure 8). The following settings are available:

* Dark mode: users can manually select their preferred mode. By default, the model uses a mode set by the operating system;
* Color selection: users can choose between two color selection modes supported by the model (see Section 4.2.1). The default mode is authentic;
* Color harmony: users can select between two color harmony models (see Section 4.3) or turn it off. By default, the adjustment for color harmony is turned off;
* Contrast enhancement: users can choose between two contrast levels (see Section 4.4) or turn off contrast enhancement. By default, the contrast is set to AA level. ## 6 Model Evaluation

We took screenshots of the application using different settings to evaluate the model. The screenshots were then included in an online survey asking participants to rate the aesthetics and usability of colors. Screenshots of three randomly selected albums and eight different settings were included in the survey. Screenshots are presented in Figure 9, while the settings are listed in Table 3. As can be seen, all settings use the same contrast level, while different options for dark mode, color selection, and color harmony were applied.