Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Obolo Translator</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e, #16213e); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: rgba(255,255,255,0.08); | |
| backdrop-filter: blur(20px); | |
| border-radius: 20px; | |
| padding: 40px; | |
| width: 100%; | |
| max-width: 700px; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| box-shadow: 0 25px 50px rgba(0,0,0,0.5); | |
| } | |
| h1 { color: #fff; font-size: 2.2em; text-align: center; margin-bottom: 8px; } | |
| .subtitle { color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 30px; } | |
| .button-group { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } | |
| .btn { padding: 12px 28px; border: none; border-radius: 10px; font-size: 1em; font-weight: 600; cursor: pointer; flex: 1; min-width: 120px; transition: all 0.2s; } | |
| .btn-primary { background: #4f8cf7; color: #fff; } | |
| .btn-primary:hover { background: #3a7bd5; transform: translateY(-2px); } | |
| .btn-secondary { background: rgba(255,255,255,0.1); color: #fff; } | |
| .btn-secondary:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); } | |
| textarea { width: 100%; padding: 14px 18px; border-radius: 12px; border: none; background: rgba(255,255,255,0.06); color: #fff; font-size: 1em; min-height: 100px; resize: vertical; font-family: inherit; outline: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px; } | |
| textarea:focus { outline: 2px solid #4f8cf7; } | |
| textarea::placeholder { color: rgba(255,255,255,0.3); } | |
| .output-box { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 18px; min-height: 60px; color: #fff; font-size: 1.05em; border: 1px solid rgba(255,255,255,0.06); margin-top: 16px; } | |
| .loading { color: rgba(255,255,255,0.4); font-style: italic; } | |
| .source-tag { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.75em; font-weight: 600; margin-top: 8px; } | |
| .tag-dict { background: #2d8a4e; color: #fff; } | |
| .tag-ai { background: #7c3aed; color: #fff; } | |
| .examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } | |
| .example-btn { padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.6); font-size: 0.8em; cursor: pointer; transition: all 0.2s; } | |
| .example-btn:hover { background: rgba(255,255,255,0.1); color: #fff; } | |
| .footer { margin-top: 24px; text-align: center; color: rgba(255,255,255,0.25); font-size: 0.8em; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; } | |
| @media (max-width: 600px) { .container { padding: 24px; } h1 { font-size: 1.6em; } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>English ↔ Obolo</h1> | |
| <p class="subtitle">AI-Powered Translation with Dictionary Lookup</p> | |
| <div class="button-group"> | |
| <button id="dirEnToOb" class="btn btn-primary">English → Obolo</button> | |
| <button id="dirObToEn" class="btn btn-secondary">Obolo → English</button> | |
| </div> | |
| <div class="examples" id="examplesContainer"></div> | |
| <textarea id="inputText" placeholder="Type something to translate..."></textarea> | |
| <button id="translateBtn" class="btn btn-primary" style="width:100%;">Translate</button> | |
| <div class="output-box" id="outputBox"> | |
| <span class="loading">Translation will appear here...</span> | |
| </div> | |
| <div class="footer"> | |
| Built by Okejonah1 (Oke Nteigbanam J.) | Powered by Hugging Face | |
| </div> | |
| </div> | |
| <script> | |
| const MODEL_ID = 'Okejonah1/obolo-ai-translation'; | |
| // Try multiple proxy options (fallback mechanism) | |
| const PROXIES = [ | |
| 'https://corsproxy.io/?', | |
| 'https://api.allorigins.win/raw?url=' | |
| ]; | |
| let currentProxyIndex = 0; | |
| function getApiUrl() { | |
| const proxy = PROXIES[currentProxyIndex]; | |
| return proxy + encodeURIComponent( | |
| `https://api-inference.huggingface.co/models/${MODEL_ID}` | |
| ); | |
| } | |
| const inputText = document.getElementById('inputText'); | |
| const outputBox = document.getElementById('outputBox'); | |
| const translateBtn = document.getElementById('translateBtn'); | |
| const dirEnToOb = document.getElementById('dirEnToOb'); | |
| const dirObToEn = document.getElementById('dirObToEn'); | |
| const examplesContainer = document.getElementById('examplesContainer'); | |
| let currentDirection = 'en-to-ob'; | |
| const examples = { | |
| 'en-to-ob': [ | |
| 'God', 'father', 'world', 'thank you', 'please', | |
| 'The Lord is my shepherd.', | |
| 'In the beginning God created the heaven and the earth.' | |
| ], | |
| 'ob-to-en': [ | |
| 'Awaji', 'Nte', 'isonyon', 'oniro', 'soso', | |
| 'Okumugwem re ogwu ikpukpuo ugwem na', | |
| 'Me ibebene, Awaji irom isinyon me linyon' | |
| ] | |
| }; | |
| function updateExamples() { | |
| const exs = examples[currentDirection]; | |
| examplesContainer.innerHTML = ''; | |
| exs.forEach(ex => { | |
| const btn = document.createElement('button'); | |
| btn.className = 'example-btn'; | |
| btn.textContent = ex.length > 25 ? ex.slice(0, 25) + '...' : ex; | |
| btn.title = ex; | |
| btn.onclick = () => { inputText.value = ex; translate(); }; | |
| examplesContainer.appendChild(btn); | |
| }); | |
| } | |
| function setDirection(direction) { | |
| currentDirection = direction; | |
| if (direction === 'en-to-ob') { | |
| dirEnToOb.className = 'btn btn-primary'; | |
| dirObToEn.className = 'btn btn-secondary'; | |
| } else { | |
| dirEnToOb.className = 'btn btn-secondary'; | |
| dirObToEn.className = 'btn btn-primary'; | |
| } | |
| updateExamples(); | |
| outputBox.innerHTML = '<span class="loading">Ready to translate...</span>'; | |
| } | |
| dirEnToOb.onclick = () => setDirection('en-to-ob'); | |
| dirObToEn.onclick = () => setDirection('ob-to-en'); | |
| async function translate() { | |
| const text = inputText.value.trim(); | |
| if (!text) { | |
| outputBox.innerHTML = 'Please enter some text.'; | |
| return; | |
| } | |
| outputBox.innerHTML = 'Translating...'; | |
| translateBtn.disabled = true; | |
| // Try each proxy until one works | |
| for (let attempt = 0; attempt < PROXIES.length; attempt++) { | |
| try { | |
| currentProxyIndex = attempt; | |
| const apiUrl = getApiUrl(); | |
| const response = await fetch(apiUrl, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ inputs: text }) | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| const result = data[0]?.generated_text || 'No translation generated.'; | |
| const source = (result.includes('Dictionary') || result.includes('📖')) ? 'Dictionary' : 'AI Model'; | |
| const sourceClass = source === 'Dictionary' ? 'tag-dict' : 'tag-ai'; | |
| outputBox.innerHTML = ` | |
| ${result} | |
| <br><span class="source-tag ${sourceClass}">${source}</span> | |
| `; | |
| translateBtn.disabled = false; | |
| return; | |
| } | |
| } catch (e) { | |
| // Continue to next proxy | |
| console.log(`Proxy ${attempt + 1} failed, trying next...`); | |
| } | |
| } | |
| outputBox.innerHTML = 'Error: Translation failed. Please try again later.'; | |
| translateBtn.disabled = false; | |
| } | |
| translateBtn.onclick = translate; | |
| inputText.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| translate(); | |
| } | |
| }); | |
| setDirection('en-to-ob'); | |
| </script> | |
| </body> | |
| </html> |