-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfrontend.html
133 lines (106 loc) · 4.01 KB
/
frontend.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Album Cover Genre Prediction</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
</style>
</head>
<body>
<h1>Album Cover Genre Prediction</h1>
<input type="file" id="uploadInput" accept="image/*">
<button onclick="predict()">Predict</button>
<div id="output"></div>
<!-- TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" crossorigin="anonymous"></script>
<script>
// Resize and preprocess the image
// function preprocessImage(imageElement) {
// const imageTensor = tf.image.rgbToGrayscale(tf.browser.fromPixels(imageElement))
// .resizeBilinear([128, 128]) // Resize to the input size expected by your model
// .toFloat()
// .div(tf.scalar(255.0))
// .expandDims();
// return imageTensor;
// }
function preprocessImage(imageElement) {
const imageTensor = tf.browser.fromPixels(imageElement)
.resizeBilinear([128, 128]) // Resize to the input size expected by your model
.toFloat()
.div(tf.scalar(255.0))
.expandDims();
return imageTensor;
}
function capitalizeFirstLetter(string) {
return string.replace(/\b\w/g, (match) => match.toUpperCase());
}
// Load the pre-trained model
async function loadModel() {
const model = await tf.loadLayersModel('./color_model/model.json');
return model;
}
async function loadAlbumLabelMap() {
const response = await fetch('./album_label_map.csv');
const csvData = await response.text();
const lines = csvData.split('\n').map(line => line.split(','));
console.log(lines)
const album_label_map = {};
for (let i = 1; i < lines.length; i++) {
const [label_name, label] = lines[i];
album_label_map[label] = label_name;
}
return album_label_map;
}
// Make a prediction
async function predict() {
const fileInput = document.getElementById('uploadInput');
const outputDiv = document.getElementById('output');
const album_label_map = await loadAlbumLabelMap();
const file = fileInput.files[0];
if (!file) {
alert('Please select an image file.');
return;
}
const image = new Image();
image.src = URL.createObjectURL(file);
image.onload = async function () {
try {
// Preprocess the image
console.log('Preprocessing the image...');
const inputTensor = preprocessImage(image);
console.log('Image preprocessed.');
// Display the image
const originalImage = image.cloneNode(); // Create a clone to avoid modifying the original image
originalImage.width = 128;
originalImage.height = 128;
document.body.appendChild(originalImage);
// Load the pre-trained model
console.log('Loading the model...');
const model = await loadModel();
console.log('Model loaded successfully.');
// Make a prediction
console.log('Making a prediction...');
const predictions = tf.tidy(() => model.predict(inputTensor));
// Get the predicted label (index with the highest probability)
const predictedLabelIndex = predictions.argMax(1).dataSync()[0].toString(); // Convert to string
// Map the numeric label to human-readable label name
const predictedLabel = capitalizeFirstLetter(album_label_map[predictedLabelIndex]);
console.log('Prediction made successfully.');
// Display the predicted genre
outputDiv.innerHTML = `Predicted Genre: ${predictedLabel}`;
} catch (error) {
console.error('Error during prediction:', error);
} finally {
// Dispose of the tensors to free up memory
tf.dispose([inputTensor, predictions]);
}
};
}
</script>
</body>
</html>