mirror of
https://github.com/agentscope-ai/ReMe.git
synced 2026-08-28 05:25:04 +00:00
671 lines
29 KiB
HTML
671 lines
29 KiB
HTML
<!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>
|