Spaces:

simpleverso
/

visionary-collage-creator

Running

App Files Files Community

simpleverso commited on Oct 15, 2025

Commit

b891f22

verified ·

1 Parent(s): 06c2d72

ml app that can detect an image using a web cam, and from the results it can find related images and it can put them in a dynamic collage

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +264 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Visionary Collage Creator
-emoji: 💻
-colorFrom: blue
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Visionary Collage Creator
+colorFrom: gray
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,265 @@
-<!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>Visionary Collage Creator</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        .collage-item {
+            transition: all 0.3s ease;
+        }
+        .collage-item:hover {
+            transform: scale(1.05);
+            z-index: 10;
+        }
+        .camera-container {
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        .collage-container {
+            min-height: 400px;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-gray-900 to-blue-900 min-h-screen text-white">
+    <!-- Background Animation -->
+    <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
+    <!-- Header -->
+    <header class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center mb-6 md:mb-0">
+                <i data-feather="camera" class="mr-3 text-blue-400" size="32"></i>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
+                    Visionary Collage Creator
+                </h1>
+            </div>
+            <div class="flex space-x-4">
+                <button id="start-camera" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full flex items-center transition-all">
+                    <i data-feather="video" class="mr-2"></i> Start Camera
+                </button>
+                <button id="capture-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full flex items-center transition-all pulse">
+                    <i data-feather="camera" class="mr-2"></i> Capture
+                </button>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Camera Section -->
+            <div class="camera-container bg-black/30 p-6 rounded-2xl">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <i data-feather="eye" class="mr-2 text-blue-400"></i> Camera View
+                </h2>
+                <div class="relative">
+                    <video id="video" class="w-full rounded-lg bg-gray-800" autoplay playsinline></video>
+                    <div id="loading" class="absolute inset-0 bg-black/70 flex items-center justify-center rounded-lg hidden">
+                        <div class="text-center">
+                            <i data-feather="loader" class="animate-spin text-blue-400 mb-2" size="32"></i>
+                            <p>Analyzing image...</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-4">
+                    <div class="flex items-center mb-2">
+                        <i data-feather="tag" class="mr-2 text-green-400"></i>
+                        <p id="prediction-text" class="font-medium">Point your camera at an object to detect it</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Collage Section -->
+            <div class="collage-container p-6 rounded-2xl">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold flex items-center">
+                        <i data-feather="grid" class="mr-2 text-purple-400"></i> Dynamic Collage
+                    </h2>
+                    <button id="clear-collage" class="text-sm bg-red-600 hover:bg-red-700 px-3 py-1 rounded-full flex items-center">
+                        <i data-feather="trash-2" class="mr-1" size="16"></i> Clear
+                    </button>
+                </div>
+                <div id="collage" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                    <div class="col-span-full text-center py-12 text-gray-400">
+                        <i data-feather="image" class="mb-2" size="48"></i>
+                        <p>Capture an image to start building your collage</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- How it works section -->
+        <section class="mt-16 bg-black/20 backdrop-blur-sm rounded-2xl p-8">
+            <h2 class="text-2xl font-bold text-center mb-8">How It Works</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center p-6 bg-white/5 rounded-xl">
+                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="camera" size="24"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Capture Image</h3>
+                    <p class="text-gray-300">Point your camera at any object and capture an image with one click</p>
+                </div>
+                <div class="text-center p-6 bg-white/5 rounded-xl">
+                    <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="cpu" size="24"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">AI Detection</h3>
+                    <p class="text-gray-300">Our ML model identifies the object and finds related images</p>
+                </div>
+                <div class="text-center p-6 bg-white/5 rounded-xl">
+                    <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="layout" size="24"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Dynamic Collage</h3>
+                    <p class="text-gray-300">Related images are automatically added to your personalized collage</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="container mx-auto px-4 py-8 mt-12 text-center text-gray-400">
+        <p>Visionary Collage Creator &copy; 2023 | Powered by Machine Learning</p>
+    </footer>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            color2: 0x8b5cf6,
+            backgroundColor: 0x0f172a
+        });
+        // DOM Elements
+        const video = document.getElementById('video');
+        const startCameraBtn = document.getElementById('start-camera');
+        const captureBtn = document.getElementById('capture-btn');
+        const predictionText = document.getElementById('prediction-text');
+        const collage = document.getElementById('collage');
+        const loading = document.getElementById('loading');
+        const clearCollageBtn = document.getElementById('clear-collage');
+        // Camera setup
+        let stream = null;
+        startCameraBtn.addEventListener('click', async () => {
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                video.srcObject = stream;
+                startCameraBtn.innerHTML = '<i data-feather="video-off" class="mr-2"></i> Stop Camera';
+                startCameraBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
+                startCameraBtn.classList.add('bg-red-600', 'hover:bg-red-700');
+                feather.replace();
+            } catch (err) {
+                console.error("Error accessing camera:", err);
+                predictionText.textContent = "Error accessing camera. Please check permissions.";
+                predictionText.classList.add('text-red-400');
+            }
+        });
+        startCameraBtn.addEventListener('click', () => {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+                stream = null;
+                video.srcObject = null;
+                startCameraBtn.innerHTML = '<i data-feather="video" class="mr-2"></i> Start Camera';
+                startCameraBtn.classList.remove('bg-red-600', 'hover:bg-red-700');
+                startCameraBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
+                feather.replace();
+            }
+        });
+        // Capture image and process
+        captureBtn.addEventListener('click', () => {
+            if (!stream) {
+                predictionText.textContent = "Please start the camera first";
+                predictionText.classList.add('text-yellow-400');
+                return;
+            }
+            loading.classList.remove('hidden');
+            captureBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            // Simulate ML processing delay
+            setTimeout(() => {
+                // In a real app, this would be replaced with actual ML detection
+                const objects = ['cat', 'dog', 'car', 'mountain', 'technology', 'nature', 'people', 'food'];
+                const detectedObject = objects[Math.floor(Math.random() * objects.length)];
+                predictionText.textContent = `Detected: ${detectedObject}`;
+                predictionText.classList.remove('text-yellow-400', 'text-red-400');
+                predictionText.classList.add('text-green-400');
+                // Add to collage
+                addToCollage(detectedObject);
+                loading.classList.add('hidden');
+                captureBtn.classList.remove('opacity-50', 'cursor-not-allowed');
+            }, 1500);
+        });
+        // Add image to collage
+        function addToCollage(object) {
+            // Remove placeholder if it exists
+            if (collage.children.length === 1 && collage.children[0].classList.contains('col-span-full')) {
+                collage.innerHTML = '';
+            }
+            // Create new collage item
+            const collageItem = document.createElement('div');
+            collageItem.className = 'collage-item rounded-lg overflow-hidden shadow-lg transform transition-transform hover:scale-105';
+            // Generate random image based on object
+            const seed = Math.floor(Math.random() * 1000);
+            const imageUrl = `http://static.photos/${object}/320x240/${seed}`;
+            collageItem.innerHTML = `
+                <img src="${imageUrl}" alt="${object}" class="w-full h-32 object-cover">
+                <div class="p-2 bg-black/50 text-sm truncate">${object}</div>
+            `;
+            collage.appendChild(collageItem);
+        }
+        // Clear collage
+        clearCollageBtn.addEventListener('click', () => {
+            collage.innerHTML = `
+                <div class="col-span-full text-center py-12 text-gray-400">
+                    <i data-feather="image" class="mb-2" size="48"></i>
+                    <p>Capture an image to start building your collage</p>
+                </div>
+            `;
+            feather.replace();
+        });
+    </script>
+</body>
 </html>