├── LICENSE
├── README.md
├── Screenshot1_2023-07-18 14_58_00-Transcript Cleaner.png
├── Screenshot2_2023-07-18 14_58_06-Transcript Cleaner.png
└── transcript_cleaner.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Jeff Emanuel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # YouTube Transcript Cleaner
 2 | 
 3 | YouTube Transcript Cleaner is a simple web-based application that improves the readability of YouTube transcripts. It's designed to work best with transcripts obtained using the [Youtube Transcript Extractor Chrome Extension](https://chrome.google.com/webstore/detail/youtube-transcript-extrac/lclpibfglbkghjkdmpjkgehcnadcffdl).
 4 | 
 5 | ## Features
 6 | 
 7 | - Cleans transcripts by merging relevant lines and splitting text into sentences.
 8 | - Provides a reader mode with adjustable settings such as font size, content width, and font selection.
 9 | - Supports file upload and download for transcript cleaning.
10 | 
11 | ## Screenshots
12 | 
13 | ![Screenshot1](https://github.com/Dicklesworthstone/youtube_transcript_cleaner/blob/main/Screenshot1_2023-07-18%2014_58_00-Transcript%20Cleaner.png?raw=true)
14 | 
15 | ![Screenshot2](https://github.com/Dicklesworthstone/youtube_transcript_cleaner/blob/main/Screenshot2_2023-07-18%2014_58_06-Transcript%20Cleaner.png?raw=true)
16 | 
17 | ## How to Use
18 | 
19 | 1. Download the HTML file from this repository to your local machine.
20 | 2. Open the downloaded HTML file in your web browser.
21 | 3. Use the [Youtube Transcript Extractor Chrome Extension](https://chrome.google.com/webstore/detail/youtube-transcript-extrac/lclpibfglbkghjkdmpjkgehcnadcffdl) to extract a transcript from a YouTube video.
22 | 4. Paste the transcript into the 'Original Transcript' text area or upload a .txt file containing the transcript.
23 | 5. Click the 'Clean Transcript' button to process the transcript.
24 | 6. The cleaned transcript will appear in the 'Cleaned Transcript' text area.
25 | 7. You can download the cleaned transcript as a .txt file or view it in reader mode. Reader mode provides options to customize the viewing experience, including adjusting the font size and width, and switching between different fonts.
26 | 
27 | 
28 | ## How I made it Quickly and Easily:
29 | 
30 | [Transcript of Shared ChatGPT Conversation](https://chat.openai.com/share/ccefa576-b0af-49bf-8981-72bf78b45d69)
31 | 
32 | ---
33 | 
34 | Thanks for your interest in my open-source project! I hope you find it useful. You might also find my commercial web apps useful, and I would really appreciate it if you checked them out:
35 | 
36 | **[YoutubeTranscriptOptimizer.com](https://youtubetranscriptoptimizer.com)** makes it really quick and easy to paste in a YouTube video URL and have it automatically generate not just a really accurate direct transcription, but also a super polished and beautifully formatted written document that can be used independently of the video.
37 | 
38 | The document basically sticks to the same material as discussed in the video, but it sounds much more like a real piece of writing and not just a transcript. It also lets you optionally generate quizzes based on the contents of the document, which can be either multiple choice or short-answer quizzes, and the multiple choice quizzes get turned into interactive HTML files that can be hosted and easily shared, where you can actually take the quiz and it will grade your answers and score the quiz for you.
39 | 
40 | **[FixMyDocuments.com](https://fixmydocuments.com/)** lets you submit any kind of document— PDFs (including scanned PDFs that require OCR), MS Word and Powerpoint files, images, audio files (mp3, m4a, etc.) —and turn them into highly optimized versions in nice markdown formatting, from which HTML and PDF versions are automatically generated. Once converted, you can also edit them directly in the site using the built-in markdown editor, where it saves a running revision history and regenerates the PDF/HTML versions.
41 | 
42 | In addition to just getting the optimized version of the document, you can also generate many other kinds of "derived documents" from the original: interactive multiple-choice quizzes that you can actually take and get graded on; slick looking presentation slides as PDF or HTML (using LaTeX and Reveal.js), an in-depth summary, a concept mind map (using Mermaid diagrams) and outline, custom lesson plans where you can select your target audience, a readability analysis and grade-level versions of your original document (good for simplifying concepts for students), Anki Flashcards that you can import directly into the Anki app or use on the site in a nice interface, and more.
43 | 


--------------------------------------------------------------------------------
/Screenshot1_2023-07-18 14_58_00-Transcript Cleaner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dicklesworthstone/youtube_transcript_cleaner/ab0028ae0231e66019870fdb35b9ac1e2ed3d164/Screenshot1_2023-07-18 14_58_00-Transcript Cleaner.png


--------------------------------------------------------------------------------
/Screenshot2_2023-07-18 14_58_06-Transcript Cleaner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Dicklesworthstone/youtube_transcript_cleaner/ab0028ae0231e66019870fdb35b9ac1e2ed3d164/Screenshot2_2023-07-18 14_58_06-Transcript Cleaner.png


--------------------------------------------------------------------------------
/transcript_cleaner.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Transcript Cleaner</title>
  5 |     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  6 |     <script src="https://unpkg.com/compromise@13.10.2"></script>
  7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  8 | 
  9 |     <style>
 10 |         #reader {
 11 |             display: none;
 12 |             position: absolute;
 13 |             top: 0;
 14 |             left: 0;
 15 |             width: 100%;
 16 |             height: 100vh;
 17 |             background-color: #000;
 18 |             padding: 60px 50px 50px 50px;
 19 |             box-sizing: border-box;
 20 |             overflow-y: auto;
 21 |             font-family: 'Cambria', serif;
 22 |             color: #aaa;
 23 |             line-height: 1.6;
 24 |             font-size: 20px;
 25 |             text-align: justify;
 26 |             text-justify: inter-word;
 27 |         }
 28 | 
 29 |         #reader-content {
 30 |             max-width: 800px;
 31 |             margin: auto;
 32 |         }
 33 | 
 34 |         #close-reader {
 35 |             position: absolute;
 36 |             right: 20px;
 37 |             top: 20px;
 38 |             color: #aaa;
 39 |             cursor: pointer;
 40 |             font-size: 18px;
 41 |         }
 42 | 
 43 |         p {
 44 |             margin-bottom: 1em;
 45 |         }
 46 | 
 47 |         #settings {
 48 |             position: absolute;
 49 |             right: 20px;
 50 |             top: 50px;
 51 |             color: #aaa;
 52 |             cursor: pointer;
 53 |             display: none;
 54 |             font-size: 14px;
 55 |         }
 56 | 
 57 |         #reader:hover #settings {
 58 |             display: block;
 59 |         }
 60 |     </style>
 61 | </head>
 62 | <body>
 63 | 
 64 |     <div class="container">
 65 |         <h1>YouTube Transcript Cleaner</h1>
 66 |         <hr/>
 67 |         <div class="row">
 68 |             <div class="col-md-6">
 69 |                 <h3>Original Transcript</h3>
 70 |                 <textarea id="original" class="form-control" rows="10"></textarea>
 71 |                 <br/>
 72 |                 <button id="clean" class="btn btn-primary">Clean Transcript</button>
 73 |                 <input type="file" id="fileUpload" accept=".txt" style="display:none;">
 74 |                 <button id="uploadFile" class="btn btn-secondary">Upload File</button>
 75 |                 <button id="downloadFile" class="btn btn-secondary">Download Cleaned Transcript</button>
 76 |             </div>
 77 |             <div class="col-md-6">
 78 |                 <h3>Cleaned Transcript</h3>
 79 |                 <textarea id="cleaned" class="form-control" rows="10"></textarea>
 80 |                 <br/>
 81 |                 <button id="read" class="btn btn-success">Display Cleaned Transcript in Reader Mode</button>
 82 |             </div>
 83 |         </div>
 84 |         <br/>
 85 |         <div id="loading" style="display: none;">
 86 |             <h3>Processing... Please wait...</h3>
 87 |         </div>
 88 |     </div>
 89 | 
 90 |     <div id="reader">
 91 |         <div id="close-reader" onclick="closeReaderMode()">❌ Close</div>
 92 |         <div id="settings">
 93 |             🖥️ Text Size: 
 94 |             <button onclick="increaseFontSize()">➕</button>
 95 |             <button onclick="decreaseFontSize()">➖</button>
 96 |             Width: 
 97 |             <button onclick="increaseWidth()">➕</button>
 98 |             <button onclick="decreaseWidth()">➖</button>
 99 |             🖋️ Font: 
100 |             <select id="font-selector" onchange="changeFont()">
101 |                 <option>Cambria</option>
102 |                 <option>Georgia</option>
103 |                 <option>Times New Roman</option>
104 |                 <option>Palatino</option>
105 |                 <option>Garamond</option>
106 |             </select>
107 |             🖨️<button onclick="window.print()">Print</button>
108 |         </div>
109 |         <div id="reader-content"></div>
110 |     </div>
111 | 
112 |     <script>
113 |         function cleanTranscript() {
114 |             var inputText = document.getElementById('original').value;
115 |             var splitText = inputText.split('\n');
116 |             var cleanedText = '';
117 |             var currentLine = '';
118 |             
119 |             splitText.forEach(function(line) {
120 |                 if (line.startsWith('- ') || currentLine.endsWith(', ')) {
121 |                     currentLine += line.replace('- ', '') + ' ';
122 |                 } else {
123 |                     cleanedText += currentLine;
124 |                     currentLine = line + ' ';
125 |                 }
126 |             });
127 |             cleanedText += currentLine;
128 | 
129 |             // Split the cleaned text into sentences using compromise
130 |             var sentences = nlp(cleanedText).sentences().out('array');
131 |             var paragraphs = '';
132 |             var paragraph = '';
133 |             sentences.forEach(function(sentence, index) {
134 |                 paragraph += sentence.trim() + ' ';
135 |                 if ((index + 1) % 5 == 0) {
136 |                     paragraphs += '<p>' + paragraph + '</p>';
137 |                     paragraph = '';
138 |                 }
139 |             });
140 | 
141 |             // Add the last paragraph if it's not empty
142 |             if (paragraph != '') {
143 |                 paragraphs += '<p>' + paragraph + '</p>';
144 |             }
145 |             document.getElementById('cleaned').value = paragraphs;
146 |         }
147 | 
148 | 
149 |         function displayReaderMode() {
150 |             var text = document.getElementById('cleaned').value;
151 |             document.getElementById('reader').style.display = 'block';
152 |             document.getElementById('reader-content').innerHTML = text;
153 |         }
154 | 
155 |         function closeReaderMode() {
156 |             document.getElementById('reader').style.display = 'none';
157 |         }
158 | 
159 |         function increaseFontSize() {
160 |             var currentFontSize = parseFloat(window.getComputedStyle(document.getElementById('reader')).fontSize);
161 |             document.getElementById('reader').style.fontSize = (currentFontSize + 2) + 'px';
162 |         }
163 | 
164 |         function decreaseFontSize() {
165 |             var currentFontSize = parseFloat(window.getComputedStyle(document.getElementById('reader')).fontSize);
166 |             document.getElementById('reader').style.fontSize = (currentFontSize - 2) + 'px';
167 |         }
168 | 
169 |         function increaseWidth() {
170 |             var currentWidth = parseFloat(window.getComputedStyle(document.getElementById('reader-content')).maxWidth);
171 |             document.getElementById('reader-content').style.maxWidth = (currentWidth + 50) + 'px';
172 |         }
173 | 
174 |         function decreaseWidth() {
175 |             var currentWidth = parseFloat(window.getComputedStyle(document.getElementById('reader-content')).maxWidth);
176 |             document.getElementById('reader-content').style.maxWidth = (currentWidth - 50) + 'px';
177 |         }
178 | 
179 |         function changeFont() {
180 |             var newFont = document.getElementById('font-selector').value;
181 |             document.getElementById('reader').style.fontFamily = newFont;
182 |         }
183 | 
184 |         $('#clean').on('click', function() {
185 |             cleanTranscript();
186 |         });
187 | 
188 |         $('#read').on('click', function() {
189 |             displayReaderMode();
190 |         });
191 | 
192 |         $('#uploadFile').on('click', function() {
193 |             $('#fileUpload').trigger('click');
194 |         });
195 | 
196 |         $('#fileUpload').on('change', function(evt) {
197 |             var file = evt.target.files[0];
198 |             if (file) {
199 |                 var reader = new FileReader();
200 |                 reader.onload = function(e) {
201 |                     var contents = e.target.result;
202 |                     document.getElementById('original').value = contents;
203 |                     cleanTranscript();
204 |                 };
205 |                 reader.readAsText(file);
206 |             }
207 |         });
208 | 
209 |         $('#downloadFile').on('click', function() {
210 |             var cleanedText = document.getElementById('cleaned').value;
211 |             // Replace paragraph tags with newline characters to retain formatting
212 |             var textToDownload = cleanedText.replace(/<p>/g, '').replace(/<\/p>/g, '\n\n');
213 |             if (textToDownload) {
214 |                 var blob = new Blob([textToDownload], {type: 'text/plain'});
215 |                 var url = URL.createObjectURL(blob);
216 |                 var link = document.createElement('a');
217 |                 link.href = url;
218 |                 link.download = 'cleaned_transcript.txt';
219 |                 link.click();
220 |             }
221 |         });
222 | 
223 |     </script>
224 | </body>
225 | </html>


--------------------------------------------------------------------------------