SlideGen: HTML+JS+OCR
Sure, here's a simple HTML and JavaScript app that does most of what you've described. Note that integrating the OCR part with Tesseract might be more complex and is omitted here due to its complexity. However, I'll guide you on how you can start with that.
- HTML Structure & Basic JavaScript
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<title>Slide Generator</title>
</head>
<body>
<input type="range" min="1" max="200" id="slider" value="1">
<label for="slider">Number of slides</label>
<br>
<textarea id="template" rows="4" cols="50">
<div class="slide">
<img src="weird-world-llms/weird-world-llms.${String(i).padStart(3, '0')}.jpeg" alt="${alt}">
${html}
</div>
</textarea>
<br>
<button onclick="generateSlides()">Generate slides</button>
<button onclick="ocrMissingAltText()">OCR missing alt text</button>
<div id="output"></div>
<script>
function generateSlides() {
var sliderValue = document.getElementById('slider').value;
var templateContent = document.getElementById('template').value;
var output = document.getElementById('output');
output.innerHTML = ''; // Clear previous content
for (var i = 1; i <= sliderValue; i++) {
var slideHtml = templateContent
.replace('${String(i).padStart(3, \'0\')}', String(i).padStart(3, '0'))
.replace('${alt}', '')
.replace('${html}', '');
var div = document.createElement('div');
var pre = document.createElement('pre');
pre.textContent = slideHtml;
var img = document.createElement('img');
img.style.float = 'left';
img.src = "weird-world-llms/weird-world-llms." + String(i).padStart(3, '0') + ".jpeg";
var markdownTextarea = document.createElement('textarea');
markdownTextarea.placeholder = 'markdown';
markdownTextarea.oninput = function(e) {
var markdownValue = e.target.value;
var converter = new showdown.Converter();
pre.textContent = pre.textContent.replace('${html}', converter.makeHtml(markdownValue));
};
var altTextarea = document.createElement('textarea');
altTextarea.placeholder = 'alt';
div.appendChild(img);
div.appendChild(pre);
div.appendChild(markdownTextarea);
div.appendChild(altTextarea);
output.appendChild(div);
}
}
function ocrMissingAltText() {
// Implementation using Tesseract JS
}
</script>
</body>
</html>
- OCR Integration
The above code does not implement the OCR feature. To add that functionality, you'll need to include Tesseract.js in your project. Here's a rough guide on how you might proceed:
- Include Tesseract.js in your HTML by adding
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>in the head. - In the
ocrMissingAltTextfunction, loop through the images and check the associated alt textareas for missing values. - For each image with missing alt text, use Tesseract.js to perform OCR and then update the associated textarea with the resulting text.
Tesseract.js's OCR process is asynchronous and can be resource-intensive, so this part of the application may require careful handling and optimization. You can find detailed usage instructions and examples in the Tesseract.js documentation.
Great! You've provided a code snippet that loads Tesseract.js and then uses it to recognize text from image URLs found in the browser's performance entries. This is a good start.
You can adapt this code to the HTML and JavaScript document I've provided earlier by modifying the ocrMissingAltText function. Here's an updated version of the function:
javascriptasync function ocrMissingAltText() {
// Load Tesseract
var s = document.createElement("script");
s.src = "https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js";
document.head.appendChild(s);
s.onload = async () => {
const outputDiv = document.getElementById('output');
const images = outputDiv.getElementsByTagName('img');
const worker = Tesseract.createWorker();
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
// Iterate through all the images in the output div
for (const img of images) {
const altTextarea = img.nextSibling.nextSibling.nextSibling;
// Check if the alt textarea is empty
if (altTextarea.value === '') {
const imageUrl = img.src;
console.log(imageUrl);
var { data: { text } } = await worker.recognize(imageUrl);
altTextarea.value = text; // Set the OCR result to the alt textarea
console.log(text);
}
}
await worker.terminate();
}
}
This code adds the Tesseract.js script to the head of the document and, once loaded, iterates through all the images in the output div. If the associated alt textarea is empty, it runs OCR on the image and populates the textarea with the recognized text.
You can replace the ocrMissingAltText function in the previous code with this updated version, and it should provide the functionality you're looking for.
Please note that running OCR on many images simultaneously can be resource-intensive. Depending on the actual use case, you might need to consider optimization, error handling, and user feedback to ensure a smooth experience. Also, it's important to note that this implementation assumes a specific DOM structure and relies on the relative ordering of elements. If the structure changes, you may need to update the code to match.