Merge branch 'main' of github.com:receptron/graphai-demo-web

src/agents/tinyswallow.ts

@@ -87,9 +87,8 @@ export const tinyswallowAgent: AgentFunction = async ({ filterParams, params, na
     role: "assistant" as const,
     content: text,
   };
-  console.log(message);
   messagesCopy.push(message);
-  console.log(messagesCopy);
+
   return {
     message,
     messages: messagesCopy,

src/components/MenuList.vue

@@ -4,6 +4,7 @@
     <MenuItem @click="handleClose" link="/map" icon="public" title="menu.map" />
     <MenuItem @click="handleClose" link="/video" icon="smart_display" title="menu.video" />
     <MenuItem @click="handleClose" link="/interview" icon="mic" title="menu.interview" />
+    <MenuItem @click="handleClose" link="/interview2" icon="mic" title="menu.interview" />
     <MenuItem @click="handleClose" link="/chat" icon="man" title="menu.chat" />
     <MenuItem @click="handleClose" link="/reception" icon="man" title="menu.reception" />
     <MenuItem @click="handleClose" link="/sakana" icon="set_meal" title="menu.sakana" />

src/graph/interview2.ts

@@ -0,0 +1,116 @@
+export const graph_data = {
+  version: 0.5,
+  nodes: {
+    system_interviewer: {
+      value:
+      "あなたはプロのインタビュアーです。相手の個性や本質を深掘りし、時には鋭い質問を投げかけながら、核心に迫るインタビューを行ってください。観客を引き込むために、質問は一つずつ投げかけ、相手の回答にしっかり反応してから次の話題に進んでください。対話の流れを大切にし、相手の言葉からさらに深い洞察を引き出してください。",
+    },
+    name: {
+      value: "",
+    },
+    context: {
+      // prepares the context for this interview.
+      agent: "copyAgent",
+      inputs: {
+        person0: {
+          name: "interviewer",
+          system: ":system_interviewer",
+        },
+        person1: {
+          name: ":name",
+          system: "あなたは${:name}です.",
+          greeting: "こんにちは、私は${:name}です",
+        },
+      },
+    },
+    chat: {
+      // performs the conversation using nested graph
+      agent: "nestedAgent",
+      inputs: {
+        messages: [
+          {
+            role: "system",
+            content: ":context.person0.system",
+          },
+          {
+            role: "user",
+            content: ":context.person1.greeting",
+          },
+        ],
+        context: ":context",
+      },
+      graph: {
+        loop: {
+          count: 6,
+        },
+        nodes: {
+          messages: {
+            // Holds the conversation, array of messages.
+            value: [], // to be filled with inputs[2]
+            update: ":swappedMessages",
+          },
+          context: {
+            // Holds the context, which is swapped for each iteration.
+            value: {}, // te be mfilled with inputs[1]
+            update: ":swappedContext",
+          },
+          llm: {
+            // Sends those messages to the LLM to get a response.
+            agent: "tinyswallowAgent",
+            isResult: true,
+            params: {
+              model: "gpt-4o",
+              stream: true,
+            },
+            inputs: { messages: ":messages" },
+          },
+          output: {
+            // Displays the response to the user.
+            agent: "copyAgent",
+            inputs: {
+              message: {
+                content: ":llm.text",
+                role: ":context.person1.name",
+              },
+            },
+          },
+          reducer: {
+            // Append the responce to the messages.
+            agent: "pushAgent",
+            inputs: { array: ":messages", item: { content: ":llm.message.content", role: ":llm.message.role" } },
+          },
+          swappedContext: {
+            // Swaps the context
+            agent: "propertyFilterAgent",
+            params: {
+              swap: {
+                person0: "person1",
+              },
+            },
+            inputs: { item: ":context" },
+          },
+          swappedMessages: {
+            // Swaps the user and assistant of messages
+            agent: "propertyFilterAgent",
+            params: {
+              inject: [
+                {
+                  propId: "content",
+                  index: 0,
+                  from: 1,
+                },
+              ],
+              alter: {
+                role: {
+                  assistant: "user",
+                  user: "assistant",
+                },
+              },
+            },
+            inputs: { array: [":reducer.array", ":swappedContext.person0.system"] },
+          },
+        },
+      },
+    },
+  },
+};

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 InterView2 from "@/views/InterView2.vue";
 import llm from "@/views/tinyswallow.vue";
 
 const routeChildren: Array<RouteRecordRaw> = [
@@ -66,6 +67,10 @@ const routeChildren: Array<RouteRecordRaw> = [
     path: "interview",
     component: InterView,
   },
+  {
+    path: "interview2",
+    component: InterView2,
+  },
   {
     path: "llm",
     component: llm,

src/views/InterView2.vue

@@ -0,0 +1,131 @@
+<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">
+        <div class="w-10/12 m-auto text-left">
+          <div v-for="(m, k) in messages" :key="k">
+            <div v-if="m.role !== 'interviewer'" class="mr-8">👱{{ m.content }}</div>
+            <div class="ml-20" v-else>🤖{{ m.content }}</div>
+          </div>
+          <div class="ml-20" v-if="isStreaming['llm'] && currentRole === 'interviewer'">🤖{{ streamData["llm"] }}</div>
+          <div class="mr-8" v-if="isStreaming['llm'] && currentRole !== 'interviewer'">👱{{ streamData["llm"] }}</div>
+        </div>
+      </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>
+      </div>
+
+      <div>
+        <div class="w-10/12 m-auto my-4">
+          <div class="flex">
+            <input v-model="userInput" @keyup.enter="callSubmit" class="border-2 p-2 rounded-md flex-1" :disabled="isSubmit" />
+            <button
+              class="text-white font-bold items-center rounded-md px-4 py-2 ml-1 hover:bg-sky-700 flex-none"
+              :class="isSubmit ? 'bg-sky-200' : 'bg-sky-500'"
+              @click="callSubmit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from "vue";
+
+import { GraphAI } from "graphai";
+import * as agents from "@graphai/vanilla";
+
+import { graph_data } from "@/graph/interview2";
+import tinyswallowAgent from "../agents/tinyswallow";
+
+import { useStreamData } from "@/utils/stream";
+import { useChatPlugin } from "../utils/graphai";
+
+import { useCytoscape } from "@receptron/graphai_vue_cytoscape";
+
+export default defineComponent({
+  name: "HomePage",
+  components: {},
+  setup() {
+    const selectedGraph = computed(() => {
+      return graph_data;
+    });
+
+    // input
+    const userInput = ref("トム・クルーズ");
+    const isSubmit = ref(false);
+    const currentRole = ref("");
+
+    const callSubmit = () => {
+      isSubmit.value = true;
+      run();
+    };
+    // end of input
+
+    const { updateCytoscape, cytoscapeRef } = useCytoscape(selectedGraph);
+
+    // streaming
+    const { streamData, streamAgentFilter, streamPlugin, isStreaming } = useStreamData();
+    const agentFilters = [
+      {
+        name: "streamAgentFilter",
+        agent: streamAgentFilter,
+      },
+    ];
+    // end of streaming
+
+    const { messages, chatMessagePlugin } = useChatPlugin();
+    const run = async () => {
+      const graphai = new GraphAI(
+        selectedGraph.value,
+        {
+          ...agents,
+          tinyswallowAgent,
+        },
+        {
+          agentFilters,
+          config: {
+          },
+        },
+      );
+      graphai.injectValue("name", userInput.value);
+      graphai.registerCallback(updateCytoscape);
+      graphai.registerCallback(chatMessagePlugin(["output"]));
+      graphai.registerCallback(({ nodeId, result }) => {
+        console.log(nodeId, result );
+        if (nodeId === "context" && result) {
+          currentRole.value = (result as { person1: { name: string } }).person1.name;
+          console.log(currentRole.value);
+        }
+      });
+      graphai.registerCallback(streamPlugin(["llm"]));
+
+      await graphai.run();
+    };
+
+    return {
+      run,
+
+      cytoscapeRef,
+      selectedGraph,
+      streamData,
+      isStreaming,
+
+      callSubmit,
+      userInput,
+      messages,
+      currentRole,
+      isSubmit,
+    };
+  },
+});
+</script>