Downloads · 30 days
0
Imagentxt
Realcreaciones/Imagentxt
Imagentxt is a machine learning model from Realcreaciones. Use it for the machine learning task on the model card, and read the license before you ship it in a product. The card lists the license as creativeml-openrail-m.
<!DOCTYPE html <html lang="es" <head <meta charset="UTF-8" <meta name="viewport" content="width=device-width, initial-scale=1.0" <titleConversor de Imagen a Texto</title <script src="https://cdnjs.cloudflare.com/ajax/…
Access
Public
Updated Apr 8, 2025
Repo size
—
Likes
0
Public
Repo makeup
Click a slice to open those files.
.md9.8 KB · 87%
At a glance
- License
- creativeml-openrail-m
- Access
- Public
- Created
- Apr 8, 2025
- Updated
- Apr 8, 2025
- SHA
- be0142c0
Model card
From the Hugging Face model README
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conversor de Imagen a Texto</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.upload-area {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.upload-area:hover {
border-color: #0078d7;
background-color: #f9f9f9;
}
.upload-area.active {
border-color: #0078d7;
background-color: #f0f7ff;
}
#imagePreview {
max-width: 100%;
max-height: 300px;
margin: 20px auto;
display: none;
}
#result {
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
min-height: 100px;
max-height: 300px;
overflow-y: auto;
background-color: #f9f9f9;
margin-top: 20px;
}
button {
background-color: #0078d7;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #0056a3;
}
.language-select {
margin: 20px 0;
}
.progress-bar {
width: 100%;
background-color: #e0e0e0;
height: 20px;
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
display: none;
}
.progress {
height: 100%;
background-color: #0078d7;
width: 0%;
transition: width 0.3s;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
}
#status {
margin-top: 10px;
color: #666;
font-style: italic;
}
.copy-btn {
background-color: #4CAF50;
margin-left: 10px;
}
.copy-btn:hover {
background-color: #388E3C;
}
.btn-container {
display: flex;
justify-content: center;
gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Conversor de Imagen a Texto</h1>
<div class="language-select">
<label for="language">Seleccionar idioma:</label>
<select id="language">
<option value="spa">Español</option>
<option value="eng">Inglés</option>
<option value="fra">Francés</option>
<option value="deu">Alemán</option>
<option value="ita">Italiano</option>
<option value="por">Portugués</option>
<option value="cat">Catalán</option>
<option value="rus">Ruso</option>
<option value="chi_sim">Chino Simplificado</option>
<option value="jpn">Japonés</option>
</select>
</div>
<div id="dropArea" class="upload-area">
<p>Arrastra y suelta una imagen aquí o haz clic para seleccionar</p>
<input type="file" id="fileInput" accept="image/*" style="display: none;">
</div>
<img id="imagePreview" src="" alt="Vista previa de la imagen">
<div class="progress-bar" id="progressBar">
<div class="progress" id="progress">0%</div>
</div>
<div class="btn-container">
<button id="convertBtn" disabled>Convertir a Texto</button>
<button id="copyBtn" class="copy-btn" disabled>Copiar Texto</button>
</div>
<p id="status">Listo para procesar imagen</p>
<div id="result">El texto extraído aparecerá aquí...</div>
</div>
<script>
// Elementos del DOM
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');
const convertBtn = document.getElementById('convertBtn');
const copyBtn = document.getElementById('copyBtn');
const result = document.getElementById('result');
const progressBar = document.getElementById('progressBar');
const progress = document.getElementById('progress');
const status = document.getElementById('status');
const languageSelect = document.getElementById('language');
// Variables globales
let selectedFile = null;
// Eventos para arrastrar y soltar
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropArea.classList.add('active');
}
function unhighlight() {
dropArea.classList.remove('active');
}
// Manejo de archivos soltados
dropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
if (files.length > 0 && files[0].type.match('image.*')) {
handleFiles(files);
}
}
// Click en el área de carga
dropArea.addEventListener('click', () => {
fileInput.click();
});
// Cuando se selecciona un archivo
fileInput.addEventListener('change', (e) => {
if (fileInput.files.length > 0) {
handleFiles(fileInput.files);
}
});
// Procesar archivos
function handleFiles(files) {
selectedFile = files[0];
// Mostrar vista previa
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.src = e.target.result;
imagePreview.style.display = 'block';
convertBtn.disabled = false;
status.textContent = 'Imagen cargada. Haz clic en "Convertir a Texto" para procesar.';
};
reader.readAsDataURL(selectedFile);
}
// Convertir imagen a texto
convertBtn.addEventListener('click', () => {
if (!selectedFile) return;
const selectedLanguage = languageSelect.value;
// Reiniciar estado
result.textContent = 'Procesando...';
copyBtn.disabled = true;
progressBar.style.display = 'block';
progress.style.width = '0%';
progress.textContent = '0%';
// Iniciar reconocimiento
Tesseract.recognize(
selectedFile,
selectedLanguage,
{
logger: message => {
if (message.status === 'recognizing text') {
const p = message.progress * 100;
progress.style.width = `${p}%`;
progress.textContent = `${Math.round(p)}%`;
status.textContent = `Procesando: ${message.progress.toFixed(2) * 100}%`;
}
}
}
).then(({ data: { text } }) => {
result.textContent = text || 'No se pudo detectar texto en la imagen.';
copyBtn.disabled = text.trim() === '';
status.textContent = 'Procesamiento completado!';
progress.style.width = '100%';
progress.textContent = '100%';
}).catch(err => {
result.textContent = `Error: ${err.message}`;
status.textContent = 'Ha ocurrido un error durante el procesamiento.';
});
});
// Copiar texto al portapapeles
copyBtn.addEventListener('click', () => {
const textToCopy = result.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = copyBtn.textContent;
copyBtn.textContent = 'Copiado!';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
});
});
</script>
- License
- creativeml-openrail-m
- Created
- Apr 8, 2025
- Updated
- Apr 8, 2025