Spectacles AI Context

https://github.com/specs-devs/context
Admin
A curated collection of Spectacles development resources, frameworks, and examples optimized for...
Tokens:287,040
Snippets:2,576
Trust Score:4.7
License:MIT
Update:7 months ago
Show doc for...
Tokens:
Raw
### Start Local Web Server using Node.js serve package

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/webapp-setup.md

This command shows how to install and use the `serve` package globally with Node.js to start a local HTTP server. After installation, run `serve .` in your web app directory to serve the application and access it via the provided link.

```bash
npm install -g serve
serve .
```

--------------------------------

### Start Local Web Server using Python

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/webapp-setup.md

This command demonstrates how to start a local HTTP server using Python's built-in `http.server` module. Navigate to your web app directory in the terminal and run this command to serve the application locally on port 8000.

```bash
cd path/to/webapp
python3 -m http.server 8000
```

--------------------------------

### Initialize and Commit Git Repository (Bash)

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/complete-setup-guide.md

This snippet demonstrates the basic Git commands to initialize a new repository, add all files, and make an initial commit. It's a standard procedure for starting version control for a new project.

```bash
cd composite-stitcher
git init
git add .
git commit -m "Initial commit: Composite stitcher service with FFmpeg"
```

--------------------------------

### Project Setup and Configuration (Bash)

Source: https://github.com/specs-devs/context/blob/main/samples/DJ Specs/README.md

Guides through cloning the repository, initializing Git LFS for large file support, and setting up pre-commit hooks for development.

```bash
# Clone the repository
git clone <repository-url>
cd DJ-Specs

# Initialize Git LFS for large files
git lfs install
git lfs pull

# Set up pre-commit hooks
pre-commit install
```

--------------------------------

### Quick Start Model Training Workflow (Bash)

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snapML.mdx

A condensed bash script for quickly setting up the environment, preparing the dataset, training a YOLOv7 model, and exporting it to ONNX format for SnapML. This script assumes you have Git, Python, and necessary dependencies installed.

```bash
# 1. Set up environment in Paperspace with PyTorch template
git clone https://github.com/Snapchat/snapml-templates.git
git clone https://github.com/hartwoolery/yolov7
cd yolov7
git checkout export-snapml
pip install -r requirements.txt

# 2. Download dataset from Roboflow in YOLOv7 format
pip install --upgrade roboflow
# Use Roboflow API to download your dataset

# 3. Download pre-trained weights
wget https://github.com/WongKinYiu/yolov7/releases/download/v0.1/yolov7-tiny.pt

# 4. Train model
python train.py --data your-dataset/data.yaml --cfg cfg/training/yolov7-tiny.yaml \
  --weights yolov7-tiny.pt --img 224 224 --batch-size 64 --epochs 200 \
  --name detection --device 0 --hyp data/hyp.scratch.tiny.yaml

# 5. Export to ONNX for SnapML
python export.py --weights runs/train/detection/weights/best.pt --grid \
  --simplify --export-snapml --img-size 224 224 --max-wh 224

# 6. Import ONNX model to Lens Studio and set up class mappings
# See detailed steps below
```

--------------------------------

### Diagram Creation Flow Example

Source: https://github.com/specs-devs/context/blob/main/samples/Agentic Playground/README.md

Details the process of creating a diagram, starting from a user request and progressing through tool selection, content analysis, storage, and UI updates. It emphasizes the role of the ToolRouter and DiagramCreatorTool.

```text
"Create a diagram" → ToolRouter → DiagramCreatorTool → Content Analysis → DiagramStorage → GenerationQueue → UI Update
```

--------------------------------

### RPC: has_pledged_ever

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/Snapcloud-setup.md

Checks if the current user has pledged before.

```APIDOC
## RPC: `has_pledged_ever`

### Description
Checks if the current user already pledged before.

### Method
`POST` (or `GET` depending on how you call RPCs in your client)

### Endpoint
`/rpc/has_pledged_ever`

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "function": "has_pledged_ever"
}
```

### Response
#### Success Response (200)
- **has_pledged** (boolean) - `true` if the user has pledged before, `false` otherwise.

#### Response Example
```json
{
  "has_pledged": true
}
```

### SQL Code
```sql
create or replace function public.has_pledged_ever()
returns boolean
language sql
as $$
  select exists(
    select 1
    from public.kindness_pledges
    where user_id = auth.uid()
  );
$$;

grant execute on function public.has_pledged_ever() to anon, authenticated;
```
```

--------------------------------

### RPC: get_kindness_total_all

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/Snapcloud-setup.md

Returns the total number of pledges across all days.

```APIDOC
## RPC: `get_kindness_total_all`

### Description
Returns total pledges across all days.

### Method
`POST` (or `GET` depending on how you call RPCs in your client)

### Endpoint
`/rpc/get_kindness_total_all`

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "function": "get_kindness_total_all"
}
```

### Response
#### Success Response (200)
- **total_pledges** (bigint) - The total number of pledges made across all days.

#### Response Example
```json
{
  "total_pledges": 150
}
```

### SQL Code
```sql
create or replace function public.get_kindness_total_all()
returns bigint
language sql
stable
as $$
  select coalesce(sum(total), 0)
  from public.kindness_totals;
$$;

grant execute on function public.get_kindness_total_all() to anon, authenticated;
```
```

--------------------------------

### Configure Web App Supabase Keys

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/Snapcloud-setup.md

Configuration snippet for the web application to connect to the Supabase project. Replace the placeholders with the URL and Anon Key found in the Supabase Dashboard.

```javascript
export const SUPABASE_URL = 'YOUR_SUPABASE_URL';
export const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_PUBLIC_ANON_KEY';
```

--------------------------------

