Spaces:

Boobs00
/

ai-powered-image-understanding

Running

App Files Files Community

Boobs00 commited on Apr 30, 2025

Commit

35c189d

verified ·

1 Parent(s): da0fbc3

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +580 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai Powered Image Understanding
-emoji: 👁
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai-powered-image-understanding
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 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,580 @@
-<!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>Describe Anything Model</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>
+        .gradient-bg {
+            background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .textarea-auto {
+            min-height: 120px;
+            resize: none;
+        }
+        .loading-dots:after {
+            content: '.';
+            animation: dots 1.5s steps(5, end) infinite;
+        }
+        @keyframes dots {
+            0%, 20% { content: '.'; }
+            40% { content: '..'; }
+            60% { content: '...'; }
+            80%, 100% { content: ''; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-robot text-3xl"></i>
+                    <h1 class="text-2xl font-bold">Describe Anything Model</h1>
+                </div>
+                <div class="hidden md:flex space-x-4">
+                    <a href="#embedding" class="hover:text-blue-200 transition">Embedding</a>
+                    <a href="#description" class="hover:text-blue-200 transition">Description</a>
+                    <a href="#about" class="hover:text-blue-200 transition">About</a>
+                </div>
+                <button class="md:hidden text-xl" id="menu-toggle">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Mobile Menu -->
+    <div class="hidden bg-white shadow-md" id="mobile-menu">
+        <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
+            <a href="#embedding" class="py-2 hover:text-blue-600 transition">Embedding</a>
+            <a href="#description" class="py-2 hover:text-blue-600 transition">Description</a>
+            <a href="#about" class="py-2 hover:text-blue-600 transition">About</a>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="gradient-bg text-white py-12">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-4xl font-bold mb-4">AI-Powered Image Understanding</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Generate detailed descriptions of any object in your images with our advanced computer vision model.</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#embedding" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition">Try Embedding</a>
+                <a href="#description" class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">Try Description</a>
+            </div>
+        </div>
+    </section>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-12">
+        <!-- Embedding Section -->
+        <section id="embedding" class="mb-16 fade-in">
+            <div class="flex items-center mb-8">
+                <div class="h-1 bg-blue-500 w-12 mr-4"></div>
+                <h2 class="text-3xl font-bold">Image Embedding Generator</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
+                    <h3 class="text-xl font-semibold mb-4">Upload Your Image</h3>
+                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4" id="drop-area">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
+                        <p class="mb-2">Drag & drop your image here</p>
+                        <p class="text-sm text-gray-500 mb-4">or</p>
+                        <input type="file" id="embedding-file" accept="image/*" class="hidden">
+                        <label for="embedding-file" class="bg-blue-500 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-600 transition">Select Image</label>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500" id="embedding-file-name">No file selected</span>
+                        <button id="clear-embedding" class="text-red-500 text-sm hover:text-red-700 hidden">Clear</button>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
+                    <h3 class="text-xl font-semibold mb-4">Generated Embedding</h3>
+                    <div class="relative">
+                        <textarea id="embedding-result" class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4 textarea-auto" placeholder="Your image embedding will appear here..." readonly></textarea>
+                        <button id="copy-embedding" class="absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition" title="Copy to clipboard">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                    <button id="generate-embedding" class="mt-4 w-full bg-blue-500 text-white py-3 rounded-lg font-medium hover:bg-blue-600 transition flex items-center justify-center">
+                        <span id="embedding-button-text">Generate Embedding</span>
+                        <span id="embedding-loading" class="hidden ml-2 loading-dots"></span>
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- Description Section -->
+        <section id="description" class="mb-16 fade-in">
+            <div class="flex items-center mb-8">
+                <div class="h-1 bg-blue-500 w-12 mr-4"></div>
+                <h2 class="text-3xl font-bold">Mask Description Generator</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
+                    <h3 class="text-xl font-semibold mb-4">Upload Your Image</h3>
+                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4" id="image-drop-area">
+                        <i class="fas fa-image text-4xl text-blue-500 mb-3"></i>
+                        <p class="mb-2">Drag & drop your image here</p>
+                        <p class="text-sm text-gray-500 mb-4">or</p>
+                        <input type="file" id="image-file" accept="image/*" class="hidden">
+                        <label for="image-file" class="bg-blue-500 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-600 transition">Select Image</label>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500" id="image-file-name">No file selected</span>
+                        <button id="clear-image" class="text-red-500 text-sm hover:text-red-700 hidden">Clear</button>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
+                    <h3 class="text-xl font-semibold mb-4">Upload Your Mask</h3>
+                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4" id="mask-drop-area">
+                        <i class="fas fa-mask text-4xl text-blue-500 mb-3"></i>
+                        <p class="mb-2">Drag & drop your mask here</p>
+                        <p class="text-sm text-gray-500 mb-4">or</p>
+                        <input type="file" id="mask-file" accept="image/*" class="hidden">
+                        <label for="mask-file" class="bg-blue-500 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-600 transition">Select Mask</label>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span class="text-sm text-gray-500" id="mask-file-name">No file selected</span>
+                        <button id="clear-mask" class="text-red-500 text-sm hover:text-red-700 hidden">Clear</button>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover transition">
+                    <h3 class="text-xl font-semibold mb-4">Generate Description</h3>
+                    <div class="mb-4">
+                        <label for="description-prompt" class="block text-sm font-medium text-gray-700 mb-1">Prompt (Optional)</label>
+                        <input type="text" id="description-prompt" class="w-full border border-gray-300 rounded-lg p-3" placeholder="What would you like to know about this object?">
+                    </div>
+                    <div class="relative mb-4">
+                        <label for="description-result" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                        <textarea id="description-result" class="w-full bg-gray-100 border border-gray-300 rounded-lg p-4 textarea-auto" placeholder="Your description will appear here..." readonly></textarea>
+                        <button id="copy-description" class="absolute top-7 right-2 bg-gray-200 hover:bg-gray-300 p-2 rounded-lg transition" title="Copy to clipboard">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                    </div>
+                    <div class="flex space-x-3">
+                        <button id="generate-description" class="flex-1 bg-blue-500 text-white py-3 rounded-lg font-medium hover:bg-blue-600 transition flex items-center justify-center">
+                            <span id="description-button-text">Generate</span>
+                            <span id="description-loading" class="hidden ml-2 loading-dots"></span>
+                        </button>
+                        <button id="generate-streaming" class="flex-1 bg-purple-500 text-white py-3 rounded-lg font-medium hover:bg-purple-600 transition flex items-center justify-center">
+                            <span id="streaming-button-text">Stream</span>
+                            <span id="streaming-loading" class="hidden ml-2 loading-dots"></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Preview Section -->
+        <section id="preview" class="mb-16 fade-in">
+            <div class="flex items-center mb-8">
+                <div class="h-1 bg-blue-500 w-12 mr-4"></div>
+                <h2 class="text-3xl font-bold">Image & Mask Preview</h2>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-xl font-semibold mb-4">Image Preview</h3>
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <img id="image-preview" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' fill='%23f3f4f6'%3E%3Crect width='400' height='300'/%3E%3Ctext x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='16' fill='%239ca3af'%3ENo image selected%3C/text%3E%3C/svg%3E" alt="Image preview" class="w-full h-auto">
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-xl font-semibold mb-4">Mask Preview</h3>
+                    <div class="border border-gray-200 rounded-lg overflow-hidden">
+                        <img id="mask-preview" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' fill='%23f3f4f6'%3E%3Crect width='400' height='300'/%3E%3Ctext x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='16' fill='%239ca3af'%3ENo mask selected%3C/text%3E%3C/svg%3E" alt="Mask preview" class="w-full h-auto">
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- About Section -->
+        <section id="about" class="fade-in">
+            <div class="flex items-center mb-8">
+                <div class="h-1 bg-blue-500 w-12 mr-4"></div>
+                <h2 class="text-3xl font-bold">About Describe Anything Model</h2>
+            </div>
+            <div class="bg-white rounded-xl shadow-md p-8">
+                <div class="prose max-w-none">
+                    <h3 class="text-2xl font-semibold mb-4">Advanced Image Understanding</h3>
+                    <p class="mb-4">The Describe Anything Model (DAM) is a cutting-edge AI system that combines computer vision with natural language processing to provide detailed descriptions of objects in images.</p>
+                    <h4 class="text-xl font-semibold mt-6 mb-3">Key Features</h4>
+                    <ul class="list-disc pl-6 mb-6 space-y-2">
+                        <li>Generate rich semantic embeddings for any image</li>
+                        <li>Describe specific objects using segmentation masks</li>
+                        <li>Answer questions about objects in images</li>
+                        <li>Streaming output for real-time results</li>
+                    </ul>
+                    <h4 class="text-xl font-semibold mt-6 mb-3">How It Works</h4>
+                    <ol class="list-decimal pl-6 mb-6 space-y-2">
+                        <li>Upload an image to generate its embedding</li>
+                        <li>Optionally upload a mask to focus on specific objects</li>
+                        <li>Provide a prompt to guide the description</li>
+                        <li>Get detailed, AI-generated descriptions</li>
+                    </ol>
+                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mt-6">
+                        <p class="text-blue-700"><strong>Note:</strong> This is a demonstration interface. For production use, consider implementing proper API endpoints and error handling.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h3 class="text-xl font-bold mb-2">Describe Anything Model</h3>
+                    <p class="text-gray-400">Advanced AI for image understanding</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 Describe Anything Model. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // File handling for embedding
+        const embeddingFileInput = document.getElementById('embedding-file');
+        const embeddingDropArea = document.getElementById('drop-area');
+        const embeddingFileName = document.getElementById('embedding-file-name');
+        const clearEmbeddingBtn = document.getElementById('clear-embedding');
+        const generateEmbeddingBtn = document.getElementById('generate-embedding');
+        const embeddingResult = document.getElementById('embedding-result');
+        const copyEmbeddingBtn = document.getElementById('copy-embedding');
+        const embeddingButtonText = document.getElementById('embedding-button-text');
+        const embeddingLoading = document.getElementById('embedding-loading');
+        // File handling for description
+        const imageFileInput = document.getElementById('image-file');
+        const imageDropArea = document.getElementById('image-drop-area');
+        const imageFileName = document.getElementById('image-file-name');
+        const clearImageBtn = document.getElementById('clear-image');
+        const maskFileInput = document.getElementById('mask-file');
+        const maskDropArea = document.getElementById('mask-drop-area');
+        const maskFileName = document.getElementById('mask-file-name');
+        const clearMaskBtn = document.getElementById('clear-mask');
+        const generateDescriptionBtn = document.getElementById('generate-description');
+        const generateStreamingBtn = document.getElementById('generate-streaming');
+        const descriptionResult = document.getElementById('description-result');
+        const copyDescriptionBtn = document.getElementById('copy-description');
+        const descriptionPrompt = document.getElementById('description-prompt');
+        const descriptionButtonText = document.getElementById('description-button-text');
+        const descriptionLoading = document.getElementById('description-loading');
+        const streamingButtonText = document.getElementById('streaming-button-text');
+        const streamingLoading = document.getElementById('streaming-loading');
+        const imagePreview = document.getElementById('image-preview');
+        const maskPreview = document.getElementById('mask-preview');
+        // Prevent default drag behaviors
+        [embeddingDropArea, imageDropArea, maskDropArea].forEach(area => {
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                area.addEventListener(eventName, preventDefaults, false);
+            });
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // Highlight drop area when item is dragged over it
+        [embeddingDropArea, imageDropArea, maskDropArea].forEach(area => {
+            ['dragenter', 'dragover'].forEach(eventName => {
+                area.addEventListener(eventName, highlight, false);
+            });
+            ['dragleave', 'drop'].forEach(eventName => {
+                area.addEventListener(eventName, unhighlight, false);
+            });
+        });
+        function highlight() {
+            this.classList.add('border-blue-500', 'bg-blue-50');
+        }
+        function unhighlight() {
+            this.classList.remove('border-blue-500', 'bg-blue-50');
+        }
+        // Handle dropped files
+        embeddingDropArea.addEventListener('drop', handleEmbeddingDrop, false);
+        imageDropArea.addEventListener('drop', handleImageDrop, false);
+        maskDropArea.addEventListener('drop', handleMaskDrop, false);
+        function handleEmbeddingDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length) {
+                handleEmbeddingFile(files[0]);
+            }
+        }
+        function handleImageDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length) {
+                handleImageFile(files[0]);
+            }
+        }
+        function handleMaskDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length) {
+                handleMaskFile(files[0]);
+            }
+        }
+        // Handle selected files
+        embeddingFileInput.addEventListener('change', function() {
+            if (this.files.length) {
+                handleEmbeddingFile(this.files[0]);
+            }
+        });
+        imageFileInput.addEventListener('change', function() {
+            if (this.files.length) {
+                handleImageFile(this.files[0]);
+            }
+        });
+        maskFileInput.addEventListener('change', function() {
+            if (this.files.length) {
+                handleMaskFile(this.files[0]);
+            }
+        });
+        function handleEmbeddingFile(file) {
+            if (!file.type.match('image.*')) {
+                alert('Please select an image file.');
+                return;
+            }
+            embeddingFileName.textContent = file.name;
+            clearEmbeddingBtn.classList.remove('hidden');
+            // Preview would be similar to image preview, but we're not showing it here
+        }
+        function handleImageFile(file) {
+            if (!file.type.match('image.*')) {
+                alert('Please select an image file.');
+                return;
+            }
+            imageFileName.textContent = file.name;
+            clearImageBtn.classList.remove('hidden');
+            // Preview the image
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                imagePreview.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+        function handleMaskFile(file) {
+            if (!file.type.match('image.*')) {
+                alert('Please select an image file.');
+                return;
+            }
+            maskFileName.textContent = file.name;
+            clearMaskBtn.classList.remove('hidden');
+            // Preview the mask
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                maskPreview.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+        // Clear buttons
+        clearEmbeddingBtn.addEventListener('click', function() {
+            embeddingFileInput.value = '';
+            embeddingFileName.textContent = 'No file selected';
+            this.classList.add('hidden');
+            embeddingResult.value = '';
+        });
+        clearImageBtn.addEventListener('click', function() {
+            imageFileInput.value = '';
+            imageFileName.textContent = 'No file selected';
+            this.classList.add('hidden');
+            imagePreview.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' fill='%23f3f4f6'%3E%3Crect width='400' height='300'/%3E%3Ctext x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='16' fill='%239ca3af'%3ENo image selected%3C/text%3E%3C/svg%3E";
+        });
+        clearMaskBtn.addEventListener('click', function() {
+            maskFileInput.value = '';
+            maskFileName.textContent = 'No file selected';
+            this.classList.add('hidden');
+            maskPreview.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' fill='%23f3f4f6'%3E%3Crect width='400' height='300'/%3E%3Ctext x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='16' fill='%239ca3af'%3ENo mask selected%3C/text%3E%3C/svg%3E";
+        });
+        // Copy buttons
+        copyEmbeddingBtn.addEventListener('click', function() {
+            embeddingResult.select();
+            document.execCommand('copy');
+            // Show copied feedback
+            const originalText = this.innerHTML;
+            this.innerHTML = '<i class="fas fa-check"></i>';
+            setTimeout(() => {
+                this.innerHTML = originalText;
+            }, 2000);
+        });
+        copyDescriptionBtn.addEventListener('click', function() {
+            descriptionResult.select();
+            document.execCommand('copy');
+            // Show copied feedback
+            const originalText = this.innerHTML;
+            this.innerHTML = '<i class="fas fa-check"></i>';
+            setTimeout(() => {
+                this.innerHTML = originalText;
+            }, 2000);
+        });
+        // Generate buttons - these would call your actual API endpoints
+        generateEmbeddingBtn.addEventListener('click', function() {
+            if (!embeddingFileInput.files.length) {
+                alert('Please select an image file first.');
+                return;
+            }
+            // Simulate API call
+            embeddingButtonText.textContent = 'Processing';
+            embeddingLoading.classList.remove('hidden');
+            setTimeout(() => {
+                // This is where you would call your image_to_sam_embedding API
+                // For demo purposes, we're just showing a placeholder
+                embeddingResult.value = "This would be the base64 encoded embedding from the API response.";
+                embeddingButtonText.textContent = 'Generate Embedding';
+                embeddingLoading.classList.add('hidden');
+            }, 2000);
+        });
+        generateDescriptionBtn.addEventListener('click', function() {
+            if (!imageFileInput.files.length || !maskFileInput.files.length) {
+                alert('Please select both an image and a mask file first.');
+                return;
+            }
+            // Simulate API call
+            descriptionButtonText.textContent = 'Processing';
+            descriptionLoading.classList.remove('hidden');
+            descriptionResult.value = '';
+            setTimeout(() => {
+                // This is where you would call your describe_without_streaming API
+                // For demo purposes, we're just showing a placeholder
+                const prompt = descriptionPrompt.value || "Describe the object in the mask";
+                descriptionResult.value = `This is a detailed description of the object in the mask based on the prompt: "${prompt}".\n\nThe description would include specific details about the object's appearance, context, and any other relevant information the model can provide.`;
+                descriptionButtonText.textContent = 'Generate';
+                descriptionLoading.classList.add('hidden');
+            }, 3000);
+        });
+        generateStreamingBtn.addEventListener('click', function() {
+            if (!imageFileInput.files.length || !maskFileInput.files.length) {
+                alert('Please select both an image and a mask file first.');
+                return;
+            }
+            // Simulate streaming API call
+            streamingButtonText.textContent = 'Streaming';
+            streamingLoading.classList.remove('hidden');
+            descriptionResult.value = '';
+            const prompt = descriptionPrompt.value || "Describe the object in the mask";
+            const demoTexts = [
+                "This is the first part of the description... ",
+                "The object appears to be a person standing in a park. ",
+                "They are wearing a blue jacket and holding a bag. ",
+                "The background shows trees and a clear sky. ",
+                "The lighting suggests it's late afternoon. ",
+                "This completes the description of the object."
+            ];
+            let i = 0;
+            const interval = setInterval(() => {
+                if (i < demoTexts.length) {
+                    descriptionResult.value += demoTexts[i];
+                    i++;
+                } else {
+                    clearInterval(interval);
+                    streamingButtonText.textContent = 'Stream';
+                    streamingLoading.classList.add('hidden');
+                }
+            }, 500);
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+    </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=Boobs00/ai-powered-image-understanding" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ import os os.environ["GRADIO_SSR_MODE"] = "false" if not os.path.exists("checkpoints"): os.makedirs("checkpoints") os.system("pip install gdown") os.system("gdown https://drive.google.com/uc?id=1eQe6blJcyI7oy78C8ozwj1IUkbkFEItf; unzip -o dam_3b_v1.zip -d checkpoints") from segment_anything import sam_model_registry, SamPredictor import gradio as gr import numpy as np import cv2 import base64 import torch from PIL import Image import io import argparse from fastapi import FastAPI from fastapi.staticfiles import StaticFiles from transformers import SamModel, SamProcessor from dam import DescribeAnythingModel, disable_torch_init try: from spaces import GPU except ImportError: print("Spaces not installed, using dummy GPU decorator") GPU = lambda fn: fn # Load SAM model device = torch.device("cuda" if torch.cuda.is_available() else "cpu") sam_model = SamModel.from_pretrained("facebook/sam-vit-huge").to(device) sam_processor = SamProcessor.from_pretrained("facebook/sam-vit-huge") @GPU(duration=75) def image_to_sam_embedding(base64_image): try: # Decode base64 string to bytes image_bytes = base64.b64decode(base64_image) # Convert bytes to PIL Image image = Image.open(io.BytesIO(image_bytes)) # Process image with SAM processor inputs = sam_processor(image, return_tensors="pt").to(device) # Get image embedding with torch.no_grad(): image_embedding = sam_model.get_image_embeddings(inputs["pixel_values"]) # Convert to CPU and numpy image_embedding = image_embedding.cpu().numpy() # Encode the embedding as base64 embedding_bytes = image_embedding.tobytes() embedding_base64 = base64.b64encode(embedding_bytes).decode('utf-8') return embedding_base64 except Exception as e: print(f"Error processing image: {str(e)}") raise gr.Error(f"Failed to process image: {str(e)}") @GPU(duration=75) def describe(image_base64: str, mask_base64: str, query: str): # Convert base64 to PIL Image image_bytes = base64.b64decode(image_base64.split(',')[1] if ',' in image_base64 else image_base64) img = Image.open(io.BytesIO(image_bytes)) mask_bytes = base64.b64decode(mask_base64.split(',')[1] if ',' in mask_base64 else mask_base64) mask = Image.open(io.BytesIO(mask_bytes)) # Process the mask mask = Image.fromarray((np.array(mask.convert('L')) > 0).astype(np.uint8) * 255) # Get description using DAM with streaming description_generator = dam.get_description(img, mask, query, streaming=True) # Stream the tokens text = "" for token in description_generator: text += token yield text @GPU(duration=75) def describe_without_streaming(image_base64: str, mask_base64: str, query: str): # Convert base64 to PIL Image image_bytes = base64.b64decode(image_base64.split(',')[1] if ',' in image_base64 else image_base64) img = Image.open(io.BytesIO(image_bytes)) mask_bytes = base64.b64decode(mask_base64.split(',')[1] if ',' in mask_base64 else mask_base64) mask = Image.open(io.BytesIO(mask_bytes)) # Process the mask mask = Image.fromarray((np.array(mask.convert('L')) > 0).astype(np.uint8) * 255) # Get description using DAM description = dam.get_description(img, mask, query) return description if __name__ == "__main__": parser = argparse.ArgumentParser(description="Describe Anything gradio demo") parser.add_argument("--model-path", type=str, default="checkpoints/dam_3b_v1", help="Path to the model checkpoint") parser.add_argument("--prompt-mode", type=str, default="full+focal_crop", help="Prompt mode") parser.add_argument("--conv-mode", type=str, default="v1", help="Conversation mode") parser.add_argument("--temperature", type=float, default=0.2, help="Sampling temperature") parser.add_argument("--top_p", type=float, default=0.5, help="Top-p for sampling") args = parser.parse_args() # Initialize DAM model disable_torch_init() dam = DescribeAnythingModel( model_path=args.model_path, conv_mode=args.conv_mode, prompt_mode=args.prompt_mode, temperature=args.temperature, top_p=args.top_p, num_beams=1, max_new_tokens=512, ).to(device) # Create Gradio interface with gr.Blocks() as demo: gr.Interface( fn=image_to_sam_embedding, inputs=gr.Textbox(label="Image Base64"), outputs=gr.Textbox(label="Embedding Base64"), title="Image Embedding Generator", api_name="image_to_sam_embedding" ) gr.Interface( fn=describe, inputs=[ gr.Textbox(label="Image Base64"), gr.Text(label="Mask Base64"), gr.Text(label="Prompt") ], outputs=[ gr.Text(label="Description") ], title="Mask Description Generator", api_name="describe" ) gr.Interface( fn=describe_without_streaming, inputs=[ gr.Textbox(label="Image Base64"), gr.Text(label="Mask Base64"), gr.Text(label="Prompt") ], outputs=[ gr.Text(label="Description") ], title="Mask Description Generator (Non-Streaming)", api_name="describe_without_streaming" ) demo._block_thread = demo.block_thread demo.block_thread = lambda: None demo.launch() for route in demo.app.routes: if route.path == "/": demo.app.routes.remove(route) demo.app.mount("/", StaticFiles(directory="dist", html=True), name="demo") demo._block_thread()