diff --git a/app.js b/app.js
index 5053739..009c529 100644
--- a/app.js
+++ b/app.js
@@ -7,13 +7,44 @@ const port = 3000;
 
 const upload = multer({ dest: 'uploads/' });
 
+const GROQ_API_KEY = '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';
+const model = 'llama3-8b-8192';
+
 app.use(express.static("static"));
+app.use(express.json());
 
 app.get('/', (req, res) => {
-  res.sendFile(__dirname + '/static/index.html');
+	res.sendFile(__dirname + '/static/index.html');
 });
 
 
+app.post('/completions', async (req, res) => {
+  try {
+    const query = req.body.query;
+    if (!query) {
+      return res.status(400).json({ error: 'Prompt is required' });
+    }
+
+    const data = {
+      messages: [{ role: 'user', content: query }],
+      model,
+    };
+
+    const config = {
+      headers: {
+        Authorization: `Bearer ${GROQ_API_KEY}`,
+        'Content-Type': 'application/json',
+      },
+    };
+
+    const response = await axios.post('https://api.groq.com/openai/v1/chat/completions', data, config);
+    res.json(response.data);
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ error: 'Error completing prompt' });
+  }
+});
+
 app.post('/upload', upload.single('image'), async (req, res) => {
   try {
     const image = fs.readFileSync(req.file.path, { encoding: 'base64' });
diff --git a/static/index.html b/static/index.html
index 5d78ced..16511a4 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,12 +6,19 @@
 		<title>Upload Image</title>
 	</head>
 	<body>
-		<input type="file" id="imageInput" accept="image/*" required> <button onclick="uploadImage()">Upload Image</button>
+		<input type="file" id="imageInput" accept="image/*" required=""> <button onclick="uploadImage()">Upload Image</button>
 		<br><br>
 		<div id="editable-classes"></div>
 		<button id="add-class-btn">Add Class</button>
 		<div id="suggested-classes"></div>
+		<br>
+
+		<button onclick="generateIngredients()">Generate Ingredients</button>
 		<script>
+			const editableClassesDiv = document.getElementById("editable-classes");
+			const suggestedClassesDiv = document.getElementById("suggested-classes");
+			const addClassBtn = document.getElementById("add-class-btn");
+			
 			const uploadImage = async () => {
 			    const input = document.getElementById('imageInput');
 			    const file = input.files[0];
@@ -32,64 +39,31 @@
 			        console.log(jsonResponse);
 			
 					const classes = jsonResponse.predictions;
-					// classes[12] = { "class": "fishy fish", "confidence": 0.1 } 
 					
-					const editableClassesDiv = document.getElementById("editable-classes");
-					const suggestedClassesDiv = document.getElementById("suggested-classes");
-					const addClassBtn = document.getElementById("add-class-btn");
+					// Remove all underscores
 					
-					// Create input fields for classes with confidence >= 0.5
-					
-					classes.filter((cls) => cls.confidence >= 0.5).forEach((cls) => {
-						const inputField = document.createElement("input");
-						inputField.type = "text";
-						inputField.value = cls.class;
-
-						const closeButton = document.createElement("button");
-						closeButton.style.border = "none";
-						closeButton.style.background = "transparent";
-						closeButton.style.cursor = "pointer";	
-						closeButton.innerHTML = "x";
-
-						closeButton.addEventListener("click", () => {
-							editableClassesDiv.removeChild(inputField);
-							editableClassesDiv.removeChild(br);
-							editableClassesDiv.removeChild(closeButton);
-						});
-									
-						editableClassesDiv.appendChild(closeButton);
-						editableClassesDiv.appendChild(inputField);
-						const br = document.createElement("br");
-						editableClassesDiv.appendChild(br);
-
+					classes.forEach(str => {
+						str.class = str.class.replace(/_/g, ' ');
+					});
+
+					// Create input fields for classes with confidence >= 0.5
+
+					classes.filter((cls) => cls.confidence >= 0.5).forEach((cls) => {
+						addInputField(cls.class);
+			
 					});
-					
 					
 					// Create buttons for classes with confidence < 0.5
 					
 					classes.filter((cls) => cls.confidence < 0.5).forEach((cls) => {
-						const button = document.createElement("button");
-						button.textContent = cls.class;
-						button.onclick = () => {
-						
-							const inputField = document.createElement("input");
-							inputField.type = "text";
-							inputField.value = cls.class;
-							editableClassesDiv.appendChild(inputField);
-							button.remove();
-						};
-						
-						suggestedClassesDiv.appendChild(button);
-					
+						addSuggestion(cls.class);
 					});
+					addSuggestion("salt and pepper");
 					
 					
 					// Add event listener to "Add Class" button
-					
 					addClassBtn.onclick = () => {
-						const inputField = document.createElement("input");
-						inputField.type = "text";
-						editableClassesDiv.appendChild(inputField);
+						addInputField("");
 					};
 			
 				} catch ( exception) {
@@ -97,6 +71,85 @@
 				} 
 			
 			};
+			
+			function addInputField(content) {	
+				const inputField = document.createElement("input");
+				inputField.type = "text";
+				inputField.value = content;
+			
+				const closeButton = document.createElement("button");
+				closeButton.style.border = "none";
+				closeButton.style.background = "transparent";
+				closeButton.style.cursor = "pointer";	
+				closeButton.innerHTML = "x";
+			
+				closeButton.addEventListener("click", () => {
+					editableClassesDiv.removeChild(inputField);
+					editableClassesDiv.removeChild(br);
+					editableClassesDiv.removeChild(closeButton);
+				});
+									
+				editableClassesDiv.appendChild(inputField);
+				editableClassesDiv.appendChild(closeButton);
+				const br = document.createElement("br");
+				editableClassesDiv.appendChild(br);
+			} 
+
+			function addSuggestion(content) {
+				const button = document.createElement("button");
+				button.textContent = content;
+				button.onclick = () => {
+					addInputField(content);
+					button.remove();
+				};
+				suggestedClassesDiv.appendChild(button);
+			} 
+
+			async function createInference(query) {
+			  try {
+				const response = await fetch("/completions", {
+				  method: 'POST',
+				  headers: {
+					'Content-Type': 'application/json'
+				  },
+				  body: JSON.stringify({ query })
+				});
+
+				if (!response.ok) {
+				  throw new Error(`HTTP error! status: ${response.status}`);
+				}
+
+				const data = await response.json();
+				const content = data.choices[0].message.content;
+				return `<p>${content}</p>`;
+			  } catch (error) {
+				return `<p>Error: ${error.message}</p>`;
+			  }
+			}
+
+			async function generateIngredients() {
+			  // Get all input elements inside the div
+			  const inputs = editableClassesDiv.querySelectorAll("input");
+
+			  // Initialize an empty string to hold the input values
+			  let values = "";
+
+			  // Check if there are any input elements
+			  if (inputs.length === 0) {
+				return; // Exit the function silently if there are no input elements
+			  }
+
+			  // Loop through the input elements and add their values to the string
+			  inputs.forEach((input) => {
+				if (values !== "") {
+				  values += ", ";
+				}
+				values += input.value;
+			  });
+
+			  // Alert the input values
+			  alert(values);
+			}
 		</script>
 	</body>
 </html>
