Spaces:

Technologic101
/

imagineui

Runtime error

App Files Files Community

imagineui / src /fine_tuned_design_embeddings_20250225_161918 /README.md

Technologic101

task: add fine-tuning and evaluation

ab1d8bc 7 months ago

preview code

raw

history blame contribute delete

36 kB

metadata

tags:
  - sentence-transformers
  - sentence-similarity
  - feature-extraction
  - generated_from_trainer
  - dataset_size:95
  - loss:CosineSimilarityLoss
base_model: sentence-transformers/distilbert-base-nli-stsb-mean-tokens
widget:
  - source_sentence: |-
      Design 115:
                  Description: The design utilizes a dramatic red and black color palette, creating a high contrast and visually striking interface that emphasizes boldness and clarity. The layout is structured with a central column for main content and a sidebar for navigation, enhancing usability. Typography is classic and easy to read, using white text for legibility against dark backgrounds. The design features subtle gradient backgrounds and occasional fiery imagery, contributing to a dynamic and modern aesthetic.
                  Categories: Web Design, Minimalist, Modern, Typography
                  Visual Characteristics: High Contrast, Central Column Layout, Bold Typography, Red and Black Palette, Gradient Background
    sentences:
      - |-
        Design 185:
                    Description: The design features a bold contrast between a bright blue header and a predominantly black background, creating a modern and striking visual impact. The use of crisp typography in white enhances readability against the dark backdrop, while an accent of orange in a sidebar provides additional contrast and attention-grabbing potential. The layout follows a structured and logical arrangement, guiding the viewer's eye through a series of selectable design options and resource links, creating a user-friendly and engaging experience.
                    Categories: Modern, Typography, Web Design, Classic, User Friendly
                    Visual Characteristics: High Contrast, Bold Colors, Structured Layout, Readable Typography, Accent Highlights
      - |-
        Design 002:
                    Description: The design embodies a serene and focused aesthetic with a soft, warm color scheme and straightforward typography. A prominent header creates an inviting entry point, while the balanced layout effectively organizes the content. Subtle shadows and borders provide depth, enhancing visual appeal without overwhelming the viewer.
                    Categories: Web Design, Minimalism, Typography, Navigation
                    Visual Characteristics: Warm color palette, Minimalistic layout, Simplicity, Balanced whitespace
      - |-
        Design 200:
                    Description: The design features a vibrant blue color scheme complemented by white and black typography, creating a striking contrast. The use of textured borders and background effects adds depth and visual interest. The layout is organized, with distinct sections for text content that enhance readability. The design reflects a modern and clean aesthetic, offering a sense of technological advancement and innovation.
                    Categories: Modern, Typography, Web Design, Colorful
                    Visual Characteristics: Vibrant Color, Textured Background, High Contrast, Organized Layout
  - source_sentence: |-
      Design 142:
                  Description: The design effortlessly combines a dark, textured background with bold, contrasting typography, creating a visually striking and modern aesthetic. The use of minimalist elements and a focused color palette emphasizes the central text, while the overall layout feels balanced and sophisticated.
                  Categories: Modern, Minimalist, Typography-focused, Dark theme
                  Visual Characteristics: Textured background, Contrasting colors, Bold typography, Sophisticated layout
    sentences:
      - |-
        Design 106:
                    Description: This design features a minimalist and retro aesthetic with a muted color palette predominantly composed of olive green and subtle contrasts. The layout utilizes clean, sans-serif typography and a straightforward column format to present information in a clear and organized manner. The overall style evokes a calm and contemplative mood, reminiscent of classic web designs, with an emphasis on simplicity and readability.
                    Categories: Minimalism, Retro, Web Design, Typography, Information Design
                    Visual Characteristics: Muted color palette, Clean typography, Column layout, Simple navigation, Classic aesthetic
      - |-
        Design 009:
                    Description: This design features a clean and organized layout with a classic monochrome color palette, emphasizing the elegance of CSS design. It uses serif typography for a traditional feel, with strong visual separation of sections, enhancing readability. The design incorporates ornamental graphics at the top and bottom, adding a touch of sophistication. The ample use of whitespace contributes to a serene and uncluttered experience, inviting users to engage with the content.
                    Categories: Web Design, Typography, Minimalism, Ornamental Design, Monochrome
                    Visual Characteristics: Serif Typography, Monochromatic Palette, Ornamental Graphics, Whitespace Usage, Classic Layout
      - |-
        Design 184:
                    Description: The design features a subtle and harmonious aesthetic using a pastel green color scheme that evokes tranquility and balance. The layout is clean and structured, with a mix of serif and sans-serif typography that enhances readability. Decorative elements like the zen-like symbol and soft imagery provide an abstract, soothing quality, contributing to the theme of enlightenment and calm. This design is suited for audiences interested in modern CSS design principles and invites exploration and participation.
                    Categories: Minimalist, Modern, Educational, Web-focused
                    Visual Characteristics: Subtle color palette, Sophisticated typography, Clean layout, Zen imagery, Textured background
  - source_sentence: |-
      Design 122:
                  Description: The design features a minimalist aesthetic with a dominant white space, paired with subtle green accents and a hint of red, creating a clean and sophisticated look. The layout is vertical and structured, highlighting content purposefully with ample spacing, making it easy to read and navigate. The typography is elegant, using a serif font for headings to contrast with a simpler body text, supporting a Zen-like theme that embodies simplicity and clarity.
                  Categories: minimalist, sophisticated, text-focused, zen-inspired
                  Visual Characteristics: vertical layout, white space, green and red accents, serif typography
    sentences:
      - |-
        Design 195:
                    Description: The design exemplifies a clean and minimalistic style, highlighting simplicity and readability through a dominance of white space and light, pastel background textures. It integrates a single-column layout with a sidebar for easy navigation, using a consistent and harmonious color palette composed mainly of soft greens, oranges, and muted text colors to ensure a smooth visual experience.
                    Categories: Minimalist, Web Design, Modern, Typography
                    Visual Characteristics: Simple Layout, Light Color Palette, Ample White Space, Readable Typography
      - |-
        Design 187:
                    Description: The design features a mystical, nature-inspired theme with a rustic color palette of dark greens and earthy reds. Intricate textures and foliage imagery offer a sense of depth, complemented by elegant serif typography that conveys a classic and sophisticated mood. The layout uses clear sections for content, enhancing readability and user engagement.
                    Categories: Nature, Mystical, Classic, Rustic, Elegant
                    Visual Characteristics: Dark Green Palette, Earthy Red Accents, Serif Typography, Textured Background, Nature Imagery
      - |-
        Design 162:
                    Description: The design embodies a classic, elegant style with a warm color palette dominated by earthy tones, enhanced by an ornate decorative header image. It uses a narrow column layout that focuses attention on the textual content, which is complemented by a textured background, adding depth and sophistication. The typography combines bold headings with a serif font, lending an old-world charm that aligns with the historical and sophisticated mood.
                    Categories: classic, elegant, historical, sophisticated, text-focused
                    Visual Characteristics: earthy color palette, ornate header, textured background, serif typography, narrow column layout
  - source_sentence: |-
      Design 137:
                  Description: The design presents a sleek, unified aesthetic utilizing a blue monochromatic color palette, giving it a modern and tech-centric appeal. Clean, crisp typography paired with visually engaging graphics contribute to its overall appeal, while the structured layout effectively organizes content for easy navigation and readability.
                  Categories: Modern, Tech, Minimalist, Corporate, Professional
                  Visual Characteristics: Monochromatic color scheme, Structured layout, Modern typography, High contrast, Tech-inspired graphics
    sentences:
      - |-
        Design 184:
                    Description: The design features a subtle and harmonious aesthetic using a pastel green color scheme that evokes tranquility and balance. The layout is clean and structured, with a mix of serif and sans-serif typography that enhances readability. Decorative elements like the zen-like symbol and soft imagery provide an abstract, soothing quality, contributing to the theme of enlightenment and calm. This design is suited for audiences interested in modern CSS design principles and invites exploration and participation.
                    Categories: Minimalist, Modern, Educational, Web-focused
                    Visual Characteristics: Subtle color palette, Sophisticated typography, Clean layout, Zen imagery, Textured background
      - |-
        Design 175:
                    Description: The design showcases a balanced layout with a minimalist aesthetic, focused on demonstrating the power of CSS-based design. It features a clean and organized structure with a dominant use of blues and whites, complemented by modern, sans-serif typography. Silhouetted figures add a visual interest while maintaining a professional tone, making the page feel sophisticated and informative. The layout is well-suited for showcasing text content effectively, facilitating easy navigation through clear hierarchy.
                    Categories: Minimalist, Technology, Informational, Professional, Modern
                    Visual Characteristics: Clean layout, Balanced color palette, Silhouette imagery, Sans-serif typography, Organized structure
      - |-
        Design 009:
                    Description: This design features a clean and organized layout with a classic monochrome color palette, emphasizing the elegance of CSS design. It uses serif typography for a traditional feel, with strong visual separation of sections, enhancing readability. The design incorporates ornamental graphics at the top and bottom, adding a touch of sophistication. The ample use of whitespace contributes to a serene and uncluttered experience, inviting users to engage with the content.
                    Categories: Web Design, Typography, Minimalism, Ornamental Design, Monochrome
                    Visual Characteristics: Serif Typography, Monochromatic Palette, Ornamental Graphics, Whitespace Usage, Classic Layout
  - source_sentence: |-
      Design 170:
                  Description: The design of the CSS Zen Garden is exemplary with its soothing blue tones, providing a calm and professional aesthetic. The heart icons add a touch of creativity and warmth. The layout is clean and well-structured with clear navigation on the right-hand side, providing users easy access to additional information and style sheets. The typography varies, highlighting key sections and maintaining readability throughout.
                  Categories: Web Design, CSS Showcase, Typography, User Interface, Aesthetic
                  Visual Characteristics: Soothing Color Palette, Structured Layout, Iconography, Hierarchical Typography, Calming Aesthetic
    sentences:
      - |-
        Design 122:
                    Description: The design features a minimalist aesthetic with a dominant white space, paired with subtle green accents and a hint of red, creating a clean and sophisticated look. The layout is vertical and structured, highlighting content purposefully with ample spacing, making it easy to read and navigate. The typography is elegant, using a serif font for headings to contrast with a simpler body text, supporting a Zen-like theme that embodies simplicity and clarity.
                    Categories: minimalist, sophisticated, text-focused, zen-inspired
                    Visual Characteristics: vertical layout, white space, green and red accents, serif typography
      - |-
        Design 194:
                    Description: This design exudes a minimalist elegance with a muted, earthy color palette and a clean layout, embodying a sense of calm and sophistication. The subtle use of textures and classic serif typography enhances the refined aesthetic, while the centered alignment and generous spacing contribute to a relaxed readability. The incorporation of a delicate floral illustration adds a touch of organic charm, making the design feel both timeless and inviting.
                    Categories: Minimalism, Elegant, Organic, Sophisticated, Classic
                    Visual Characteristics: Muted Color Palette, Serif Typography, Centered Layout, Generous Spacing, Floral Illustration
      - |-
        Design 143:
                    Description: This design features a clean and structured layout with a monochromatic color scheme, highlighting text content with clear typographic hierarchy. A combination of minimalist aesthetic and functional design elements ensures readability and visual interest, while the central image adds a focal point. The use of borders and shadow effects provide depth to the overall design.
                    Categories: Minimalism, Monochrome, Typography, Web Design, User Interface
                    Visual Characteristics: Clear typographic hierarchy, Grid alignment, Monochromatic color scheme, Minimalist style, Use of borders, Shadow effects
pipeline_tag: sentence-similarity
library_name: sentence-transformers
metrics:
  - pearson_cosine
  - spearman_cosine
model-index:
  - name: >-
      SentenceTransformer based on
      sentence-transformers/distilbert-base-nli-stsb-mean-tokens
    results:
      - task:
          type: semantic-similarity
          name: Semantic Similarity
        dataset:
          name: Unknown
          type: unknown
        metrics:
          - type: pearson_cosine
            value: -0.13960523700017818
            name: Pearson Cosine
          - type: spearman_cosine
            value: -0.06863870136546027
            name: Spearman Cosine

SentenceTransformer based on sentence-transformers/distilbert-base-nli-stsb-mean-tokens

This is a sentence-transformers model finetuned from sentence-transformers/distilbert-base-nli-stsb-mean-tokens. It maps sentences & paragraphs to a 768-dimensional dense vector space and can be used for semantic textual similarity, semantic search, paraphrase mining, text classification, clustering, and more.

Model Details

Model Description

Model Type: Sentence Transformer
Base model: sentence-transformers/distilbert-base-nli-stsb-mean-tokens
Maximum Sequence Length: 128 tokens
Output Dimensionality: 768 dimensions
Similarity Function: Cosine Similarity

Model Sources

Documentation: Sentence Transformers Documentation
Repository: Sentence Transformers on GitHub
Hugging Face: Sentence Transformers on Hugging Face

Full Model Architecture

SentenceTransformer(
  (0): Transformer({'max_seq_length': 128, 'do_lower_case': False}) with Transformer model: DistilBertModel 
  (1): Pooling({'word_embedding_dimension': 768, 'pooling_mode_cls_token': False, 'pooling_mode_mean_tokens': True, 'pooling_mode_max_tokens': False, 'pooling_mode_mean_sqrt_len_tokens': False, 'pooling_mode_weightedmean_tokens': False, 'pooling_mode_lasttoken': False, 'include_prompt': True})
)

Usage

Direct Usage (Sentence Transformers)

First install the Sentence Transformers library:

pip install -U sentence-transformers

Then you can load this model and run inference.

from sentence_transformers import SentenceTransformer

# Download from the 🤗 Hub
model = SentenceTransformer("sentence_transformers_model_id")
# Run inference
sentences = [
    'Design 170:\n            Description: The design of the CSS Zen Garden is exemplary with its soothing blue tones, providing a calm and professional aesthetic. The heart icons add a touch of creativity and warmth. The layout is clean and well-structured with clear navigation on the right-hand side, providing users easy access to additional information and style sheets. The typography varies, highlighting key sections and maintaining readability throughout.\n            Categories: Web Design, CSS Showcase, Typography, User Interface, Aesthetic\n            Visual Characteristics: Soothing Color Palette, Structured Layout, Iconography, Hierarchical Typography, Calming Aesthetic',
    'Design 143:\n            Description: This design features a clean and structured layout with a monochromatic color scheme, highlighting text content with clear typographic hierarchy. A combination of minimalist aesthetic and functional design elements ensures readability and visual interest, while the central image adds a focal point. The use of borders and shadow effects provide depth to the overall design.\n            Categories: Minimalism, Monochrome, Typography, Web Design, User Interface\n            Visual Characteristics: Clear typographic hierarchy, Grid alignment, Monochromatic color scheme, Minimalist style, Use of borders, Shadow effects',
    'Design 194:\n            Description: This design exudes a minimalist elegance with a muted, earthy color palette and a clean layout, embodying a sense of calm and sophistication. The subtle use of textures and classic serif typography enhances the refined aesthetic, while the centered alignment and generous spacing contribute to a relaxed readability. The incorporation of a delicate floral illustration adds a touch of organic charm, making the design feel both timeless and inviting.\n            Categories: Minimalism, Elegant, Organic, Sophisticated, Classic\n            Visual Characteristics: Muted Color Palette, Serif Typography, Centered Layout, Generous Spacing, Floral Illustration',
]
embeddings = model.encode(sentences)
print(embeddings.shape)
# [3, 768]