### Session Controller Setup and Readiness

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/spectacles-sync-kit/features/session-controller.mdx

This section details how to check if the SessionController has completed its setup process and is ready for use, and how to be notified when it becomes ready.

```APIDOC
## SessionController Readiness API

### Description
Provides methods to check the readiness status of the SessionController and to register callbacks for readiness events.

### Method
`notifyOnReady(callback: function)`

### Description
Registers a callback function to be executed once the SessionController has completed its setup. If the SessionController is already ready, the callback executes immediately.

### Method
`getIsReady(): boolean`

### Description
Returns a boolean indicating whether the SessionController has finished its setup process.

### Request Example
```typescript
// TypeScript Example
const sessionController = SessionController.getInstance();
sessionController.notifyOnReady(() => {
  console.log('SessionController is ready!');
});

if (sessionController.getIsReady()) {
  console.log('Session is already ready.');
}
```

```javascript
// JavaScript Example
global.sessionController.notifyOnReady(() => {
  console.log('SessionController is ready!');
});

if (global.sessionController.getIsReady()) {
  console.log('Session is already ready.');
}
```

### Response
#### Success Response (Callback Execution)
- The provided callback function is executed.

#### Success Response (getIsReady)
- `true` if the SessionController is ready.
- `false` if the SessionController is not yet ready.

```

--------------------------------

### Initialize Auth Kit OAuth2 Client

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/auth-kit/getting-started.mdx

Shows the standard implementation for importing the OAuth2 class and configuring it with client credentials and endpoints for a Spectacles Lens project.

```typescript
import { OAuth2 } from 'AuthKit.lspkg/Core/OAuth2';

const oauth = new OAuth2({
  clientId: 'YOUR_CLIENT_ID',
  authorizationUri: 'https://example.com/oauth/authorize',
  tokenUri: 'https://example.com/oauth/token',
  refreshUri: 'https://example.com/oauth/refresh',
  clientSecret: 'YOUR_CLIENT_SECRET',
  redirectUri: 'https://www.spectacles.com/deeplink/specslink/oauth2redirect/LENS_ID',
});
```

--------------------------------

### Setup Commerce-Enabled Scene with TypeScript

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/commerce-kit/examples-userflows.mdx

This TypeScript code sets up a scene with purchasable items using CommerceKit. It defines a product catalog, initializes the CommerceKit instance, handles product purchases, and checks user ownership. Dependencies include the CommerceKit.lspkg library.

```typescript
import { CommerceKit } from 'CommerceKit.lspkg/CommerceKit';
import { CommercePrice } from 'CommerceKit.lspkg/Helper/CommercePrice';
import { CommerceProduct } from 'CommerceKit.lspkg/Helper/CommerceProduct';

@component
export class CommerceExample extends BaseScriptComponent {
  // Define your product catalog
  productCatalog: CommerceProduct[] = [
    {
      id: 'premium_filter',
      type: 'NonConsumable',
      price: {
        price: 2.99,
        currency: 'USD',
      },
      displayName: 'Premium AR Filter',
      category: 'Unlock exclusive visual effects',
      iconUri: '',
      extras: '',
    },
    {
      id: 'pro_features',
      type: 'NonConsumable',
      price: {
        price: 4.99,
        currency: 'USD',
      },
      displayName: 'Pro Features Pack',
      category: 'Access advanced AR tools and customization',
      iconUri: '',
      extras: '',
    },
  ];

  onAwake() {
    this.initializeCommerce();
    this.createEvent('OnStartEvent').bind(() => {
      this.checkUserPurchases();
    });
  }

  // Initialize Commerce Kit
  async initializeCommerce() {
    try {
      const commerceKit = CommerceKit.getInstance();
      await commerceKit.initializeCatalog(this.productCatalog);
      print('Commerce Kit initialized successfully');
    } catch (error) {
      print('Failed to initialize Commerce Kit: ' + error);
    }
  }
  async purchaseProduct(productId: string) {
    const commerceKit = CommerceKit.getInstance();

    try {
      // Check if user already owns the product
      const ownership = await commerceKit.isProductOwned(productId);
      if (ownership) {
        print('User already owns this product');
        this.unlockProduct(productId);
        return;
      }

      // Request purchase
      const result = await commerceKit.purchaseProduct(productId);

      if (result.success) {
        this.showPurchaseSuccess(productId);
        this.unlockProduct(productId);
      } else if (result.cancelled) {
        this.showPurchaseError('Purchase cancelled');
      } else if (!result.success) {
        this.showPurchaseError('Purchase failed');
      }
    } catch (error) {
      this.showPurchaseError('An unexpected error occurred: ' + error);
    }
  }
  private unlockProduct(productId: string) {
    // Unlock the purchased product features here
    print(`Unlocking features for product: ${productId}`);
    // Example: Enable premium filter or pro features in the app
  }
  private showPurchaseError(message: string) {
    // Implement UI feedback to show purchase error
    print('Purchase Error: ' + message);
  }
  private showPurchaseSuccess(productId: string) {
    // Implement UI feedback to show purchase success
    print('Purchase Success for product: ' + productId);
  }

  async checkUserPurchases() {
    const commerceKit = CommerceKit.getInstance();
    const productIds = ['premium_filter', 'pro_features'];

    try {
      await this.commerceKit.client;

      // Check ownership for each product
      for (const productId of productIds) {
        const ownership = commerceKit.isProductOwned(productId);

        if (ownership) {
          print(`User owns product: ${productId}`);
          this.unlockProduct(productId);
        } else {
          print(`User does not own product: ${productId}`);
        }
      }

      print('Ownership check completed');
    } catch (error) {
      print('Ownership check failed: ' + error);
    }
  }
}
```

--------------------------------

### Show Start Menu Programmatically - TypeScript

Source: https://github.com/specs-devs/context/blob/main/frameworks/SpectaclesSyncKit/SpectaclesSyncKit.lspkg/StartMenu/README.md

Demonstrates how to programmatically display the start menu using the StartMenuController. This is useful for scenarios where manual user interaction is required to initiate the experience.

```typescript
import { StartMenuController } from "SpectaclesSyncKit/StartMenu/StartMenuController"

// Show the start menu
StartMenuController.getInstance().showStartMenu()
```

--------------------------------

### Deploy Railway and Supabase Services via CLI

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/complete-setup-guide.md

Commands to automate deployment for the Railway service and manual deployment for Supabase Edge Functions. These scripts handle version control commits and service updates.

```bash
cd composite-stitcher
git add .
git commit -m "Your change description"
git push

cd "/Users/alessiograncini/Desktop/Snap Cloud Media Suite"
export SUPABASE_ACCESS_TOKEN="YOUR TOKEN"
supabase functions deploy trigger-composite-stitch --project-ref YOUR PROJECT REF
git add supabase/
git commit -m "Update edge function"
git push
```

--------------------------------

### Debug Output Example

Source: https://github.com/specs-devs/context/blob/main/samples/Agentic Playground/README.md

Illustrates example debug output messages from different components of the system. These messages provide insights into AI routing decisions, tool processing, and reasoning.

```text
AgentOrchestrator: 🧠 AI routing decision: "summary_tool" for query: "What did the teacher say about..."
ToolRouter: 💡 Reasoning: Focuses on previous lecture summary content
SummaryTool: 📋 Processing summary-focused query with character limit 150
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snapML.mdx

Commands for managing environment packages, including installing specific versions for compatibility or adding utilities for ONNX model simplification.

```bash
# Install onnx-simplifier for model optimization
pip install onnx-simplifier

# Install specific protobuf version to resolve export errors
pip install protobuf==3.20.3
```

--------------------------------

### Define Product Configuration Identifiers

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/commerce-kit/get-started.mdx

Examples of string-based identifiers and display labels used within the Lens Studio Inspector to configure the product catalog.

```text
Product ID: "premium_filters"
Display Name: "Premium Filters Pack"
Category: "Filters"
```

--------------------------------

### Repository Setup

Source: https://github.com/specs-devs/context/blob/main/samples/Think Out Loud/README.md

Standard commands to initialize the project environment.

```bash
git clone [repository-url]
cd think-out-loud
```

--------------------------------

### Initialize and Start Script Execution

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/databases.mdx

This code snippet initializes an instance of the 'DatabaseExampleJS' class and then calls its 'onAwake' method to begin the script's execution. This is the entry point for running the database operations defined in the script.

```javascript
// Initialize and start the script
var instance = new DatabaseExampleJS();
instance.onAwake();
```

--------------------------------

### RPC: Get Kindness Totals

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/Snapcloud-setup.md

A collection of stable SQL functions to retrieve aggregate pledge data or check user pledge status. These functions are exposed to both anonymous and authenticated users.

```sql
create or replace function public.get_kindness_total_all()
returns bigint
language sql
stable
as $$
  select coalesce(sum(total), 0)
  from public.kindness_totals;
$$;

grant execute on function public.get_kindness_total_all() to anon, authenticated;

create or replace function public.has_pledged_ever()
returns boolean
language sql
as $$
  select exists(
    select 1
    from public.kindness_pledges
    where user_id = auth.uid()
  );
$$;

grant execute on function public.has_pledged_ever() to anon, authenticated;
```

--------------------------------

### Deploy Supabase Edge Function (Bash)

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/complete-setup-guide.md

This command deploys a Supabase Edge Function named 'trigger-composite-stitch' to your Supabase project. It requires the Supabase CLI to be installed and an access token for authentication.

```bash
cd "/Users/alessiograncini/Desktop/Snap Cloud Media Suite"
export SUPABASE_ACCESS_TOKEN="YOUR TOKEN"
supabase functions deploy trigger-composite-stitch --project-ref YOUR PROJECT REF
```

--------------------------------

### Supabase Edge Function Response (JSON)

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/complete-setup-guide.md

This JSON object represents a successful response from the Supabase Edge Function after initiating a stitching job. It confirms the job has started and provides status details.

```json
{
  "success": true,
  "message": "Stitching job started",
  "sessionId": "composite_1234567890_abc",
  "data": {
    "status": "processing",
    "sessionId": "composite_1234567890_abc",
    "message": "Stitching job started"
  }
}
```

--------------------------------

### Retrieve and Initialize a CloudStore Instance

Source: https://github.com/specs-devs/context/blob/main/samples/Agentic Playground/Context/persistent-storage.md

Demonstrates how to create a CloudStore instance using CloudStorageOptions. It includes the asynchronous callback pattern required to handle successful initialization or potential errors.

```javascript
const cloudStorageOptions = CloudStorageOptions.create();

script.cloudStorageModule.getCloudStore(
  cloudStorageOptions,
  onCloudStoreReady,
  onError
);

function onCloudStoreReady(store) {
  print('CloudStore created');
  script.store = store;
}

function onError(code, message) {
  print('Error: ' + code + ' ' + message);
}
```

--------------------------------

### Start OAuth2 Authentication Flow

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/auth-kit/getting-started.mdx

Initiates the OAuth2 authorization process through the Spectacles App. Handles potential errors during the process and retrieves the access token upon successful authorization.

```typescript
try {
  // Start the OAuth2 authorization process through Spectacles App
  const token = await oauth.authorize('read write profile');

  if (token) {
    print('Successfully authorized via Spectacles App!');

    // Get access token for authenticated API calls
    const accessToken = await oauth.getAccessToken();

    // Make authenticated requests to your OAuth2 provider
    const response = await fetch('https://api.provider.com/user', {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });
  }
} catch (error) {
  print(`Authorization failed: ${error.message}`);
}
```

--------------------------------

### Initialize Supabase Client and Authenticate User in Lens Studio

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/getting-started.mdx

Demonstrates how to initialize the Supabase client using project credentials and perform user authentication using the signInWithIdToken method. This implementation handles client creation, error checking, and session validation within the Lens Studio environment.

```TypeScript
import {
  createClient,
  SupabaseClient,
} from 'SupabaseClient.lspkg/supabase-snapcloud';

@component
export class MyComponent extends BaseScriptComponent {
  @input
  supabaseProject: SupabaseProject;

  private client: SupabaseClient;
  private uid;

  onAwake() {
    this.createEvent('OnStartEvent').bind(() => {
      this.onStart();
    });
  }

  onStart() {
    this.initSupabase();
  }

  async initSupabase() {
    const options = { realtime: { heartbeatIntervalMs: 2500 } };
    this.client = createClient(this.supabaseProject.url, this.supabaseProject.publicToken, options);
    if (this.client) await this.signInUser();
  }

  async signInUser() {
    const { data, error } = await this.client.auth.signInWithIdToken({
      provider: 'snapchat',
      token: '',
    });
    if (error) print('Sign in FAILED: ' + JSON.stringify(error));
    else if (data && data.user) print('Sign in SUCCESS!');
  }
}
```

```JavaScript
const createClient = require('SupabaseClient.lspkg/supabase-snapcloud').createClient;
//@input Asset.SupabaseProject supabaseProject

var GettingStarted = function () {
  this.client = null;
  this.onAwake = function () {
    script.createEvent('OnStartEvent').bind(() => { this.onStart(); });
  };
  this.initSupabase = async function () {
    const options = { realtime: { heartbeatIntervalMs: 2500 } };
    this.client = createClient(script.supabaseProject.url, script.supabaseProject.publicToken, options);
    if (this.client) await this.signInUser();
  };
  this.signInUser = async function () {
    const { data, error } = await this.client.auth.signInWithIdToken({ provider: 'snapchat', token: '' });
    if (error) print('Sign in FAILED: ' + JSON.stringify(error));
  };
};
```

--------------------------------

### Create and Manage Communication Session

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/spectacles-mobile-kit/getting-started.mdx

Establish a secure communication session between the mobile application and the Lens. This snippet demonstrates how to create a session, handle connection events, and start the communication stream.

```JavaScript
const session = mobileKitModule.createSession()
session.onDisconnected.add(() => {
    print('disconnected!')
})
session.onConnected.add(() => {
    print('connected!')
})
session.start()
```

--------------------------------

### Initialize and Authenticate Supabase Client

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/databases.mdx

Demonstrates how to initialize the Supabase client using project credentials and authenticate a user via SnapChat ID tokens. This is a prerequisite for all subsequent database operations.

```JavaScript
this.client = createClient(
  script.supabaseProject.url,
  script.supabaseProject.publicToken,
  options
);

const { data, error } = await this.client.auth.signInWithIdToken({
  provider: 'snapchat',
  token: '',
});
```

--------------------------------

### Crop Camera Texture Example (TypeScript)

Source: https://github.com/specs-devs/context/blob/main/packages/CropCameraTexture/Assets/CropCameraTexture.lspkg/README.md

Example usage of the CameraTexture component to retrieve the cropped camera texture. This snippet demonstrates how to access the component and its method to get the processed texture.

```typescript
const cameraTextureComponent = script.getComponent("CameraTexture") as CameraTexture;
const croppedTexture = cameraTextureComponent.getCameraTexture();
```

--------------------------------

### Initialize Commerce Kit Catalog

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/commerce-kit/examples-userflows.mdx

Sets up the Commerce Kit by initializing the product catalog. This involves defining product details such as ID, type, price, display name, category, and icon URI. It requires the CommerceKit, CommercePrice, and CommerceProduct modules from the CommerceKit.lspkg.

```typescript
import { CommerceKit } from 'CommerceKit.lspkg/CommerceKit';
import { CommercePrice } from 'CommerceKit.lspkg/Helper/CommercePrice';
import { CommerceProduct } from 'CommerceKit.lspkg/Helper/CommerceProduct';

@component
export class CommerceExample extends BaseScriptComponent {
  // Define your product catalog
  productCatalog: CommerceProduct[] = [
    {
      id: 'premium_filter',
      type: 'NonConsumable',
      price: {
        price: 2.99,
        currency: 'USD',
      },
      displayName: 'Premium AR Filter',
      category: 'Unlock exclusive visual effects',
      iconUri: '',
      extras: '',
    },
    {
      id: 'pro_features',
      type: 'NonConsumable',
      price: {
        price: 4.99,
        currency: 'USD',
      },
      displayName: 'Pro Features Pack',
      category: 'Access advanced AR tools and customization',
      iconUri: '',
      extras: '',
    },
  ];

  onAwake() {
    this.initializeCommerce();
  }

  // Initialize Commerce Kit
  async initializeCommerce() {
    try {
      const commerceKit = CommerceKit.getInstance();
      await commerceKit.initializeCatalog(this.productCatalog);
      print('Commerce Kit initialized successfully');
    } catch (error) {
      print('Failed to initialize Commerce Kit: ' + error);
    }
  }
}
```

--------------------------------

### Initialize Supabase Client (JavaScript)

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/storage.mdx

Initializes the Supabase client using project URL and public token, with options for real-time heartbeat. It logs the initialization status and proceeds to sign in the user.

```javascript
this.initSupabase = async function () {
    this.log('Initializing Supabase client...');

    const options = {
      realtime: {
        heartbeatIntervalMs: 2500,
      },
    };

    this.client = createClient(
      script.supabaseProject.url,
      script.supabaseProject.publicToken,
      options
    );

    if (this.client) {
      this.log('Client created successfully');
      await this.signInUser();

      if (this.uid) {
        this.log('Running storage examples...');
        await this.runStorageExamples();
      }
    }
  };
```

--------------------------------

### GET /health

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/railway-guide.md

Performs a health check to verify that the Composite Stitcher service is running and accessible.

```APIDOC
## GET /health

### Description
Checks the operational status of the service.

### Method
GET

### Endpoint
/health

### Response
#### Success Response (200)
- **status** (string) - The current status of the service (e.g., "healthy").
- **service** (string) - The name of the service.

#### Response Example
{
  "status": "healthy",
  "service": "composite-stitcher"
}
```

--------------------------------

### Install Snap Cloud CLI

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/CLI.mdx

Instructions for installing the CLI on macOS using Homebrew and on Windows using the Scoop package manager. These commands set up the necessary environment to interact with Snap Cloud services locally.

```bash
brew install supabase/tap/supabase
```

```bash
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase
```

--------------------------------

### Download and Initialize Supabase Storage Assets in Lens Studio

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/storage.mdx

This TypeScript script demonstrates how to initialize a Supabase client, authenticate a user, and fetch assets from a storage bucket. It includes logic to list files and provides placeholders for handling image, 3D model, and audio downloads within the Lens Studio environment.

```TypeScript
import {
  createClient,
  SupabaseClient,
} from 'SupabaseClient.lspkg/supabase-snapcloud';

const remoteMediaModule = require('LensStudio:RemoteMediaModule');
const internetModule = require('LensStudio:InternetModule');

@component
export class StorageExample extends BaseScriptComponent {
  @input
  @hint('Supabase Project asset from Asset Browser')
  supabaseProject: SupabaseProject;

  @input
  @hint('Storage bucket name')
  bucketName: string = 'test-bucket';

  @input
  @hint("Image file path in bucket (e.g., 'images/spectacles.jpg')")
  imageFilePath: string = 'image.png';

  @input
  @hint("3D model file path in bucket (e.g., 'models/rabbit.glb')")
  modelFilePath: string = 'model.glb';

  @input
  @hint("Audio file path in bucket (e.g., 'audio/chill.mp3')")
  audioFilePath: string = 'audio.mp3';

  @input
  @hint('Image component to display downloaded texture')
  image: Image;

  @input
  @allowUndefined
  @hint('Optional: Parent scene object for the loaded 3D model')
  modelParent: SceneObject;

  @input
  @allowUndefined
  @hint('Optional: Scene object with AudioComponent to play loaded audio')
  audioPlayer: SceneObject;

  @input
  @allowUndefined
  @hint('Optional: Material to use for 3D models')
  defaultMaterial: Material;

  private client: SupabaseClient;
  private uid: string;

  onAwake() {
    this.createEvent('OnStartEvent').bind(() => {
      this.onStart();
    });
  }

  onStart() {
    this.initSupabase();
  }

  async initSupabase() {
    this.log('Initializing Supabase client...');

    const options = {
      realtime: {
        heartbeatIntervalMs: 2500,
      },
    };

    this.client = createClient(
      this.supabaseProject.url,
      this.supabaseProject.publicToken,
      options
    );

    if (this.client) {
      this.log('Client created successfully');
      await this.signInUser();

      if (this.uid) {
        this.log('Running storage examples...');
        await this.runStorageExamples();
      }
    }
  }

  async signInUser() {
    this.log('Signing in user...');

    const { data, error } = await this.client.auth.signInWithIdToken({
      provider: 'snapchat',
      token: '',
    });

    if (error) {
      this.log('Sign in error: ' + JSON.stringify(error));
    } else {
      const { user, session } = data;
      this.uid = JSON.stringify(user.id).replace(/^"(.*)"$/, '$1');
      this.log('User authenticated');
    }
  }

  async runStorageExamples() {
    this.log('--- STORAGE EXAMPLES START ---');

    await this.testListFiles();

    await this.delay(500);
    await this.testDownloadImage();

    if (this.modelParent && this.modelFilePath) {
      await this.delay(500);
      await this.testDownload3DModel();
    }

    if (this.audioPlayer && this.audioFilePath) {
      await this.delay(500);
      await this.testDownloadAudio();
    }

    this.log('--- STORAGE EXAMPLES COMPLETE ---');
  }

  async testListFiles() {
    this.log('Listing files in bucket: ' + this.bucketName);

    const { data, error } = await this.client.storage
      .from(this.bucketName)
      .list('', {
        limit: 10,
        offset: 0,
      });

    if (error) {
      this.log('List files failed: ' + JSON.stringify(error));
      return;
    }

    if (data && data.length > 0) {
      this.log('Found ' + data.length + ' files:');
      data.forEach((file, index) => {
        this.log(
          '  ' +
            (index + 1) +
            '. ' +
            file.name +
            ' (' +
            file.metadata.size +
            ' bytes)'
        );
      });
    } else {
      this.log('No files found in bucket');
    }
  }
```

--------------------------------

### Sign Out User from Auth Kit

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/auth-kit/getting-started.mdx

Clears all stored tokens associated with the user, effectively signing them out from the Auth Kit.

```typescript
// Clear stored tokens and sign out user from Auth Kit
oauth.signOut();
```

--------------------------------

### Install Dependencies and Export Model to ONNX for SnapML (Python)

Source: https://github.com/specs-devs/context/blob/main/samples/SnapML Starter/Assets/Spatialization/Scripts/SnapML-Monitor-Notebook.ipynb

Installs required Python packages including protobuf, onnx, onnx-graphsurgeon, and onnx-simplifier. It then executes the export script to convert model weights to ONNX format, optimized for SnapML by excluding box decoding and NMS. The script requires specifying the weight file path and image dimensions.

```python
!pip install "protobuf<4.21.3"
!pip install "onnx>=1.9.0"
!pip install onnx-graphsurgeon
!pip install --user "onnx-simplifier>=0.3.6"

!python export.py \
  --weights ./runs/train/detection8/weights/best.pt \
  --grid \
  --simplify \
  --export-snapml \
  --img-size $IMG_SIZE $IMG_SIZE \
  --max-wh $IMG_SIZE
```

--------------------------------

### Railway Stitching Service - Health Check

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/complete-setup-guide.md

Checks the health status of the composite stitching service hosted on Railway.

```APIDOC
## GET /health

### Description
Endpoint to check the health status of the stitching service.

### Method
GET

### Endpoint
https://composite-stitcher-production.up.railway.app/health

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **status** (string) - Indicates the health status of the service.

#### Response Example
```json
{
  "status": "ok"
}
```
```

--------------------------------

### Configure Instantiation with InstantiationOptions

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/spectacles-sync-kit/features/prefab-instantiation.mdx

Demonstrates how to use the InstantiationOptions class to define ownership, persistence, custom data stores, and transform properties when instantiating a prefab. This approach provides a structured way to handle success and error callbacks.

```TypeScript
onAwake() {
    this.sessionController: SessionController = SessionController.getInstance()
    this.instantiator.notifyOnReady(() => { this.onReady() })
}

onReady() {
    const customDataStore = GeneralDataStore.create()
    customDataStore.putString("displayName", this.sessionController.getLocalUserName())

    const options = new InstantiationOptions()
    options.claimOwnership = true
    options.persistence = 'Session'
    options.localPosition = new vec3(0, 0, 0)
    options.localRotation = quat.quatIdentity()
    options.localScale = new vec3(0, 0, 0)
    options.onSuccess = (networkRootInfo) => {print("Success!")}
    options.onError = (error) => {print("Error!")}
    options.customDataStore = customDataStore

    this.instantiator.instantiate(this.prefab, options)
}
```

```JavaScript
const customDataStore = GeneralDataStore.create();
customDataStore.putString(
  'displayName',
  global.sessionController.getLocalUserName()
);

const options = new InstantiationOptions();
options.claimOwnership = true;
options.localPosition = new vec3(0, 0, 0);
options.localRotation = quat.quatIdentity();
options.localScale = new vec3(0, 0, 0);
options.persistence = 'Session';
options.onSuccess = function (networkRootInfo) {
  print('Success!');
};
options.onError = function (error) {
  print('Error!');
};
options.customDataStore = customDataStore;

instantiator.instantiate(prefab, options);
```

--------------------------------

### Full ASR Example Script in TypeScript

Source: https://github.com/specs-devs/context/blob/main/samples/Agentic Playground/Context/asr-module.md

A complete TypeScript script demonstrating the ASR Module integration. It includes initializing the module, setting up transcription options with callbacks, starting the transcription on awake, and providing a method to stop the session. This serves as a comprehensive example for implementation.

```typescript
@component
export class AsrExample extends BaseScriptComponent {
  private asrModule = require('LensStudio:AsrModule');

  private onTranscriptionUpdate(eventArgs: AsrModule.TranscriptionUpdateEvent) {
    print(
      `onTranscriptionUpdateCallback text=${eventArgs.text}, isFinal=${eventArgs.isFinal}`
    );
  }

  private onTranscriptionError(eventArgs: AsrModule.AsrStatusCode) {
    print(`onTranscriptionErrorCallback errorCode: ${eventArgs}`);
    switch (eventArgs) {
      case AsrModule.AsrStatusCode.InternalError:
        print('stopTranscribing: Internal Error');
        break;
      case AsrModule.AsrStatusCode.Unauthenticated:
        print('stopTranscribing: Unauthenticated');
        break;
      case AsrModule.AsrStatusCode.NoInternet:
        print('stopTranscribing: No Internet');
        break;
    }
  }

  onAwake(): void {
    const options = AsrModule.AsrTranscriptionOptions.create();
    options.silenceUntilTerminationMs = 1000;
    options.mode = AsrModule.AsrMode.HighAccuracy;
    options.onTranscriptionUpdateEvent.add((eventArgs) =>
      this.onTranscriptionUpdate(eventArgs);
    );
    options.onTranscriptionErrorEvent.add((eventArgs) =>
      this.onTranscriptionError(eventArgs);
    );

    this.asrModule.startTranscribing(options);
  }

  private stopSession(): void {
    this.asrModule.stopTranscribing();
  }
}
```

--------------------------------

### Initialize SpectaclesMobileKitModule

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/spectacles-mobile-kit/getting-started.mdx

Access the SpectaclesMobileKitModule to enable interaction between your mobile application and the Lens. This module serves as the primary entry point for the SDK.

```TypeScript
private module = require('LensStudio:SpectaclesMobileKitModule');
```

```JavaScript
const module = require('LensStudio:SpectaclesMobileKitModule');
```

--------------------------------

### Download and Instantiate GLTF with Animations

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/apis/internet-access.mdx

Fetches a GLTF file from a remote URL, applies conversion settings, instantiates it into the scene, and triggers animation playback. Requires InternetModule and RemoteMediaModule.

```TypeScript
@component
export class DownloadGltfExample extends BaseScriptComponent {
  @input
  material: Material;

  @input
  cameraObject: SceneObject;

  private internetModule: InternetModule = require('LensStudio:InternetModule');
  private remoteMediaModule: RemoteMediaModule = require('LensStudio:RemoteMediaModule');
  onAwake() {
    let gltfUrl: string = 'YOUR_GLTF_URL_HERE';

    if (!this.internetModule || !this.remoteMediaModule) {
      print('Internet Module or Remote Media Module is missing.');
      return;
    }

    try {
      print('Fetching gltf asset...');
      let resource: DynamicResource =
        this.internetModule.makeResourceFromUrl(gltfUrl);

      if (resource) {
        this.remoteMediaModule.loadResourceAsGltfAsset(
          resource,
          (gltfAsset) => {
            let gltfSettings = GltfSettings.create();
            gltfSettings.convertMetersToCentimeters = true;
            gltfAsset.tryInstantiateAsync(
              this.sceneObject,
              this.material,
              (sceneObj) => {
                let cameraPosition = this.cameraObject
                  .getTransform()
                  .getWorldPosition();
                sceneObj
                  .getTransform()
                  .setWorldPosition(
                    new vec3(
                      cameraPosition.x,
                      cameraPosition.y,
                      cameraPosition.z - 100
                    )
                  );
                let animationPlayer = sceneObj
                  .getChild(0)
                  .getChild(0)
                  .getComponent('AnimationPlayer');
                animationPlayer.playClipAt('Talk', 0);
              },
              (error) => { print('Error: ' + error); },
              (progress) => { print('Progress: ' + progress); },
              gltfSettings
            );
          },
          (error) => { print('Error: ' + error); }
        );
      }
    } catch (error) {
      print('Error fetching gltf asset: ' + error);
    }
  }
}
```

```JavaScript
//@input Asset.Material material
//@input SceneObject cameraObject

let internetModule = require('LensStudio:InternetModule');
let remoteMediaModule = require('LensStudio:RemoteMediaModule');

let gltfUrl = 'YOUR_GLTF_URL_HERE';

if (!internetModule || !remoteMediaModule) {
  print('Internet Module or Remote Media Module is missing.');
  return;
}

try {
  let resource = internetModule.makeResourceFromUrl(gltfUrl);
  if (resource) {
    remoteMediaModule.loadResourceAsGltfAsset(
      resource,
      (gltfAsset) => {
        let gltfSettings = GltfSettings.create();
        gltfSettings.convertMetersToCentimeters = true;

        gltfAsset.tryInstantiateAsync(
          script.sceneObject,
          script.material,
          (sceneObj) => {
            let cameraPosition = script.cameraObject.getTransform().getWorldPosition();
            sceneObj.getTransform().setWorldPosition(new vec3(cameraPosition.x, cameraPosition.y, cameraPosition.z - 100));
            let animationPlayer = sceneObj.getChild(0).getChild(0).getComponent('Component.AnimationPlayer');
            animationPlayer.playClipAt('Talk', 0);
          }
        );
      }
    );
  }
} catch (error) {
  print('Error: ' + error);
}
```

--------------------------------

### RPC: pledge_and_total_once

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/Snapcloud-setup.md

This function inserts a user's pledge if they haven't pledged before and returns the total number of pledges made all-time.

```APIDOC
## RPC: `pledge_and_total_once`

### Description
This function inserts the user’s pledge only if not pledged before, and returns the total pledges (all time). The trigger increments the daily total only on the first pledge.

### Method
`POST` (or `GET` depending on how you call RPCs in your client)

### Endpoint
`/rpc/pledge_and_total_once`

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "function": "pledge_and_total_once"
}
```

### Response
#### Success Response (200)
- **total_pledges** (bigint) - The total number of pledges made all-time.

#### Response Example
```json
{
  "total_pledges": 150
}
```

### SQL Code
```sql
create or replace function public.pledge_and_total_once()
returns bigint
language plpgsql
as $$
declare
  t bigint := 0;
begin
  insert into public.kindness_pledges (user_id)
  values (auth.uid())
  on conflict (user_id) do nothing;

  -- Trigger increments daily total only on first pledge
  select coalesce(sum(total), 0) into t
  from public.kindness_totals;

  return t;
end;
$$;

grant execute on function public.pledge_and_total_once() to anon, authenticated;
```
```

--------------------------------

### Download Audio and Apply to Object

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/storage.mdx

Fetches the public URL for an audio file from a bucket, creates a resource from the URL, and loads it as an audio track asset. The loaded audio asset is then applied to an existing audio player component, with volume and playback settings configured. Includes error handling for URL retrieval, resource creation, and asset loading.

```typescript
async testDownloadAudio() {
    this.log('Downloading audio: ' + this.audioFilePath);
    this.log('From bucket: ' + this.bucketName);

    const publicUrl = this.client.storage
      .from(this.bucketName)
      .getPublicUrl(this.audioFilePath);

    if (!publicUrl || !publicUrl.data || !publicUrl.data.publicUrl) {
      this.log('Failed to get public URL for audio');
      return;
    }

    const audioUrl = publicUrl.data.publicUrl;
    this.log('Audio URL: ' + audioUrl);

    try {
      const resource = (internetModule as any).makeResourceFromUrl(audioUrl);

      if (!resource) {
        this.log('Failed to create resource from URL');
        return;
      }

      remoteMediaModule.loadResourceAsAudioTrackAsset(
        resource,
        (audioAsset) => {
          this.log('Audio asset loaded successfully');
          this.applyAudioToObject(audioAsset);
        },
        (error) => {
          this.log('Error loading audio asset: ' + error);
        }
      );
    } catch (err) {
      this.log('Error downloading audio: ' + err);
    }
  }

  applyAudioToObject(audioAsset: AudioTrackAsset) {
    try {
      if (!this.audioPlayer) {
        this.log('No audio player assigned');
        return;
      }

      let audioComponent = this.audioPlayer.getComponent(
        'Component.AudioComponent'
      );

      if (!audioComponent) {
        audioComponent = this.audioPlayer.createComponent(
          'Component.AudioComponent'
        );
        this.log('Created AudioComponent');
      }

      audioComponent.audioTrack = audioAsset;
      audioComponent.volume = 0.8;
      audioComponent.play(1);

      this.log('Audio applied and playing');
    } catch (error) {
      this.log('Error applying audio: ' + error);
    }
  }
```

--------------------------------

### Railway Stitching Service - Stitch Video

Source: https://github.com/specs-devs/context/blob/main/samples/Snap Cloud/ExternalServicesExamples/_guides/complete-setup-guide.md

Initiates the video stitching process by combining frames and audio chunks into an MP4 file.

```APIDOC
## POST /stitch

### Description
Initiates the video stitching process. This endpoint downloads frames and audio, stitches them using FFmpeg, and uploads the final MP4 file.

### Method
POST

### Endpoint
https://composite-stitcher-production.up.railway.app/stitch

### Parameters
#### Query Parameters
None

#### Request Body
- **sessionId** (string) - Required - Unique identifier for the session.
- **bucket** (string) - Required - The Supabase Storage bucket name.
- **frameRate** (integer) - Required - The desired frame rate for the output video.
- **sampleRate** (integer) - Required - The audio sample rate.

### Request Example
```json
{
  "sessionId": "composite_1234567890_abc",
  "bucket": "specs-bucket",
  "frameRate": 30,
  "sampleRate": 44100
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message that the stitching job has started.
- **sessionId** (string) - The session ID for which the stitching was initiated.
- **data** (object) - Additional details about the job status.
  - **status** (string) - The current status of the stitching job (e.g., "processing").
  - **sessionId** (string) - The session ID.
  - **message** (string) - A message indicating the job has started.

#### Response Example
```json
{
  "success": true,
  "message": "Stitching job started",
  "sessionId": "composite_1234567890_abc",
  "data": {
    "status": "processing",
    "sessionId": "composite_1234567890_abc",
    "message": "Stitching job started"
  }
}
```
```

--------------------------------

### GeminiAssistant Instructions - TypeScript

Source: https://github.com/specs-devs/context/blob/main/samples/Agentic Playground/README.md

Provides concise instructions for the GeminiAssistant, outlining its function as an educational AI tutor. It highlights the need for clear, accurate explanations and adherence to a character limit under 300.

```typescript
const instructions = `You are an educational AI tutor. Provide clear, accurate explanations of educational concepts. Keep responses under 300 characters. Be encouraging and supportive.`;
```

--------------------------------

### Insert Test Pledge Data

Source: https://github.com/specs-devs/context/blob/main/docs/about-spectacles-features/snap-cloud/WKD/Snapcloud-setup.md

SQL command to manually insert a test user into the kindness_pledges table to verify trigger functionality and application connectivity.

```sql
insert into public.kindness_pledges (user_id)
values ('11111111-1111-1111-1111-111111111111');
```

--------------------------------

### Visualize Training Progress with TensorBoard

Source: https://github.com/specs-devs/context/blob/main/samples/SnapML Starter/Assets/Spatialization/Scripts/SnapML-Monitor-Notebook.ipynb

Loads the TensorBoard extension and launches the dashboard to visualize training logs stored in the specified directory.

```python
%load_ext tensorboard
%tensorboard --logdir yolov7/runs/train
```

--------------------------------

### Instantiate with Plain Options Object

Source: https://github.com/specs-devs/context/blob/main/docs/spectacles-frameworks/spectacles-sync-kit/features/prefab-instantiation.mdx

Shows how to pass a simple JavaScript object as the second parameter to the instantiate method as a lightweight alternative to the InstantiationOptions class.

```TypeScript
onAwake() {
    this.instantiator.notifyOnReady(() => { this.onReady() })
}

onReady() {
    this.instantiator.instantiate(this.prefab, {
        claimOwnership: true,
        persistence: 'Session',
        localPosition: new vec3(0, 0, -100),
    })
}
```

```JavaScript
instantiator.instantiate(prefab, {
  claimOwnership: true,
  persistence: 'Session',
  localPosition: new vec3(0, 0, -100),
});
```

--------------------------------

### OpenAIAssistant Instructions - TypeScript

Source: https://github.com/specs-devs/context/blob/main/samples/Agentic Playground/README.md

Sets the core instructions for the OpenAIAssistant, defining its role as an educational AI tutor. It emphasizes clear explanations, breaking down complex topics, and adhering to a strict 300-character response limit.

```typescript
const instructions = `You are an educational AI tutor designed to help students learn and understand complex topics. 

Your primary goals are to:
- Provide clear, accurate explanations of educational concepts
- Break down complex topics into digestible parts
- Use examples and analogies to enhance understanding
- Ask clarifying questions to gauge comprehension
- Encourage critical thinking and curiosity
- Adapt your teaching style to the student's level

🔥 CRITICAL RESPONSE LENGTH REQUIREMENT:
- Your responses MUST be limited to exactly 300 characters or fewer
- This is a HARD LIMIT that cannot be exceeded under any circumstances
- Count characters carefully and stop exactly at 300 characters
- Be concise while maintaining educational value
- If a topic needs more explanation, invite follow-up questions
- Prioritize the most important information within the character limit

Always maintain an encouraging, patient, and supportive tone. Focus on helping students build knowledge and confidence in their learning journey within the strict 300-character limit.`;
```
Tokens:
Raw