Spaces:

ranga23127
/

ranganewspacecircle

Running

App Files Files Community

ranga23127 commited on 4 days ago

Commit

8e68ddd

verified ·

1 Parent(s): 08a1c96

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +699 -19
prompts.txt +6 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ranganewspacecircle
-emoji: ⚡
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ranganewspacecircle
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,699 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 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-1551963831-b3b1ca40c98e?w=800">Flower 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;
+            // 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);
+                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;
+                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);
+                    };
+                } 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');
+            }
+            // 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 sample selected
+                let tags = [];
+                const sampleText = sampleSelect.options[sampleSelect.selectedIndex].text;
+                if (sampleText.includes('Food')) {
+                    tags = ['food', 'meal', 'delicious', 'recipe', 'cooking', 'breakfast', 'healthy', 'nutrition'];
+                } else if (sampleText.includes('Electronics')) {
+                    tags = ['electronics', 'camera', 'photography', 'tech', 'gadget', 'digital', 'lens', 'accessories'];
+                } else if (sampleText.includes('Flower')) {
+                    tags = ['flower', 'floral', 'bouquet', 'garden', 'bloom', 'nature', 'plant', 'arrangement'];
+                } else if (sampleText.includes('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(sampleText);
+                // 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 sample type
+            function generateMockResults(sampleText) {
+                if (sampleText.includes('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 (sampleText.includes('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 (sampleText.includes('Flower')) {
+                    return [
+                        { url: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?w=300', title: 'Fresh Cut Flowers Bouquet', source: 'florist.com', price: '$29.99', rating: 4.8, reviews: 432 },
+                        { url: 'https://images.unsplash.com/photo-1521012012373-6a85fade14b3?w=300', title: 'Rose Flower Arrangement', source: 'rosegarden.com', price: '$39.99', rating: 4.9, reviews: 387 },
+                        { url: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=300', title: 'Sunflower Bouquet', source: 'sunflowershop.com', price: '$24.99', rating: 4.7, reviews: 215 },
+                        { url: 'https://images.unsplash.com/photo-1455659817273-68adca893fe3?w=300', title: 'Tulip Flower Bunch', source: 'tulipfarm.com', price: '$19.99', rating: 4.6, reviews: 176 },
+                        { url: 'https://images.unsplash.com/photo-1455659817273-68adca893fe3?w=300', title: 'Orchid Plant in Pot', source: 'orchidlovers.com', price: '$34.99', rating: 4.8, reviews: 243 },
+                        { url: 'https://images.unsplash.com/photo-1455659817273-68adca893fe3?w=300', title: 'Lily Flower Arrangement', source: 'lilygarden.com', price: '$27.99', rating: 4.5, reviews: 128 },
+                        { url: 'https://images.unsplash.com/photo-1455659817273-68adca893fe3?w=300', title: 'Wildflower Seed Mix', source: 'gardensupply.com', price: '$14.99', rating: 4.4, reviews: 342 },
+                        { url: 'https://images.unsplash.com/photo-1455659817273-68adca893fe3?w=300', title: 'Daisy Flower Crown', source: 'flowercrowns.com', price: '$22.99', rating: 4.7, reviews: 187 }
+                    ];
+                } else if (sampleText.includes('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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+User will draw a circle on any image or video and it will navigate to google and show the similar results.
+circle is not there
+This functionality can be achieved using a combination of image/video processing libraries (like OpenCV) and a search engine API (like Google Images or Google Lens). The user would interact with an application that allows them to draw a circle on an image or video frame, and then the application would: 1. Extract the region within the circle: Use image processing techniques to isolate the region of the image or video frame defined by the circle.  2. Process the image/video: Potentially use techniques like object detection, image recognition, or feature extraction to create a representation of the region within the circle.  3. Make a search query: Use a search engine API to search for similar results based on the processed region. 4. Display the search results: The application would then display the search results to the user, potentially within the same application or by navigating to the search engine's website.  Here's a breakdown of how the application could work: 1. Drawing and Region Extraction:  The application would use a UI library (like Flutter, React, or a native UI library) to display the image or video frame. A drawing tool would allow the user to draw a circle on the image or video frame. The application would then use image processing libraries like OpenCV (in Python, Java, or C++) to extract the region within the circle. This involves determining the circle's center and radius and cropping or masking the image to isolate that area. 2. Processing the Image/Video:  Object Detection/Recognition: If the goal is to find similar objects, you'd use an object detection model (like TensorFlow or PyTorch with a pre-trained model) to identify the objects within the extracted region. Feature Extraction: If the goal is to find visually similar images, you'd use techniques like feature extraction (e.g., using a CNN) to create a vector representation of the region. 3. Search Query:  The application would use a search engine API (like Google Image Search API, or Google Lens API) to search for similar results. Based on the processed region, the API would be queried with a description (e.g., "objects detected" or "image features"). 4. Displaying Results:  The search results would be displayed within the application, or the user would be navigated to the search engine's website to see the results.
+here the circle is not showing and i dont how to draw to search in google
+circle is there but gooogle api is not there to run here. make
+flower sample is wrongly like food appearing. cloths sample are not showing. change these things, its not predicting correctly or not detecting so see and make correctly