@godscene/visualizer 1.7.11

package/dist/es/component/screenshot-viewer/index.css

@@ -0,0 +1,237 @@
+.screenshot-viewer {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+}
+
+.screenshot-viewer.screen-only {
+  min-height: 0;
+}
+
+.screenshot-viewer.screen-only > .screenshot-content {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  display: flex;
+}
+
+.screenshot-viewer.screen-only > .screenshot-content .screenshot-image {
+  object-fit: contain;
+  object-position: center center;
+  border-radius: 0;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  display: block;
+}
+
+.screenshot-viewer.offline, .screenshot-viewer.loading, .screenshot-viewer.error {
+  text-align: center;
+  color: #666;
+  justify-content: center;
+  align-items: center;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder h3, .screenshot-viewer.loading .screenshot-placeholder h3, .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+  text-transform: capitalize;
+  margin-bottom: 12px;
+  font-size: 18px;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder p, .screenshot-viewer.loading .screenshot-placeholder p, .screenshot-viewer.error .screenshot-placeholder p {
+  color: #666;
+  margin: 0;
+}
+
+.screenshot-viewer.offline .screenshot-placeholder p.error-message, .screenshot-viewer.loading .screenshot-placeholder p.error-message, .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+.screenshot-viewer .screenshot-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 56px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: #000;
+  text-transform: capitalize;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: #999;
+  margin: 0;
+  font-size: 12px;
+}
+
+.screenshot-viewer .screenshot-container {
+  background: #f2f4f7;
+  border-radius: 16px;
+  flex-direction: column;
+  flex: 1;
+  padding: 0 15px;
+  display: flex;
+  overflow: hidden;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay {
+  z-index: 10;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 12px 5px 8px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay {
+  color: rgba(0, 0, 0, .85);
+  text-transform: capitalize;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay .info-icon {
+  opacity: .8;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay .info-icon:hover {
+  opacity: 1;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls {
+  opacity: 1;
+  box-sizing: border-box;
+  border-radius: 4px;
+  align-items: center;
+  gap: 10px;
+  height: 18px;
+  padding: 4px 8px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: #666;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .operation-indicator {
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn {
+  box-shadow: none;
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(0, 0, 0, .06);
+  border-radius: 2px;
+  transition: all .2s;
+  transform: scale(1.1);
+}
+
+.screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: #666;
+  font-size: 12px;
+  transition: color .2s;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  display: flex;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content .screenshot-image {
+  object-fit: contain;
+  border-radius: 12px;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+}
+
+.screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  text-align: center;
+  color: #999;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline, [data-theme="dark"] .screenshot-viewer.loading, [data-theme="dark"] .screenshot-viewer.error {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container {
+  background: #141414;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay, [data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  color: rgba(255, 255, 255, .45);
+}
+

package/dist/es/component/screenshot-viewer/index.mjs

@@ -0,0 +1,319 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoCircleOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Button, Spin, Tooltip } from "antd";
+import { useCallback, useEffect, useRef, useState } from "react";
+import "./index.css";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function ScreenshotViewer({ getScreenshot, getInterfaceInfo, serverOnline, isUserOperating = false, mjpegUrl, mode = 'default' }) {
+    const [screenshot, setScreenshot] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [lastUpdateTime, setLastUpdateTime] = useState(0);
+    const [interfaceInfo, setInterfaceInfo] = useState(null);
+    const [mjpegRetryToken, setMjpegRetryToken] = useState('');
+    const mjpegImageRef = useRef(null);
+    const isMjpeg = Boolean(mjpegUrl && serverOnline);
+    const showChrome = 'screen-only' !== mode;
+    const rootClassName = [
+        'screenshot-viewer',
+        'screen-only' === mode && 'screen-only'
+    ].filter(Boolean).join(' ');
+    const pollingIntervalRef = useRef(null);
+    const isPollingPausedRef = useRef(false);
+    useEffect(()=>{
+        if (!isMjpeg) return;
+        const timer = window.setTimeout(()=>{
+            const image = mjpegImageRef.current;
+            if (!image || image.naturalWidth > 0 || image.naturalHeight > 0) return;
+            setMjpegRetryToken(String(Date.now()));
+        }, 2500);
+        return ()=>window.clearTimeout(timer);
+    }, [
+        isMjpeg,
+        mjpegRetryToken,
+        mjpegUrl
+    ]);
+    const fetchScreenshot = useCallback((isManual = false)=>_async_to_generator(function*() {
+            if (!serverOnline) return;
+            setLoading(true);
+            if (isManual) setError(null);
+            try {
+                const result = yield getScreenshot();
+                console.log('Screenshot API response:', result);
+                if (null == result ? void 0 : result.screenshot) {
+                    const screenshotData = result.screenshot.toString().trim();
+                    if (screenshotData) {
+                        setScreenshot(screenshotData);
+                        setError(null);
+                        setLastUpdateTime(Date.now());
+                    } else setError('Empty screenshot data received');
+                } else setError('No screenshot data in response');
+            } catch (err) {
+                console.error('Screenshot fetch error:', err);
+                setError(err instanceof Error ? err.message : 'Failed to fetch screenshot');
+            } finally{
+                setLoading(false);
+            }
+        })(), [
+        getScreenshot,
+        serverOnline
+    ]);
+    const fetchInterfaceInfo = useCallback(()=>_async_to_generator(function*() {
+            if (!serverOnline || !getInterfaceInfo) return;
+            try {
+                const info = yield getInterfaceInfo();
+                if (info) setInterfaceInfo(info);
+            } catch (err) {
+                console.error('Interface info fetch error:', err);
+            }
+        })(), [
+        getInterfaceInfo,
+        serverOnline
+    ]);
+    const startPolling = useCallback(()=>{
+        if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
+        console.log('Starting screenshot polling (5s interval)');
+        pollingIntervalRef.current = setInterval(()=>{
+            if (!isPollingPausedRef.current && serverOnline) fetchScreenshot(false);
+        }, 5000);
+    }, [
+        fetchScreenshot,
+        serverOnline
+    ]);
+    const stopPolling = useCallback(()=>{
+        if (pollingIntervalRef.current) {
+            console.log('Stopping screenshot polling');
+            clearInterval(pollingIntervalRef.current);
+            pollingIntervalRef.current = null;
+        }
+    }, []);
+    const pausePolling = useCallback(()=>{
+        console.log('Pausing screenshot polling');
+        isPollingPausedRef.current = true;
+    }, []);
+    const resumePolling = useCallback(()=>{
+        console.log('Resuming screenshot polling');
+        isPollingPausedRef.current = false;
+    }, []);
+    const handleManualRefresh = useCallback(()=>{
+        fetchScreenshot(true);
+    }, [
+        fetchScreenshot
+    ]);
+    useEffect(()=>{
+        if (!serverOnline) {
+            setScreenshot(null);
+            setError(null);
+            setInterfaceInfo(null);
+            stopPolling();
+            return;
+        }
+        fetchInterfaceInfo();
+        if (isMjpeg) return void stopPolling();
+        fetchScreenshot(false);
+        startPolling();
+        return ()=>{
+            stopPolling();
+        };
+    }, [
+        serverOnline,
+        isMjpeg,
+        startPolling,
+        stopPolling,
+        fetchScreenshot,
+        fetchInterfaceInfo
+    ]);
+    useEffect(()=>{
+        if (!serverOnline || isMjpeg) return;
+        if (isUserOperating) pausePolling();
+        else {
+            resumePolling();
+            fetchScreenshot(false);
+        }
+    }, [
+        isUserOperating,
+        pausePolling,
+        resumePolling,
+        fetchScreenshot,
+        serverOnline,
+        isMjpeg
+    ]);
+    useEffect(()=>()=>{
+            stopPolling();
+        }, [
+        stopPolling
+    ]);
+    if (!serverOnline) return /*#__PURE__*/ jsx("div", {
+        className: `${rootClassName} offline`,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "screenshot-placeholder",
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    children: "\uD83D\uDCF1 Screen Preview"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    children: "Start the playground server to see real-time screenshots"
+                })
+            ]
+        })
+    });
+    if (!isMjpeg && loading && !screenshot) return /*#__PURE__*/ jsxs("div", {
+        className: `${rootClassName} loading`,
+        children: [
+            /*#__PURE__*/ jsx(Spin, {
+                size: "large"
+            }),
+            /*#__PURE__*/ jsx("p", {
+                children: "Loading screenshot..."
+            })
+        ]
+    });
+    if (!isMjpeg && error && !screenshot) return /*#__PURE__*/ jsx("div", {
+        className: `${rootClassName} error`,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "screenshot-placeholder",
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    children: "\uD83D\uDCF1 Screen Preview"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "error-message",
+                    children: error
+                })
+            ]
+        })
+    });
+    const formatLastUpdateTime = (timestamp)=>{
+        if (!timestamp) return '';
+        const now = Date.now();
+        const diff = Math.floor((now - timestamp) / 1000);
+        if (diff < 60) return `${diff}s ago`;
+        if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+        return new Date(timestamp).toLocaleTimeString();
+    };
+    const screenshotContent = /*#__PURE__*/ jsx("div", {
+        className: "screenshot-content",
+        children: isMjpeg ? /*#__PURE__*/ jsx("img", {
+            ref: mjpegImageRef,
+            src: mjpegRetryToken ? `${mjpegUrl}${(null == mjpegUrl ? void 0 : mjpegUrl.includes('?')) ? '&' : '?'}_mjpegRetry=${encodeURIComponent(mjpegRetryToken)}` : mjpegUrl,
+            alt: "Device Live Stream",
+            className: "screenshot-image",
+            onError: ()=>{
+                window.setTimeout(()=>setMjpegRetryToken(String(Date.now())), 500);
+            }
+        }, mjpegRetryToken || 'initial') : screenshot ? /*#__PURE__*/ jsx("img", {
+            src: screenshot.startsWith('data:image/') ? screenshot : `data:image/png;base64,${screenshot}`,
+            alt: "Device Screenshot",
+            className: "screenshot-image",
+            onLoad: ()=>console.log('Screenshot image loaded successfully'),
+            onError: (e)=>{
+                console.error('Screenshot image load error:', e);
+                console.error('Screenshot data preview:', screenshot.substring(0, 100));
+                setError('Failed to load screenshot image');
+            }
+        }) : /*#__PURE__*/ jsx("div", {
+            className: "screenshot-placeholder",
+            children: /*#__PURE__*/ jsx("p", {
+                children: "No screenshot available"
+            })
+        })
+    });
+    if (!showChrome) return /*#__PURE__*/ jsx("div", {
+        className: rootClassName,
+        children: screenshotContent
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: rootClassName,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "screenshot-header",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "screenshot-title",
+                    children: /*#__PURE__*/ jsx("h3", {
+                        children: (null == interfaceInfo ? void 0 : interfaceInfo.type) ? interfaceInfo.type : 'Device Name'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "screenshot-container",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "screenshot-overlay",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "device-name-overlay",
+                                children: [
+                                    "Device Name",
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        title: null == interfaceInfo ? void 0 : interfaceInfo.description,
+                                        children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
+                                            size: 16,
+                                            className: "info-icon"
+                                        })
+                                    })
+                                ]
+                            }),
+                            !isMjpeg && /*#__PURE__*/ jsxs("div", {
+                                className: "screenshot-controls",
+                                children: [
+                                    lastUpdateTime > 0 && /*#__PURE__*/ jsxs("span", {
+                                        className: "last-update-time",
+                                        children: [
+                                            "Last updated ",
+                                            formatLastUpdateTime(lastUpdateTime)
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        title: "Refresh screenshot",
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            icon: /*#__PURE__*/ jsx(ReloadOutlined, {}),
+                                            onClick: handleManualRefresh,
+                                            loading: loading,
+                                            size: "small"
+                                        })
+                                    }),
+                                    isUserOperating && /*#__PURE__*/ jsxs("span", {
+                                        className: "operation-indicator",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Spin, {
+                                                size: "small"
+                                            }),
+                                            " Operating..."
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    screenshotContent
+                ]
+            })
+        ]
+    });
+}
+export { ScreenshotViewer as default };

