Merge pull request #38 from receptron/tinyswallow

tinyswallow

package.json

@@ -13,6 +13,7 @@
     "@graphai/openai_agent": "^0.2.4",
     "@graphai/tools_agent": "^0.2.3",
     "@graphai/vanilla": "^0.2.14",
+    "@mlc-ai/web-llm": "^0.2.78",
     "@receptron/event_agent_generator": "^0.0.4",
     "@receptron/graphai_vue_cytoscape": "^0.2.0",
     "@vueuse/head": "^2.0.0",

src/agents/tinyswallow.ts

@@ -0,0 +1,110 @@
+import { AgentFunction, AgentFunctionInfo } from "graphai";
+import { getMergeValue, getMessages } from "@graphai/llm_utils";
+
+import * as webllm from "@mlc-ai/web-llm";
+
+const appConfig = {
+  model_list: [
+    {
+      model: "https://huggingface.co/SakanaAI/TinySwallow-1.5B-Instruct-q4f32_1-MLC",
+      model_id: "TinySwallow-1.5B",
+      model_lib:
+      // https://github.com/mlc-ai/binary-mlc-llm-libs/tree/main/web-llm-models/v0_2_48
+          webllm.modelLibURLPrefix +
+          webllm.modelVersion +
+          "/Qwen2-1.5B-Instruct-q4f32_1-ctx4k_cs1k-webgpu.wasm",
+    },
+  ],
+};
+
+export const tinyswallowAgent: AgentFunction = async ({ filterParams, params, namedInputs, config }) => {
+  const { system, prompt, messages } = {
+    ...params,
+    ...namedInputs,
+  };
+
+  const { stream } = {
+    ...(config || {}),
+    ...params,
+  };
+
+  const userPrompt = getMergeValue(namedInputs, params, "mergeablePrompts", prompt);
+  const systemPrompt = getMergeValue(namedInputs, params, "mergeableSystem", system);
+
+  const messagesCopy = getMessages<webllm.ChatCompletionMessageParam>(systemPrompt, messages);
+
+  if (userPrompt) {
+    messagesCopy.push({
+      role: "user",
+      content: userPrompt,
+    });
+  }
+
+  const updateEngineInitProgressCallback: webllm.InitProgressCallback = (report) => {
+    console.log("initialize", report.progress);
+    console.log(report.text);
+  };
+  /* eslint new-cap: 0 */
+  const engine = await webllm.CreateMLCEngine("TinySwallow-1.5B", {
+    appConfig,
+    initProgressCallback: updateEngineInitProgressCallback,
+  });
+
+  const completion = await engine.chat.completions.create({
+    stream: true,
+    messages: messagesCopy,
+    stream_options: { include_usage: true },
+    temperature: 0.7,
+    top_p: 0.95,
+    logit_bias: {"14444": -100},
+    // repetition_penalty: 1.2,
+    frequency_penalty: 0.5,
+  });
+
+  const tokens = [];
+  for await (const chunk of completion) {
+    if (chunk.choices && chunk.choices[0]) {
+      const token = chunk.choices[0].delta.content;
+      tokens.push(token);
+      if (stream && filterParams && filterParams.streamTokenCallback && token) {
+        filterParams.streamTokenCallback(token);
+      }
+    }
+  }
+  const text = tokens.join("");
+  const message = {
+    role: "assistant" as const,
+    content: text,
+  };
+  console.log(message);
+  messagesCopy.push(message);
+  console.log(messagesCopy);
+  return {
+    message,
+    messages: messagesCopy,
+    text,
+  };
+
+};
+
+const tinyswallowAgentInfo: AgentFunctionInfo = {
+  name: "tinyswallowAgent",
+  agent: tinyswallowAgent,
+  mock: tinyswallowAgent,
+  inputs: {},
+  output: {},
+  params: {},
+  outputFormat: {},
+  samples: [
+  ],
+  description: "Tinyswallow Agent",
+  category: ["llm"],
+  author: "Receptron team",
+  repository: "https://github.com/receptron/graphai",
+  license: "MIT",
+  stream: true,
+  npms: ["tinyswallow"],
+  environmentVariables: [],
+};
+
+export default tinyswallowAgentInfo;

