File size: 10,784 Bytes
baf039a d32d550 baf039a |
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 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 |
var chartData;
function generateUniqueId() {
return 'chart-' + Date.now(); // Utilisez un timestamp comme identifiant unique
}
function submitForm() {
event.preventDefault(); // Prevent the default form submission
var form = document.getElementById('sentenceForm');
var textarea = document.getElementById("ocr-result");
// Check if the textarea is empty
if (textarea.value.trim() === "") {
textarea.setCustomValidity("Input is required."); // Set custom validation message
textarea.reportValidity(); // Display the validation message
return; // Do not proceed with form submission
} else {
textarea.setCustomValidity(""); // Clear any previous validation message
}
$
var formData = new FormData(form);
// Hide the presentation div
var presentationDiv = document.getElementById('presentation');
presentationDiv.classList.add('d-none');
// Send a POST request to the Flask route with the form data
fetch('/sentence_fr', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
// Reset the textarea height to its initial value
var textarea = document.getElementById("ocr-result");
textarea.style.height = "50px";
// Add the new user message to the chat conversation
var userMessageElement = createUserMessageElement(formData.get('text'));
var chatConversation = document.querySelector('.chat-conversation-content .os-content');
chatConversation.appendChild(userMessageElement);
// Create a new message element for Flask response
var flaskResponseElement = createFlaskResponseElement(data);
// Append the Flask response as a left message to the chat conversation
chatConversation.appendChild(flaskResponseElement);
var canvasElement = document.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
chartData = canvasElement.getAttribute('data-chart');
var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
var labels = JSON.parse(chartData).labels.slice(0, 5);
// Scroll to the bottom of the chat conversation
addAutoResize();
scrollDown();
// Clear the textarea after submitting
form.reset();
// Create a new canvas element for the new chart
var canvasId = generateUniqueId();
var canvasHTML = document.getElementById('bestSellers#');
canvasHTML.id = generateUniqueId();
canvasId = canvasHTML.id;
// Update the new chart with data
updateChart(canvasId);
})
.catch(error => console.error('Error:', error));
}
function updateChart(canvasId) {
var canvas = document.getElementById(canvasId);
var chartData = JSON.parse(canvas.dataset.chart);
var data = chartData.datasets[0].data.slice(0, 5).map(function(element) {
return parseFloat(element).toFixed(2);
});
var backgroundColor = chartData.datasets[0].backgroundColor.slice(0,5);
var borderColor = chartData.datasets[0].borderColor.slice(0,5);
var labels = chartData.labels.slice(0,5);
var Data = {
datasets: [{
data: data,
backgroundColor:
backgroundColor
,
borderColor: backgroundColor,
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: labels
};
var pieChart = new Chart(canvas, {
type: 'doughnut',
data: Data,
options: {
responsive: true, // Rendre le graphique responsive
cutoutPercentage: 80, // Définir le pourcentage de découpe
legend: {
display: false, // Masquer la légende
},
animation: {
animateScale: true,
animateRotate: true
},
plugins: {
datalabels: {
display: false,
align: 'center',
anchor: 'center'
}
}
}
});
}
function handleEnter(event) {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault(); // Prevent default behavior (line break)
submitForm(); // Submit the form asynchronously
}
}
document.getElementById('sentenceForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the form from submitting normally
var form = event.target;
var formData = new FormData(form);
// Hide the presentation div
var presentationDiv = document.getElementById('presentation');
presentationDiv.classList.add('d-none');
// Send a POST request to the Flask route with the form data
fetch('/sentence_fr', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
// Reset the textarea height to its initial value
var textarea = document.getElementById("ocr-result");
textarea.style.height = "50px";
// Add the new user message to the chat conversation
var userMessageElement = createUserMessageElement(formData.get('text'));
var chatConversation = document.querySelector('.chat-conversation-content .os-content');
chatConversation.appendChild(userMessageElement);
// Create a new message element for Flask response
var flaskResponseElement = createFlaskResponseElement(data);
// Append the Flask response as a left message to the chat conversation
chatConversation.appendChild(flaskResponseElement);
var canvasElement = document.querySelector('.bestSellers'); // Sélectionnez le premier élément avec la classe 'bestSellers'
chartData = canvasElement.getAttribute('data-chart');
var data = JSON.parse(chartData).datasets[0].data.slice(0, 5);
var backgroundColor = JSON.parse(chartData).datasets[0].backgroundColor.slice(0, 5);
var borderColor = JSON.parse(chartData).datasets[0].borderColor.slice(0, 5);
var labels = JSON.parse(chartData).labels.slice(0, 5);
addAutoResize();
scrollDown();
// Clear the textarea after submitting
form.reset();
// Create a new canvas element for the new chart
var canvasId = generateUniqueId();
var canvasHTML = document.getElementById('bestSellers#');
canvasHTML.id = generateUniqueId();
canvasId = canvasHTML.id;
// Update the new chart with data
updateChart(canvasId);
})
.catch(error => console.error('Error:', error));
});
// Function to create a message element for user's message
function createUserMessageElement(message) {
var userMessageElement = document.createElement('div');
userMessageElement.classList.add('d-flex', 'justify-content-end', 'text-end', 'mb-1');
var userMessageSubElement = document.createElement('div');
userMessageSubElement.classList.add('w-100');
var userMessageContainer = document.createElement('div');
userMessageContainer.classList.add('d-flex', 'flex-column', 'align-items-end');
// Add message content
var userMessageContent = document.createElement('div');
userMessageContent.classList.add('bg-chat', 'text-white', 'p-2', 'px-3', 'rounded-2', 'mw-80');
var userMessageText = document.createTextNode(message);
userMessageContent.appendChild(userMessageText);
userMessageContainer.appendChild(userMessageContent);
userMessageSubElement.appendChild(userMessageContainer);
userMessageElement.appendChild(userMessageSubElement);
return userMessageElement;
}
// Function to create a message element for Flask response
function createFlaskResponseElement(response) {
var flaskResponseElement = document.createElement('div');
flaskResponseElement.classList.add('d-flex', 'mb-1');
var flaskAvatarElement = document.createElement('div');
flaskAvatarElement.classList.add('flex-shrink-0', 'avatar', 'avatar-xs', 'me-2');
var flaskAvatarImg = document.createElement('img');
flaskAvatarImg.classList.add('avatar-img', 'rounded-circle');
flaskAvatarImg.setAttribute('src', '../static/icons/logo_header_128x128.png');
flaskAvatarElement.appendChild(flaskAvatarImg);
var flaskMessageContent = document.createElement('div');
flaskMessageContent.classList.add('flex-grow-1');
flaskMessageContent.innerHTML = response;
flaskResponseElement.appendChild(flaskAvatarElement);
flaskResponseElement.appendChild(flaskMessageContent);
return flaskResponseElement;
}
// Function to reload the dashboard.js file with chartData
function reloadDashboardScript(data, backgroundColor, borderColor, labels) {
// Create a new script element
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.onload = function () {
initializeChart(data, backgroundColor, borderColor, labels);
};
// Add chartData to the script source as a query parameter
scriptElement.src = `../static/js/dashboard_sentence.js?data=${data}&backgroundColor=${backgroundColor}&borderColor=${borderColor}&labels=${labels}`;
// Append the script element to the body
document.body.appendChild(scriptElement);
}
// START: 12 Auto resize textarea
function addAutoResize() {
document.querySelectorAll('[data-autoresize]').forEach(function (element) {
element.style.boxSizing = 'border-box';
var offset = element.offsetHeight - element.clientHeight;
element.addEventListener('input', function (event) {
event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight + offset + 'px';
});
element.removeAttribute('data-autoresize');
});
}
// SCROLLDOWN
function scrollDown() {
var objDiv = document.getElementsByClassName("os-viewport os-viewport-native-scrollbars-invisible");
var index = 0;
while (index < objDiv.length) {
objDiv[index].scrollTop = objDiv[index].scrollHeight;
index++;
}
}
// RESIZE TEXTAREA
function resizeTextarea(textarea) {
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
}
|