[fix] Fix example web

- Updated the prompt parameter in multiple instances of TextRewriterTask to a single string format, removing the array structure for clarity and consistency.
- Adjusted the download model configuration in the workflow to streamline model usage.
- Refactored imports in main.tsx to enhance task registration and reduce redundancy.

Author: sroussey

docs/developers/01_getting_started.md

@@ -57,7 +57,7 @@ workflow
   .downloadModel({ model: "onnx:Xenova/LaMini-Flan-T5-783M:q8" })
   .textRewriter({
     text: "The quick brown fox jumps over the lazy dog.",
-    prompt: ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"],
+    prompt: "Rewrite the following text in reverse:",
   })
   .rename("text", "console")
   .debugLog();
@@ -88,7 +88,7 @@ graph.addTask(
   new TextRewriterTask(
     {
       text: "The quick brown fox jumps over the lazy dog.",
-      prompt: ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"],
+      prompt: "Rewrite the following text in reverse:",
       // model will be provided by the dataflow below
     },
     { id: "2" }
@@ -184,7 +184,7 @@ graph.addTask(
   new TextRewriterTask(
     {
       text: "The quick brown fox jumps over the lazy dog.",
-      prompt: ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"],
+      prompt: "Rewrite the following text in reverse:",
     },
     { id: "2" }
   )
@@ -289,19 +289,13 @@ There is a JSONTask that can be used to build a graph. This is useful for saving
 
 ```json
 [
-  {
-    "id": "1",
-    "type": "DownloadModelTask",
-    "input": {
-      "model": ["onnx:Xenova/LaMini-Flan-T5-783M:q8", "onnx:Xenova/m2m100_418M:q8"]
-    }
-  },
   {
     "id": "2",
     "type": "TextRewriterTask",
     "input": {
+      "model": "onnx:Xenova/LaMini-Flan-T5-783M:q8",
       "text": "The quick brown fox jumps over the lazy dog.",
-      "prompt": ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"]
+      "prompt": "Rewrite the following text in reverse:"
     },
     "dependencies": {
       "model": {
@@ -379,7 +373,7 @@ graph.addTask(
   new TextRewriterCompoundTask({
     model: "onnx:Xenova/LaMini-Flan-T5-783M:q8",
     text: "The quick brown fox jumps over the lazy dog.",
-    prompt: ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"],
+    prompt: "Rewrite the following text in reverse:",
   })
 );
 ```
@@ -397,7 +391,7 @@ graph.addTask(
     {
       model: "onnx:Xenova/LaMini-Flan-T5-783M:q8",
       text: "The quick brown fox jumps over the lazy dog.",
-      prompt: ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"],
+      prompt: "Rewrite the following text in reverse:",
     },
     { id: "1" }
   )

examples/web/src/App.tsx

@@ -38,20 +38,17 @@ const resetGraph = () => {
   const workflow = window["workflow"];
   workflow
     .reset()
-    .downloadModel({
-      model: ["onnx:Xenova/LaMini-Flan-T5-783M:q8", "onnx:Xenova/m2m100_418M:q8"],
-    })
+    .downloadModel({ model: "onnx:Xenova/LaMini-Flan-T5-783M:q8" })
     .textRewriter({
       text: "The quick brown fox jumps over the lazy dog.",
-      prompt: ["Rewrite the following text in reverse:", "Rewrite this to sound like a pirate:"],
+      prompt: "Rewrite the following text in reverse:",
     })
-    .rename("model", "model", -2)
+    .downloadModel({ model: "onnx:Xenova/m2m100_418M:q8" })
     .textTranslation({
       source_lang: "en",
       target_lang: "es",
     })
     .rename("*", "console")
-    .rename("*", "console", -2)
     .debugLog({ log_level: "info" });
   taskGraphRepo.saveTaskGraph("default", workflow.graph);
 };

examples/web/src/main.tsx

@@ -4,17 +4,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  DownloadModelTask,
-  TextEmbeddingTask,
-  TextRewriterTask,
-  TextTranslationTask,
-} from "@workglow/ai";
+import { registerAiTasks } from "@workglow/ai";
 import { installDevToolsFormatters, isDarkMode } from "@workglow/debug";
-import { Task, TaskGraph, Workflow } from "@workglow/task-graph";
-import { DebugLogTask, DelayTask, FetchUrlTask, JsonTask, LambdaTask } from "@workglow/tasks";
+import { registerBaseTasks, Workflow } from "@workglow/task-graph";
+import { registerCommonTasks } from "@workglow/tasks";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
+
 import "./main.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
@@ -24,24 +20,12 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 );
 
 installDevToolsFormatters();
-
-[
-  Workflow,
-  DownloadModelTask,
-  TextRewriterTask,
-  TextEmbeddingTask,
-  TextTranslationTask,
-  TextRewriterTask,
-  DebugLogTask,
-  Task,
-  TaskGraph,
-  JsonTask,
-  DelayTask,
-  FetchUrlTask,
-  LambdaTask,
-].forEach((item) => {
-  window[item.name] = item;
-});
+const tasks = [...registerBaseTasks()];
+[Workflow, ...registerBaseTasks(), ...registerCommonTasks(), ...registerAiTasks()].forEach(
+  (item) => {
+    window[item.name] = item;
+  }
+);
 
 const dark = isDarkMode();
 const grey = dark ? "#aaa" : "#333";
@@ -60,10 +44,9 @@ console.log(
 console.log(
   `  %cworkflow = new Workflow();
   workflow.%creset%c();
-  workflow.%cDownloadModel%c({ %cmodel%c: [%c'onnx:Xenova/LaMini-Flan-T5-783M:q8']%c });
-  workflow.%cTextRewriter%c({ %ctext%c: %c'The quick brown fox jumps over the lazy dog.'%c, %cprompt%c: [%c'Rewrite the following text in reverse:'%c, %c'Rewrite this to sound like a pirate:'%c] });
+  workflow.%ctextRewriter%c({%cmodel%c: %c'onnx:Xenova/LaMini-Flan-T5-783M:q8'%c, %ctext%c: %c'The quick brown fox jumps over the lazy dog.'%c, %cprompt%c: %c'Rewrite the following text in reverse:'%c });
   workflow.%crename%c(%c'*'%c, %c'console'%c);
-  workflow.%cDebugLog%c({ %clevel%c: %c'info'%c });
+  workflow.%cdebugLog%c({ %clevel%c: %c'info'%c });
   
   console.log(JSON.stringify(workflow.toDependencyJSON(),null,2));
   `,