| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>NMT Comparison | ARM vs Diffusion</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> |
| | <style> |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background-color: #020617; |
| | background-image: radial-gradient(circle at 0% 0%, #1e1b4b 0%, transparent 50%), |
| | radial-gradient(circle at 100% 100%, #0f172a 0%, transparent 50%); |
| | color: #f8fafc; |
| | } |
| | .glass-card { |
| | background: rgba(15, 23, 42, 0.6); |
| | backdrop-filter: blur(16px); |
| | border: 1px solid rgba(255, 255, 255, 0.08); |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen flex flex-col p-4 md:p-10"> |
| |
|
| | <div class="flex-grow flex flex-col items-center"> |
| | <div class="w-full max-w-4xl"> |
| | <header class="text-center mb-10"> |
| | <h1 class="text-3xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 bg-clip-text text-transparent mb-3 tracking-tight"> |
| | NMT Comparison |
| | </h1> |
| | <p class="text-slate-500 font-medium tracking-[0.2em] uppercase text-[10px] opacity-80"> |
| | ARM vs. Diffusion Architecture |
| | </p> |
| | </header> |
| |
|
| | <div class="glass-card rounded-3xl shadow-2xl p-6 mb-8"> |
| | <textarea id="inputText" |
| | class="w-full p-5 text-lg bg-slate-950/50 border border-white/5 focus:ring-2 focus:ring-blue-500/30 rounded-2xl text-white outline-none resize-none h-32 transition-all placeholder:text-slate-700" |
| | placeholder="Enter English sentence..."></textarea> |
| | |
| | <button onclick="translateText()" id="btn" |
| | class="mt-6 w-full bg-white hover:bg-slate-100 text-slate-950 font-bold py-4 rounded-2xl transition-all duration-300 transform active:scale-[0.97] shadow-[0_0_30px_rgba(59,130,246,0.15)] hover:shadow-[0_0_40px_rgba(99,102,241,0.3)] flex justify-center items-center gap-3 border border-white/40"> |
| | <span id="btnText" class="tracking-tight">Run Comparison</span> |
| | <div id="spinner" class="hidden animate-spin h-5 w-5 border-2 border-slate-900 border-t-transparent rounded-full"></div> |
| | </button> |
| | </div> |
| |
|
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div class="glass-card rounded-3xl p-8"> |
| | <div class="flex items-center gap-3 mb-4"> |
| | <div class="h-2 w-2 rounded-full bg-purple-500 animate-pulse"></div> |
| | <h3 class="font-semibold text-slate-400 uppercase tracking-widest text-[10px]">Diffusion Model</h3> |
| | </div> |
| | <div id="diffOutput" class="text-xl text-slate-100 min-h-[60px]">...</div> |
| | </div> |
| |
|
| | <div class="glass-card rounded-3xl p-8"> |
| | <div class="flex items-center gap-3 mb-4"> |
| | <div class="h-2 w-2 rounded-full bg-blue-500 animate-pulse"></div> |
| | <h3 class="font-semibold text-slate-400 uppercase tracking-widest text-[10px]">ARM Model</h3> |
| | </div> |
| | <div id="armOutput" class="text-xl text-slate-100 min-h-[60px]">...</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <footer class="mt-10 flex justify-end"> |
| | <p class="text-slate-600 text-sm font-light tracking-tight"> |
| | Made by <span class="text-slate-400 font-medium">Sam, Dhruv and Jatan</span> <span class="text-rose-500/60">❤️</span> |
| | </p> |
| | </footer> |
| |
|
| | |
| |
|
| | <script> |
| | async function translateText() { |
| | let text = document.getElementById('inputText').value.trim(); |
| | const btn = document.getElementById('btn'); |
| | const btnText = document.getElementById('btnText'); |
| | const spinner = document.getElementById('spinner'); |
| | |
| | if(!text) return; |
| | |
| | |
| | const punctuation = [".", "!", "?"]; |
| | if (!punctuation.includes(text.slice(-1))) { |
| | text += "."; |
| | document.getElementById('inputText').value = text; |
| | } |
| | |
| | |
| | btn.disabled = true; |
| | btnText.innerText = "Processing..."; |
| | spinner.classList.remove('hidden'); |
| | |
| | try { |
| | const res = await fetch('https://sammyboi1801-arm-vs-diffusion-nmt.hf.space/translate', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ text: text, max_length: 128 }) |
| | }); |
| | |
| | const data = await res.json(); |
| | document.getElementById('diffOutput').innerText = data.diffusion_translation; |
| | document.getElementById('armOutput').innerText = data.arm_translation; |
| | |
| | } catch (err) { |
| | alert("The API appears to be sleeping. Wake it up on Hugging Face!"); |
| | } finally { |
| | btn.disabled = false; |
| | btnText.innerText = "Compare Models"; |
| | spinner.classList.add('hidden'); |
| | } |
| | } |
| | </script> |
| | </body> |
| | </html> |
