[ERP-2539] Simplify batch script input method

src/components/output/CommandBox.js

@@ -0,0 +1,65 @@
+import { Box, Heading, useColorModeValue } from "@chakra-ui/react";
+
+import PreformattedBox from "./PreformattedBox";
+
+function Header({ children }) {
+  return (
+    <Heading
+      size="xs"
+      border="1px"
+      backgroundColor={useColorModeValue("gray.100", "gray.800")}
+      borderColor={useColorModeValue("gray.200", "gray.500")}
+      // override docusaurus styling
+      m="0"
+      p="2"
+    >
+      {children}
+    </Heading>
+  );
+}
+
+export default function CommandBox({ command, output, editable }) {
+  return (
+    <Box border="1px" borderColor="gray.200" rounded="md" overflow="hidden">
+      <Box>
+        <Header>Command</Header>
+        <PreformattedBox
+          editable={editable}
+          type="input"
+          contentProps={{
+            ariaLabel: "Command text",
+            rounded: "",
+            ...(!output && { borderBottomRadius: "md" }),
+
+            // override docusaurus styling
+            borderRadius: "0",
+            mb: 0,
+          }}
+        >
+          {command}
+        </PreformattedBox>
+      </Box>
+      {output && (
+        <Box>
+          <Header>Output</Header>
+          <PreformattedBox
+            editable={editable}
+            type="output"
+            wrap={false}
+            contentProps={{
+              ariaLabel: "Output text",
+              rounded: "",
+              borderBottomRadius: "md",
+
+              // override docusaurus styling
+              borderRadius: "0",
+              mb: 0,
+            }}
+          >
+            {output}
+          </PreformattedBox>
+        </Box>
+      )}
+    </Box>
+  );
+}

src/components/output/CommandBox.stories.js

@@ -0,0 +1,38 @@
+import CommandBox from "./CommandBox";
+
+export default {
+  title: "Outputs/CommandBox",
+  component: CommandBox,
+};
+
+export const CommandOnly = {
+  args: {
+    command: "ls -lah",
+  },
+};
+
+export const CommandAndOutput = {
+  args: {
+    command: "ls -lah",
+    output: "-rw-r--r-- 1 user group 0 Jan 01 00:00 file.txt",
+  },
+};
+
+export const MultilineCommandAndOutput = {
+  args: {
+    command: [
+      "echo 'Hello, world!' > file.txt",
+      "ls -lah",
+      "cat file.txt",
+    ].join("\n"),
+    output: `-rw-r--r-- 1 user group 0 Jan 01 00:00 file.txt
+Hello, world!`,
+  },
+};
+
+export const Editable = {
+  args: {
+    command: "ls -lah",
+    editable: true,
+  },
+};

src/components/output/PreformattedBox.js

@@ -17,6 +17,7 @@ export default function PreformattedBox({
   type = "input",
   defaultRows = 10,
   wrap = true,
+  contentProps,
 }) {
   const [hover, setHover] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -26,7 +27,7 @@ export default function PreformattedBox({
   if (type === "input") {
     bg = useColorModeValue("gray.50", "gray.800");
   } else if (type === "output") {
-    bg = useColorModeValue("gray.300", "gray.700");
+    bg = useColorModeValue("gray.200", "gray.700");
   } else {
     bg = useColorModeValue("gray.50", "gray.800");
   }
@@ -64,6 +65,7 @@ export default function PreformattedBox({
         key={text}
         onSubmit={(e) => setText(e)}
         sx={wrapStyle}
+        {...contentProps}
       >
         {editable ? (
           <>

src/components/tool/guide/Instructions/AccessInstructions.js

@@ -1,6 +1,7 @@
 import { Code } from "@chakra-ui/react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
+import CommandBox from "../../../output/CommandBox";
 import PreformattedBox from "../../../output/PreformattedBox";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -30,10 +31,9 @@ export function AccessInstructions({ service, port, node, username }) {
               </i>
             </InstructionText>
           )}
-          <PreformattedBox>
-            ssh -L {port}:{node || "node"}:{port} {username || "username"}
-            @lyra.qut.edu.au
-          </PreformattedBox>
+          <CommandBox
+            command={`ssh -L ${port}:${node || "node"}:${port} ${username || "username"}@lyra.qut.edu.au`}
+          />
         </>
       )}
       <InstructionHeading>Access the tool</InstructionHeading>

src/components/tool/guide/Instructions/ConnectInstructions.js

@@ -1,7 +1,7 @@
 import { Box, Code } from "@chakra-ui/react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import AlertHelper from "../Config/AlertHelper";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -87,9 +87,7 @@ function LyraInstructions({ username }) {
           </i>
         </InstructionText>
       )}
-      <PreformattedBox>
-        ssh {username || "username"}@lyra.qut.edu.au
-      </PreformattedBox>
+      <CommandBox command={`ssh ${username || "username"}@lyra.qut.edu.au`} />
     </>
   );
 }

