|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Unconscious Bias Training PDF</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
line-height: 1.6; |
|
|
margin: 20px; |
|
|
background-color: #f9f9f9; |
|
|
color: #333; |
|
|
} |
|
|
h1 { |
|
|
color: #2c3e50; |
|
|
} |
|
|
#pdf-viewer { |
|
|
width: 100%; |
|
|
height: 800px; |
|
|
border: 1px solid #ddd; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Unconscious Bias Training</h1> |
|
|
<canvas id="pdf-viewer"></canvas> |
|
|
</div> |
|
|
<script src="pdf.js"></script> |
|
|
<script src="pdf.worker.js"></script> |
|
|
<script> |
|
|
const url = 'https://huggingface.co/spaces/EmilyWitko/Unconscious_Bias/raw/main/Training%20%232_%20Unconscious%20Bias.pdf'; |
|
|
|
|
|
const loadingTask = pdfjsLib.getDocument(url); |
|
|
loadingTask.promise.then(function(pdf) { |
|
|
console.log('PDF loaded'); |
|
|
|
|
|
const pageNumber = 1; |
|
|
pdf.getPage(pageNumber).then(function(page) { |
|
|
console.log('Page loaded'); |
|
|
|
|
|
const scale = 1.5; |
|
|
const viewport = page.getViewport({scale: scale}); |
|
|
|
|
|
const canvas = document.getElementById('pdf-viewer'); |
|
|
const context = canvas.getContext('2d'); |
|
|
canvas.height = viewport.height; |
|
|
canvas.width = viewport.width; |
|
|
|
|
|
const renderContext = { |
|
|
canvasContext: context, |
|
|
viewport: viewport |
|
|
}; |
|
|
const renderTask = page.render(renderContext); |
|
|
renderTask.promise.then(function () { |
|
|
console.log('Page rendered'); |
|
|
}); |
|
|
}); |
|
|
}, function (reason) { |
|
|
console.error(reason); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
