# LLMs-Full.txt - Comprehensive GlamAR AI Assistant Guide ## Purpose This file provides an in-depth reference for LLMs to assist users in integrating and troubleshooting GlamAR SDK. It includes all relevant sections in detail. ## Metadata - **Product Name**: GlamAR SDK - **Supported Platforms**: Android, iOS, Web - **Primary Use**: Augmented Reality (AR) SDK for beauty, fashion, and virtual try-ons. - **Integration Methods**: Native (Android/iOS), Web APIs ## Full Documentation ### Introduction # Introduction **Welcome to the GlamAR SDK!** This guide will help you get started and show how to add advanced AR features to your web applications. GlamAR SDK enables seamless integration of AR features into your existing applications. It is fully compatible with web, Android, and iOS platforms, ensuring a versatile and robust solution across multiple environments. The SDK serves as an effect player for GlamAR effects, providing a range of built-in APIs needed to create powerful AR solutions. It acts as the foundational layer for all GlamAR use cases and solutions. The best way to get started with GlamAR SDK is by visiting:

**GlamAR SDK is available for:**

### GlamAR Overview GlamAR uses machine learning (ML) and deep learning models to track human features like face position and facial expressions. It then overlays impressive graphics and effects onto the live camera feed, creating a seamless augmented reality (AR) experience. Here’s how it works: 1. The camera captures images of your face 2. GlamAR analyzes these images to determine the position and expressions of your face. 3. It then overlays 2D and 3D graphics onto your face, frame by frame, making it look natural and integrated. GlamAR SDK (Software Development Kit) contains all the necessary components, including 3D models and textures, to create these AR experiences. This allows you to focus on designing the visual effects while the SDK handles the complex technical processes. ![GlamAR Flow](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/glamar_flow.png) ### Getting Started # Getting Started To help you get started with the GlamAR SDK, we provide demo applications that illustrate how to integrate and use the SDK effectively. Before you begin, ensure you have the following prerequisites: 1. [GlamAR PixelBin Token](https://console.pixelbin.io/): This token is required for authentication and access to the GlamAR services. 2. [Git Client](https://git-scm.com/download): You need a Git client to clone the demo applications and manage your source code. ### Create Token Follow these steps to create a token and start using the GlamAR SDK: 1. Navigate to the **Settings** icon in the top right corner of the PixelBin.io dashboard. 2. In the left sidebar, click on **Tokens**. ![Image 1](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/1.jpg) 3. Click **Create Token** ![Image 2](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/2.jpg) 4. Enter a name for your token, such as "Demo", and click on **Create**. ![Image 3](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/3.jpg) 5. Your Token has been created. After creating the token, find it in the list as shown in the image below. ![Image 4](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/4.jpg) 6. Copy the **API Token**. ![Image 5](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/5.jpg) ### System Requirements # System Requirements To ensure you get the best performance and compatibility, here are the system requirements for using the GlamAR SDK. GlamAR SDK works on any browser with WebGL 1.0 and higher. You can find a complete list of supported browsers in the system requirements section. ### Supported Platforms

Desktop

Mobile

### Supported Browsers | Platform | Android | iOS | Desktop | | :------: | :-----: | :-: | :-----: | | Chrome | 66+ | 11+ | 66+ | | Firefox | 60+ | | 60+ | | Safari | | 11+ | 11.1+ | | Edge | | | 42+ | Chrome on iOS uses [WebKit](https://developer.apple.com/app-store/review/guidelines/#software-requirements) in the background, which is the same JavaScript engine that Safari uses. Therefore, the compatibility is the same as Safari. ### Supported Languages/Frameworks | Platform | Supported Language | | :------------: | :--------------------: | | iOS | Objective-C, Swift | | Android | Java, Kotlin | | Web | JavaScript, TypeScript | | Cross Platform | Flutter, Unity | ### Technical Specification Here is a guide to the performance metrics for GlamAR SDK features. These values are provided for reference and may vary depending on factors such as device condition, running applications, Wi-Fi status, and room temperature. We recommend testing each feature in your own environment for the most accurate results. Please visit [SDK Features](https://docs.glamarz0.de/docs/sdk_functionalities) for the information regarding features support on different platforms. :::note - FPS — Frames per second; how smoothly the face detection algorithm runs on a device. - Angles — The maximum angle at which the technology works effectively. - Distance — The farthest distance at which the technology works effectively. - Real-time (online) — How the technology performs in real-time use. - Photo (offline) — The time it takes to process a photo from the camera or gallery. ::: ## System Performance Metrics ** MakeUp AR** | | Real-time, FPS | | :----: | :------------: | | Chrome | 28 | | Safari | 16 | **Hair Color AR** | | Real-time, FPS | | :----: | :------------: | | Chrome | 28 | | Safari | 18 | **Accessories AR** | | Real-time, FPS | | :----: | :------------: | | Chrome | 27 | | Safari | 18 | **Nail Color AR** (Coming Soon) | | Real-time, FPS | | :----: | :------------: | | Chrome | 22 | | Safari | 15 | ### SDK Functionalities # How GlamAR Works? ![GlamARSDK](https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/document/glamar_feature.png) ## What Will You Get? GlamAR SDK provides a comprehensive set of tools and resources to help you create advanced augmented reality (AR) experiences. Here’s what you get: - **Standard Face Tracking:** Detects and tracks facial features. - **Full Body Tracking:** Monitors and tracks the entire body. - **Hand Tracking:** Identifies and follows hand movements. - **Custom Face Tracking Solution:** Allows for specialized face tracking configurations. - **Hair Segmentation:** Detects and segments hair from the rest of the image. - **Glasses Detection:** Recognizes and tracks glasses on the face. - **Eyewear Size Detection:** Measures and tracks eyewear size. - **Face Tracking Optimized for Glasses VTO:** Enhanced tracking for virtual try-on of glasses. - **Wrist and Hand Tracking Optimized for Watches and Jewelry VTO:** Specialized tracking for virtual try-on of wristwear and jewelry. ## Capabilities GlamAR SDK helps you to create immersive and interactive AR experiences directly in the browser. Here are some of its capabilities: - **Real-Time Face and Body Tracking:** Provides accurate and responsive tracking of facial and body movements. - **Customizable AR Effects:** Allows you to create and apply a wide range of visual effects. - **Virtual Try-On Experiences:** Enables users to try on glasses, watches, and jewelry virtually. - **Hair and Accessory Detection:** Enhances AR applications with precise segmentation and detection of hair and accessories. - **Optimized Performance:** Ensures smooth and efficient operation across different devices using CPU or GPU processing. :::note - SDK features on Web are supported on browsers with WebGL 1.0 and higher. You can see more in [system requirements](https://docs.glamar.io/docs/system_requirements). ::: ### Web Integration # Web GlamAR SDK enables real-time virtual try-ons directly on web pages while enhancing the AR experience through live camera feed and image rendering. Use the following steps to install and configure the SDK to unlock immersive AR features. ## Installation The WebAR SDK can be loaded as a script tag. Follow the steps below to install the WebAR SDK. 1. Clone the sample application project from the Git repository by running the following command: ```bash git clone https://github.com/gofynd/glamar-web-demo.git ``` 2. Load the SDK via script tags: - For Makeup/Hair Color/Nail Color AR: ```html ``` - For Accessories AR: ```html ``` ## Usage If you are using npm, you need to import the GlamAR SDK as a module. You can then call the APIs available on the GlamAR object. ### Import GlamAR Module - For Makeup/Hair Color/Nail Color AR: ```javascript import * as GlamAR from "glamar-sdk"; ``` - For Accessories AR: ```javascript import * as FyndStyle from "fyndstyle-sdk"; ``` ### Initialize GlamAR Module with Your API Key ```javascript GlamAR.init("GlamAR-module", "ff4146c9-386a-463d-9b7d-4191bfa35c7f", { platform: "web", hideTryOnScreen: false, theme: "dark", hideLiveCamera: false, hideModelTryOn: false, hideUploadMode: false, }); ``` Replace `'GlamAR-module'` with your CSS container ID and `'ff4146c9-386a-463d-9b7d-4191bfa35c7f'` with your API key. ### Apply by SKU ```html ``` Replace `SKU_ID` with the actual SKU ID you want to apply. ## API Reference ### GitHub Link [GitHub Repository](https://github.com/gofynd/glamar-web-demo) ### Methods

Methods	Description
init	GlamAR.init(containerId, apiKey, openLiveMakeup)
	Parameters: {" "} containerId: string, id of the div to mount the widget{" "} {" "} apiKey: string, api key{" "} {" "} openLiveMakeup(optional): boolean, whether to open widget in live mode.{" "}
	Return Value: None
	Initializes the widget
applyMakeupBySku	GlamAR.applyMakeupBySku(skuId, callback)
	Parameters: skuId: number, a SKU ID callback(optional): function, fires after the makeup effect is applied
	Return Value: None
	Changes the makeup effect by the given SKU ID, you could retrieve your SKU information from admin panel.
addEventListener	GlamAR.addEventListener(eventName, handlerFunction)
	Parameters: eventName: string, a named event handlerFunction: function, a handler
	Return Value: None
	Adds the listener to the given event name.
removeEventListener	GlamAR.removeEventListener(eventName, handlerFunction)
	Parameters: eventName: string, a named event handlerFunction: function, a handler
	Return Value: None
	Removes the given listener for the event name.
getAllSKUs	GlamAR.getAllSKUs()
	Parameters: None
	Return Value: Promise that resolves to an array of SKUs available for the given API key.
	Returns an array of available SKUs for the given API key.
reset	GlamAR.reset()
	Parameters: None
	Return Value: None
	Removes all the makeup effects from the canvas.
close	GlamAR.close()
	Parameters: None
	Return Value: None
	Closes canvas and back to main widget page.
snapshot	GlamAR.snapshot(contentType)
	Parameters: contentType: string, valid value: `base64` or `blob`
	Return Value: image in `base64` or `blob`
	Takes a snapshot of current result window.
isLoaded	GlamAR.isLoaded()
	Parameters: None
	Return Value: `true` if the module is loaded else `false`
	Returns status of module loading.
isLoading	GlamAR.isLoading()
	Parameters: None
	Return Value: `true` if the module is loading else `false`
	Returns status of module loading.

### Events #### Event Descriptions | Event | Payload | Description | | :------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------- | | loading | None | Fired when the GlamAR module is initiated and the SDK proceeds with the loading process. | | loaded | None | Fired when the GlamAR module is loaded. | | opened | None | Fired when the GlamAR module is opened. | | closed | None | Fired when the canvas is closed and the user returns to the main widget page. | | camera-opened | None | Fired when the camera is opened. | | camera-closed | None | Fired when the camera is closed. | | camera-failed | None | Fired when the camera fails. This can occur if the user refuses to grant permission or the app is unable to retrieve the video stream normally. | | photo-loaded | `Image` (base64): Returns the screenshot in base64 encoded format.

`Status` (string): Returns the status of the screenshot (success/failed). | Fired when a screenshot of the AR effect is successful or fails. | | sku-applied | None | Fired when a given SKU effect is applied. | | sku-failed | None | Fired when a given SKU is not applied successfully. | | reset | None | Fired when all the effects are reset. | | error | `Error` | Fired anytime an error occurs. | | upload-started | None | Fired when the upload mode dialogue is shown. | | upload-cancelled | None | Fired when the upload mode dialogue is canceled. | | subscription-invalid | `string`: Reason why the subscription is invalid. | Fired when the subscription is found to be invalid or expired. | ### Android Integration # Android GlamAR SDK provides tools to integrate augmented reality (AR) features into your Android application. The SDK is distributed as a local `.aar` file. This document covers the installation, initialization, and usage of the SDK, including details about `GlamArView` API, and `GlamAr` instance API. ## Installation 1. Add GlamAR dependency to your `build.gradle` file ```groovy dependencies { implementation 'io.pixelbin.glamar:glamar:1.0.0' } ``` 2. Sync your project with Gradle files. ## Initialization ### Initialize SDK in Application Class Initialize the SDK in your Application class to ensure it is set up when your app starts. ```kotlin class MyApplication : Application() { override fun onCreate() { super.onCreate() GlamAr.initialize(accessKey = "YOUR_ACCESS_KEY") } } ``` Don't forget to register your `Application` class in the `AndroidManifest.xml`: ```xml ``` ## GlamArView ### Setup To use `GlamArView`, add it to your layout: ```xml ``` ### Starting Preview Start the preview in various modes using `startPreview`: ```kotlin glamArView.startPreview(previewMode = PreviewMode.None) glamArView.startPreview(previewMode = PreviewMode.Camera) glamArView.startPreview(previewMode = PreviewMode.Image(imageUrl = "IMAGE_URL")) ``` ### Applying SKUs Apply a SKU to the `GlamArView`: ```kotlin glamArView.applySku(skuId = "SKU_ID", category = "CATEGORY") ``` ### Clearing View Clear the `GlamArView`: ```kotlin glamArView.clear() ``` ### Taking Snapshot Take a snapshot of the current view: ```kotlin glamArView.snapshot() ``` ## GlamAr Instance API ### Fetch SKU List Fetch a list of SKUs: ```kotlin GlamAr.getInstance().fetchSkuList(pageNo = 1, pageSize = 100) { result -> result.onSuccess { skuListResponse -> // Handle success }.onFailure { exception -> // Handle failure } } ``` ### Fetch Specific SKU Fetch details of a specific SKU: ```kotlin GlamAr.getInstance().fetchSku(id = "SKU_ID") { result -> result.onSuccess { item -> // Handle success }.onFailure { exception -> // Handle failure } } ``` ## Example Usage Here's a complete example demonstrating the usage of `GlamAr` and `GlamArView`: ```kotlin class MainActivity : AppCompatActivity() { private lateinit var glamArView: GlamArView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) glamArView = findViewById(R.id.glamARView) val applyBtn = findViewById