- project-directory/
- index.html
- script.js
AI Image Detector Converter Tool
AI Image Detector Converter Tool
![Preview Image]()
// Replace 'YOUR_API_KEY' with your Clarifai API key
const API_KEY = 'YOUR_API_KEY';
const imageInput = document.getElementById('imageInput');
const detectButton = document.getElementById('detectButton');
const result = document.getElementById('result');
const previewImage = document.getElementById('previewImage');
imageInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
previewImage.src = e.target.result;
previewImage.style.display = 'block';
};
reader.readAsDataURL(file);
}
});
detectButton.addEventListener('click', () => {
const file = imageInput.files[0];
if (!file) {
alert('Please select an image.');
return;
}
const formData = new FormData();
formData.append('image', file);
// Send the image to Clarifai for object detection
fetch('https://api.clarifai.com/v2/models/aaa03c23b3724a16a56b629203edc62c/outputs', {
method: 'POST',
headers: {
'Authorization': `Key ${API_KEY}`,
},
body: formData,
})
.then(response => response.json())
.then(data => {
const concepts = data.outputs[0].data.concepts;
let outputHTML = '
Detected Objects:
';
concepts.forEach(concept => {
outputHTML += `- ${concept.name} (${(concept.value * 100).toFixed(2)}%)
`;
});
outputHTML += '
';
result.innerHTML = outputHTML;
})
.catch(error => {
console.error('Error:', error);
});
});