Spaces:
Running
Running
// The complete ui.js file with the correct worker URL. | |
// Define the backend URL as a constant for easy access. | |
const BACKEND_URL = 'https://stream-ai-backend.smplushypermedia.workers.dev'; | |
async function loadRecommendations() { | |
const container = document.getElementById('recommendations-container'); | |
if (!container) return; | |
try { | |
// Fetch recommendations from your live backend. | |
const response = await fetch(`${BACKEND_URL}/api/recommendations`); | |
if (!response.ok) { | |
throw new Error(`Network response was not ok. Status: ${response.status}`); | |
} | |
const listings = await response.json(); | |
container.innerHTML = ''; // Clear previous listings | |
if (listings.length === 0) { | |
container.innerHTML = `<p class="text-center col-span-full text-gray-500">No recommendations available yet. Be the first to add one!</p>`; | |
return; | |
} | |
listings.forEach(item => { | |
const card = document.createElement('div'); | |
const pinnedClass = item.is_pinned ? 'border-2 border-indigo-400' : 'shadow-md'; | |
card.className = `stream-card bg-white rounded-lg overflow-hidden hover:shadow-xl transition duration-300 p-4 relative ${pinnedClass}`; | |
card.innerHTML = ` | |
${item.is_pinned ? '<div class="absolute top-2 right-2 text-xs bg-indigo-500 text-white px-2 py-1 rounded-full animate-pulse"><i class="fas fa-thumbtack mr-1"></i> Pinned</div>' : ''} | |
<div class="mb-3"> | |
<h3 class="font-bold text-base">${item.title}</h3> | |
<div class="text-xs text-gray-500 mb-2 mt-1"> | |
From: <span class="font-semibold text-indigo-600">${item.source_name}</span> | |
</div> | |
</div> | |
<p class="text-gray-700 text-sm mb-4">${item.description || ''}</p> | |
<div class="flex justify-between items-center mt-auto"> | |
<span class="text-xs font-bold uppercase text-gray-400">${(item.category || '').replace('_', ' ')}</span> | |
<a href="${item.url}" target="_blank" rel="noopener noreferrer" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition"> | |
Visit Site | |
</a> | |
</div> | |
`; | |
container.appendChild(card); | |
}); | |
} catch (error) { | |
console.error("Failed to load recommendations:", error); | |
if (container) { | |
container.innerHTML = `<p class="text-center col-span-full text-red-500">Could not load recommendations. Please ensure the backend is running and the URL is correct.</p>`; | |
} | |
} | |
} | |
export function initUI() { | |
// This will run our function on page load to populate the recommendations. | |
loadRecommendations(); | |
} |