From fc95d1e59756a2117645e045306eb427fc9cc058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B8=A3=E5=B1=B1?= <dengjiaji.djj@antgroup.com>
Date: Mon, 28 Jul 2025 13:03:23 +0800
Subject: [PATCH] add experience library pages

---
 docs/index.html | 671 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 671 insertions(+)
 create mode 100644 docs/index.html
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..a58866ef
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,671 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ExperienceMaker - Experience Library</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+        .library-card, .experience-card {
+            transition: all 0.3s ease;
+            border-left: 4px solid transparent;
+        }
+        .library-card:hover, .experience-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+            border-left-color: #3b82f6;
+            cursor: pointer;
+        }
+        .tag-chip {
+            transition: all 0.2s ease;
+        }
+        .tag-chip:hover {
+            transform: scale(1.05);
+        }
+        .tag-chip.active {
+            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+            color: white;
+        }
+        .loading-spinner {
+            border: 3px solid #f3f4f6;
+            border-top: 3px solid #3b82f6;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .back-button {
+            transition: all 0.2s ease;
+        }
+        .back-button:hover {
+            transform: translateX(-2px);
+        }
+        .truncate-text {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .experience-detail {
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header class="gradient-bg text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="text-center">
+                <h1 class="text-4xl font-bold mb-4">
+                    <i class="fas fa-brain mr-3"></i>ExperienceMaker
+                </h1>
+                <p class="text-xl opacity-90" id="header-subtitle">Empowering agents to learn from the past and excel in the future</p>
+                <div class="mt-6 flex justify-center items-center space-x-4 text-sm">
+                    <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full">
+                        <i class="fas fa-database mr-1"></i>
+                        <span id="total-experiences">Loading...</span> Experiences
+                    </span>
+                    <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full">
+                        <i class="fas fa-tags mr-1"></i>
+                        <span id="total-libraries">Loading...</span> Libraries
+                    </span>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Navigation Breadcrumb -->
+    <div id="breadcrumb" class="bg-white shadow-sm py-3 hidden">
+        <div class="container mx-auto px-6">
+            <button id="back-button" class="back-button flex items-center text-blue-600 hover:text-blue-800">
+                <i class="fas fa-arrow-left mr-2"></i>
+                <span>Back to Libraries</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-6 py-8">
+        <!-- Search and Filter Section -->
+        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
+            <div class="flex flex-col lg:flex-row gap-4 items-center">
+                <!-- Search Input -->
+                <div class="flex-1 relative">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                    <input
+                        id="search-input"
+                        type="text"
+                        placeholder="Search libraries or experiences..."
+                        class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                    >
+                </div>
+                <!-- Clear Button -->
+                <button
+                    id="clear-filters"
+                    class="px-6 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors duration-200"
+                >
+                    <i class="fas fa-times mr-2"></i>Clear All
+                </button>
+            </div>
+        </div>
+
+        <!-- Loading State -->
+        <div id="loading" class="text-center py-12">
+            <div class="loading-spinner mx-auto mb-4"></div>
+            <p class="text-gray-600">Loading experience library...</p>
+        </div>
+
+        <!-- Error State -->
+        <div id="error" class="hidden text-center py-12">
+            <i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
+            <p class="text-gray-600 mb-4">Failed to load experience library</p>
+            <button onclick="loadExperiences()" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
+                Try Again
+            </button>
+        </div>
+
+        <!-- Results Info -->
+        <div id="results-info" class="hidden mb-6">
+            <p class="text-gray-600">
+                Showing <span id="results-count" class="font-semibold text-blue-600">0</span>
+                of <span id="total-count" class="font-semibold">0</span> <span id="results-type">items</span>
+            </p>
+        </div>
+
+        <!-- Libraries Grid (Default View) -->
+        <div id="libraries-container" class="hidden grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <!-- Library cards will be dynamically inserted here -->
+        </div>
+
+        <!-- Experiences Grid (Library Detail View) -->
+        <div id="experiences-container" class="hidden grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <!-- Experience cards will be dynamically inserted here -->
+        </div>
+
+        <!-- No Results -->
+        <div id="no-results" class="hidden text-center py-12">
+            <i class="fas fa-search text-gray-300 text-4xl mb-4"></i>
+            <p class="text-gray-600 mb-2">No results found</p>
+            <p class="text-gray-400 text-sm">Try adjusting your search criteria</p>
+        </div>
+    </main>
+
+    <!-- Experience Detail Modal -->
+    <div id="experience-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
+        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full experience-detail">
+            <div class="p-6">
+                <!-- Modal Header -->
+                <div class="flex items-start justify-between mb-6">
+                    <div>
+                        <h2 class="text-2xl font-bold text-gray-900 mb-2">Experience Details</h2>
+                        <div class="flex items-center space-x-2">
+                            <span id="modal-library" class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full"></span>
+                            <span id="modal-score" class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full hidden"></span>
+                        </div>
+                    </div>
+                    <button id="close-modal" class="text-gray-400 hover:text-gray-600 text-2xl">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+
+                <!-- Modal Content -->
+                <div class="space-y-6">
+                    <!-- When to use -->
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
+                            <i class="fas fa-compass mr-2 text-blue-500"></i>When to use
+                        </h3>
+                        <p id="modal-when-to-use" class="text-gray-700 leading-relaxed bg-blue-50 p-4 rounded-lg"></p>
+                    </div>
+
+                    <!-- Experience Content -->
+                    <div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
+                            <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>Experience
+                        </h3>
+                        <p id="modal-content" class="text-gray-700 leading-relaxed bg-yellow-50 p-4 rounded-lg"></p>
+                    </div>
+
+                    <!-- Metadata -->
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
+                            <i class="fas fa-info-circle mr-2 text-gray-500"></i>Metadata
+                        </h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                            <div>
+                                <span class="font-medium text-gray-600">Author:</span>
+                                <span id="modal-author" class="ml-2 text-gray-800"></span>
+                            </div>
+                            <div>
+                                <span class="font-medium text-gray-600">Created:</span>
+                                <span id="modal-created" class="ml-2 text-gray-800"></span>
+                            </div>
+                            <div>
+                                <span class="font-medium text-gray-600">Experience ID:</span>
+                                <span id="modal-id" class="ml-2 text-gray-800 font-mono text-xs"></span>
+                            </div>
+                            <div>
+                                <span class="font-medium text-gray-600">Workspace:</span>
+                                <span id="modal-workspace" class="ml-2 text-gray-800"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Modal Footer -->
+                <div class="mt-8 flex justify-end">
+                    <button id="close-modal-btn" class="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bg-white border-t border-gray-200 py-8 mt-16">
+        <div class="container mx-auto px-6 text-center text-gray-600">
+            <p>
+                <i class="fas fa-code mr-2"></i>
+                Built for AI agent experience generation and reuse •
+                <a href="https://github.com/modelscope/ExperienceMaker" class="text-blue-500 hover:text-blue-600">
+                    View on GitHub
+                </a>
+            </p>
+        </div>
+    </footer>
+
+    <script>
+        let allExperiences = [];
+        let librariesData = {};
+        let currentView = 'libraries'; // 'libraries' or 'experiences'
+        let currentLibrary = null;
+
+        // GitHub API configuration
+        const GITHUB_USER = 'modelscope';
+        const REPO_NAME = 'ExperienceMaker';
+        const EXPERIENCE_FOLDER = 'experience_library';
+
+        // DOM elements
+        const loadingEl = document.getElementById('loading');
+        const errorEl = document.getElementById('error');
+        const resultsInfoEl = document.getElementById('results-info');
+        const librariesContainer = document.getElementById('libraries-container');
+        const experiencesContainer = document.getElementById('experiences-container');
+        const noResultsEl = document.getElementById('no-results');
+        const searchInput = document.getElementById('search-input');
+        const clearFiltersBtn = document.getElementById('clear-filters');
+        const totalExperiencesEl = document.getElementById('total-experiences');
+        const totalLibrariesEl = document.getElementById('total-libraries');
+        const resultsCountEl = document.getElementById('results-count');
+        const totalCountEl = document.getElementById('total-count');
+        const resultsTypeEl = document.getElementById('results-type');
+        const breadcrumbEl = document.getElementById('breadcrumb');
+        const backButtonEl = document.getElementById('back-button');
+        const headerSubtitleEl = document.getElementById('header-subtitle');
+
+        // Modal elements
+        const experienceModal = document.getElementById('experience-modal');
+        const closeModalBtn = document.getElementById('close-modal');
+        const closeModalBtnFooter = document.getElementById('close-modal-btn');
+
+        // Load experiences on page load
+        document.addEventListener('DOMContentLoaded', loadExperiences);
+
+        // Event listeners
+        searchInput.addEventListener('input', debounce(handleSearch, 300));
+        clearFiltersBtn.addEventListener('click', clearAllFilters);
+        backButtonEl.addEventListener('click', showLibrariesView);
+        closeModalBtn.addEventListener('click', closeModal);
+        closeModalBtnFooter.addEventListener('click', closeModal);
+        experienceModal.addEventListener('click', (e) => {
+            if (e.target === experienceModal) closeModal();
+        });
+
+        async function loadExperiences() {
+            try {
+                showLoading();
+
+                const baseUrl = `https://raw.githubusercontent.com/${GITHUB_USER}/${REPO_NAME}/main/${EXPERIENCE_FOLDER}`;
+
+                const knownFiles = [
+                    'appworld_v1.jsonl',
+                    // 在这里添加你的其他 JSONL 文件名
+                ];
+
+                console.log('开始加载经验库文件...');
+
+                const experiencePromises = knownFiles.map(async (fileName) => {
+                    try {
+                        const fileUrl = `${baseUrl}/${fileName}`;
+                        console.log(`加载文件: ${fileUrl}`);
+
+                        const fileResponse = await fetch(fileUrl);
+
+                        if (!fileResponse.ok) {
+                            console.warn(`文件 ${fileName} 加载失败: ${fileResponse.status}`);
+                            return [];
+                        }
+
+                        const content = await fileResponse.text();
+                        console.log(`文件 ${fileName} 加载成功, 大小: ${content.length} 字符`);
+
+                        const experiences = content
+                            .split('\n')
+                            .filter(line => line.trim())
+                            .map(line => {
+                                try {
+                                    const experience = JSON.parse(line);
+                                    experience._library = fileName.replace('.jsonl', '');
+                                    return experience;
+                                } catch (e) {
+                                    console.warn('解析失败的行:', line.substring(0, 100));
+                                    return null;
+                                }
+                            })
+                            .filter(exp => exp !== null);
+
+                        console.log(`文件 ${fileName} 解析出 ${experiences.length} 条经验`);
+                        return experiences;
+
+                    } catch (error) {
+                        console.error(`加载文件 ${fileName} 时出错:`, error);
+                        return [];
+                    }
+                });
+
+                const experienceArrays = await Promise.all(experiencePromises);
+                allExperiences = experienceArrays.flat();
+
+                console.log(`总共加载了 ${allExperiences.length} 条经验`);
+
+                if (allExperiences.length === 0) {
+                    throw new Error('没有成功加载任何经验数据');
+                }
+
+                // Group experiences by library
+                librariesData = allExperiences.reduce((acc, exp) => {
+                    const libName = exp._library;
+                    if (!acc[libName]) {
+                        acc[libName] = [];
+                    }
+                    acc[libName].push(exp);
+                    return acc;
+                }, {});
+
+                // Update stats
+                totalExperiencesEl.textContent = allExperiences.length;
+                totalLibrariesEl.textContent = Object.keys(librariesData).length;
+
+                // Show libraries view
+                showLibrariesView();
+                hideLoading();
+
+            } catch (error) {
+                console.error('Error loading experiences:', error);
+                showError();
+            }
+        }
+
+        function showLibrariesView() {
+            currentView = 'libraries';
+            currentLibrary = null;
+            breadcrumbEl.classList.add('hidden');
+            headerSubtitleEl.textContent = 'Empowering agents to learn from the past and excel in the future';
+            searchInput.placeholder = 'Search libraries...';
+
+            displayLibraries();
+        }
+
+        function showExperiencesView(libraryName) {
+            currentView = 'experiences';
+            currentLibrary = libraryName;
+            breadcrumbEl.classList.remove('hidden');
+            headerSubtitleEl.textContent = `Exploring ${libraryName} experience library`;
+            searchInput.placeholder = 'Search experiences in this library...';
+
+            displayExperiences(librariesData[libraryName]);
+        }
+
+        function displayLibraries(filteredLibraries = null) {
+            const libraries = filteredLibraries || Object.keys(librariesData);
+
+            if (libraries.length === 0) {
+                showNoResults();
+                return;
+            }
+
+            librariesContainer.innerHTML = libraries.map(libName => {
+                const experiences = librariesData[libName];
+                const sampleExp = experiences[0];
+
+                return `
+                    <div class="library-card bg-white rounded-lg shadow-sm p-6 fade-in"
+                         onclick="showExperiencesView('${libName}')">
+                        <!-- Header -->
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                                    <i class="fas fa-database text-white text-xl"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-lg font-semibold text-gray-900">${libName}</h3>
+                                    <p class="text-sm text-gray-500">${experiences.length} experiences</p>
+                                </div>
+                            </div>
+                            <i class="fas fa-chevron-right text-gray-400"></i>
+                        </div>
+
+                        <!-- Sample Content -->
+                        <div class="mb-4">
+                            <h4 class="text-sm font-medium text-gray-700 mb-2">Sample Experience:</h4>
+                            <p class="text-gray-600 text-sm leading-relaxed truncate-text">
+                                ${truncateText(sampleExp.when_to_use || sampleExp.content || 'No description available', 120)}
+                            </p>
+                        </div>
+
+                        <!-- Stats -->
+                        <div class="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-100">
+                            <span>
+                                <i class="fas fa-user mr-1"></i>
+                                ${sampleExp.metadata?.author || 'Unknown'}
+                            </span>
+                            <span>
+                                <i class="fas fa-lightbulb mr-1"></i>
+                                ${experiences.length} insights
+                            </span>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            showResults('libraries');
+            resultsCountEl.textContent = libraries.length;
+            totalCountEl.textContent = Object.keys(librariesData).length;
+        }
+
+        function displayExperiences(experiences) {
+            if (experiences.length === 0) {
+                showNoResults();
+                return;
+            }
+
+            experiencesContainer.innerHTML = experiences.map((experience, index) => `
+                <div class="experience-card bg-white rounded-lg shadow-sm p-6 fade-in"
+                     onclick="showExperienceDetail('${currentLibrary}', ${index})">
+                    <!-- Header -->
+                    <div class="flex items-start justify-between mb-4">
+                        <div class="flex items-center space-x-2">
+                            <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
+                                ${experience._library}
+                            </span>
+                            ${experience.score ? `
+                                <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
+                                    Score: ${experience.score}
+                                </span>
+                            ` : ''}
+                        </div>
+                        <i class="fas fa-eye text-gray-400"></i>
+                    </div>
+
+                    <!-- When to use -->
+                    <div class="mb-4">
+                        <h3 class="text-sm font-semibold text-gray-700 mb-2">
+                            <i class="fas fa-compass mr-1"></i>When to use:
+                        </h3>
+                        <p class="text-gray-600 text-sm leading-relaxed truncate-text">
+                            ${truncateText(experience.when_to_use || 'No specific guidance provided', 100)}
+                        </p>
+                    </div>
+
+                    <!-- Content Preview -->
+                    <div class="mb-4">
+                        <h3 class="text-sm font-semibold text-gray-700 mb-2">
+                            <i class="fas fa-quote-left mr-1"></i>Experience:
+                        </h3>
+                        <p class="text-gray-800 text-sm leading-relaxed truncate-text">
+                            ${truncateText(experience.content || 'No content available', 150)}
+                        </p>
+                    </div>
+
+                    <!-- Footer -->
+                    <div class="flex items-center justify-between text-xs text-gray-500 pt-4 border-t border-gray-100">
+                        <div class="flex items-center space-x-4">
+                            <span>
+                                <i class="fas fa-user mr-1"></i>
+                                ${experience.metadata?.author || 'Unknown'}
+                            </span>
+                        </div>
+                        <span class="text-blue-500 font-medium">
+                            Click to view details <i class="fas fa-arrow-right ml-1"></i>
+                        </span>
+                    </div>
+                </div>
+            `).join('');
+
+            showResults('experiences');
+            resultsCountEl.textContent = experiences.length;
+            totalCountEl.textContent = experiences.length;
+        }
+
+        function showExperienceDetail(libraryName, index) {
+            const experience = librariesData[libraryName][index];
+
+            // Populate modal content
+            document.getElementById('modal-library').textContent = experience._library;
+            document.getElementById('modal-when-to-use').textContent = experience.when_to_use || 'No specific guidance provided';
+            document.getElementById('modal-content').textContent = experience.content || 'No content available';
+            document.getElementById('modal-author').textContent = experience.metadata?.author || 'Unknown';
+            document.getElementById('modal-created').textContent = experience.metadata?.created_time ?
+                new Date(experience.metadata.created_time).toLocaleDateString() : 'Unknown';
+            document.getElementById('modal-id').textContent = experience.experience_id || 'N/A';
+            document.getElementById('modal-workspace').textContent = experience.workspace_id || 'N/A';
+
+            // Show/hide score
+            const scoreEl = document.getElementById('modal-score');
+            if (experience.score) {
+                scoreEl.textContent = `Score: ${experience.score}`;
+                scoreEl.classList.remove('hidden');
+            } else {
+                scoreEl.classList.add('hidden');
+            }
+
+            // Show modal
+            experienceModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeModal() {
+            experienceModal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        }
+
+        function handleSearch() {
+            const searchTerm = searchInput.value.toLowerCase().trim();
+
+            if (currentView === 'libraries') {
+                if (!searchTerm) {
+                    displayLibraries();
+                    return;
+                }
+
+                const filteredLibraries = Object.keys(librariesData).filter(libName => {
+                    const library = librariesData[libName];
+                    return libName.toLowerCase().includes(searchTerm) ||
+                           library.some(exp =>
+                               (exp.when_to_use || '').toLowerCase().includes(searchTerm) ||
+                               (exp.content || '').toLowerCase().includes(searchTerm)
+                           );
+                });
+
+                displayLibraries(filteredLibraries);
+            } else {
+                const experiences = librariesData[currentLibrary];
+                if (!searchTerm) {
+                    displayExperiences(experiences);
+                    return;
+                }
+
+                const filteredExperiences = experiences.filter(exp =>
+                    (exp.when_to_use || '').toLowerCase().includes(searchTerm) ||
+                    (exp.content || '').toLowerCase().includes(searchTerm) ||
+                    (exp.metadata?.author || '').toLowerCase().includes(searchTerm)
+                );
+
+                displayExperiences(filteredExperiences);
+            }
+        }
+
+        function clearAllFilters() {
+            searchInput.value = '';
+            if (currentView === 'libraries') {
+                displayLibraries();
+            } else {
+                displayExperiences(librariesData[currentLibrary]);
+            }
+        }
+
+        function truncateText(text, maxLength) {
+            if (text.length <= maxLength) return text;
+            return text.substring(0, maxLength) + '...';
+        }
+
+        // Utility functions
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+
+        // UI state management
+        function showLoading() {
+            loadingEl.classList.remove('hidden');
+            errorEl.classList.add('hidden');
+            resultsInfoEl.classList.add('hidden');
+            librariesContainer.classList.add('hidden');
+            experiencesContainer.classList.add('hidden');
+            noResultsEl.classList.add('hidden');
+        }
+
+        function hideLoading() {
+            loadingEl.classList.add('hidden');
+        }
+
+        function showError() {
+            loadingEl.classList.add('hidden');
+            errorEl.classList.remove('hidden');
+            resultsInfoEl.classList.add('hidden');
+            librariesContainer.classList.add('hidden');
+            experiencesContainer.classList.add('hidden');
+            noResultsEl.classList.add('hidden');
+        }
+
+        function showResults(type) {
+            resultsInfoEl.classList.remove('hidden');
+            noResultsEl.classList.add('hidden');
+
+            if (type === 'libraries') {
+                librariesContainer.classList.remove('hidden');
+                experiencesContainer.classList.add('hidden');
+                resultsTypeEl.textContent = 'libraries';
+            } else {
+                librariesContainer.classList.add('hidden');
+                experiencesContainer.classList.remove('hidden');
+                resultsTypeEl.textContent = 'experiences';
+            }
+        }
+
+        function showNoResults() {
+            resultsInfoEl.classList.add('hidden');
+            librariesContainer.classList.add('hidden');
+            experiencesContainer.classList.add('hidden');
+            noResultsEl.classList.remove('hidden');
+        }
+    </script>
+</body>
+</html>

No results found