fasten the UI page starting, condensing information on UI.

README.md

@@ -145,7 +145,7 @@ We also offer some demo chat, you can find them in [`./examples`](https://github
 This is compatible with Node.js version 19.
 ```bash
 # Under folder BioMANIA/chatbot_ui_biomania
-npm install
+npm install && npm run build
 ```
 
 ### Inference with pretrained models

chatbot_ui_biomania/components/Chat/ChatMessage.tsx

@@ -110,12 +110,12 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit}) =>
         }`}
       style={{ overflowWrap: 'anywhere' }}
     >
-      <div className="relative m-auto flex p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
-        <div className="min-w-[40px] text-right font-bold">
+      <div className="relative m-auto flex p-4 text-xs md:max-w-2xl md:gap-6 md:py-2 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+        <div className="min-w-[40px] text-right">
           {message.role === 'assistant' ? (
-            <IconRobot size={30} />
+            <IconRobot size={22} />
           ) : (
-            <IconUser size={30} />
+            <IconUser size={22} />
           )}
         </div>
       <div className="flex flex-col w-full">
@@ -169,7 +169,7 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit}) =>
                   </div>
                 </div>
               ) : (
-                <div className="prose whitespace-pre-wrap dark:prose-invert flex-1">
+                <div className="prose whitespace-pre-wrap dark:prose-invert flex-1" style={{ fontSize: '15px' }}>
                   {message.content}
                 </div>
               )}

chatbot_ui_biomania/components/Chat/LibCardSelect.tsx

@@ -2,22 +2,22 @@ import { useEffect, useContext, useState } from 'react';
 import HomeContext from '@/pages/api/home/home.context';
 
 export const libImages: { [key: string]: string } = {
-  'scanpy': '/apps/scanpy.jpg',
-  'squidpy': '/apps/squidpy.jpg',
-  'pyteomics': '/apps/pyteomics.jpg',
-  'qiime2': '/apps/qiime2.png',
-  'scikit-bio': '/apps/scikitbio.jpg',
+  'scanpy': '/apps/scanpy.webp',
+  'squidpy': '/apps/squidpy.webp',
+  'pyteomics': '/apps/pyteomics.webp',
+  'qiime2': '/apps/qiime2.webp',
+  'scikit-bio': '/apps/scikitbio.webp',
   'biopython': '/apps/biopython.png',
   'biotite': '/apps/biotite.png',
   'deap': '/apps/deap.png',
-  'eletoolkit': '/apps/eletoolkit.jpg',
-  'pyopenms': '/apps/pyopenms.jpg',
-  'scenicplus': '/apps/SCENIC.png',
-  'scvi-tools': '/apps/scvitools.svg',
-  'sonata': '/apps/SONATA.jpg',
-  'MIOSTONE': '/apps/MIOSTONE.jpg',
-  'ehrapy': '/apps/ehrapy.jpg',
-  //'custom': '/apps/customize.jpg',
+  'eletoolkit': '/apps/eletoolkit.webp',
+  'pyopenms': '/apps/pyopenms.webp',
+  'scenicplus': '/apps/SCENIC.webp',
+  'scvi-tools': '/apps/scvitools.webp',
+  'sonata': '/apps/SONATA.webp',
+  'MIOSTONE': '/apps/MIOSTONE.webp',
+  'ehrapy': '/apps/ehrapy.webp',
+  //'custom': '/apps/customize.webp',
 };
 
 export const LibCardSelect = () => {
@@ -188,23 +188,26 @@ export const LibCardSelect = () => {
           display: flex;
           flex-wrap: wrap;
           align-items: flex-start;
-          max-width: 2000px;
-          width: 600px;
-          justify-content: flex-start;
+          max-width: 800px;
+          gap: 10px;
         }
         .card {
           cursor: pointer;
-          width: 160px;
-          height: 150px;
-          padding: 10px;
+          width: calc(25% - 15px);
+          height: 130px;
+          margin-bottom: 10px;
           border: 1px solid gray;
-          margin: 10px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           position: relative;
         }
+        .card img {
+          max-width: 100%;
+          max-height: 80%;
+          margin-bottom: 5px;
+        }
         .card-selected {
           background-color: lightblue;
           color: #333333;
@@ -217,11 +220,6 @@ export const LibCardSelect = () => {
           padding: 5px;
           background-color: rgba(255, 255, 255, 0.8);
         }
-        .card img {
-          max-width: 100%;
-          max-height: calc(100% - 5px); 
-          margin-bottom: -20px;
-        }
         .custom-input-container div {
           display: flex;
           align-items: center;

chatbot_ui_biomania/components/Chat/ProgressCards/CodeCard.tsx

@@ -16,11 +16,11 @@ interface CodeCardProps {
 function CodeCard({ codeString, language, fullContent }: CodeCardProps) {
   const [isCollapsed, setIsCollapsed] = useState(true);  // new state for collapse control
 
-  const collapseStyle = {
-    maxHeight: isCollapsed ? '0' : '1000px',
-    overflow: 'hidden',
-    transition: 'max-height 0.3s ease-in-out',
-  };
+  // const collapseStyle = {
+  //   maxHeight: isCollapsed ? '0' : '1000px',
+  //   overflow: 'hidden',
+  //   transition: 'max-height 0.3s ease-in-out',
+  // };
 
   const codeStyle = {
     whiteSpace: 'pre-wrap',
@@ -53,29 +53,30 @@ function CodeCard({ codeString, language, fullContent }: CodeCardProps) {
 
       {fullContent && (
         <>
-          <Paper elevation={3} style={{ backgroundColor: 'white', padding: '1px', borderRadius: '1px', marginTop: '10px' , height: '30px'}}>
+          {/* <Paper elevation={3} style={{ backgroundColor: 'white', padding: '0px', borderRadius: '0px', marginTop: '-2px' , height: '30px'}}> */}
             <Typography paragraph>
-            <Button
-              variant="text"
-              sx={{
-                color: 'black',
-                textTransform: 'none',
-                fontSize: '0.8rem',
-                fontWeight: 'normal',
-                ml: 0,
-                '&:hover': {
-                  backgroundColor: 'transparent',
-                  textDecoration: 'underline',
-                }
-              }}
-              onClick={() => setIsCollapsed(!isCollapsed)}
-            >
-              {isCollapsed ? "Show Full Content" : "Hide Full Content"}  {isCollapsed ? "↓" : "↑"}
-            </Button>
+              <Button
+                variant="text"
+                sx={{
+                  color: 'black',
+                  textTransform: 'none',
+                  fontSize: '0.8rem',
+                  fontWeight: 'normal',
+                  ml: 0,
+                  '&:hover': {
+                    backgroundColor: 'transparent',
+                    textDecoration: 'underline',
+                  }
+                }}
+                onClick={() => setIsCollapsed(!isCollapsed)}
+              >
+                {isCollapsed ? "Show Full Content" : "Hide Full Content"}  {isCollapsed ? "↓" : "↑"}
+              </Button>
             </Typography>
-          </Paper>
+          {/* </Paper> */}
 
-          <Collapse in={!isCollapsed} timeout="auto" unmountOnExit style={collapseStyle}>
+          {/* <Collapse in={!isCollapsed} timeout="auto" unmountOnExit style={collapseStyle}> */}
+          {/* <Collapse in={!isCollapsed} timeout="auto" unmountOnExit> */}
             <MemoizedReactMarkdown 
               remarkPlugins={[remarkGfm]}
               components={{
@@ -98,7 +99,7 @@ function CodeCard({ codeString, language, fullContent }: CodeCardProps) {
             >
               {`\`\`\`${language}\n${fullContent}\n\`\`\``}
             </MemoizedReactMarkdown>
