Spaces:

Afantauzzi
/

reverse-image-space

Running

App Files Files Community

Afantauzzi commited on Aug 10, 2025

Commit

af1772b

verified ·

1 Parent(s): 34e7665

[Write the prompt and context for the following as you would write it to your self.]Make a code using the best programing language for a reverse image search like yandex images ,bing images ,lenoso Ai, pimeyes., and facecheck.id. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +317 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Reverse Image Space
-emoji: 🐨
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: reverse-image-space
+emoji: 🐳
+colorFrom: green
+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,317 @@
-<!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>ImageSearch Pro - Reverse Image Search Engine</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>
+        .dropzone {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s ease;
+        }
+        .dropzone.active {
+            border-color: #4f46e5;
+            background-color: #f0f4ff;
+        }
+        .search-engine-logo {
+            filter: grayscale(100%);
+            opacity: 0.6;
+            transition: all 0.3s ease;
+        }
+        .search-engine-logo:hover {
+            filter: grayscale(0);
+            opacity: 1;
+        }
+        .result-card {
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .result-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-12 text-center">
+            <h1 class="text-4xl font-bold text-indigo-700 mb-2">ImageSearch <span class="text-indigo-500">Pro</span></h1>
+            <p class="text-gray-600">Find similar images across the web with our powerful reverse image search</p>
+        </header>
+        <!-- Main Search Area -->
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden mb-12">
+            <div class="p-8">
+                <div class="flex justify-center space-x-4 mb-6">
+                    <button id="upload-tab" class="px-4 py-2 font-medium text-indigo-600 border-b-2 border-indigo-600">Upload Image</button>
+                    <button id="url-tab" class="px-4 py-2 font-medium text-gray-500 hover:text-indigo-600">Image URL</button>
+                </div>
+                <!-- Upload Section -->
+                <div id="upload-section" class="space-y-6">
+                    <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer">
+                        <div class="mx-auto w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
+                            <i class="fas fa-cloud-upload-alt text-indigo-500 text-2xl"></i>
+                        </div>
+                        <h3 class="text-lg font-medium text-gray-700 mb-1">Drag & Drop your image here</h3>
+                        <p class="text-gray-500 text-sm mb-4">or</p>
+                        <label for="file-upload" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 cursor-pointer transition">
+                            Browse Files
+                        </label>
+                        <input id="file-upload" type="file" class="hidden" accept="image/*">
+                        <p class="text-xs text-gray-400 mt-4">Supports JPG, PNG, WEBP up to 10MB</p>
+                    </div>
+                </div>
+                <!-- URL Section (hidden by default) -->
+                <div id="url-section" class="hidden space-y-6">
+                    <div class="flex">
+                        <input type="text" id="image-url" placeholder="Paste image URL here..."
+                               class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                        <button id="search-url" class="px-6 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition">
+                            Search
+                        </button>
+                    </div>
+                    <div class="text-center">
+                        <p class="text-gray-500 text-sm">Example: https://example.com/image.jpg</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Search Engines -->
+        <div class="max-w-4xl mx-auto mb-12">
+            <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">Search across multiple engines</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+                <div class="search-engine-logo p-4 bg-white rounded-lg shadow-sm flex items-center justify-center">
+                    <img src="https://yandex.com/images/favicon.ico" alt="Yandex" class="h-8">
+                </div>
+                <div class="search-engine-logo p-4 bg-white rounded-lg shadow-sm flex items-center justify-center">
+                    <img src="https://www.bing.com/favicon.ico" alt="Bing" class="h-8">
+                </div>
+                <div class="search-engine-logo p-4 bg-white rounded-lg shadow-sm flex items-center justify-center">
+                    <img src="https://lens.google.com/favicon.ico" alt="Google Lens" class="h-8">
+                </div>
+                <div class="search-engine-logo p-4 bg-white rounded-lg shadow-sm flex items-center justify-center">
+                    <img src="https://pimeyes.com/favicon.ico" alt="PimEyes" class="h-8">
+                </div>
+                <div class="search-engine-logo p-4 bg-white rounded-lg shadow-sm flex items-center justify-center">
+                    <img src="https://facecheck.id/favicon.ico" alt="FaceCheck" class="h-8">
+                </div>
+            </div>
+        </div>
+        <!-- Results Section (hidden by default) -->
+        <div id="results-section" class="hidden max-w-6xl mx-auto">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-gray-800">Search Results</h2>
+                <button id="new-search" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
+                    <i class="fas fa-redo mr-2"></i>New Search
+                </button>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Sample results - these would be populated dynamically in a real app -->
+                <div class="result-card bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://source.unsplash.com/random/300x200?nature" alt="Result" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-medium text-gray-800 mb-1">Similar image found</h3>
+                        <p class="text-sm text-gray-500 mb-2">example.com</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">85% match</span>
+                            <a href="#" class="text-indigo-600 text-sm hover:underline">View source</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="result-card bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://source.unsplash.com/random/300x200?portrait" alt="Result" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-medium text-gray-800 mb-1">Potential match</h3>
+                        <p class="text-sm text-gray-500 mb-2">social-network.com</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">72% match</span>
+                            <a href="#" class="text-indigo-600 text-sm hover:underline">View source</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="result-card bg-white rounded-lg overflow-hidden shadow-sm border border-gray-100">
+                    <div class="h-48 overflow-hidden">
+                        <img src="https://source.unsplash.com/random/300x200?architecture" alt="Result" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-medium text-gray-800 mb-1">Possible duplicate</h3>
+                        <p class="text-sm text-gray-500 mb-2">stockphoto.com</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">68% match</span>
+                            <a href="#" class="text-indigo-600 text-sm hover:underline">View source</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Features Section -->
+        <div class="max-w-6xl mx-auto mt-16 mb-12">
+            <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">Why Use ImageSearch Pro?</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-xl shadow-sm">
+                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-bolt text-indigo-600"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Lightning Fast</h3>
+                    <p class="text-gray-600">Get results in seconds by searching across multiple engines simultaneously.</p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-sm">
+                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-shield-alt text-indigo-600"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Privacy Focused</h3>
+                    <p class="text-gray-600">Your searches are private. We don't store your images or search history.</p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-sm">
+                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-chart-line text-indigo-600"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Advanced Matching</h3>
+                    <p class="text-gray-600">Our algorithms find even cropped, edited, or resized versions of your image.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer class="bg-gray-100 py-8">
+        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
+            <p>© 2023 ImageSearch Pro. All rights reserved.</p>
+            <div class="flex justify-center space-x-6 mt-4">
+                <a href="#" class="hover:text-indigo-600">Privacy Policy</a>
+                <a href="#" class="hover:text-indigo-600">Terms of Service</a>
+                <a href="#" class="hover:text-indigo-600">Contact Us</a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Tab switching
+        const uploadTab = document.getElementById('upload-tab');
+        const urlTab = document.getElementById('url-tab');
+        const uploadSection = document.getElementById('upload-section');
+        const urlSection = document.getElementById('url-section');
+        uploadTab.addEventListener('click', () => {
+            uploadTab.classList.add('text-indigo-600', 'border-indigo-600');
+            uploadTab.classList.remove('text-gray-500');
+            urlTab.classList.add('text-gray-500');
+            urlTab.classList.remove('text-indigo-600', 'border-indigo-600');
+            uploadSection.classList.remove('hidden');
+            urlSection.classList.add('hidden');
+        });
+        urlTab.addEventListener('click', () => {
+            urlTab.classList.add('text-indigo-600', 'border-indigo-600');
+            urlTab.classList.remove('text-gray-500');
+            uploadTab.classList.add('text-gray-500');
+            uploadTab.classList.remove('text-indigo-600', 'border-indigo-600');
+            urlSection.classList.remove('hidden');
+            uploadSection.classList.add('hidden');
+        });
+        // Dropzone functionality
+        const dropzone = document.getElementById('dropzone');
+        const fileUpload = document.getElementById('file-upload');
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropzone.addEventListener(eventName, preventDefaults, false);
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropzone.addEventListener(eventName, highlight, false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropzone.addEventListener(eventName, unhighlight, false);
+        });
+        function highlight() {
+            dropzone.classList.add('active');
+        }
+        function unhighlight() {
+            dropzone.classList.remove('active');
+        }
+        dropzone.addEventListener('drop', handleDrop, false);
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            handleFiles(files);
+        }
+        fileUpload.addEventListener('change', function() {
+            handleFiles(this.files);
+        });
+        function handleFiles(files) {
+            if (files.length) {
+                const file = files[0];
+                if (file.type.match('image.*')) {
+                    // In a real app, you would upload the file to your server here
+                    console.log('Image selected:', file.name);
+                    showResults();
+                } else {
+                    alert('Please select an image file (JPG, PNG, etc.)');
+                }
+            }
+        }
+        // URL search functionality
+        const searchUrlBtn = document.getElementById('search-url');
+        const imageUrlInput = document.getElementById('image-url');
+        searchUrlBtn.addEventListener('click', () => {
+            const url = imageUrlInput.value.trim();
+            if (url) {
+                // Validate URL (simple check)
+                if (url.match(/^https?:\/\/.+\/.+\.(jpg|jpeg|png|gif|webp)(\?.+)?$/i)) {
+                    console.log('Searching for image at URL:', url);
+                    showResults();
+                } else {
+                    alert('Please enter a valid image URL (must end with .jpg, .png, etc.)');
+                }
+            } else {
+                alert('Please enter an image URL');
+            }
+        });
+        // Show results (simulated)
+        function showResults() {
+            document.getElementById('results-section').classList.remove('hidden');
+            window.scrollTo({
+                top: document.getElementById('results-section').offsetTop - 20,
+                behavior: 'smooth'
+            });
+        }
+        // New search button
+        document.getElementById('new-search').addEventListener('click', () => {
+            document.getElementById('results-section').classList.add('hidden');
+            fileUpload.value = '';
+            imageUrlInput.value = '';
+            uploadTab.click();
+        });
+    </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=Afantauzzi/reverse-image-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>