0xalivecow/senju
1
0
Fork 0
mirror of https://github.com/senju1337/senju.git synced 2025-12-24 07:39:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add check buttons for the uploaded image before submitting them to generate a Haiku

Browse source 
Refs: OPS-55
This commit is contained in:
0xjrx 2025-03-07 17:07:46 +01:00
parent 112d96d55c
commit b43d03c35c
No known key found for this signature in database
GPG key ID: 61C53033867D0271
1 changed files with 45 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

49
senju/templates/scan.html
View file

@ -51,17 +51,32 @@
</div> </div>
<div id="response-box" class="mt-8 bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg w-full text-center opacity-0 transition-opacity duration-500 ease-in-out"> <div id="response-box" class="mt-8 bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg w-full text-center opacity-0 transition-opacity duration-500 ease-in-out">
<h2 class="text-2xl font-semibold text-violet-700">Response:</h2> <h2 class="text-2xl font-semibold text-violet-700">AI recognized the following:</h2>
<p id="ai-response" class="text-lg text-gray-700 mt-2 italic">Waiting for input...</p> <p id="ai-response" class="text-lg text-gray-700 mt-2 italic">Waiting for input...</p>
<button id="submit-button" type="submit" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300"> <div class="flex justify-center space-x-4">
Yes <button id="yes-button" type="button" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300">
Generate Haiku
</button> </button>
<button id="submit-button" type="submit" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300"> <button id="no-button" type="button" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300">
No Input new image
</button> </button>
</div> </div>
</div> </div>
<!-- New generating haiku div that appears after "Yes" is clicked -->
<div id="generating-haiku-box" class="mt-8 bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg w-full text-center hidden transition-opacity duration-500 ease-in-out">
<h2 class="text-2xl font-semibold text-violet-700">Generating Haiku</h2>
<div class="flex justify-center mt-4">
<div class="loader animate-pulse flex space-x-4">
<div class="w-3 h-3 bg-violet-600 rounded-full"></div>
<div class="w-3 h-3 bg-violet-600 rounded-full"></div>
<div class="w-3 h-3 bg-violet-600 rounded-full"></div>
</div>
</div>
<p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p>
</div>
</div>
<script> <script>
// Get all needed elements // Get all needed elements
const dropzoneFile = document.getElementById('dropzone-file'); const dropzoneFile = document.getElementById('dropzone-file');
@ -72,6 +87,9 @@
const responseBox = document.getElementById('response-box'); const responseBox = document.getElementById('response-box');
const submitButton = document.getElementById('submit-button'); const submitButton = document.getElementById('submit-button');
const errorMessage = document.getElementById('error-message'); const errorMessage = document.getElementById('error-message');
const yesButton = document.getElementById('yes-button');
const noButton = document.getElementById('no-button');
const generatingHaikuBox = document.getElementById('generating-haiku-box');
let imageUploaded = false; let imageUploaded = false;
@ -107,6 +125,7 @@
imageUploaded = false; imageUploaded = false;
responseBox.classList.add('opacity-0'); responseBox.classList.add('opacity-0');
generatingHaikuBox.classList.add('hidden');
setTimeout(() => { setTimeout(() => {
document.getElementById('ai-response').textContent = 'Waiting for input...'; document.getElementById('ai-response').textContent = 'Waiting for input...';
}, 500); }, 500);
@ -121,7 +140,7 @@
responseBox.classList.remove('opacity-0'); responseBox.classList.remove('opacity-0');
// Example response // Example response
document.getElementById('ai-response').textContent = 'Generating Haiku from image...'; document.getElementById('ai-response').textContent = 'Dominic Monaghan interviewing Elijah Wood if he will wear wigs';
} else { } else {
errorMessage.classList.remove('hidden'); errorMessage.classList.remove('hidden');
@ -133,10 +152,27 @@
} }
} }
function handleYesClick() {
// Hide response box
responseBox.classList.add('opacity-0');
// Show generating haiku box
setTimeout(() => {
responseBox.classList.add('hidden');
generatingHaikuBox.classList.remove('hidden');
}, 500);
}
function handleNoClick() {
// Reset everything
removeImage();
}
dropzoneFile.addEventListener('change', handleFileSelect); dropzoneFile.addEventListener('change', handleFileSelect);
removeImageBtn.addEventListener('click', removeImage); removeImageBtn.addEventListener('click', removeImage);
submitButton.addEventListener('click', handleSubmit); submitButton.addEventListener('click', handleSubmit);
yesButton.addEventListener('click', handleYesClick);
noButton.addEventListener('click', handleNoClick);
// Add some CSS animation // Add some CSS animation
document.head.insertAdjacentHTML('beforeend', ` document.head.insertAdjacentHTML('beforeend', `
@ -158,4 +194,3 @@
</body> </body>
</html> </html>
{% endblock %} {% endblock %}