eversync/eversync
1
0
Fork 0
mirror of https://github.com/rudy3333/eversync.git synced 2025-07-01 08:36:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add OCR functionality to notes,

Browse source
This commit is contained in:
Max Młynarczyk 2025-05-14 18:49:14 +02:00
parent ba9803fa38
commit b22000b804
1 changed files with 37 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

37
notes.html
View file

@ -8,6 +8,7 @@
{% load static %} {% load static %}
<link rel="icon" href="{% static 'favicon.ico' %}"> <link rel="icon" href="{% static 'favicon.ico' %}">
<link rel="stylesheet" href="{% static 'index-style.css' %}" "> <link rel="stylesheet" href="{% static 'index-style.css' %}" ">
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
</head> </head>
</head> </head>
@ -126,10 +127,37 @@
} }
} }
async function performOCR() {
const fileInput = document.getElementById('ocrImageInput');
if (!fileInput.files.length) {
alert("Please select an image first.");
return;
}
const image = fileInput.files[0];
const reader = new FileReader();
reader.onload = async function () {
const result = await Tesseract.recognize(reader.result, 'eng');
document.getElementById('content').value += result.data.text;
closeOCRModal();
};
reader.readAsDataURL(image);
}
function closeVoiceModal() { function closeVoiceModal() {
document.getElementById('voiceModal').style.display = 'none'; document.getElementById('voiceModal').style.display = 'none';
} }
function showOCRModal() {
document.getElementById('ocrModal').style.display = 'block';
}
function closeOCRModal() {
document.getElementById('ocrModal').style.display = 'none';
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
fetchNotes(); fetchNotes();
document.getElementById("note-form").addEventListener("submit", addNote); document.getElementById("note-form").addEventListener("submit", addNote);
@ -187,9 +215,18 @@
<input type="text" id="title" name="title" placeholder="Note Title" required><br> <input type="text" id="title" name="title" placeholder="Note Title" required><br>
<textarea id="content" name="content" placeholder="Note Content" required></textarea><br> <textarea id="content" name="content" placeholder="Note Content" required></textarea><br>
<button type="button" onclick="startVoiceRecognition()">🎤 Speak</button> <button type="button" onclick="startVoiceRecognition()">🎤 Speak</button>
<button type="button" onclick="showOCRModal()">🧠 Extract text from image</button>
<button type="submit">Add Note</button> <button type="submit">Add Note</button>
</form> </form>
<div id="ocrModal" style="display:none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
<div style="background-color: #fff; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 300px; text-align: center; border-radius: 10px;">
<h3>Select an Image</h3>
<input type="file" id="ocrImageInput" accept="image/*"><br><br>
<button onclick="performOCR()">Extract</button>
<button onclick="closeOCRModal()">Cancel</button>
</div>
</div>
<div id="notes-container"> </div> <div id="notes-container"> </div>