feat(console): gradio intergration (#1692)

* test gradio

* test gradio

* wip feat: done with gradio intergration

* wip: root config

* feat: online eval success

* add: gradio widget (build version)

* fix: error import

* update: config gradio with lfs

* update: move gradio to lfs

* update: with lfs

* update: with lfs

* update: with lfs

.gitattributes

@@ -7,3 +7,128 @@
 *.ttf filter=lfs diff=lfs merge=lfs -text
 *.woff filter=lfs diff=lfs merge=lfs -text
 *.woff2 filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/File.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index22.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index2.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index27.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index30.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index37.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index12.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index24.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index34.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index16.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/utils.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Model3D.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index13.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index21.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/module2.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index18.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index36.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index39.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index4.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index7.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index8.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/main.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Upload.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index15.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index32.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index38.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/linear.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Image.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index33.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/CarouselItem.svelte_svelte_type_style_lang.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/app.es.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/dsv.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/color.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index11.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index23.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index25.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index26.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/module.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/module3.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index14.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index19.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index28.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/ModifyUpload.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index6.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Image2.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/_commonjsHelpers.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index35.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index9.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Tabs.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index3.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index31.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index5.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/BlockLabel.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Column.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Webcam.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/csv.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index17.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index10.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index20.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index29.js filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Column.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index19.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/manifest.json filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index32.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/style.css filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index4.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Image.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index21.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index31.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index27.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index28.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index34.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index23.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/utils.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index20.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index8.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/main.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/module3.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/CarouselItem.svelte_svelte_type_style_lang.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/_commonjsHelpers.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/csv.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index2.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index3.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index5.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/color.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index16.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index17.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index6.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/dsv.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index26.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index37.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/File.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Upload.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index39.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index18.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index29.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index33.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Webcam.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index15.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index35.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index36.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index38.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/module2.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Tabs.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index10.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index25.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index11.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index12.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index30.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index9.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/BlockLabel.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Image2.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/ModifyUpload.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/linear.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/app.es.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index14.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index24.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index13.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index22.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/Model3D.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/index7.js.map filter=lfs diff=lfs merge=lfs -text
+console/src/assets/GradioWidget/es/module.js.map filter=lfs diff=lfs merge=lfs -text

console/packages/starwhale-core/src/editor/index.tsx

@@ -9,17 +9,40 @@ import WidgetRenderTree from '../widget/WidgetRenderTree'
 import { EventBusSrv } from '../events/events'
 import { WidgetTreeNode } from '../types'
 
+// export const registerRemoteWidgets = async () => {
+//     // @FIXME store module meta from backend
+//     // meta was defined by system not user
+//     const start = performance.now()
+
+//     // must be remote component that packaged
+//     const modules = [
+//         { type: 'ui:dndList', url: '../widgets/DNDListWidget/index.tsx' },
+//         { type: 'ui:section', url: '../widgets/SectionWidget/index.tsx' },
+//         { type: 'ui:panel:table', url: '../widgets/PanelTableWidget/index.tsx' },
+//         { type: 'ui:panel:rocauc', url: '../widgets/PanelRocAucWidget/index.tsx' },
+//         { type: 'ui:panel:heatmap', url: '../widgets/PanelHeatmapWidget/index.tsx' },
+//     ].filter((v) => !(v.type in WidgetFactory.widgetTypes))
+
+//     /* @vite-ignore */
+//     for await (const module of modules.map(async (m) => import(m.url))) {
+//         const widget = module.default as WidgetPlugin
+//         registerWidget(widget, widget.defaults)
+//     }
+
+//     console.log('Widget registration took: ', performance.now() - start, 'ms')
+// }
 // log.enableAll()
 registerWidgets()
 
 export function withEditorRegister(EditorApp: React.FC) {
     return function EditorLoader(props: any) {
         // const [registred, setRegistred] = React.useState(false)
-        // useEffect(() => {
-        //     // registerRemoteWidgets().then((module) => {
-        //     //     setRegistred(true)
-        //     // })
-        // }, [])
+        useEffect(() => {
+            import('http://127.0.0.1:8080/widget.js').then((module) => {
+                // setRegistred(true)
+                console.log(module)
+            })
+        }, [])
         // if (!registred) {
         //     return <BusyPlaceholder type='spinner' />
         // }