change to show npm install instead of copying file (#5)

web/src/components/DeploymentDisplay.tsx

@@ -118,15 +118,12 @@ export function DeploymentDisplay({
             </TabsList>
             <TabsContent className="flex flex-col gap-2 !mt-0" value="client">
               <div>
-                Copy and paste the ComfyDeployClient form&nbsp;
+                Install the node comfydeploy SDK
-                <a
+                <CodeBlock
-                  href="https://github.com/BennyKok/comfyui-deploy-next-example/blob/main/src/lib/comfy-deploy.ts"
+                  lang="bash"
-                  className="text-blue-500 hover:underline"
+                  code={`npm i comfydeploy`}
-                  target="_blank"
+                />
-                  rel="noreferrer"
+                Initialize your client
-                >
-                  here
-                </a>
               </div>
               <CodeBlock
                 lang="js"
@@ -200,18 +197,20 @@ function formatCode(
   if (inputs && inputs.length > 0) {
     codeTemplate = codeTemplate.replace(
       "inputs: {}",
-      `inputs: ${JSON.stringify(
+      `inputs: ${
-        Object.fromEntries(
+        JSON.stringify(
-          inputs.map((x) => {
+          Object.fromEntries(
-            return [x?.input_id, ""];
+            inputs.map((x) => {
-          }),
+              return [x?.input_id, ""];
-        ),
+            }),
-        null,
+          ),
-        2,
+          null,
-      )
+          2,
-        .split("\n")
+        )
-        .map((line, index) => (index === 0 ? line : `    ${line}`)) // Add two spaces indentation except for the first line
+          .split("\n")
-        .join("\n")}`,
+          .map((line, index) => (index === 0 ? line : `    ${line}`)) // Add two spaces indentation except for the first line
+          .join("\n")
+      }`,
     );
   } else {
     codeTemplate = codeTemplate.replace(