Apppublic

TanishaGupta30/layoutgym

sourceHugging Faceupdated 5mo agoView on Hugging Face

0likes

App README

LayoutGym 🎨

An OpenEnv environment for AI-driven UI/UX conversion optimization.

Overview

LayoutGym simulates a landing page as a structured JSON DOM tree. An AI agent acts as a conversion-rate expert, manipulating element positions, colors, and content to maximize a Predicted Engagement Score (0.0–1.0) — inspired by Fitts's Law and gaze prediction models.

Observation Space

Field	Type	Description
`elements`	List[UIElement]	DOM elements with positions, colors, clickrate, heatscore
`fold_position`	int	Index of the "above the fold" boundary
`scroll_depth_map`	dict	% scroll → drop-off rate
`bounce_zones`	List[int]	Element position indices with high bounce
`engagement_score`	float	Current Predicted Engagement Score (0.0–1.0)

Action Space

Action	Parameters
`move_element`	elementid, targetposition
`swap_elements`	elementida, elementidb
`change_color`	element_id, color (hex)
`set_primary_button`	element_id
`change_font_size`	elementid, fontsize
`insert_element`	type, label, position
`remove_element`	element_id

Tasks

ID	Difficulty	Goal
`cta_rescue`	Easy	Move hidden CTA above the fold
`visual_hierarchy`	Medium	Fix button color contrast and hierarchy
`retention_loop`	Hard	Insert engaging content before bounce zone

Setup

bash

pip install -r requirements.txt
uvicorn server.app:app --host 0.0.0.0 --port 7860

Run Baseline

bash

export API_BASE_URL="https://api.openai.com/v1"
export MODEL_NAME="gpt-4o-mini"
export HF_TOKEN="your_token_here"
export ENV_URL="http://localhost:7860"
python inference.py

API Endpoints

—GET /health — Health check
—GET /tasks — List all tasks
—POST /reset — {"task_id": "cta_rescue"}
—POST /step — {"action": {...}}
—GET /state — Current environment state