Spaces:
Running
Running
I want to upload an image with Japanese or foreign text and have the image remade but with English translation - Initial Deployment
7a82d43 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Text Translator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #9CA3AF; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3B82F6; | |
| background-color: #EFF6FF; | |
| } | |
| .image-container { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .translated-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.9); | |
| display: none; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255,255,255,.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Image Text Translator</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Upload an image with foreign text and get it automatically translated to English while preserving the original design. | |
| </p> | |
| </header> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <!-- Upload Section --> | |
| <div class="w-full md:w-1/2 p-6"> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Upload Your Image</h2> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-4"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> | |
| <p class="text-gray-600 mb-2">Drag & drop your image here</p> | |
| <p class="text-sm text-gray-500 mb-4">or</p> | |
| <label for="fileInput" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md cursor-pointer transition"> | |
| Browse Files | |
| </label> | |
| <input id="fileInput" type="file" accept="image/*" class="hidden"> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-1 border-t border-gray-300"></div> | |
| <span class="px-3 text-gray-500">OR</span> | |
| <div class="flex-1 border-t border-gray-300"></div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Enter Image URL</label> | |
| <div class="flex"> | |
| <input id="imageUrl" type="text" placeholder="https://example.com/image.jpg" class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="loadUrlBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md transition"> | |
| Load | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Source Language</label> | |
| <select id="sourceLang" class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="auto">Auto Detect</option> | |
| <option value="ja">Japanese</option> | |
| <option value="zh">Chinese</option> | |
| <option value="ko">Korean</option> | |
| <option value="fr">French</option> | |
| <option value="de">German</option> | |
| <option value="es">Spanish</option> | |
| <option value="ru">Russian</option> | |
| </select> | |
| </div> | |
| <button id="translateBtn" disabled class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-md transition flex items-center justify-center"> | |
| <span id="btnText">Translate to English</span> | |
| <span id="btnSpinner" class="loading-spinner ml-2 hidden"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div class="w-full md:w-1/2 bg-gray-100 p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Preview</h2> | |
| <div id="previewContainer" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button id="showOriginalBtn" class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-md text-sm">Original</button> | |
| <button id="showTranslatedBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md text-sm">Translated</button> | |
| </div> | |
| <button id="downloadBtn" class="text-blue-500 hover:text-blue-600 text-sm flex items-center"> | |
| <i class="fas fa-download mr-1"></i> Download | |
| </button> | |
| </div> | |
| <div class="image-container bg-white rounded-md overflow-hidden shadow-sm"> | |
| <img id="previewImage" src="" alt="Preview" class="w-full h-auto"> | |
| <div id="translatedOverlay" class="translated-overlay"> | |
| <img id="translatedImage" src="" alt="Translated" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| <div id="translationInfo" class="mt-4 p-3 bg-blue-50 rounded-md hidden"> | |
| <h3 class="font-medium text-blue-800 mb-1">Translation Details</h3> | |
| <p class="text-sm text-blue-700"> | |
| <span id="detectedLang"></span> → English | |
| </p> | |
| </div> | |
| </div> | |
| <div id="emptyState" class="flex flex-col items-center justify-center h-64 text-gray-400"> | |
| <i class="fas fa-image text-5xl mb-4"></i> | |
| <p>Your translated image will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 max-w-4xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">How It Works</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-upload text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium mb-1">Upload Image</h3> | |
| <p class="text-sm text-gray-600">Upload an image containing text in any language</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-language text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium mb-1">AI Translation</h3> | |
| <p class="text-sm text-gray-600">Our system detects and translates the text to English</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-image text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium mb-1">Get Result</h3> | |
| <p class="text-sm text-gray-600">Download the new image with English text</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const imageUrl = document.getElementById('imageUrl'); | |
| const loadUrlBtn = document.getElementById('loadUrlBtn'); | |
| const translateBtn = document.getElementById('translateBtn'); | |
| const previewContainer = document.getElementById('previewContainer'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const previewImage = document.getElementById('previewImage'); | |
| const translatedImage = document.getElementById('translatedImage'); | |
| const translatedOverlay = document.getElementById('translatedOverlay'); | |
| const showOriginalBtn = document.getElementById('showOriginalBtn'); | |
| const showTranslatedBtn = document.getElementById('showTranslatedBtn'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| const translationInfo = document.getElementById('translationInfo'); | |
| const detectedLang = document.getElementById('detectedLang'); | |
| const sourceLang = document.getElementById('sourceLang'); | |
| const btnText = document.getElementById('btnText'); | |
| const btnSpinner = document.getElementById('btnSpinner'); | |
| // Variables | |
| let currentImage = null; | |
| let translatedImageData = null; | |
| // Dropzone events | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('active'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| if (e.dataTransfer.files.length) { | |
| fileInput.files = e.dataTransfer.files; | |
| handleFileUpload(fileInput.files[0]); | |
| } | |
| }); | |
| dropzone.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| // File input change | |
| fileInput.addEventListener('change', () => { | |
| if (fileInput.files.length) { | |
| handleFileUpload(fileInput.files[0]); | |
| } | |
| }); | |
| // Load URL button | |
| loadUrlBtn.addEventListener('click', () => { | |
| const url = imageUrl.value.trim(); | |
| if (url) { | |
| loadImageFromUrl(url); | |
| } | |
| }); | |
| // Translate button | |
| translateBtn.addEventListener('click', () => { | |
| if (currentImage) { | |
| translateImage(); | |
| } | |
| }); | |
| // Preview toggle buttons | |
| showOriginalBtn.addEventListener('click', () => { | |
| translatedOverlay.style.display = 'none'; | |
| showOriginalBtn.classList.remove('bg-gray-200'); | |
| showOriginalBtn.classList.add('bg-blue-500', 'text-white'); | |
| showTranslatedBtn.classList.remove('bg-blue-500', 'text-white'); | |
| showTranslatedBtn.classList.add('bg-gray-200'); | |
| }); | |
| showTranslatedBtn.addEventListener('click', () => { | |
| if (translatedImageData) { | |
| translatedOverlay.style.display = 'block'; | |
| showTranslatedBtn.classList.remove('bg-gray-200'); | |
| showTranslatedBtn.classList.add('bg-blue-500', 'text-white'); | |
| showOriginalBtn.classList.remove('bg-blue-500', 'text-white'); | |
| showOriginalBtn.classList.add('bg-gray-200'); | |
| } | |
| }); | |
| // Download button | |
| downloadBtn.addEventListener('click', () => { | |
| if (translatedImageData) { | |
| const link = document.createElement('a'); | |
| link.href = translatedImageData; | |
| link.download = 'translated-image.png'; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| }); | |
| // Functions | |
| function handleFileUpload(file) { | |
| if (!file.type.match('image.*')) { | |
| alert('Please select an image file'); | |
| return; | |
| } | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| currentImage = e.target.result; | |
| previewImage.src = currentImage; | |
| previewContainer.classList.remove('hidden'); | |
| emptyState.classList.add('hidden'); | |
| translateBtn.disabled = false; | |
| // Reset translated state | |
| translatedOverlay.style.display = 'none'; | |
| showOriginalBtn.classList.remove('bg-blue-500', 'text-white'); | |
| showOriginalBtn.classList.add('bg-gray-200'); | |
| showTranslatedBtn.classList.remove('bg-blue-500', 'text-white'); | |
| showTranslatedBtn.classList.add('bg-gray-200'); | |
| translationInfo.classList.add('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function loadImageFromUrl(url) { | |
| // Simple URL validation | |
| if (!url.match(/^https?:\/\/.+\/.+\.(jpg|jpeg|png|gif|webp)$/i)) { | |
| alert('Please enter a valid image URL'); | |
| return; | |
| } | |
| // Create a temporary image to check if it loads | |
| const img = new Image(); | |
| img.onload = () => { | |
| currentImage = url; | |
| previewImage.src = currentImage; | |
| previewContainer.classList.remove('hidden'); | |
| emptyState.classList.add('hidden'); | |
| translateBtn.disabled = false; | |
| // Reset translated state | |
| translatedOverlay.style.display = 'none'; | |
| showOriginalBtn.classList.remove('bg-blue-500', 'text-white'); | |
| showOriginalBtn.classList.add('bg-gray-200'); | |
| showTranslatedBtn.classList.remove('bg-blue-500', 'text-white'); | |
| showTranslatedBtn.classList.add('bg-gray-200'); | |
| translationInfo.classList.add('hidden'); | |
| }; | |
| img.onerror = () => { | |
| alert('Could not load image from URL. Please check the URL and try again.'); | |
| }; | |
| img.src = url; | |
| } | |
| function translateImage() { | |
| // Simulate translation process (in a real app, this would call an API) | |
| btnText.textContent = 'Translating...'; | |
| btnSpinner.classList.remove('hidden'); | |
| translateBtn.disabled = true; | |
| // Simulate API delay | |
| setTimeout(() => { | |
| // In a real app, this would be the translated image from the API | |
| // For demo purposes, we'll just use the same image with a "translated" watermark | |
| const canvas = document.createElement('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const img = new Image(); | |
| img.onload = function() { | |
| canvas.width = img.width; | |
| canvas.height = img.height; | |
| ctx.drawImage(img, 0, 0); | |
| // Add watermark to simulate translation | |
| ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.font = '20px Arial'; | |
| ctx.fillStyle = 'blue'; | |
| ctx.textAlign = 'center'; | |
| ctx.fillText('Translated to English', canvas.width/2, canvas.height/2); | |
| // Set the translated image | |
| translatedImageData = canvas.toDataURL('image/png'); | |
| translatedImage.src = translatedImageData; | |
| // Update UI | |
| btnText.textContent = 'Translate to English'; | |
| btnSpinner.classList.add('hidden'); | |
| translateBtn.disabled = false; | |
| // Show translation info | |
| const selectedLang = sourceLang.options[sourceLang.selectedIndex].text; | |
| detectedLang.textContent = sourceLang.value === 'auto' ? | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Bobandmilk/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |