@things-factory/integration-label-studio 9.1.19

package/client/label-studio-project-create.ts

@@ -0,0 +1,216 @@
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@material/web/textfield/filled-text-field.js'
+import { css, html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { client, PageView, navigate } from '@things-factory/shell/client'
+import gql from 'graphql-tag'
+
+@customElement('label-studio-project-create')
+export class LabelStudioProjectCreate extends PageView {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .form-field {
+        margin-bottom: 20px;
+      }
+
+      .form-field label {
+        display: block;
+        margin-bottom: 8px;
+        color: var(--md-sys-color-on-surface);
+        font-weight: 500;
+      }
+
+      md-filled-text-field {
+        width: 100%;
+      }
+
+      textarea {
+        width: 100%;
+        min-height: 200px;
+        padding: 12px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 14px;
+        resize: vertical;
+      }
+
+      .actions {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+        margin-top: 20px;
+      }
+
+      .template-examples {
+        margin-top: 20px;
+        padding: 15px;
+        background: var(--md-sys-color-surface-variant);
+        border-radius: 8px;
+      }
+
+      .template-examples h4 {
+        margin: 0 0 10px 0;
+      }
+
+      .template-btn {
+        margin: 5px;
+      }
+
+      .error {
+        color: var(--md-sys-color-error);
+        margin: 10px 0;
+      }
+    `
+  ]
+
+  @state() title: string = ''
+  @state() description: string = ''
+  @state() labelConfig: string = ''
+  @state() saving: boolean = false
+  @state() error: string = ''
+
+  render() {
+    return html`
+      <h2>Create Label Studio Project</h2>
+
+      <div class="form-field">
+        <label>Project Title *</label>
+        <md-filled-text-field
+          .value=${this.title}
+          @input=${(e: any) => (this.title = e.target.value)}
+          placeholder="Enter project title"
+        ></md-filled-text-field>
+      </div>
+
+      <div class="form-field">
+        <label>Description</label>
+        <md-filled-text-field
+          .value=${this.description}
+          @input=${(e: any) => (this.description = e.target.value)}
+          placeholder="Enter project description"
+        ></md-filled-text-field>
+      </div>
+
+      <div class="form-field">
+        <label>Label Configuration (XML) *</label>
+        <textarea
+          .value=${this.labelConfig}
+          @input=${(e: any) => (this.labelConfig = (e.target as HTMLTextAreaElement).value)}
+          placeholder='<View>&#10;  <Text name="text" value="$text"/>&#10;  <Choices name="label" toName="text">&#10;    <Choice value="Positive"/>&#10;    <Choice value="Negative"/>&#10;  </Choices>&#10;</View>'
+        ></textarea>
+      </div>
+
+      <div class="template-examples">
+        <h4>Quick Templates</h4>
+        <md-filled-button class="template-btn" @click=${() => this.useTemplate('text-classification')}>
+          Text Classification
+        </md-filled-button>
+        <md-filled-button class="template-btn" @click=${() => this.useTemplate('image-classification')}>
+          Image Classification
+        </md-filled-button>
+        <md-filled-button class="template-btn" @click=${() => this.useTemplate('ner')}>
+          Named Entity Recognition
+        </md-filled-button>
+      </div>
+
+      ${this.error ? html`<div class="error">${this.error}</div>` : ''}
+
+      <div class="actions">
+        <md-text-button @click=${this.cancel}>Cancel</md-text-button>
+        <md-filled-button @click=${this.save} ?disabled=${this.saving}>
+          ${this.saving ? 'Creating...' : 'Create Project'}
+        </md-filled-button>
+      </div>
+    `
+  }
+
+  useTemplate(type: string) {
+    const templates = {
+      'text-classification': `<View>
+  <Text name="text" value="$text"/>
+  <Choices name="sentiment" toName="text" choice="single">
+    <Choice value="Positive"/>
+    <Choice value="Negative"/>
+    <Choice value="Neutral"/>
+  </Choices>
+</View>`,
+      'image-classification': `<View>
+  <Image name="image" value="$image"/>
+  <Choices name="choice" toName="image" choice="single">
+    <Choice value="Cat"/>
+    <Choice value="Dog"/>
+    <Choice value="Bird"/>
+  </Choices>
+</View>`,
+      ner: `<View>
+  <Text name="text" value="$text"/>
+  <Labels name="label" toName="text">
+    <Label value="Person" background="red"/>
+    <Label value="Organization" background="darkorange"/>
+    <Label value="Location" background="blue"/>
+  </Labels>
+</View>`
+    }
+
+    this.labelConfig = templates[type] || ''
+  }
+
+  async save() {
+    if (!this.title || !this.labelConfig) {
+      this.error = 'Title and Label Configuration are required'
+      return
+    }
+
+    try {
+      this.saving = true
+      this.error = ''
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation CreateProject($input: CreateProjectInput!) {
+            createLabelStudioProject(input: $input) {
+              id
+              title
+            }
+          }
+        `,
+        variables: {
+          input: {
+            title: this.title,
+            description: this.description || undefined,
+            labelConfig: this.labelConfig
+          }
+        }
+      })
+
+      const project = response.data.createLabelStudioProject
+
+      // Navigate to project list
+      navigate('label-studio-project-list')
+    } catch (error: any) {
+      console.error('Failed to create project:', error)
+      this.error = error.message || 'Failed to create project'
+    } finally {
+      this.saving = false
+    }
+  }
+
+  cancel() {
+    navigate('label-studio-project-list')
+  }
+}

package/client/label-studio-project-list.ts

@@ -0,0 +1,214 @@
+import '@material/web/button/filled-button.js'
+import '@material/web/button/outlined-button.js'
+import '@material/web/icon/icon.js'
+import '@material/web/iconbutton/icon-button.js'
+import { css, html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { client, PageView, navigate } from '@things-factory/shell/client'
+import gql from 'graphql-tag'
+
+@customElement('label-studio-project-list')
+export class LabelStudioProjectList extends PageView {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+
+      .header h2 {
+        margin: 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .project-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+        overflow-y: auto;
+      }
+
+      .project-card {
+        background: var(--md-sys-color-surface-container);
+        border-radius: 12px;
+        padding: 20px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .project-card:hover {
+        background: var(--md-sys-color-surface-container-high);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .project-card h3 {
+        margin: 0 0 10px 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .project-card p {
+        margin: 5px 0;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 14px;
+      }
+
+      .project-stats {
+        display: flex;
+        gap: 15px;
+        margin-top: 15px;
+      }
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .stat-label {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .stat-value {
+        font-size: 20px;
+        font-weight: bold;
+        color: var(--md-sys-color-primary);
+      }
+
+      .progress-bar {
+        width: 100%;
+        height: 8px;
+        background: var(--md-sys-color-surface-variant);
+        border-radius: 4px;
+        margin-top: 10px;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: var(--md-sys-color-primary);
+        transition: width 0.3s ease;
+      }
+
+      .loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 18px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .error {
+        color: var(--md-sys-color-error);
+        padding: 20px;
+        text-align: center;
+      }
+    `
+  ]
+
+  @state() projects: any[] = []
+  @state() loading: boolean = true
+  @state() error: string = ''
+
+  async pageUpdated(changes, lifecycle, changedBefore) {
+    if (this.active) {
+      this.loadProjects()
+    }
+  }
+
+  async loadProjects() {
+    try {
+      this.loading = true
+
+      const response = await client.query({
+        query: gql`
+          query {
+            labelStudioProjects {
+              id
+              title
+              description
+              taskCount
+              completedTaskCount
+              completionRate
+              createdAt
+              updatedAt
+            }
+          }
+        `
+      })
+
+      this.projects = response.data.labelStudioProjects
+      this.loading = false
+    } catch (error: any) {
+      console.error('Failed to load projects:', error)
+      this.error = error.message || 'Failed to load projects'
+      this.loading = false
+    }
+  }
+
+  createProject() {
+    navigate('label-studio-project-create')
+  }
+
+  openProject(projectId: number) {
+    // Open Label Studio viewer with project
+    navigate(`label-studio-label/${projectId}`)
+  }
+
+  render() {
+    if (this.loading) {
+      return html`<div class="loading">Loading projects...</div>`
+    }
+
+    if (this.error) {
+      return html`<div class="error">${this.error}</div>`
+    }
+
+    return html`
+      <div class="header">
+        <h2>Label Studio Projects</h2>
+        <md-filled-button @click=${this.createProject}>
+          <md-icon slot="icon">add</md-icon>
+          New Project
+        </md-filled-button>
+      </div>
+
+      <div class="project-grid">
+        ${this.projects.map(
+          project => html`
+            <div class="project-card" @click=${() => this.openProject(project.id)}>
+              <h3>${project.title}</h3>
+              <p>${project.description || 'No description'}</p>
+
+              <div class="project-stats">
+                <div class="stat-item">
+                  <span class="stat-label">Tasks</span>
+                  <span class="stat-value">${project.taskCount}</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">Completed</span>
+                  <span class="stat-value">${project.completedTaskCount}</span>
+                </div>
+              </div>
+
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: ${(project.completionRate * 100).toFixed(0)}%"></div>
+              </div>
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+}