UI Enhancements

content_distillery/static/content_distillery.html

@@ -49,6 +49,14 @@
       🤖 Generate Summary
     </button>
 
+    <div id="spinner" class="flex items-center justify-center mt-2 hidden">
+      <svg class="animate-spin h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
+      </svg>
+      <span class="ml-2 text-blue-600 font-medium">Generating summary...</span>
+    </div>
+
     <!-- Output Text -->
     <label class="block font-semibold text-gray-700 mt-4">Summary:</label>
     <textarea id="outputText" rows="5" class="w-full p-3 border rounded bg-gray-50" readonly placeholder="Summary will appear here..."></textarea>
@@ -62,15 +70,33 @@
 
   <!-- Help Modal -->
   <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
-    <div class="bg-white rounded-lg p-6 max-w-sm w-full shadow-lg text-left">
-      <h2 class="text-xl font-semibold mb-4">About Content Distillery</h2>
+    <div class="bg-white rounded-lg p-6 max-w-2xl w-full shadow-lg text-left overflow-y-auto max-h-[80vh]">
+      <h2 class="text-2xl font-bold mb-4 text-gray-900">Discussion Content Summarizer</h2>
+      <p class="text-gray-700 mb-6">
+        This tool automatically extracts content from online discussion platforms and generates concise, 
+        high-quality summaries using advanced AI techniques.
+      </p>
+
+      <h3 class="text-xl font-semibold mb-3 text-gray-800">How it works</h3>
+      <ol class="list-decimal list-inside text-gray-700 mb-6 space-y-2">
+        <li><span class="font-semibold">Select a source</span> — Choose from supported discussion websites</li>
+        <li><span class="font-semibold">Review and edit</span> — Optionally modify the extracted text before processing</li>
+        <li><span class="font-semibold">Generate summary</span> — Click "Generate" to create an AI‑powered summary</li>
+      </ol>
+
+      <h3 class="text-xl font-semibold mb-3 text-gray-800">Technical foundation</h3>
       <p class="text-gray-700 mb-4">
-        This tool fetches content from various online sources and distills it into concise summaries using an a PPO model.
-        Choose a source, optionally edit the text, and press "Generate" to see a summary.
-        The AI reward and PPO models were from Qwen/Qwen3-0.6B-Base, used openai/summarize_from_feedback dataset and trained according to OpenAI paper "Learning to summarize from human feedback".
+        The summarization is powered by a <span class="font-semibold">Proximal Policy Optimization (PPO)</span> model built on 
+        the <span class="font-semibold">Qwen3‑0.6B‑Base</span> architecture. The system incorporates both reward modeling and policy optimization,
+        trained using the <code class="bg-gray-100 px-1 py-0.5 rounded">openai/summarize_from_feedback</code> dataset following methodologies 
+        outlined in OpenAI’s <em>"Learning to summarize from human feedback"</em> research paper.
       </p>
+      <p class="text-gray-700 mb-6">
+        This approach ensures summaries that align with human preferences for clarity, accuracy, and relevance.
+      </p>
+
       <button id="closeModal"
-        class="mt-2 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+        class="mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
         Close
       </button>
     </div>
