Send a GET send_command request to server when running in internal colab which

src/ui/src/common/utils.ts

@@ -24,6 +24,10 @@ import {
 
 import {loadTfjsModel} from './tfjs';
 
+/** Checks if the current page is running in internal colab. */
+export const INTERNAL_COLAB =
+  new URLSearchParams(window.location.search).get('internal_colab') === '1';
+
 /** Checks if the given path is a supported internal storage path. */
 export function isInternalStoragePath(path: string): boolean {
   return false;

src/ui/src/components/model_source_input/model_source_input.ng.html

@@ -78,16 +78,20 @@
       </div>
 
       <!-- Or -->
-      <div class="or-label">or</div>
+      @if (!internalColab) {
+        <div class="or-label">or</div>
+      }
 
       <!-- Upload button -->
-      <button
-          mat-flat-button
-          class="btn-upload"
-          (click)="uploadInput.click()"
-          [disabled]="hasReachedMaxModelsCount || loading()">
-        Select from your computer
-      </button>
+      @if (!internalColab) {
+        <button
+            mat-flat-button
+            class="btn-upload"
+            (click)="uploadInput.click()"
+            [disabled]="hasReachedMaxModelsCount || loading()">
+          Select from your computer
+        </button>
+      }
       <input class="upload-input" type="file" multiple #uploadInput
           (change)="handleClickUpload(uploadInput)">
     </div>

src/ui/src/components/model_source_input/model_source_input.ts

@@ -63,7 +63,11 @@ import {
   ModelItemStatus,
   ModelItemType,
 } from '../../common/types';
-import {getElectronApi, isInternalStoragePath} from '../../common/utils';
+import {
+  getElectronApi,
+  INTERNAL_COLAB,
+  isInternalStoragePath,
+} from '../../common/utils';
 import {AdapterExtensionService} from '../../services/adapter_extension_service';
 import {ModelSource, UrlService} from '../../services/url_service';
 import {Bubble} from '../bubble/bubble';
@@ -140,6 +144,7 @@ export class ModelSourceInput {
 
   readonly loading = signal<boolean>(false);
   readonly hasUploadedModels = signal<boolean>(false);
+  readonly internalColab = INTERNAL_COLAB;
 
   private portal: ComponentPortal<AdapterSelectorPanel> | null = null;
 

src/ui/src/services/extension_service.ts

@@ -20,16 +20,19 @@ import {Injectable, signal} from '@angular/core';
 
 import {ExtensionCommand} from '../common/extension_command';
 import {Extension} from '../common/types';
+import {INTERNAL_COLAB} from '../common/utils';
 
 const EXTERNAL_GET_EXTENSIONS_API_PATH = '/api/v1/get_extensions';
-const EXTERNAL_SEND_CMD_API_PATH = '/apipost/v1/send_command';
+const EXTERNAL_SEND_CMD_GET_API_PATH = '/api/v1/send_command';
+const EXTERNAL_SEND_CMD_POST_API_PATH = '/apipost/v1/send_command';
 
 /**
  * Service for managing model explorer extensions.
  */
 @Injectable({providedIn: 'root'})
 export class ExtensionService {
   readonly loading = signal<boolean>(true);
+  readonly internalColab = INTERNAL_COLAB;
 
   extensions: Extension[] = [];
 
@@ -40,15 +43,24 @@ export class ExtensionService {
   async sendCommandToExtension<T>(
     cmd: ExtensionCommand,
   ): Promise<{cmdResp?: T; otherError?: string}> {
-    const requestData: RequestInit = {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    };
-    requestData.body = JSON.stringify(cmd);
     try {
-      const resp = await fetch(EXTERNAL_SEND_CMD_API_PATH, requestData);
+      let resp: Response | undefined = undefined;
+      // In internal colab, use GET request.
+      if (this.internalColab) {
+        const url = `${EXTERNAL_SEND_CMD_GET_API_PATH}?json=${JSON.stringify(cmd)}`;
+        resp = await fetch(url);
+      }
+      // In other environments, use POST request.
+      else {
+        const requestData: RequestInit = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        };
+        requestData.body = JSON.stringify(cmd);
+        resp = await fetch(EXTERNAL_SEND_CMD_POST_API_PATH, requestData);
+      }
       if (!resp.ok) {
         return {otherError: `Failed to convert model. ${resp.status}`};
       }

src/ui/src/services/server_director_service.ts

@@ -18,6 +18,7 @@
 
 import {safeLocation} from 'safevalues/dom';
 import {IS_EXTERNAL} from '../common/flags';
+import {INTERNAL_COLAB} from '../common/utils';
 
 import {Injectable} from '@angular/core';
 
@@ -42,7 +43,7 @@ type Directive = RefreshPageDirective;
 })
 export class ServerDirectorService {
   init() {
-    if (IS_EXTERNAL) {
+    if (IS_EXTERNAL && !INTERNAL_COLAB) {
       // Listen to the streaming events (directives) from the following source
       // that the server has established.
       const eventSource = new EventSource('/apistream/server_director');

src/ui/src/services/url_service.ts

@@ -29,6 +29,7 @@ enum QueryParamKey {
   BENCHMARK = 'benchmark',
   ENABLE_SUBGRAPH_SELECTION = 'ess',
   ENABLE_EXPORT_TO_RESOURCE = 'eetr',
+  INTERNAL_COLAB = 'internal_colab',
 }
 
 declare interface OldEncodedUrlData {
@@ -70,6 +71,7 @@ export class UrlService {
 
   renderer = 'webgl';
   showOpenInNewTab = false;
+  internalColab = false;
   benchmark = false;
   enableSubgraphSelection = false;
   enableExportToResource = false;
@@ -129,6 +131,9 @@ export class UrlService {
       queryParams[QueryParamKey.SHOW_OPEN_IN_NEW_TAB] = this.showOpenInNewTab
         ? '1'
         : '0';
+      queryParams[QueryParamKey.INTERNAL_COLAB] = this.internalColab
+        ? '1'
+        : '0';
       queryParams[QueryParamKey.ENABLE_SUBGRAPH_SELECTION] = this
         .enableSubgraphSelection
         ? '1'
@@ -196,6 +201,7 @@ export class UrlService {
     this.renderer = renderer || 'webgl';
     this.showOpenInNewTab =
       params.get(QueryParamKey.SHOW_OPEN_IN_NEW_TAB) === '1';
+    this.internalColab = params.get(QueryParamKey.INTERNAL_COLAB) === '1';
     this.enableSubgraphSelection =
       params.get(QueryParamKey.ENABLE_SUBGRAPH_SELECTION) === '1';
     this.enableExportToResource =

src/ui/src/theme/theme.scss

@@ -63,8 +63,6 @@ $blue-palette: (
   // The `mat.core` mixin applies common styles used by multiple
   // components, such ripples, overlays, high contrast mode, etc.
   @include mat.core();
-  @include mat.app-background();
-  @include mat.elevation-classes();
 
   // Define the application's color palettes.
   $primary: mat.m2-define-palette($blue-palette, 600);