src/graph/chat_tinyswallow.ts

@@ -0,0 +1,40 @@
+export const graphChat = {
+  version: 0.5,
+  loop: {
+    while: ":continue",
+  },
+  nodes: {
+    continue: {
+      value: true,
+    },
+    messages: {
+      value: [],
+      update: ":reducer.array",
+    },
+    userInput: {
+      agent: "eventAgent",
+      params: {
+        message: "You:",
+      },
+    },
+    llm: {
+      agent: "tinyswallowAgent",
+      isResult: true,
+      params: {
+        forWeb: true,
+        stream: true,
+      },
+      inputs: { messages: ":messages", prompt: ":userInput.text" },
+    },
+    output: {
+      agent: "stringTemplateAgent",
+      inputs: {
+        text: "\x1b[32mAgent\x1b[0m: ${:llm.text}",
+      },
+    },
+    reducer: {
+      agent: "pushAgent",
+      inputs: { array: ":messages", items: [":userInput.message", { content: ":llm.text", role: "assistant" }] },
+    },
+  },
+};

src/router/index.ts

@@ -15,6 +15,7 @@ import GoogleMap from "@/views/GoogleMap.vue";
 import Markdown from "@/views/Markdown.vue";
 import Video from "@/views/Video.vue";
 import InterView from "@/views/InterView.vue";
