Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <title>🧙♂️ Word Alchemy</title> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex flex-col items-center p-6"> | |
| <!-- Back Button --> | |
| <a href="/" class="absolute top-4 left-4 text-blue-600 hover:text-blue-800 text-sm font-semibold flex items-center"> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path> | |
| </svg> | |
| Back to Home | |
| </a> | |
| <!-- Main Container --> | |
| <div class="bg-white shadow-md rounded-lg p-6 w-full max-w-lg mt-12"> | |
| <h2 class="text-2xl font-bold text-center text-gray-800">CBOW Vector Calculator</h2> | |
| <!-- Form --> | |
| <form method="post" action="/cbow" class="mt-6 space-y-4"> | |
| <label for="expression" class="block text-gray-700 font-medium"> | |
| Enter a word vector expression | |
| <span class="text-sm text-gray-500">(e.g. <code>king - man + woman</code>)</span> | |
| </label> | |
| <textarea | |
| name="expression" | |
| rows="4" | |
| class="w-full border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| >{{ expression or "" }}</textarea> | |
| <button | |
| type="submit" | |
| class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition" | |
| > | |
| Calculate | |
| </button> | |
| </form> | |
| <!-- Results --> | |
| {% if results %} | |
| <div class="mt-6 bg-gray-50 p-4 rounded-lg shadow-inner"> | |
| {% if results and results|length > 0 %} | |
| <p class="mb-3 text-gray-800"><strong>{{ expression }}</strong> ≈ <strong>{{ results[0][0] }}</strong></p> | |
| {% endif %} | |
| <h3 class="font-semibold text-gray-700 mb-2">Results:</h3> | |
| <table class="w-full text-left border-collapse"> | |
| <thead> | |
| <tr> | |
| <th class="border-b p-2">#</th> | |
| <th class="border-b p-2">Result</th> | |
| <th class="border-b p-2">Score</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for word, score in results %} | |
| <tr class="hover:bg-gray-100"> | |
| <td class="p-2">{{ loop.index }}</td> | |
| <td class="p-2">{{ word }}</td> | |
| <td class="p-2"> | |
| {% if score >= 0.4 %} | |
| {{ "%.2f"|format(score) }} | |
| {% else %} | |
| <span class="text-gray-500 italic">Irrelevant result</span> | |
| {% endif %} | |
| </td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <!-- Floating Buttons --> | |
| <div class="fixed bottom-4 right-4 flex gap-3"> | |
| <button onclick="openModal('suggestionsModal')" class="bg-white border rounded-full w-12 h-12 shadow flex items-center justify-center hover:bg-gray-100">💡</button> | |
| <button onclick="openModal('aboutModal')" class="bg-white border rounded-full w-12 h-12 shadow flex items-center justify-center hover:bg-gray-100">?</button> | |
| </div> | |
| <!-- Suggestions Modal --> | |
| <div id="suggestionsModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> | |
| <div class="bg-white rounded-lg p-6 max-w-md w-full shadow-lg relative"> | |
| <button onclick="closeModal('suggestionsModal')" class="absolute top-2 right-3 text-gray-500 hover:text-black">×</button> | |
| <h3 class="text-xl font-semibold mb-4">Suggestions</h3> | |
| <p class="mb-3 text-gray-700">What's your guess, before calculating it?</p> | |
| <ul id="suggestions-list" class="space-y-2"></ul> | |
| <div class="mt-4"> | |
| <h4 class="font-semibold text-gray-700">Tips:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600 mt-2 space-y-1"> | |
| <li>Use <code>-</code> and <code>+</code> with spaces around them.</li> | |
| <li>Link compound words with a hyphen, e.g., <code>new-york</code>.</li> | |
| <li>Got a fun suggestion? Email: <a href="mailto:clement.ha@hotmail.com" class="text-blue-600 hover:underline">clement.ha@hotmail.com</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Modal --> | |
| <div id="aboutModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"> | |
| <div class="bg-white rounded-lg p-6 max-w-md w-full shadow-lg relative"> | |
| <button onclick="closeModal('aboutModal')" class="absolute top-2 right-3 text-gray-500 hover:text-black">×</button> | |
| <h3 class="text-xl font-semibold mb-4">About</h3> | |
| <p class="text-gray-700">This tool calculates vector arithmetic of words using a pretrained CBOW model glove-twitter-200. Just put in your equation and press Calculate to show the result.</p> | |
| </div> | |
| </div> | |
| <script> | |
| function openModal(id) { document.getElementById(id).classList.remove('hidden'); } | |
| function closeModal(id) { document.getElementById(id).classList.add('hidden'); } | |
| document.addEventListener("DOMContentLoaded", () => { | |
| 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"); | |
| suggestions.forEach(suggestion => { | |
| const li = document.createElement("li"); | |
| li.className = "flex items-center justify-between bg-gray-100 rounded px-3 py-2"; | |
| li.innerHTML = `<code>${suggestion}</code> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-2 py-1 rounded">Use</button>`; | |
| li.querySelector("button").addEventListener("click", () => { | |
| textarea.value = suggestion; | |
| textarea.focus(); | |
| modal.classList.add('hidden'); | |
| }); | |
| list.appendChild(li); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |