Hugging Face's logo

Spaces:
ranga23127
/
ranganewspacecircle
Running

App Files Community
ranganewspacecircle / index.html
ranga23127's picture
ranga23127
Add 2 files
3fb2e61 verified
raw
history blame contribute delete
43.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visual Search Tool</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.canvas-container {
position: relative;
display: inline-block;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border-radius: 0.5rem;
overflow: hidden;
background-color: #f3f4f6;
}
#drawingCanvas {
position: absolute;
top: 0;
left: 0;
pointer-events: auto;
}
.selection-circle {
position: absolute;
border: 2px dashed #3B82F6;
border-radius: 50%;
background-color: rgba(59, 130, 246, 0.2);
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.selection-circle:hover {
background-color: rgba(59, 130, 246, 0.3);
transform: scale(1.02);
}
.selection-circle.active {
border: 2px solid #EF4444;
background-color: rgba(239, 68, 68, 0.3);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(239, 68, 68, 0.2);
}
#mediaElement {
max-width: 100%;
max-height: 80vh;
display: block;
}
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
pointer-events: none;
z-index: 100;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transform: translateY(-10px);
opacity: 0;
transition: all 0.2s ease;
}
.tooltip.show {
transform: translateY(0);
opacity: 1;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.8);
bottom: -6px;
left: 50%;
transform: translateX(-50%);
}
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.search-results {
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #3B82F6 #f1f1f1;
}
.search-results::-webkit-scrollbar {
width: 8px;
}
.search-results::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.search-results::-webkit-scrollbar-thumb {
background-color: #3B82F6;
border-radius: 10px;
}
.result-item {
transition: all 0.2s;
}
.result-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.search-tag {
display: inline-block;
background-color: #EFF6FF;
color: #1D4ED8;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
margin-right: 4px;
margin-bottom: 4px;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-blue-600 mb-2">Visual Search Tool</h1>
<p class="text-gray-600">Draw circles around objects to find similar items online</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<div class="flex flex-wrap gap-4 mb-6">
<div class="flex-1">
<label class="block text-sm font-medium text-gray-700 mb-1">Media Source</label>
<div class="flex gap-2">
<select id="mediaType" class="flex-1 rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2">
<option value="image">Image</option>
<option value="video">Video</option>
</select>
<input type="file" id="fileInput" accept="image/*,video/*" class="hidden">
<button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition flex items-center">
<i class="fas fa-upload mr-2"></i>Upload
</button>
</div>
</div>
<div class="flex-1">
<label class="block text-sm font-medium text-gray-700 mb-1">Or use sample</label>
<select id="sampleSelect" class="w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2">
<option value="">Select a sample...</option>
<option value="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=800">Food Sample</option>
<option value="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=800">Electronics Sample</option>
<option value="https://images.unsplash.com/photo-1524805444758-089113d48a6d?w=800">Watch Sample</option>
<option value="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?w=800">Clothing Sample</option>
</select>
</div>
</div>
<div class="flex justify-center mb-4">
<div class="canvas-container">
<img id="mediaElement" src="" alt="Selected media" class="hidden">
<video id="videoElement" controls class="hidden"></video>
<canvas id="drawingCanvas"></canvas>
<div id="circlesContainer"></div>
<div id="noMediaPlaceholder" class="flex flex-col items-center justify-center p-8 w-full h-64 text-gray-400">
<i class="fas fa-image text-4xl mb-4"></i>
<p>Upload an image or select a sample to begin</p>
</div>
</div>
</div>
<div class="mt-6 flex flex-wrap justify-center gap-4">
<button id="clearBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i class="fas fa-trash-alt mr-2"></i>Clear Circles
</button>
<button id="searchBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i class="fas fa-search mr-2"></i>Search Selected
</button>
<button id="helpBtn" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-md transition">
<i class="fas fa-question-circle mr-2"></i>Help
</button>
</div>
</div>
<div id="resultsContainer" class="bg-white rounded-lg shadow-lg p-6 hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-gray-800">Search Results</h2>
<div id="searchTags" class="flex flex-wrap">
<!-- Search tags will appear here -->
</div>
</div>
<div id="searchResults" class="search-results grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Results will be inserted here -->
</div>
</div>
<div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">How to use the Visual Search Tool</h3>
<button id="closeHelpModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4 text-gray-700">
<div class="flex items-start gap-3">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
<i class="fas fa-upload"></i>
</div>
<div>
<h4 class="font-semibold">Upload Media</h4>
<p>Click the "Upload" button to select an image or video from your device, or choose from our sample images.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
<i class="fas fa-mouse-pointer"></i>
</div>
<div>
<h4 class="font-semibold">Draw Circles</h4>
<p>Click and drag on the image to draw circles around objects you want to search for. You can create multiple circles.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
<i class="fas fa-search"></i>
</div>
<div>
<h4 class="font-semibold">Search Objects</h4>
<p>Click on a circle to select it (it will turn red), then click "Search Selected" to find similar items online.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
<i class="fas fa-trash-alt"></i>
</div>
<div>
<h4 class="font-semibold">Clear Circles</h4>
<p>Use the "Clear Circles" button to remove all circles from your image and start fresh.</p>
</div>
</div>
</div>
</div>
</div>
<div id="loadingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 max-w-sm w-full text-center">
<div class="flex justify-center mb-4">
<div class="loading-spinner"></div>
</div>
<p class="text-gray-700">Searching for similar items...</p>
<p class="text-sm text-gray-500 mt-2">(Simulating Google Search API)</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM elements
const mediaElement = document.getElementById('mediaElement');
const videoElement = document.getElementById('videoElement');
const drawingCanvas = document.getElementById('drawingCanvas');
const ctx = drawingCanvas.getContext('2d');
const circlesContainer = document.getElementById('circlesContainer');
const noMediaPlaceholder = document.getElementById('noMediaPlaceholder');
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const mediaType = document.getElementById('mediaType');
const sampleSelect = document.getElementById('sampleSelect');
const clearBtn = document.getElementById('clearBtn');
const searchBtn = document.getElementById('searchBtn');
const helpBtn = document.getElementById('helpBtn');
const helpModal = document.getElementById('helpModal');
const closeHelpModal = document.getElementById('closeHelpModal');
const loadingModal = document.getElementById('loadingModal');
const resultsContainer = document.getElementById('resultsContainer');
const searchResults = document.getElementById('searchResults');
const searchTags = document.getElementById('searchTags');
// State variables
let isDrawing = false;
let startX, startY;
let circles = [];
let selectedCircleIndex = -1;
let currentMediaType = 'image';
let currentMediaUrl = '';
let currentMediaWidth = 0;
let currentMediaHeight = 0;
let currentMediaCategory = '';
// Event listeners
uploadBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileUpload);
mediaType.addEventListener('change', handleMediaTypeChange);
sampleSelect.addEventListener('change', handleSampleSelect);
clearBtn.addEventListener('click', clearCircles);
searchBtn.addEventListener('click', searchSelectedCircle);
helpBtn.addEventListener('click', () => helpModal.classList.remove('hidden'));
closeHelpModal.addEventListener('click', () => helpModal.classList.add('hidden'));
helpModal.addEventListener('click', (e) => {
if (e.target === helpModal) helpModal.classList.add('hidden');
});
// Drawing events
drawingCanvas.addEventListener('mousedown', startDrawing);
drawingCanvas.addEventListener('mousemove', drawCircle);
drawingCanvas.addEventListener('mouseup', endDrawing);
drawingCanvas.addEventListener('mouseleave', endDrawing);
// Handle file upload
function handleFileUpload(e) {
const file = e.target.files[0];
if (!file) return;
currentMediaType = file.type.startsWith('video/') ? 'video' : 'image';
mediaType.value = currentMediaType;
const url = URL.createObjectURL(file);
// Try to detect category from filename if possible
const fileName = file.name.toLowerCase();
if (fileName.includes('watch') || fileName.includes('time') || fileName.includes('clock')) {
currentMediaCategory = 'watch';
} else if (fileName.includes('food') || fileName.includes('meal') || fileName.includes('dish')) {
currentMediaCategory = 'food';
} else if (fileName.includes('cloth') || fileName.includes('shirt') || fileName.includes('jacket')) {
currentMediaCategory = 'clothing';
} else if (fileName.includes('electronic') || fileName.includes('camera') || fileName.includes('gadget')) {
currentMediaCategory = 'electronics';
} else {
currentMediaCategory = ''; // Will be detected from visual analysis
}
loadMedia(url);
}
// Handle media type change
function handleMediaTypeChange() {
currentMediaType = mediaType.value;
if (currentMediaUrl) {
loadMedia(currentMediaUrl);
}
}
// Handle sample selection
function handleSampleSelect(e) {
const url = e.target.value;
if (!url) return;
currentMediaType = 'image'; // All samples are images
mediaType.value = currentMediaType;
// Set category based on sample selection
const sampleText = sampleSelect.options[sampleSelect.selectedIndex].text;
if (sampleText.includes('Food')) {
currentMediaCategory = 'food';
} else if (sampleText.includes('Electronics')) {
currentMediaCategory = 'electronics';
} else if (sampleText.includes('Watch')) {
currentMediaCategory = 'watch';
} else if (sampleText.includes('Clothing')) {
currentMediaCategory = 'clothing';
} else {
currentMediaCategory = '';
}
loadMedia(url);
}
// Load media (image or video)
function loadMedia(url) {
currentMediaUrl = url;
clearCircles();
if (currentMediaType === 'image') {
mediaElement.src = url;
mediaElement.classList.remove('hidden');
videoElement.classList.add('hidden');
videoElement.pause();
noMediaPlaceholder.classList.add('hidden');
mediaElement.onload = function() {
setupCanvas(mediaElement);
// If category wasn't set, try to detect from image
if (!currentMediaCategory) {
detectCategoryFromImage(mediaElement);
}
};
} else {
videoElement.src = url;
videoElement.classList.remove('hidden');
mediaElement.classList.add('hidden');
noMediaPlaceholder.classList.add('hidden');
videoElement.onloadedmetadata = function() {
setupCanvas(videoElement);
};
}
// Enable buttons
clearBtn.disabled = false;
resultsContainer.classList.add('hidden');
}
// Simple image analysis to detect category
function detectCategoryFromImage(img) {
// Create a temporary canvas to analyze the image
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = img.naturalWidth;
tempCanvas.height = img.naturalHeight;
tempCtx.drawImage(img, 0, 0);
// Get image data
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const data = imageData.data;
// Simple analysis (this is very basic - in a real app you'd use ML)
let colorCount = 0;
let darkCount = 0;
let brightCount = 0;
let redCount = 0;
let blueCount = 0;
let greenCount = 0;
// Sample some pixels (every 10th pixel for performance)
for (let i = 0; i < data.length; i += 40) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const a = data[i + 3];
if (a > 0) {
colorCount++;
const brightness = (r + g + b) / 3;
if (brightness < 85) darkCount++;
if (brightness > 170) brightCount++;
if (r > g * 1.5 && r > b * 1.5) redCount++;
if (g > r * 1.5 && g > b * 1.5) greenCount++;
if (b > r * 1.5 && b > g * 1.5) blueCount++;
}
}
// Make a guess based on colors
const totalPixels = colorCount;
const redRatio = redCount / totalPixels;
const greenRatio = greenCount / totalPixels;
const blueRatio = blueCount / totalPixels;
const brightRatio = brightCount / totalPixels;
const darkRatio = darkCount / totalPixels;
// Very basic heuristics
if (greenRatio > 0.3 && brightRatio > 0.5) {
currentMediaCategory = 'food'; // Likely food with lots of greens/bright colors
} else if (darkRatio > 0.7) {
currentMediaCategory = 'electronics'; // Likely dark background electronics
} else if (blueRatio > 0.3 && brightRatio > 0.4) {
currentMediaCategory = 'clothing'; // Likely clothing with blue tones
} else if (brightRatio > 0.6 && redRatio < 0.2 && greenRatio < 0.2) {
currentMediaCategory = 'watch'; // Likely watch with metallic/silver tones
} else {
currentMediaCategory = ''; // Unknown
}
}
// Setup canvas dimensions
function setupCanvas(media) {
const container = media.parentElement;
const width = media.clientWidth;
const height = media.clientHeight;
currentMediaWidth = width;
currentMediaHeight = height;
drawingCanvas.width = width;
drawingCanvas.height = height;
drawingCanvas.style.width = width + 'px';
drawingCanvas.style.height = height + 'px';
// Clear any existing drawings
ctx.clearRect(0, 0, width, height);
}
// Drawing functions
function startDrawing(e) {
if (!currentMediaUrl) return;
isDrawing = true;
const rect = drawingCanvas.getBoundingClientRect();
startX = e.clientX - rect.left;
startY = e.clientY - rect.top;
}
function drawCircle(e) {
if (!isDrawing) return;
const rect = drawingCanvas.getBoundingClientRect();
const currentX = e.clientX - rect.left;
const currentY = e.clientY - rect.top;
// Calculate radius
const radius = Math.sqrt(
Math.pow(currentX - startX, 2) +
Math.pow(currentY - startY, 2)
);
// Clear canvas and redraw
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
ctx.beginPath();
ctx.arc(startX, startY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = '#3B82F6';
ctx.lineWidth = 2;
ctx.stroke();
ctx.fillStyle = 'rgba(59, 130, 246, 0.2)';
ctx.fill();
}
function endDrawing(e) {
if (!isDrawing) return;
isDrawing = false;
const rect = drawingCanvas.getBoundingClientRect();
const endX = e.clientX - rect.left;
const endY = e.clientY - rect.top;
// Calculate radius
const radius = Math.sqrt(
Math.pow(endX - startX, 2) +
Math.pow(endY - startY, 2)
);
// Only create circle if radius is at least 10px
if (radius >= 10) {
createCircle(startX, startY, radius);
}
// Clear temporary drawing
ctx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
}
// Create a circle element
function createCircle(x, y, radius) {
const circle = document.createElement('div');
circle.className = 'selection-circle';
circle.style.left = (x - radius) + 'px';
circle.style.top = (y - radius) + 'px';
circle.style.width = (radius * 2) + 'px';
circle.style.height = (radius * 2) + 'px';
// Store circle data
const circleData = { x, y, radius, element: circle };
const index = circles.length;
circles.push(circleData);
// Add click event to select circle
circle.addEventListener('click', (e) => {
e.stopPropagation();
selectCircle(index);
});
// Add hover tooltip
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
const tooltipContent = document.createElement('div');
tooltipContent.textContent = `Click to select (${Math.round(radius)}px)`;
tooltip.appendChild(tooltipContent);
const tooltipArrow = document.createElement('div');
tooltipArrow.className = 'tooltip-arrow';
tooltip.appendChild(tooltipArrow);
circle.addEventListener('mouseenter', () => {
tooltip.style.left = (x - radius) + 'px';
tooltip.style.top = (y - radius - 40) + 'px';
circlesContainer.appendChild(tooltip);
setTimeout(() => tooltip.classList.add('show'), 10);
});
circle.addEventListener('mouseleave', () => {
tooltip.classList.remove('show');
setTimeout(() => {
if (tooltip.parentNode) {
tooltip.parentNode.removeChild(tooltip);
}
}, 200);
});
circlesContainer.appendChild(circle);
searchBtn.disabled = false;
clearBtn.disabled = false;
}
// Select a circle
function selectCircle(index) {
// Deselect previous circle
if (selectedCircleIndex >= 0) {
circles[selectedCircleIndex].element.classList.remove('active');
}
// Select new circle
selectedCircleIndex = index;
circles[index].element.classList.add('active');
// Enable search button
searchBtn.disabled = false;
}
// Clear all circles
function clearCircles() {
circlesContainer.innerHTML = '';
circles = [];
selectedCircleIndex = -1;
searchBtn.disabled = true;
clearBtn.disabled = circles.length === 0;
resultsContainer.classList.add('hidden');
if (!currentMediaUrl) {
noMediaPlaceholder.classList.remove('hidden');
}
}
// Search for selected circle (simulated)
function searchSelectedCircle() {
if (selectedCircleIndex < 0 || !currentMediaUrl) return;
const circle = circles[selectedCircleIndex];
// Show loading modal
loadingModal.classList.remove('hidden');
// Simulate API call with timeout
setTimeout(() => {
loadingModal.classList.add('hidden');
showSearchResults(circle);
}, 1500);
}
// Show search results (simulated)
function showSearchResults(circle) {
resultsContainer.classList.remove('hidden');
searchResults.innerHTML = '';
searchTags.innerHTML = '';
// Generate search tags based on detected category
let tags = [];
if (currentMediaCategory === 'food') {
tags = ['food', 'meal', 'delicious', 'recipe', 'cooking', 'breakfast', 'healthy', 'nutrition'];
} else if (currentMediaCategory === 'electronics') {
tags = ['electronics', 'camera', 'photography', 'tech', 'gadget', 'digital', 'lens', 'accessories'];
} else if (currentMediaCategory === 'watch') {
tags = ['watch', 'timepiece', 'wristwatch', 'luxury', 'smartwatch', 'analog', 'digital', 'chronograph'];
} else if (currentMediaCategory === 'clothing') {
tags = ['clothing', 'fashion', 'apparel', 'style', 'wear', 'jacket', 'outfit', 'casual'];
} else {
tags = ['object', 'item', 'visual', 'search', 'similar', 'product', 'shopping', 'online'];
}
// Add search tags
tags.forEach(tag => {
const tagElement = document.createElement('span');
tagElement.className = 'search-tag';
tagElement.textContent = tag;
searchTags.appendChild(tagElement);
});
// Generate mock results that simulate Google search results
const mockResults = generateMockResults();
// Display results
mockResults.forEach(result => {
const resultItem = document.createElement('div');
resultItem.className = 'result-item bg-gray-50 rounded-lg overflow-hidden hover:shadow-md transition';
const imgContainer = document.createElement('div');
imgContainer.className = 'relative overflow-hidden h-40';
const img = document.createElement('img');
img.src = result.url;
img.alt = result.title;
img.className = 'w-full h-full object-cover';
const priceTag = document.createElement('div');
priceTag.className = 'absolute bottom-2 right-2 bg-white px-2 py-1 rounded text-sm font-medium text-gray-800 shadow-sm';
priceTag.textContent = result.price;
imgContainer.appendChild(img);
imgContainer.appendChild(priceTag);
const infoContainer = document.createElement('div');
infoContainer.className = 'p-3';
const title = document.createElement('h3');
title.className = 'text-sm font-medium text-gray-800 mb-1 truncate';
title.textContent = result.title;
const source = document.createElement('p');
source.className = 'text-xs text-gray-500 mb-2';
source.textContent = result.source;
const rating = document.createElement('div');
rating.className = 'flex items-center text-xs text-yellow-500 mb-1';
for (let i = 0; i < 5; i++) {
const star = document.createElement('i');
star.className = i < Math.floor(result.rating) ? 'fas fa-star' : 'far fa-star';
rating.appendChild(star);
}
const ratingCount = document.createElement('span');
ratingCount.className = 'text-gray-500 ml-1';
ratingCount.textContent = `(${result.reviews})`;
rating.appendChild(ratingCount);
infoContainer.appendChild(title);
infoContainer.appendChild(source);
infoContainer.appendChild(rating);
resultItem.appendChild(imgContainer);
resultItem.appendChild(infoContainer);
searchResults.appendChild(resultItem);
});
// Scroll to results
resultsContainer.scrollIntoView({ behavior: 'smooth' });
}
// Generate mock search results based on detected category
function generateMockResults() {
if (currentMediaCategory === 'food') {
return [
{ url: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=300', title: 'Delicious Breakfast Platter', source: 'foodnetwork.com', price: '$12.99', rating: 4.5, reviews: 128 },
{ url: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=300', title: 'Healthy Meal Prep Containers', source: 'mealprep.com', price: '$9.99', rating: 4.2, reviews: 87 },
{ url: 'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=300', title: 'Avocado Toast with Eggs', source: 'brunchrecipes.com', price: '$8.49', rating: 4.7, reviews: 215 },
{ url: 'https://images.unsplash.com/photo-1484723091739-30a097e8f929?w=300', title: 'Fresh Fruit Breakfast Bowl', source: 'healthyfood.com', price: '$7.99', rating: 4.8, reviews: 342 },
{ url: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=300', title: 'Pancakes with Berries', source: 'breakfastrecipes.com', price: '$10.99', rating: 4.3, reviews: 176 },
{ url: 'https://images.unsplash.com/photo-1504754524776-8f4f37790c62?w=300', title: 'Homemade Pasta Ingredients', source: 'italianfood.com', price: '$15.99', rating: 4.6, reviews: 92 },
{ url: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=300', title: 'Acai Breakfast Bowl', source: 'superfoods.com', price: '$11.49', rating: 4.9, reviews: 287 },
{ url: 'https://images.unsplash.com/photo-1546069901-d5bfd2cbfb1f?w=300', title: 'Colorful Salad Ingredients', source: 'saladrecipes.com', price: '$6.99', rating: 4.1, reviews: 53 }
];
} else if (currentMediaCategory === 'electronics') {
return [
{ url: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300', title: 'Vintage Camera Collection', source: 'vintagecameras.com', price: '$249.99', rating: 4.8, reviews: 342 },
{ url: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=300', title: '4K Digital Camera', source: 'techgadgets.com', price: '$399.99', rating: 4.6, reviews: 215 },
{ url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=300', title: 'Professional DSLR', source: 'photographypro.com', price: '$899.99', rating: 4.9, reviews: 487 },
{ url: 'https://images.unsplash.com/photo-1512790182412-b19e6d62bc39?w=300', title: 'Mirrorless Camera Body', source: 'mirrorlesscam.com', price: '$749.99', rating: 4.7, reviews: 328 },
{ url: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=300', title: 'Compact Travel Camera', source: 'travelgear.com', price: '$299.99', rating: 4.4, reviews: 176 },
{ url: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=300', title: 'Action Camera Bundle', source: 'adventuretech.com', price: '$349.99', rating: 4.5, reviews: 243 },
{ url: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=300', title: 'Polaroid Instant Camera', source: 'instantphotos.com', price: '$129.99', rating: 4.2, reviews: 187 },
{ url: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=300', title: 'Film Camera Starter Kit', source: 'filmphotography.com', price: '$199.99', rating: 4.7, reviews: 156 }
];
} else if (currentMediaCategory === 'watch') {
return [
{ url: 'https://images.unsplash.com/photo-1524805444758-089113d48a6d?w=300', title: 'Luxury Chronograph Watch', source: 'timepieces.com', price: '$499.99', rating: 4.7, reviews: 287 },
{ url: 'https://images.unsplash.com/photo-1523170335258-f5ed1181a481?w=300', title: 'Smart Watch with Fitness Tracker', source: 'smartgadgets.com', price: '$199.99', rating: 4.5, reviews: 432 },
{ url: 'https://images.unsplash.com/photo-1557531365-e8b3c5c870a7?w=300', title: 'Classic Analog Watch', source: 'classictime.com', price: '$149.99', rating: 4.8, reviews: 156 },
{ url: 'https://images.unsplash.com/photo-1542496658-e33a6d0d50b6?w=300', title: 'Diving Watch Waterproof', source: 'divegear.com', price: '$299.99', rating: 4.6, reviews: 187 },
{ url: 'https://images.unsplash.com/photo-1557531365-e8b3c5c870a7?w=300', title: 'Minimalist Watch - Silver', source: 'minimaldesign.com', price: '$129.99', rating: 4.4, reviews: 92 },
{ url: 'https://images.unsplash.com/photo-1542496658-e33a6d0d50b6?w=300', title: 'Sports Watch with GPS', source: 'sportstech.com', price: '$249.99', rating: 4.3, reviews: 215 },
{ url: 'https://images.unsplash.com/photo-1557531365-e8b3c5c870a7?w=300', title: 'Gold Plated Dress Watch', source: 'luxurytime.com', price: '$399.99', rating: 4.7, reviews: 176 },
{ url: 'https://images.unsplash.com/photo-1542496658-e33a6d0d50b6?w=300', title: 'Digital Watch with Alarm', source: 'basictime.com', price: '$49.99', rating: 4.1, reviews: 128 }
];
} else if (currentMediaCategory === 'clothing') {
return [
{ url: 'https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?w=300', title: 'Denim Jacket - Blue', source: 'denimwear.com', price: '$59.99', rating: 4.6, reviews: 342 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Casual T-Shirt - White', source: 'basicshirts.com', price: '$19.99', rating: 4.3, reviews: 215 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Summer Dress - Floral', source: 'summerfashion.com', price: '$39.99', rating: 4.7, reviews: 487 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Wool Sweater - Grey', source: 'knitwear.com', price: '$49.99', rating: 4.5, reviews: 176 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Leather Jacket - Black', source: 'leathergoods.com', price: '$129.99', rating: 4.8, reviews: 328 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Cotton Pants - Khaki', source: 'casualwear.com', price: '$34.99', rating: 4.4, reviews: 243 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Silk Scarf - Patterned', source: 'accessories.com', price: '$24.99', rating: 4.6, reviews: 156 },
{ url: 'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=300', title: 'Winter Coat - Navy', source: 'outerwear.com', price: '$89.99', rating: 4.7, reviews: 432 }
];
} else {
// Default results
return [
{ url: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=300', title: 'Sample Item 1', source: 'example.com', price: '$19.99', rating: 4.0, reviews: 42 },
{ url: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=300', title: 'Sample Item 2', source: 'example.com', price: '$29.99', rating: 4.2, reviews: 37 },
{ url: 'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=300', title: 'Sample Item 3', source: 'example.com', price: '$14.99', rating: 3.8, reviews: 28 },
{ url: 'https://images.unsplash.com/photo-1484723091739-30a097e8f929?w=300', title: 'Sample Item 4', source: 'example.com', price: '$24.99', rating: 4.5, reviews: 53 },
{ url: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=300', title: 'Sample Item 5', source: 'example.com', price: '$34.99', rating: 4.1, reviews: 46 },
{ url: 'https://images.unsplash.com/photo-1504754524776-8f4f37790c62?w=300', title: 'Sample Item 6', source: 'example.com', price: '$9.99', rating: 3.9, reviews: 31 },
{ url: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=300', title: 'Sample Item 7', source: 'example.com', price: '$19.99', rating: 4.3, reviews: 62 },
{ url: 'https://images.unsplash.com/photo-1546069901-d5bfd2cbfb1f?w=300', title: 'Sample Item 8', source: 'example.com', price: '$12.99', rating: 4.0, reviews: 39 }
];
}
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ranga23127/ranganewspacecircle" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>