src/components/tool/guide/Instructions/InstallInstructions.js

@@ -1,7 +1,7 @@
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
-import PreformattedBox from "../../../output/PreformattedBox";
+import CommandBox from "../../../output/CommandBox";
 import AlertHelper from "../Config/AlertHelper";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -18,10 +18,9 @@ function SingularityBuildInstructions({ hardware, gpuVendor }) {
     }
   }
   return (
-    <PreformattedBox>
-      singularity build {containerName}{" "}
-      docker://ghcr.io/eresearchqut/ai-toolbox/hf_pipeline:{containerTag}
-    </PreformattedBox>
+    <CommandBox
+      command={`singularity build ${containerName} docker://ghcr.io/eresearchqut/ai-toolbox/hf_pipeline:${containerTag}`}
+    />
   );
 }
 function SingularityRunInstructions({ hardware, gpuVendor, service }) {
@@ -42,11 +41,9 @@ function SingularityRunInstructions({ hardware, gpuVendor, service }) {
     service === "Lyra" ? "/work/ai-toolbox/containers/" : "";
   let containerName = singularityContainerName(hardware, gpuVendor);
   return (
-    <PreformattedBox>
-      singularity run {argsString}
-      {containerLocation}
-      {containerName} bash
-    </PreformattedBox>
+    <CommandBox
+      command={`singularity run ${argsString}${containerLocation}${containerName} bash`}
+    />
   );
 }
 
@@ -119,25 +116,24 @@ export function InstallInstructions({
                     <InstructionText>
                       Download the latest version of micromamba
                     </InstructionText>
-                    <PreformattedBox>
-                      wget
-                      https://raw.githubusercontent.com/mamba-org/micromamba-releases/main/install.sh
-                    </PreformattedBox>
+                    <CommandBox
+                      command={
+                        "wget https://raw.githubusercontent.com/mamba-org/micromamba-releases/main/install.sh"
+                      }
+                    />
                     <InstructionText>
                       Run the installer and follow the prompts to install
                       micromamba:
                     </InstructionText>
-                    <PreformattedBox>
-                      bash install.sh -p ~/micromamba
-                    </PreformattedBox>
+                    <CommandBox command={"bash install.sh -p ~/micromamba"} />
                     <InstructionText>
                       Create an alias for micromamba
                     </InstructionText>
-                    <PreformattedBox>
-                      {'echo "alias conda=micromamba" >> ~/.bashrc'}
-                    </PreformattedBox>
+                    <CommandBox
+                      command={"echo 'alias conda=micromamba' >> ~/.bashrc"}
+                    />
                     <InstructionText>Refresh the shell:</InstructionText>
-                    <PreformattedBox>source ~/.bashrc</PreformattedBox>
+                    <CommandBox command={"source ~/.bashrc"} />
                   </TabPanel>
                   <TabPanel>
                     <AlertHelper alertType="warning" alertDismissible={false}>
@@ -148,18 +144,19 @@ export function InstallInstructions({
                     <InstructionText>
                       Download the latest version of miniconda:
                     </InstructionText>
-                    <PreformattedBox>
-                      wget
-                      https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
-                    </PreformattedBox>
+                    <CommandBox
+                      command={
+                        "wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh"
+                      }
+                    />
                     <InstructionText>
                       Run the installer and follow the prompts to install conda:
                     </InstructionText>
-                    <PreformattedBox>
-                      bash Miniconda3-latest-Linux-x86_64.sh
-                    </PreformattedBox>
+                    <CommandBox
+                      command={"bash Miniconda3-latest-Linux-x86_64.sh"}
+                    />
                     <InstructionText>Refresh the shell:</InstructionText>
-                    <PreformattedBox>source ~/.bashrc</PreformattedBox>
+                    <CommandBox command={"source ~/.bashrc"} />
                   </TabPanel>
                 </TabPanels>
               </Tabs>
@@ -169,26 +166,26 @@ export function InstallInstructions({
           <InstructionText>
             Create the conda environment (if it doesn&apos;t exist):
           </InstructionText>
-          <PreformattedBox>conda create --name hf</PreformattedBox>
+          <InstructionText>Create the conda environment:</InstructionText>
+          <CommandBox command={"conda create --name hf"} />
           <InstructionText>Activate the conda environment:</InstructionText>
-          <PreformattedBox>conda activate hf</PreformattedBox>
+          <CommandBox command={"conda activate hf"} />
           <InstructionText>Install the transformers package:</InstructionText>
-          <PreformattedBox>
-            conda install -c huggingface -c conda-forge transformers
-          </PreformattedBox>
+          <CommandBox
+            command={"conda install -c huggingface -c conda-forge transformers"}
+          />
           <InstructionText>Install pytorch:</InstructionText>
-          <PreformattedBox>
-            conda install -c pytorch -c nvidia -c conda-forge pytorch
-            torchvision torchaudio pytorch-cuda=12.1
-          </PreformattedBox>
+          <CommandBox
+            command={
+              "conda install -c pytorch -c nvidia -c conda-forge pytorch torchvision torchaudio pytorch-cuda=12.1"
+            }
+          />
           <InstructionText>Install the gradio package:</InstructionText>
-          <PreformattedBox>conda install -c conda-forge gradio</PreformattedBox>
+          <CommandBox command={"conda install -c conda-forge gradio"} />
           {isWorkstationNotebook && (
             <>
               <InstructionText>Install JupyterLab:</InstructionText>
-              <PreformattedBox>
-                conda install -c conda-forge jupyterlab
-              </PreformattedBox>
+              <CommandBox command={"conda install -c conda-forge jupyterlab"} />
             </>
           )}
         </>
@@ -218,15 +215,13 @@ export function InstallInstructions({
             <>
               <InstructionHeading>Python module</InstructionHeading>
               <InstructionText>Source the module script:</InstructionText>
-              <PreformattedBox>
-                source /etc/profile.d/modules.sh
-              </PreformattedBox>
+              <CommandBox command={"source /etc/profile.d/modules.sh"} />
               <InstructionText>Load the python module:</InstructionText>
-              <PreformattedBox>
-                module load python/3.10.8-gcccore-12.2.0-bare
-              </PreformattedBox>
+              <CommandBox
+                command={"module load python/3.10.8-gcccore-12.2.0-bare"}
+              />
               <InstructionText>Check the python version</InstructionText>
-              <PreformattedBox>python --version</PreformattedBox>
+              <CommandBox command={"python --version"} />
             </>
           )}
           <InstructionHeading>
@@ -235,17 +230,15 @@ export function InstallInstructions({
           <InstructionText>
             Create the virtual environment (if it doesn&apos;t exist):
           </InstructionText>
-          <PreformattedBox>python -m venv hf-venv</PreformattedBox>
+          <CommandBox command={"python -m venv hf-venv"} />
           <InstructionText>Activate the virtual environment:</InstructionText>
-          <PreformattedBox>source hf-venv/bin/activate</PreformattedBox>
+          <CommandBox command={"source hf-venv/bin/activate"} />
           <InstructionText>Install the base dependencies:</InstructionText>
-          <PreformattedBox>
-            pip install gradio &apos;transformers[torch]&apos;
-          </PreformattedBox>
+          <CommandBox command={"pip install gradio 'transformers[torch]'"} />
           {isWorkstationNotebook && (
             <>
               <InstructionText>Install JupyterLab:</InstructionText>
-              <PreformattedBox>pip install jupyterlab</PreformattedBox>
+              <CommandBox command={"pip install jupyterlab"} />
             </>
           )}
         </>

src/components/tool/guide/Instructions/RunInstructions.js

@@ -1,6 +1,7 @@
 // TODO: Different operating systems
 import { Code } from "@chakra-ui/react";
 
+import CommandBox from "../../../output/CommandBox";
 import PreformattedBox from "../../../output/PreformattedBox";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -14,11 +15,9 @@ export function RunInstructions({ service, tool, task, model, port }) {
       {tool === "CLI" && (
         <>
           <InstructionText>Start the gradio server:</InstructionText>
-          <PreformattedBox>
-            gradio pipeline {task} --model={model}{" "}
-            --server-name=&quot;0.0.0.0&quot; --server-port={port}{" "}
-            --device-map=&quot;auto&quot;
-          </PreformattedBox>
+          <CommandBox
+            command={`gradio pipeline ${task} --model=${model} --server-name="0.0.0.0" --server-port=${port} --device-map="auto"`}
+          />
         </>
       )}
       {tool === "Script" && (
@@ -44,7 +43,7 @@ interface.launch(server_name="0.0.0.0", server_port=PORT)
 `}
           </PreformattedBox>
           <InstructionText>Run the script:</InstructionText>
-          <PreformattedBox>python hf_pipeline.py {port}</PreformattedBox>
+          <CommandBox command={`python hf_pipeline.py ${port}`} />
         </>
       )}
       {tool === "Notebook" && (
@@ -54,7 +53,7 @@ interface.launch(server_name="0.0.0.0", server_port=PORT)
               <InstructionText>
                 Run the following command to start the server:
               </InstructionText>
-              <PreformattedBox>python -m jupyterlab</PreformattedBox>
+              <CommandBox command={`python -m jupyterlab`} />
               <InstructionText>
                 Open the link to the jupyter server in your browser, and create
                 a new notebook.