mirror of
https://github.com/senju1337/senju.git
synced 2025-12-24 07:39:29 +00:00
feat: generate haiku from image
Regs: OPS-85 OPS-84
This commit is contained in:
Christoph J. Scherr
parent
96e081fff1
commit
2c1e1e1488
3 changed files with 87 additions and 70 deletions
|
|
@ -11,6 +11,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 haiku_prompt = "";
|
||||
let imageUploaded = false;
|
||||
|
||||
function handleFileSelect(event) {
|
||||
|
|
@ -80,10 +81,10 @@ function handleSubmit() {
|
|||
})
|
||||
.then((data) => {
|
||||
// Extract top result and display it
|
||||
if (data.results && data.results.length > 0) {
|
||||
const topResult = data.results[0];
|
||||
if (data.description) {
|
||||
haiku_prompt = data.description;
|
||||
document.getElementById("ai-response").textContent =
|
||||
`${topResult.label} (${Math.round(topResult.confidence * 100)}% confidence)`;
|
||||
`Recognized: ${haiku_prompt}`;
|
||||
} else {
|
||||
document.getElementById("ai-response").textContent =
|
||||
"Could not identify the image";
|
||||
|
|
@ -102,23 +103,30 @@ function handleSubmit() {
|
|||
}, 600);
|
||||
}
|
||||
}
|
||||
|
||||
function handleYesClick() {
|
||||
// Hide response box
|
||||
responseBox.classList.add("opacity-0");
|
||||
|
||||
// Show generating haiku box first
|
||||
setTimeout(() => {
|
||||
responseBox.classList.add("hidden");
|
||||
generatingHaikuBox.classList.remove("hidden");
|
||||
responseBox.textContent = "🤖 AI is thinking...";
|
||||
responseBox.classList.remove("opacity-0");
|
||||
|
||||
// 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
|
||||
fetch("/api/v1/haiku", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ prompt: haiku_prompt }),
|
||||
})
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
let id = parseInt(data, 10);
|
||||
window.location.href = "/haiku/" + id;
|
||||
})
|
||||
.catch((error) => {
|
||||
responseBox.textContent = "Error: " + error.message;
|
||||
});
|
||||
}
|
||||
|
||||
function handleNoClick() {
|
||||
// Reset everything
|
||||
removeImage();
|
||||
|
|
|
|||
|
|
@ -1,35 +1,44 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex flex-col items-center justify-center min-h-screen bg-violet-900 text-white p-6">
|
||||
<div class="bg-white text-gray-900 p-8 rounded-xl shadow-lg max-w-lg w-full text-center transform transition duration-300 hover:scale-105">
|
||||
<h1 class="text-3xl font-bold text-violet-700 mb-4">Very 1337 prompt input</h1>
|
||||
<div class="flex flex-col gap-4">
|
||||
<input
|
||||
type="text"
|
||||
id="user-input"
|
||||
minlength="0"
|
||||
maxlength="100"
|
||||
placeholder="Type your prompt here..."
|
||||
class="w-full px-4 py-3 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-600"
|
||||
/>
|
||||
<button
|
||||
id="submit-btn"
|
||||
class="bg-violet-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 hover:bg-violet-700 hover:scale-105"
|
||||
>
|
||||
🚀 Submit
|
||||
</button>
|
||||
</div>
|
||||
{% extends "base.html" %} {% block content %}
|
||||
<div
|
||||
class="flex flex-col items-center justify-center min-h-screen bg-violet-900 text-white p-6"
|
||||
>
|
||||
<div
|
||||
class="bg-white text-gray-900 p-8 rounded-xl shadow-lg max-w-lg w-full text-center transform transition duration-300 hover:scale-105"
|
||||
>
|
||||
<h1 class="text-3xl font-bold text-violet-700 mb-4">
|
||||
Very 1337 prompt input
|
||||
</h1>
|
||||
<div class="flex flex-col gap-4">
|
||||
<input
|
||||
type="text"
|
||||
id="user-input"
|
||||
minlength="0"
|
||||
maxlength="100"
|
||||
placeholder="Type your prompt here..."
|
||||
class="w-full px-4 py-3 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-600"
|
||||
/>
|
||||
<button
|
||||
id="submit-btn"
|
||||
class="bg-violet-600 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 hover:bg-violet-700 hover:scale-105"
|
||||
>
|
||||
🚀 Submit
|
||||
</button>
|
||||
</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">
|
||||
<h2 class="text-2xl font-semibold text-violet-700">Response:</h2>
|
||||
<p id="ai-response" class="text-lg text-gray-700 mt-2 italic">Waiting for input...</p>
|
||||
</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"
|
||||
>
|
||||
<h2 class="text-2xl font-semibold text-violet-700">Response:</h2>
|
||||
<p id="ai-response" class="text-lg text-gray-700 mt-2 italic">
|
||||
Waiting for input...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("submit-btn").addEventListener("click", function() {
|
||||
document.getElementById("submit-btn").addEventListener("click", function () {
|
||||
let userInput = document.getElementById("user-input").value;
|
||||
let responseBox = document.getElementById("response-box");
|
||||
let responseText = document.getElementById("ai-response");
|
||||
|
|
@ -38,37 +47,37 @@ document.getElementById("submit-btn").addEventListener("click", function() {
|
|||
responseBox.classList.add("opacity-0");
|
||||
|
||||
if (userInput.trim() === "") {
|
||||
responseText.textContent = "Please enter a prompt!";
|
||||
}
|
||||
else if (userInput.trim() === "amogus") {
|
||||
responseText.textContent = "🤖 AI is thinking...";
|
||||
responseBox.classList.remove("opacity-0");
|
||||
responseText.textContent = "Please enter a prompt!";
|
||||
} else if (userInput.length > 100) {
|
||||
responseText.textContent = "Input must under 100 characters long!";
|
||||
} else if (userInput.trim() === "amogus") {
|
||||
responseText.textContent = "🤖 AI is thinking...";
|
||||
responseBox.classList.remove("opacity-0");
|
||||
|
||||
// Simulated AI response delay
|
||||
setTimeout(() => {
|
||||
responseText.textContent = "Sus imposter ඞ";
|
||||
}, 1500);
|
||||
}
|
||||
else {
|
||||
responseText.textContent = "🤖 AI is thinking...";
|
||||
responseBox.classList.remove("opacity-0");
|
||||
// Simulated AI response delay
|
||||
setTimeout(() => {
|
||||
responseText.textContent = "Sus imposter ඞ";
|
||||
}, 1500);
|
||||
} else {
|
||||
responseText.textContent = "🤖 AI is thinking...";
|
||||
responseBox.classList.remove("opacity-0");
|
||||
|
||||
fetch('/api/v1/haiku', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ 'prompt': userInput })
|
||||
fetch("/api/v1/haiku", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ prompt: userInput }),
|
||||
})
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
let id = parseInt(data, 10);
|
||||
window.location.href = "/haiku/" + id;
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
let id = parseInt(data, 10);
|
||||
window.location.href = "/haiku/" + id;
|
||||
})
|
||||
.catch(error => {
|
||||
responseText.textContent = 'Error: ' + error.message;
|
||||
.catch((error) => {
|
||||
responseText.textContent = "Error: " + error.message;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -97,14 +97,14 @@
|
|||
</p>
|
||||
<div class="flex justify-center space-x-4">
|
||||
<button
|
||||
id="yes-button"
|
||||
id="yesButton"
|
||||
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
|
||||
id="no-button"
|
||||
id="noButton"
|
||||
type="button"
|
||||
class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue