interface/css_styles.py

"""
CSS styling and sample image utilities for Gradio interface.
"""

import os
import glob
from utils.image_utils import image_to_base64


def get_sample_images():
    """Get list of sample images."""
    sample_dir = "sample_images"
    if os.path.exists(sample_dir):
        image_files = glob.glob(os.path.join(sample_dir, "*.png")) + glob.glob(os.path.join(sample_dir, "*.jpg"))
        return sorted(image_files)
    return []


def generate_css():
    """Generate CSS with base64 images for sample buttons."""
    base_css = """
/* Target only the image display area, not the whole component */
.image-container [data-testid="image"] {
    height: 500px !important;
    min-height: 500px !important;
}

/* Make images fill their containers */
.image-container img {
    width: 500px !important;
    height: 500px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Sample image buttons with background images */
.sample-image-btn {
    height: 120px !important;
    width: 120px !important;
    background-size: cover !important;
    background-position: center !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
    margin: 5px !important;
}

.sample-image-btn:hover {
    border-color: #007acc !important;
}
"""

    # Add background images for each sample (only if samples exist)
    sample_images = get_sample_images()
    if sample_images:
        for i, img_path in enumerate(sample_images):
            try:
                base64_img = image_to_base64(img_path)
                base_css += f"#sample_btn_{i} {{ background-image: url('{base64_img}'); }}\n"
            except Exception:
                # Skip invalid images
                continue

    return base_css