| """ |
| 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; |
| } |
| """ |
|
|
| |
| 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: |
| |
| continue |
|
|
| return base_css |
