readme developed, frontend and css style changes

README.md

@@ -7,3 +7,17 @@ App allows transcript to be loaded with insights returned from the API.
 
 ## How to run the project
 
+1. Clone the repo
+
+### Frontend
+
+` cd frontend && npm install && npm start `
+
+Afterwards, open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+### Backend
+
+` cd backend/app && python main.py `
+
+Afterwards, open [http://localhost:8000](http://localhost:8000) to view it in the browser.
+

backend/app/api/routes.py

@@ -47,7 +47,7 @@ def root():
     """
 
 
-@router.post("/analyze/")
+@router.post("/analyze")
 async def analyze_document(file: UploadFile) -> dict:
     filename = file.filename
 
@@ -84,7 +84,7 @@ async def analyze_document(file: UploadFile) -> dict:
                 insights.append(insight)
 
             summary = final_product_prompt_template.format_messages(text=insights)
-            chat = ChatOpenAI(temperature=0.0, model="gpt-3.5-turbo-16k")
+            chat = ChatOpenAI(temperature=0.0, model="gpt-4")
             # run blocking operations in a thread pool
             final_insights = await loop.run_in_executor(executor, chat, summary)
 

frontend/src/App.css

@@ -16,10 +16,10 @@
 .App-header {
   background-color: #282c34;
   display: flex;
-  padding-top: 5px;
+  padding-top: 0;
   flex-direction: column;
   align-items: center;
-  justify-content: top;
+  justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: white;
   flex-direction: column;
@@ -40,6 +40,7 @@
 
 .file-upload {
   display: flex;
+  margin-bottom: 500px; /* adjust as needed */
   flex-direction: column;
   align-items: center;
   justify-content: center;

frontend/src/App.js

@@ -13,12 +13,12 @@ function App() {
             alt='logo'
           />
           <a
-          className='App-link'
-          href='https://reactjs.org'
-          target='_blank'
-          rel='noopener noreferrer'>
-          Source Code
-        </a>
+            className='App-link'
+            href='https://github.com/Luca-Blight/zelta-challenge'
+            target='_blank'
+            rel='noopener noreferrer'>
+            Source Code
+          </a>
         </div>
       </header>
       <div className='App-body'>

frontend/src/FileUpload.js

@@ -4,19 +4,21 @@ import axios from 'axios';
 
 const FileUpload = () => {
   const [file, setFile] = useState(null);
+  const [responseData, setResponseData] = useState({});
 
   const submitFile = async (event) => {
     event.preventDefault();
     const formData = new FormData();
     formData.append('file', file);
 
     try {
-      const res = await axios.post('http://localhost:8000/analyze/', formData, {
+      const res = await axios.post('http://localhost:8000/analyze', formData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },
       });
-      console.log(res.data); 
+      console.log(res.data.content);
+      setResponseData(res.data.content);
     } catch (error) {
       console.error(error);
     }
@@ -27,15 +29,39 @@ const FileUpload = () => {
   };
 
   return (
-    <form
-      onSubmit={submitFile}
-      className='file-upload'>
-      <input
-        type='file'
-        onChange={handleFileUpload}
-      />
-      <button type='submit'>Submit</button>
-    </form>
+    <div>
+      <form
+        onSubmit={submitFile}
+        className='file-upload'>
+        <label
+          htmlFor='file-upload'
+          style={{
+            fontFamily: 'Fantasy',
+            color: 'white',
+            fontSize: '50px',
+            textAlign: 'center',
+          }}>
+          Upload Transcription for Product Analysis
+        </label>
+        <input
+          type='file'
+          onChange={handleFileUpload}
+        />
+        <button type='submit'>Submit</button>
+      </form>
+      <div>
+        {responseData.delivery_days ? 
+          <p>Delivery Days: {responseData.delivery_days}</p> : null}
+        {responseData.price_value ?
+          <p>Price Value: {responseData.price_value}</p> : null}
+        {responseData.customer_negative_feedback ? 
+          <p>Customer Negative Feedback: {responseData.customer_negative_feedback}</p> : null}
+        {responseData.feature_requests ? 
+          <p>Feature Requests: {responseData.feature_requests}</p> : null}
+        {responseData.competitor_mentions ? 
+          <p>Competitor Mentions: {responseData.competitor_mentions}</p> : null}
+      </div>
+    </div>
   );
 };