fetch vision agent (stream doesn't work) (#8)

* check-in code

* image rendering and vision agent endpoint boilerplate

* save

* conflict

* fix ts

app/api/vision-agent/route.ts

@@ -11,6 +11,52 @@ import { fetcher } from '@/lib/utils';
 
 export const runtime = 'edge';
 
+function parseVisionAgentStream(): AIStreamParser {
+  let previous = '';
+
+  return data => {
+    console.log('[Ming] ~ parseVisionAgentStream ~ data:', data);
+    // const json = JSON.parse(data) as {
+    //   completion: string;
+    //   stop: string | null;
+    //   stop_reason: string | null;
+    //   truncated: boolean;
+    //   log_id: string;
+    //   model: string;
+    //   exception: string | null;
+    // };
+
+    // // Anthropic's `completion` field is cumulative unlike OpenAI's
+    // // deltas. In order to compute the delta, we must slice out the text
+    // // we previously received.
+    // const text = json.completion;
+    // console.log('[Ming] ~ parseVisionAgentStream ~ text:', text);
+    // const delta = text.slice(previous.length);
+    // previous = text;
+
+    return data;
+  };
+}
+
+function visionAgentStream(
+  res: Response,
+  cb?: AIStreamCallbacksAndOptions,
+): ReadableStream {
+  return AIStream(res, parseVisionAgentStream(), cb);
+}
+
+function readChunks(reader: any) {
+  return {
+    async *[Symbol.asyncIterator]() {
+      let readResult = await reader.read();
+      while (!readResult.done) {
+        yield readResult.value;
+        readResult = await reader.read();
+      }
+    },
+  };
+}
+
 export async function POST(req: Request) {
   const json = await req.json();
   const { messages, url } = json as {
@@ -26,46 +72,13 @@ export async function POST(req: Request) {
     });
   }
 
-  function parseVisionAgentStream(): AIStreamParser {
-    let previous = '';
-
-    return data => {
-      console.log('[Ming] ~ parseVisionAgentStream ~ data:', data);
-      // const json = JSON.parse(data) as {
-      //   completion: string;
-      //   stop: string | null;
-      //   stop_reason: string | null;
-      //   truncated: boolean;
-      //   log_id: string;
-      //   model: string;
-      //   exception: string | null;
-      // };
-
-      // // Anthropic's `completion` field is cumulative unlike OpenAI's
-      // // deltas. In order to compute the delta, we must slice out the text
-      // // we previously received.
-      // const text = json.completion;
-      // console.log('[Ming] ~ parseVisionAgentStream ~ text:', text);
-      // const delta = text.slice(previous.length);
-      // previous = text;
-
-      return data;
-    };
-  }
-
-  function visionAgentStream(
-    res: Response,
-    cb?: AIStreamCallbacksAndOptions,
-  ): ReadableStream {
-    return AIStream(res, parseVisionAgentStream(), cb);
-  }
-
   const formData = new FormData();
   formData.append('input', JSON.stringify(messages));
   formData.append('image', url);
 
-  const fetchResponse = await fetcher(
-    'https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent',
+  const fetchResponse = await fetch(
+    // 'https://api.dev.landing.ai/v1/agent/chat?agent_class=vision_agent',
+    'http://localhost:5050/v1/agent/chat?agent_class=vision_agent',
     {
       method: 'POST',
       headers: {
@@ -74,7 +87,9 @@ export async function POST(req: Request) {
       body: formData,
     },
   );
-  console.log('[Ming] ~ POST ~ fetchResponse:', fetchResponse);
+
+  // console.log('[Ming] ~ POST ~ fetchResponse:', fetchResponse);
+
   const stream = visionAgentStream(fetchResponse, {
     onStart: async () => {
       console.log('Stream started');

components/chat/ChatList.tsx

@@ -12,7 +12,7 @@ export function ChatList({ messages }: ChatList) {
   return (
     <div className="relative mx-auto max-w-3xl px-8 pr-12">
       {messages
-        .filter(message => message.role !== 'system')
+        // .filter(message => message.role !== 'system')
         .map((message, index) => (
           <div key={index}>
             <ChatMessage message={message} />

components/chat/index.tsx

@@ -28,7 +28,7 @@ export function Chat({ chat }: ChatProps) {
                 src={url}
                 alt={url}
                 fill
-                objectFit="contain"
+                className="object-contain"
               />
             </div>
           </div>