bugfix: image subsystem properly sets src for images

devflowinc · Mar 20, 2024 · b50f121 · b50f121
1 parent 492b835
commit b50f121
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 27 deletions.
diff --git a/search/src/components/ImageModal.tsx b/search/src/components/ImageModal.tsx
@@ -0,0 +1,92 @@
+import {
+  Accessor,
+  createEffect,
+  createSignal,
+  For,
+  Setter,
+  Show,
+} from "solid-js";
+import { FullScreenModal } from "./Atoms/FullScreenModal";
+import { useStore } from "@nanostores/solid";
+import { currentDataset } from "../stores/datasetStore";
+
+export interface ImageModalProps {
+  showImageModal: Accessor<boolean>;
+  setShowImageModal: Setter<boolean>;
+  imgInformation: Accessor<{
+    imgRangeStart: number;
+    imgRangeEnd: number;
+    imgRangePrefix: string;
+  } | null>;
+}
+
+export const ImageModal = (props: ImageModalProps) => {
+  const apiHost = import.meta.env.VITE_API_HOST as string;
+  const $currentDataset = useStore(currentDataset);
+
+  const [signedImageUrlsHashmap, setSignedImageUrlsHashmap] = createSignal<
+    Record<string, string>
+  >({});
+
+  createEffect(() => {
+    const rangeArray = Array.from({
+      length:
+        (props.imgInformation()?.imgRangeEnd ?? 0) -
+        (props.imgInformation()?.imgRangeStart ?? 0) +
+        1,
+    });
+
+    rangeArray.forEach((_, i) => {
+      const fileName = `${props.imgInformation()?.imgRangePrefix ?? ""}${
+        (props.imgInformation()?.imgRangeStart ?? 0) + i
+      }`;
+
+      void fetch(`${apiHost}/get_signed_url/${fileName}`, {
+        headers: {
+          "TR-Dataset": $currentDataset()?.dataset.id ?? "",
+        },
+        credentials: "include",
+      }).then((response) => {
+        const location = response.headers.get("Location");
+        if (location) {
+          setSignedImageUrlsHashmap((prev) => ({
+            ...prev,
+            [fileName]: location,
+          }));
+        }
+      });
+    });
+  });
+
+  return (
+    <Show when={props.showImageModal()}>
+      <FullScreenModal
+        isOpen={props.showImageModal}
+        setIsOpen={props.setShowImageModal}
+      >
+        <div class="flex max-h-[75vh] max-w-[75vw] flex-col space-y-2 overflow-auto">
+          <For
+            each={Array.from({
+              length:
+                (props.imgInformation()?.imgRangeEnd ?? 0) -
+                (props.imgInformation()?.imgRangeStart ?? 0) +
+                1,
+            })}
+          >
+            {(_, i) => {
+              const fileName = `${
+                props.imgInformation()?.imgRangePrefix ?? ""
+              }${
+                // eslint-disable-next-line solid/reactivity
+                (props.imgInformation()?.imgRangeStart ?? 0) + i()
+              }`;
+              const signedUrl = signedImageUrlsHashmap()[fileName] ?? "";
+
+              return <img class="mx-auto my-auto" src={signedUrl} />;
+            }}
+          </For>
+        </div>
+      </FullScreenModal>
+    </Show>
+  );
+};
diff --git a/search/src/components/ScoreChunk.tsx b/search/src/components/ScoreChunk.tsx
@@ -39,6 +39,7 @@ import { clientConfig } from "../stores/envsStore";
 import { currentDataset } from "../stores/datasetStore";
 import { A } from "@solidjs/router";
 import { currentUser } from "../stores/userStore";
