[ERP-2543] Use distinct input and output boxes

src/components/output/CopyBox.js → src/components/output/PreformattedBox.js

@@ -11,17 +11,25 @@ import {
 
 import { useEffect, useState } from "react";
 
-export default function CopyBox({
+export default function PreformattedBox({
   children,
   editable = false,
+  type = "input",
   defaultRows = 10,
   wrap = true,
 }) {
   const [hover, setHover] = useState(false);
   const [copied, setCopied] = useState(false);
 
   const borderColor = useColorModeValue("gray.200", "gray.500");
-  const bg = useColorModeValue("gray.50", "gray.800");
+  let bg;
+  if (type === "input") {
+    bg = useColorModeValue("gray.50", "gray.800");
+  } else if (type === "output") {
+    bg = useColorModeValue("gray.300", "gray.700");
+  } else {
+    bg = useColorModeValue("gray.50", "gray.800");
+  }
   const wrapStyle = { textWrap: wrap ? "wrap" : "nowrap" };
 
   const Content = editable ? Editable : Box;
@@ -66,7 +74,7 @@ export default function CopyBox({
           text
         )}
       </Content>
-      {hover && (
+      {type === "input" && hover && (
         <Tooltip
           label={copied ? "Copied!" : "Copy to clipboard"}
           placement="top"

src/components/output/CopyBox.stories.js → src/components/output/PreformattedBox.stories.js

@@ -1,8 +1,8 @@
-import CopyBox from "./CopyBox";
+import PreformattedBox from "./PreformattedBox";
 
 export default {
-  title: "Outputs/CopyBox",
-  component: CopyBox,
+  title: "Outputs/PreformattedBox",
+  component: PreformattedBox,
 };
 
 export const Empty = {

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 // TODO: Different operating systems
 import { Code } from "@chakra-ui/react";
 
-import CopyBox from "../../../output/CopyBox";
+import PreformattedBox from "../../../output/PreformattedBox";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
 
@@ -14,19 +14,19 @@ export function RunInstructions({ service, tool, task, model, port }) {
       {tool === "CLI" && (
         <>
           <InstructionText>Start the gradio server:</InstructionText>
-          <CopyBox>
+          <PreformattedBox>
             gradio pipeline {task} --model={model}{" "}
             --server-name=&quot;0.0.0.0&quot; --server-port={port}{" "}
             --device-map=&quot;auto&quot;
-          </CopyBox>
+          </PreformattedBox>
         </>
       )}
       {tool === "Script" && (
         <>
           <InstructionText>
             Save the following to a file named <Code>hf_pipeline.py</Code>
           </InstructionText>
-          <CopyBox>
+          <PreformattedBox>
             {`import gradio
 import transformers
 import sys
@@ -42,9 +42,9 @@ pipeline = transformers.pipeline(TASK, model=MODEL, device_map="auto")
 interface = gradio.Interface.from_pipeline(pipeline)
 interface.launch(server_name="0.0.0.0", server_port=PORT)
 `}
-          </CopyBox>
+          </PreformattedBox>
           <InstructionText>Run the script:</InstructionText>
-          <CopyBox>python hf_pipeline.py {port}</CopyBox>
+          <PreformattedBox>python hf_pipeline.py {port}</PreformattedBox>
         </>
       )}
       {tool === "Notebook" && (
@@ -54,7 +54,7 @@ interface.launch(server_name="0.0.0.0", server_port=PORT)
               <InstructionText>
                 Run the following command to start the server:
               </InstructionText>
-              <CopyBox>python -m jupyterlab</CopyBox>
+              <PreformattedBox>python -m jupyterlab</PreformattedBox>
               <InstructionText>
                 Open the link to the jupyter server in your browser, and create
                 a new notebook.
@@ -64,7 +64,7 @@ interface.launch(server_name="0.0.0.0", server_port=PORT)
           <InstructionText>
             Execute the following code in the notebook:
           </InstructionText>
-          <CopyBox>
+          <PreformattedBox>
             {`import gradio
 import transformers
 
@@ -76,7 +76,7 @@ pipeline = transformers.pipeline(TASK, model=MODEL, device_map="auto")
 interface = gradio.Interface.from_pipeline(pipeline)
 interface.launch(server_name="0.0.0.0", server_port=PORT)
 `}
-          </CopyBox>
+          </PreformattedBox>
         </>
       )}
     </>

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

@@ -3,7 +3,7 @@ import { Code, Flex, Kbd, Radio, RadioGroup } from "@chakra-ui/react";
 import { useState } from "react";
 
 import TextWithLink from "../../../navigation/TextWithLink";
-import CopyBox from "../../../output/CopyBox";
+import PreformattedBox from "../../../output/PreformattedBox";
 import InstructionInput from "./InstructionInput";
 import InstructionHeading from "./components/InstructionHeading";
 import InstructionText from "./components/InstructionText";
@@ -67,6 +67,7 @@ export function LyraStartInstructions({
     "cd $PBS_O_WORKDIR",
     "",
     "echo \"Running job '$PBS_JOBNAME' ($PBS_JOBID) in the following directory: $PWD\"",
+    'echo "Data written to stderr" >&2',
   ];
 
   const [scriptInput, setScriptInput] = useState("file");
@@ -104,9 +105,9 @@ export function LyraStartInstructions({
               textAfterLink={"."}
             />
           </InstructionText>
-          <CopyBox editable={true} wrap={false}>
+          <PreformattedBox editable={true} wrap={false}>
             {batchJobScript.join("\n")}
-          </CopyBox>
+          </PreformattedBox>
           <InstructionText>
             You may either:
             <RadioGroup defaultValue="file" onChange={setScriptInput}>
@@ -139,7 +140,7 @@ export function LyraStartInstructions({
         In the ssh session, run the following command to schedule the{" "}
         {jobType.toLowerCase()} job:
       </InstructionText>
-      <CopyBox>{cmdText}</CopyBox>
+      <PreformattedBox>{cmdText}</PreformattedBox>
       {scriptInput === "stdin" && (
         <InstructionText>
           Paste the batch job script above into the command&apos;s input, then