# Get the similarity scores for the embeddings
similarities = model.similarity(embeddings, embeddings)
print(similarities.shape)
# [3, 3]

Evaluation

Metrics

Semantic Similarity

Evaluated with EmbeddingSimilarityEvaluator

Metric	Value
pearson_cosine	-0.1396
spearman_cosine	-0.0686

Training Details

Training Dataset

Unnamed Dataset

Size: 95 training samples
Columns: sentence_0, sentence_1, and label

Approximate statistics based on the first 95 samples:

	sentence_0	sentence_1	label
type	string	string	float
details	min: 90 tokens mean: 116.28 tokens max: 128 tokens	min: 90 tokens mean: 115.79 tokens max: 128 tokens	min: 0.21 mean: 0.26 max: 0.5

Samples:

sentence_0	sentence_1	label
Design 148: Description: This visual design features a clean and minimalistic layout with an emphasis on typography and balanced spacing. The dark gray background contrasts with the white text elements, providing a modern and sophisticated look. The design also includes vertical lines and a sidebar to separate different sections, adding structure without cluttering the visual flow. Categories: minimalism, typography, contrast, layout design, modern aesthetics Visual Characteristics: high contrast, monochromatic palette, well-defined spacing, balanced composition, structured layout	Design 156: Description: The design uses a bold, contrasting color palette dominated by red, black, and white, highlighting a silhouetted figure against a background with traditional Japanese elements. The typography is clear and has a balance between serif and sans-serif fonts, adding to the mix of modern and traditional aesthetics. The layout is clean, with sections distinctly separated by subtle gradients, providing a sense of order and cohesiveness. The overall tone is a blend of contemporary design with cultural nuances, making it both engaging and visually striking. Categories: modern design, cultural elements, typography, minimalism, contrast Visual Characteristics: bold color palette, silhouette, gradients, clean layout, traditional motifs	`0.21428571428571427`
Design 135: Description: This design uses an elegant and traditional aesthetic, with a muted color palette featuring cream and terracotta tones. The use of a patterned background adds texture, while the vertical layout and serif typography provide a classic and sophisticated feel. The design balances text-heavy content with organized sections, making information easily accessible, and its ornate flourishes add a touch of refinement. Categories: Traditional, Elegant, Text-Heavy, Classic Visual Characteristics: Muted Color Palette, Vertical Layout, Serif Typography, Textured Background, Ornate Flourishes	Design 194: Description: This design exudes a minimalist elegance with a muted, earthy color palette and a clean layout, embodying a sense of calm and sophistication. The subtle use of textures and classic serif typography enhances the refined aesthetic, while the centered alignment and generous spacing contribute to a relaxed readability. The incorporation of a delicate floral illustration adds a touch of organic charm, making the design feel both timeless and inviting. Categories: Minimalism, Elegant, Organic, Sophisticated, Classic Visual Characteristics: Muted Color Palette, Serif Typography, Centered Layout, Generous Spacing, Floral Illustration	`0.26785714285714285`
Design 130: Description: The visual design features a clean and structured layout with a calming color palette of beige and blue, enhancing readability and ease of navigation. The use of different font styles for headings and body text provides a clear hierarchy, while the sidebar offers easy access to additional resources and options. This design exudes professionalism, making it suitable for educational or informational purposes. Categories: Informational, Educational, Professional, Web Design, User Interface Visual Characteristics: Calming color palette, Structured layout, Clear typography, Sidebar navigation, Minimalist design	Design 215: Description: The CSS Zen Garden design showcases a clean, structured layout aimed at demonstrating the possibilities of CSS styling. It uses a primarily blue and white color palette with red accents to draw attention to headings and separators. The design incorporates a formal serif and a modern sans-serif typography, creating an elegant and readable interface. The use of graphical illustrations adds visual interest and helps convey the collaborative and creative theme. The overall aesthetic balance, combined with functional elements like navigation, ensures a clear and engaging user experience. Categories: Typography, User Interface, Minimalist Design, Educational, Professional, Web Design Visual Characteristics: Blue and White Palette, Elegant Typography, Illustrative Graphics, Clean Layout, Contrasting Accents, Symmetry	`0.2857142857142857`

