Uiclip Jitteredwebsites 2 224 Paraphrased

🚀 UIClip模型

UIClip是一款專門設計的模型，它能夠根據文本描述對用戶界面（UI）截圖的設計質量和相關性進行量化評估。此外，該模型還可用於生成自然語言設計建議。

🚀 快速開始

UIClip是一個旨在根據文本描述量化用戶界面（UI）截圖的設計質量和相關性的模型。此模型也可用於生成自然語言設計建議（詳見論文）。該模型在UIST 2024會議上發表的論文“UIClip: A Data-driven Model for Assessing User Interface Design”（https://arxiv.org/abs/2404.12500）中有詳細描述。

用戶界面（UI）設計對於確保應用程序的可用性、可訪問性和美學品質而言，是一項既困難又重要的任務。在論文中，我們開發了一個機器學習模型UIClip，用於根據UI的截圖和自然語言描述來評估其設計質量和視覺相關性。為了訓練UIClip，我們結合了自動爬取、合成增強和人工評級等方法，構建了一個大規模的UI數據集，該數據集按描述進行整理，並按設計質量進行排序。通過在該數據集上進行訓練，UIClip隱式地學習到了優秀和糟糕設計的特徵，具體表現為：i) 為UI設計分配一個代表其相關性和質量的數值分數；ii) 提供設計建議。在一項評估中，我們將UIClip和其他基線模型的輸出與12位人類設計師對UI的評級進行了比較，發現UIClip與真實排名的一致性最高。最後，我們展示了三個示例應用，說明了UIClip如何促進依賴於即時評估UI設計質量的下游應用：i) UI代碼生成；ii) UI設計提示生成；iii) 質量感知的UI示例搜索。

✨ 主要特性

• 開發團隊：BigLab
• 模型類型：CLIP風格的多模態雙編碼器Transformer
• 支持語言（NLP）：英語
• 許可證：MIT

📦 安裝指南

文檔未提供安裝步驟，跳過該章節。

💻 使用示例

基礎用法

import torch
from transformers import CLIPProcessor, CLIPModel

IMG_SIZE = 224
DEVICE = "cpu" # can also be "cuda" or "mps"
LOGIT_SCALE = 100 # based on OpenAI's CLIP example code
NORMALIZE_SCORING = True

model_path="uiclip_jitteredwebsites-2-224-paraphrased" # can also be webpairs or human pairs variants
processor_path="openai/clip-vit-base-patch32"

model = CLIPModel.from_pretrained(model_path)
model = model.eval()
model = model.to(DEVICE)

processor = CLIPProcessor.from_pretrained(processor_path)

def compute_quality_scores(input_list):
    # input_list is a list of types where the first element is a description and the second is a PIL image
    description_list = ["ui screenshot. well-designed. " + input_item[0] for input_item in input_list]
    img_list = [input_item[1] for input_item in input_list]
    text_embeddings_tensor = compute_description_embeddings(description_list) # B x H
    img_embeddings_tensor = compute_image_embeddings(img_list) # B x H

    # normalize tensors
    text_embeddings_tensor /= text_embeddings_tensor.norm(dim=-1, keepdim=True)
    img_embeddings_tensor /= img_embeddings_tensor.norm(dim=-1, keepdim=True)

    if NORMALIZE_SCORING:
        text_embeddings_tensor_poor = compute_description_embeddings([d.replace("well-designed. ", "poor design. ") for d in description_list]) # B x H
        text_embeddings_tensor_poor /= text_embeddings_tensor_poor.norm(dim=-1, keepdim=True)
        text_embeddings_tensor_all = torch.stack((text_embeddings_tensor, text_embeddings_tensor_poor), dim=1) # B x 2 x H
    else:
        text_embeddings_tensor_all = text_embeddings_tensor.unsqueeze(1)

    img_embeddings_tensor = img_embeddings_tensor.unsqueeze(1) # B x 1 x H

    scores = (LOGIT_SCALE * img_embeddings_tensor @ text_embeddings_tensor_all.permute(0, 2, 1)).squeeze(1)

    if NORMALIZE_SCORING:
        scores = scores.softmax(dim=-1)

    return scores[:, 0]

def compute_description_embeddings(descriptions):
    inputs = processor(text=descriptions, return_tensors="pt", padding=True)
    inputs['input_ids'] = inputs['input_ids'].to(DEVICE)
    inputs['attention_mask'] = inputs['attention_mask'].to(DEVICE)
    text_embedding = model.get_text_features(**inputs)
    return text_embedding

def compute_image_embeddings(image_list):
    windowed_batch = [slide_window_over_image(img, IMG_SIZE) for img in image_list]
    inds = []
    for imgi in range(len(windowed_batch)):
        inds.append([imgi for _ in windowed_batch[imgi]])

    processed_batch = [item for sublist in windowed_batch for item in sublist]
    inputs = processor(images=processed_batch, return_tensors="pt")
    # run all sub windows of all images in batch through the model
    inputs['pixel_values'] = inputs['pixel_values'].to(DEVICE)
    with torch.no_grad():
        image_features = model.get_image_features(**inputs)

    # output contains all subwindows, need to mask for each image
    processed_batch_inds = torch.tensor([item for sublist in inds for item in sublist]).long().to(image_features.device)
    embed_list = []
    for i in range(len(image_list)):
        mask = processed_batch_inds == i
        embed_list.append(image_features[mask].mean(dim=0))
    image_embedding = torch.stack(embed_list, dim=0)
    return image_embedding

def preresize_image(image, image_size):
    aspect_ratio = image.width / image.height
    if aspect_ratio > 1:
        image = image.resize((int(aspect_ratio * image_size), image_size))
    else:
        image = image.resize((image_size, int(image_size / aspect_ratio)))
    return image

def slide_window_over_image(input_image, img_size):
    input_image = preresize_image(input_image, img_size)
    width, height = input_image.size
    square_size = min(width, height)
    longer_dimension = max(width, height)
    num_steps = (longer_dimension + square_size - 1) // square_size

    if num_steps > 1:
        step_size = (longer_dimension - square_size) // (num_steps - 1)
    else:
        step_size = square_size

    cropped_images = []

    for y in range(0, height - square_size + 1, step_size if height > width else square_size):
        for x in range(0, width - square_size + 1, step_size if width > height else square_size):
            left = x
            upper = y
            right = x + square_size
            lower = y + square_size
            cropped_image = input_image.crop((left, upper, right, lower))
            cropped_images.append(cropped_image)

    return cropped_images


# compute the quality scores for a list of descriptions (strings) and images (PIL images)
prediction_scores = compute_quality_scores(list(zip(test_descriptions, test_images)))

高級用法

文檔未提供高級用法相關代碼，跳過該部分。

📚 詳細文檔

此模型在論文“UIClip: A Data-driven Model for Assessing User Interface Design”（https://arxiv.org/abs/2404.12500）中有詳細描述。

🔧 技術細節

為了訓練UIClip，我們結合了自動爬取、合成增強和人工評級等方法，構建了一個大規模的UI數據集，該數據集按描述進行整理，並按設計質量進行排序。通過在該數據集上進行訓練，UIClip隱式地學習到了優秀和糟糕設計的特徵，具體表現為：i) 為UI設計分配一個代表其相關性和質量的數值分數；ii) 提供設計建議。在一項評估中，我們將UIClip和其他基線模型的輸出與12位人類設計師對UI的評級進行了比較，發現UIClip與真實排名的一致性最高。

📄 許可證

本模型使用的許可證為MIT。

📋 模型信息