From 65579226971911e4d32b2524fa6e2b7f644558a7 Mon Sep 17 00:00:00 2001 From: DoraDong-2023 Date: Thu, 21 Dec 2023 19:40:15 +0800 Subject: [PATCH] fasten the UI page starting, condensing information on UI. --- README.md | 2 +- chatbot_ui_biomania/components/Chat/.DS_Store | Bin 6148 -> 6148 bytes .../components/Chat/ChatMessage.tsx | 10 ++-- .../components/Chat/LibCardSelect.tsx | 48 ++++++++-------- .../Chat/ProgressCards/CodeCard.tsx | 53 +++++++++--------- .../Chat/ProgressCards/LoggingCard.tsx | 12 ++-- .../ProgressCards/ProgressCardController.tsx | 10 ++-- .../components/Markdown/CodeBlock.tsx | 2 +- chatbot_ui_biomania/public/apps/MIOSTONE.jpg | Bin 113835 -> 0 bytes chatbot_ui_biomania/public/apps/MIOSTONE.webp | Bin 0 -> 41390 bytes chatbot_ui_biomania/public/apps/SCENIC.png | Bin 24102 -> 0 bytes chatbot_ui_biomania/public/apps/SCENIC.webp | Bin 0 -> 19448 bytes chatbot_ui_biomania/public/apps/SONATA.jpg | Bin 20658 -> 0 bytes chatbot_ui_biomania/public/apps/SONATA.webp | Bin 0 -> 17450 bytes chatbot_ui_biomania/public/apps/biopython.png | Bin 64156 -> 19733 bytes chatbot_ui_biomania/public/apps/biotite.png | Bin 7192 -> 2622 bytes chatbot_ui_biomania/public/apps/customize.jpg | Bin 14631 -> 0 bytes .../public/apps/customize.webp | Bin 0 -> 4396 bytes chatbot_ui_biomania/public/apps/deap.png | Bin 3912 -> 2234 bytes chatbot_ui_biomania/public/apps/ehrapy.jpg | Bin 48811 -> 0 bytes chatbot_ui_biomania/public/apps/ehrapy.webp | Bin 0 -> 17354 bytes .../public/apps/eletoolkit.jpg | Bin 2688 -> 0 bytes .../public/apps/eletoolkit.webp | Bin 0 -> 2022 bytes chatbot_ui_biomania/public/apps/pyopenms.jpg | Bin 14510 -> 0 bytes chatbot_ui_biomania/public/apps/pyopenms.webp | Bin 0 -> 5364 bytes chatbot_ui_biomania/public/apps/pyteomics.jpg | Bin 10977 -> 0 bytes .../public/apps/pyteomics.webp | Bin 0 -> 7582 bytes chatbot_ui_biomania/public/apps/qiime2.png | Bin 4387 -> 0 bytes chatbot_ui_biomania/public/apps/qiime2.webp | Bin 0 -> 1776 bytes chatbot_ui_biomania/public/apps/scanpy.jpg | Bin 9181 -> 0 bytes chatbot_ui_biomania/public/apps/scanpy.webp | Bin 0 -> 4442 bytes chatbot_ui_biomania/public/apps/scikitBio.jpg | Bin 11965 -> 0 bytes .../public/apps/scikitbio.webp | Bin 0 -> 2338 bytes chatbot_ui_biomania/public/apps/scvitools.svg | 1 - .../public/apps/scvitools.webp | Bin 0 -> 5306 bytes chatbot_ui_biomania/public/apps/squidpy.jpg | Bin 18125 -> 0 bytes chatbot_ui_biomania/public/apps/squidpy.webp | Bin 0 -> 7360 bytes docker_utils/MIOSTONE/docker_start_script.sh | 2 +- docker_utils/biopython/docker_start_script.sh | 2 +- docker_utils/biotite/docker_start_script.sh | 2 +- docker_utils/deap/docker_start_script.sh | 2 +- .../eletoolkit/docker_start_script.sh | 2 +- docker_utils/pyopenms/docker_start_script.sh | 2 +- docker_utils/pyteomics/docker_start_script.sh | 2 +- docker_utils/qiime2/docker_start_script.sh | 2 +- docker_utils/scanpy/docker_start_script.sh | 2 +- .../scenicplus/docker_start_script.sh | 2 +- .../scikit-bio/docker_start_script.sh | 2 +- .../scvi-tools/docker_start_script.sh | 2 +- docker_utils/sonata/docker_start_script.sh | 2 +- docker_utils/squidpy/docker_start_script.sh | 2 +- start_script.sh | 2 +- 52 files changed, 84 insertions(+), 84 deletions(-) delete mode 100644 chatbot_ui_biomania/public/apps/MIOSTONE.jpg create mode 100644 chatbot_ui_biomania/public/apps/MIOSTONE.webp delete mode 100644 chatbot_ui_biomania/public/apps/SCENIC.png create mode 100644 chatbot_ui_biomania/public/apps/SCENIC.webp delete mode 100644 chatbot_ui_biomania/public/apps/SONATA.jpg create mode 100644 chatbot_ui_biomania/public/apps/SONATA.webp delete mode 100644 chatbot_ui_biomania/public/apps/customize.jpg create mode 100644 chatbot_ui_biomania/public/apps/customize.webp delete mode 100644 chatbot_ui_biomania/public/apps/ehrapy.jpg create mode 100644 chatbot_ui_biomania/public/apps/ehrapy.webp delete mode 100644 chatbot_ui_biomania/public/apps/eletoolkit.jpg create mode 100644 chatbot_ui_biomania/public/apps/eletoolkit.webp delete mode 100644 chatbot_ui_biomania/public/apps/pyopenms.jpg create mode 100644 chatbot_ui_biomania/public/apps/pyopenms.webp delete mode 100644 chatbot_ui_biomania/public/apps/pyteomics.jpg create mode 100644 chatbot_ui_biomania/public/apps/pyteomics.webp delete mode 100644 chatbot_ui_biomania/public/apps/qiime2.png create mode 100644 chatbot_ui_biomania/public/apps/qiime2.webp delete mode 100644 chatbot_ui_biomania/public/apps/scanpy.jpg create mode 100644 chatbot_ui_biomania/public/apps/scanpy.webp delete mode 100644 chatbot_ui_biomania/public/apps/scikitBio.jpg create mode 100644 chatbot_ui_biomania/public/apps/scikitbio.webp delete mode 100644 chatbot_ui_biomania/public/apps/scvitools.svg create mode 100644 chatbot_ui_biomania/public/apps/scvitools.webp delete mode 100644 chatbot_ui_biomania/public/apps/squidpy.jpg create mode 100644 chatbot_ui_biomania/public/apps/squidpy.webp diff --git a/README.md b/README.md index 3b2ac74..ba96c20 100644 --- a/README.md +++ b/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 diff --git a/chatbot_ui_biomania/components/Chat/.DS_Store b/chatbot_ui_biomania/components/Chat/.DS_Store index a66fd800479b92b0299837ff1ce0cdc88fb97626..fe3aadd7267212b612bdc419caec54e54cc4bb7d 100644 GIT binary patch delta 294 zcmZoMXfc=|#>B!ku~2NHo+2aH#(>?7i#IScF>+0w$0S#uR9;+=l#`#tz`(F0sURn_ zxWvHV8Y2@k3o9Et2RjEhM{ICLetB?7Vo7PSQ({pxh!>KdpOXY*Cnkkurk2MGh&box zl_X~7r51rTWTvD7mBfT+=B4D9JLQ+=r4)np216t`I5{}u1th9ntBs6}brg&Z4Qq82 zsx6HSbQDaC&1!2oIYgE9t%KsTb8_?YyMT@Z0!Bs%&AB)qu~2NHo+2a1#(>?7j2x32Smh@3ur8hK%qGA27b`E*#s(hd&Fmcf d96+U;1v$PmPv#eK = memo(({ message, messageIndex, onEdit}) => }`} style={{ overflowWrap: 'anywhere' }} > -
-
+
+
{message.role === 'assistant' ? ( - + ) : ( - + )}
@@ -169,7 +169,7 @@ export const ChatMessage: FC = memo(({ message, messageIndex, onEdit}) =>
) : ( -
+
{message.content}
)} diff --git a/chatbot_ui_biomania/components/Chat/LibCardSelect.tsx b/chatbot_ui_biomania/components/Chat/LibCardSelect.tsx index daf4811..d9e166e 100644 --- a/chatbot_ui_biomania/components/Chat/LibCardSelect.tsx +++ b/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; diff --git a/chatbot_ui_biomania/components/Chat/ProgressCards/CodeCard.tsx b/chatbot_ui_biomania/components/Chat/ProgressCards/CodeCard.tsx index 1db4d13..27e631a 100644 --- a/chatbot_ui_biomania/components/Chat/ProgressCards/CodeCard.tsx +++ b/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 && ( <> - + {/* */} - + - + {/* */} - + {/* */} + {/* */} {`\`\`\`${language}\n${fullContent}\n\`\`\``} - + {/* */} )}
diff --git a/chatbot_ui_biomania/components/Chat/ProgressCards/LoggingCard.tsx b/chatbot_ui_biomania/components/Chat/ProgressCards/LoggingCard.tsx index 8442c57..df473f6 100644 --- a/chatbot_ui_biomania/components/Chat/ProgressCards/LoggingCard.tsx +++ b/chatbot_ui_biomania/components/Chat/ProgressCards/LoggingCard.tsx @@ -46,11 +46,11 @@ const LoggingCard = ({ title, logString, tableData, logColor = 'black', imageDat }; return ( - + - - {title} - + + {title} + {imageData && ( } - +
+ {formattedLogString} +