+import llm from "@/views/tinyswallow.vue";
 
 const routeChildren: Array<RouteRecordRaw> = [
   {
@@ -65,6 +66,10 @@ const routeChildren: Array<RouteRecordRaw> = [
     path: "interview",
     component: InterView,
   },
+  {
+    path: "llm",
+    component: llm,
+  },
 ];
 
 const routes: Array<RouteRecordRaw> = [

src/views/tinyswallow.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="home">
+    <div class="items-center justify-center">
+      <div>
+        <div class="w-10/12 h-60 bg-white rounded-md mt-4 p-2 mx-auto border-2">
+          <div ref="cytoscapeRef" class="w-full h-full" />
+        </div>
+      </div>
+      <div class="mt-2">
+        <chat :messages="messages" :is-streaming="isStreaming" :stream-data="streamData" :stream-node-ids="streamNodes" />
+      </div>
+      <div class="mt-2 hidden">
+        <button class="text-white font-bold items-center rounded-full px-4 py-2 m-1 bg-sky-500 hover:bg-sky-700" @click="run">Run</button>
+        <button class="text-white font-bold items-center rounded-full px-4 py-2 m-1 bg-sky-500 hover:bg-sky-700" @click="logClear">Clear</button>
+      </div>
+
+      <div>
+        <div class="w-10/12 m-auto my-4">
+          <div v-if="events.length > 0" class="font-bold text-red-600 hidden">Write message to bot!!</div>
+          <div class="flex">
+            <input v-model="userInput" class="border-2 p-2 rounded-md flex-1" :disabled="events.length == 0" />
+            <button
+              class="text-white font-bold items-center rounded-md px-4 py-2 ml-1 hover:bg-sky-700 flex-none"
+              :class="events.length == 0 ? 'bg-sky-200' : 'bg-sky-500'"
+              @click="submitText(events[0])"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </div>
+      <Transitions :transitions="transitions" />
+      <Stream :stream-data="streamData" />
+      <GraphData :selected-graph="selectedGraph" />
+      <Logs :logs="logs" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+
+import { GraphAI } from "graphai";
+import * as agents from "@graphai/vanilla";
+import tinyswallowAgent from "../agents/tinyswallow";
+
+import { graphChat } from "@/graph/chat_tinyswallow";
+import { openAIAgent } from "@graphai/openai_agent";
+
+import { useStreamData } from "@/utils/stream";
+import { textInputEvent, useChatPlugin, useLogs } from "../utils/graphai";
+
+import { useCytoscape } from "@receptron/graphai_vue_cytoscape";
+
+import Chat from "../components/Chat.vue";
+import Stream from "../components/Stream.vue";
+import Transitions from "../components/Transitions.vue";
+import GraphData from "../components/GraphData.vue";
+import Logs from "../components/Logs.vue";
+
+// import { useEngine } from "./webllm";
+
+export default defineComponent({
+  name: "HomePage",
+  components: {
+    Chat,
+    Stream,
+    Transitions,
+    GraphData,
+    Logs,
+  },
+  setup() {
+    const selectedGraph = computed(() => {
+      return graphChat;
+    });
+    const streamNodes = ["llm"];
+    const outputNodes = ["llm", "userInput"];
+
+    /*
+    (async () => {
+      const { engine } = await useEngine();
+      
+      const messages = [
+        {
+          content: "こんにちは",
+          role: "user" as const,
+        } 
+      ] ;
+      
+      const completion = await engine.chat.completions.create({
+        stream: true,
+        messages,
+        stream_options: { include_usage: true },
+        temperature: 0.7,
+        top_p: 0.95,
+        logit_bias: {"14444": -100},
+        // repetition_penalty: 1.2,
+        frequency_penalty: 0.5,
+      });
+      for await (const chunk of completion) {
+        console.log(chunk)
+      }
+      })()
+    */
+    const { eventAgent, userInput, events, submitText } = textInputEvent();
+    const { messages, chatMessagePlugin } = useChatPlugin();
+    const { updateCytoscape, cytoscapeRef, resetCytoscape } = useCytoscape(selectedGraph);
+    const { logs, transitions, updateLog, resetLog } = useLogs();
+    const { streamData, streamAgentFilter, streamPlugin, isStreaming } = useStreamData();
+    const agentFilters = [
+      {
+        name: "streamAgentFilter",
+        agent: streamAgentFilter,
+      },
+    ];
+
+    const run = async () => {
+      const graphai = new GraphAI(
+        selectedGraph.value,
+        {
+          ...agents,
+          openAIAgent,
+          eventAgent,
+          tinyswallowAgent,
+        },
+        {
+          agentFilters,
+          config: {
+            openAIAgent: {
+              apiKey: import.meta.env.VITE_OPEN_API_KEY,
+            },
+          },
+        },
+      );
+      graphai.registerCallback(updateCytoscape);
+      graphai.registerCallback(updateLog);
+      graphai.registerCallback(streamPlugin(streamNodes));
+      graphai.registerCallback(chatMessagePlugin(outputNodes));
+      await graphai.run();
+    };
+    const logClear = () => {
+      resetLog();
+      resetCytoscape();
+    };
+
+    run();
+
+    return {
+      run,
+      logs,
+      transitions,
+      logClear,
+      cytoscapeRef,
+      selectedGraph,
+      streamData,
+      isStreaming,
+
+      submitText,
+      userInput,
+      messages,
+      events,
+      streamNodes,
+    };
+  },
+});
+</script>

yarn.lock

@@ -1314,6 +1314,13 @@
   resolved "https://registry.yarnpkg.com/@mdit-vue/types/-/types-2.1.0.tgz#2e10d3c0715e547cbc802295be0023ef455b63ca"
   integrity sha512-TMBB/BQWVvwtpBdWD75rkZx4ZphQ6MN0O4QB2Bc0oI5PC2uE57QerhNxdRZ7cvBHE2iY2C+BUNUziCfJbjIRRA==
 
+"@mlc-ai/web-llm@^0.2.78":
+  version "0.2.78"
+  resolved "https://registry.yarnpkg.com/@mlc-ai/web-llm/-/web-llm-0.2.78.tgz#f9ce70319b86bb8c0dd4b1a0476152e4fd3e82be"
+  integrity sha512-ptqDNzHnfDyNZj7vjp9IaY5U/QDweXMe5wNzErOmRT1gqj8AaMvcqbj7HroPDzhXJGM7BZpDjANV5MhXhKOosA==
+  dependencies:
+    loglevel "^1.9.1"
+
 "@nicolo-ribaudo/[email protected]":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -3659,6 +3666,11 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+loglevel@^1.9.1:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.2.tgz#c2e028d6c757720107df4e64508530db6621ba08"
+  integrity sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"