@things-factory/integration-label-studio 9.1.19

package/client/label-studio-wrapper.ts

@@ -0,0 +1,294 @@
+/**
+ * Label Studio Wrapper Component for Things Factory
+ *
+ * This component embeds Label Studio within Things Factory using an iframe.
+ * It uses subdomain-based cookie sharing for SSO authentication, eliminating
+ * the need for proxying.
+ *
+ * ## Key Features:
+ * - Direct Label Studio access (no proxy needed)
+ * - Automatic SSO cookie setup via shared domain
+ * - Hidden header for seamless integration
+ * - Floating Action Buttons (FAB) for Reload and Fullscreen
+ *
+ * ## Architecture:
+ * 1. Client calls /label-studio/sso/setup
+ * 2. Backend sets cookie with shared domain (e.g., .nubison.localhost)
+ * 3. Browser → Label Studio (direct, with cookie)
+ *
+ * ## Configuration Requirements:
+ * - Label Studio and Things Factory must use subdomain pattern (e.g., label.example.com, app.example.com)
+ * - Label Studio .env must include:
+ *   - CSRF_TRUSTED_ORIGINS: Include Things Factory frontend domain
+ *   - ALLOWED_HOSTS: Include subdomain patterns
+ *   - JWT_SSO_* settings for SSO authentication
+ * - Things Factory config must include:
+ *   - labelStudio.serverUrl: Label Studio URL
+ *   - labelStudio.cookieDomain: Shared cookie domain (e.g., .example.com)
+ *
+ * ## Usage:
+ * ```html
+ * <label-studio-wrapper></label-studio-wrapper>
+ * ```
+ *
+ * The component automatically:
+ * 1. Calls SSO setup endpoint to establish authentication
+ * 2. Builds iframe URL pointing directly to Label Studio
+ * 3. Adds ?hideHeader=true to hide Label Studio's header
+ * 4. Provides FAB buttons for reload and fullscreen
+ */
+import { css, html, LitElement } from 'lit'
+import { customElement, state, query } from 'lit/decorators.js'
+
+@customElement('label-studio-wrapper')
+export class LabelStudioWrapper extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .iframe-container {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    .fab-container {
+      position: absolute;
+      bottom: 24px;
+      left: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      z-index: 1000;
+    }
+
+    .fab-button {
+      width: 56px;
+      height: 56px;
+      border-radius: 16px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      transition: all 0.2s ease;
+    }
+
+    .fab-button:hover {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+      transform: translateY(-2px);
+    }
+
+    .fab-button md-icon {
+      font-size: 24px;
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      font-size: 18px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .error {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      color: var(--md-sys-color-error);
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    md-filled-button {
+      --md-filled-button-container-color: var(--md-sys-color-primary);
+    }
+  `
+
+  @state() private loading: boolean = true
+  @state() private error: string | null = null
+  @state() private iframeUrl: string = ''
+  @state() private path: string = ''
+  @state() private iframeLoaded: boolean = false
+  @state() private labelStudioUrl: string = ''
+  @query('iframe') private iframe!: HTMLIFrameElement
+
+  async updated(changes: any) {
+    if (changes.has('path') && this.path) {
+      await this.buildIframeUrl()
+
+      setTimeout(() => {
+        if (!this.iframeLoaded && !this.error && !this.loading) {
+          this.error = 'Failed to load Label Studio. The server may be unavailable.'
+        }
+      }, 15000)
+    }
+  }
+
+  async buildIframeUrl() {
+    try {
+      this.loading = true
+      this.error = null
+
+      // Step 1: Get Label Studio configuration
+      console.log('[Label Studio Wrapper] Fetching Label Studio configuration...')
+
+      const configResponse = await fetch('/label-studio/sso/config', {
+        method: 'GET',
+        credentials: 'include'
+      })
+
+      if (!configResponse.ok) {
+        throw new Error(`Failed to fetch Label Studio config: ${configResponse.status}`)
+      }
+
+      const configData = await configResponse.json()
+      this.labelStudioUrl = configData.labelStudioUrl
+
+      if (!this.labelStudioUrl || this.labelStudioUrl === 'not configured') {
+        throw new Error('Label Studio URL is not configured. Please check your settings.')
+      }
+
+      console.log('[Label Studio Wrapper] Label Studio URL:', this.labelStudioUrl)
+      console.log('[Label Studio Wrapper] Cookie domain:', configData.cookieDomain)
+
+      // Step 2: Setup SSO token before loading iframe
+      console.log('[Label Studio Wrapper] Setting up SSO token...')
+
+      const ssoResponse = await fetch('/label-studio/sso/setup', {
+        method: 'GET',
+        credentials: 'include' // Include cookies in request
+      })
+
+      if (!ssoResponse.ok) {
+        const errorData = await ssoResponse.json().catch(() => ({}))
+        throw new Error(errorData.message || `SSO setup failed: ${ssoResponse.status}`)
+      }
+
+      const ssoData = await ssoResponse.json()
+      console.log('[Label Studio Wrapper] SSO setup complete:', ssoData.message)
+
+      // Step 3: Build iframe URL pointing directly to Label Studio
+      // No proxy needed - cookie is shared via domain
+      let url = this.labelStudioUrl + this.path
+
+      // Build query parameters
+      const params = new URLSearchParams()
+
+      // Hide header for seamless iframe embedding
+      params.set('hideHeader', 'true')
+
+      // Combine URL with parameters
+      const queryString = params.toString()
+      this.iframeUrl = queryString ? `${url}?${queryString}` : url
+
+      console.log('[Label Studio Wrapper] iframe URL:', this.iframeUrl)
+    } catch (err: any) {
+      console.error('[Label Studio Wrapper] Failed to build iframe URL:', err)
+      this.error = `Failed to initialize: ${err.message}`
+    } finally {
+      this.loading = false
+    }
+  }
+
+  handleIframeLoad() {
+    console.log('Label Studio iframe loaded successfully')
+    this.iframeLoaded = true
+    this.loading = false
+  }
+
+  handleIframeError() {
+    console.error('Label Studio iframe failed to load')
+    this.error = 'Failed to load Label Studio iframe. Please check the server connection.'
+    this.loading = false
+  }
+
+  handleReload() {
+    if (this.iframe) {
+      this.iframe.src = this.iframeUrl
+    }
+  }
+
+  handleFullscreen() {
+    if (this.iframe) {
+      if (this.iframe.requestFullscreen) {
+        this.iframe.requestFullscreen()
+      }
+    }
+  }
+
+  render() {
+    if (this.loading) {
+      return html`
+        <div class="loading">
+          <md-circular-progress indeterminate></md-circular-progress>
+          <span>Loading Label Studio...</span>
+        </div>
+      `
+    }
+
+    if (this.error) {
+      return html`
+        <div class="error">
+          <md-icon>error</md-icon>
+          <div>${this.error}</div>
+          <md-filled-button @click=${this.buildIframeUrl}>
+            <md-icon slot="icon">refresh</md-icon>
+            Retry
+          </md-filled-button>
+        </div>
+      `
+    }
+
+    return html`
+      <div class="container">
+        <div class="iframe-container">
+          <iframe
+            src=${this.iframeUrl}
+            @load=${this.handleIframeLoad}
+            @error=${this.handleIframeError}
+            allow="fullscreen"
+            allow-same-origin
+            allow-scripts
+            allow-forms
+            allow-popups
+            allow-top-navigation
+          ></iframe>
+        </div>
+        <div class="fab-container">
+          <button class="fab-button" @click=${this.handleReload} title="Reload">
+            <md-icon>refresh</md-icon>
+          </button>
+          <button class="fab-button" @click=${this.handleFullscreen} title="Fullscreen">
+            <md-icon>fullscreen</md-icon>
+          </button>
+        </div>
+      </div>
+    `
+  }
+}

package/client/route.ts

@@ -0,0 +1,15 @@
+export default function route(page: string) {
+  switch (page) {
+    case 'label-studio-project-list':
+      import('./label-studio-project-list.js')
+      return page
+
+    case 'label-studio-project-create':
+      import('./label-studio-project-create.js')
+      return page
+
+    case 'label-studio-label':
+      import('./label-studio-label-page.js')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/config/config.development.js

@@ -0,0 +1,124 @@
+module.exports = {
+  // Label Studio Custom integration configuration for DEVELOPMENT
+  labelStudio: {
+    // Label Studio Custom server URL (subdomain approach recommended)
+    // Development: http://label.hatiolab.localhost:8080
+    // Production: https://label.example.com
+    serverUrl: process.env.LABEL_STUDIO_URL || 'http://label.hatiolab.localhost:8080',
+
+    // API Token for Label Studio (REQUIRED for user synchronization and API access)
+    // How to get:
+    //   1. Login to Label Studio with admin account
+    //   2. Go to Account Settings → Access Token
+    //   3. Click "Create new token"
+    //   4. Copy the generated token
+    apiToken: process.env.LABEL_STUDIO_API_TOKEN || '',
+
+    // Cookie domain for subdomain sharing (SSO)
+    // Development: .hatiolab.localhost
+    // Production: .example.com
+    // IMPORTANT: Must start with a dot (.) for subdomain sharing
+    cookieDomain: process.env.LABEL_STUDIO_COOKIE_DOMAIN || '.hatiolab.localhost',
+
+    // Label Studio UI interface elements to display
+    // Options: panel, controls, annotations:menu, side-column, predictions:menu
+    interfaces: 'panel,controls,annotations:menu'
+  }
+}
+
+// ============================================================================
+// Label Studio Custom (SSO Edition) - v1.20.0-sso.38
+// ============================================================================
+//
+// This configuration is for Label Studio Custom Docker image with built-in SSO:
+// ghcr.io/aidoop/label-studio-custom:1.20.0-sso.38
+//
+// Features:
+// - Native JWT SSO authentication (label-studio-sso v6.0.8 integrated)
+// - JWT → Django Session conversion for performance
+// - Automatic Organization assignment
+// - Custom SSO Token API
+// - iframe-friendly configuration
+//
+// ============================================================================
+// Required Environment Variables
+// ============================================================================
+//
+// Things-Factory (.env):
+//   LABEL_STUDIO_URL=http://label.hatiolab.localhost:8080
+//   LABEL_STUDIO_API_TOKEN=your-api-token-here
+//   LABEL_STUDIO_COOKIE_DOMAIN=.hatiolab.localhost
+//
+// Label Studio Custom (.env):
+//   # Database
+//   POSTGRES_HOST=postgres
+//   POSTGRES_DB=labelstudio
+//   POSTGRES_USER=postgres
+//   POSTGRES_PASSWORD=your-password
+//
+//   # SSO Configuration
+//   JWT_SSO_NATIVE_USER_ID_CLAIM=user_id
+//   JWT_SSO_COOKIE_NAME=ls_auth_token
+//   JWT_SSO_TOKEN_PARAM=token
+//   SSO_TOKEN_EXPIRY=600
+//
+//   # Cookie Domain (must match Things-Factory)
+//   SESSION_COOKIE_DOMAIN=.hatiolab.localhost
+//   CSRF_COOKIE_DOMAIN=.hatiolab.localhost
+//
+//   # iframe Security Headers
+//   CSP_FRAME_ANCESTORS='self' http://localhost:3000 http://hatiolab.localhost:3000
+//
+// ============================================================================
+// Docker Deployment
+// ============================================================================
+//
+// docker-compose.yml:
+//
+// services:
+//   labelstudio:
+//     image: ghcr.io/aidoop/label-studio-custom:1.20.0-sso.38
+//     environment:
+//       POSTGRES_HOST: postgres
+//       POSTGRES_DB: labelstudio
+//       SESSION_COOKIE_DOMAIN: .hatiolab.localhost
+//       CSRF_COOKIE_DOMAIN: .hatiolab.localhost
+//       CSP_FRAME_ANCESTORS: "'self' http://hatiolab.localhost:3000"
+//     ports:
+//       - "8080:8080"
+//
+// ============================================================================
+// User Synchronization
+// ============================================================================
+//
+// Things-Factory users with 'label-studio' privileges will be synced to Label Studio:
+//
+// Privilege mapping:
+//   - user.owner === true + label-studio privilege → Admin (is_superuser=true)
+//   - label-studio privilege only → Staff (is_superuser=false)
+//   - No label-studio privilege → Inactive (is_active=false)
+//
+// GraphQL API:
+//   mutation { syncMyUserToLabelStudio { success email action } }
+//   mutation { syncAllUsersToLabelStudio { total created updated } }
+//
+// ============================================================================
+// Security Checklist
+// ============================================================================
+//
+// Development (HTTP):
+//   □ Label Studio Custom image v1.20.0-sso.32 running
+//   □ Cookie domain matches (.hatiolab.localhost)
+//   □ API token generated and configured
+//   □ CSP frame-ancestors includes Things-Factory URL
+//   □ Users synced with correct privileges
+//
+// Production (HTTPS):
+//   □ SESSION_COOKIE_SECURE=true (Label Studio)
+//   □ CSRF_COOKIE_SECURE=true (Label Studio)
+//   □ HTTPS URLs for both systems
+//   □ Cookie domain matches production domain (.example.com)
+//   □ JWT secret is strong (32+ characters)
+//   □ API token is kept secret
+//
+// ============================================================================

package/config/config.production.js

@@ -0,0 +1,182 @@
+module.exports = {
+  // Label Studio Custom integration configuration for PRODUCTION
+  labelStudio: {
+    // Label Studio Custom server URL (HTTPS required for production)
+    // Production: https://label.example.com
+    serverUrl: process.env.LABEL_STUDIO_URL || '',
+
+    // API Token for Label Studio (REQUIRED for user synchronization and API access)
+    // How to get:
+    //   1. Login to Label Studio with admin account
+    //   2. Go to Account Settings → Access Token
+    //   3. Click "Create new token"
+    //   4. Copy the generated token
+    // IMPORTANT: Use environment variable in production
+    apiToken: process.env.LABEL_STUDIO_API_TOKEN || '',
+
+    // Cookie domain for subdomain sharing (SSO)
+    // Production: .example.com
+    // IMPORTANT: Must start with a dot (.) for subdomain sharing
+    cookieDomain: process.env.LABEL_STUDIO_COOKIE_DOMAIN || '',
+
+    // Label Studio UI interface elements to display
+    // Options: panel, controls, annotations:menu, side-column, predictions:menu
+    interfaces: 'panel,controls,annotations:menu'
+  }
+}
+
+// ============================================================================
+// Label Studio Custom (SSO Edition) - v1.20.0-sso.32 PRODUCTION
+// ============================================================================
+//
+// This configuration is for Label Studio Custom Docker image with built-in SSO:
+// ghcr.io/aidoop/label-studio-custom:1.20.0-sso.38
+//
+// Features:
+// - Native JWT SSO authentication (label-studio-sso v6.0.8 integrated)
+// - JWT → Django Session conversion for performance
+// - Automatic Organization assignment
+// - Custom SSO Token API
+// - iframe-friendly configuration
+// - HTTPS production-ready deployment
+//
+// ============================================================================
+// Required Environment Variables (PRODUCTION)
+// ============================================================================
+//
+// Things-Factory (.env.production):
+//   LABEL_STUDIO_URL=https://label.example.com
+//   LABEL_STUDIO_API_TOKEN=your-api-token-here
+//   LABEL_STUDIO_COOKIE_DOMAIN=.example.com
+//
+// Label Studio Custom (.env):
+//   # Database (RDS/Aurora recommended)
+//   POSTGRES_HOST=your-db-endpoint.rds.amazonaws.com
+//   POSTGRES_DB=labelstudio
+//   POSTGRES_USER=postgres
+//   POSTGRES_PASSWORD=your-secure-password
+//
+//   # SSO Configuration
+//   JWT_SSO_NATIVE_USER_ID_CLAIM=user_id
+//   JWT_SSO_COOKIE_NAME=ls_auth_token
+//   JWT_SSO_TOKEN_PARAM=token
+//   SSO_TOKEN_EXPIRY=600
+//
+//   # Cookie Domain (must match Things-Factory)
+//   SESSION_COOKIE_DOMAIN=.example.com
+//   CSRF_COOKIE_DOMAIN=.example.com
+//
+//   # ⚠️ HTTPS Cookie Security (REQUIRED for production)
+//   SESSION_COOKIE_SECURE=true
+//   CSRF_COOKIE_SECURE=true
+//
+//   # iframe Security Headers
+//   CSP_FRAME_ANCESTORS='self' https://app.example.com https://console.example.com
+//
+//   # Label Studio URL
+//   LABEL_STUDIO_HOST=https://label.example.com
+//
+// ============================================================================
+// Docker Deployment (Production)
+// ============================================================================
+//
+// docker-compose.production.yml:
+//
+// services:
+//   labelstudio:
+//     image: ghcr.io/aidoop/label-studio-custom:1.20.0-sso.38
+//
+//     environment:
+//       # Database
+//       POSTGRES_HOST: your-db-endpoint.rds.amazonaws.com
+//       POSTGRES_DB: labelstudio
+//       POSTGRES_USER: ${POSTGRES_USER}
+//       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+//
+//       # SSO
+//       JWT_SSO_NATIVE_USER_ID_CLAIM: user_id
+//       JWT_SSO_COOKIE_NAME: ls_auth_token
+//       SSO_TOKEN_EXPIRY: 600
+//
+//       # Cookie Domain
+//       SESSION_COOKIE_DOMAIN: .example.com
+//       CSRF_COOKIE_DOMAIN: .example.com
+//
+//       # ⚠️ HTTPS Security (REQUIRED)
+//       SESSION_COOKIE_SECURE: "true"
+//       CSRF_COOKIE_SECURE: "true"
+//       LABEL_STUDIO_HOST: https://label.example.com
+//
+//       # iframe Security
+//       CSP_FRAME_ANCESTORS: "'self' https://app.example.com"
+//
+//     ports:
+//       - "8080:8080"
+//
+//     # Health check
+//     healthcheck:
+//       test: ["CMD", "curl", "-f", "http://localhost:8080/health"]
+//       interval: 30s
+//       timeout: 10s
+//       retries: 3
+//
+// ============================================================================
+// Kubernetes Deployment (Production)
+// ============================================================================
+//
+// See: /Users/super/Documents/GitHub/label-studio-custom/k8s/04-deployment.yaml
+//
+// Key configuration:
+//   - Image: ghcr.io/aidoop/label-studio-custom:1.20.0-sso.38
+//   - Replicas: 2+ (for high availability)
+//   - Health checks: /health endpoint
+//   - Ingress: ALB with HTTPS
+//   - Database: RDS Aurora PostgreSQL
+//
+// ============================================================================
+// User Synchronization
+// ============================================================================
+//
+// Things-Factory users with 'label-studio' privileges will be synced to Label Studio:
+//
+// Privilege mapping:
+//   - user.owner === true + label-studio privilege → Admin (is_superuser=true)
+//   - label-studio privilege only → Staff (is_superuser=false)
+//   - No label-studio privilege → Inactive (is_active=false)
+//
+// GraphQL API:
+//   mutation { syncMyUserToLabelStudio { success email action } }
+//   mutation { syncAllUsersToLabelStudio { total created updated } }
+//
+// ============================================================================
+// PRODUCTION Security Checklist
+// ============================================================================
+//
+// Infrastructure:
+//   □ HTTPS enabled for both Things-Factory and Label Studio
+//   □ SSL certificates valid and auto-renewed
+//   □ Database (RDS) with encrypted storage
+//   □ VPC with private subnets for database
+//   □ Security groups restrict database access
+//
+// Label Studio Configuration:
+//   □ SESSION_COOKIE_SECURE=true
+//   □ CSRF_COOKIE_SECURE=true
+//   □ Cookie domain matches production (.example.com)
+//   □ CSP frame-ancestors restricts iframe embedding
+//   □ API token stored in secrets manager
+//   □ JWT secret is strong (32+ characters)
+//
+// Things-Factory Configuration:
+//   □ LABEL_STUDIO_URL uses HTTPS
+//   □ LABEL_STUDIO_API_TOKEN from secrets manager
+//   □ Cookie domain matches Label Studio
+//   □ CORS properly configured
+//
+// Monitoring:
+//   □ Health checks configured
+//   □ Application logs centralized
+//   □ Alert on service failures
+//   □ Database backup enabled
+//
+// ============================================================================

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,2 @@
+export default function bootstrap() { }
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,KAAI,CAAC","sourcesContent":["export default function bootstrap() {}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1 @@
+export * from './label-studio-wrapper.js';

package/dist-client/index.js

@@ -0,0 +1,2 @@
+export * from './label-studio-wrapper.js';
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './label-studio-wrapper.js'\n"]}

package/dist-client/label-studio-label-page.d.ts

@@ -0,0 +1,8 @@
+import './label-studio-wrapper.js';
+import { PageView } from '@things-factory/shell/client';
+export declare class LabelStudioLabelPage extends PageView {
+    static styles: import("lit").CSSResult;
+    projectId: string;
+    pageUpdated(changes: any, lifecycle: any, changedBefore: any): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}