| <!DOCTYPE html> |
| <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; |
| margin-bottom: 8px; |
| text-align: center; |
| } |
| .subtitle { |
| color: rgba(255,255,255,0.6); |
| text-align: center; |
| font-size: 0.95em; |
| 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; |
| transition: all 0.2s; |
| flex: 1; |
| min-width: 120px; |
| } |
| .btn-primary { |
| background: #4f8cf7; |
| color: #fff; |
| } |
| .btn-primary:hover { |
| background: #3a7bd5; |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(79, 140, 247, 0.3); |
| } |
| .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); |
| transition: outline 0.2s; |
| 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; |
| line-height: 1.6; |
| 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'; |
| const API_URL = `https://api-inference.huggingface.co/models/${MODEL_ID}`; |
| |
| const HF_TOKEN = 'YOUR_HF_TOKEN'; |
| |
| |
| 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 { |
| const response = await fetch(API_URL, { |
| method: 'POST', |
| headers: { |
| 'Authorization': `Bearer ${HF_TOKEN}`, |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ inputs: text }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`API Error: ${response.status}`); |
| } |
| |
| 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> |
| `; |
| } catch (error) { |
| outputBox.innerHTML = `Error: ${error.message}. Please try again.`; |
| } finally { |
| 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> |
