clap_search.html

{% extends "includes/layout.html" %}

{% block headAdditions %}
<style>
    .search-container {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .search-container .param-group {
        margin-bottom: 1.5rem;
    }
    
    .search-container label {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .search-box {
        width: 100%;
        padding: 0.5rem;
        font-size: 1rem;
        border: 2px solid var(--border-color);
        border-radius: 8px;
    }
    
    .search-box:focus {
        outline: none;
        border-color: var(--color-primary);
    }
    
    .cache-stats {
        background: var(--bg-code);
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }
    
    .cache-stats strong {
        color: var(--color-primary);
    }
    
    .example-queries {
        background: var(--bg-code);
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .example-queries h3 {
        margin-top: 0;
        font-size: 1rem;
        color: var(--text-muted);
    }

    .example-tag {
        display: inline-block;
        padding: 0.4rem 0.8rem;
        margin: 0.3rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
    }

    .example-tag:hover {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }

    #search-form button {
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        background-color: var(--color-primary);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    #search-form button:hover {
        background-color: var(--color-primary-hover);
    }

    #search-form button:disabled {
        background-color: var(--text-muted);
        cursor: not-allowed;
    }

    #playlist-form button {
        background-color: var(--color-success) !important;
    }

    #playlist-form button:hover {
        background-color: var(--color-success-hover) !important;
    }
    
    .loading-spinner {
        text-align: center;
        padding: 2rem;
        font-size: 1.2rem;
        color: var(--text-muted);
    }

    .error-message {
        background: var(--status-failure-bg);
        color: var(--status-failure-text);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<section>
    <header class="page-header">
        <h1>AudioMuse-AI - Text Search</h1>
        <p>Find music using natural language descriptions - use music terms for better results.</p>
    </header>

    {% if not clap_enabled %}
    <div class="error-message">
        <strong>⚠️ CLAP Text Search is disabled.</strong>
        <p>To enable, set <code>CLAP_ENABLED=true</code> in your environment and ensure the CLAP model is available.</p>
    </div>
    {% else %}
    
    {% if cache_stats.loaded %}
    <div class="cache-stats">
        <strong>✓ DCLAP Search Ready</strong> | 
        <strong>{{ cache_stats.song_count }}</strong> songs indexed | 
        {{ cache_stats.memory_mb }} MB in memory
    </div>
    {% else %}
    <div class="error-message">
        <strong>⚠️ No CLAP embeddings found.</strong>
        <p>Please run song analysis first to generate CLAP embeddings for text search.</p>
    </div>
    {% endif %}
    
    <div class="search-container">
        <form id="search-form">
            <div class="param-group">
                <label for="search-query" class="label-with-tooltip">
                    Search Query:
                    <span class="info-tooltip" tabindex="0">
                        <span class="info-icon"></span>
                        <span class="tooltip-text">Describe the music you want to find using music terms. This functionality perform well with mood, genre and instrument.</span>
                    </span>
                </label>
                <input 
                    type="text" 
                    id="search-query" 
                    name="query" 
                    class="search-box"
                    placeholder="e.g., Energertic POP song with femlace voice, Sax Jazz"
                    autocomplete="off"
                    required
                    {% if not cache_stats.loaded %}disabled{% endif %}
                >
            </div>
            
            <div class="param-group">
                <label for="limit" class="label-with-tooltip">
                    Number of results:
                    <span class="info-tooltip" tabindex="0">
                        <span class="info-icon"></span>
                        <span class="tooltip-text">Maximum number of matching songs to return (1-500).</span>
                    </span>
                </label>
                <input type="number" id="limit" name="limit" value="50" min="1" max="500">
            </div>
            
            <button type="submit" {% if not cache_stats.loaded %}disabled{% endif %}>
                🔍 Search
            </button>
        </form>
        
        <div class="example-queries">
            <h3>💡 Top Recommended Searches:</h3>
            <div id="top-queries-container">
                <span style="color: var(--text-muted);">Loading recommendations...</span>
            </div>
        </div>
    </div>
    
    {% endif %}
</section>

<section id="results-container" class="hidden">
    <h2>Search Results</h2>
    <div id="result-count" style="margin-bottom: 1rem; font-weight: 600;"></div>
    <div id="results-list"></div>
</section>

<section id="playlist-creator" class="hidden">
    <h3>Create a Playlist from Results</h3>
    <form id="playlist-form">
        <div class="param-group">
            <label for="playlist_name">Playlist Name:</label>
            <input type="text" id="playlist_name" name="playlist_name" placeholder="My DCLAP Search Playlist" required>
        </div>
        <button type="submit">Create Playlist on Media Server</button>
    </form>
    <div id="playlist-status"></div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchForm = document.getElementById('search-form');
    const searchQuery = document.getElementById('search-query');
    const resultsContainer = document.getElementById('results-container');
    const resultsList = document.getElementById('results-list');
    const resultCount = document.getElementById('result-count');
    const playlistCreator = document.getElementById('playlist-creator');
    const playlistForm = document.getElementById('playlist-form');
    const topQueriesContainer = document.getElementById('top-queries-container');
    
    let currentResults = [];
    
    // Warmup model on page load for instant searches
    warmupModel();
    
    // Load top queries on page load
    loadTopQueries();
    
    async function warmupModel() {
        try {
            console.log('Warming up CLAP model...');
            const response = await fetch("{{ url_for('clap_search_bp.warmup_model_api') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });
            const data = await response.json();
            if (data.loaded) {
                console.log(`✓ Model warmed up (expires in ${data.expiry_seconds}s)`);
            }
        } catch (error) {
            console.error('Failed to warmup model:', error);
        }
    }
    
    async function loadTopQueries() {
        try {
            const response = await fetch("{{ url_for('clap_search_bp.top_queries_api') }}");
            const data = await response.json();
            
            if (response.ok && data.ready && data.queries && data.queries.length > 0) {
                // Queries are ready - display them
                topQueriesContainer.innerHTML = '';
                data.queries.forEach(query => {
                    const tag = document.createElement('span');
                    tag.className = 'example-tag';
                    tag.setAttribute('data-query', query);
                    tag.textContent = query;
                    tag.addEventListener('click', function() {
                        searchQuery.value = query;
                        searchForm.dispatchEvent(new Event('submit'));
                    });
                    topQueriesContainer.appendChild(tag);
                });
            } else if (response.ok && !data.ready) {
                // Still computing in background
                topQueriesContainer.innerHTML = '<span style="color: var(--text-muted);">Loading recommendations...</span>';
                // Retry after 5 seconds
                setTimeout(loadTopQueries, 5000);
            } else {
                topQueriesContainer.innerHTML = '<span style="color: var(--text-muted);">No recommendations available</span>';
            }
        } catch (error) {
            console.error('Failed to load top queries:', error);
            topQueriesContainer.innerHTML = '<span style="color: var(--text-muted);">Failed to load recommendations</span>';
        }
    }
    
    // Example query tags (kept for backwards compatibility, but replaced by loadTopQueries)
    document.querySelectorAll('.example-tag').forEach(tag => {
        tag.addEventListener('click', function() {
            const query = this.getAttribute('data-query');
            searchQuery.value = query;
            searchForm.dispatchEvent(new Event('submit'));
        });
    });
    
    // Search form submission
    searchForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const query = searchQuery.value.trim();
        const limit = parseInt(document.getElementById('limit').value);
        
        if (!query || query.length < 1) {
            alert('Please enter at least 1 character');
            return;
        }
        
        // Show loading
        resultsContainer.classList.remove('hidden');
        resultsList.innerHTML = '<div class="loading-spinner">🔍 Searching...</div>';
        playlistCreator.classList.add('hidden');
        
        try {
            const response = await fetch("{{ url_for('clap_search_bp.clap_search_api') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ query, limit })
            });
            
            const data = await response.json();
            
            if (!response.ok) {
                throw new Error(data.error || 'Search failed');
            }
            
            currentResults = data.results || [];
            displayResults(currentResults, query);
            
        } catch (error) {
            resultsList.innerHTML = `<div class="error-message">❌ ${error.message}</div>`;
        }
    });
    
    function displayResults(results, query) {
        if (results.length === 0) {
            resultsList.innerHTML = '<p>No results found. Try a different query.</p>';
            resultCount.textContent = '';
            return;
        }
        
        resultCount.textContent = `Found ${results.length} matches for "${query}"`;

        resultsList.innerHTML = renderSongList(results, { metric: songSimilarityBadge });

        // Show playlist creator
        playlistCreator.classList.remove('hidden');
    }
    
    // Playlist creation
    playlistForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const playlistStatusDiv = document.getElementById('playlist-status');
        playlistStatusDiv.className = '';
        
        if (currentResults.length === 0) {
            playlistStatusDiv.textContent = 'No results to create playlist from';
            playlistStatusDiv.className = 'status-error';
            return;
        }
        
        const playlistName = document.getElementById('playlist_name').value.trim();
        if (!playlistName) {
            playlistStatusDiv.textContent = 'Please enter a playlist name';
            playlistStatusDiv.className = 'status-error';
            return;
        }
        
        const trackIds = currentResults.map(r => r.item_id);
        playlistStatusDiv.textContent = 'Creating playlist...';
        
        try {
            const response = await fetch("{{ url_for('voyager_bp.create_media_server_playlist') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    playlist_name: playlistName,
                    track_ids: trackIds
                })
            });
            
            const data = await response.json();
            
            if (!response.ok) throw new Error(data.error || `HTTP error! status: ${response.status}`);
            playlistStatusDiv.textContent = data.message;
            playlistStatusDiv.className = 'status-success';
        } catch (error) {
            playlistStatusDiv.textContent = `Error: ${error.message}`;
            playlistStatusDiv.className = 'status-error';
            console.error('Playlist creation error:', error);
        }
    });
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
});
</script>
<script src="{{ url_for('static', filename='menu.js') }}"></script>
{% endblock %}