@@ -101,11 +127,13 @@
 
     document.getElementById('generateBtn').addEventListener('click', async function () {
       const btn = document.getElementById('generateBtn');
+      const spinner = document.getElementById('spinner');
       const post = document.getElementById('inputText').value;
 
       btn.disabled = true;
       btn.textContent = "🤖 Generating...";
       btn.classList.add("opacity-50");
+      spinner.classList.remove('hidden');  // show spinner
 
       try {
         const res = await fetch('/contentdistillery', {
@@ -116,9 +144,10 @@
         const summary = await res.text();
         document.getElementById('outputText').value = summary;
       } catch (e) {
-        document.getElementById('outputText').value = "Error generating summary.";
+        document.getElementById('outputText').value = "⚠️ Error generating summary.";
       }
 
+      spinner.classList.add('hidden');     // hide spinner
       btn.disabled = false;
       btn.textContent = "🤖 Generate Summary";
       btn.classList.remove("opacity-50");

prep/hf_save_cbow.py

@@ -0,0 +1,17 @@
+from huggingface_hub import upload_file
+
+# Upload cbow_model.kv
+upload_file(
+    path_or_fileobj="./models/cbow_model.kv",
+    path_in_repo="cbow_model.kv",
+    repo_id="ClemSummer/cbow-model-cache",
+    repo_type="dataset"
+)
+
+# Upload cbow_model.kv.vectors.npy
+upload_file(
+    path_or_fileobj="./models/cbow_model.kv.vectors.npy",
+    path_in_repo="cbow_model.kv.vectors.npy",
+    repo_id="ClemSummer/cbow-model-cache",
+    repo_type="dataset"
+)

prep/hf_save_qwen.py

@@ -0,0 +1,8 @@
+from transformers import AutoTokenizer, AutoModelForCausalLM
+
+MODEL_NAME = "Qwen/Qwen3-0.6B-Base"
+tok = AutoTokenizer.from_pretrained(MODEL_NAME)
+tok.save_pretrained("./qwen_model")
+
+model = AutoModelForCausalLM.from_pretrained(MODEL_NAME)
+model.save_pretrained("./qwen_model")

prep/hf_save_qwen_hf_api.py

@@ -0,0 +1,7 @@
+from huggingface_hub import upload_folder
+
+upload_folder(
+    repo_id="ClemSummer/qwen-model-cache",
+    repo_type="dataset",
+    folder_path="./qwen_model"
+)

templates/cbow.html

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <script src="https://cdn.tailwindcss.com"></script>
     <title>CBOW Vector Calculator</title>
     <style>
         body {
@@ -97,6 +98,20 @@
             background-color: rgba(0,0,0,0.4);
         }
 
+        .use-suggestion {
+            margin-left: 8px;
+            padding: 2px 6px;
+            font-size: 0.8rem;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .use-suggestion:hover {
+            background-color: #0056b3;
+        }
+        
         .modal-content {
             background-color: #fff;
             margin: 10% auto;
@@ -175,18 +190,7 @@
             <span class="close" onclick="closeModal('suggestionsModal')">&times;</span>
             <h3>Suggestions</h3>
             <p>What's your guess, before calculating it?</p>
-            <ul>
-              <li><code>mother - woman + man</code></li>
-              <li><code>iphone - phone + tablet</code></li>
-              <li><code>hotdog - sausage + beef</code></li>
-              <li><code>brisbane - city + capital</code></li>
-              <li><code>uk - monarchy</code></li>
-              <li><code>kfc - chicken + pork</code></li>
-              <li><code>skoda - czech + germany</code></li>
-              <li><code>starwars - darthvader + sauron</code></li>
-              <li><code>callofduty - gun + knife</code></li>
-            </ul>
-
+            <ul id="suggestions-list"></ul>
             <p><strong>Tips:</strong></p>
             <ul>
             <li>Use <code>-</code> and <code>+</code> operators, with a space before and after each operator.</li>
@@ -266,6 +270,37 @@
             }
         });
     </script>
+    <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const textarea = document.querySelector("textarea[name='expression']");
+        const modal = document.getElementById("suggestionsModal");
+        const suggestions = [
+            "mother - woman + man",
+            "iphone - phone + tablet",
+            "hotdog - sausage + beef",
+            "brisbane - city + capital",
+            "uk - monarchy",
+            "kfc - chicken + pork",
+            "skoda - czech + germany",
+            "starwars - darthvader + sauron",
+            "callofduty - gun + knife"
+        ];
 
+        const list = document.getElementById("suggestions-list");
+
+        // Build the list dynamically
+        suggestions.forEach(suggestion => {
+            const li = document.createElement("li");
+            li.innerHTML = `<code>${suggestion}</code> 
+                <button type="button" class="use-suggestion">Use</button>`;
+            li.querySelector("button").addEventListener("click", function () {
+                textarea.value = suggestion;  // fill textarea
+                textarea.focus();             // optional
+                modal.style.display = "none"; // auto close modal
+            });
+            list.appendChild(li);
+        });
+    });
+    </script>
 </body>
 </html>

vit_captioning/static/captioning/index.html

@@ -38,10 +38,11 @@
       </div>
 
       <button 
+        id="generateButton"
         type="submit"
         class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition"
       >
-        Generate Captions (can repeat)
+        Generate Captions
       </button>
     </form>
 
@@ -55,41 +56,47 @@
   </div>
 
   <script>
-    const fileInput = document.getElementById('fileInput');
-    const previewContainer = document.getElementById('previewContainer');
-    const previewImage = document.getElementById('previewImage');
-    const form = document.getElementById('uploadForm');
-    const result = document.getElementById('result');
-
-    // ✅ Live preview + clear old captions
-    fileInput.addEventListener('change', () => {
-      const file = fileInput.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = e => {
-          previewImage.src = e.target.result;
-          previewContainer.classList.remove('hidden');
-        };
-        reader.readAsDataURL(file);
-
-        // Clear old captions
-        document.getElementById('greedy').innerText = "";
-        document.getElementById('topk').innerText = "";
-        document.getElementById('topp').innerText = "";
-        result.classList.add('hidden');
-
-      } else {
-        previewContainer.classList.add('hidden');
-      }
-    });
-
-    // ✅ Submit form
-    form.addEventListener('submit', async e => {
-      e.preventDefault();
-      const file = fileInput.files[0];
-      const formData = new FormData();
-      formData.append('file', file);
+  const fileInput = document.getElementById('fileInput');
+  const previewContainer = document.getElementById('previewContainer');
+  const previewImage = document.getElementById('previewImage');
+  const form = document.getElementById('uploadForm');
+  const result = document.getElementById('result');
+  const generateButton = document.getElementById('generateButton');
+
+  // ✅ Live preview + clear old captions
+  fileInput.addEventListener('change', () => {
+    const file = fileInput.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = e => {
+        previewImage.src = e.target.result;
+        previewContainer.classList.remove('hidden');
+      };
+      reader.readAsDataURL(file);
+
+      // Clear old captions
+      document.getElementById('greedy').innerText = "";
+      document.getElementById('topk').innerText = "";
+      document.getElementById('topp').innerText = "";
+      result.classList.add('hidden');
+    } else {
+      previewContainer.classList.add('hidden');
+    }
+  });
+
+  // ✅ Submit form
+  form.addEventListener('submit', async e => {
+    e.preventDefault();
+
+    // Disable button while generating
+    generateButton.disabled = true;
+    generateButton.innerText = "Generating...";
 
+    const file = fileInput.files[0];
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
       const res = await fetch('/generate', {
         method: 'POST',
         body: formData
@@ -100,8 +107,15 @@
       document.getElementById('topk').innerText = data.topk || "N/A";
       document.getElementById('topp').innerText = data.topp || "N/A";
       result.classList.remove('hidden');
-    });
-  </script>
+    } catch (error) {
+      alert("⚠️ Error generating captions. Please try again.");
+    } finally {
+      // Re-enable button with new text
+      generateButton.disabled = false;
+      generateButton.innerText = "Generate Captions (can repeat)";
+    }
+  });
+</script>
 
 <!-- Floating Help Button -->
 <button id="helpButton"