add imjoy lite

UFISH-Team · May 22, 2024 · 4af6784 · 4af6784
1 parent c9847a0
commit 4af6784
Showing 1 changed file with 181 additions and 0 deletions.
diff --git a/public/imjoy.html b/public/imjoy.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>ImJoy Lite</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport"
+    content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="description" content="ImJoy -- Deep Learning Made Easy!">
+  <meta name="author" content="Wei OUYANG">
+  <meta name="keywords" content="Bioimaging, image processing">
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@weioyang" />
+  <meta name="twitter:creator" content="@weioyang" />
+  <meta name="twitter:image" content="https://imjoy.io/static/img/imjoy-card-plain.png" />
+  <meta property="og:url" content="https://imjoy.io" />
+  <meta property="og:title" content="ImJoy" />
+  <meta property="og:description" content="ImJoy -- Deep Learning Made Easy!" />
+  <meta property="og:image" content="https://imjoy.io/static/img/imjoy-card-plain.png" />
+  <meta name="format-detection" content="telephone=no">
+  <link rel="apple-touch-icon" sizes="57x57" href="/static/icons/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/static/icons/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/static/icons/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/static/icons/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/static/icons/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/static/icons/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/static/icons/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/static/icons/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/static/icons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
+  <link rel="icon" href="/favicon.svg"  />
+  <link rel="apple-touch-startup-image" href="/launch.png">
+  <meta name="msapplication-TileColor" content="#f5f9ff">
+  <meta name="msapplication-TileImage" content="static/icons/ms-icon-144x144.png">
+  <meta name="theme-color" content="#f5f9ff">
+  <script src="https://lib.imjoy.io/imjoy-loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/imjoy-rpc@latest/dist/hypha-rpc-websocket.min.js"></script>
+</head>
+
+<body style="width:100%;height:100vh;">
+  <div id="menu-container" style="position: absolute; right: 0; top: 4px; z-index: 999"></div>
+  <div id="window-container" style="height: 100vh"></div>
+  <script>
+    loadImJoyBasicApp({
+      version: "0.14.3",
+      process_url_query: true,
+      show_window_title: false,
+      show_progress_bar: true,
+      show_empty_window: true,
+      menu_container: "menu-container",
+      menu_style: {},
+      window_style: {
+        width: "100%",
+        height: "100%"
+      },
+      main_container: null,
+      window_manager_container: "window-container",
+      imjoy_api: {},
+    }).then(async app => {
+      const api = app.imjoy.api;
+
+      window.app = app
+      app.imjoy.event_bus.on("add_window", w => {
+
+      })
+
+      app.addMenuItem({
+        label: "➕ Load Plugin",
+        callback() {
+          const uri = prompt(
+            `Please type a ImJoy plugin URL`,
+            "https://raw.githubusercontent.com/imjoy-team/imjoy-plugins/master/repository/welcome.imjoy.html"
+          );
+          if (uri) {
+            app.loadPlugin(uri).then((plugin) => {
+              app.runPlugin(plugin)
+            })
+          }
+        },
+      });
+      app.addMenuItem({
+        label: "🧩 ImJoy Fiddle",
+        async callback() {
+          const plugin = await app.loadPlugin("https://if.imjoy.io")
+          await app.runPlugin(plugin)
+          app.removeMenuItem("🧩 ImJoy Fiddle")
+        },
+      });
+      app.addMenuItem({
+        label: "🐍 Web Python Console",
+        async callback() {
+          const plugin = await app.loadPlugin("https://nanguage.github.io/web-python-console/")
+          await app.runPlugin(plugin)
+          app.removeMenuItem("🐍 Web Python Console")
+        },
+      });
+      // chatbot
+      app.addMenuItem({
+        label: "🤖 BioImage.IO Chatbot",
+        async callback() {
+          const plugin = await app.loadPlugin("https://bioimage.io/chat/")
+          await app.runPlugin(plugin)
+          app.removeMenuItem("🤖 BioImage.IO Chatbot")
+        },
+      })
+      // ufish client
+      app.addMenuItem({
+        label: "🎣 U-FISH",
+        async callback() {
+          const plugin = await app.loadPlugin("https://ufish-team.github.io/")
+          await app.runPlugin(plugin)
+          app.removeMenuItem("🎣 U-FISH")
+        },
+      })
+      // ufish chatbot
+      app.addMenuItem({
+        label: "🤖🎣 U-FISH Chatbot",
+        async callback() {
+          const plugin = await app.loadPlugin("https://ufish-team.github.io/plugins/chatbot-extension.imjoy.html")
+          await app.runPlugin(plugin)
+          app.removeMenuItem("🤖🎣 U-FISH Chatbot")
+        },
+      })
+
+      // parse the url query to get `server_url`, `workspace` and `token`
+      const urlParams = new URLSearchParams(window.location.search);
+      const server_url = urlParams.get('server_url') || "https://ai.imjoy.io";
+      const workspace = urlParams.get('workspace');
+      const token = urlParams.get('token');
+      const service_id = urlParams.get('service_id');
+      if(service_id){
+        await app.showLoader(true)
+        try{
+          const server = await hyphaWebsocketClient.connectToServer({"server_url": server_url, "workspace": workspace, "token": token})
+          await server.registerService({
+              "name": service_id,
+              "id": service_id,
+              "type": "imjoy-client",
+              "config": {
+                  "visibility": "protected"
+              },
+              "api": api
+          }, {overwrite: true, _rkwargs: true})
+
+          app.imjoy.expose_api = true
+          await app.imjoy.init()
+          await api.showMessage(`🎉Connected to the server (${server_url}) successfully! Workspace: ${workspace}, Service ID: ${service_id}`)
+        }
+        catch(e){
+          console.error(e)
+          alert(`Failed to connect to the server: ${e}`)
+        }
+        finally{
+          await app.showLoader(false)
+        }
+      }
+    });
+  </script>
+  <style>
+    #menu-container {
+      opacity: 0.4;
+    }
+
+    #menu-container:hover {
+      opacity: 1.0;
+    }
+
+    .window{
+      min-height: 200px;
+    }
+  </style>
+</body>
+
+</html>