|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Processed Text</title> |
|
<link |
|
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" |
|
rel="stylesheet" |
|
/> |
|
<link |
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" |
|
rel="stylesheet" |
|
/> |
|
<link |
|
rel="stylesheet" |
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" |
|
/> |
|
<style> |
|
body { |
|
font-family: "Poppins", sans-serif; |
|
background-color: #121212; |
|
color: #e0e0e0; |
|
margin: 0; |
|
padding: 20px; |
|
} |
|
h1 { |
|
color: #ffffff; |
|
margin-bottom: 20px; |
|
text-align: center; |
|
} |
|
textarea { |
|
width: 100%; |
|
height: 300px; |
|
background-color: #1e1e1e !important; |
|
color: #e0e0e0 !important; |
|
border: 1px solid #444 !important; |
|
border-radius: 5px; |
|
padding: 10px; |
|
margin-bottom: 20px; |
|
resize: none; |
|
} |
|
.btn-custom { |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
border-radius: 5px; |
|
font-size: 16px; |
|
cursor: pointer; |
|
transition: background-color 0.3s ease; |
|
display: flex; |
|
align-items: center; |
|
gap: 8px; |
|
} |
|
.btn-download { |
|
background-color: #ff9800; |
|
border: 1px solid #ff9800; |
|
} |
|
.btn-download:hover { |
|
background-color: transparent; |
|
border: 1px solid #ff9800; |
|
} |
|
.btn-reupload { |
|
background-color: #2196f3; |
|
border: 1px solid #2196f3; |
|
} |
|
.btn-reupload:hover { |
|
background-color: transparent; |
|
border: 1px solid #2196f3; |
|
} |
|
.btn-next { |
|
background-color: #4caf50; |
|
border: 1px solid #4caf50; |
|
} |
|
.btn-next:hover { |
|
background-color: transparent; |
|
border: 1px solid #4caf50; |
|
} |
|
.text-center { |
|
text-align: center; |
|
} |
|
.top-right { |
|
position: absolute; |
|
top: 20px; |
|
right: 20px; |
|
} |
|
.restart-button { |
|
margin-top: 20px; |
|
margin-left: 20px; |
|
display: flex; |
|
} |
|
.help-message { |
|
margin-top: 20px; |
|
padding: 15px; |
|
background-color: #33333359; |
|
border-radius: 5px; |
|
color: #e0e0e0; |
|
text-align: left; |
|
} |
|
.guide { |
|
background-color: #1e1e1e; |
|
padding: 20px; |
|
border-radius: 10px; |
|
margin-top: 20px; |
|
} |
|
.guide-button { |
|
position: fixed; |
|
top: 20px; |
|
right: 20px; |
|
z-index: 1000; |
|
} |
|
|
|
.guide-button a { |
|
font-size: 16px; |
|
color: #17a2b8; |
|
padding: 5px 10px; |
|
border-radius: 5px; |
|
text-decoration: none; |
|
} |
|
|
|
.guide-button a:hover { |
|
background-color: #138496b9; |
|
} |
|
|
|
.fas.fa-info-circle { |
|
margin-right: 5px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="guide-button"> |
|
<a href="{{ url_for('guide') }}" class="btn"> |
|
<i class="fas fa-info-circle"></i> Guide |
|
</a> |
|
</div> |
|
|
|
<form action="{{ url_for('remove_file') }}" method="post"> |
|
<input type="hidden" name="folder_type" value="uploads" /> |
|
<div class="restart-button"> |
|
<button type="submit" class="btn btn-danger"> |
|
<i class="bi bi-arrow-clockwise"></i> Restart |
|
</button> |
|
</div> |
|
</form> |
|
<div class="container position-relative"> |
|
|
|
|
|
|
|
|
|
|
|
<h1>Processed Text</h1> |
|
<label for="edited_text">Edit Extracted Text:</label> |
|
|
|
<form action="{{ url_for('save_and_download') }}" method="POST"> |
|
<div class="form-group"> |
|
<div class="progress"> |
|
<div |
|
class="progress-bar" |
|
role="progressbar" |
|
style="width: 20%" |
|
aria-valuenow="20" |
|
aria-valuemin="0" |
|
aria-valuemax="100" |
|
> |
|
Step 2 of 5 |
|
</div> |
|
</div> |
|
<textarea id="edited_text" name="edited_text" class="form-control"> |
|
{{ text }}</textarea |
|
> |
|
</div> |
|
<button type="submit" class="btn btn-custom btn-download mb-4"> |
|
<i class="bi bi-download"></i> Save and Download |
|
</button> |
|
</form> |
|
<div class="text-center mb-4"> |
|
<form action="{{ url_for('remove_file') }}" method="POST"> |
|
<button type="submit" class="btn btn-custom btn-reupload"> |
|
<i class="bi bi-upload"></i> Re-Upload |
|
</button> |
|
</form> |
|
</div> |
|
<div class="text-center mt-4"> |
|
<form action="{{ url_for('ner_preview') }}" method="GET"> |
|
<button type="submit" class="btn btn-custom btn-next"> |
|
<i class="bi bi-arrow-right"></i> Next |
|
</button> |
|
</form> |
|
</div> |
|
<div class="guide"> |
|
<h5>Instructions:</h5> |
|
<ol> |
|
<li> |
|
Review the extracted text to ensure it accurately reflects the |
|
content of your uploaded file. This preview is crucial for verifying |
|
the data's correctness. If you notice any discrepancies or errors, |
|
you can edit the text directly in the text area above. |
|
</li> |
|
<li>Download text file for further process</li> |
|
</ol> |
|
</div> |
|
{% with messages = get_flashed_messages() %} {% if messages %} |
|
<div class="alert alert-success mt-4" id="flash-message"> |
|
{{ messages[0] }} - You can now download your text or re-upload if |
|
needed. |
|
</div> |
|
{% endif %} {% endwith %} |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
<script> |
|
setTimeout(function () { |
|
let flashMessage = document.getElementById("flash-message"); |
|
if (flashMessage) { |
|
flashMessage.style.transition = "opacity 1s ease"; |
|
flashMessage.style.opacity = 0; |
|
setTimeout(() => flashMessage.remove(), 1000); |
|
} |
|
}, 3000); |
|
</script> |
|
</body> |
|
</html> |
|
|