added open ai page

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import ContractAnalysis from "./pages/ContractAnalysis";
 import DocumentAnalysis from "./pages/DocumentAnalysis";
 import Home from "./pages/Home";
+import OpenAiAnalysis from "./pages/OpenAiAnalysis";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/analyze-contract" element={<ContractAnalysis />} />
         <Route path="/analyze-document" element={<DocumentAnalysis />} />
+        <Route path="/ask-gpt" element={<OpenAiAnalysis />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/pages/Home.tsx

@@ -13,12 +13,19 @@ function Home() {
           Prebuilt Contract Model
         </a>
         <a
-          className="rounded-md bg-sky-500/100 hover:bg-sky-500/50 p-5 text-xl w-3/4 md:w-1/3 max-w-xl"
+          className="rounded-md bg-sky-500/100 hover:bg-sky-500/50 p-5 mb-10 text-xl w-3/4 md:w-1/3 max-w-xl"
           href="/analyze-document"
           rel="noopener noreferrer"
         >
           Prebuilt Document Model
         </a>
+        <a
+          className="rounded-md bg-sky-500/100 hover:bg-sky-500/50 p-5 text-xl w-3/4 md:w-1/3 max-w-xl"
+          href="/ask-gpt"
+          rel="noopener noreferrer"
+        >
+          Ask GPT
+        </a>
       </header>
     </div>
   );

frontend/src/pages/OpenAiAnalysis.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import axios, { AxiosResponse } from "axios";
+
+const OpenAiAnalysis = () => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [file, setFile] = useState<any>();
+  const [analysisResponse, setAnalysisResponse] = useState<AxiosResponse<any, any>>();
+
+  const getFile = (event: any) => {
+    const selectedFile = event.target.files[0];
+    if (selectedFile.type !== "application/pdf") {
+      setErrorMessage("File type must be PDF. Please upload a different file.");
+      return;
+    }
+
+    setErrorMessage("");
+    setFile(selectedFile);
+  };
+
+  const getAnalysis = (event: any) => {
+    if (!file) {
+      setErrorMessage("Please upload a PDF file to run analysis.");
+      return;
+    }
+
+    setLoading(true);
+    setErrorMessage("");
+    const formData = new FormData();
+    formData.append("file", file);
+
+    axios
+      .post("https://cf-contract-analysis-mvp.azurewebsites.net/api/open-ai/analyze-contract", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      })
+      .then((response) => {
+        console.log(response);
+        setAnalysisResponse(response);
+        setLoading(false);
+      })
+      .catch((error: any) => {
+        setErrorMessage(`${error.message}. Please try again later.`);
+        setLoading(false);
+      });
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-gray-dark min-h-screen flex flex-col items-center text-2xl text-white">
+        <h1 className="text-white my-auto">Loading</h1>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-dark min-h-screen flex flex-col items-center text-2xl text-white">
+      <a href="/" className="absolute top-6 left-6 text-sm font-bold underline">
+        Return Home
+      </a>
+      <h1 className="text-3xl font-bold my-12 text-white">Document Analysis</h1>
+      <div className="flex flex-row items-center justify-center">
+        <div className="mx-auto max-w-xs">
+          <input
+            onChange={getFile}
+            type="file"
+            className="block w-full bg-slate-300 rounded-md text-black text-sm file:mr-4 file:rounded-md file:border-0 file:bg-sky-500 file:py-2.5 file:px-4 file:text-sm file:font-semibold file:text-black cursor-pointer hover:file:bg-sky-700 focus:outline-none disabled:pointer-events-none disabled:opacity-60"
+          />
+        </div>
+      </div>
+      <button
+        onClick={getAnalysis}
+        className="bg-sky-500 rounded p-2 text-sm font-bold text-black my-8 hover:bg-sky-700"
+      >
+        Analyze Contract
+      </button>
+      {errorMessage !== "" && <p className="text-base text-red-400">{errorMessage}</p>}
+      {analysisResponse && (
+        <>
+          {analysisResponse.data?.map((result: any, index: number) => {
+            return (
+              <p key={index} className="text-base my-10">
+                {result}
+              </p>
+            );
+          })}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default OpenAiAnalysis;