REAL-TIME LAYOUT ADAPTATION USING GENERATIVE AI

Authors: Sanshray Singh Langeh, Mandar Zope
Primary area: applications to computer vision, audio, language, and other modalities
Keywords: GenAI, SupervisedLearning, React, Web-Design, ChatGPT

Abstract:
In modern web design, ensuring adaptability and user engagement through dynamic layouts is increasingly important. With the growing demand for personalized user experiences, traditional static web layouts are insufficient for meeting user preferences. This paper introduces an innovative approach that leverages generative AI to dynamically adapt web layouts in real-time. With the help of data that is collected under the banner of user interactions through technologies such as JavaScript and Node.js, we are able to save those interactions, which not only include the click patterns but also the timestamps, user’s name, day and date, and number of clicks.

These clicks correspond to interactions of users with different React components. This data is being stored as a CSV file, as it is easier to read when it comes to parsing it to an AI model. Once every designated cycle, the data is fed to a Python script which does an API call to the $Chat GPT 4o$ model, which then analyzes the data and rewrites the CSS to create a new web layout based on the user’s interactions. 

This successfully gives a web interface that adapts its layout in real-time, which is somewhat similar to many recommendation systems of popular applications like Netflix and Amazon Prime. Its significance extends across multiple fields, as this approach can enhance user engagement by dynamically displaying components based on user interaction patterns. Additionally, it offers potential revenue growth for companies, allowing them to charge higher rates for ads strategically placed in high-engagement areas of the layout, based on inferred user data.

For example, let the number of clicks be represented as $N_c$ and the user interaction patterns as $P_u$. The revenue potential $R$ can be expressed as:
$$
R = k \cdot N_c \cdot P_u,
$$
where $k$ is a constant representing the ad placement value.

Decision: desk reject

Reviews and discussion:

Metareview: