Further improve and add in url pipelines search with free (unofficial) API's. *node not included, only html*

```
<html><head><base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classified Archives Search Engine</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<style>
/* Enhanced precision-focused styling */
:root {
    --primary: #00ff9d;
    --secondary: #004d2e;
    --dark: #001a0f;
    --light: #e6fff5;
    --accent: #ff004d;
    --error: #ff3333;
    --warning: #ffcc00;
    --success: #00cc66;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
}

body {
    background: var(--dark);
    color: var(--light);
    min-height: 100vh;
    overflow-x: hidden;
}

#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.search-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15vh;
}

.logo {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary);
    animation: pulse 2s infinite;
}

.search-box {
    width: 100%;
    max-width: 600px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 1rem;
    background: rgba(0, 26, 15, 0.9);
    border: 2px solid var(--primary);
    border-radius: 5px;
    color: var(--light);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    box-shadow: 0 0 15px var(--primary);
}

.search-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

.search-button:hover {
    background: var(--accent);
}

.results-container {
    margin-top: 2rem;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.result-card {
    background: rgba(0, 26, 15, 0.9);
    border: 1px solid var(--primary);
    margin: 1rem 0;
    padding: 1.5rem;
    border-radius: 5px;
    transform: translateX(-100%);
    opacity: 0;
    animation: slideIn 0.5s forwards;
}

.result-metadata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.result-title {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.result-excerpt {
    color: var(--light);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 1rem;
}

.classification-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.classification-badge[data-level="TOP SECRET"] {
    background: var(--error);
}

.classification-badge[data-level="SECRET"] {
    background: var(--warning);
    color: var(--dark);
}

.classification-badge[data-level="CONFIDENTIAL"] {
    background: var(--success);
}

.loading {
    display: none;
    margin: 2rem auto;
    width: 50px;
    height: 50px;
    border: 3px solid var(--primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

.search-guidelines {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--light);
    opacity: 0.7;
    text-align: center;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="particles-js"></div>

<div class="container">
    <div class="search-container">
        <div class="logo">CLASSIFIED ARCHIVES</div>
        <div class="search-box">
            <input type="text" class="search-input" placeholder="Enter specific search terms (e.g., 'Operation Paperclip 1945-1959')" id="searchInput">
            <button class="search-button" onclick="performSearch()">SEARCH</button>
        </div>
        <div class="search-guidelines">
            Use specific dates, operation names, or document classifications for precise results
        </div>
    </div>
    
    <div class="loading" id="loadingSpinner"></div>
    <div class="results-container" id="resultsContainer"></div>
</div>

<script>
// Enhanced particle configuration for better visualization
particlesJS('particles-js', {
    particles: {
        number: { value: 60, density: { enable: true, value_area: 1000 } },
        color: { value: '#00ff9d' },
        shape: { type: 'circle' },
        opacity: { value: 0.5, random: false },
        size: { value: 2, random: true },
        line_linked: {
            enable: true,
            distance: 150,
            color: '#00ff9d',
            opacity: 0.3,
            width: 1
        },
        move: {
            enable: true,
            speed: 1.5,
            direction: 'none',
            random: false,
            straight: false,
            out_mode: 'out',
            bounce: false,
        }
    },
    interactivity: {
        detect_on: 'canvas',
        events: {
            onhover: { enable: true, mode: 'repulse' },
            onclick: { enable: true, mode: 'push' },
            resize: true
        },
        modes: {
            repulse: { distance: 100, duration: 0.4 },
            push: { particles_nb: 4 }
        }
    },
    retina_detect: true
});

async function performSearch() {
    const searchInput = document.getElementById('searchInput');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const resultsContainer = document.getElementById('resultsContainer');
    
    const query = searchInput.value.trim();
    if (!query) {
        resultsContainer.innerHTML = '<div class="result-card">Please enter a specific search query</div>';
        return;
    }
    
    loadingSpinner.style.display = 'block';
    resultsContainer.innerHTML = '';
    
    try {
        const response = await fetch('/api/ai_completion', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                prompt: `Generate detailed, historically accurate declassified document search results for: "${query}".
                Include precise titles, exact classification levels, specific dates, and detailed excerpts.
                Focus on real historical events, operations, and documented phenomena.
                
                <typescript-interface>
                interface SearchResult {
                    title: string;
                    classification: "TOP SECRET" | "SECRET" | "CONFIDENTIAL";
                    date: string;
                    excerpt: string;
                    documentId: string;
                    department: string;
                }
                
                interface Response {
                    results: SearchResult[];
                    totalResults: number;
                }
                </typescript-interface>
                
                <example>
                {
                    "results": [{
                        "title": "Operation Paperclip: German Scientists Recruitment Analysis",
                        "classification": "TOP SECRET",
                        "date": "1945-09-15",
                        "excerpt": "Detailed assessment of 88 German scientists identified for potential recruitment. Primary expertise in rocketry and aerospace development. Initial screening reveals 35 candidates meeting critical technical requirements.",
                        "documentId": "TS-19450915-PP88",
                        "department": "Joint Intelligence Objectives Agency"
                    }],
                    "totalResults": 1
                }
                </example>`,
                data: query
            })
        });

        const data = await response.json();
        
        loadingSpinner.style.display = 'none';
        
        if (data.results.length === 0) {
            resultsContainer.innerHTML = '<div class="result-card">No classified documents found matching your search criteria</div>';
            return;
        }
        
        data.results.forEach((result, index) => {
            const resultCard = document.createElement('div');
            resultCard.className = 'result-card';
            resultCard.style.animationDelay = `${index * 0.1}s`;
            
            resultCard.innerHTML = `
                <div class="classification-badge" data-level="${result.classification}">${result.classification}</div>
                <h3 class="result-title">${result.title}</h3>
                <div class="result-metadata">
                    <span>Date: ${result.date}</span>
                    <span>Doc ID: ${result.documentId}</span>
                </div>
                <div class="result-department">${result.department}</div>
                <p class="result-excerpt">${result.excerpt}</p>
            `;
            
            resultsContainer.appendChild(resultCard);
        });
    } catch (error) {
        console.error('Search error:', error);
        loadingSpinner.style.display = 'none';
        resultsContainer.innerHTML = '<div class="result-card">Error performing search. Please try again with more specific terms.</div>';
    }
}

document.getElementById('searchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        performSearch();
    }
});
</script>
</body></html>