+import { ImageModal } from "./ImageModal";
 
 export const sanitzerOptions = {
   allowedTags: [...sanitizeHtml.defaults.allowedTags, "font", "button", "span"],
@@ -573,29 +574,11 @@ const ScoreChunk = (props: ScoreChunkProps) => {
           </Show>
         </div>
       </Show>
-      <Show when={showImageModal()}>
-        <FullScreenModal isOpen={showImageModal} setIsOpen={setShowImageModal}>
-          <div class="flex max-h-[75vh] max-w-[75vw] flex-col space-y-2 overflow-auto">
-            <For
-              each={Array.from({
-                length:
-                  (imgInformation()?.imgRangeEnd ?? 0) -
-                  (imgInformation()?.imgRangeStart ?? 0) +
-                  1,
-              })}
-            >
-              {(_, i) => (
-                <img
-                  class="mx-auto my-auto"
-                  src={`${apiHost}/image/${
-                    imgInformation()?.imgRangePrefix ?? ""
-                  }${(imgInformation()?.imgRangeStart ?? 0) + i()}.png`}
-                />
-              )}
-            </For>
-          </div>
-        </FullScreenModal>
-      </Show>
+      <ImageModal
+        showImageModal={showImageModal}
+        setShowImageModal={setShowImageModal}
+        imgInformation={imgInformation}
+      />
       <Show when={showMetadata()}>
         <FullScreenModal isOpen={showMetadata} setIsOpen={setShowMetadata}>
           <div class="flex max-h-[60vh] max-w-[75vw] flex-col space-y-2 overflow-auto scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 scrollbar-thumb-rounded-md dark:text-white dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600">

diff --git a/server/src/handlers/file_handler.rs b/server/src/handlers/file_handler.rs
@@ -347,6 +347,8 @@ pub async fn get_signed_url(
     _user: LoggedUser,
     dataset_org_plan_sub: DatasetAndOrgWithSubAndPlan,
 ) -> Result<HttpResponse, ServiceError> {
+    log::info!("Getting signed url for file: {}", file_name);
+
     let bucket = get_aws_bucket().map_err(|e| ServiceError::BadRequest(e.message.to_string()))?;
 
     let unlimited = std::env::var("UNLIMITED").unwrap_or("false".to_string());
@@ -358,7 +360,10 @@ pub async fn get_signed_url(
 
     let signed_url = bucket
         .presign_get(format!("{}/{}", s3_path, file_name.into_inner()), 300, None)
-        .map_err(|e| ServiceError::BadRequest(format!("Error getting signed url: {}", e)))?;
+        .map_err(|e| {
+            log::error!("Error getting signed url: {}", e);
+            ServiceError::BadRequest(format!("Error getting signed url: {}", e))
+        })?;
 
     Ok(HttpResponse::SeeOther()
         .append_header(("Location", signed_url))

diff --git a/server/src/lib.rs b/server/src/lib.rs
@@ -1,6 +1,5 @@
 #[macro_use]
 extern crate diesel;
-use actix_web::HttpResponse;
 use diesel_async::pooled_connection::AsyncDieselConnectionManager;
 use diesel_async::pooled_connection::ManagerConfig;
 use openssl::ssl::SslVerifyMode;

diff --git a/server/src/operators/file_operator.rs b/server/src/operators/file_operator.rs
@@ -53,8 +53,11 @@ pub fn get_aws_bucket() -> Result<Bucket, DefaultError> {
     };
 
     let aws_bucket = Bucket::new(s3_bucket_name, aws_region, aws_credentials)
-        .map_err(|_| DefaultError {
-            message: "Could not create bucket",
+        .map_err(|e| {
+            log::error!("Could not create or get bucket {:?}", e);
+            DefaultError {
+                message: "Could not create or get bucket",
+            }
         })?
         .with_path_style();
 

diff --git a/transfer-chunks.js b/transfer-chunks.js
@@ -0,0 +1,40 @@
+const res = await fetch("https://api.trieve.ai/api/chunk/search", {
+  headers: {
+    "content-type": "application/json",
+    "tr-dataset": "982df67b-a95f-46f6-adfd-25ee7648c79c",
+    Authorization: "tr-wPFc6qBAM9T6XEXDXLPFl2RhNZ8iUSZD",
+  },
+  body: '{"query":"test","page":1,"filters":{"must":[]},"search_type":"hybrid","get_collisions":true}',
+  method: "POST",
+});
+
+const data = await res.json();
+
+const score_chunks = data.score_chunks;
+
+for (let i = 0; i < score_chunks.length; i++) {
+  const chunk_data = score_chunks[i].metadata[0];
+
+  const queued_chunk = await fetch("http://127.0.0.1:8090/api/chunk", {
+    headers: {
+      "content-type": "application/json",
+      Authorization: "tr-jmTgOG67D3TlNwjmqXytxOgCT82n5Eay",
+      "tr-dataset": "5495a77b-cd85-428e-960e-7f4c856885d4",
+    },
+    body: JSON.stringify({
+      chunk_html: chunk_data.chunk_html,
+      metadata: chunk_data.metadata,
+    }),
+    method: "POST",
+  });
+
+  if (queued_chunk.ok) {
+    console.log("Chunk queued successfully");
+  } else {
+    console.error(
+      "Chunk failed to queue",
+      queued_chunk.status,
+      await queued_chunk.text()
+    );
+  }
+}