-          </Collapse>
+          {/* </Collapse> */}
         </>
       )}
     </div>

chatbot_ui_biomania/components/Chat/ProgressCards/LoggingCard.tsx

@@ -46,11 +46,11 @@ const LoggingCard = ({ title, logString, tableData, logColor = 'black', imageDat
   };
 
   return (
-    <Paper elevation={2} sx={{ width: '200', position: 'relative', padding: '16px', margin: '16px 0', backgroundColor: 'white', overflow: 'hidden' }}>
+    <Paper elevation={2} sx={{ width: '200', height: 'fit-content',position: 'relative', padding: '8px', margin: '8px 0', backgroundColor: 'white', overflow: 'hidden' }}>
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-        <Typography variant="caption" component="div" sx={{ fontFamily: 'monospace', fontSize: theme.typography.body1.fontSize }}>
-          <span style={{ color: titleColor }}>{title}</span>
-        </Typography>
+      <Typography variant="caption" component="div" sx={{ fontFamily: 'monospace', fontSize: '0.9rem', lineHeight: '1.2', marginBottom: '0px' }}>
+        <span style={{ color: titleColor }}>{title}</span>
+      </Typography>
         <Divider sx={{ my: 1 }} />
         {imageData && (
           <ImageProgressCard
@@ -61,9 +61,11 @@ const LoggingCard = ({ title, logString, tableData, logColor = 'black', imageDat
         {tableData && tableData.trim() !== '' && <TableCard data={tableData} />}
         <Box sx={{ width: '200' }}>
           <Collapse in={!isCollapsed} timeout="auto" unmountOnExit sx={{ width: '200' }}>
-            <Typography variant="body1" sx={{ fontFamily: 'monospace', color: logColor }}>
+          <div style={{ margin: '-10px 0' }}>
+            <Typography variant="body1" sx={{ fontFamily: 'monospace', color: logColor, fontSize: '0.9rem', lineHeight: '1.2' }}>
               <ReactMarkdown>{formattedLogString}</ReactMarkdown>
             </Typography>
+          </div>
           </Collapse>
         </Box>
         <Button

chatbot_ui_biomania/components/Chat/ProgressCards/ProgressCardController.tsx

@@ -315,12 +315,13 @@ const generateCards = (progressJson: any) => {
     }
     return (
       <Box sx={{
+        my: 0,
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
         width: "100%",
         '&:hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.2)',
+          backgroundColor: 'rgba(0, 0, 0, 0.1)',
           '& > *': {
             backgroundColor: 'transparent',
           },
@@ -375,11 +376,10 @@ const ProgressCardController = (props: ProgressCardControllerProps) => {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'flex-start',
-        minWidth: "600px",
-        width: "600px"
+        minWidth: "100%",
+        width: "100%"
       }}>
-        {toolRecommendations}
-        <Box sx={{ height: '16px' }}></Box>
+        <Box sx={{ height: '6px' }}></Box>
           {cards}
       </Box>
       <SnackbarError open={snackbarOpen} handleClose={handleSnackbarClose} content={snackbarContent} />

chatbot_ui_biomania/components/Markdown/CodeBlock.tsx

@@ -51,7 +51,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
     URL.revokeObjectURL(url);
   };
   return (
-    <div className="codeblock relative font-sans text-[16px]">
+    <div className="codeblock relative font-sans text-[16px]"  style={{ margin: 0, padding: 0 }}>
       <div className="flex items-center justify-between py-1.5 px-4">
         <span className="text-xs lowercase text-white">{language}</span>
         <div className="flex items-center">

docker_utils/MIOSTONE/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/biopython/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/biotite/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/deap/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/eletoolkit/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/pyopenms/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/pyteomics/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/qiime2/docker_start_script.sh

@@ -8,7 +8,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/scanpy/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/scenicplus/docker_start_script.sh

@@ -8,7 +8,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/scikit-bio/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/scvi-tools/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/sonata/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

docker_utils/squidpy/docker_start_script.sh

@@ -3,7 +3,7 @@ python3 deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd /app/chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive

start_script.sh

@@ -3,7 +3,7 @@ python deploy/inference_dialog_server.py &
 backend_pid=$!
 
 cd ../chatbot_ui_biomania/
-npm run dev &
+npm start &
 frontend_pid=$!
 
 # Keep the script running to keep the processes alive