separate transcriber and process_video logic; add transcription preview form; python 3.12 (tempdir del)
0cb486a
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <style> | |
| /* CSS Styles */ | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background-color: #f0f0f0; | |
| color: #333; | |
| line-height: 1.6; | |
| text-align: center; | |
| padding-top: 50px; | |
| margin: 0; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1000px; /* Increased max width */ | |
| margin: auto; | |
| padding: 40px; /* Increased padding for more space */ | |
| background: #ffffff; | |
| border-radius: 8px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadowing */ | |
| transform: translateY(-35%); | |
| } | |
| h1 { | |
| color: #333; | |
| margin-bottom: 20px; | |
| } | |
| p { | |
| font-size: 18px; | |
| color: #666; | |
| margin-bottom: 30px; | |
| } | |
| .button { | |
| display: inline-block; | |
| padding: 15px 30px; /* Increased padding for larger buttons */ | |
| margin: 10px; | |
| border-radius: 4px; /* Slightly more rounded corners */ | |
| color: white; | |
| background-color: #4CAF50; | |
| text-decoration: none; | |
| font-size: 18px; | |
| transition: background-color 0.3s, box-shadow 0.3s; | |
| } | |
| .button:hover { | |
| background-color: #45a049; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle hover effect */ | |
| } | |
| .button.docs { | |
| background-color: #008CBA; | |
| } | |
| .button.docs:hover { | |
| background-color: #007BAA; | |
| } | |
| .footer { | |
| width: 100%; | |
| background-color: #f0f0f0; | |
| padding: 20px 0; | |
| position: absolute; | |
| bottom: 5rem; | |
| text-align: center; | |
| } | |
| .footer a { | |
| padding: 0.5rem; | |
| text-decoration: none; | |
| } | |
| .fa-github:hover { | |
| transform: scale(1.2) | |
| } | |
| .fa-github:hover { | |
| transform: scale(1.2) | |
| } | |
| .fa-github{ | |
| color: #000000 | |
| } | |
| .fa-linkedin:hover { | |
| transform: scale(1.2) | |
| } | |
| .fa-linkedin { | |
| color: #0077B5 | |
| } | |
| /* Responsiveness */ | |
| @media (max-width: 768px) { | |
| .container { | |
| width: 95%; | |
| padding: 20px; | |
| display: flex; /* Added to create a flex container */ | |
| flex-direction: column; /* Stack elements vertically */ | |
| align-items: center; /* Center-align items for a neat look */ | |
| } | |
| h1 { | |
| font-size: 24px; | |
| } | |
| p { | |
| font-size: 16px; | |
| text-align: center; /* Center text for a balanced appearance */ | |
| } | |
| .button { | |
| width: 80%; /* Set a specific width for both buttons */ | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| margin-bottom: 10px; /* Add some space between the buttons */ | |
| } | |
| /* Ensure buttons are the same size */ | |
| .button.submit, .button.docs { | |
| width: calc(80% - 20px); /* Adjusting width to account for padding */ | |
| } | |
| } | |
| @media (max-height: 500px) { | |
| body { | |
| padding-top: 20px; | |
| height: auto; | |
| } | |
| .container { | |
| align-items: center; /* Ensure center alignment in constrained height */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Multilang-ASR-Captioner</h1> | |
| <p>A multilingual automatic speech recognition and video captioning tool using faster whisper.<br> | |
| Supports real-time translation to english. Runs on consumer grade cpu.</p> | |
| <a href="/transcribe_video" class="button submit">Transcribe Video</a> | |
| <a href="/docs" class="button docs">Documentation</a> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p>Created by:</p> | |
| <a href="https://github.com/marquesafonso" class="github"><i class="fab fa-github fa-4x"></i></a> | |
| <a href="https://www.linkedin.com/in/marquesafonso" class="linkedin"><i class="fab fa-linkedin fa-4x"></i></a> | |
| </div> | |
| </body> | |
| </html> | |