Visual Discovery

This document explains the primary methods of the Visual Discovery, their use cases, inputs, and outputs.

1. visualSearch

The visualSearch method enables visual product discovery by allowing users to upload an image. The SDK analyzes the image to find visually similar products and provides optional bounding box data.

Use Case

• Ideal for e-commerce platforms where customers want to search for products by uploading images (e.g., fashion, furniture, etc.).
• Enables interaction with specific objects detected in the image through bounding boxes.

Inputs

Option	Type	Description
fileData	File	The image file uploaded by the user.
callback	Function	Function invoked when the search completes to allow you render the items.
bboxCallback	Function	Function invoked when the search completes which allows you to render the bbox.

Outputs

The callback receives an object with:

Property	Type	Description
action	string	The type of action performed (e.g., ImageSearch).
payload	Object	The search results, including product items and bounding box data.

Note: Bounding Box Integration If bounding boxes (bbox) are included in the payload, you must implement a renderDotsAndBoxes method to display the dots and bounding boxes on the preview image. This method should dynamically render the detected areas and allow for interactivity.

For detailed guidance, please refer to:

1. The Sample.
2. The Bounding Boxes Interfaces and Example.

Example

window.FastSimonSDK.visualSearch({
    fileData: file, // File object from an input field
    callback: ({ action, payload }) => {
        if (action === "ImageSearch" && payload.items) {
            const items = action === "ImageSearch" ? payload.items : [];
            renderList("Search Results", items, false);
        }
    },
    bboxCallback: ({ action, payload }) => {
        if (action === "ImageSearch" && payload.bbox) {
            // Render dots and bounding boxes dynamically
            renderDotsAndBoxes(payload.bbox);
        }
    }
});

2. discoveryImages

The discoveryImages method retrieves a gallery of popular or curated images for visual discovery.

Use Case

• Useful for showing trending or popular products to inspire customer purchases.

Inputs

Option	Type	Description
mode	string	The discovery mode (e.g., "popular").
callback	Function	Function invoked when the gallery retrieval completes.

Outputs

The callback receives an object with:

Property	Type	Description
action	string	The type of action performed (e.g., DiscoveryImages).
payload	Object	The gallery of images retrieved.

DiscoveryImage Interface Documentation

The DiscoveryImage interface represents the structure of images retrieved for discovery purposes, such as popular or trending products. The response payload for the discoveryImages method is an array of DiscoveryImage objects.

DiscoveryImages Response

The discoveryImages method returns a payload that is an array of DiscoveryImage objects:

Property Descriptions

Property	Type	Description
image_id	string	Unique identifier for the image.
likes	number	Popularity score or number of likes for the image.
t	string	Title or main label of the image.
d	string	Description or additional context about the image.

Example

window.FastSimonSDK.discoveryImages({
    mode: "popular",
    callback: ({ action, payload }) => {
        if (action === "DiscoveryImages") {
            console.log("Gallery images:", payload);
        }
    }
});

3. productsByDiscovery

The productsByDiscovery method retrieves products based on a specific discovery mode, such as custom recommendations or related products.

Use Case

• Useful for showing related products, cross-sell opportunities, or custom product recommendations.

Inputs

Option	Type	Description
mode	string	The discovery mode (e.g., "custom").
imageID	string (Optional)	ID of the reference image (if applicable).
callback	Function	Function invoked when discovery completes.

Outputs

The callback receives an object with:

Property	Type	Description
action	string	The type of action performed (e.g., ProductsDiscovery).
payload	Object	The discovery results, including product items.

Example

window.FastSimonSDK.productsByDiscovery({
    mode: "custom",
    imageID: "example-image-id",
    callback: ({ action, payload }) => {
        if (action === "ProductsDiscovery" && payload.items) {
            console.log("Recommended products:", payload.items);
        }
    }
});

FetchProductsResponse Interface Documentation

The FetchProductsResponse interface represents the response structure returned when fetching products related to an uploaded image or a specific product.

Property Descriptions

Property	Type	Description
image_id	string	Unique identifier for the uploaded or referenced image.
items	Product[]	Array of products related to the query or image.
likes	number	Popularity score or number of likes for the result.
t	string	Title or main label for the result.
d	string	Description of the result or product group.
bbox	ApiBoundingBox[] (Optional)	Bounding boxes around objects detected in the image.
complete_the_look	{ [key: string]: Product[] } (Optional)	Suggested products to "complete the look."
product_label	string (Optional)	Label or categorization for the result.
similar	Product[] (Optional)	Array of products similar to the main result.
video_url	string (Optional)	URL to a related video showcasing the product or result.

Below is the MDX snippet for 4. similarStyles that matches the formatting and structure of your current documentation. You can add it after the 3. productsByDiscovery section.

4. similarStyles

The similarStyles method retrieves products that share similar visual characteristics with a reference product. This enables your platform to deliver personalized recommendations by matching the aesthetics of the product image with other items in your catalog.

Use Case

• Enhanced Recommendations: When a customer views a product, similarStyles can display items with a similar look, encouraging further exploration and potential cross-selling.
• Style Matching for Curation: Ideal for fashion, home décor, and lifestyle platforms where showcasing visually coherent products enhances the shopping experience.

Inputs

Option	Type	Description
productId	string	Unique identifier of the reference product.
imageUrl	string	URL of the product image used for style matching.
callback	Function	Function invoked when the operation completes.

Outputs

The callback receives an object with:

Property	Type	Description
action	string	The type of action performed (e.g., SimilarStyles or Error).
payload	Object	The response payload containing recommended products. The payload includes properties such as product_label, image_id, and an array of similar Product objects.

Example

window.FastSimonSDK.similarStyles({
    productId: "product id",
    imageUrl: "product image url",
    callback: ({ action, payload }) => {
        if (action === "SimilarStyles" && payload.similar) {
            openSimilarStyles();
        } else if (action === "Error") {
            console.error("An error occurred:", payload);
        }
    }
});