character-browser/templates/looks/index.html

{% extends "layout.html" %}

{% block content %}
{% from "partials/library_toolbar.html" import library_toolbar %}
{{ library_toolbar(
    title="Look",
    category="looks",
    create_url=url_for('create_look'),
    create_label="Look",
    has_batch_gen=true,
    has_regen_all=true,
    has_lora_create=true,
    bulk_create_url=url_for('bulk_create_looks_from_loras'),
    has_tags=true,
    regen_tags_category="looks",
    rescan_url=url_for('rescan_looks'),
    get_missing_url="/get_missing_looks",
    clear_covers_url="/clear_all_look_covers",
    generate_url_pattern="/look/{slug}/generate"
) }}

<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
        <label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
    </div>
    <select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
        <option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
        <option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
        <option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
    </select>
</form>

<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for look in looks %}
    <div class="col" id="card-{{ look.slug }}">
        <div class="card h-100 character-card {% if request.args.get('highlight') == look.slug %}border-success border-3 highlight-card{% endif %}" onclick="window.location.href='{{ url_for('look_detail', slug=look.slug) }}'">
            <div class="img-container">
                {% if look.image_path %}
                <img id="img-{{ look.slug }}" src="{{ url_for('static', filename='uploads/' + look.image_path) }}" alt="{{ look.name }}">
                <span id="no-img-{{ look.slug }}" class="text-muted d-none">No Image</span>
                {% else %}
                {% set fallback = random_gen_image('looks', look.slug) %}
                {% if fallback %}
                <img id="img-{{ look.slug }}" src="{{ url_for('static', filename='uploads/' + fallback) }}" alt="{{ look.name }}" class="fallback-cover">
                <span id="no-img-{{ look.slug }}" class="text-muted d-none">No Image</span>
                {% else %}
                <img id="img-{{ look.slug }}" src="" alt="{{ look.name }}" class="d-none">
                <span id="no-img-{{ look.slug }}" class="text-muted">No Image</span>
                {% endif %}
                {% endif %}
                {% if look_assignments.get(look.look_id, 0) > 0 %}
                <span class="assignment-badge" title="Assigned to {{ look_assignments.get(look.look_id, 0) }} character(s)">{{ look_assignments.get(look.look_id, 0) }}</span>
                {% endif %}
            </div>
            <div class="card-body">
                <h5 class="card-title text-center">{% if look.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ look.name }}{% if look.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
                {% if look.character_id %}
                <p class="card-text small text-center text-info">{{ look.character_id.replace('_', ' ').title() }}</p>
                {% endif %}
                <p class="card-text small text-center text-muted">
                    {% set ns = namespace(parts=[]) %}
                    {% if look.data.positive %}{% set ns.parts = ns.parts + [look.data.positive] %}{% endif %}
                    {% if look.data.lora and look.data.lora.lora_triggers %}
                        {% set ns.parts = ns.parts + [look.data.lora.lora_triggers] %}
                    {% endif %}
                    {{ ns.parts | join(', ') }}
                </p>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center p-1">
                {% if look.data.lora and look.data.lora.lora_name %}
                {% set lora_name = look.data.lora.lora_name.split('/')[-1].replace('.safetensors', '') %}
                <small class="text-muted text-truncate" title="{{ look.data.lora.lora_name }}">{{ lora_name }}</small>
                {% else %}<span></span>{% endif %}
                <button class="btn btn-sm btn-danger py-0 px-1 flex-shrink-0 ms-1 resource-delete-btn" title="Delete"
                        data-category="looks" data-slug="{{ look.slug }}" data-name="{{ look.name | e }}"><img src="/static/icons/trash.png" alt="Delete" style="width:16px;height:16px;"></button>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <p class="text-muted">No looks found. Add JSON files to <code>data/looks/</code> or use the create-from-LoRAs button above.</p>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<style>
    .highlight-card {
        animation: highlight-pulse 2s ease-in-out 3;
        box-shadow: 0 0 20px rgba(25, 135, 84, 0.5) !important;
    }
    @keyframes highlight-pulse {
        0%, 100% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.5); }
        50% { box-shadow: 0 0 30px rgba(25, 135, 84, 0.8); }
    }
</style>
<script>
    const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
    if (highlightSlug) {
        const card = document.getElementById(`card-${highlightSlug}`);
        if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}