completed endpoint for /completion using llama3-8b-8192 and finished ingredient parser
This commit is contained in:
parent
607bc8002e
commit
3ac5abab1b
33
app.js
33
app.js
|
|
@ -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' });
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue