Upload folder to the viewer

src/python/run_matching.py

@@ -35,6 +35,11 @@ def parseParams():
         action="store_true",
         help="Creates and writes the pair of matching images.",
     )
+    parser.add_argument(
+        "--link_images",
+        action="store_true",
+        help="Creates hard link for images in the result folder.",
+    )
     return parser.parse_args()
 
 
@@ -152,6 +157,26 @@ def runMatchingResultVisualization(config, output_dir):
     os.system(command)
 
 
+def linkImages(image_dir, output_folder):
+    if output_folder.exists():
+        print(
+            "Output {output_folder} exists. Skipping...".format(
+                output_folder=output_folder
+            )
+        )
+        return
+    output_folder.mkdir()
+    images = image_dir.glob("*")
+    for image in images:
+        image_link_name = output_folder / image.name
+        command = "ln {image} {image_link_name}".format(
+            image=image, image_link_name=image_link_name
+        )
+        print(command)
+        os.system(command)
+    print("Linked images from", image_dir)
+
+
 def main():
     args = parseParams()
 
@@ -160,6 +185,10 @@ def main():
     else:
         args.output_dir.mkdir()
 
+    if args.link_images:
+        linkImages(args.query_images, args.output_dir / "query_images")
+        linkImages(args.reference_images, args.output_dir / "reference_images")
+
     # Compute query features.
     query_features_dir = args.output_dir / "query_features"
     computeFeatures(args.query_images, query_features_dir, args.dataset_name)

src/viewer/src/App.tsx

@@ -1,96 +1,57 @@
 // Created by O. Vysotska in 2023
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import "./App.css";
-import { ProtoLoader, MessageType } from "./ProtoLoader";
-import { CostMatrix, CostMatrixElement } from "./costMatrix";
-import { ImagesLoader } from "./ImagesLoader";
-import {
-  MatchingResultElement,
-  readMatchingResultFromProto,
-} from "./matchingResult";
-import CostMatrixComponent from "./CostMatrixComponent";
 
-function App() {
-  const [costMatrixProto, setCostMatrixProto] = useState(null);
-  const [costMatrix, setCostMatrix] = useState<CostMatrix>();
-  const [matchingResultProto, setMatchingResultProto] = useState(null);
-  const [matchingResult, setMatchingResult] =
-    useState<MatchingResultElement[]>();
-  const [selectedCostMatrixElement, setSelectedCostMatrixElement] =
-    useState<CostMatrixElement>();
+import CostMatrixComponent from "./components/CostMatrixComponent";
+import { ImagePreviewComponent } from "./components/ImagePreviewComponent";
+import DataLoader from "./components/DataLoader";
 
-  useEffect(() => {
-    if (costMatrixProto != null) {
-      console.log("Cost Matrix proto is loaded", costMatrixProto);
-      setCostMatrix(new CostMatrix(costMatrixProto));
-    }
-  }, [costMatrixProto]);
+import { ElementProvider } from "./context/ElementContext";
 
-  useEffect(() => {
-    console.log("Matching result proto changed", matchingResultProto);
-    setMatchingResult(readMatchingResultFromProto(matchingResultProto));
-  }, [matchingResultProto]);
+function App() {
+  const [costMatrixProtoFile, setCostMatrixProtoFile] = useState<File>();
+  const [matchingResultProtoFile, setMatchingResultProtoFile] =
+    useState<File>();
+  const [queryImageFiles, setQueryImageFiles] = useState<File[]>();
+  const [referenceImageFiles, setReferenceImageFiles] = useState<File[]>();
 
   return (
-    <div className="App">
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          flexWrap: "wrap",
-          justifyContent: "center",
-          gap: "10px",
-        }}
-      >
-        <h1 style={{ textAlign: "center" }}>Cost Matrix Viewer</h1>
-        <div className="costMatrix" style={{ backgroundColor: "ghostwhite" }}>
-          <div style={{display: "flex", flexDirection: "column", alignItems: "center"}}>
-            <div>
-              <ProtoLoader
-                onLoad={setCostMatrixProto}
-                messageType={MessageType.CostMatrix}
-              />
-              <ProtoLoader
-                onLoad={setMatchingResultProto}
-                messageType={MessageType.MatchingResult}
-              />
-            </div>
-          </div>
-          {costMatrix && (
-            <CostMatrixComponent
-              costMatrix={costMatrix}
-              matchingResult={matchingResult}
-              setSelectedCostMatrixElement={setSelectedCostMatrixElement}
-            />
-          )}
-        </div>
-
+    <ElementProvider>
+      <div className="App">
         <div
-          className="imageLoaders"
           style={{
-            backgroundColor: "lavender",
             display: "flex",
-            flexDirection: "row",
+            flexDirection: "column",
             flexWrap: "wrap",
             justifyContent: "center",
-            columnGap: "20px",
+            gap: "10px",
           }}
         >
-          <div>
-            <ImagesLoader
-              imageType={"Query"}
-              showImageId={selectedCostMatrixElement?.queryId}
-            />
-          </div>
-          <div>
-            <ImagesLoader
-              imageType={"Reference"}
-              showImageId={selectedCostMatrixElement?.refId}
-            />
+          <h1 style={{ textAlign: "center" }}>Cost Matrix Viewer</h1>
+          <DataLoader
+            setCostMatrixProtoFile={setCostMatrixProtoFile}
+            setMatchingResultProtoFile={setMatchingResultProtoFile}
+            setQueryImageFiles={setQueryImageFiles}
+            setReferenceImageFiles={setReferenceImageFiles}
+          />
+          <div
+            className="costMatrix"
+            style={{ margin: "0 10px 0 10px", backgroundColor: "alicewhite" }}
+          >
+            {costMatrixProtoFile && (
+              <CostMatrixComponent
+                costMatrixProtoFile={costMatrixProtoFile}
+                matchingResultProtoFile={matchingResultProtoFile}
+              />
+            )}
           </div>
+          <ImagePreviewComponent
+            queryImageFiles={queryImageFiles}
+            referenceImageFiles={referenceImageFiles}
+          />
         </div>
       </div>
-    </div>
+    </ElementProvider>
   );
 }