mirror of
https://github.com/agentscope-ai/ReMe.git
synced 2026-08-28 05:25:04 +00:00
add experience library pages
This commit is contained in:
鸣山
parent
fef4f8015d
commit
fc95d1e597
1 changed files with 671 additions and 0 deletions
671
docs/index.html
Normal file
671
docs/index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue