feat(python-notebook-migration, frontend): add AI-generate-workflow modal, panel host, and LLM loading spinner

.licenserc.yaml

@@ -51,6 +51,7 @@ header:
     - 'frontend/src/assets/svg/operator-view-result.svg'
     - 'frontend/src/assets/svg/operator-reuse-cache-invalid.svg'
     - 'frontend/src/assets/svg/operator-reuse-cache-valid.svg'
+    - 'frontend/src/assets/notebook_migration_tool/jupyter-logo.svg'
     - 'frontend/src/app/common/type/proto/org/apache/texera/amber/core/virtualidentity.ts'
     - 'frontend/src/app/common/type/proto/org/apache/texera/amber/core/workflow.ts'
     - 'frontend/src/app/common/type/proto/google/protobuf/descriptor.ts'

frontend/LICENSE-binary

@@ -224,6 +224,11 @@ Angular / npm packages:
   - jschardet@3.1.3
   - rxjs@7.8.2
 
+Third-party assets:
+  - Google Material Symbols icons (psychology, smart_toy)
+    frontend/src/assets/notebook_migration_tool/tool_popup_diagram.png
+    https://github.com/google/material-design-icons
+
 --------------------------------------------------------------------------------
 Dependencies under the MIT License
 --------------------------------------------------------------------------------
@@ -358,6 +363,12 @@ Angular / npm packages:
   - parchment@3.0.0
   - quill@2.0.3
 
+Third-party assets:
+  - Project Jupyter logo
+    frontend/src/assets/notebook_migration_tool/jupyter-logo.svg
+    frontend/src/assets/notebook_migration_tool/tool_popup_diagram.png
+    https://github.com/jupyter/design
+
 --------------------------------------------------------------------------------
 Dependencies under the ISC License
 --------------------------------------------------------------------------------

frontend/src/app/workspace/component/jupyter-notebook-panel/jupyter-notebook-panel.component.scss

@@ -19,9 +19,8 @@
 
 .draggable-panel {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: 200px;
+  top: 100px;
+  left: 200px;
   width: 660px;
   height: 400px;
   background-color: #fff;

frontend/src/app/workspace/component/menu/menu.component.html

@@ -149,6 +149,26 @@
             nz-icon
             nzType="info-circle"></i>
         </button>
+        <button
+          *ngIf="pythonNotebookMigrationEnabled"
+          nz-button
+          [disabled]="!isWorkflowModifiable || isWaitingForLLM"
+          (click)="openImportNotebookModal()"
+          title="AI generate workflow">
+          <i
+            nz-icon
+            nzType="robot"></i>
+        </button>
+        <button
+          *ngIf="pythonNotebookMigrationEnabled && (jupyterNotebookExists$ | async)"
+          nz-button
+          (click)="onClickExpandJupyterNotebookPanel()"
+          title="expand Jupyter notebook">
+          <img
+            class="jupyter-notebook-icon"
+            src="assets/notebook_migration_tool/jupyter-logo.svg"
+            alt="Jupyter" />
+        </button>
       </nz-space-compact>
       <ng-template #utilities>
         <nz-space-compact>
@@ -456,3 +476,104 @@
     </div>
   </div>
 </div>
+
+<ng-template
+  #importNotebookModal
+  let-data>
+  <form
+    class="import-modal-form"
+    [formGroup]="importForm"
+    nz-form>
+    <div class="import-modal-diagram">
+      <img
+        ngSrc="assets/notebook_migration_tool/tool_popup_diagram.png"
+        alt="Notebook to Workflow"
+        width="1646"
+        height="479" />
+    </div>
+
+    <nz-alert
+      class="import-modal-warning"
+      nzType="warning"
+      nzShowIcon
+      nzMessage="Generating overwrites your current workflow; the previous version is kept in version history."></nz-alert>
+
+    <nz-form-item>
+      <p class="import-modal-text">
+        This tool converts a Python Jupyter Notebook into a Texera workflow using LLM capabilities. After you submit a
+        notebook, the LLM service will generate a corresponding Texera workflow. The conversion time depends on the
+        notebook’s complexity and can take 1–5 minutes. Once the process is complete, the workflow workspace will reload
+        with:
+      </p>
+      <ol class="import-modal-list">
+        <li>
+          The generated workflow ready to use (Note: you will still need to upload the dataset and connect it to the
+          workflow).
+        </li>
+        <li>A floating Jupyter window containing the uploaded notebook for reference.</li>
+      </ol>
+      <p class="import-modal-text">
+        Feel free to navigate away from this tab while you wait for the workflow to generate. Please do not close the
+        window.
+      </p>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzNoColon]="true">
+        <span class="import-modal-label"> Upload Python Jupyter Notebook </span>
+      </nz-form-label>
+      <nz-form-control>
+        <div class="import-modal-upload-row">
+          <nz-upload
+            [nzBeforeUpload]="beforeUpload"
+            [nzShowUploadList]="false">
+            <button nz-button>
+              <i
+                nz-icon
+                nzType="upload"></i>
+            </button>
+          </nz-upload>
+
+          <span *ngIf="importForm.get('file')?.value?.name">
+            Selected file: {{ importForm.get('file')?.value?.name }}
+          </span>
+        </div>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzNoColon]="true">
+        <span class="import-modal-label"> Select Model Type </span>
+      </nz-form-label>
+
+      <nz-form-control>
+        <ng-container *ngIf="data.models$ | async as models; else loadingTpl">
+          <nz-select
+            *ngIf="$any(models).length > 0; else noModelsTpl"
+            class="import-modal-select"
+            formControlName="model"
+            nzPlaceHolder="Select a model">
+            <nz-option
+              *ngFor="let model of $any(models)"
+              [nzValue]="model.name"
+              [nzLabel]="model.name"></nz-option>
+          </nz-select>
+          <ng-template #noModelsTpl>
+            <nz-select
+              class="import-modal-select"
+              nzPlaceHolder="No models available"
+              [nzDisabled]="true"></nz-select>
+          </ng-template>
+        </ng-container>
+
+        <ng-template #loadingTpl>
+          <nz-select
+            class="import-modal-select"
+            nzPlaceHolder="Loading models..."
+            [nzLoading]="true"
+            [nzDisabled]="true"></nz-select>
+        </ng-template>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</ng-template>

frontend/src/app/workspace/component/menu/menu.component.scss

@@ -190,3 +190,68 @@ texera-coeditor-user-icon {
 ::ng-deep .layers-dropdown {
   user-select: none;
 }
+
+.jupyter-notebook-icon {
+  height: 1.1em;
+  width: auto;
+  vertical-align: -0.2em;
+}
+
+.import-modal {
+  // Tighten the default form-item spacing so the modal fits without scrolling.
+  &-form nz-form-item {
+    margin-bottom: 12px;
+  }
+
+  &-diagram {
+    text-align: center;
+    margin-bottom: 12px;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+  }
+
+  &-text {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.4;
+    font-weight: 500;
+    user-select: text;
+  }
+
+  &-list {
+    margin: 4px 0 0;
+    padding-left: 20px;
+    font-size: 15px;
+    line-height: 1.4;
+    font-weight: 500;
+    user-select: text;
+  }
+
+  &-label {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  &-upload-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+
+    button {
+      white-space: normal;
+    }
+  }
+
+  &-select {
+    width: 50%;
+  }
+
+  &-warning {
+    display: block;
+    margin-bottom: 12px;
+  }
+}