image_management_api/client/templates/image_edit.html

{% extends "base.html" %}

{% block title %}Edit {{ image.filename }} - SEREACT Web Client{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-edit"></i> Edit Image
                </h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="description" class="form-label">
                            <i class="fas fa-align-left"></i> Description
                        </label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="4" placeholder="Enter image description">{{ image.description or '' }}</textarea>
                        <div class="form-text">
                            A description of what the image contains or represents
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="tags" class="form-label">
                            <i class="fas fa-tags"></i> Tags
                        </label>
                        <input type="text" class="form-control" id="tags" name="tags" 
                               value="{{ image.tags | join(', ') if image.tags else '' }}" 
                               placeholder="Enter tags separated by commas">
                        <div class="form-text">
                            Tags help organize and search for images. Example: nature, landscape, sunset
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('view_image', image_id=image.id) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Image
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- Image Preview -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-image"></i> Image Preview
                </h6>
            </div>
            <div class="card-body text-center">
                <img src="{{ get_api_base_url() }}/api/v1/images/{{ image.id }}/download" 
                     alt="{{ image.filename }}" 
                     class="img-fluid rounded"
                     style="max-height: 300px;"
                     onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjhmOWZhIiBzdHJva2U9IiNkZWUyZTYiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE2IiBmaWxsPSIjNmM3NTdkIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+SW1hZ2UgTm90IEZvdW5kPC90ZXh0Pjwvc3ZnPg=='">
                <div class="mt-2">
                    <small class="text-muted">{{ image.filename }}</small>
                </div>
            </div>
        </div>

        <!-- Current Information -->
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle"></i> Current Information
                </h6>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">Size:</dt>
                    <dd class="col-sm-8">{{ (image.file_size / 1024 / 1024) | round(2) }} MB</dd>
                    
                    <dt class="col-sm-4">Type:</dt>
                    <dd class="col-sm-8">{{ image.content_type }}</dd>
                    
                    <dt class="col-sm-4">Uploaded:</dt>
                    <dd class="col-sm-8">{{ image.upload_date.strftime('%Y-%m-%d') if image.upload_date else 'Unknown' }}</dd>
                    
                    <dt class="col-sm-4">AI Status:</dt>
                    <dd class="col-sm-8">
                        {% if image.has_embedding %}
                        <span class="badge bg-success">
                            <i class="fas fa-check"></i> Processed
                        </span>
                        {% else %}
                        <span class="badge bg-warning">
                            <i class="fas fa-clock"></i> Processing
                        </span>
                        {% endif %}
                    </dd>
                </dl>
            </div>
        </div>

        <!-- Current Tags -->
        {% if image.tags %}
        <div class="card mb-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-tags"></i> Current Tags
                </h6>
            </div>
            <div class="card-body">
                {% for tag in image.tags %}
                <span class="badge bg-secondary me-1 mb-1">{{ tag }}</span>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Actions -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-tools"></i> Quick Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('view_image', image_id=image.id) }}" class="btn btn-outline-primary">
                        <i class="fas fa-eye"></i> View Full Details
                    </a>
                    <a href="{{ get_api_base_url() }}/api/v1/images/{{ image.id }}/download" 
                       class="btn btn-outline-success" target="_blank">
                        <i class="fas fa-download"></i> Download Image
                    </a>
                    {% if image.has_embedding %}
                    <a href="{{ url_for('search') }}" class="btn btn-outline-info">
                        <i class="fas fa-search"></i> Search Similar
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-lightbulb"></i> Tips for Better Metadata
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-align-left text-primary"></i> Descriptions</h6>
                        <ul class="small">
                            <li>Describe what you see in the image</li>
                            <li>Include context and important details</li>
                            <li>Mention people, objects, and activities</li>
                            <li>Use natural, descriptive language</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-tags text-success"></i> Tags</h6>
                        <ul class="small">
                            <li>Use specific, descriptive tags</li>
                            <li>Include objects, colors, emotions, locations</li>
                            <li>Separate multiple tags with commas</li>
                            <li>Use consistent naming conventions</li>
                        </ul>
                    </div>
                </div>
                <div class="alert alert-info mt-3" role="alert">
                    <i class="fas fa-info-circle"></i>
                    <strong>Note:</strong> Good descriptions and tags improve AI search accuracy and help you find images more easily later.
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}