Spaces:
Sleeping
Sleeping
| <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 ; | |
| color: #e0e0e0 ; | |
| border: 1px solid #444 ; | |
| 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> | |
| <!-- Guide Button --> | |
| <div class="guide-button"> | |
| <a href="{{ url_for('guide') }}" class="btn"> | |
| <i class="fas fa-info-circle"></i> Guide | |
| </a> | |
| </div> | |
| <!-- Restart Form --> | |
| <form action="{{ url_for('remove_files') }}" 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"> | |
| <!-- <div class="top-right"> | |
| <a href="{{ url_for('download_file') }}" class="btn btn-custom btn-download" title="Download the extracted text"> | |
| <i class="bi bi-download"></i> Download Extracted Text | |
| </a> | |
| </div> --> | |
| <h1>Processed Text</h1> | |
| <label for="edited_text">Edit Extracted Text:</label> | |
| <!-- <p class="text-center">Below is the text extracted from your uploaded file. Please review it carefully and make any necessary corrections before proceeding to the next step.</p> --> | |
| <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> | |