{% extends "base.html" %}

{% block title %}Langvio Media Analyzer - Home{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12 text-center mb-4">
        <h1><i class="fas fa-brain text-primary"></i> Langvio Media Analyzer</h1>
        <p class="lead">Analyze images and videos using natural language</p>
    </div>
</div>

<div class="form-container">
    <div class="card">
        <div class="card-header">
            <i class="fas fa-upload"></i> Upload Media
        </div>
        <div class="card-body">
            <form action="{{ url_for('process_media') }}" method="post" enctype="multipart/form-data" id="upload-form">
                <div class="mb-3">
                    <label for="file" class="form-label">Select Image or Video</label>
                    <input type="file" class="form-control" id="file" name="file" accept=".jpg,.jpeg,.png,.mp4,.mov,.avi,.webm" required>
                    <small class="text-muted">Supported formats: JPG, PNG, MP4, MOV, AVI, WEBM (max 100MB)</small>
                    <div id="file-preview-container" class="mt-3 text-center">
                        <img id="image-preview" class="img-fluid" style="display: none; max-height: 300px;">
                        <video id="video-preview" controls style="display: none; max-height: 300px;"></video>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="query" class="form-label">What would you like to know about this media?</label>
                    <input type="text" class="form-control" id="query" name="query" placeholder="E.g., Count all people and vehicles" required>
                    <small class="text-muted">Ask a question or give instructions about what to analyze</small>
                </div>
                
                <div class="query-suggestions mb-3">
                    <p><strong>Query suggestions:</strong></p>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 query-suggestion" data-query="What objects are in this image/video?">What objects are in this image/video?</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 query-suggestion" data-query="Count all people in this image/video">Count all people</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 query-suggestion" data-query="Count all vehicles in this image/video">Count all vehicles</button>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 query-suggestion" data-query="Find all red objects in this image/video">Find all red objects</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 query-suggestion" data-query="Where are the people located in this image/video?">Where are the people located?</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-1 query-suggestion" data-query="Describe what is happening in this image/video">Describe what is happening</button>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <button type="submit" class="btn btn-primary" id="analyze-btn">
                        <i class="fas fa-search"></i> Analyze
                    </button>
                </div>
            </form>
            
            <div class="loading-spinner" id="loading-spinner">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Processing your media... This may take a minute.</p>
                <div class="progress mt-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card mt-4">
        <div class="card-header">
            <i class="fas fa-info-circle"></i> About
        </div>
        <div class="card-body">
            <p>This application uses Langvio to analyze images and videos using natural language. You can:</p>
            <ul>
                <li>Detect and identify objects in images and videos</li>
                <li>Count specific objects (e.g., people, cars, animals)</li>
                <li>Find objects with specific attributes (e.g., red cars, large buildings)</li>
                <li>Analyze spatial relationships between objects</li>
                <li>Get natural language explanations of visual content</li>
            </ul>
            <p class="mb-0 text-muted">The application uses YOLOe models for object detection and advanced language models for explanations.</p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // File preview functionality
    document.getElementById('file').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (!file) return;
        
        const imagePreview = document.getElementById('image-preview');
        const videoPreview = document.getElementById('video-preview');
        
        // Clear current previews
        imagePreview.style.display = 'none';
        videoPreview.style.display = 'none';
        
        // Check if the file is an image or video
        if (file.type.startsWith('image/')) {
            // Handle image preview
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else if (file.type.startsWith('video/')) {
            // Handle video preview
            const videoURL = URL.createObjectURL(file);
            videoPreview.src = videoURL;
            videoPreview.style.display = 'block';
        }
    });
    
    // Form submission handling
    document.getElementById('upload-form').addEventListener('submit', function(event) {
        const fileInput = document.getElementById('file');
        const queryInput = document.getElementById('query');
        
        if (fileInput.files.length === 0 || !queryInput.value.trim()) {
            return; // Let the form's native validation handle this
        }
        
        // Show loading spinner
        document.getElementById('loading-spinner').style.display = 'block';
        document.getElementById('analyze-btn').disabled = true;
        
        // Start progress bar animation
        const progressBar = document.querySelector('.progress-bar');
        let width = 0;
        const interval = setInterval(function() {
            if (width >= 90) {
                clearInterval(interval);
            } else {
                width += 1;
                progressBar.style.width = width + '%';
            }
        }, 1000);
    });
    
    // Query suggestion handling
    document.querySelectorAll('.query-suggestion').forEach(button => {
        button.addEventListener('click', function() {
            document.getElementById('query').value = this.dataset.query;
        });
    });
</script>
{% endblock %}