UI - Update content retrieval with download api (#398)

* update ui indexify and update content retrieval with download api * wip * update getindexify package * version bump
tensorlakeai · Mar 7, 2024 · 738c74c · 738c74c
1 parent b486fa2
commit 738c74c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 57 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "indexify"
-version = "0.0.11"
+version = "0.0.12"
 edition = "2021"
 authors = ["Diptanu Gon Choudhury <[email protected]>"]
 build = "build.rs"

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -19,7 +19,7 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.7",
     "crypto": "^1.0.1",
-    "getindexify": "^0.0.15",
+    "getindexify": "^0.0.17",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/ui/src/components/ContentTable.tsx b/ui/src/components/ContentTable.tsx
@@ -188,8 +188,8 @@ const ContentTable = ({
       width: 220,
     },
     {
-      field: "content_type",
-      headerName: "ContentType",
+      field: "mime_type",
+      headerName: "Mime Type",
       width: 150,
     },
     {

diff --git a/ui/src/routes/Namespace/content.tsx b/ui/src/routes/Namespace/content.tsx
@@ -1,7 +1,7 @@
 import { useLoaderData, LoaderFunctionArgs, redirect } from "react-router-dom";
 import { Typography, Stack, Breadcrumbs, Box } from "@mui/material";
-import { IndexifyClient, IContent, ITask } from "getindexify";
-import React from "react";
+import { IContentMetadata, IndexifyClient, ITask } from "getindexify";
+import React, { useEffect, useState } from "react";
 import TasksTable from "../../components/TasksTable";
 import { Link } from "react-router-dom";
 
@@ -14,82 +14,65 @@ export async function loader({ params }: LoaderFunctionArgs) {
   const tasks = await client
     .getTasks()
     .then((tasks) => tasks.filter((t) => t.content_metadata.id === contentId));
-  const content = await client.getContentById(contentId);
-  return { namespace, tasks, contentId, content };
+  const contentMetadata = await client.getContentById(contentId);
+  return { client, namespace, tasks, contentId, contentMetadata };
 }
 
 const ContentPage = () => {
-  const { namespace, tasks, contentId, content } = useLoaderData() as {
-    namespace: string;
-    tasks: ITask[];
-    contentId: string;
-    content: IContent;
-  };
-
-  function byteArrayToBlob(byteArray: number[]): Blob {
-    const arrayBuffer = new ArrayBuffer(byteArray.length);
-    const uint8Array = new Uint8Array(arrayBuffer);
-    for (let i = 0; i < byteArray.length; i++) {
-      uint8Array[i] = byteArray[i];
-    }
-    return new Blob([uint8Array]);
-  }
-
-  function bytesToString(byteArray: number[]) {
-    const chunkSize = 10000;
-    const decoder = new TextDecoder("utf-8");
-    let result = "";
-
-    for (let i = 0; i < byteArray.length; i += chunkSize) {
-      const chunk = byteArray.slice(i, i + chunkSize);
-      result += decoder.decode(new Uint8Array(chunk), { stream: true });
-    }
-
-    // Decode any remaining parts of the byteArray
-    result += decoder.decode(); // Flush the decoder's state
-    return result;
-  }
+  const { client, namespace, tasks, contentId, contentMetadata } =
+    useLoaderData() as {
+      namespace: string;
+      tasks: ITask[];
+      contentId: string;
+      contentMetadata: IContentMetadata;
+      client: IndexifyClient;
+    };
 
+  const [textContent, setTextContent] = useState("");
+  useEffect(() => {
+    client.downloadContent<string>(contentId).then((data) => {
+      setTextContent(data);
+    });
+  }, [client, contentId]);
+
   const renderContent = () => {
-    if (content.content_type.startsWith("image")) {
-      const blob = byteArrayToBlob(content.bytes);
+    if (contentMetadata.mime_type.startsWith("image")) {
       return (
         <img
           alt="content"
-          src={URL.createObjectURL(blob)}
+          src={contentMetadata.content_url}
           width="100%"
           style={{ maxWidth: "200px" }}
           height="auto"
         />
       );
-    } else if (content.content_type.startsWith("audio")) {
-      const blob = byteArrayToBlob(content.bytes);
+    } else if (contentMetadata.mime_type.startsWith("audio")) {
       return (
         <audio controls>
-          <source src={URL.createObjectURL(blob)} type={content.content_type} />
+          <source
+            src={contentMetadata.content_url}
+            type={contentMetadata.mime_type}
+          />
           Your browser does not support the audio element.
         </audio>
       );
-    } else if (content.content_type.startsWith("video")) {
-      const blob = byteArrayToBlob(content.bytes);
+    } else if (contentMetadata.mime_type.startsWith("video")) {
       return (
         <video
-          src={URL.createObjectURL(blob)}
+          src={contentMetadata.content_url}
           controls
           style={{ width: "100%", maxWidth: "400px", height: "auto" }}
         />
       );
-    } else if (content.content_type.startsWith("text")) {
+    } else if (contentMetadata.mime_type.startsWith("text")) {
       return (
         <Box
           sx={{
             maxHeight: "500px",
             overflow: "scroll",
           }}
         >
-          <Typography variant="body2">
-            {bytesToString(content.bytes)}
-          </Typography>
+          <Typography variant="body2">{textContent}</Typography>
         </Box>
       );
     }
@@ -106,7 +89,9 @@ const ContentPage = () => {
         <Typography color="text.primary">{contentId}</Typography>
       </Breadcrumbs>
       <Typography variant="h2">Content - {contentId}</Typography>
-      <Typography variant="body1">MimeType: {content.content_type}</Typography>
+      <Typography variant="body1">
+        MimeType: {contentMetadata.mime_type}
+      </Typography>
       {/* display content */}
       {renderContent()}
       {/* tasks */}