Refactor convertCanvasToPage function and add

observability
Web-Spinner-core · Nov 27, 2023 · 2dc6fe6 · 2dc6fe6
1 parent 3f55fee
commit 2dc6fe6
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 45 deletions.
diff --git a/apps/agent/src/pipelines/canvas_to_page/index.ts b/apps/agent/src/pipelines/canvas_to_page/index.ts
@@ -1,4 +1,4 @@
-import { Callbacks } from "langchain/callbacks";
+import { TraceGroup } from "langchain/callbacks";
 import { HumanMessage, SystemMessage } from "langchain/schema";
 import { createChatModel } from "~/lib/openai";
 
@@ -34,47 +34,55 @@ When sent new wireframes, respond ONLY with the contents of the html file.`;
  */
 export default async function convertCanvasToPage(
   imageUrl: string,
-  selectionText: string,
-  callbacks?: Callbacks
+  selectionText: string
 ) {
-  const model = await createChatModel({
-    modelName: "gpt-4-vision-preview",
-    maxTokens: 4096,
-    temperature: 0.1,
-    callbacks
-  })
-  const response = await model.call(
-    [
-      new SystemMessage(systemPrompt),
-      new HumanMessage({
-        content: [
-          {
-            type: "image_url",
-            image_url: {
-              url: imageUrl,
-              detail: "high"
-            }
-          },
-          {
-            type: "text",
-            text: "Here are the latest wireframes. Could you make a new website based on these wireframes and notes and send back just the html file?"
-          },
-          {
-            type: "text",
-            text: selectionText
-          }
-        ],
-      }),
-    ],
-    { callbacks }
-  );
-  if (Array.isArray(response.content)) {
-    throw new Error(`Expected response content to be a string`);
-  }
-  const content = response.content;
-  const start = content.indexOf("<!DOCTYPE html>");
-  const end = content.lastIndexOf("</html>");
+  // Observability group
+  const traceGroup = new TraceGroup("convert_canvas_to_page");
+  const callbacks = await traceGroup.start();
+
+  try {
+    const model = await createChatModel({
+      modelName: "gpt-4-vision-preview",
+      maxTokens: 4096,
+      temperature: 0.1,
+      callbacks,
+      cache: false
+    });
+    const response = await model.call(
+      [
+        new SystemMessage(systemPrompt),
+        new HumanMessage({
+          content: [
+            {
+              type: "image_url",
+              image_url: {
+                url: imageUrl,
+                detail: "high",
+              },
+            },
+            {
+              type: "text",
+              text: "Here are the latest wireframes. Could you make a new website based on these wireframes and notes and send back just the html file?",
+            },
+            {
+              type: "text",
+              text: selectionText,
+            },
+          ],
+        }),
+      ],
+      { callbacks }
+    );
+    if (Array.isArray(response.content)) {
+      throw new Error(`Expected response content to be a string`);
+    }
+    const content = response.content;
+    const start = content.indexOf("<!DOCTYPE html>");
+    const end = content.lastIndexOf("</html>");
 
-  const html = content.slice(start, end + "</html>".length).trim();
-  return html;
+    const html = content.slice(start, end + "</html>".length).trim();
+    return html;
+  } finally {
+    await traceGroup.end();
+  }
 }
diff --git a/apps/agent/src/routes/canvas/canvas_to_page.ts b/apps/agent/src/routes/canvas/canvas_to_page.ts
@@ -4,17 +4,20 @@ import convertCanvasToPage from "~/pipelines/canvas_to_page";
 
 const bodySchema = z.object({
   imageUrl: z.string(),
-  selectionText: z.string()
+  selectionText: z.string(),
 });
 
 /**
  * Scan issues in a repository and attempt to solve them
  */
-export default async function convertCanvasInputToPage(ctx: Context, next: Next) {
+export default async function convertCanvasInputToPage(
+  ctx: Context,
+  next: Next
+) {
   const { imageUrl, selectionText } = bodySchema.parse(ctx.request.body);
 
   const result = await convertCanvasToPage(imageUrl, selectionText);
-  
+
   ctx.status = 200;
   ctx.body = result;
   return next();