Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

initial commit #437

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

initial commit #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a14e62d
initial commit
StoneRigha Feb 11, 2025
5cd1e4d
added process image button
StoneRigha Feb 11, 2025
2e07748
Changed background to darkmode
StoneRigha Feb 11, 2025
5918f08
bug fix
StoneRigha Feb 11, 2025
9cc6cd3
bug fix
StoneRigha Feb 11, 2025
267bd0e
update
StoneRigha Feb 11, 2025
54a4286
update
StoneRigha Feb 11, 2025
703bf01
fix
StoneRigha Feb 11, 2025
87ec711
font updatw
StoneRigha Feb 11, 2025
1ef0afd
font updatw
StoneRigha Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note Scanner & Digitizer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Handwritten Note Scanner</h1>
<input type="file" id="imageUpload" accept="image/*">
<button id="processButton">Process Image</button>
<canvas id="canvas" style="display: none;"></canvas>
<textarea id="outputText" placeholder="Extracted text will appear here..."></textarea>
<div class="buttons">
<button onclick="downloadPDF()">Download PDF</button>
<button onclick="downloadImage()">Download Image</button>
<button onclick="downloadEPUB()">Download EPUB</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.0.2/tesseract.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="script.js"></script>
</body>
</html>
126 changes: 126 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
document.getElementById("imageUpload").addEventListener("change", function(event) {
let file = event.target.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function(e) {
processImage(e.target.result);
};
reader.readAsDataURL(file);
}
});

// Process image on button click
document.getElementById("processButton").addEventListener("click", function() {
if (uploadedImage) {
processImage(uploadedImage);
} else {
alert("Please upload an image first!");
}
});

function processImage(imageData) {
let img = new Image();
img.src = imageData;
img.onload = function() {
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

Tesseract.recognize(
canvas,
'eng',
{
logger: m => console.log(m)
}
).then(({ data: { text } }) => {
document.getElementById("outputText").value = text;
});
};
}

// Download PDF
function downloadPDF() {
const { jsPDF } = window.jspdf;
let doc = new jsPDF();
let text = document.getElementById("outputText").value;
doc.text(text, 10, 10);
doc.save("digitized_notes.pdf");
}

// Download Image
function downloadImage() {
let text = document.getElementById("outputText").value;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 200;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "16px Arial";
ctx.fillText(text, 10, 30);
let link = document.createElement("a");
link.download = "digitized_notes.png";
link.href = canvas.toDataURL();
link.click();
}

// Download EPUB
function downloadEPUB() {
let text = document.getElementById("outputText").value;
let blob = new Blob([text], { type: "application/epub+zip" });
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "digitized_notes.epub";
link.click();
}

// Bouncing Ball Animation
const canvas = document.getElementById("backgroundCanvas");
const ctx = canvas.getContext("2d");
let balls = [];

function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

// Create Random Balls
for (let i = 0; i < 10; i++) {
balls.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 4,
vy: (Math.random() - 0.5) * 4,
radius: Math.random() * 15 + 5,
color: `hsl(${Math.random() * 360}, 100%, 60%)`
});
}
// Animate Balls
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

balls.forEach(ball => {
ball.x += ball.vx;
ball.y += ball.vy;

// Bounce off walls
if (ball.x < 0 || ball.x > canvas.width) ball.vx *= -1;
if (ball.y < 0 || ball.y > canvas.height) ball.vy *= -1;

// Draw ball
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
});

requestAnimationFrame(animate);
}
animate();
88 changes: 88 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
@font-face {
font-family: 'Aeonik';
src: url('Aeonik.woff2') format('woff2'),
url('Aeonik.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* Dark Mode Background */
body {
font-family: 'Aeonik', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #121212;
color: white;
overflow: hidden;
position: relative;
}

/* Background Canvas for Animation */
#backgroundCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}


.container {
width: 90%;
max-width: 500px;
background: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
border-radius: 8px;
}

h1 {
font-size: 1.5em;

}

input {
margin-bottom: 10px;
}

textarea {
width: 100%;
height: 150px;
margin-top: 10px;
}

.buttons {
margin-top: 10px;
}

button {
margin: 5px;
padding: 10px;
border: none;
background: #007BFF;
color: white;
cursor: pointer;
}

button:hover {
background: #0056b3;
}