package/dist/es/component/service-mode-control/index.mjs

@@ -0,0 +1,107 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PlaygroundSDK } from "@godscene/playground";
+import { Button, Tooltip, message } from "antd";
+import { useEffect } from "react";
+import { safeOverrideAIConfig } from "../../hooks/useSafeOverrideAIConfig.mjs";
+import { useServerValid } from "../../hooks/useServerValid.mjs";
+import { useEnvConfig } from "../../store/store.mjs";
+import { EnvConfig } from "../env-config/index.mjs";
+import { iconForStatus } from "../misc/index.mjs";
+const TITLE_TEXT = {
+    Server: 'Server Status',
+    'In-Browser': 'In-Browser'
+};
+const SWITCH_BUTTON_TEXT = {
+    Server: 'Switch to In-Browser Mode',
+    'In-Browser': 'Switch to Server Mode'
+};
+const ServiceModeControl = ({ serviceMode })=>{
+    const { setServiceMode, config } = useEnvConfig();
+    const serverValid = useServerValid('Server' === serviceMode);
+    const renderServerTip = ()=>{
+        if (serverValid) return /*#__PURE__*/ jsx(Tooltip, {
+            title: "Connected",
+            children: /*#__PURE__*/ jsx("div", {
+                className: "server-tip",
+                children: iconForStatus('connected')
+            })
+        });
+        return /*#__PURE__*/ jsx(Tooltip, {
+            title: "Connection failed",
+            children: /*#__PURE__*/ jsx("div", {
+                className: "server-tip",
+                children: iconForStatus('failed')
+            })
+        });
+    };
+    const renderSwitchButton = ()=>{
+        const nextMode = 'Server' === serviceMode ? 'In-Browser' : 'Server';
+        const buttonText = SWITCH_BUTTON_TEXT[serviceMode];
+        return /*#__PURE__*/ jsx(Tooltip, {
+            title: /*#__PURE__*/ jsxs("span", {
+                children: [
+                    "Server Mode: send the request through the server ",
+                    /*#__PURE__*/ jsx("br", {}),
+                    "In-Browser Mode: send the request through the browser fetch API (The AI service should support CORS in this case)"
+                ]
+            }),
+            children: /*#__PURE__*/ jsx(Button, {
+                type: "link",
+                onClick: (e)=>{
+                    e.preventDefault();
+                    setServiceMode(nextMode);
+                },
+                children: buttonText
+            })
+        });
+    };
+    useEffect(()=>{
+        safeOverrideAIConfig(config, false, false);
+        if ('Server' === serviceMode) {
+            const playgroundSDK = new PlaygroundSDK({
+                type: 'remote-execution'
+            });
+            playgroundSDK.overrideConfig(config).catch((error)=>{
+                const errorMsg = error instanceof Error ? error.message : String(error);
+                message.error(`Failed to apply AI configuration: ${errorMsg}`);
+            });
+        }
+    }, [
+        config,
+        serviceMode,
+        serverValid
+    ]);
+    const statusContent = 'Server' === serviceMode && renderServerTip();
+    const title = TITLE_TEXT[serviceMode];
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '10px'
+                },
+                children: [
+                    /*#__PURE__*/ jsx("h3", {
+                        style: {
+                            whiteSpace: 'nowrap',
+                            margin: 0,
+                            flexShrink: 0
+                        },
+                        children: title
+                    }),
+                    statusContent,
+                    /*#__PURE__*/ jsx(EnvConfig, {
+                        showTooltipWhenEmpty: 'Server' !== serviceMode
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "switch-btn-wrapper",
+                children: renderSwitchButton()
+            })
+        ]
+    });
+};
+export { ServiceModeControl };