add chatbot

src/App.vue

@@ -54,6 +54,9 @@ export default {
         <v-list-item prepend-icon="mdi-play-circle-outline"
           @click="()=>{gotoPage('predict')}"
           title="Predict" value="predict"></v-list-item>
+        <v-list-item prepend-icon="mdi-robot"
+          @click="()=>{gotoPage('chatbot')}"
+          title="Chatbot" value="chatbot"></v-list-item>
         <v-list-item prepend-icon="mdi-information-outline"
           @click="()=>{gotoPage('about')}"
           title="About" value="about"></v-list-item>

src/router/index.ts

@@ -21,6 +21,11 @@ const router = createRouter({
       name: 'predict',
       component: PredictView,
     },
+    {
+      path: '/chatbot',
+      name: 'chatbot',
+      component: () => import('../views/ChatbotView.vue')
+    },
     {
       path: '/about',
       name: 'about',

src/views/AboutView.vue

@@ -14,7 +14,6 @@
         <a href="https://github.com/UFISH-Team">U-FISH Team.</a>
       </p>
     </div>
-    <img src="https://github.com/UFISH-Team/U-FISH/blob/main/docs/ufish.png?raw=true" />
     <h2>Web app</h2>
     <div>
       <p>
@@ -27,6 +26,7 @@
         The source code is available at <a href="https://github.com/UFISH-Team/UFISH-Team.github.io">here</a>.
       </p>
     </div>
+    <img src="https://github.com/UFISH-Team/U-FISH/blob/main/docs/ufish.png?raw=true" />
   </div>
 </template>
 

src/views/ChatbotView.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="container">
+    <div class="info-text">
+      U-FISH is integrated with the <a href="https://arxiv.org/abs/2310.18351">Bioimage.IO Chatbot</a>.
+      Here are some examples of how you can interact with the chatbot and U-FISH.
+    </div>
+    <div class="info-text-1">
+      Example1: Let users complete cell segmentation, point identification and point counting through dialogue.
+    </div>
+    <video width="60%" controls>
+      <source src="/videos/chatbot_ufish_spot_counting.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+    <div class="info-text-1" style="margin-top: 40px;">
+      Example2: Users can select an area on the Viewer, and then let Chatbot count the number of spots in the selected area.
+    </div>
+    <video width="60%" controls>
+      <source src="/videos/chatbot_ufish_spot_counting2.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+    <div class="info-text" style="margin-top: 40px;">
+      Click here to chat with the <a href="https://ufish-team.github.io/imjoy.html?plugin=https://ufish-team.github.io/plugins/chatbot-extension.imjoy.html">🤖chatbot</a>!
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+export default {
+  methods: {
+  },
+  components: {
+  },
+}
+</script>
+
+<style scoped>
+.info-text {
+  font-size: 1.5em;
+  text-align: center;
+  margin: 1em;
+  margin-top: 0;
+  width: 60%;
+}
+.info-text-1 {
+  font-size: 1.2em;
+  text-align: center;
+  margin: 1em;
+  margin-top: 0;
+  width: 60%;
+}
+</style>

src/views/HomeView.vue

@@ -3,6 +3,9 @@
     <div class="info-text">
       U-FISH is a deep learning method for FISH spot ✨ detection.
     </div>
+    <div style="font-family:Arial, Helvetica, sans-serif">
+      See our pre-print at <a href="https://www.biorxiv.org/content/10.1101/2024.03.06.583706v1">bioRxiv</a>!
+    </div>
     <div class="card-container">
       <InfoCard
         img="/images/dataset2.jpg"
@@ -14,6 +17,11 @@
         title="Predict"
         subtitle="Run U-FISH model in brwoser"
         :click-action="()=>{gotoPage('predict')}" />
+      <InfoCard
+        img="/images/chatbot.webp"
+        title="Chatbot"
+        subtitle="Use U-FISH with Bioimage.IO Chatbot"
+        :click-action="()=>{gotoPage('chatbot')}" />
     </div>
     <div class="info-text">
       Try it now! 🔥