Skip to content

Commit

Permalink
Add chat page
Browse files Browse the repository at this point in the history
  • Loading branch information
oeway committed Feb 29, 2024
1 parent bca5b14 commit 5135dac
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 57 deletions.
79 changes: 25 additions & 54 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
"dependencies": {
"@d4c/numjs": "^0.17.34",
"@mdi/font": "^5.3.45",
"@tensorflow/tfjs-backend-cpu": "^4.13.0",
"@tensorflow/tfjs-core": "^4.13.0",
"@tensorflow/tfjs-backend-cpu": "^4.17.0",
"@tensorflow/tfjs-core": "^4.17.0",
"axios": "^0.21.2",
"buefy": "^0.8.0",
"core-js": "^3.6.5",
Expand All @@ -23,7 +23,7 @@
"file-saver": "^2.0.5",
"github-markdown-css": "^4.0.0",
"highlight.js": "^10.1.1",
"imjoy-rpc": "^0.5.46",
"imjoy-rpc": "^0.5.47",
"js-yaml": "^4.1.0",
"json-stringify-safe": "^5.0.1",
"jszip": "^3.7.0",
Expand Down
110 changes: 110 additions & 0 deletions public/chat/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>BioImage.IO Chatbot</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="shortcut icon" href="static/icons/favicon.ico" type="image/x-icon" />
<link rel="icon" href="static/icons/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-startup-image" href="/launch.png">
<link rel="manifest" href="manifest.json">
<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>
</head>

<body style="width:100%;height:100vh;">
<div id="spinner" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="static/img/loading.gif" alt="Loading..." />
</div>
<div id="window-container" style="height: 100vh"></div>
<script>
// Show the spinner
document.getElementById('spinner').style.display = 'block';

const chatbotExtensions = {}
const updateCallbacks = []

loadImJoyCore().then((imjoyCore) => {
const imjoy = new imjoyCore.ImJoy({
imjoy_api: {
async registerChatbotExtension(plugin, config) {
chatbotExtensions[config.name] = config
// make a copy of the updateCallbacks
const _updateCallbacks = [...updateCallbacks]
for (const cb of _updateCallbacks) {
cb(config) // TODO: we should remove callbacks that are not needed anymore
}
},
getChatbotExtensions(plugin, updateCallback) {
if (updateCallback) updateCallbacks.push(updateCallback)
return chatbotExtensions
},
},
//imjoy config
})
imjoy.start({ workspace: 'default' }).then(async () => {
const api = imjoy.api;
// get origin url
const url = new URL(window.location.href);
const origin = url.origin;
const currentUrlParams = new URLSearchParams(window.location.search);
const chatUrl = new URL('https://chat.bioimage.io/public/apps/bioimageio-chatbot-client/chat');
chatUrl.search = currentUrlParams.toString();

await api.createWindow({ src: chatUrl.toString(), name: "BioImageIO Chatbot", window_id: "window-container" });
await api.loadPlugin("https://raw.githubusercontent.com/bioimage-io/bioimageio-chatbot/main/bioimageio_chatbot/static/bioimage-model-zoo-extension.imjoy.html");

// Hide the spinner
document.getElementById('spinner').style.display = 'none';
})
})
</script>
<style>
#menu-container {
opacity: 0.4;
}

#menu-container:hover {
opacity: 1.0;
}

.window {
min-height: 200px;
}
</style>
</body>

</html>
Binary file added public/static/img/loading.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5135dac

Please sign in to comment.