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);