add ability to fill product details based on audio input

src/controllers/index.ts

@@ -24,13 +24,9 @@ class Controller {
         throw new Error()
       }
 
-      let product = await productService.extractProductInformation(files[0])
-      if (!product) {
-        product = ''
-      }
-      res.json({ product: JSON.parse(product) })
+      const product = await productService.extractProductInformation(files[0])
+      res.json(product)
     } catch (error) {
-      console.log(JSON.stringify(error))
       next(error)
     }
   }

src/services/product/index.ts

@@ -17,7 +17,19 @@ class ProductService {
 
   extractProductInformation = async (audioFile: Express.Multer.File) => {
     const transcript = await openAiClient.whisper(audioFile)
-    const message = `Create a json object interface { name?: string price?: number description?: string image?: string | ArrayBuffer color?: string brand?: string model?: string category?: string subCategory?: string inventory?: number } of the transcript: ${transcript}`
+
+    const message = `Create a json object interface { 
+                      name?: string 
+                      price?: number 
+                      description?: string 
+                      image?: string | ArrayBuffer 
+                      color?: 
+                      string brand?: string 
+                      model?: string 
+                      category?: string 
+                      subCategory?: string 
+                      inventory?: number } for the transcript: ${transcript} only for keys provided in transcript`
+
     const response = await openAiClient.chatCompletions(message)
 
     if (!response || !response.content) {

ui/src/components/organisms/edit-product-modal/components/edit-product-image-modal/index.tsx

@@ -19,7 +19,7 @@ const EditProductImageModal: FC = () => {
     const reader = new FileReader()
 
     reader.onload = () => {
-      productService.uploadProductIMages(image).then((response) => {
+      productService.uploadProductImages(image).then((response) => {
         const product = {
           ...productToEdit,
           color: response.data.find((res) =>

ui/src/components/organisms/edit-product-modal/index.tsx

@@ -7,22 +7,31 @@ import EditProductImageModal from './components/edit-product-image-modal'
 import { Box, Button, Card, CardMedia, TextField, Tooltip, Typography } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import { Form, Formik } from 'formik'
-import { Fragment } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { AudioRecorder } from 'react-audio-voice-recorder'
 
 const EditProductModal = () => {
   const { productToEdit, closeEditProductModal, updateProduct, openProductImageEditModal } =
     useProducts()
 
+  const [_productState, setProductState] = useState<IProduct>({} as IProduct)
+
+  useEffect(() => {
+    if (productToEdit) {
+      setProductState(productToEdit)
+    }
+  }, [productToEdit])
+
   const onSubmit = (product: IProduct) => {
     updateProduct(product)
     closeEditProductModal()
   }
 
-  const addAudioElement = (blob: Blob) => {
-    const data = new FormData()
-    data.append('file', blob)
-    productService.uploadVoiceInput(data)
+  const addAudioElement = async (blob: Blob) => {
+    const formData = new FormData()
+    formData.append('file', blob)
+    const { data } = await productService.uploadVoiceInput(formData)
+    setProductState({ ...productToEdit, ...data })
   }
 
   return (
@@ -32,11 +41,11 @@ const EditProductModal = () => {
           <EditProductImageModal />
           <Box flexGrow={1}>
             <Typography mb={2} variant="h5">
-              Edit {productToEdit?.name}
+              Edit {_productState?.name}
             </Typography>
             <Grid container spacing={2}>
-              <Formik enableReinitialize={true} initialValues={productToEdit} onSubmit={onSubmit}>
-                {({ values, dirty, handleChange }) => (
+              <Formik enableReinitialize={true} initialValues={_productState} onSubmit={onSubmit}>
+                {({ values, handleChange }) => (
                   <Form>
                     <Box sx={{ mr: 3, mb: 2, ml: 2 }}>
                       <Grid container spacing={2}>
@@ -75,6 +84,7 @@ const EditProductModal = () => {
                             }}
                           >
                             <TextField
+                              InputLabelProps={{ shrink: Boolean(values.name) }}
                               fullWidth
                               color="secondary"
                               sx={{ mx: 1, mb: 2 }}
@@ -84,6 +94,9 @@ const EditProductModal = () => {
                               label="Name"
                             />
                             <TextField
+                              InputLabelProps={{
+                                shrink: Boolean(values.price !== undefined && values.price !== null)
+                              }}
                               fullWidth
                               color="secondary"
                               sx={{ mx: 1, mb: 2 }}
@@ -101,6 +114,7 @@ const EditProductModal = () => {
                     <Grid xs={12}>
                       <Box sx={{ maxWidth: 'inherit', mx: 1, mb: 1 }}>
                         <TextField
+                          InputLabelProps={{ shrink: Boolean(values.description) }}
                           color="secondary"
                           fullWidth
                           multiline
@@ -113,6 +127,7 @@ const EditProductModal = () => {
                     </Grid>
                     <Grid xs={12}>
                       <TextField
+                        InputLabelProps={{ shrink: Boolean(values.brand) }}
                         color="secondary"
                         sx={{ mx: 1, mb: 1 }}
                         name="brand"
@@ -121,6 +136,7 @@ const EditProductModal = () => {
                         value={values.brand}
                       />
                       <TextField
+                        InputLabelProps={{ shrink: Boolean(values.model) }}
                         color="secondary"
                         sx={{ mx: 1, mb: 1 }}
                         name="model"
@@ -131,6 +147,7 @@ const EditProductModal = () => {
                     </Grid>
                     <Grid xs={12}>
                       <TextField
+                        InputLabelProps={{ shrink: Boolean(values.category) }}
                         color="secondary"
                         sx={{ mx: 1, mb: 1 }}
                         name="category"
@@ -139,6 +156,7 @@ const EditProductModal = () => {
                         value={values.category}
                       />
                       <TextField
+                        InputLabelProps={{ shrink: Boolean(values.subCategory) }}
                         color="secondary"
                         sx={{ mx: 1, mb: 1 }}
                         name="subCategory"
@@ -149,6 +167,7 @@ const EditProductModal = () => {
                     </Grid>
                     <Grid xs={12}>
                       <TextField
+                        InputLabelProps={{ shrink: Boolean(values.color) }}
                         color="secondary"
                         sx={{ mx: 1, mb: 1 }}
                         name="color"
@@ -158,6 +177,7 @@ const EditProductModal = () => {
                       />
 
                       <TextField
+                        InputLabelProps={{ shrink: Boolean(values.inventory) }}
                         color="secondary"
                         sx={{ mx: 1, mb: 1 }}
                         type="number"
@@ -172,7 +192,7 @@ const EditProductModal = () => {
                       <Button onClick={closeEditProductModal} sx={{ mx: 3 }} color="secondary">
                         Cancel
                       </Button>
-                      <Button disabled={!dirty} type="submit" color="secondary" variant="contained">
+                      <Button type="submit" color="secondary" variant="contained">
                         Save
                       </Button>
                       <AudioRecorder

ui/src/providers/product-provider/index.tsx

@@ -57,7 +57,7 @@ export const ProductContextProvider: FC<IProductContextProvider> = ({ children }
     setLoading(true)
 
     productService
-      .uploadProductIMages(images)
+      .uploadProductImages(images)
       .then((response) => {
         Array.from(images).map((image) => {
           const reader = new FileReader()

ui/src/services/product/index.ts

@@ -1,13 +1,13 @@
 import { axiosClient } from 'src/clients/axios'
-import { IProductImageColor } from 'src/models/product'
+import { IProduct, IProductImageColor } from 'src/models/product'
 
 class ProductService {
-  uploadProductIMages(images: FileList) {
+  uploadProductImages = async (images: FileList) => {
     return axiosClient.post<IProductImageColor[]>('/images', images)
   }
 
-  uploadVoiceInput(audio: any) {
-    return axiosClient.post('/audio', audio)
+  uploadVoiceInput = async (audio: any) => {
+    return axiosClient.post<IProduct>('/audio', audio)
   }
 }