Loss: CosineSimilarityLoss with these parameters:

{
    "loss_fct": "torch.nn.modules.loss.MSELoss"
}

Training Hyperparameters

Non-Default Hyperparameters

per_device_train_batch_size: 16
per_device_eval_batch_size: 16
num_train_epochs: 1
multi_dataset_batch_sampler: round_robin

All Hyperparameters

Click to expand

overwrite_output_dir: False
do_predict: False
eval_strategy: no
prediction_loss_only: True
per_device_train_batch_size: 16
per_device_eval_batch_size: 16
per_gpu_train_batch_size: None
per_gpu_eval_batch_size: None
gradient_accumulation_steps: 1
eval_accumulation_steps: None
torch_empty_cache_steps: None
learning_rate: 5e-05
weight_decay: 0.0
adam_beta1: 0.9
adam_beta2: 0.999
adam_epsilon: 1e-08
max_grad_norm: 1
num_train_epochs: 1
max_steps: -1
lr_scheduler_type: linear
lr_scheduler_kwargs: {}
warmup_ratio: 0.0
warmup_steps: 0
log_level: passive
log_level_replica: warning
log_on_each_node: True
logging_nan_inf_filter: True
save_safetensors: True
save_on_each_node: False
save_only_model: False
restore_callback_states_from_checkpoint: False
no_cuda: False
use_cpu: False
use_mps_device: False
seed: 42
data_seed: None
jit_mode_eval: False
use_ipex: False
bf16: False
fp16: False
fp16_opt_level: O1
half_precision_backend: auto
bf16_full_eval: False
fp16_full_eval: False
tf32: None
local_rank: 0
ddp_backend: None
tpu_num_cores: None
tpu_metrics_debug: False
debug: []
dataloader_drop_last: False
dataloader_num_workers: 0
dataloader_prefetch_factor: None
past_index: -1
disable_tqdm: False
remove_unused_columns: True
label_names: None
load_best_model_at_end: False
ignore_data_skip: False
fsdp: []
fsdp_min_num_params: 0
fsdp_config: {'min_num_params': 0, 'xla': False, 'xla_fsdp_v2': False, 'xla_fsdp_grad_ckpt': False}
fsdp_transformer_layer_cls_to_wrap: None
accelerator_config: {'split_batches': False, 'dispatch_batches': None, 'even_batches': True, 'use_seedable_sampler': True, 'non_blocking': False, 'gradient_accumulation_kwargs': None}
deepspeed: None
label_smoothing_factor: 0.0
optim: adamw_torch
optim_args: None
adafactor: False
group_by_length: False
length_column_name: length
ddp_find_unused_parameters: None
ddp_bucket_cap_mb: None
ddp_broadcast_buffers: False
dataloader_pin_memory: True
dataloader_persistent_workers: False
skip_memory_metrics: True
use_legacy_prediction_loop: False
push_to_hub: False
resume_from_checkpoint: None
hub_model_id: None
hub_strategy: every_save
hub_private_repo: None
hub_always_push: False
gradient_checkpointing: False
gradient_checkpointing_kwargs: None
include_inputs_for_metrics: False
include_for_metrics: []
eval_do_concat_batches: True
fp16_backend: auto
push_to_hub_model_id: None
push_to_hub_organization: None
mp_parameters:
auto_find_batch_size: False
full_determinism: False
torchdynamo: None
ray_scope: last
ddp_timeout: 1800
torch_compile: False
torch_compile_backend: None
torch_compile_mode: None
dispatch_batches: None
split_batches: None
include_tokens_per_second: False
include_num_input_tokens_seen: False
neftune_noise_alpha: None
optim_target_modules: None
batch_eval_metrics: False
eval_on_start: False
use_liger_kernel: False
eval_use_gather_object: False
average_tokens_across_devices: False
prompts: None
batch_sampler: batch_sampler
multi_dataset_batch_sampler: round_robin

Training Logs

Epoch	Step	spearman_cosine
1.0	6	-0.0686

Framework Versions

Python: 3.11.11
Sentence Transformers: 3.4.1
Transformers: 4.49.0
PyTorch: 2.1.2
Accelerate: 1.4.0
Datasets: 3.3.2
Tokenizers: 0.21.0

Citation

BibTeX

Sentence Transformers

@inproceedings{reimers-2019-sentence-bert,
    title = "Sentence-BERT: Sentence Embeddings using Siamese BERT-Networks",
    author = "Reimers, Nils and Gurevych, Iryna",
    booktitle = "Proceedings of the 2019 Conference on Empirical Methods in Natural Language Processing",
    month = "11",
    year = "2019",
    publisher = "Association for Computational Linguistics",
    url = "https://arxiv.org/abs/1908.10084",
}