mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-27 01:40:20 +08:00
Fix dark mode detection and container height (#9617)
This commit is contained in:
pngwn
GitHub
parent
ec95b0212b
commit
c163182d1b
10
.changeset/great-toes-leave.md
Normal file
10
.changeset/great-toes-leave.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
"@gradio/chatbot": minor
|
||||
"@gradio/core": minor
|
||||
"@gradio/lite": minor
|
||||
"@gradio/statustracker": minor
|
||||
"@self/app": minor
|
||||
"gradio": minor
|
||||
---
|
||||
|
||||
feat:Fix dark mode detection and container height
|
||||
@ -86,9 +86,9 @@ class ThemeClass:
|
||||
+ "\n}"
|
||||
)
|
||||
dark_css_code = (
|
||||
".dark {\n"
|
||||
"@media (prefers-color-scheme: dark) {\n:root {\n"
|
||||
+ "\n".join([f" --{attr}: {val};" for attr, val in dark_css.items()])
|
||||
+ "\n}"
|
||||
+ "\n}\n}"
|
||||
)
|
||||
|
||||
font_css = "\n".join(self._font_css)
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
import type { ApiData, ApiInfo, ClientOptions, Config, DuplicateOptions, EndpointInfo, JsApiData, PredictReturn, SpaceStatus, Status, UploadResponse, SubmitIterable, GradioEvent } from "./types";
|
||||
import { FileData } from "./upload";
|
||||
export declare class Client {
|
||||
app_reference: string;
|
||||
options: ClientOptions;
|
||||
config: Config | undefined;
|
||||
api_info: ApiInfo<JsApiData> | undefined;
|
||||
api_map: Record<string, number>;
|
||||
session_hash: string;
|
||||
jwt: string | false;
|
||||
last_status: Record<string, Status["stage"]>;
|
||||
private cookies;
|
||||
stream_status: {
|
||||
open: boolean;
|
||||
};
|
||||
pending_stream_messages: Record<string, any[][]>;
|
||||
pending_diff_streams: Record<string, any[][]>;
|
||||
event_callbacks: Record<string, (data?: unknown) => Promise<void>>;
|
||||
unclosed_events: Set<string>;
|
||||
heartbeat_event: EventSource | null;
|
||||
abort_controller: AbortController | null;
|
||||
stream_instance: EventSource | null;
|
||||
fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
|
||||
stream(url: URL): EventSource;
|
||||
view_api: () => Promise<ApiInfo<JsApiData>>;
|
||||
upload_files: (root_url: string, files: (Blob | File)[], upload_id?: string) => Promise<UploadResponse>;
|
||||
upload: (file_data: FileData[], root_url: string, upload_id?: string, max_file_size?: number) => Promise<(FileData | null)[] | null>;
|
||||
handle_blob: (endpoint: string, data: unknown[], endpoint_info: EndpointInfo<ApiData | JsApiData>) => Promise<unknown[]>;
|
||||
post_data: (url: string, body: unknown, additional_headers?: any) => Promise<unknown[]>;
|
||||
submit: (endpoint: string | number, data: unknown[] | Record<string, unknown> | undefined, event_data?: unknown, trigger_id?: number | null, all_events?: boolean) => SubmitIterable<GradioEvent>;
|
||||
predict: (endpoint: string | number, data: unknown[] | Record<string, unknown> | undefined, event_data?: unknown) => Promise<PredictReturn>;
|
||||
open_stream: () => Promise<void>;
|
||||
private resolve_config;
|
||||
private resolve_cookies;
|
||||
constructor(app_reference: string, options?: ClientOptions);
|
||||
private init;
|
||||
_resolve_hearbeat(_config: Config): Promise<void>;
|
||||
static connect(app_reference: string, options?: ClientOptions): Promise<Client>;
|
||||
close(): void;
|
||||
static duplicate(app_reference: string, options?: DuplicateOptions): Promise<Client>;
|
||||
private _resolve_config;
|
||||
private config_success;
|
||||
handle_space_success(status: SpaceStatus): Promise<Config | void>;
|
||||
component_server(component_id: number, fn_name: string, data: unknown[] | {
|
||||
binary: boolean;
|
||||
data: Record<string, any>;
|
||||
}): Promise<unknown>;
|
||||
set_cookies(raw_cookies: string): void;
|
||||
private prepare_return_obj;
|
||||
}
|
||||
/**
|
||||
* @deprecated This method will be removed in v1.0. Use `Client.connect()` instead.
|
||||
* Creates a client instance for interacting with Gradio apps.
|
||||
*
|
||||
* @param {string} app_reference - The reference or URL to a Gradio space or app.
|
||||
* @param {ClientOptions} options - Configuration options for the client.
|
||||
* @returns {Promise<Client>} A promise that resolves to a `Client` instance.
|
||||
*/
|
||||
export declare function client(app_reference: string, options?: ClientOptions): Promise<Client>;
|
||||
/**
|
||||
* @deprecated This method will be removed in v1.0. Use `Client.duplicate()` instead.
|
||||
* Creates a duplicate of a space and returns a client instance for the duplicated space.
|
||||
*
|
||||
* @param {string} app_reference - The reference or URL to a Gradio space or app to duplicate.
|
||||
* @param {DuplicateOptions} options - Configuration options for the client.
|
||||
* @returns {Promise<Client>} A promise that resolves to a `Client` instance.
|
||||
*/
|
||||
export declare function duplicate_space(app_reference: string, options: DuplicateOptions): Promise<Client>;
|
||||
export type ClientInstance = Client;
|
||||
@ -1,29 +0,0 @@
|
||||
export declare const HOST_URL = "host";
|
||||
export declare const API_URL = "api/predict/";
|
||||
export declare const SSE_URL_V0 = "queue/join";
|
||||
export declare const SSE_DATA_URL_V0 = "queue/data";
|
||||
export declare const SSE_URL = "queue/data";
|
||||
export declare const SSE_DATA_URL = "queue/join";
|
||||
export declare const UPLOAD_URL = "upload";
|
||||
export declare const LOGIN_URL = "login";
|
||||
export declare const CONFIG_URL = "config";
|
||||
export declare const API_INFO_URL = "info";
|
||||
export declare const RUNTIME_URL = "runtime";
|
||||
export declare const SLEEPTIME_URL = "sleeptime";
|
||||
export declare const RAW_API_INFO_URL = "info?serialize=False";
|
||||
export declare const SPACE_FETCHER_URL = "https://gradio-space-api-fetcher-v2.hf.space/api";
|
||||
export declare const RESET_URL = "reset";
|
||||
export declare const SPACE_URL = "https://hf.space/{}";
|
||||
export declare const QUEUE_FULL_MSG = "This application is currently busy. Please try again. ";
|
||||
export declare const BROKEN_CONNECTION_MSG = "Connection errored out. ";
|
||||
export declare const CONFIG_ERROR_MSG = "Could not resolve app config. ";
|
||||
export declare const SPACE_STATUS_ERROR_MSG = "Could not get space status. ";
|
||||
export declare const API_INFO_ERROR_MSG = "Could not get API info. ";
|
||||
export declare const SPACE_METADATA_ERROR_MSG = "Space metadata could not be loaded. ";
|
||||
export declare const INVALID_URL_MSG = "Invalid URL. A full URL path is required.";
|
||||
export declare const UNAUTHORIZED_MSG = "Not authorized to access this space. ";
|
||||
export declare const INVALID_CREDENTIALS_MSG = "Invalid credentials. Could not login. ";
|
||||
export declare const MISSING_CREDENTIALS_MSG = "Login credentials are required to access this space.";
|
||||
export declare const NODEJS_FS_ERROR_MSG = "File system access is only available in Node.js environments";
|
||||
export declare const ROOT_URL_ERROR_MSG = "Root URL not found in client config";
|
||||
export declare const FILE_PROCESSING_ERROR_MSG = "Error uploading file";
|
||||
@ -1,46 +0,0 @@
|
||||
import type { ApiData, ApiInfo, Config, JsApiData, EndpointInfo, Status } from "../types";
|
||||
export declare const RE_SPACE_NAME: RegExp;
|
||||
export declare const RE_SPACE_DOMAIN: RegExp;
|
||||
export declare function process_endpoint(app_reference: string, hf_token?: `hf_${string}`): Promise<{
|
||||
space_id: string | false;
|
||||
host: string;
|
||||
ws_protocol: "ws" | "wss";
|
||||
http_protocol: "http:" | "https:";
|
||||
}>;
|
||||
export declare const join_urls: (...urls: string[]) => string;
|
||||
export declare function transform_api_info(api_info: ApiInfo<ApiData>, config: Config, api_map: Record<string, number>): ApiInfo<JsApiData>;
|
||||
export declare function get_type(type: {
|
||||
type: any;
|
||||
description: string;
|
||||
}, component: string, serializer: string, signature_type: "return" | "parameter"): string | undefined;
|
||||
export declare function get_description(type: {
|
||||
type: any;
|
||||
description: string;
|
||||
}, serializer: string): string;
|
||||
export declare function handle_message(data: any, last_status: Status["stage"]): {
|
||||
type: "hash" | "data" | "update" | "complete" | "generating" | "log" | "none" | "heartbeat" | "unexpected_error";
|
||||
data?: any;
|
||||
status?: Status;
|
||||
};
|
||||
/**
|
||||
* Maps the provided `data` to the parameters defined by the `/info` endpoint response.
|
||||
* This allows us to support both positional and keyword arguments passed to the client
|
||||
* and ensures that all parameters are either directly provided or have default values assigned.
|
||||
*
|
||||
* @param {unknown[] | Record<string, unknown>} data - The input data for the function,
|
||||
* which can be either an array of values for positional arguments or an object
|
||||
* with key-value pairs for keyword arguments.
|
||||
* @param {JsApiData[]} parameters - Array of parameter descriptions retrieved from the
|
||||
* `/info` endpoint.
|
||||
*
|
||||
* @returns {unknown[]} - Returns an array of resolved data where each element corresponds
|
||||
* to the expected parameter from the API. The `parameter_default` value is used where
|
||||
* a value is not provided for a parameter, and optional parameters without defaults are
|
||||
* set to `undefined`.
|
||||
*
|
||||
* @throws {Error} - Throws an error:
|
||||
* - If more arguments are provided than are defined in the parameters.
|
||||
* * - If no parameter value is provided for a required parameter and no default value is defined.
|
||||
* - If an argument is provided that does not match any defined parameter.
|
||||
*/
|
||||
export declare const map_data_to_params: (data: (unknown[] | Record<string, unknown>) | undefined, endpoint_info: EndpointInfo<JsApiData | ApiData>) => unknown[];
|
||||
@ -1,20 +0,0 @@
|
||||
import { type ApiData, type BlobRef, type Config, type EndpointInfo, type JsApiData, type DataType, Command, type Dependency, type ComponentMeta } from "../types";
|
||||
import { FileData } from "../upload";
|
||||
export declare function update_object(object: {
|
||||
[x: string]: any;
|
||||
}, newValue: any, stack: (string | number)[]): void;
|
||||
export declare function walk_and_store_blobs(data: DataType, type?: string | undefined, path?: string[], root?: boolean, endpoint_info?: EndpointInfo<ApiData | JsApiData> | undefined): Promise<BlobRef[]>;
|
||||
export declare function skip_queue(id: number, config: Config): boolean;
|
||||
export declare function post_message<Res = any>(message: any, origin: string): Promise<Res>;
|
||||
export declare function handle_file(file_or_url: File | string | Blob | Buffer): FileData | Blob | Command;
|
||||
/**
|
||||
* Handles the payload by filtering out state inputs and returning an array of resolved payload values.
|
||||
* We send null values for state inputs to the server, but we don't want to include them in the resolved payload.
|
||||
*
|
||||
* @param resolved_payload - The resolved payload values received from the client or the server
|
||||
* @param dependency - The dependency object.
|
||||
* @param components - The array of component metadata.
|
||||
* @param with_null_state - Optional. Specifies whether to include null values for state inputs. Default is false.
|
||||
* @returns An array of resolved payload values, filtered based on the dependency and component metadata.
|
||||
*/
|
||||
export declare function handle_payload(resolved_payload: unknown[], dependency: Dependency, components: ComponentMeta[], type: "input" | "output", with_null_state?: boolean): unknown[];
|
||||
@ -1,24 +0,0 @@
|
||||
import type { Config } from "../types";
|
||||
import { Client } from "..";
|
||||
/**
|
||||
* This function is used to resolve the URL for making requests when the app has a root path.
|
||||
* The root path could be a path suffix like "/app" which is appended to the end of the base URL. Or
|
||||
* it could be a full URL like "https://abidlabs-test-client-replica--gqf2x.hf.space" which is used when hosting
|
||||
* Gradio apps on Hugging Face Spaces.
|
||||
* @param {string} base_url The base URL at which the Gradio server is hosted
|
||||
* @param {string} root_path The root path, which could be a path suffix (e.g. mounted in FastAPI app) or a full URL (e.g. hosted on Hugging Face Spaces)
|
||||
* @param {boolean} prioritize_base Whether to prioritize the base URL over the root path. This is used when both the base path and root paths are full URLs. For example, for fetching files the root path should be prioritized, but for making requests, the base URL should be prioritized.
|
||||
* @returns {string} the resolved URL
|
||||
*/
|
||||
export declare function resolve_root(base_url: string, root_path: string, prioritize_base: boolean): string;
|
||||
export declare function get_jwt(space: string, token: `hf_${string}`, cookies?: string | null): Promise<string | false>;
|
||||
export declare function map_names_to_ids(fns: Config["dependencies"]): Record<string, number>;
|
||||
export declare function resolve_config(this: Client, endpoint: string): Promise<Config | undefined>;
|
||||
export declare function resolve_cookies(this: Client): Promise<void>;
|
||||
export declare function get_cookie_header(http_protocol: string, host: string, auth: [string, string], _fetch: typeof fetch, hf_token?: `hf_${string}`): Promise<string | null>;
|
||||
export declare function determine_protocol(endpoint: string): {
|
||||
ws_protocol: "ws" | "wss";
|
||||
http_protocol: "http:" | "https:";
|
||||
host: string;
|
||||
};
|
||||
export declare const parse_and_set_cookies: (cookie_header: string) => string[];
|
||||
@ -1,7 +0,0 @@
|
||||
import type { SpaceStatusCallback } from "../types";
|
||||
export declare function check_space_status(id: string, type: "subdomain" | "space_name", status_callback: SpaceStatusCallback): Promise<void>;
|
||||
export declare const check_and_wake_space: (space_id: string, status_callback: SpaceStatusCallback) => Promise<void>;
|
||||
export declare function discussions_enabled(space_id: string): Promise<boolean>;
|
||||
export declare function get_space_hardware(space_id: string, hf_token?: `hf_${string}` | undefined): Promise<(typeof hardware_types)[number]>;
|
||||
export declare function set_space_timeout(space_id: string, timeout: number, hf_token?: `hf_${string}`): Promise<any>;
|
||||
export declare const hardware_types: readonly ["cpu-basic", "cpu-upgrade", "cpu-xl", "t4-small", "t4-medium", "a10g-small", "a10g-large", "a10g-largex2", "a10g-largex4", "a100-large", "zero-a10g", "h100", "h100x8"];
|
||||
@ -1,9 +0,0 @@
|
||||
export { Client } from "./client";
|
||||
export { predict } from "./utils/predict";
|
||||
export { submit } from "./utils/submit";
|
||||
export { upload_files } from "./utils/upload_files";
|
||||
export { FileData, upload, prepare_files } from "./upload";
|
||||
export { handle_file } from "./helpers/data";
|
||||
export type { SpaceStatus, StatusMessage, Status, client_return, UploadResponse, RenderMessage, LogMessage, Payload } from "./types";
|
||||
export { client } from "./client";
|
||||
export { duplicate_space as duplicate } from "./client";
|
||||
@ -1,302 +0,0 @@
|
||||
import { hardware_types } from "./helpers/spaces";
|
||||
import type { SvelteComponent } from "svelte";
|
||||
import type { ComponentType } from "svelte";
|
||||
export interface ApiData {
|
||||
label: string;
|
||||
parameter_name: string;
|
||||
parameter_default?: any;
|
||||
parameter_has_default?: boolean;
|
||||
type: {
|
||||
type: any;
|
||||
description: string;
|
||||
};
|
||||
component: string;
|
||||
example_input?: any;
|
||||
python_type: {
|
||||
type: string;
|
||||
description: string;
|
||||
};
|
||||
serializer: string;
|
||||
}
|
||||
export interface JsApiData {
|
||||
label: string;
|
||||
parameter_name: string;
|
||||
parameter_default?: any;
|
||||
parameter_has_default?: boolean;
|
||||
type: string;
|
||||
description: string;
|
||||
component: string;
|
||||
example_input?: any;
|
||||
serializer: string;
|
||||
python_type: {
|
||||
type: string;
|
||||
description: string;
|
||||
};
|
||||
}
|
||||
export interface EndpointInfo<T extends ApiData | JsApiData> {
|
||||
parameters: T[];
|
||||
returns: T[];
|
||||
type?: DependencyTypes;
|
||||
}
|
||||
export interface ApiInfo<T extends ApiData | JsApiData> {
|
||||
named_endpoints: Record<string, EndpointInfo<T>>;
|
||||
unnamed_endpoints: Record<string, EndpointInfo<T>>;
|
||||
}
|
||||
export interface BlobRef {
|
||||
path: string[];
|
||||
type: string | undefined;
|
||||
blob: Blob | File | false;
|
||||
}
|
||||
export type DataType = string | Buffer | Record<string, any> | any[];
|
||||
export declare class Command {
|
||||
type: string;
|
||||
command: string;
|
||||
meta: {
|
||||
path: string;
|
||||
name: string;
|
||||
orig_path: string;
|
||||
};
|
||||
fileData?: FileData;
|
||||
constructor(command: string, meta: {
|
||||
path: string;
|
||||
name: string;
|
||||
orig_path: string;
|
||||
});
|
||||
}
|
||||
export type SubmitFunction = (endpoint: string | number, data?: unknown[] | Record<string, unknown>, event_data?: unknown, trigger_id?: number | null) => SubmitIterable<GradioEvent>;
|
||||
export type PredictFunction = (endpoint: string | number, data?: unknown[] | Record<string, unknown>, event_data?: unknown) => Promise<PredictReturn>;
|
||||
export type client_return = {
|
||||
config: Config | undefined;
|
||||
predict: PredictFunction;
|
||||
submit: SubmitFunction;
|
||||
component_server: (component_id: number, fn_name: string, data: unknown[]) => any;
|
||||
view_api: (_fetch: typeof fetch) => Promise<ApiInfo<JsApiData>>;
|
||||
};
|
||||
export interface SubmitIterable<T> extends AsyncIterable<T> {
|
||||
[Symbol.asyncIterator](): AsyncIterator<T>;
|
||||
cancel: () => Promise<void>;
|
||||
}
|
||||
export type PredictReturn = {
|
||||
type: EventType;
|
||||
time: Date;
|
||||
data: unknown;
|
||||
endpoint: string;
|
||||
fn_index: number;
|
||||
};
|
||||
export type SpaceStatus = SpaceStatusNormal | SpaceStatusError;
|
||||
export interface SpaceStatusNormal {
|
||||
status: "sleeping" | "running" | "building" | "error" | "stopped" | "starting";
|
||||
detail: "SLEEPING" | "RUNNING" | "RUNNING_BUILDING" | "BUILDING" | "APP_STARTING" | "NOT_FOUND";
|
||||
load_status: "pending" | "error" | "complete" | "generating";
|
||||
message: string;
|
||||
}
|
||||
export interface SpaceStatusError {
|
||||
status: "space_error" | "paused";
|
||||
detail: "NO_APP_FILE" | "CONFIG_ERROR" | "BUILD_ERROR" | "RUNTIME_ERROR" | "PAUSED";
|
||||
load_status: "error";
|
||||
message: string;
|
||||
discussions_enabled: boolean;
|
||||
}
|
||||
export type SpaceStatusCallback = (a: SpaceStatus) => void;
|
||||
export interface Config {
|
||||
auth_required?: true;
|
||||
analytics_enabled: boolean;
|
||||
connect_heartbeat: boolean;
|
||||
auth_message: string;
|
||||
components: ComponentMeta[];
|
||||
css: string | null;
|
||||
js: string | null;
|
||||
head: string | null;
|
||||
dependencies: Dependency[];
|
||||
dev_mode: boolean;
|
||||
enable_queue: boolean;
|
||||
show_error: boolean;
|
||||
layout: any;
|
||||
mode: "blocks" | "interface";
|
||||
root: string;
|
||||
root_url?: string;
|
||||
theme: string;
|
||||
title: string;
|
||||
version: string;
|
||||
space_id: string | null;
|
||||
is_space: boolean;
|
||||
is_colab: boolean;
|
||||
show_api: boolean;
|
||||
stylesheets: string[];
|
||||
path: string;
|
||||
protocol: "sse_v3" | "sse_v2.1" | "sse_v2" | "sse_v1" | "sse" | "ws";
|
||||
max_file_size?: number;
|
||||
theme_hash?: number;
|
||||
username: string | null;
|
||||
}
|
||||
export interface ComponentMeta {
|
||||
type: string;
|
||||
id: number;
|
||||
has_modes: boolean;
|
||||
props: SharedProps;
|
||||
instance: SvelteComponent;
|
||||
component: ComponentType<SvelteComponent>;
|
||||
documentation?: Documentation;
|
||||
children?: ComponentMeta[];
|
||||
parent?: ComponentMeta;
|
||||
value?: any;
|
||||
component_class_id: string;
|
||||
key: string | number | null;
|
||||
rendered_in?: number;
|
||||
}
|
||||
interface SharedProps {
|
||||
elem_id?: string;
|
||||
elem_classes?: string[];
|
||||
components?: string[];
|
||||
server_fns?: string[];
|
||||
interactive: boolean;
|
||||
[key: string]: unknown;
|
||||
root_url?: string;
|
||||
}
|
||||
export interface Documentation {
|
||||
type?: TypeDescription;
|
||||
description?: TypeDescription;
|
||||
example_data?: string;
|
||||
}
|
||||
interface TypeDescription {
|
||||
input_payload?: string;
|
||||
response_object?: string;
|
||||
payload?: string;
|
||||
}
|
||||
export interface Dependency {
|
||||
id: number;
|
||||
targets: [number, string][];
|
||||
inputs: number[];
|
||||
outputs: number[];
|
||||
backend_fn: boolean;
|
||||
js: string | null;
|
||||
scroll_to_output: boolean;
|
||||
trigger: "click" | "load" | string;
|
||||
max_batch_size: number;
|
||||
show_progress: "full" | "minimal" | "hidden";
|
||||
frontend_fn: ((...args: unknown[]) => Promise<unknown[]>) | null;
|
||||
status?: string;
|
||||
queue: boolean | null;
|
||||
every: number | null;
|
||||
batch: boolean;
|
||||
api_name: string | null;
|
||||
cancels: number[];
|
||||
types: DependencyTypes;
|
||||
collects_event_data: boolean;
|
||||
pending_request?: boolean;
|
||||
trigger_after?: number;
|
||||
trigger_only_on_success?: boolean;
|
||||
trigger_mode: "once" | "multiple" | "always_last";
|
||||
final_event: Payload | null;
|
||||
show_api: boolean;
|
||||
zerogpu?: boolean;
|
||||
rendered_in: number | null;
|
||||
}
|
||||
export interface DependencyTypes {
|
||||
generator: boolean;
|
||||
cancel: boolean;
|
||||
}
|
||||
export interface Payload {
|
||||
fn_index: number;
|
||||
data: unknown[];
|
||||
time?: Date;
|
||||
event_data?: unknown;
|
||||
trigger_id?: number | null;
|
||||
}
|
||||
export interface PostResponse {
|
||||
error?: string;
|
||||
[x: string]: any;
|
||||
}
|
||||
export interface UploadResponse {
|
||||
error?: string;
|
||||
files?: string[];
|
||||
}
|
||||
export interface DuplicateOptions extends ClientOptions {
|
||||
private?: boolean;
|
||||
hardware?: (typeof hardware_types)[number];
|
||||
timeout?: number;
|
||||
}
|
||||
export interface ClientOptions {
|
||||
hf_token?: `hf_${string}`;
|
||||
status_callback?: SpaceStatusCallback | null;
|
||||
auth?: [string, string] | null;
|
||||
with_null_state?: boolean;
|
||||
events?: EventType[];
|
||||
}
|
||||
export interface FileData {
|
||||
name: string;
|
||||
orig_name?: string;
|
||||
size?: number;
|
||||
data: string;
|
||||
blob?: File;
|
||||
is_file?: boolean;
|
||||
mime_type?: string;
|
||||
alt_text?: string;
|
||||
}
|
||||
export type EventType = "data" | "status" | "log" | "render";
|
||||
export interface EventMap {
|
||||
data: PayloadMessage;
|
||||
status: StatusMessage;
|
||||
log: LogMessage;
|
||||
render: RenderMessage;
|
||||
}
|
||||
export type GradioEvent = {
|
||||
[P in EventType]: EventMap[P];
|
||||
}[EventType];
|
||||
export interface Log {
|
||||
log: string;
|
||||
level: "warning" | "info";
|
||||
}
|
||||
export interface Render {
|
||||
data: {
|
||||
components: any[];
|
||||
layout: any;
|
||||
dependencies: Dependency[];
|
||||
render_id: number;
|
||||
};
|
||||
}
|
||||
export interface Status {
|
||||
queue: boolean;
|
||||
code?: string;
|
||||
success?: boolean;
|
||||
stage: "pending" | "error" | "complete" | "generating";
|
||||
duration?: number;
|
||||
visible?: boolean;
|
||||
broken?: boolean;
|
||||
size?: number;
|
||||
position?: number;
|
||||
eta?: number;
|
||||
message?: string;
|
||||
progress_data?: {
|
||||
progress: number | null;
|
||||
index: number | null;
|
||||
length: number | null;
|
||||
unit: string | null;
|
||||
desc: string | null;
|
||||
}[];
|
||||
time?: Date;
|
||||
changed_state_ids?: number[];
|
||||
}
|
||||
export interface StatusMessage extends Status {
|
||||
type: "status";
|
||||
endpoint: string;
|
||||
fn_index: number;
|
||||
}
|
||||
export interface PayloadMessage extends Payload {
|
||||
type: "data";
|
||||
endpoint: string;
|
||||
fn_index: number;
|
||||
}
|
||||
export interface LogMessage extends Log {
|
||||
type: "log";
|
||||
endpoint: string;
|
||||
fn_index: number;
|
||||
duration: number | null;
|
||||
visible: boolean;
|
||||
}
|
||||
export interface RenderMessage extends Render {
|
||||
type: "render";
|
||||
endpoint: string;
|
||||
fn_index: number;
|
||||
}
|
||||
export {};
|
||||
@ -1,26 +0,0 @@
|
||||
import type { Client } from "./client";
|
||||
export declare function upload(this: Client, file_data: FileData[], root_url: string, upload_id?: string, max_file_size?: number): Promise<(FileData | null)[] | null>;
|
||||
export declare function prepare_files(files: File[], is_stream?: boolean): Promise<FileData[]>;
|
||||
export declare class FileData {
|
||||
path: string;
|
||||
url?: string;
|
||||
orig_name?: string;
|
||||
size?: number;
|
||||
blob?: File;
|
||||
is_stream?: boolean;
|
||||
mime_type?: string;
|
||||
alt_text?: string;
|
||||
readonly meta: {
|
||||
_type: string;
|
||||
};
|
||||
constructor({ path, url, orig_name, size, blob, is_stream, mime_type, alt_text }: {
|
||||
path: string;
|
||||
url?: string;
|
||||
orig_name?: string;
|
||||
size?: number;
|
||||
blob?: File;
|
||||
is_stream?: boolean;
|
||||
mime_type?: string;
|
||||
alt_text?: string;
|
||||
});
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import type { DuplicateOptions } from "../types";
|
||||
import { Client } from "../client";
|
||||
export declare function duplicate(app_reference: string, options: DuplicateOptions): Promise<Client>;
|
||||
@ -1,4 +0,0 @@
|
||||
import { type ApiData, type EndpointInfo, type JsApiData } from "../types";
|
||||
import type { Client } from "..";
|
||||
export declare function handle_blob(this: Client, endpoint: string, data: unknown[], api_info: EndpointInfo<JsApiData | ApiData>): Promise<unknown[]>;
|
||||
export declare function process_local_file_commands(client: Client, data: unknown[]): Promise<void>;
|
||||
@ -1,3 +0,0 @@
|
||||
import type { PostResponse } from "../types";
|
||||
import { Client } from "..";
|
||||
export declare function post_data(this: Client, url: string, body: unknown, additional_headers?: any): Promise<[PostResponse, number]>;
|
||||
@ -1,3 +0,0 @@
|
||||
import { Client } from "../client";
|
||||
import type { PredictReturn } from "../types";
|
||||
export declare function predict(this: Client, endpoint: string | number, data?: unknown[] | Record<string, unknown>): Promise<PredictReturn>;
|
||||
@ -1,8 +0,0 @@
|
||||
import type { Client } from "../client";
|
||||
export declare function open_stream(this: Client): Promise<void>;
|
||||
export declare function close_stream(stream_status: {
|
||||
open: boolean;
|
||||
}, abort_controller: AbortController | null): void;
|
||||
export declare function apply_diff_stream(pending_diff_streams: Record<string, any[][]>, event_id: string, data: any): void;
|
||||
export declare function apply_diff(obj: any, diff: [string, (number | string)[], any][]): any;
|
||||
export declare function readable_stream(input: RequestInfo | URL, init?: RequestInit): EventSource;
|
||||
@ -1,3 +0,0 @@
|
||||
import type { GradioEvent, SubmitIterable } from "../types";
|
||||
import { Client } from "../client";
|
||||
export declare function submit(this: Client, endpoint: string | number, data?: unknown[] | Record<string, unknown>, event_data?: unknown, trigger_id?: number | null, all_events?: boolean): SubmitIterable<GradioEvent>;
|
||||
@ -1,3 +0,0 @@
|
||||
import type { Client } from "..";
|
||||
import type { UploadResponse } from "../types";
|
||||
export declare function upload_files(this: Client, root_url: string, files: (Blob | File)[], upload_id?: string): Promise<UploadResponse>;
|
||||
@ -1,2 +0,0 @@
|
||||
import { Client } from "../client";
|
||||
export declare function view_api(this: Client): Promise<any>;
|
||||
@ -1,2 +0,0 @@
|
||||
import { colors } from "@gradio/theme";
|
||||
export declare const get_next_color: (index: number) => keyof typeof colors;
|
||||
@ -1,2 +0,0 @@
|
||||
export * from "./color.js";
|
||||
export * from "./utils.js";
|
||||
@ -1,69 +0,0 @@
|
||||
import type { ActionReturn } from "svelte/action";
|
||||
import type { Client } from "@gradio/client";
|
||||
import type { ComponentType, SvelteComponent } from "svelte";
|
||||
export interface ValueData {
|
||||
value: any;
|
||||
is_value_data: boolean;
|
||||
}
|
||||
export interface SelectData {
|
||||
row_value?: any[];
|
||||
index: number | [number, number];
|
||||
value: any;
|
||||
selected?: boolean;
|
||||
}
|
||||
export interface LikeData {
|
||||
index: number | [number, number];
|
||||
value: any;
|
||||
liked?: boolean;
|
||||
}
|
||||
export interface KeyUpData {
|
||||
key: string;
|
||||
input_value: string;
|
||||
}
|
||||
export interface ShareData {
|
||||
description: string;
|
||||
title?: string;
|
||||
}
|
||||
export declare class ShareError extends Error {
|
||||
constructor(message: string);
|
||||
}
|
||||
export declare function uploadToHuggingFace(data: string | {
|
||||
url?: string;
|
||||
path?: string;
|
||||
}, type: "base64" | "url"): Promise<string>;
|
||||
export declare function copy(node: HTMLDivElement): ActionReturn;
|
||||
export declare const format_time: (seconds: number) => string;
|
||||
interface Args {
|
||||
api_url: string;
|
||||
name: string;
|
||||
id?: string;
|
||||
variant: "component" | "example" | "base";
|
||||
}
|
||||
type component_loader = (args: Args) => {
|
||||
name: "string";
|
||||
component: {
|
||||
default: ComponentType<SvelteComponent>;
|
||||
};
|
||||
};
|
||||
export type I18nFormatter = any;
|
||||
export declare class Gradio<T extends Record<string, any> = Record<string, any>> {
|
||||
#private;
|
||||
theme: string;
|
||||
version: string;
|
||||
i18n: I18nFormatter;
|
||||
root: string;
|
||||
autoscroll: boolean;
|
||||
max_file_size: number | null;
|
||||
client: Client;
|
||||
_load_component?: component_loader;
|
||||
load_component: (name: string, variant?: "base" | "component" | "example" | undefined) => {
|
||||
name: "string";
|
||||
component: {
|
||||
default: ComponentType<SvelteComponent>;
|
||||
};
|
||||
};
|
||||
constructor(id: number, el: HTMLElement, theme: string, version: string, root: string, autoscroll: boolean, max_file_size: number | null, i18n: I18nFormatter, client: Client, virtual_component_loader?: component_loader);
|
||||
dispatch<E extends keyof T>(event_name: E, data?: T[E]): void;
|
||||
}
|
||||
export declare const css_units: (dimension_value: string | number) => string;
|
||||
export {};
|
||||
@ -1,12 +1,23 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!doctype html >
|
||||
<html lang="en" style="
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" style="width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -7,3 +7,10 @@
|
||||
</script>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
background: var(--body-background-fill);
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
let active_theme_mode: ThemeMode;
|
||||
let intersecting: ReturnType<typeof create_intersection_store> = {
|
||||
register: () => {},
|
||||
subscribe: writable({}).subscribe
|
||||
subscribe: writable({}).subscribe,
|
||||
};
|
||||
|
||||
$: if (config?.app_id) {
|
||||
@ -126,7 +126,7 @@
|
||||
message: "",
|
||||
load_status: "pending",
|
||||
status: "sleeping",
|
||||
detail: "SLEEPING"
|
||||
detail: "SLEEPING",
|
||||
};
|
||||
|
||||
let app: ClientType = data.app;
|
||||
@ -139,7 +139,7 @@
|
||||
let gradio_dev_mode = "";
|
||||
|
||||
onMount(async () => {
|
||||
active_theme_mode = handle_theme_mode(wrapper);
|
||||
// active_theme_mode = handle_theme_mode(wrapper);
|
||||
|
||||
//@ts-ignore
|
||||
config = data.config;
|
||||
@ -158,7 +158,7 @@
|
||||
message: "",
|
||||
load_status: "complete",
|
||||
status: "running",
|
||||
detail: "RUNNING"
|
||||
detail: "RUNNING",
|
||||
};
|
||||
|
||||
css_ready = true;
|
||||
@ -181,7 +181,7 @@
|
||||
app = await Client.connect(data.api_url, {
|
||||
status_callback: handle_status,
|
||||
with_null_state: true,
|
||||
events: ["data", "log", "status", "render"]
|
||||
events: ["data", "log", "status", "render"],
|
||||
});
|
||||
|
||||
if (!app.config) {
|
||||
@ -207,8 +207,8 @@
|
||||
new CustomEvent("render", {
|
||||
bubbles: true,
|
||||
cancelable: false,
|
||||
composed: true
|
||||
})
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
@ -219,7 +219,7 @@
|
||||
|
||||
async function mount_space_header(
|
||||
space_id: string | null | undefined,
|
||||
is_embed: boolean
|
||||
is_embed: boolean,
|
||||
): Promise<void> {
|
||||
if (space_id && !is_embed && window.self === window.top) {
|
||||
if (spaceheader) {
|
||||
@ -235,52 +235,52 @@
|
||||
spaceheader?.remove();
|
||||
});
|
||||
|
||||
function handle_theme_mode(target: HTMLDivElement): "light" | "dark" {
|
||||
let new_theme_mode: ThemeMode;
|
||||
// function handle_theme_mode(target: HTMLDivElement): "light" | "dark" {
|
||||
// let new_theme_mode: ThemeMode;
|
||||
|
||||
const url = new URL(window.location.toString());
|
||||
const url_color_mode: ThemeMode | null = url.searchParams.get(
|
||||
"__theme"
|
||||
) as ThemeMode | null;
|
||||
new_theme_mode = theme_mode || url_color_mode || "system";
|
||||
// const url = new URL(window.location.toString());
|
||||
// const url_color_mode: ThemeMode | null = url.searchParams.get(
|
||||
// "__theme"
|
||||
// ) as ThemeMode | null;
|
||||
// new_theme_mode = theme_mode || url_color_mode || "system";
|
||||
|
||||
if (new_theme_mode === "dark" || new_theme_mode === "light") {
|
||||
apply_theme(target, new_theme_mode);
|
||||
} else {
|
||||
new_theme_mode = sync_system_theme(target);
|
||||
}
|
||||
return new_theme_mode;
|
||||
}
|
||||
// if (new_theme_mode === "dark" || new_theme_mode === "light") {
|
||||
// apply_theme(target, new_theme_mode);
|
||||
// } else {
|
||||
// new_theme_mode = sync_system_theme(target);
|
||||
// }
|
||||
// return new_theme_mode;
|
||||
// }
|
||||
|
||||
function sync_system_theme(target: HTMLDivElement): "light" | "dark" {
|
||||
const theme = update_scheme();
|
||||
window
|
||||
?.matchMedia("(prefers-color-scheme: dark)")
|
||||
?.addEventListener("change", update_scheme);
|
||||
// function sync_system_theme(target: HTMLDivElement): "light" | "dark" {
|
||||
// const theme = update_scheme();
|
||||
// window
|
||||
// ?.matchMedia("(prefers-color-scheme: dark)")
|
||||
// ?.addEventListener("change", update_scheme);
|
||||
|
||||
function update_scheme(): "light" | "dark" {
|
||||
let _theme: "light" | "dark" = window?.matchMedia?.(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches
|
||||
? "dark"
|
||||
: "light";
|
||||
// function update_scheme(): "light" | "dark" {
|
||||
// let _theme: "light" | "dark" = window?.matchMedia?.(
|
||||
// "(prefers-color-scheme: dark)"
|
||||
// ).matches
|
||||
// ? "dark"
|
||||
// : "light";
|
||||
|
||||
apply_theme(target, _theme);
|
||||
return _theme;
|
||||
}
|
||||
return theme;
|
||||
}
|
||||
// apply_theme(target, _theme);
|
||||
// return _theme;
|
||||
// }
|
||||
// return theme;
|
||||
// }
|
||||
|
||||
function apply_theme(target: HTMLDivElement, theme: "dark" | "light"): void {
|
||||
const dark_class_element = is_embed ? target.parentElement! : document.body;
|
||||
const bg_element = is_embed ? target : target.parentElement!;
|
||||
bg_element.style.background = "var(--body-background-fill)";
|
||||
if (theme === "dark") {
|
||||
dark_class_element.classList.add("dark");
|
||||
} else {
|
||||
dark_class_element.classList.remove("dark");
|
||||
}
|
||||
}
|
||||
// function apply_theme(target: HTMLDivElement, theme: "dark" | "light"): void {
|
||||
// const dark_class_element = is_embed ? target.parentElement! : document.body;
|
||||
// const bg_element = is_embed ? target : target.parentElement!;
|
||||
// bg_element.style.background = "var(--body-background-fill)";
|
||||
// if (theme === "dark") {
|
||||
// dark_class_element.classList.add("dark");
|
||||
// } else {
|
||||
// dark_class_element.classList.remove("dark");
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
is_last_bot_message,
|
||||
group_messages,
|
||||
load_components,
|
||||
get_components_from_messages
|
||||
get_components_from_messages,
|
||||
} from "./utils";
|
||||
import type { NormalisedMessage } from "../types";
|
||||
import { copy } from "@gradio/utils";
|
||||
@ -18,7 +18,7 @@
|
||||
type SvelteComponent,
|
||||
type ComponentType,
|
||||
tick,
|
||||
onMount
|
||||
onMount,
|
||||
} from "svelte";
|
||||
import { Image } from "@gradio/image/shared";
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
_components = await load_components(
|
||||
get_components_from_messages(value),
|
||||
_components,
|
||||
load_component
|
||||
load_component,
|
||||
);
|
||||
}
|
||||
|
||||
@ -190,14 +190,14 @@
|
||||
function handle_example_select(i: number, example: ExampleMessage): void {
|
||||
dispatch("example_select", {
|
||||
index: i,
|
||||
value: { text: example.text, files: example.files }
|
||||
value: { text: example.text, files: example.files },
|
||||
});
|
||||
}
|
||||
|
||||
function handle_like(
|
||||
i: number,
|
||||
message: NormalisedMessage,
|
||||
selected: string | null
|
||||
selected: string | null,
|
||||
): void {
|
||||
if (selected === "undo" || selected === "retry") {
|
||||
const val_ = value as NormalisedMessage[];
|
||||
@ -209,7 +209,7 @@
|
||||
}
|
||||
dispatch(selected, {
|
||||
index: val_[last_index].index,
|
||||
value: val_[last_index].content
|
||||
value: val_[last_index].content,
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -218,7 +218,7 @@
|
||||
dispatch("like", {
|
||||
index: message.index,
|
||||
value: message.content,
|
||||
liked: selected === "like"
|
||||
liked: selected === "like",
|
||||
});
|
||||
} else {
|
||||
if (!groupedMessages) return;
|
||||
@ -226,13 +226,13 @@
|
||||
const message_group = groupedMessages[i];
|
||||
const [first, last] = [
|
||||
message_group[0],
|
||||
message_group[message_group.length - 1]
|
||||
message_group[message_group.length - 1],
|
||||
];
|
||||
|
||||
dispatch("like", {
|
||||
index: [first.index, last.index] as [number, number],
|
||||
value: message_group.map((m) => m.content),
|
||||
liked: selected === "like"
|
||||
liked: selected === "like",
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -248,7 +248,7 @@
|
||||
// @ts-ignore
|
||||
const formatted = await format_chat_for_sharing(value);
|
||||
dispatch("share", {
|
||||
description: formatted
|
||||
description: formatted,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@ -492,8 +492,10 @@
|
||||
padding-top: var(--spacing-xxl);
|
||||
}
|
||||
|
||||
:global(.dark) .bubble-wrap {
|
||||
background: var(--background-fill-secondary);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bubble-wrap {
|
||||
background: var(--background-fill-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
|
||||
@ -101,6 +101,15 @@
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toggle-icon {
|
||||
background: var(--color-grey-500);
|
||||
}
|
||||
.toggle-dot {
|
||||
background: var(--color-grey-400);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .toggle-icon {
|
||||
background: var(--color-grey-500);
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
} else {
|
||||
const url = new URL(window.location.toString());
|
||||
const url_color_mode: ThemeMode | null = url.searchParams.get(
|
||||
"__theme"
|
||||
"__theme",
|
||||
) as ThemeMode | null;
|
||||
new_theme_mode = theme_mode || url_color_mode || "system";
|
||||
}
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
function update_scheme(): "light" | "dark" {
|
||||
let _theme: "light" | "dark" = window?.matchMedia?.(
|
||||
"(prefers-color-scheme: dark)"
|
||||
"(prefers-color-scheme: dark)",
|
||||
).matches
|
||||
? "dark"
|
||||
: "light";
|
||||
|
||||
@ -113,6 +113,75 @@
|
||||
border: 1px solid var(--color-red-700);
|
||||
background: var(--color-red-50);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toast-body.error {
|
||||
border: 1px solid var(--color-red-500);
|
||||
background-color: var(--color-grey-950);
|
||||
}
|
||||
|
||||
.toast-body.warning {
|
||||
border: 1px solid var(--color-yellow-700);
|
||||
background: var(--color-yellow-50);
|
||||
}
|
||||
.toast-body.warning {
|
||||
border: 1px solid var(--color-yellow-500);
|
||||
background-color: var(--color-grey-950);
|
||||
}
|
||||
|
||||
.toast-body.info {
|
||||
border: 1px solid var(--color-grey-500);
|
||||
background-color: var(--color-grey-950);
|
||||
}
|
||||
|
||||
.toast-title.error {
|
||||
color: var(--color-red-50);
|
||||
}
|
||||
|
||||
.toast-title.warning {
|
||||
color: var(--color-yellow-50);
|
||||
}
|
||||
.toast-title.info {
|
||||
color: var(--color-grey-50);
|
||||
}
|
||||
.toast-close.error {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.toast-close.warning {
|
||||
color: var(--color-yellow-500);
|
||||
}
|
||||
.toast-close.info {
|
||||
color: var(--color-grey-500);
|
||||
}
|
||||
.toast-text.error {
|
||||
color: var(--color-red-50);
|
||||
}
|
||||
.toast-text.warning {
|
||||
color: var(--color-yellow-50);
|
||||
}
|
||||
.toast-text.info {
|
||||
color: var(--color-grey-50);
|
||||
}
|
||||
.toast-icon.error {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.toast-icon.warning {
|
||||
color: var(--color-yellow-500);
|
||||
}
|
||||
.toast-icon.info {
|
||||
color: var(--color-grey-500);
|
||||
}
|
||||
.timer.error {
|
||||
background: var(--color-red-500);
|
||||
}
|
||||
.timer.warning {
|
||||
background: var(--color-yellow-500);
|
||||
}
|
||||
.timer.info {
|
||||
background: var(--color-grey-500);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .toast-body.error {
|
||||
border: 1px solid var(--color-red-500);
|
||||
background-color: var(--color-grey-950);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user