Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 6,295 Bytes
79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 79a071f 5ab0e19 f66e5e6 5ab0e19 f66e5e6 5ab0e19 79a071f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!DOCTYPE html>
<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> |