Merge pull request #364 from ai-cfia/360-label-data-validation-page-i…

…ntegration

issue #367: fertiscan-backend client API

.env.template

@@ -3,3 +3,4 @@ NEXT_PUBLIC_DEBUG=true
 # if link change dont forget to chage the test for sideNav to check if the link is correct
 NEXT_PUBLIC_REPORT_ISSUE_URL="https://forms.office.com/Pages/ResponsePage.aspx?id=7aW1GIYd00GUoLwn2uMqsn9SKTgKSYtCg4t0B9x4uyJURE5HSkFCTkZHUEQyWkxJVElMODdFQ09HUCQlQCN0PWcu&r5a19e9d47d9f4ac497fb974c192da4b3=%22Fertiscan%22"
 NEXT_PUBLIC_ALERT_BANNER_AUTO_DISMISS_TIME=5000
+BACKEND_URL=http://localhost:5000

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+/backend-openapi

package.json

@@ -25,6 +25,7 @@
     "@mui/icons-material": "^6.1.4",
     "@mui/material": "^6.1.8",
     "@mui/material-nextjs": "^6.1.4",
+    "axios": "^1.7.9",
     "dotenv": "^16.4.5",
     "i18next": "^23.16.5",
     "i18next-browser-languagedetector": "^8.0.0",

src/app/api/extract-label-data/route.ts

@@ -0,0 +1,50 @@
+import { inspectionsApi, pipelineApi } from "@/utils/server/backend";
+
+export async function POST(request: Request) {
+  const formData = await request.formData();
+  const files = formData.getAll("files") as File[];
+
+  const authHeader = request.headers.get("Authorization");
+  if (!authHeader) {
+    return new Response(
+      JSON.stringify({ error: "Missing Authorization header" }),
+      {
+        status: 401,
+      },
+    );
+  }
+
+  return pipelineApi
+    .analyzeDocumentAnalyzePost(files)
+    .then((analyzeResponse) => {
+      console.log(
+        "Analyze response:",
+        JSON.stringify(analyzeResponse.data, null, 2),
+      );
+      return inspectionsApi.postInspectionInspectionsPost(
+        analyzeResponse.data,
+        files,
+        {
+          headers: { Authorization: authHeader },
+        },
+      );
+    })
+    .then((inspectionsResponse) => {
+      return Response.json(inspectionsResponse.data);
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.error(
+          "Error response:",
+          JSON.stringify(error.response.data, null, 2),
+        );
+      } else if (error.request) {
+        console.error("Error request:", error.request);
+      } else {
+        console.error("Error message:", error.message);
+      }
+      return new Response(JSON.stringify({ error: error.message }), {
+        status: 500,
+      });
+    });
+}

src/app/page.tsx

@@ -2,14 +2,16 @@
 import FileUploaded from "@/classe/File";
 import Dropzone from "@/components/Dropzone";
 import FileList from "@/components/FileList";
+import useAlertStore from "@/stores/alertStore";
 import type { DropzoneState } from "@/types/types";
 import { Box, Button, Grid2, Tooltip } from "@mui/material";
-import { useState } from "react";
-import React, { Suspense } from "react";
+import axios from "axios";
+import { Suspense, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 function HomePage() {
   const { t } = useTranslation("homePage");
+  const { showAlert } = useAlertStore();
 
   const [dropzoneState, setDropzoneState] = useState<DropzoneState>({
     visible: false,
@@ -18,6 +20,39 @@ function HomePage() {
   });
   const [uploadedFiles, setUploadedFiles] = useState<FileUploaded[]>([]);
 
+  const sendFiles = async () => {
+    const formData = new FormData();
+
+    uploadedFiles.forEach((fileUploaded) => {
+      const file = fileUploaded.getFile();
+      formData.append("files", file);
+    });
+
+    const username = "";
+    const password = "";
+    const authHeader = "Basic " + btoa(`${username}:${password}`);
+
+    axios
+      .post("/api/extract-label-data", formData, {
+        headers: { Authorization: authHeader },
+      })
+      .then((response) => {
+        console.log("Server Response:", response.data);
+      })
+      .catch((error) => {
+        if (error.response) {
+          console.error("Error response:", error.response.data);
+          showAlert(error.response.data.error, "error");
+        } else if (error.request) {
+          console.error("Error request:", error.request);
+          showAlert(error.request, "error");
+        } else {
+          console.error("Error message:", error.message);
+          showAlert(error.message, "error");
+        }
+      });
+  };
+
   return (
     <Suspense fallback="loading">
       <Box className="pt-[10vh]">
@@ -73,6 +108,7 @@ function HomePage() {
                   color="secondary"
                   disabled={uploadedFiles.length === 0}
                   fullWidth
+                  onClick={sendFiles}
                 >
                   {t("submit_button")}
                 </Button>

src/utils/server/backend/api.ts

@@ -0,0 +1,19 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * FastAPI
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+export * from "./api/home-api";
+export * from "./api/inspections-api";
+export * from "./api/monitoring-api";
+export * from "./api/pipeline-api";
+export * from "./api/users-api";

src/utils/server/backend/api/home-api.ts

@@ -0,0 +1,163 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * FastAPI
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import type { AxiosInstance, AxiosPromise, RawAxiosRequestConfig } from "axios";
+import globalAxios from "axios";
+import type { Configuration } from "../configuration";
+// Some imports not used depending on template conditions
+// @ts-ignore
+import {
+  DUMMY_BASE_URL,
+  createRequestFunction,
+  setSearchParams,
+  toPathString,
+} from "../common";
+// @ts-ignore
+import {
+  BASE_PATH,
+  BaseAPI,
+  RequiredError,
+  operationServerMap,
+  type RequestArgs,
+} from "../base";
+/**
+ * HomeApi - axios parameter creator
+ * @export
+ */
+export const HomeApiAxiosParamCreator = function (
+  configuration?: Configuration,
+) {
+  return {
+    /**
+     *
+     * @summary Home
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    homeGet: async (
+      options: RawAxiosRequestConfig = {},
+    ): Promise<RequestArgs> => {
+      const localVarPath = `/`;
+      // use dummy base URL string because the URL constructor only accepts absolute URLs.
+      const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+      let baseOptions;
+      if (configuration) {
+        baseOptions = configuration.baseOptions;
+      }
+
+      const localVarRequestOptions = {
+        method: "GET",
+        ...baseOptions,
+        ...options,
+      };
+      const localVarHeaderParameter = {} as any;
+      const localVarQueryParameter = {} as any;
+
+      setSearchParams(localVarUrlObj, localVarQueryParameter);
+      let headersFromBaseOptions =
+        baseOptions && baseOptions.headers ? baseOptions.headers : {};
+      localVarRequestOptions.headers = {
+        ...localVarHeaderParameter,
+        ...headersFromBaseOptions,
+        ...options.headers,
+      };
+
+      return {
+        url: toPathString(localVarUrlObj),
+        options: localVarRequestOptions,
+      };
+    },
+  };
+};
+
+/**
+ * HomeApi - functional programming interface
+ * @export
+ */
+export const HomeApiFp = function (configuration?: Configuration) {
+  const localVarAxiosParamCreator = HomeApiAxiosParamCreator(configuration);
+  return {
+    /**
+     *
+     * @summary Home
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    async homeGet(
+      options?: RawAxiosRequestConfig,
+    ): Promise<
+      (axios?: AxiosInstance, basePath?: string) => AxiosPromise<any>
+    > {
+      const localVarAxiosArgs =
+        await localVarAxiosParamCreator.homeGet(options);
+      const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+      const localVarOperationServerBasePath =
+        operationServerMap["HomeApi.homeGet"]?.[localVarOperationServerIndex]
+          ?.url;
+      return (axios, basePath) =>
+        createRequestFunction(
+          localVarAxiosArgs,
+          globalAxios,
+          BASE_PATH,
+          configuration,
+        )(axios, localVarOperationServerBasePath || basePath);
+    },
+  };
+};
+
+/**
+ * HomeApi - factory interface
+ * @export
+ */
+export const HomeApiFactory = function (
+  configuration?: Configuration,
+  basePath?: string,
+  axios?: AxiosInstance,
+) {
+  const localVarFp = HomeApiFp(configuration);
+  return {
+    /**
+     *
+     * @summary Home
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    homeGet(options?: RawAxiosRequestConfig): AxiosPromise<any> {
+      return localVarFp
+        .homeGet(options)
+        .then((request) => request(axios, basePath));
+    },
+  };
+};
+
+/**
+ * HomeApi - object-oriented interface
+ * @export
+ * @class HomeApi
+ * @extends {BaseAPI}
+ */
+export class HomeApi extends BaseAPI {
+  /**
+   *
+   * @summary Home
+   * @param {*} [options] Override http request option.
+   * @throws {RequiredError}
+   * @memberof HomeApi
+   */
+  public homeGet(options?: RawAxiosRequestConfig) {
+    return HomeApiFp(this.configuration)
+      .homeGet(options)
+      .then((request) => request(this.axios, this.basePath));
+  }
+}