diff --git a/src/ui/src/common/utils.ts b/src/ui/src/common/utils.ts index d9138917..b2eae86f 100644 --- a/src/ui/src/common/utils.ts +++ b/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; diff --git a/src/ui/src/components/model_source_input/model_source_input.ng.html b/src/ui/src/components/model_source_input/model_source_input.ng.html index 143634ae..c62f27d7 100644 --- a/src/ui/src/components/model_source_input/model_source_input.ng.html +++ b/src/ui/src/components/model_source_input/model_source_input.ng.html @@ -78,16 +78,20 @@ -
or
+ @if (!internalColab) { +
or
+ } - + @if (!internalColab) { + + } diff --git a/src/ui/src/components/model_source_input/model_source_input.ts b/src/ui/src/components/model_source_input/model_source_input.ts index 04beedb3..930a7f83 100644 --- a/src/ui/src/components/model_source_input/model_source_input.ts +++ b/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(false); readonly hasUploadedModels = signal(false); + readonly internalColab = INTERNAL_COLAB; private portal: ComponentPortal | null = null; diff --git a/src/ui/src/services/extension_service.ts b/src/ui/src/services/extension_service.ts index 9282fc18..cecf1e57 100644 --- a/src/ui/src/services/extension_service.ts +++ b/src/ui/src/services/extension_service.ts @@ -20,9 +20,11 @@ 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. @@ -30,6 +32,7 @@ const EXTERNAL_SEND_CMD_API_PATH = '/apipost/v1/send_command'; @Injectable({providedIn: 'root'}) export class ExtensionService { readonly loading = signal(true); + readonly internalColab = INTERNAL_COLAB; extensions: Extension[] = []; @@ -40,15 +43,24 @@ export class ExtensionService { async sendCommandToExtension( 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}`}; } diff --git a/src/ui/src/services/server_director_service.ts b/src/ui/src/services/server_director_service.ts index a56026a7..a804d76e 100644 --- a/src/ui/src/services/server_director_service.ts +++ b/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'); diff --git a/src/ui/src/services/url_service.ts b/src/ui/src/services/url_service.ts index 7df1f2a7..85330a70 100644 --- a/src/ui/src/services/url_service.ts +++ b/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 = diff --git a/src/ui/src/theme/theme.scss b/src/ui/src/theme/theme.scss index aca6e5f0..3c22ece9 100644 --- a/src/ui/src/theme/theme.scss +++ b/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);