From 2c1e1e1488f99fb7ad3e9e6ce88ee1ca24425d2b Mon Sep 17 00:00:00 2001
From: "Christoph J. Scherr" <software@cscherr.de>
Date: Sun, 23 Mar 2025 18:12:19 +0100
Subject: [PATCH] feat: generate haiku from image

Regs: OPS-85 OPS-84
---
 senju/static/js/scan.js     |  36 ++++++-----
 senju/templates/prompt.html | 117 +++++++++++++++++++-----------------
 senju/templates/scan.html   |   4 +-
 3 files changed, 87 insertions(+), 70 deletions(-)

diff --git a/senju/static/js/scan.js b/senju/static/js/scan.js
index 8a0275a..6faff12 100644
--- a/senju/static/js/scan.js
+++ b/senju/static/js/scan.js
@@ -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();
diff --git a/senju/templates/prompt.html b/senju/templates/prompt.html
index cf1aa73..46befeb 100644
--- a/senju/templates/prompt.html
+++ b/senju/templates/prompt.html
@@ -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 %}
diff --git a/senju/templates/scan.html b/senju/templates/scan.html
index 6853afe..433b692 100644
--- a/senju/templates/scan.html
+++ b/senju/templates/scan.html
@@ -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"
       >