Fridge2Fit/static/index.html

156 lines
4.3 KiB
HTML
Raw Normal View History

2024-05-18 15:57:25 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Image</title>
</head>
<body>
<input type="file" id="imageInput" accept="image/*" required=""> <button onclick="uploadImage()">Upload Image</button>
2024-05-18 15:57:25 +02:00
<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>
2024-05-18 15:57:25 +02:00
<script>
const editableClassesDiv = document.getElementById("editable-classes");
const suggestedClassesDiv = document.getElementById("suggested-classes");
const addClassBtn = document.getElementById("add-class-btn");
2024-05-18 15:57:25 +02:00
const uploadImage = async () => {
const input = document.getElementById('imageInput');
const file = input.files[0];
const formData = new FormData();
formData.append('image', file);
try {
const response = await fetch('../upload', {
method: 'POST',
body: formData,
});
if (!response.ok) {
throw new Error('Failed to upload image');
}
const jsonResponse = await response.json();
console.log(jsonResponse);
const classes = jsonResponse.predictions;
// Remove all underscores
2024-05-18 15:57:25 +02:00
classes.forEach(str => {
str.class = str.class.replace(/_/g, ' ');
});
2024-05-18 15:57:25 +02:00
// Create input fields for classes with confidence >= 0.5
2024-05-18 15:57:25 +02:00
classes.filter((cls) => cls.confidence >= 0.5).forEach((cls) => {
addInputField(cls.class);
2024-05-18 15:57:25 +02:00
});
// Create buttons for classes with confidence < 0.5
classes.filter((cls) => cls.confidence < 0.5).forEach((cls) => {
addSuggestion(cls.class);
2024-05-18 15:57:25 +02:00
});
addSuggestion("salt and pepper");
2024-05-18 15:57:25 +02:00
// Add event listener to "Add Class" button
addClassBtn.onclick = () => {
addInputField("");
2024-05-18 15:57:25 +02:00
};
} catch ( exception) {
console.log(exception);
}
};
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);
}
2024-05-18 15:57:25 +02:00
</script>
</body>
</html>