mirror of
https://github.com/senju1337/senju.git
synced 2025-12-24 07:39:29 +00:00
feat: add box to show generated haiku from image
OPS-55
This commit is contained in:
parent
b43d03c35c
commit
4eef745764
1 changed files with 29 additions and 12 deletions
|
|
@ -75,6 +75,19 @@
|
|||
</div>
|
||||
<p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p>
|
||||
</div>
|
||||
<div id="generated-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">Red suit, vents unseen,<br>
|
||||
Sus behavior, crew unsure,<br>
|
||||
Vote him, task complete.</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>
|
||||
|
|
@ -90,7 +103,7 @@
|
|||
const yesButton = document.getElementById('yes-button');
|
||||
const noButton = document.getElementById('no-button');
|
||||
const generatingHaikuBox = document.getElementById('generating-haiku-box');
|
||||
|
||||
const generatedHaikuBox = document.getElementById('generated-haiku-box');
|
||||
let imageUploaded = false;
|
||||
|
||||
function handleFileSelect(event) {
|
||||
|
|
@ -152,18 +165,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
function handleYesClick() {
|
||||
// Hide response box
|
||||
responseBox.classList.add('opacity-0');
|
||||
function handleYesClick() {
|
||||
// Hide response box
|
||||
responseBox.classList.add('opacity-0');
|
||||
|
||||
// Show generating haiku box
|
||||
setTimeout(() => {
|
||||
responseBox.classList.add('hidden');
|
||||
generatingHaikuBox.classList.remove('hidden');
|
||||
}, 500);
|
||||
}
|
||||
// Show generating haiku box first
|
||||
setTimeout(() => {
|
||||
responseBox.classList.add('hidden');
|
||||
generatingHaikuBox.classList.remove('hidden');
|
||||
|
||||
function handleNoClick() {
|
||||
// After a delay, hide generating box and show result
|
||||
setTimeout(() => {
|
||||
generatingHaikuBox.classList.add('hidden');
|
||||
generatedHaikuBox.classList.remove('hidden');
|
||||
}, 3000); // Show loading animation for 3 seconds before revealing the haiku
|
||||
}, 500); // Wait for response box fade out
|
||||
} function handleNoClick() {
|
||||
// Reset everything
|
||||
removeImage();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue