Watch the demo to see AI ImageMatch Finder in action—snap, upload, and discover products instantly!

Features

The AI - Image Search Engine offers a rich set of features that make it easy for website owners to integrate advanced image-based search capabilities. This powerful solution allows users to upload images and search for related products with just a few clicks, enhancing the shopping and browsing experience.

• Upload Image
  Allow users to upload an image directly from their device. The AI - Image Search Engine instantly processes the uploaded image and finds related products based on the image's content.
• Click Image to Search
  Users can click on any product image to search for similar items within the platform. This feature makes it easy for customers to find products with similar characteristics, enhancing product discovery.
• Real-Time Image Processing
  The image is processed in real-time, allowing users to instantly view search results based on the uploaded image. The system uses advanced AI to analyze the image and match it with relevant products.
• Search Results Display
  The results are displayed dynamically, showing users the most relevant products based on the image they uploaded. The search results are displayed with product names, images, and relevant details.
• Responsive Integration
  Integrate the image search feature seamlessly into your website with just one .js file. It’s designed for easy setup and smooth user experience, making it suitable for any platform or website.
• Customizable Server-Side Integration
  The server-side integration is flexible, allowing developers to use their preferred backend technology to handle image data and results. Whether you're using PHP, Node.js, Java, or .NET, integration is made easy with just a few lines of code.
• Advanced Product Matching
  The system uses advanced image recognition AI to accurately match the uploaded image with products in the database, improving the accuracy of the search results and enhancing the user experience.
• Simple UI/UX
  The user interface is intuitive and simple, allowing users to easily upload or click on an image to search for products. The experience is seamless, keeping users engaged and satisfied.
• Real-Time Updates
  As the user interacts with the system, it provides instant feedback and updates search results, ensuring that the user experience is fast and responsive.
• Cross-Platform Support
  Whether you're using a desktop or mobile platform, the AI - Image Search Engine is designed to work seamlessly across all devices, providing a consistent and responsive experience for all users.

Integration Steps

To integrate the AI - Image Search Engine with your application:

• Download the provided JavaScript file and include it in your front-end code.
• Set up the backend (using your desired language, e.g., Node.js, .NET, or Java) to receive image requests and process them.
• Integrate the Google Cloud Vision API with your backend by using the official client libraries for your chosen language.
• Store your Google Cloud Vision API credentials in a secure local folder (explained below).
• Test the integration by sending image data to your backend and verifying the generated labels.

To generate a Google Cloud Vision API key and save it in a local folder:

• Go to Google Cloud Console.
• Click on "Select a Project" at the top and then "New Project" to create a new project.
• In the search bar, type "Vision API" and go to the Vision API page. Click "Enable" to activate the API for your project.
• Go to the "Credentials" page in the API & Services section, click "Create Credentials," and choose "Service Account."
• When prompted, create a new service account, assign it the "Project > Owner" role, and then click "Create." This will generate a JSON key file.
• Download the JSON file and store it in a secure folder on your local machine or server. Ensure this file is not publicly accessible for security reasons.
• Set the GOOGLE_APPLICATION_CREDENTIALS environment variable to point to the location of your JSON key file.

  export GOOGLE_APPLICATION_CREDENTIALS="/path/to/your-service-account-file.json"

• visit the official Google Cloud documentation for the authentication setup and getting started with Vision API.

Server-Side Code

• .NET Core
• PHP
• Node.js
• Java

[HttpPost]
        public async Task ProcessImage([FromBody] ImageRequest request)
        {
            if (string.IsNullOrEmpty(request.Image))
            {
                return BadRequest("No image data provided.");
            }

            string tempFilePath = null;

            try
            {
                // Decode Base64 image
                var base64Data = request.Image.Substring(request.Image.IndexOf(',') + 1);
                byte[] imageBytes;
                try
                {
                    imageBytes = Convert.FromBase64String(base64Data);
                }
                catch
                {
                    return BadRequest("Invalid Base64 image data.");
                }

                // Save the image temporarily
                tempFilePath = Path.Combine(Path.GetTempPath(), $"{Guid.NewGuid()}.jpg");
                await System.IO.File.WriteAllBytesAsync(tempFilePath, imageBytes);

                // Set environment variable for credentials dynamically within the method
                Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", _credentialsPath);

                // Authenticate and create Vision API client
                var client = ImageAnnotatorClient.Create();

                // Read the image
                var image = Google.Cloud.Vision.V1.Image.FromFile(tempFilePath);

                // Analyze image
                var response = await client.DetectLabelsAsync(image);

                // Extract labels
                var labels = response.Select(label => label.Description).ToList();

                // Handle empty label case
                if (!labels.Any())
                {
                    return Ok(new { Message = "No labels detected in the image." });
                }

                // Search for products matching the detected labels
                var matchingProducts = SearchProductsByLabels(labels);

                // Return the response with matching products and labels
                //return Ok(new { Labels = labels, MatchingProducts = matchingProducts });


                return Json(new { label = labels, products = matchingProducts, count=matchingProducts.Count }); // Return the list as a JSON response
            }
            catch (Exception ex)
            {
                // Log exception (you can replace this with proper logging)
                Console.WriteLine($"Error processing image: {ex.Message}");
                return BadRequest($"Error processing image: {ex.Message}");
            }
            finally
            {
                // Cleanup temporary file
                if (!string.IsNullOrEmpty(tempFilePath) && System.IO.File.Exists(tempFilePath))
                {
                    System.IO.File.Delete(tempFilePath);
                }
            }
        }
    

 "No image data provided."]);
    }

    $tempFilePath = null;

    try {
        // Decode Base64 image
        $base64Data = substr($imageBase64, strpos($imageBase64, ',') + 1);
        $imageBytes = base64_decode($base64Data);

        if ($imageBytes === false) {
            return json_encode(["error" => "Invalid Base64 image data."]);
        }

        // Save the image temporarily
        $tempFilePath = sys_get_temp_dir() . '/' . uniqid() . '.jpg';
        file_put_contents($tempFilePath, $imageBytes);

        // Set Google Cloud Vision API credentials (ensure that the credentials JSON file path is set properly)
        putenv('GOOGLE_APPLICATION_CREDENTIALS=/path/to/your-service-account-file.json');

        // Create Vision API client
        $client = new ImageAnnotatorClient();

        // Read the image
        $image = file_get_contents($tempFilePath);

        // Analyze image labels
        $response = $client->labelDetection($image);
        $labels = $response->getLabelAnnotations();

        // Extract label descriptions
        $labelDescriptions = [];
        foreach ($labels as $label) {
            $labelDescriptions[] = $label->getDescription();
        }

        // Handle empty label case
        if (empty($labelDescriptions)) {
            return json_encode(["message" => "No labels detected in the image."]);
        }

        // Search for products matching the detected labels (implement your own search function)
        $matchingProducts = searchProductsByLabels($labelDescriptions);

        // Return the response with matching products and labels
        return json_encode([
            'labels' => $labelDescriptions,
            'products' => $matchingProducts,
            'count' => count($matchingProducts)
        ]);
    } catch (Exception $ex) {
        // Log the error (you can replace this with proper logging)
        error_log("Error processing image: " . $ex->getMessage());
        return json_encode(["error" => "Error processing image: " . $ex->getMessage()]);
    } finally {
        // Cleanup temporary file
        if ($tempFilePath && file_exists($tempFilePath)) {
            unlink($tempFilePath);
        }
    }
}

function searchProductsByLabels($labels)
{
    // Implement your logic to search for products based on the labels
    // Example: return an array of matching products (this should be replaced with actual logic)
    return [
        ["name" => "Product 1", "description" => "Product matching label 1"],
        ["name" => "Product 2", "description" => "Product matching label 2"]
    ];
}

// Example usage:
$imageBase64 = $_POST['image'] ?? ''; // Get the image from POST data
echo processImage($imageBase64);
?>
    

const fs = require('fs-extra');
const path = require('path');
const { ImageAnnotatorClient } = require('google-cloud/vision');
const uuid = require('uuid');
const base64Img = require('base64-img');

// Create a Vision API client
const client = new ImageAnnotatorClient();

async function processImage(imageBase64) {
    if (!imageBase64) {
        return { error: "No image data provided." };
    }

    let tempFilePath = null;

    try {
        // Decode Base64 image
        const base64Data = imageBase64.split(',')[1];  // Remove the data URL part
        const imageBuffer = Buffer.from(base64Data, 'base64');

        // Save the image temporarily
        tempFilePath = path.join(__dirname, `${uuid.v4()}.jpg`);
        await fs.writeFile(tempFilePath, imageBuffer);

        // Set Google Cloud Vision API credentials (ensure this is set properly)
        process.env.GOOGLE_APPLICATION_CREDENTIALS = '/path/to/your-service-account-file.json';

        // Perform label detection on the image
        const [result] = await client.labelDetection(tempFilePath);
        const labels = result.labelAnnotations;

        // Extract label descriptions
        const labelDescriptions = labels.map(label => label.description);

        // Handle empty label case
        if (labelDescriptions.length === 0) {
            return { message: "No labels detected in the image." };
        }

        // Search for products matching the detected labels (implement your own search function)
        const matchingProducts = searchProductsByLabels(labelDescriptions);

        // Return the response with matching products and labels
        return {
            labels: labelDescriptions,
            products: matchingProducts,
            count: matchingProducts.length
        };
    } catch (error) {
        console.error("Error processing image:", error.message);
        return { error: "Error processing image: " + error.message };
    } finally {
        // Cleanup temporary file
        if (tempFilePath && fs.existsSync(tempFilePath)) {
            await fs.remove(tempFilePath);
        }
    }
}

function searchProductsByLabels(labels) {
    // Implement your logic to search for products based on the labels
    // Example: return an array of matching products (this should be replaced with actual logic)
    return [
        { name: "Product 1", description: "Product matching label 1" },
        { name: "Product 2", description: "Product matching label 2" }
    ];
}

// Example usage:
const imageBase64 = 'your-base64-image-data-here'; // Get the image Base64 data
processImage(imageBase64).then(response => {
    console.log(response);
}).catch(error => {
    console.error(error);
});
    

package com.example.imageprocessor.controller;

import com.google.cloud.vision.v1.ImageAnnotatorClient;
import com.google.cloud.vision.v1.Image;
import com.google.cloud.vision.v1.AnnotateImageRequest;
import com.google.cloud.vision.v1.AnnotateImageResponse;
import com.google.cloud.vision.v1.Feature;
import com.google.protobuf.ByteString;
import org.apache.commons.io.FileUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.http.ResponseEntity;
import org.springframework.util.Base64Utils;
import org.springframework.beans.factory.annotation.Value;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

                            RestController
                            RequestMapping("/api")
public class ImageProcessorController {

                            Value("${google.cloud.credentials}")
    private String credentialsPath;

                            PostMapping("/processImage")
    public ResponseEntity processImage(RequestBody ImageRequest request) {
        if (request.getImage() == null || request.getImage().isEmpty()) {
            return ResponseEntity.badRequest().body("No image data provided.");
        }

        String tempFilePath = null;

        try {
            // Decode the Base64 image
            String base64Data = request.getImage().split(",")[1];
            byte[] imageBytes = Base64Utils.decodeFromString(base64Data);

            // Save the image temporarily
            tempFilePath = "temp-" + System.currentTimeMillis() + ".jpg";
            File tempFile = new File(tempFilePath);
            FileUtils.writeByteArrayToFile(tempFile, imageBytes);

            // Set Google Cloud Vision API credentials
            System.setProperty("GOOGLE_APPLICATION_CREDENTIALS", credentialsPath);

            // Create a Vision API client
            try (ImageAnnotatorClient visionClient = ImageAnnotatorClient.create()) {
                // Build the image
                ByteString imgBytes = ByteString.readFrom(new File(tempFilePath).toPath());
                Image img = Image.newBuilder().setContent(imgBytes).build();

                // Perform label detection
                Feature feature = Feature.newBuilder().setType(Feature.Type.LABEL_DETECTION).build();
                AnnotateImageRequest request = AnnotateImageRequest.newBuilder()
                        .addFeatures(feature)
                        .setImage(img)
                        .build();

                List requests = new ArrayList<>();
                requests.add(request);

                // Detect labels
                List responses = visionClient.batchAnnotateImages(requests).getResponsesList();

                if (responses.isEmpty() || responses.get(0).getLabelAnnotationsList().isEmpty()) {
                    return ResponseEntity.ok("No labels detected in the image.");
                }

                // Extract labels
                List labels = new ArrayList<>();
                responses.get(0).getLabelAnnotationsList().forEach(label -> labels.add(label.getDescription()));

                // Handle matching products (implement your logic to search for products based on labels)
                List matchingProducts = searchProductsByLabels(labels);

                // Return the response with labels and matching products
                return ResponseEntity.ok(new ImageResponse(labels, matchingProducts));
            } catch (Exception e) {
                return ResponseEntity.status(500).body("Error processing image: " + e.getMessage());
            }
        } catch (IOException e) {
            return ResponseEntity.status(500).body("Error decoding Base64 image data.");
        } finally {
            // Clean up temporary file
            if (tempFilePath != null) {
                File tempFile = new File(tempFilePath);
                if (tempFile.exists()) {
                    tempFile.delete();
                }
            }
        }
    }

    private List searchProductsByLabels(List labels) {
        // Implement your logic to search for products based on the detected labels
        // Example of a mock search
        List products = new ArrayList<>();
        for (String label : labels) {
            products.add(new Product(label, "Product matching " + label));
        }
        return products;
    }
}



    

Release Notes

Future Plans for DonorBox

Future versions will continue to enhance the donation box system with additional features such as:

• Advanced Image Recognition: Improved accuracy and support for identifying more detailed objects, scenes, and categories within images.


• Custom Training Models: Allow website owners to upload custom datasets to train the engine for niche-specific searches.


• AI-Based Similarity Scoring: Enhanced algorithms for ranking search results based on visual similarity and relevance.