omr/Fridge2Fit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

completed endpoint for /completion using llama3-8b-8192 and finished ingredient parser

Browse Source
This commit is contained in:
Om Raheja 2024-05-18 13:41:54 -04:00
parent 607bc8002e
commit 3ac5abab1b
2 changed files with 132 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app.js
View File

@ -7,13 +7,44 @@ const port = 3000;
const upload = multer({ dest: 'uploads/' }); 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.static("static"));
app.use(express.json());
app.get('/', (req, res) => { 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) => { app.post('/upload', upload.single('image'), async (req, res) => {
try { try {
const image = fs.readFileSync(req.file.path, { encoding: 'base64' }); const image = fs.readFileSync(req.file.path, { encoding: 'base64' });

139
static/index.html
View File

@ -6,12 +6,19 @@
<title>Upload Image</title> <title>Upload Image</title>
</head> </head>
<body> <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> <br><br>
<div id="editable-classes"></div> <div id="editable-classes"></div>
<button id="add-class-btn">Add Class</button> <button id="add-class-btn">Add Class</button>
<div id="suggested-classes"></div> <div id="suggested-classes"></div>
<br>
<button onclick="generateIngredients()">Generate Ingredients</button>
<script> <script>
const editableClassesDiv = document.getElementById("editable-classes");
const suggestedClassesDiv = document.getElementById("suggested-classes");
const addClassBtn = document.getElementById("add-class-btn");
const uploadImage = async () => { const uploadImage = async () => {
const input = document.getElementById('imageInput'); const input = document.getElementById('imageInput');
const file = input.files[0]; const file = input.files[0];
@ -32,64 +39,31 @@
console.log(jsonResponse); console.log(jsonResponse);
const classes = jsonResponse.predictions; const classes = jsonResponse.predictions;
// classes[12] = { "class": "fishy fish", "confidence": 0.1 }
const editableClassesDiv = document.getElementById("editable-classes"); // Remove all underscores
const suggestedClassesDiv = document.getElementById("suggested-classes");
const addClassBtn = document.getElementById("add-class-btn"); classes.forEach(str => {
str.class = str.class.replace(/_/g, ' ');
});
// Create input fields for classes with confidence >= 0.5 // Create input fields for classes with confidence >= 0.5
classes.filter((cls) => cls.confidence >= 0.5).forEach((cls) => { classes.filter((cls) => cls.confidence >= 0.5).forEach((cls) => {
const inputField = document.createElement("input"); addInputField(cls.class);
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);
}); });
// Create buttons for classes with confidence < 0.5 // Create buttons for classes with confidence < 0.5
classes.filter((cls) => cls.confidence < 0.5).forEach((cls) => { classes.filter((cls) => cls.confidence < 0.5).forEach((cls) => {
const button = document.createElement("button"); addSuggestion(cls.class);
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("salt and pepper");
// Add event listener to "Add Class" button // Add event listener to "Add Class" button
addClassBtn.onclick = () => { addClassBtn.onclick = () => {
const inputField = document.createElement("input"); addInputField("");
inputField.type = "text";
editableClassesDiv.appendChild(inputField);
}; };
} catch ( exception) { } 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> </script>
</body> </body>
</html> </html>