PageSourceSearch

https://freetxt.app/fileanalysis

html freetxt.app collected 2026-10-05 23:03:39 UTC 98,986 bytes, 2,945 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    
6<!-- Metadata -->
7  <meta charset="UTF-8">
8  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9  <meta name="apple-mobile-web-app-title" content="CodePen">
10  <link rel="canonical" href="https://codepen.io/knyttneve/pen/eYdQbpN">
11  <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
12  <link rel="shortcut icon" type="image/x-icon" href="static/images/img/analysis/icon.ico">
13  <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">
14
15  <!-- Stylesheets -->
16  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
17  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
18  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
19  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
20  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
21  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
22  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
23  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
24  <link rel="stylesheet" type="text/css" href="https://unpkg.com/@ag-grid-community/all-modules/dist/styles/ag-grid.css">
25  <link rel="stylesheet" type="text/css" href="https://unpkg.com/@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css">
26  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
27  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.5.2/jq-3.3.1/dt-1.11.5/b-2.2.2/sl-1.3.3/datatables.min.css"/>
28  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
29  <link rel='stylesheet' href='static/css/style-template.css' />
30  <link rel='stylesheet' href='static/css/style-file-analysis.css' />
31
32  <!-- JavaScript Libraries -->
33  
33<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
33
34  
34<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
34
35  
35<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
35
36  
36<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
36
37  
37<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js" charset="utf-8"></script>
37
38  
38<script src="https://d3js.org/d3-scale-chromatic.v1.min.js" charset="utf-8"></script>
38
39  
39<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
39
40  
40<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
40
41  
41<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
41
42  
42<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
42
43  
43<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
43
44  
44<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.5.2/jq-3.3.1/dt-1.11.5/b-2.2.2/sl-1.3.3/datatables.min.js"></script>
44
45  
45<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
45
46  
46<script src="static/js/script.js"></script>
46
47  
47<script src="static/js/translations.js"></script>
47
48  
48<script src="static/js/script2.js"></script>
48
49  
49<script src="http://localhost:35729/livereload.js"></script>
49
50  <title>TestunRhydd/FreeTxt</title>
51<style>
52    .brands h3, .hero-unit .button-section a {
53  font-weight: 400;
54}
55
56.col-xs-12 {
57  width: 100%;
58}
59.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-13, .col-xl-14, .col-xl-15, .col-xl-16, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
60    float: left;
61    padding-left: 10px;
62    padding-right: 10px;
63}
64
65ul, menu, dir {
66  display: block;
67  list-style-type: disc;
68  -webkit-margin-before: 1em;
69  -webkit-margin-after: 1em;
70  -webkit-margin-start: 0px;
71  -webkit-margin-end: 0px;
72  -webkit-padding-start: 40px;
73}
74
75.brand-logos {
76  margin: 0;
77  padding: 0;
78}
79
80ul {
81  list-style-type: none;
82}
83
84.brand-logos li {
85  display: inline-block;
86  padding: 19px 25px 0;
87  vertical-align: middle;
88}
89
90.brands {
91  padding-top: 63px;
92  padding-bottom: 63px;
93}
94
95.text-center {
96  text-align: center;
97}
98.language-switcher {
99    width: 80px;
100    height: 30px;
101    border-radius: 20px;
102    background-color: #222;
103    position: relative;
104    overflow: hidden;
105    cursor: pointer;
106}
107
108.slider {
109    width: 160px; /* double the width of the switcher */
110    height: 30px;
111    display: flex;
112    align-items: center;
113    justify-content: space-between;
114    position: absolute;
115    transition: all 0.3s;
116}
117
118.lang-flag {
119    width: 40px;
120    height: 40px;
121    display: flex;
122    align-items: center;
123    justify-content: center;
124    flex-shrink: 0;
125}
126
127/* Start with English as the active language */
128#englishFlag {
129    background-color: rgba(0, 128, 255, 0.1); /* Light blue for English */
130}
131
132#welshFlag {
133    background-color: rgba(0, 128, 255, 0.1); /* Light black for Welsh */
134}
135
136.lang-flag[data-active="true"] {
137    background-color: rgba(255, 255, 255, 0.3); /* Light overlay for the active flag */
138}   
139.lang-label {
140    position: absolute;
141    top: 50%;
142    transform: translateY(-50%);
143    font-weight: bold;
144    font-size: 14px;
145    color : white;
146}
147
148#enLabel {
149    left: 5px;
150}
151
152#cyLabel {
153    right: 5px;
154}  
155
156#feedback-tab {
157    position: fixed;
158    right: 0;
159    top: 140px;
160    background: #0b0b0b;
161    padding: 0px;
162    border-top-left-radius: 5px;
163    border-bottom-left-radius: 5px;
164    z-index: 1000; /* Ensure it's on top */
165}
166/* Feedback Form Styles */
167#feedback-form {
168    display: none;
169    background: #fff;
170    padding: 20px;
171    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
172    margin-top: 10px;
173    width: 800px;
174    max-height: 500px;
175    z-index: 1001; /* Above the tab */
176    overflow-y: auto;
177}
178
179/* Feedback Button Styles */
180#feedback-button {
181    position: absolute;
182    left: -100px; /* Adjust as necessary */
183    top: 10px; /* Adjust as necessary */
184    padding: 5px 10px;
185    cursor: pointer;
186}
187
188/* Form Element Styles */
189#feedback-form {
190    max-width: 850px;
191    margin: 20px auto;
192    background: #fff;
193    padding: 20px;
194    border-radius: 8px;
195    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
196}
197
198input[type="text"],
199textarea,
200select {
201    width: 100%;
202    padding: 8px;
203    box-sizing: border-box;
204    border: 1px solid #ccc;
205    border-radius: 4px;
206    margin-bottom: 20px;
207    font-size: 1em;
208}
209
210/* Label Styles */
211label {
212    font-weight: bold;
213    display: block;
214    margin-bottom: 10px;
215}
216
217/* Textarea Styles */
218textarea {
219    padding: 10px;
220    box-sizing: border-box;
221    border: 1px solid #ccc;
222    border-radius: 5px;
223}
224
225/* Modal Styles */
226.modal {
227    position: fixed;
228    top: 0; left: 0; right: 0; bottom: 0;
229    background: rgba(0, 0, 0, 0.5);
230    display: flex;
231    align-items: center;
232    justify-content: center;
233}
234
235.modal button {
236    margin-top: 20px;
237}
238
239/* Range Slider Styles */
240.range-container {
241    display: flex;
242    align-items: center;
243    position: relative;
244}
245
246.range-labels {
247    display: flex;
248    justify-content: space-between;
249    position: absolute;
250    width: 80%;
251    top: 10px;
252    left: 0px;
253}
254
255input[type=range] {
256    -webkit-appearance: none; 
257    appearance: none;
258    width: 100%;
259    height: 5px;
260    border-radius: 5px;
261    background: #dcdcdc;
262    outline: none;
263    transition: opacity .2s;
264    margin: 20px 0;
265}
266
267/* Webkit (Chrome, Safari, etc.) Slider Thumb */
268input[type=range]::-webkit-slider-thumb {
269    -webkit-appearance: none;
270    appearance: none;
271    width: 20px;
272    height: 20px;
273    border-radius: 50%;
274    background: #007aff;
275    cursor: pointer;
276    transition: background .15s ease-in-out;
277}
278
279/* Firefox Slider Thumb */
280input[type=range]::-moz-range-thumb {
281    width: 20px;
282    height: 20px;
283    border: none;
284    border-radius: 50%;
285    background: #007aff;
286    cursor: pointer;
287    transition: background .15s ease-in-out;
288}
289
290/* Firefox Range Track */
291input[type=range]::-moz-range-track {
292    width: 100%;
293    height: 5px;
294    cursor: pointer;
295    animate: 0.2s;
296    border-radius: 5px;
297    background: #dcdcdc;
298}
299
300/* Question Container Styles */
301.question-container {
302    margin-bottom: 20px;
303    padding-bottom: 20px;
304    border-bottom: 1px solid #eee;
305}
306
307/* Checkbox and Radio Group Styles */
308.checkbox-group,
309.radio-group {
310    display: flex;
311    align-items: center;
312    margin-top: -2px;
313}
314
315.checkbox-group input[type="checkbox"],
316.radio-group input[type="radio"] {
317    margin-right: 5px;
318    margin-bottom: 8px;
319    width: 20px; /* Adjusted size */
320    height: 20px; /* Adjusted size */
321    vertical-align: middle;
322}
323
324.checkbox-group label,
325.radio-group label {
326    margin-left: 5px;
327    font-weight: normal;
328    display: flex;
329    align-items: center;
330}
331.range-container {
332    display: flex;
333    flex-direction: column; /* Stack elements vertically */
334    align-items: center;
335    position: relative;
336    margin-bottom: 20px; /* Space below the entire container */
337}
338
339/* Descriptive Labels Style */
340.range-descriptive-labels {
341    display: flex;
342    justify-content: space-between;
343    width: 100%; /* Full width of the container */
344    margin-bottom: 10px; /* Space above the slider */
345}
346
347input[type=range] {
348    -webkit-appearance: none; 
349    appearance: none;
350    width: 100%; /* Full width */
351    /* ... other styles ... */
352}
353
354/* Numeric Labels Style */
355.range-labels {
356    display: flex;
357    justify-content: space-between;
358    width: 100%; /* Full width of the container */
359    margin-top: 10px; /* Space below the slider */
360}
361
362.menu-toggle {
363    display: none; /* Show the menu toggle button */
364}
365
366.primary-menu {
367    display: flex; /* Hide the menu by default */
368}
369
370@media screen and (max-width: 600px) {
371    .header-navigation-wrapper {
372        position: relative; /* Ensure positioning context */
373        z-index: 2000; /* High z-index to bring header and its children to front */
374    }
375
376    .menu-toggle {
377        display: block; /* Show the menu toggle button */
378        cursor: pointer;
379        position: absolute; /* Position it within the header */
380        top: 10px; 
381        right: 10px; 
382        z-index: 2001; /* Ensure it's above the .primary-menu */
383        color: #fff; /* Ensure visibility */
384        background: #2c2a2a;  /* Contrast background */
385        padding: 10px;
386        font-size: 20px;
387    }
388
389    .primary-menu {
390        display: none; /* Hide the menu by default */
391        position: absolute; /* Absolute position */
392        top: 40px; /* Position below the toggle button */
393        left: 0;
394        width: 100%; /* Full width */
395        background: #2c2a2a; /* Background color for the menu */
396        box-shadow: 0 8px 16px rgb(7, 7, 7); /* Optional shadow for better visibility */
397        z-index: 2000; /* High z-index to ensure it's above other page content */
398        text-align: left;
399    }
400
401    .primary-menu li {
402        display: block; /* Stack the list items vertically */
403        text-align: left; /* Right-align the text */
404    }
405
406    .primary-menu a {
407        display: block; /* Block display for full-width links */
408        padding: 10px; /* Padding for touch friendliness */
409        color: #f3eaea; /* Text color */
410        text-decoration: none; /* Removes underline from links */
411    }
412    .primary-menu a:hover {
413        background-color: #010101; 
414        color: #c0b9b9;
415    }
416   
417}
418
419</style>
420
421<body>
422    <!-- Simplified Header -->
423    <div class="header-navigation-wrapper">
424   
425        <h1 style="color: white;"data-lang-en="FreeTxt" data-lang-cy="TestunRhydd">FreeTxt</h1>
426        <div class="menu-toggle">☰ Menu</div>
427         <nav>
428            
429            <ul class="primary-menu">
430                <li><a href="/" data-lang-en="Home" data-lang-cy="Hafan">Home</a></li>
431                <li><a href="/fileanalysis" data-lang-en="Analyse" data-lang-cy="Dadansoddi">Analyse</a></li>
432                <li><a href="/userguide" data-lang-en="User Guide" data-lang-cy="Canllaw i  Ddefnyddiwr">User Guide</a></li>
433                <li><a href="/about" data-lang-en="About" data-lang-cy="Amdanom">About</a></li>
434                <li><a href="http://digigrid.cymru/">GDC-WDG</a></li>
435
436            </ul>
437        </nav>
438   
439 <div class="language-switcher">
440          <div class="slider">
441              <span id="englishFlag" class="lang-flag" data-lang="en" data-active="true"></span>
442              <span id="welshFlag" class="lang-flag" data-lang="cy" data-active="false"></span>
443          </div>
444          <span class="lang-label" id="enLabel">CY</span>
445          <span class="lang-label" id="cyLabel">EN</span>
446  
447      </div>
448     <div class="toggle-container">
449            <input type="checkbox" id="darkModeToggleCheckbox" class="checkbox">
450            <label for="darkModeToggleCheckbox" class="label"></label>
451        </div>
452    </div>
453
454   <div id="feedback-tab" >
455      <button id="feedback-button" class = 'analyze-btn' data-lang-en="Feedback" data-lang-cy="Adborth">Feedback</button>
456      
457
458<form id = "feedback-form" method="post" action="/">
459    <div class="question-container">
460    <label for="role" data-lang-en="Role and affiliation:" data-lang-cy="Swydd a sefydliad:">Role and affiliation:</label><br>
461    <input type="text" id="role" name="role" required><br>
462</div>
463<div class="question-container">
464    <label data-lang-en="Is this the first time you have used FreeTxt?" data-lang-cy="Ai dyma'r tro cyntaf i chi ddefnyddio TestunRhydd?">Is this the first time you have used FreeTxt?</label>
465    <div class="radio-group">
466        <input type="radio" id="yes" name="first_time" value="Yes" required>
467        <label for="yes" data-lang-en="Yes" data-lang-cy="Ie">Yes</label>
468    </div>
469    <div class="radio-group">
470        <input type="radio" id="no" name="first_time" value="No" required>
471        <label for="no" data-lang-en="No" data-lang-cy="Nage">No</label>
472    </div>
473</div>
474<div class="question-container">
475    <label for="future_use" data-lang-en="How likely are you to use FreeTxt again in the future?" data-lang-cy="Pa mor debygol ydych chi o ddefnyddio TestunRhydd eto yn y dyfodol?">How likely are you to use FreeTxt again in the future?</label><br>
476    <div class="range-container">
477        <div class="range-descriptive-labels">
478            <span data-lang-en="Very unlikely" data-lang-cy="Annhebygol iawn">Very unlikely</span>
479            <span data-lang-en="Very likely" data-lang-cy="Tebygol iawn">Very likely</span>
480        </div>
481        <input type="range" id="future_use" name="future_use" min="1" max="5" required>
482        <div class="range-labels">
483            <span>1</span>
484            <span>2</span>
485            <span>3</span>
486            <span>4</span>
487            <span>5</span>
488        </div>
489    </div>
490       
491</div>
492<div class="question-container">
493    <label data-lang-en="How easy did you find FreeTxt to use?" data-lang-cy="Pa mor hawdd oedd defnyddio TestunRhydd i chi?">How easy did you find FreeTxt to use?</label><br>
494    
495    <div class="range-container">
496        <div class="range-descriptive-labels">
497        <span data-lang-en="Strongly Disagree" data-lang-cy="Anghytuno'n Gryf">Strongly Disagree</span>
498        
499        <span data-lang-en="Strongly Agree" data-lang-cy="Cytuno'n Gryf">Strongly Agree</span>
500
501        </div>
502        <input type="range" id="ease_of_use" name="ease_of_use" min="1" max="5" required>
503        <div class="range-labels">
504            <span>1</span>
505            <span>2</span>
506            <span>3</span>
507            <span>4</span>
508            <span>5</span>
509        </div>
510    </div>
511</div>
512<div class="question-container">
513    <label data-lang-en="Which particular FreeTxt tool(s) do you most like, and why? (Select all that apply)" data-lang-cy="Pa offer(yn) penodol yn TestunRhydd ydych chi'n eu/ei hoffi fwyaf, a pham? (Dewiswch bob un sy'n gymwys)">Which particular FreeTxt tool(s) do you most like, and why? (Select all that apply)</label><br>
514    <div class="checkbox-group">
515        <input type="checkbox" id="liked-sentimentAnalysis" name="likedTools" value="Sentiment Analysis">
516        <label for="sentimentAnalysis" data-lang-en="Sentiment analysis (pie chart and bar graph)" data-lang-cy="Dadansoddi sentiment (siart cylch a graff bar)">Sentiment analysis (pie chart and bar graph)</label>
517    </div>
518    
519    <div class="checkbox-group">
520        <input type="checkbox" id="liked-reviewsKeywordScatter" name="likedTools" value="Reviews Keyword Scatter">
521        <label for="reviewsKeywordScatter"data-lang-en="Positive and negative reviews: keyword scatter" data-lang-cy="Adolygiadau cadarnhaol a negyddol: gwasgariad allweddeiriau">Positive and negative reviews: keyword scatter</label>
522    </div>
523
524    <div class="checkbox-group">
525        <input type="checkbox" id="liked-summariser" name="likedTools" value="Summariser">
526        <label for="summariser"data-lang-en="Summariser" data-lang-cy="Crynodebu">Summariser</label>
527    </div>
528    
529    <div class="checkbox-group">
530        <input type="checkbox" id="liked-wordCloud" name="likedTools" value="Word Cloud">
531        <label for="wordCloud"data-lang-en="Word cloud" data-lang-cy="Cwmwl Geiriau">Word cloud</label>
532    </div>
533
534    <div class="checkbox-group">
535        <input type="checkbox" id="liked-wordUse" name="likedTools" value="Word Use and Relationships">
536        <label for="wordUse" data-lang-en="Word use and relationships (keyword representation and network graph)" data-lang-cy="Defnydd a pherthnasoedd geiriau (cynrychioli allweddeiriau a graff rhwydweithiau)">Word use and relationships (keyword representation and network graph)</label>
537    </div>
538
539    <div class="checkbox-group">
540        <input type="checkbox" id="liked-wordTree" name="likedTools" value="Word Tree">
541        <label for="wordTree" data-lang-en="Word tree" data-lang-cy="Coeden Eiriau">Word tree</label>
542    </div>
543    
544    <label for="likedTools"data-lang-en="Other:" data-lang-cy="Arall:">Other:</label>
545    <input type="text" id="likedToolsOther" name="likedToolsOther">
546</div>
547
548<div class="question-container">
549    <label data-lang-en="Which particular FreeTxt tool(s) do you least like, and why? (Select all that apply)" data-lang-cy="Pa offer(yn) penodol yn TestunRhydd ydych chi'n eu/ei hoffi leiaf, a pham? (Dewiswch bob un sy'n gymwys)">Which particular FreeTxt tool(s) do you least like, and why? (Select all that apply)</label><br>
550    <div class="checkbox-group">
551        <input type="checkbox" id="leastLiked-sentimentAnalysis" name="least_liked_tools" value="Sentiment Analysis">
552        <label for="sentimentAnalysis" data-lang-en="Sentiment analysis (pie chart and bar graph)" data-lang-cy="Dadansoddi sentiment (siart cylch a graff bar)">Sentiment analysis (pie chart and bar graph)</label>
553    </div>
554    
555    <div class="checkbox-group">
556        <input type="checkbox" id="leastLiked-reviewsKeywordScatter" name="least_liked_tools" value="Reviews Keyword Scatter">
557        <label for="reviewsKeywordScatter"data-lang-en="Positive and negative reviews: keyword scatter" data-lang-cy="Adolygiadau cadarnhaol a negyddol: gwasgariad allweddeiriau">Positive and negative reviews: keyword scatter</label>
558    </div>
559
560    <div class="checkbox-group">
561        <input type="checkbox" id="leastLiked-summariser" name="least_liked_tools" value="Summariser">
562        <label for="summariser"data-lang-en="Summariser" data-lang-cy="Crynodebu">Summariser</label>
563    </div>
564    
565    <div class="checkbox-group">
566        <input type="checkbox" id="leastLiked-wordCloud" name="least_liked_tools" value="Word Cloud">
567        <label for="wordCloud"data-lang-en="Word cloud" data-lang-cy="Cwmwl Geiriau">Word cloud</label>
568    </div>
569
570    <div class="checkbox-group">
571        <input type="checkbox" id="leastLiked-wordUse" name="least_liked_tools" value="Word Use and Relationships">
572        <label for="wordUse" data-lang-en="Word use and relationships (keyword representation and network graph)" data-lang-cy="Defnydd a pherthnasoedd geiriau (cynrychioli allweddeiriau a graff rhwydweithiau)">Word use and relationships (keyword representation and network graph)</label>
573    </div>
574
575    <div class="checkbox-group">
576        <input type="checkbox" id="leastLiked-wordTree" name="least_liked_tools" value="Word Tree">
577        <label for="wordTree" data-lang-en="Word tree" data-lang-cy="Coeden Eiriau">Word tree</label>
578    </div>
579    
580    <label for="least_liked_tools"data-lang-en="Other:" data-lang-cy="Arall:">Other:</label>
581    <input type="text" id="leastLikedToolsOther" name="leastLikedToolsOther">
582</div>
583    
584
585    <div class="question-container">
586        <label for="future_anticipation" data-lang-en="How do you anticipate that you or others will use FreeTxt in the future?" data-lang-cy="Sut ydych chi'n rhagweld y byddwch chi neu eraill yn defnyddio TestunRhydd yn y dyfodol?">How do you anticipate that you or others will use FreeTxt in the future?</label>
587        <textarea id="future_anticipation" name="future_anticipation" required></textarea>
588    </div>
589    <div class="question-container">
590        <label for="additional_functionalities" data-lang-en="What additional functionalities/utilities would you like us to include in FreeTxt in the future?" data-lang-cy="Pa nodweddion/gwasanaethau ychwanegol hoffech chi i ni eu cynnwys yn TestunRhydd yn y dyfodol?">What additional functionalities/utilities would you like us to include in FreeTxt in the future?</label>
591        <textarea id="additional_functionalities" name="additional_functionalities" required></textarea>
592    </div>
593    <div class="question-container">
594        <label for="additional_comments" data-lang-en="Add any additional comments or suggestions below:" data-lang-cy="Ychwanegwch unrhyw sylwadau neu awgrymiadau ychwanegol isod:">Add any additional comments or suggestions below:</label>
595        <textarea id="additional_comments" name="additional_comments" required></textarea>
596    </div>
597
598    <button class = 'analyze-btn'  value="Submit" data-lang-en="Submit" data-lang-cy="Anfon">Submit</button>
599</form>  
600
601  </div>  
602   
603    
604    <main class="content-container">
605        
606<style>
607  body {
608    margin: 0;
609    padding: 0;
610  }
611
612  .content-container {
613    margin: 20px; /* Margin around the edges */
614    padding: 20px; /* Padding inside the div */
615    max-width: 90%; /* Maximum width of the div */
616    margin-left: auto; /* Centering the div */
617    margin-right: auto; /* Centering the div */
618  }
619  h2 {
620    color: #333;
621  }
622  .color-boxes {
623    justify-content: center;
624    align-content: center;
625    display: flex;
626    gap: 20px;
627    margin-top: 20px;
628    margin-bottom: 20px;
629  }
630  .color-box {
631    padding: 20px;
632    border-radius: 10px;
633    color: white;
634    width: 150px;
635    text-align: center;
636    font-weight: bold;
637  }
638  .blue {
639    background: linear-gradient(to right, #003366, #0066cc, #0099cc, #00ccff);
640  }
641  .red {
642    background: linear-gradient(to right, #660000, #990000, #cc0000, #ff6666);
643  }
644  .yellow {
645    background: linear-gradient(to right, #ffcc00, #ffdd33f5, #ffee66, #ffff99);
646    color: black;
647  }
648  .orange {
649    background: linear-gradient(to right, #cc6600, #ff9933, #ffad33, #ffcc66);
650  }
651  .image-container {
652    display: flex;
653    justify-content: center;
654    align-items: center;
655    height: 100%; /* Adjust this value based on your needs */
656  }
657  .hidden-checkbox {
658    display: none;
659  }
660
661  .checkbox-option {
662    cursor: pointer;
663    flex: 0 0 calc(50% - 30px);
664    box-sizing: border-box;
665    height: 150px;
666    border: 1px solid gray;
667    margin: 10px;
668    padding: 10px;
669    text-align: center;
670    vertical-align: middle;
671    float: left;
672  }
673
674  .checkbox-option.selected {
675    border: 3px solid #ffd700; /* Gold border to indicate selected state */
676  }
677  .tab-content {
678    display: flex;
679    flex-wrap: wrap;
680    justify-content: space-between; /* Adjusts spacing between the grid and the button */
681  }
682  /* Sample grid layout */
683  .grid {
684    display: flex;
685    flex-wrap: wrap;
686    gap: 20px; /* Space between squares */
687    flex-wrap: wrap; /* Allow the blocks to wrap to the next line if there's not enough space */
688    flex: 1; /* Allows the grid to take the available space */
689    margin-right: 20px;
690  }
691
692  .grid .square {
693    transition: transform 0.3s, box-shadow 0.3s;
694    /* Increased width */
695    box-sizing: border-box; /* To ensure padding doesn't affect width */
696    padding: 20px;
697    display: flex;
698    flex-direction: column;
699    align-items: center;
700    justify-content: center; /* This will center the content vertically */
701    text-decoration: none;
702    color: white;
703    position: relative;
704  }
705
706  .flex-container {
707    display: flex;
708    align-items: center; /* This will vertically center the grid and the button */
709  }
710
711  #generatePdfBtn {
712    background-color: #2e2e2f; /* Blue color */
713    color: white;
714    border: none;
715    border-radius: 5px;
716    padding: 10px 20px;
717    font-size: 24px;
718    cursor: pointer;
719    display: flex;
720    align-items: center;
721    gap: 10px; /* Space between the icon and the text */
722    transition: background-color 0.3s;
723    height: 550px;
724  }
725
726  #generatePdfBtn:hover {
727    background-color: #0c0c0c; /* Darker blue color on hover */
728  }
729  /* Styling the file input */
730  #file-to-analyze input[type="file"] {
731    padding: 10px;
732    border: 1px solid #d4d4d4;
733    margin-right: 10px;
734    cursor: pointer;
735    appearance: none; /* Remove the default browser styling */
736    border-radius: 4px;
737    outline: none;
738  }
739
740  #file-to-analyze:hover input[type="file"] {
741    border-color: #050505;
742  }
743
744  .hover-content {
745    position: absolute;
746    top: 0;
747    left: 0;
748    width: 100%;
749    height: 100%;
750    display: flex;
751    align-items: center !important;
752    justify-content: center !important;
753    background-color: rgba(0, 0, 0, 0.8); /* semi-transparent black */
754    color: white; /* text color */
755    opacity: 0; /* hidden initially */
756    transition: opacity 0.3s;
757    pointer-events: none; /* to make sure the hover-content doesn't interfere with the clickability of the square */
758  }
759  .grid .square:hover {
760    transform: translateY(-10px);
761    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
762  }
763  .grid .square:hover .hover-content {
764    opacity: 1; /* show on hover */
765  }
766
767  .generate-button-container {
768    flex-basis: auto; /* Adjusts the width of the button container */
769    align-self: center; /* Vertically centers the button in case the grid is taller */
770  }
771
772  .btn-list {
773    list-style-type: none; /* Remove bullet points */
774    padding: 0;
775    display: flex;
776    justify-content: space-around;
777  }
778
779  .analyze-btnn {
780    display: inline-block;
781    font-weight: bold;
782    color: white;
783    padding: 12px 24px;
784    border: none;
785    border-radius: 25px; /* Gives a rounded corner */
786    text-decoration: none; /* Remove underlines */
787    transition: transform 0.2s, box-shadow 0.2s; /* Transition for smooth hover effect */
788    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* A subtle shadow for depth */
789    cursor: pointer; /* Indicate it's clickable */
790  }
791
792  .btn-gradient {
793    background: linear-gradient(
794      45deg,
795      #ff6b81,
796      #7754d7
797    ); /* Gradient background */
798  }
799
800  .analyze-btnn:hover {
801    transform: translateY(-2px); /* Moves the button up slightly */
802    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Increase shadow on hover */
803  }
804  .column-label {
805    display: inline-block;
806    border: 1px solid #ccc;
807    margin-right: 10px;
808    padding: 5px;
809    border-radius: 5px;
810  }
811
812  .column-label button {
813    background-color: red;
814    color: white;
815    border: none;
816    border-radius: 50%;
817    width: 20px;
818    height: 20px;
819    line-height: 20px;
820    text-align: center;
821    margin-left: 10px;
822    cursor: pointer;
823  }
824  #text-to-analyze {
825    width: 100%;
826    height: 300px;
827    min-width: 200px;
828    resize: vertical; /* This allows the user to resize the textarea vertically */
829  }
830  .input-container {
831    width: 100%;
832    height: auto;
833    margin: auto;
834  }
835
836  #example-options {
837    background-color: #f7f7f7; /* Light grey background */
838    padding: 20px; /* Padding around container */
839    border-radius: 10px; /* Rounded corners */
840    width: 100%; /* Fixed width */
841    margin: 20px auto; /* Centered on the page with a top and bottom margin of 20px */
842    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
843    display: none; /* Initially hidden as per your class "hidden" */
844  }
845
846  /* Select box styles */
847  #example-data {
848    width: 100%; /* Takes full width of container */
849    padding: 10px; /* Padding inside the select box */
850    border-radius: 5px; /* Rounded corners */
851    border: 1px solid #ccc; /* Border color */
852    margin-bottom: 10px; /* Space between select box and button */
853  }
854  /* Styling for the custom file label */
855  .custom-file-label {
856    display: inline-block;
857    padding: 10px;
858    border: 1px solid #d4d4d4;
859    cursor: pointer;
860    appearance: none;
861    border-radius: 4px;
862    outline: none;
863    background-color: #fff;
864    transition: background-color 0.2s ease;
865  }
866
867  .custom-file-label:hover {
868    background-color: #f5f5f5;
869  }
870  #file-to-analyze {
871    flex-direction: column;
872    gap: 20px; /* adjusts the space between the file input and button */
873    align-items: flex-start;
874    padding: 15px;
875    border: 1px solid #e0e0e0; /* assuming there's a border on your example data section */
876    border-radius: 5px;
877    background-color: #f9f9f9; /* assuming there's a light background on your example data section */
878    width: 100%;
879    margin: 0 auto;
880  }
881
882  .file-upload {
883    display: flex;
884    align-items: center;
885    gap: 15px; /* adjusts the space between the label and file name */
886    width: 100%;
887    position: relative;
888  }
889
890  .custom-file-upload {
891    background-color: #1b1b1c; /* using a blue color as an example, adjust if needed */
892    color: #fff;
893    padding: 8px 15px;
894    border-radius: 4px;
895    cursor: pointer;
896    transition: background-color 0.3s;
897  }
898
899  .custom-file-upload:hover {
900    background-color: #4f5051; /* hover effect, a darker shade of blue */
901  }
902
903  .file-name {
904    flex-grow: 1; /* allows the filename span to take available space */
905    padding: 8px 10px;
906    border: 1px solid #d4d4d4;
907    border-radius: 4px;
908    background-color: #ffffff;
909    overflow: hidden;
910    white-space: nowrap;
911    text-overflow: ellipsis;
912  }
913
914  .input-hidden {
915    position: absolute;
916    opacity: 0;
917    top: 0;
918    left: 0;
919    width: 100%;
920    height: 100%;
921    cursor: pointer;
922    background-color: black;
923  }
924
925  /* Container Style */
926  .column-selection-container {
927    width: 100%; /* Set to the full width of its parent container */
928    padding: 10px 20px;
929    background-color: #f7f7f7;
930    border-bottom: 1px solid #e0e0e0;
931  }
932
933  /* Heading style */
934  .column-selection-container h4 {
935    font-size: 1.2em;
936    color: #333;
937    margin-bottom: 15px;
938    border-bottom: 2px solid #ff4000;
939    padding-bottom: 10px;
940  }
941
942  /* Dropdown container style */
943  .columns-dropdown-container {
944    width: 100%;
945    position: relative; /* This will help if you want to add any absolute positioned elements inside */
946  }
947
948  /* Style for the dropdown */
949  .styled-dropdown {
950    width: 100%;
951    min-height: 150px;
952    border: 1px solid #e0e0e0;
953    padding: 10px;
954    border-radius: 4px;
955    font-size: 1em;
956    background-color: #fff;
957    appearance: none;
958    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
959    outline: none;
960    transition: border 0.2s;
961  }
962
963  .styled-dropdown:focus {
964    border-color: #007bff;
964 /* Accent color when focused */
965  }
966
967  .styled-dropdown option {
968    padding: 5px 10px;
969    margin: 3px 0;
970    cursor: pointer;
971    transition: background-color 0.2s;
972  }
973
974  .styled-dropdown option:hover {
975    background-color: #e6f7ff; /* A light blue hover effect for options */
976  }
977
978  /* Optional custom scrollbar */
979  .styled-dropdown::-webkit-scrollbar {
980    width: 10px;
981  }
982
983  .styled-dropdown::-webkit-scrollbar-track {
984    background: #f1f1f1;
985  }
986
987  .styled-dropdown::-webkit-scrollbar-thumb {
988    background: #b0b0b0;
989  }
990
991  .styled-dropdown::-webkit-scrollbar-thumb:hover {
992    background: #808080;
993  }
994
995  /* General Slider Styles */
996  input[type="range"] {
997    -webkit-appearance: none;
998    appearance: none;
999    width: 100%;
1000    height: 5px;
1001    border-radius: 5px;
1002    background: #dcdcdc;
1003    outline: none;
1004    transition: opacity 0.2s;
1005    margin: 20px 0;
1006  }
1007
1008  /* Style for Webkit (Chrome, Safari, etc.) */
1009  input[type="range"]::-webkit-slider-thumb {
1010    -webkit-appearance: none;
1011    appearance: none;
1012    width: 20px;
1013    height: 20px;
1014    border-radius: 50%;
1015    background: #007aff;
1016    cursor: pointer;
1017    transition: background 0.15s ease-in-out;
1018  }
1019
1020  /* Style for Firefox */
1021  input[type="range"]::-moz-range-thumb {
1022    width: 20px;
1023    height: 20px;
1024    border: none;
1025    border-radius: 50%;
1026    background: #007aff;
1027    cursor: pointer;
1028    transition: background 0.15s ease-in-out;
1029  }
1030
1031  /* Style for Firefox (range track) */
1032  input[type="range"]::-moz-range-track {
1033    width: 100%;
1034    height: 5px;
1035    cursor: pointer;
1036    transition: all 0.2s;
1037    border-radius: 5px;
1038    background: #dcdcdc;
1039  }
1040
1041  /* Tooltip styles for displaying the value */
1042  input[type="range"]::after {
1043    content: attr(value);
1044    position: absolute;
1045    top: -30px;
1046    left: 50%;
1047    transform: translateX(-50%);
1048    background-color: #007aff;
1049    color: white;
1050    padding: 4px 8px;
1051    border-radius: 8px;
1052    font-size: 14px;
1053    white-space: nowrap;
1054  }
1055  .file-instruction {
1056    font-size: 0.8em;
1057    color: #888;
1058    display: block;
1059    margin-top: 5px;
1060  }
1061
1062  #select-option-btn {
1063    font-weight: bold;
1064    margin-bottom: 15px;
1065    padding: 10px;
1066    border: 1px solid #ddd;
1067    border-radius: 5px;
1068  }
1069
1070  #select-option-btn:hover {
1071    color: #666;
1072  }
1073
1074  /* Style the container with class sentiment-option */
1075  .sentiment-option {
1076    margin-bottom: 15px;
1077    padding: 10px;
1078    border: 1px solid #ddd;
1079    border-radius: 5px;
1080  }
1081
1082  /* Style for radio buttons within the sentiment-option class */
1083
1084  .sentiment-option input[type="radio"],
1085  .sentiment-option label {
1086    display: inline-block;
1087    vertical-align: middle; /* Align them vertically to the middle */
1088  }
1089  /* Style for labels within the sentiment-option class */
1090  .sentiment-option label {
1091    font-weight: bold;
1092    color: #333;
1093    cursor: pointer;
1094  }
1095  .sentiment-option input[type="radio"] {
1096    margin-right: 5px; /* Space between radio button and label */
1097    padding: 0;
1098  }
1099
1100  .sentiment-option label {
1101    margin: 0;
1102    padding: 0;
1103  }
1104
1105  /* Adding hover effect */
1106  .sentiment-option label:hover {
1107    color: #666;
1108  }
1109
1110  /* Responsive adjustments */
1111  @media screen and (max-width: 600px) {
1112    .sentiment-option label {
1113      font-size: 14px;
1114    }
1115  }
1116  /* Styles for smaller screens */
1117  @media only screen and (max-width: 768px) {
1118    #text-to-analyze {
1119      width: 95%;
1120    }
1121  }
1122  @media (max-width: 480px) {
1123    .input-container {
1124      font-size: 0.8rem; /* Smaller font size for mobile devices */
1125      padding: 0.5em; /* Smaller padding for mobile devices */
1126    }
1127  }
1128  @media (max-width: 768px) {
1129    .square {
1130      min-width: calc(50% - 20px); /* Two items per row on smaller screens */
1131    }
1132    .text-size-60 {
1133      font-size: 40px; /* Reduce the font size */
1134    }
1135    .hover-content img {
1136      max-width: 70%; /* Reduce the image size */
1137    }
1138    h3 {
1139      font-size: 1rem; /* Adjust heading size */
1140    }
1141  }
1142
1143  /* Media query for very small screens (e.g., up to 480px width) */
1144  @media (max-width: 480px) {
1145    .square {
1146      min-width: 100%; /* One item per row on very small screens */
1147    }
1148  }
1149</style>
1150<!-- DataTables CSS -->
1151<link
1152  rel="stylesheet"
1153  type="text/css"
1154  href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css"
1155/>
1156
1157<!-- noUiSlider CSS -->
1158<link
1159  href="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css"
1160  rel="stylesheet"
1161/>
1162
1163<!-- Date Range Picker CSS -->
1164<link
1165  rel="stylesheet"
1166  type="text/css"
1167  href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"
1168/>
1169
1170
1171<h1
1172  data-lang-en="How would you like to start your analysis?"
1173  data-lang-cy="Sut hoffech chi ddechrau eich dadansoddiad?"
1174>
1175  How would you like to start your analysis?
1176</h1>
1177
1178<form
1179  id="text-analysis-form"
1180  method="POST"
1181  action="/fileanalysis"
1182  enctype="multipart/form-data"
1183>
1184  <!-- Radio buttons -->
1185  <label>
1186    <input
1187      type="radio"
1188      name="input-method"
1189      value="text"
1190      onclick="toggleInputOption('text')"
1191      checked
1192      data-lang-en="Past a text"
1193      data-lang-cy="Gludo testun"
1194    />
1195    <span data-lang-en="Paste a text" data-lang-cy="Gludo testun"
1196      >Paste a text</span
1197    >
1198  </label>
1199
1200  <label>
1201    <input
1202      type="radio"
1203      name="input-method"
1204      value="example"
1205      onclick="toggleInputOption('example')"
1206      data-lang-en="Use example data"
1207      data-lang-cy="Defnyddio data enghreifftiol"
1208    />
1209    <span
1210      data-lang-en="Use example data"
1211      data-lang-cy="Defnyddio data enghreifftiol"
1212      >Use example data</span
1213    >
1214  </label>
1215  <label>
1216    <input
1217      type="radio"
1218      name="input-method"
1219      value="upload"
1220      onclick="toggleInputOption('upload')"
1221      data-lang-en="Upload data file"
1222      data-lang-cy="Llwytho ffeil ddata i fyny"
1223    />
1224    <span
1225      data-lang-en="Upload data file"
1226      data-lang-cy="Llwytho ffeil ddata i fyny"
1227      >Upload data file</span
1228    >
1229  </label>
1230  <div id="text-input" class="input-container mb-4">
1231    <textarea
1232      class="data-input"
1233      name="text-to-analyze"
1234      id="text-to-analyze"
1235      value="text"
1236    ></textarea>
1237    <div class="options-container">
1238      <label>
1239        <input
1240          type="radio"
1241          name="text-input-method"
1242          value="Split sentences"
1243          data-lang-en="Split sentences"
1244          data-lang-cy="Rhannu brawddegau"
1245          checked
1246        />
1247        <span data-lang-en="Split sentences" data-lang-cy="Rhannu brawddegau"
1248          >Split sentences</span
1249        >
1250      </label>
1251      <label>
1252        <input
1253          type="radio"
1254          name="text-input-method"
1255          value="Whole Text"
1256          data-lang-en="Whole text"
1257          data-lang-cy="Testun cyfan"
1258        />
1259        <span data-lang-en="Whole text" data-lang-cy="Testun cyfan"
1260          >Whole text</span
1261        >
1262      </label>
1263    </div>
1264
1265    <button
1266      type="submit"
1267      class="analyze-btn"
1268      onclick="startAnalysisfile(event)"
1269      data-lang-en="View Data"
1270      data-lang-cy="Gweld Data"
1271    >
1272      View Data
1273    </button>
1274  </div>
1275
1276  <div id="example-options" class="hidden">
1277    <select id="example-data" name="example-data" class="data-input">
1278      <option
1279        value=""
1280        data-lang-en="Select example data file"
1281        data-lang-cy="Dewis ffeil ddata enghreifftiol"
1282      >
1283        Select example data file
1284      </option>
1285
1286      <!-- List example data files here -->
1287    </select>
1288    <button
1289      type="submit"
1290      class="analyze-btn"
1291      data-lang-en="View Data"
1292      data-lang-cy="Gweld Data"
1293      onclick="startAnalysisexample_uploaded(event)"
1294    >
1295      View Data
1296    </button>
1297  </div>
1298
1299  <div id="file-to-analyze" class="hidden">
1300    <div class="file-upload">
1301      <label
1302        for="file"
1303        class="custom-file-upload"
1304        data-lang-en="Choose File"
1305        data-lang-cy="Dewiswch Ffeil"
1306        >Choose File</label
1307      >
1308      <span
1309        class="file-name"
1310        data-lang-en="No file chosen (Allowed: .txt, .tsv, .xlsx)"
1311        data-lang-cy="Dim ffeil wedi'i ddewis (Caniateir: .txt, .tsv, .xlsx)"
1312        >No file chosen (Allowed: .txt, .tsv, .xlsx)</span
1313      >
1314
1315      <input
1316        id="file"
1317        class="input-hidden"
1318        type="file"
1319        name="file"
1320        accept=".txt,.csv,.xls,.xlsx"
1321        onchange="handleFileChange()"
1322      />
1323    </div>
1324    <button
1325      type="submit"
1326      class="analyze-btn"
1327      data-lang-en="View Data"
1328      data-lang-cy="Gweld Data"
1329      onclick="startAnalysisfile_uploaded(event)"
1330    >
1331      View Data
1332    </button>
1333  </div>
1334  <div id="column-selection" class="column-selection-container hidden">
1335    <h4 data-lang-en="Select columns" data-lang-cy="Dewis colofnau">
1336      Select columns
1337    </h4>
1338    <div id="columns-container" class="columns-dropdown-container">
1339      <select
1340        id="columns-dropdown"
1341        multiple="multiple"
1342        class="styled-dropdown"
1343        onchange="viewSelectedColumns(event)"
1344      ></select>
1345
1346      <div id="dateSlider"></div>
1347      <span id="dateRange"></span>
1348    </div>
1349
1350    <button
1351      class="analyze-btn"
1352      onclick="checkLanguage(event)"
1353      data-lang-en="Check Language"
1354      data-lang-cy="Gwirio iaith"
1355    >
1356      Check Language
1357    </button>
1358    <div id="download-buttons" class="hidden">
1359      <ul class="btn-list">
1360        <li>
1361          <a
1362            href="/download/english"
1363            class="analyze-btnn btn-gradient"
1364            id="download-english"
1365            data-lang-en="Download English Data"
1366            data-lang-cy="Lawrlwytho Data Saesneg"
1367            >Download English Data</a
1368          >
1369        </li>
1370        <li>
1371          <a
1372            href="/download/welsh"
1373            class="analyze-btnn btn-gradient"
1374            id="download-welsh"
1375            data-lang-en="Download Welsh Data"
1376            data-lang-cy="Lawrlwytho Data Cymraeg"
1377            >Download Welsh Data</a
1378          >
1379        </li>
1380      </ul>
1381    </div>
1382    <div id="data-table-container"></div>
1383  </div>
1384
1385  <div
1386    id="myGrid"
1387    style="height: 800px; width: 100%"
1388    class="ag-theme-alpine hidden"
1389  ></div>
1390
1391  <div id="columnLabelsContainer">
1392    <!-- Column labels will be dynamically added here -->
1393  </div>
1394</form>
1395<div>
1396    
1397</div>
1398<div id="Dataview" class="tab-buttons hidden"></div>
1399<!--<div>
1400    <button class="analyze-btn hidden  " id="submit-sentences-btn" onclick="sendSelectedSentences()" style="margin-bottom: 20px; font-size: 24px;margin: 0 auto 20px;padding: 10px 20px;">
1401        <i class="fas fa-file-alt"></i>
1402        <i class="fas fa-tree"></i>
1403        <i class="fas fa-link"></i>
1404        <i class="fas fa-chart-line"></i>
1405        <i class="fas fa-comments"></i>
1406        <i class="fas fa-cloud"></i>
1407        Start Analysis
1408    </button>
1409</div>-->
1410<div>
1411  <button
1412    class="analyze-btn hidden"
1413    id="submit-rows-btn"
1414    onclick="sendSelectedRows()"
1415    style="
1416      margin-bottom: 20px;
1417      font-size: 24px;
1418      margin: 0 auto 20px;
1419      padding: 10px 20px;
1420    "
1421  >
1422    <i class="fas fa-file-alt"></i>
1423    <i class="fas fa-tree"></i>
1424    <i class="fas fa-link"></i>
1425    <i class="fas fa-chart-line"></i>
1426    <i class="fas fa-comments"></i>
1427    <i class="fas fa-cloud"></i>
1428    <span data-lang-en=" Start Analysis" data-lang-cy="Dechrau Dad
1428ansoddi">
1429      Start Analysis</span
1430    >
1431  </button>
1432</div>
1433<div id="loading" style="display: none">
1434  <img src="static/images/logo.png" />
1435  <img src="static/images/loading4.gif" alt="Loading..." />
1436</div>
1437
1438<div class="tab-container">
1439  <div class="tab-buttons hidden" id="tab-buttons">
1440    <button
1441      class="tab-btn background-red"
1442      onclick="showTab(0) ; reloadIframe()"
1443    >
1444      <i class="fas fa-chart-line text-size-14 text-white"></i>
1445      <span data-lang-en="Meaning Analysis" data-lang-cy="Dadansoddi Ystyr">
1446        Meaning Analysis</span
1447      >
1448    </button>
1449    <button
1450      class="tab-btn background-blue"
1451      onclick="showTab(1) ; reloadIframe()"
1452    >
1453      <i class="fas fa-comments text-size-14 text-white"></i>
1454
1455      <span
1456        class="button-text"
1457        data-lang-en="Sentiment Chart"
1458        data-lang-cy="Siart Sentiment"
1459      >
1460        Sentiment Chart</span
1461      >
1462    </button>
1463    <button class="tab-btn background-green" onclick="showTab(2)">
1464      <i class="fas fa-file-alt text-size-14 text-white"></i>
1465      <span
1466        class="button-text"
1467        data-lang-en="Summarisation"
1468        data-lang-cy="Crynodebu"
1469      >
1470        Summarisation</span
1471      >
1472    </button>
1473    <button class="tab-btn background-purple" onclick="showTab(3)">
1474      <i class="fas fa-cloud text-size-14 text-white"></i>
1475      <span
1476        class="button-text"
1477        data-lang-en="Word Cloud"
1478        data-lang-cy="Cwmwl Geiriau"
1479      >
1480        Word Cloud</span
1481      >
1482    </button>
1483    <button class="tab-btn background-orange" onclick="showTab(4)">
1484      <i class="fas fa-link text-size-14 text-white"></i>
1485      <span
1486        class="button-text"
1487        data-lang-en="Word Use & Relationships"
1488        data-lang-cy="Defnydd a Pherthnasoedd Geiriau"
1489      >
1490        Word Use & Relationships</span
1491      >
1492    </button>
1493    <button class="tab-btn background-aqua" onclick="showTab(5)">
1494      <i class="fas fa-tree text-size-14 text-white"></i>
1495      <span
1496        class="button-text"
1497        data-lang-en="Word Tree"
1498        data-lang-cy="Coeden Eiriau"
1499      >
1500        Word Tree</span
1501      >
1502    </button>
1503    <button class="tab-btn background-pink" onclick="showTab(6)">
1504      <i class="fas fa-file-pdf"></i>
1505      <span class="button-text" data-lang-en="PDF" data-lang-cy="PDF">
1506        PDF</span
1507      >
1508    </button>
1509  </div>
1510  <div id="tabs" class="hidden">
1511    <div id="tab0" class="tab-content">
1512      <p
1513        data-lang-en='The sentiment analysis is performed using the "nlptown/bert-base-multilingual-uncased-sentiment" model from Hugging Face. This model is trained on product reviews in multiple languages and utilizes the BERT architecture.'
1514        data-lang-cy="Gwneir y dadansoddiad sentiment gan ddefnyddio model 'nlptown/bert-base-multilingual-uncased-sentiment' o Hugging Face. Hyfforddir y model gydag adolygiadau cynnyrch mewn nifer o ieithoedd ac mae'n defnyddio saernïaeth BERT."
1515      >
1516        The sentiment analysis is performed using the
1517        "nlptown/bert-base-multilingual-uncased-sentiment" model from Hugging
1518        Face. This model is trained on product reviews in multiple languages and
1519        utilizes the BERT architecture.
1520      </p>
1521
1522      <p
1523        data-lang-en="As per the information on the Hugging Face model page, the accuracy of this model for sentiment analysis on English text is approximately 95%. According to our previous experiments on manually annotated Welsh reviews, the accuracy for Welsh is approximately 73%."
1524        data-lang-cy="Yn unol â'r wybodaeth ar dudalen model Hugging Face, tua 95% yw manwl gywirdeb y model hwn ar gyfer dadansoddi sentiment ar destun Saesneg. Yn ôl ein harbrofion blaenorol ar adolygiadau Cymraeg a anodwyd â llaw, tua 73% yw'r manwl gywirdeb ar gyfer y Gymraeg."
1525      >
1526        As per the information on the Hugging Face model page, the accuracy of
1527        this model for sentiment analysis on English text is approximately 95%.
1528        According to our previous experiments on manually annotated Welsh
1529        reviews, the accuracy for Welsh is approximately 73%.
1530      </p>
1531      <h3
1532        data-lang-en="How do you want to categorise the sentiments?"
1533        data-lang-cy="Sut ydych chi eisiau categoreiddio'r sentimentau?"
1534      >
1535        How do you want to categorise the sentiments?
1536      </h3>
1537      <div class="sentiment-option">
1538        <input
1539          type="radio"
1540          id="threeClass"
1541          name="sentimentOption"
1542          value="3"
1543          checked
1544          onchange="handleSentimentOptionChange()"
1545        />
1546        <label
1547          for="threeClass"
1548          data-lang-en="3 Class Sentiments (Positive, Neutral, Negative)"
1549          data-lang-cy="Sentimentau 3 Dosbarth (Cadarnhaol, Niwtral, Negyddol)"
1550          >3 Class Sentiments (Positive, Neutral, Negative)</label
1551        >
1552      </div>
1553      <div class="sentiment-option">
1554        <input
1555          type="radio"
1556          id="fiveClass"
1557          name="sentimentOption"
1558          value="5"
1559          onchange="handleSentimentOptionChange()"
1560        />
1561        <label
1562          for="fiveClass"
1563          data-lang-en="5 Class Sentiments (Very Positive, Positive, Neutral, Negative, Ver
1563y Negative)"
1564          data-lang-cy="Sentimentau 5 Dosbarth (Cadarnhaol Iawn, Cadarnhaol, Niwtral, Negyddol, Negyddol Iawn)"
1565          >5 Class Sentiments (Very Positive, Positive, Neutral, Negative, Very
1566          Negative)</label
1567        >
1568      </div>
1569      <div class="sentiment-option" id="threeClassABSAOption">
1570        <input
1571          type="radio"
1572          id="threeClassABSA"
1573          name="sentimentOption"
1574          value="3-absa"
1575          onchange="handleSentimentOptionChange()"
1576        />
1577        <label
1578          for="threeClassABSA"
1579          data-lang-en="3 Class Aspect-Based Sentiment Analysis (Positive,
1580          Neutral, Negative)"
1581          data-lang-cy="Dadansoddiad Sentiment wedi’i Seilio ar Agweddau 3 Dosbarth (Cadarnhaol, Niwtral, Negyddol)"
1582          >3 Class Aspect-Based Sentiment Analysis (Positive, Neutral,
1583          Negative)</label
1584        >
1585      </div>
1586      <div id="ABSAInputContainer" class="mt-4" style="display: none">
1587        <h3
1588          data-lang-en="Enter aspects to analyse:"
1589          data-lang-cy="Rhowch agweddau i'w dadansoddi:"
1590        >
1591          Enter aspects to analyse:
1592        </h3>
1593        <textarea
1594          class="data-input m-0"
1595          name="absa-aspects-to-analyze"
1596          placeholder="Enter words separated by commas, e.g., example, words, here"
1597          id="absa-aspects-to-analyze"
1598          oninput="handleAspectInputChanges()"
1599          maxlength="500"
1600        ></textarea>
1601        <div id="enteredAspects" class="my-2">
1602          <span
1603            id="aspects-bold-text"
1604            class="font-weight-bold"
1605            style="opacity: 0%"
1606            data-lang-en="Aspects:"
1607            data-lang-cy="Agweddau:"
1608            >Aspects:</span
1609          >
1610          <span
1611            id="aspects-input-list"
1612            class="text-primary font-weight-bold d-inline text-wrap"
1613            style="white-space: pre; word-wrap: break-word"
1614          ></span>
1615        </div>
1616        <div class="container-fluid m-0 p-0 d-flex">
1617          <button
1618            type="button"
1619            class="btn btn-dark mr-3"
1620            data-lang-en="Fetch Results"
1621            data-lang-cy="Canlyniadau Ffetch"
1622            onclick="startABSA()"
1623          >
1624            Fetch Results
1625          </button>
1626        </div>
1627      </div>
1628      <div
1629        id="ABSAResultsContainer"
1630        class="container-fluid p-0 my-1 flex-column"
1631        style="display: none"
1632      ></div>
1633      <div id="SentimentAnalysisContainer" class="container-fluid p-0 m-0">
1634        <div id="SentimentPlotViewPie"></div>
1635        <p
1636          data-lang-en="The figure displays the sentiment analysis of the data, you can press on any part of the graph to display the data"
1637          data-lang-cy="Mae'r ffigur yn dangos dadansoddiad sentiment y data, gallwch wasgu ar unrhyw ran o'r graff i arddangos y data"
1638        >
1639          The figure displays the sentiment analysis of the data, you can press
1640          on any part of the graph to display the data
1641        </p>
1642        <a href="/get-html-pie" download>
1643          <button
1644            class="analyze-btn"
1645            data-lang-en="Download Interactive Pie Chart"
1646            data-lang-cy="Lawrlwytho Siart Cylch Rhyngweithiol"
1647          >
1648            Download Interactive Pie Chart
1649          </button>
1650        </a>
1651        <div id="SentimentPlotViewBar"></div>
1652        <a href="/get-html-bar" download>
1653          <button
1654            class="analyze-btn"
1655            data-lang-en="Download Interactive Bar Chart"
1656            data-lang-cy="Lawrlwytho Siart Bar Rhyngweithiol"
1657          >
1658            Download Interactive Bar Chart
1659          </button>
1660        </a>
1661        <div id="SentimentView"></div>
1662        <div id="SentimentTable" class="mb-3"></div>
1663        <a href="/get-Sentimentdata" download>
1664          <button
1665            class="analyze-btn"
1666            data-lang-en="Download Sentiment Table"
1667            data-lang-cy="Lawrlwytho Tabl Sentiment"
1668          >
1669            Download Sentiment Table
1670          </button>
1671        </a>
1672      </div>
1673    </div>
1674    <div id="tab1" class="tab-content">
1675      <h2
1676        data-lang-en="Scatter Plot Overview"
1677        data-lang-cy="Trosolwg Plot Gwasgariad"
1678      >
1679        Scatter Plot Overview
1680      </h2>
1681      <p
1682        data-lang-en="In a scatter plot, the single words  with the highest sentiment association are displayed. The x- and y-axes show their usage in positive vs. negative and neutral sentiments, respectively."
1683        data-lang-cy="Mewn plot gwasgariad, caiff y geiriau sengl gyda'r cysylltiad sentiment uchaf eu dangos. Mae'r echelinau x- ac y- yn dangos eu defnydd mewn sentimentau cadarnhaol yn erbyn sentimentau negyd
1683dol a niwtral."
1684      >
1685        In a scatter plot, the single words with the highest sentiment
1686        association are displayed. The x- and y-axes show their usage in
1687        positive vs. negative and neutral sentiments, respectively.
1688      </p>
1689
1690      <h3 data-lang-en="Colour Coding:" data-lang-cy="Codio Lliw:">
1691        Colour Coding:
1692      </h3>
1693      <div class="color-boxes">
1694        <div
1695          class="color-box blue"
1696          data-lang-en="Blue: Positive Words"
1697          data-lang-cy="Glas: Geiriau Cadarnhaol"
1698        >
1699          Blue: Positive Words
1700        </div>
1701        <div
1702          class="color-box red"
1703          data-lang-en="Red: Negative Words"
1704          data-lang-cy="Coch: Geiriau Negyddol"
1705        >
1706          Red: Negative Words
1707        </div>
1708        <div
1709          class="color-box yellow"
1710          data-lang-en="Yellow:  (Positive and Negative)"
1711          data-lang-cy="Melyn: (Cadarnhaol a Negyddol)"
1712        >
1713          Yellow: (Positive and Negative)
1714        </div>
1715        <div
1716          class="color-box orange"
1717          data-lang-en="Orange:  (Positive and Negative)"
1718          data-lang-cy="Oren: (Cadarnhaol a Negyddol)"
1719        >
1720          Orange: (Positive and Negative)
1721        </div>
1722      </div>
1723      <p
1724        data-lang-en="Towards the top-right, the most frequently shared terms between the two sentiments are found, while the bottom-left has the least frequent shared terms."
1725        data-lang-cy="Tua'r dde uchaf, gellir dod o hyd i'r termau sy'n cael eu rhannu fwyaf aml rhwng y ddau sentiment, ac ar y chwith isaf ceir y termau sy'n cael eu rhannu leiaf aml."
1726      >
1727        Towards the top-right, the most frequently shared terms between the two
1728        sentiments are found, while the bottom-left has the least frequent
1729        shared terms.
1730      </p>
1731
1732      <h3 data-lang-en="Score Range:" data-lang-cy="Ystod Sgôr:">
1733        Score Range:
1734      </h3>
1735      <p
1736        data-lang-en="The range is between -1 and 1, with scores near 0 representing words with similar frequencies in both classes (yellow and orange dots). Scores near 1 are for words more frequent in positive contexts (blue), and scores near -1 for negative contexts (red). Darker shades of blue or red indicate scores closer to their respective extremes."
1737        data-lang-cy="Mae'r ystod rhwng -1 ac 1, gyda sgorau yn agos at 0 yn cynrychioli geiriau gydag amlderau tebyg yn y ddau ddosbarth (dotiau melyn ac oren). Mae sgorau sy'n agos i 1 ar gyfer geiriau sy'n fwy aml mewn cyd-destunau cadarnhaol (glas), a sgorau sy'n agos i -1 ar gyfer cyd-detunau negyddol (coch). Mae arlliwiau mwy tywyll o las neu goch yn nodi sgorau sy'n fwy agos at eu heithafion priodol."
1738      >
1739        The range is between -1 and 1, with scores near 0 representing words
1740        with similar frequencies in both classes (yellow and orange dots).
1741        Scores near 1 are for words more frequent in positive contexts (blue),
1742        and scores near -1 for negative contexts (red). Darker shades of blue or
1743        red indicate scores closer to their respective extremes.
1744      </p>
1745
1746      <h3
1747        data-lang-en="Interactive Features:"
1748        data-lang-cy="Nodweddion Rhyngweithiol:"
1749      >
1750        Interactive Features:
1751      </h3>
1752      <p
1753        data-lang-en="Hovering over the dots on the plot reveals word frequency statistics per 25,000 words for both classes and a Scaled F-Score. This frequency determines each point's plot position. For instance, a given metric might be 195:71 per 25k words. Using the query box or clicking on a dot provides more details, like the frequency per 1,000 Reddit posts ('doc')."
1754        data-lang-cy="Mae hofran uwchben y dotiau ar y plot yn dangos ystadegau amlder geiriau fesul 25,000 gair ar gyfer dosbarthiadau a Sgôr-F Graddfa. Mae'r amlder yma yn pennu safle pob pwynt ar y plot. Er enghraifft, gellid bwrw metrig 195:71 fesul 25 mil o eiriau. Bydd defnyddio'r blwch ymholiadau neu glicio ar ddot yn rhoi mwy o fanylion, fel yr amlder fesul 1,000 post Reddir ('doc')."
1755      >
1756        Hovering over the dots on the plot reveals word frequency statistics per
1757        25,000 words for both classes and a Scaled F-Score. This frequency
1758        determines each point's plot position. For instance, a given metric
1759        might be 195:71 per 25k words. Using the query box or clicking on a dot
1760        provides more details, like the frequency per 1,000 Reddit posts
1761        ('doc').
1762      </p>
1763      <div class="container-fluid mt-4 px-0">
1764        <div class="form-check">
1765          <input
1766            class="form-check-input"
1767            type="checkbox"
1768            id="regenerate-scatter-check"
1769            onchange="regenerateScatterPlot()"
1770          />
1771          <label
1772            class="form-check-label"
1773            for="regenerate-scatter-check"
1774            data-lang-en="Exclude stopwords (Regenerates the plot)"
1775            data-lang-cy="Eithrio ataleiriau (Yn adfywio'r plot)"
1776            >Exclude stopwords (Regenerates the plot)</label
1777          >
1778        </div>
1779      </div>
1780      <iframe
1781        id="scattertextIframe"
1782        src=""
1783        width="100%"
1784        height="1000"
1785        frameborder="0"
1786        style="overflow: visible"
1787      ></iframe>
1788      <a href="/get-html-scatter" download>
1789        <button
1790          class="analyze-btn"
1791          data-lang-en="Download Interactive Scatter Text"
1792          data-lang-cy="Lawrlwytho Testun Gwasgariad Rhyngweithiol"
1793        >
1794          Download Interactive Scatter Text
1795        </button>
1796      </a>
1797    </div>
1798    <div id="tab2" class="tab-content">
1799      <form id="summarize-form">
1800        <h5
1801          data-lang-en="This tool, adapted from the Welsh Summarisation project, produces a basic extractive summary of the review text from the selected columns."
1802          data-lang-cy="Mae'r offeryn hwn a gafodd ei addasu o Brosiect Crynhoi Testunau Cymraeg yn creu crynodeb echdynnol sylfaenol o destun yr adolygiad o'r colofnau a ddewiswyd."
1803        >
1804          This tool, adapted from the Welsh Summarisation project, produces a
1805          basic extractive summary of the review text from the selected columns.
1806        </h5>
1807
1808        <input
1809          type="range"
1810          id="chosen_ratio"
1811          name="chosen_ratio"
1812          min="10"
1813          max="50"
1814          step="10"
1815          value="40"
1816          onchange="onSliderChange()"
1817        />
1818        <span id="ratio-value">40%</span><br />
1819        <div id="summary"></div>
1820        <button
1821          class="analyze-btn"
1822          type="button"
1823          onclick="downloadSummary()"
1824          data-lang-en="Download Summary"
1825          data-lang-cy="lawrlwytho crynodeb"
1826        >
1827          Download Summary
1828        </button>
1829      </form>
1830    </div>
1831    <div id="tab3" class="tab-content">
1832      <div class="container mt-5">
1833        <h2
1834          data-lang-en="Word Cloud Generator"
1835          data-lang-cy="Creu Cwmwl Geiriau"
1836        >
1837          Word Cloud generator
1838        </h2>
1839        <form id="wordCloudForm" method="post">
1840          <div class="form-row">
1841            <!-- Use form-row to place elements side by side -->
1842            <div class="form-group col-md-4">
1843              <label
1844                class="form-label"
1845                data-lang-en="Select cloud type:"
1846                data-lang-cy="Dewiswch y math o gwmwl:"
1847                >Select cloud type:</label
1848              >
1849              <select name="cloud_type" class="form-control">
1850                <option
1851                  value="all_words"
1852                  data-lang-en="All words"
1853                  data-lang-cy="Pob gair"
1854                >
1855                  All words
1856                </option>
1857                <option value="nouns" data-lang-en="Nouns" data-lang-cy="Enwau">
1858                  Nouns
1859                </option>
1860                <option
1861                  value="proper_nouns"
1862                  data-lang-en="Proper nouns"
1863                  data-lang-cy="Enwau priod"
1864                >
1865                  Proper nouns
1866                </option>
1867                <option
1868                  value="verbs"
1869                  data-lang-en="Verbs"
1870                  data-lang-cy="Berfau"
1871                >
1872                  Verbs
1873                </option>
1874                <option
1875                  value="adjectives"
1876                  data-lang-en="Adjectives"
1877                  data-lang-cy="Ansoddeiriau"
1878                >
1879                  Adjectives
1880                </option>
1881                <option
1882                  value="adverbs"
1883                  data-lang-en="Adverbs"
1884                  data-lang-cy="Adferfau"
1885                >
1886                  Adverbs
1887                </option>
1888                <option
1889                  value="numbers"
1890                  data-lang-en="Numbers"
1891                  data-lang-cy="Rhifau"
1892                >
1893                  Numbers
1894                </option>
1895                <option
1896                  value="2_word_clusters"
1897                  data-lang-en="2-word clusters"
1898                  data-lang-cy="Clystyrau 2-gair"
1899                >
1900                  2-word clusters
1901                </option>
1902                <option
1903                  value="3_word_clusters"
1904                  data-lang-en="3-word clusters"
1905                  data-lang-cy="Clystyrau 3-gair"
1906                >
1907                  3-word clusters
1908                </option>
1909                <option
1910                  value="4_word_clusters"
1911                  data-lang-en="4-word clusters"
1912                  data-lang-cy="Clystyrau 4-gair"
1913                >
1914                  4-word clusters
1915                </option>
1916                <option
1917                  value="semantic_tags"
1918                  data-lang-en="Semantic Tags"
1919                  data-lang-cy="Tagiau Semantig"
1920                >
1921                  Semantic Tags
1922                </option>
1923              </select>
1924            </div>
1925            <div class="form-group col-md-4">
1926              <label
1927                class="form-label"
1928                data-lang-en="Select cloud shape:"
1929                data-lang-cy="Dewiswch siâp y cwmwl:"
1930                >Select cloud shape:</label
1931              >
1932              <select name="cloud_shape" class="form-control">
1933                <option
1934                  value="/freetxt/app/static/images/img/cloud.png"
1935                  data-lang-en="Cloud"
1936                  data-lang-cy="Cwmwl"
1937                >
1938                  Cloud
1939                </option>
1940
1941                <option
1942                  value="/freetxt/app/static/images/img/comments2.png"
1943                  data-lang-en="Comment"
1944                  data-lang-cy="Sylw"
1945                >
1946                  Comment
1947                </option>
1948                <option
1949                  value="/freetxt/app/static/images/img/lightbulb.png"
1950                  data-lang-en="Light bulb"
1951                  data-lang-cy="Bwlb golau"
1952                >
1953                  Light Bulb
1954                </option>
1955                <option
1956                  value="/freetxt/app/static/images/img/volumeup.png"
1957                  data-lang-en="Volume up"
1958                  data-lang-cy="Lefel sain i fyny"
1959                >
1960                  Volume up
1961                </option>
1962                <option
1963                  value="/freetxt/app/static/images/img/Mic.png"
1964                  data-lang-en="Microphone"
1965                  data-lang-cy="Meicroffon"
1966                >
1967                  Microphone
1968                </option>
1969                <option
1970                  value="/freetxt/app/static/images/img/welsh_flag.png"
1971                  data-lang-en="Welsh Flag"
1972                  data-lang-cy="Baner Cymru"
1973                >
1974                  Welsh Flag
1975                </option>
1976                <option
1977                  value="/freetxt/app/static/images/img/holmes_silhouette.png"
1978                  data-lang-en="Sherlock Holmes"
1979                  data-lang-cy="Sherlock Holmes"
1980                >
1981                  Sherlock Holmes
1982                </option>
1983                <option
1984                  value="/freetxt/app/static/images/img/national-trust-logo-black-on-white-silhouette.jpg"
1985                  data-lang-en="National Trust"
1986                  data-lang-cy="Ymddiriedolaeth Genedlaethol"
1987                >
1988                  National Trust
1989                </option>
1990                <option
1991                  value="/freetxt/app/static/images/img/cadw-clip.jpeg"
1992                  data-lang-en="Cadw"
1993                  data-lang-cy="Cadw"
1994                >
1995                  Cadw
1996                </option>
1997                <option
1998                  value="/freetxt/app/static/images/img/blue_rectangle.jpg"
1999                  data-lang-en="Rectangle"
2000                  data-lang-cy="Petryal"
2001                >
2002                  Rectangle
2003                </option>
2004                <option
2005                  value="/freetxt/app/static/images/img/circle.png"
2006                  data-lang-en="Circle"
2007                  data-lang-cy="Cylch"
2008                >
2009                  Circle
2010                </option>
2011                <option
2012                  value="/freetxt/app/static/images/img/CadwLogo.png"
2013                  data-lang-en="Cadw2"
2014                  data-lang-cy="Cadw2"
2015                >
2016                  Cadw2
2017                </option>
2018                <option
2019                  value="/freetxt/app/static/images/img/image-png.png"
2020                  data-lang-en="Learn Welsh"
2021                  data-lang-cy=" Dysgu Cymraeg"
2022                >
2023                  Learn Welsh
2024                </option>
2025              </select>
2026            </div>
2027
2028            <div class="form-group col-md-4">
2029              <label
2030                class="form-label"
2031                data-lang-en="Select cloud outline colour:"
2032                data-lang-cy="Dewiswch liw amlinell y cwmwl:"
2033                >Select cloud outline colour:</label
2034              >
2035              <select
2036                name="cloud_outline_color"
2037                class="form-control"
2038                title="Changing this will regenerate the word cloud"
2039              >
2040                <option value="white" data-lang-en="White" data-lang-cy="Gwyn">
2041                  White
2042                </option>
2043                <option value="grey" data-lang-en="Grey" data-lang-cy="Llwyd">
2044                  Grey
2045                </option>
2046                <option
2047                  value="yellow"
2048                  data-lang-en="Yellow"
2049                  data-lang-cy="Melyn"
2050                >
2051                  Yellow
2052                </option>
2053
2054                <option value="black" data-lang-en="Black" data-lang-cy="Du">
2055                  Black
2056                </option>
2057                <option
2058                  value="green"
2059                  data-lang-en="Green"
2060                  data-lang-cy="Gwyrdd"
2061                >
2062                  Green
2063                </option>
2064                <option value="blue" data-lang-en="Blue" data-lang-cy="Glas">
2065                  Blue
2066                </option>
2067                <option value="red" data-lang-en="Red" data-lang-cy="Coch">
2068                  Red
2069                </option>
2070              </select>
2071            </div>
2072
2073            <div class="form-group col-md-4">
2074              <label
2075                class="form-label"
2076                data-lang-en="Select cloud measurement:"
2077                data-lang-cy="Dewiswch fesuriad y cwmwl:"
2078                >Select cloud measurement:</label
2079              >
2080              <select
2081                name="cloud_measure"
2082                class="form-control"
2083                title="Changing this will regenerate the word cloud"
2084              >
2085                <option
2086                  value="KENESS"
2087                  data-lang-en="Keyness"
2088                  data-lang-cy="Allweddeirwydd"
2089                >
2090                  Keyness
2091                </option>
2092                <option
2093                  value="Frequency"
2094                  data-lang-en="Frequency"
2095                  data-lang-cy="Amlder"
2096                >
2097                  Frequency
2098                </option>
2099                <option
2100                  value="Log-Likelihood"
2101                  data-lang-en="Log-Likelihood"
2102                  data-lang-cy="Tebygolrwydd-Log"
2103                >
2104                  Log-Likelihood
2105                </option>
2106              </select>
2107            </div>
2108          </div>
2109        </form>
2110      </div>
2111      <div id="word-cloud-error-handlers">
2112        <div id="cloudLoading" class="container d-flex align-items-cente hidden-important">
2113          <h1
2114            data-lang-en="Loading word cloud..."
2115            data-lang-cy="Yn llwytho cwmwl geiriau..."
2116            >Loading word cloud...</h1>
2117          <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
2118        </div>
2119        <div id="word-cloud-retry" class="container d-flex flex-column align-items-center justify-content-center hidden-important"> 
2120          <p class="mb-2 text-warning"
2121             data-lang-en="There was an issue generating the word cloud. This could be caused by a temporary disruption in the service. Please try again."
2122             data-lang-cy="Roedd problem yn creu'r cwmwl geiriau. Gallai hyn gael ei achosi gan amhariad dros dro yn y gwasanaeth. Ceisiwch eto".
2123            >
2124          </p>
2125          <button 
2126            class="btn btn-primary" 
2127            onclick="sendWordCloudRequest()" 
2128            data-lang-en="Retry Word Cloud Generation"
2129            data-lang-cy="Ail-geisio Generu Cwmwl Geiriau"
2130            >
2131            Retry Word Cloud Generation
2132          </button>
2133        </div>
2134      </div>
2135      <div
2136        id="wordListOuterContainer"
2137        class="responsive-flex rounded border border-light shadow my-5 border border-primary"
2138      >
2139        <div
2140          id="responsive-flex-first"
2141          class="d-flex flex-column align-items-center search-container"
2142        >
2143          <div class="rounded p-4 w-100 border border-light bg-light">
2144            <div class="pb-4 w-100">
2145              <input
2146                id="cloud-search"
2147                class="p-2 form-control w-100"
2148                type="search"
2149                placeholder="Search in cloud..."
2150                oninput="handleWordCloudSearchChange(event)"
2151              />
2152            </div>
2153            <div
2154              id="sem-tags-radio-selection"
2155              class="container-fluid responsive-flex-rev mb-4"
2156              style="display: none"
2157            >
2158              <div class="d-flex flex-column">
2159                <div class="form-check">
2160                  <input
2161                    id="show-semantic-tags"
2162                    name="sem-tags-words-rad"
2163                    type="radio"
2164                    class="form-check-input"
2165                    checked
2166                  />
2167                  <label
2168                    class="form-check-label"
2169                    for="show-semantic-tags"
2170                    data-lang-en="Show semantic tags"
2171                    data-lang-cy="Dangos tagiau semantig"
2172                  >
2173                    Show Tags
2174                  </label>
2175                </div>
2176                <div class="form-check">
2177                  <input
2178                    id="show-words"
2179                    name="sem-tags-words-rad"
2180                    type="radio"
2181                    class="form-check-input"
2182                  />
2183                  <label
2184                    class="form-check-label"
2185                    for="show-words"
2186                    data-lang-en="Show words with semantic tags"
2187                    data-lang-cy="Dangos geiriau gyda thagiau semantig"
2188                  >
2189                    Show Words With Tags
2190                  </label>
2191                </div>
2192              </div>
2193            </div>
2194            <div
2195              class="container align-items-center d-flex flex-column overflow-scroll-container p-0"
2196            >
2197              <div
2198                id="wordListContainer"
2199                class="word-checkbox-list w-100 d-flex flex-column"
2200                style="min-width: 100%"
2201              ></div>
2202            </div>
2203            <div class="w-100 d-flex justify-content-center pt-4">
2204              <input
2205                id="word-changes-submit"
2206                class="p-2 btn btn-outline-primary w-100"
2207                type="submit"
2208                value="Submit selection"
2209                onclick="regenerateWordCloud()"
2210              />
2211            </div>
2212          </div>
2213        </div>
2214        <div
2215          id="wordCloudImageContainer"
2216          class="container-fluid d-flex flex-column justify-content-center align-items-center mw-100 position-relative p-0 m-0"
2217          style="max-height: 100vh"
2218        >
2219          <div
2220            id="word-cloud-enlarge-reduce-icon"
2221            class="position-absolute p-2"
2222            style="top: 0; right: 0"
2223          >
2224            <label class="size-btn">
2225              <input
2226                type="checkbox"
2227                class="hidden"
2228                onchange="handleWordCloudPosChange(event)" /><i
2229                id="word-cloud-control-icon"
2230                class="fa-solid fa-expand"
2231                style="font-size: 30px"
2232              ></i
2233            ></label>
2234          </div>
2235          <img id="wordCloudImage" src="" alt="Word Cloud Image" />
2236        </div>
2237      </div>
2238
2239      <div
2240        id="tag-words-associations-container"
2241        class="container-fluid p-0"
2242        style="display: none"
2243      >
2244        <div
2245          class="flex-container align-items-center justify-content-center mb-5"
2246        >
2247          <h2
2248            class="mr-2"
2249            data-lang-en="Word and Tag Associations"
2250            data-lang-cy="Cysylltiadau gair a thag"
2251          >
2252            Word &amp; Tag Associations
2253          </h2>
2254          <label class="form-check-label size-btn" style="width: 30px">
2255            <input
2256              type="checkbox"
2257              class="hidden form-check-input"
2258              onchange="handleWordTagListVis(event)"
2259            />
2260            <i
2261              id="word-tag-list-icon"
2262              class="fa-solid fa-eye-slash"
2263              style="font-size: 30px; min-width: 30px"
2264            ></i>
2265          </label>
2266        </div>
2267
2268        <div
2269          id="tag-words-associations-list"
2270          class="container-fluid w-100 row row-cols-1 row-cols-sm-2 row-cols-lg-4 m-0"
2271        ></div>
2272      </div>
2273      <a id="word-cloud-download-1" href="/get-word-cloud" download>
2274        <button
2275          class="analyze-btn"
2276          data-lang-en="Download Word Cloud image"
2277          data-lang-cy="Lawrlwytho delwedd Cwmwl Geiriau"
2278        >
2279          Download Word Cloud image
2280        </button>
2281      </a>
2282      <a
2283        id="word-cloud-download-2"
2284        href="/get-sec-word-cloud"
2285        style="display: none"
2286        download
2287      >
2288        <button
2289          class="analyze-btn mt-2"
2290          data-lang-en="Download Word Cloud image (2)"
2291          data-lang-cy="Lawrlwytho delwedd Cwmwl Geiriau (2)"
2292        >
2293          Download Word Cloud image (Semantic Tags)
2294        </button>
2295      </a>
2296    </div>
2297    <div id="tab4" class="tab-content">
2298      <h2
2299        data-lang-en="Select a word for analysis"
2300        data-lang-cy="Dewiswch air i'w ddadansoddi"
2301      >
2302        Select a word for analysis
2303      </h2>
2304      <form action="/Keyword_collocation" method="post">
2305        <div class="mb-4">
2306          <!-- Initial Category Radio Buttons -->
2307          <label
2308            class="form-label"
2309            data-lang-en="Select Category"
2310            data-lang-cy="Dewiswch Gategori"
2311            >
2311Select Category</label
2312          >
2313          <div class="sentiment-option">
2314            <input
2315              type="radio"
2316              id="wordRadio"
2317              name="category"
2318              value="word"
2319              onclick="handleCategoryChange()"
2320              checked
2321            />
2322            <label for="wordRadio" data-lang-en="Word" data-lang-cy="Gair"
2323              >Word</label
2324            >
2325          </div>
2326          <div class="sentiment-option">
2327            <input
2328              type="radio"
2329              id="posTagRadio"
2330              name="category"
2331              value="posTag"
2332              onclick="handleCategoryChange()"
2333            />
2334            <label
2335              for="posTagRadio"
2336              data-lang-en="POS Tag"
2337              data-lang-cy="Tag POS"
2338              >POS Tag</label
2339            >
2340          </div>
2341          <div class="sentiment-option">
2342            <input
2343              type="radio"
2344              id="semanticTagRadio"
2345              name="category"
2346              value="semanticTag"
2347              onclick="handleCategoryChange()"
2348            />
2349            <label
2350              for="semanticTagRadio"
2351              data-lang-en="Semantic Tag"
2352              data-lang-cy="Tag Semantig"
2353              >Semantic Tag</label
2354            >
2355          </div>
2356
2357          <!-- Sub-category Dropdown -->
2358          <label
2359            class="form-label"
2360            data-lang-en="Select Option"
2361            data-lang-cy="Dewiswch Opsiwn"
2362            >Select Option</label
2363          >
2364
2365          <div
2366            class="container-fluid d-flex justify-content-start flex-column flex-sm-row p-0"
2367          >
2368            <div class="dropdown">
2369              <button
2370                class="btn dropdown-toggle sentiment-option m-0"
2371                id="select-option-btn"
2372                type="button"
2373                id="dropdown-button"
2374                data-toggle="dropdown"
2375                aria-haspopup="true"
2376                aria-expanded="false"
2377                data-default
2378              >
2379                -- Select --
2380              </button>
2381              <div class="dropdown-menu pb-0" aria-labelledby="dropdown-button">
2382                <div class="form-group mx-3" style="min-width: 250px">
2383                  <input
2384                    id="word-use-dd-search"
2385                    type="search"
2386                    class="form-control w-100"
2387                    placeholder="Search in dropdown..."
2388                    oninput="handleWordFreqSearchChange(event)"
2389                  />
2390                </div>
2391                <div class="dropdown-divider"></div>
2392                <div
2393                  id="subCategoryDropdown"
2394                  class="word-use-dropdown position-static"
2395                ></div>
2396              </div>
2397            </div>
2398            <!-- For including/excluding filtered data -->
2399            <div
2400              class="form-check ml-0 mt-3 ml-sm-3 mt-sm-0 d-flex justify-content-start justify-content-sm-center align-items-center"
2401            >
2402              <div
2403                id="include-all-data-check"
2404                class="container-fluid m-0 p-0"
2405                title="Includes words assigned with the following tags: Grammatical bin, Pronouns, Period, Being, Discourse Bin, Negative, Punctuation, Unmatched."
2406              >
2407                <input
2408                  id="word-freq-include-all-check"
2409                  class="form-check-input"
2410                  type="checkbox"
2411                  onchange="handleWordFreqDatasetChange(event)"
2412                />
2413                <label
2414                  class="form-check-label"
2415                  for="word-freq-include-all-check"
2416                  data-lang-en="Include all data (stopwords, misfiltered words, etc.)"
2417                  data-lang-cy="Cynnwys yr holl ddata (ataleiriau, geiriau wedi'u hidlo'n anghywir, ac ati)"
2418                  >Include all data (stopwords, misfiltered words, etc.)</label
2419                >
2420              </div>
2421            </div>
2422          </div>
2423
2424          <a href="/get-filtered-word-frequencies-data" download>
2425            <button
2426              type="button"
2427              class="analyze-btn hidden mt-5"
2428              data-lang-en="Download Filtered Word Frequency Results"
2429              data-lang-cy="Llwytho i lawr Ganlyniadau Amledd Geiriau wedi'u Hidlo"
2430            >
2431              Download Filtered Word Frequency Results
2432            </button>
2433          </a>
2434          <a href="/get-unfiltered-word-frequencies-data" download>
2435            <button
2436              type="button"
2437              class="analyze-btn hidden mt-2"
2438              data-lang-en="Download Unfiltered Word Frequency Results"
2439              data-lang-cy="Llwytho i lawr Ganlyniadau Amledd Geiriau heb eu Hidlo"
2440            >
2441              Download Unfiltered Word Frequency Results
2442            </button>
2443          </a>
2444        </div>
2445        <div
2446          id="window-size-range-container"
2447          class="my-5"
2448          style="display: none"
2449        >
2450          <label
2451            for="windowSizeRange"
2452            data-lang-en="Window Size:"
2453            data-lang-cy="Maint y Ffenestr:"
2454            >Window Size:
2455          </label>
2456          <input
2457            type="range"
2458            id="windowSizeRange"
2459            name="window_size"
2460            min="1"
2461            max="10"
2462            value="5"
2463          />
2464          <span id="windowSizeValue">5</span>
2465        </div>
2466
2467        <!-- KWIC Table -->
2468        <div id="kwicResults">
2469          <table id="kwicTable" class="hidden">
2470            <thead>
2471              <tr>
2472                <th
2473                  data-lang-en="Left Context"
2474                  data-lang-cy="Cyd-destun chwith"
2475                >
2476                  Left Context
2477                </th>
2478                <th data-lang-en="Keyword" data-lang-cy="Allweddair">
2479                  Keyword
2480                </th>
2481                <th data-lang-en="Right Context" data-lang-cy="Cyd-destun de">
2482                  Right Context
2483                </th>
2484              </tr>
2485            </thead>
2486            <tbody>
2487              <!-- Filled by JavaScript -->
2488            </tbody>
2489          </table>
2490        </div>
2491        <a href="/get-keyword-data" download>
2492          <button
2493            type="button"
2494            class="analyze-btn hidden"
2495            data-lang-en="Download Keyword Results"
2496            data-lang-cy="Lawrlwytho Canlyniadau Allweddair"
2497          >
2498            Download Keyword Results
2499          </button>
2500        </a>
2501        <!-- Collocations Table -->
2502        <table id="collocsTable" class="hidden">
2503          <thead>
2504            <tr>
2505              <th data-lang-en="Word" data-lang-cy="Geiriau">Word</th>
2506              <th data-lang-en="Frequency" data-lang-cy="Amlder">Frequency</th>
2507              <th>MI</th>
2508              <th>LL</th>
2509            </tr>
2510          </thead>
2511          <tbody>
2512            <!-- Filled by JavaScript -->
2513          </tbody>
2514        </table>
2515        <a href="/get-collos-data" download>
2516          <button
2517            type="button"
2518            class="analyze-btn hidden"
2519            data-lang-en="Download Collocations Results"
2520            data-lang-cy="Lawrlwytho Canlyniadau Cydleoliadau"
2521          >
2522            Download Collocations Results
2523          </button>
2524        </a>
2525        <!-- Display Network Visualization -->
2526        <label
2527          for="graphType"
2528          class="hidden"
2529          data-lang-en="Choose a Graph Type:"
2530          data-lang-cy="Dewiswch fath o graff"
2531          >Choose a Graph Type:</label
2532        >
2533        <select id="graphType" class="hidden">
2534          <option
2535            value="frequency"
2536            data-lang-en="Frequency"
2537            data-lang-cy="Amlder"
2538          >
2539            Frequency
2540          </option>
2541          <option
2542            value="MI"
2543            data-lang-en="Mutual Information"
2544            data-lang-cy="Gwybodaeth gyffredin"
2545          >
2546            Mutual Information
2547          </option>
2548          <option
2549            value="LL"
2550            data-lang-en="Log Likelihood"
2551            data-lang-cy="Tebygolrwydd Log"
2552          >
2553            Log Likelihood
2554          </option>
2555        </select>
2556        <button
2557          type="button"
2558          class="analyze-btn hidden"
2559          id="generateGraph"
2560          data-lang-en="Regenerate Graph"
2561          data-lang-cy="Ail-greu Graff"
2562        >
2563          Regenerate Graph
2564        </button>
2565        <div id="graphContainer"></div>
2566        <a href="/get-graph-path" download>
2567          <button
2568            type="button"
2569            class="analyze-btn hidden"
2570            data-lang-en="Download Interactive Network Graph"
2571            data-lang-cy="Lawrlwytho Graff Rhwydwaith Rhyngweithiol"
2572          >
2573            Download Interactive Network Graph
2574          </button>
2575        </a>
2576      </form>
2577    </div>
2578
2579    <div id="tab5" class="tab-content">
2580      <label
2581        for="search_word"
2582        data-lang-en="Search Word:"
2583        data-lang-cy="Gair Chwilio:"
2584        >Search Word:</label
2585      >
2586      <input type="text" id="search_word" name="search_word" />
2587      <div id="puncSwitchDiv" class="custom-control custom-switch d-flex">
2588        <input type="checkbox" class="custom-control-input" id="puncSwitch" />
2589        <label
2590          class="custom-control-label"
2591          for="puncSwitch"
2592          data-lang-en="Show punctuation menu"
2593          data-lang-cy="Dangos y ddewislen atalnodi"
2594          >Show punctuation menu</label
2595        >
2596      </div>
2597      <div
2598        id="allPuncList"
2599        class="rounded container-fluid bg-light border border-light p-3 shadow mb-4 mt-2"
2600        style="display: none"
2601      >
2602        <div id="allPuncListInnerContainer" class="container-fluid">
2603          <div id="SelectAllPuncContainer" class="row row-cols-auto">
2604            <div class="col form-check">
2605              <input
2606                class="form-check-input"
2607                type="checkbox"
2608                id="PSSelectAll"
2609              />
2610              <label
2611                for="PSSelectAll"
2612                class="form-check-label"
2613                style="color: #8f2b2b"
2614                data-lang-en="All"
2615                data-lang-cy="Popeth"
2616                >All</label
2617              >
2618            </div>
2619          </div>
2620        </div>
2621      </div>
2622      <div id="puncKey" class="container-fluid" style="display: none">
2623        <div>
2624          <div class="d-flex justify-content-center align-items-center">
2625            <div class="mx-4">
2626              <input class="form-check-input" type="checkbox" checked="" />
2627              <p
2628                class="ml-1 font-weight-bold"
2629                data-lang-en="Included"
2630                data-lang-cy="Wedi&rsquo;i gynnwys"
2631              >
2632                Included
2633              </p>
2634            </div>
2635            <div class="mx-4">
2636              <input class="form-check-input" type="checkbox" />
2637              <p
2638                class="ml-1 font-weight-bold"
2639                data-lang-en="Excluded"
2640                data-lang-cy="Wedi&rsquo;i hepgor"
2641              >
2642                Excluded
2643              </p>
2644            </div>
2645          </div>
2646        </div>
2647      </div>
2648      <h5
2649        data-lang-en="This word tree shows the words which commonly occur before and after your searched word. The bigger the font size, the more often the word occurs. The number of times each word occurs is also shown when you scroll over the word (the number after ‘weight’)"
2650        data-lang-cy="Mae'r goeden eiriau yma'n dangos y geiriau sy'n digwydd yn gyffredin cyn ac ar ôl y gair chwilioch chi amdano. Po fwyaf faint y ffont, mwyaf aml mae'r gair yn digwydd.  Hefyd, dangosir y nifer o weithiau mae pob gair yn digwydd pan fyddwch yn sgrolio dros y gair (y rhif ar ôl 'pwysau')"
2651      >
2652        This word tree shows the words which commonly occur before and after
2653        your searched word. The bigger the font size, the more often the word
2654        occurs. The number of times each word occurs is also shown when you
2655        scroll over the word (the number after ‘weight’)
2656      </h5>
2657
2658      <h5
2659        data-lang-en="The word frequency is represented by the weight in the tool tip"
2660        data-lang-cy="Cynrychiolir amlder y gair gan y pwysau yn yr awgrym offer"
2661      >
2662        The word frequency is represented by the weight in the tool tip
2663      </h5>
2664      <div id="wordtree_basic" style="width: 1200; height: 800"></div>
2665      <button
2666        type="button"
2667        class="analyze-btn"
2668        onclick="downloadWordTree()"
2669        data-lang-en="Download Interactive WordTree"
2670        data-lang-cy="Lawrlwytho Goeden Eiriau Rhyngweithiol"
2671      >
2672        Download Interactive WordTree
2673      </button>
2674      <iframe
2675        id="hiddenIframe"
2676        style="display: none; width: 0; height: 0"
2677      ></iframe>
2678    </div>
2679    <div id="tab6" class="tab-content">
2680      <form
2681        id="pdfForm"
2682        action="/generate-pdf"
2683        method="post"
2684        enctype="multipart/form-data"
2685        target="_blank"
2686      >
2687        <div class="flex-container">
2688          <section class="grid">
2689            <!-- Sentiment Analysis-->
2690            <div
2691              class="square checkbox-option background-red"
2692              data-checkbox="sentimentData"
2693            >
2694              <i class="fas fa-chart-line text-size-60 text-white"></i>
2695              <h3
2696                class="text-strong text-uppercase"
2697                data-lang-en="Include Keyword Analysis"
2698                data-lang-cy="Cynnwys Dadansoddiad Allweddair"
2699              >
2700                Include Keyword Analysis
2701              </h3>
2702            </div>
2703            <!-- Sentiment Pie Plot -->
2704            <div
2705              class="square checkbox-option background-blue"
2706              data-checkbox="sentimentPlotPie"
2707            >
2708              <i class="fas fa-comments text-size-60 text-white"></i>
2709              <h3
2710                class="text-strong text-uppercase"
2711                data-lang-en="Include Sentiment Pie Chart"
2712                data-lang-cy="Cynnwys Siart Cylch"
2713              >
2714                Include Sentiment Pie Chart
2715              </h3>
2716            </div>
2717            <!-- Sentiment Bar Plot -->
2718            <div
2719              class="square checkbox-option background-green"
2720              data-checkbox="sentimentPlotBar"
2721            >
2722              <i class="fas fa-file-alt text-size-60 text-white"></i>
2723              <h3
2724                class="text-strong text-uppercase"
2725                data-lang-en="Include Sentiment Bar Chart"
2726                data-lang-cy="Cynnwys Siart Bar"
2727              >
2728                Include Sentiment Bar chart
2729              </h3>
2730            </div>
2731            <!-- Word Tree Data -->
2732            <div
2733              class="square checkbox-option background-purple"
2734              data-checkbox="wordTreeData"
2735            >
2736              <i class="fas fa-cloud text-size-60 text-white"></i>
2737              <h3
2738                class="text-strong text-uppercase"
2739                data-lang-en="Include Word Tree Data"
2740                data-lang-cy="Cynnwys Data'r Goeden Eiriau"
2741              >
2742                Include Word Tree Data
2743              </h3>
2744            </div>
2745            <!-- Summary -->
2746            <div
2747              class="square checkbox-option background-orange"
2748              data-checkbox="summarys"
2749            >
2750              <i class="fas fa-link text-size-60 text-white"></i>
2751              <h3
2752                class="text-strong text-uppercase"
2753                data-lang-en="Include Summary"
2754                data-lang-cy="Cynnwys Crynodeb"
2755              >
2756                Include Summary
2757              </h3>
2758            </div>
2759            <!-- Wordcloud -->
2760            <div
2761              class="square checkbox-option background-aqua"
2762              data-checkbox="wordCloud"
2763            >
2764              <i class="fas fa-tree text-size-60 text-white"></i>
2765              <h3
2766                class="text-strong text-uppercase"
2767                data-lang-en="Include Word Cloud"
2768                data-lang-cy="Cynnwys Cwmwl Geiriau"
2769              >
2770                Include Word Cloud
2771              </h3>
2772            </div>
2773          </section>
2774          <div class="generate-button-container">
2775            <button
2776              type="button"
2777              id="generatePdfBtn"
2778              data-lang-en="Generate PDF"
2779              data-lang-cy="Creu PDF"
2780            >
2781              <i class="fas fa-file-pdf"></i> Generate PDF
2782            </button>
2783          </div>
2784        </div>
2785        <!-- Hidden checkboxes -->
2786        <input
2787          type="checkbox"
2788          name="sections"
2789          value="sentimentData"
2790          id="sentimentData"
2791          class="hidden-checkbox"
2792        />
2793        <input
2794          type="checkbox"
2795          name="sections"
2796          value="sentimentPlotPie"
2797          id="sentimentPlotPie"
2798          class="hidden-checkbox"
2799        />
2800        <input
2801          type="checkbox"
2802          name="sections"
2803          value="sentimentPlotBar"
2804          id="sentimentPlotBar"
2805          class="hidden-checkbox"
2806        />
2807        <input
2808          type="checkbox"
2809          name="sections"
2810          value="wordTreeData"
2811          id="wordTreeData"
2812          class="hidden-checkbox"
2813        />
2814        <input
2815          type="checkbox"
2816          name="sections"
2817          value="summary"
2818          id="summarys"
2819          class="hidden-checkbox"
2820        />
2821        <input
2822          type="checkbox"
2823          name="sections"
2824          value="wordCloud"
2825          id="wordCloud"
2826          class="hidden-checkbox"
2827        />
2828
2829        <input type="hidden" name="sentimentViewContent" id="sentimentField" />
2830
2831        <input type="hidden" name="wordtree" id="wordtree" />
2832        <input
2833          type="hidden"
2834          id="wordCloudImageSrcField"
2835          name="wordCloudImageSrc"
2836        />
2837        <input type="hidden" id="summaryField" name="summaryField" />
2838        <input
2839          type="hidden"
2840          name="sentiment_explanation"
2841          id="sentiment_explanation"
2842        />
2843        <input type="hidden" name="Cloud_type" id="Cloud_type" />
2844        <input type="hidden" name="Cloud_measure" id="Cloud_measure" />
2845      </form>
2846    </div>
2847  </div>
2848  <!-- Moment.js (required for Date Range Picker) -->
2849  
2849<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
2849
2850  
2850<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
2850
2851  <!-- DataTables JS -->
2852  
2852<script
2853    type="text/javascript"
2854    charset="utf8"
2855    src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"
2856  ></script>
2856
2857
2858  <!-- noUiSlider JS -->
2859  
2859<script src="https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.js"></script>
2859
2860
2861  <!-- Date Range Picker JS -->
2862  
2862<script
2863    type="text/javascript"
2864    src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"
2865  ></script>
2865
2866
2867  <!-- AG-Grid JS -->
2868  
2868<script src="https://unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.noStyle.js"></script>
2868
2869  
2869<script>
2870    // The JavaScript that manages the clickable grid items
2871    document.addEventListener("DOMContentLoaded", function () {
2872      const options = document.querySelectorAll(".checkbox-option");
2873
2874      options.forEach((option) => {
2875        option.addEventListener("click", function () {
2876          const checkboxId = this.getAttribute("data-checkbox");
2877          const checkbox = document.getElementById(checkboxId);
2878
2879          if (checkbox.checked) {
2880            checkbox.checked = false;
2881            this.classList.remove("selected");
2882          } else {
2883            checkbox.checked = true;
2884            this.classList.add("selected");
2885          }
2886        });
2887      });
2888    });
2889  </script>
2889
2890  
2891    </main>
2892
2893    <!-- Logos in Footer -->
2894    <footer>
2895        <div class="container">
2896          
2897            <div class="row">
2898
2899  <div class="col-md-1 offset-md-2">
2900                <a href="https://www.cardiff.ac.uk/"><img src="static/images/img/cardiff.png" class="footer-logo"></a></div>
2901                <div class="col-md-1">
2902                  <a href="https://www.lancaster.ac.uk/">
2903                  <img src="static/images/img/Lancaster.png" class="footer-logo">
2904                </a>
2905                </div>
2906                <div class="col-md-1">
2907                  <a href="https://www.nationaltrust.org.uk/">
2908                  <img src="static/images/img/NTW.JPG" class="footer-logo"> </a></div>
2909                <div class="col-md-1">
2910                  <a href="https://museum.wales/"><img src="static/images/img/Amgueddfa_Cymru_logo.svg.png" class="footer-logo"> </a></div>
2911                <div class="col-md-1">
2912                  <a href="https://cadw.gov.wales/">
2913                  <img src="static/images/img/Cadw.png" class="footer-logo"></a></div>
2914                <div class="col-md-1">
2915                  <a href="https://learnwelsh.cymru/">
2916                  <img src="static/images/img/NCLW.jpg" class="footer-logo"></a></div>
2917                <div class="col-md-1">
2918                  <a href="https://www.wjec.co.uk/">
2919                    <img src="static/images/img/WJEC_CBAC_logo.svg.png" class="footer-logo"></a>
2920                  </div>
2921                <div class="col-md-1">
2922                  <a href="https://www.ukri.org/">
2923                    <img src="static/images/img/ukri-ahrc-square-logo.png" class="footer-logo">
2924                  </a></div>
2925            </div>
2926            
2927        </div>
2928     
2929    </footer>
vendor: 69 bytes, lines 2929-2931
2929
2930    
2931<script async src="https://www.googletagmanager.com/gtag/js?id=
2931G-D48BPF7LK0
vendor: 13 bytes, lines 2931-2932
2931"></script>
2932
2933<script>
2934
2935  
vendor: 136 bytes, lines 2935-2941
2935window.dataLayer = window.dataLayer || [];
2936
2937  function gtag(){dataLayer.push(arguments);}
2938
2939  gtag('js', new Date());
2940
2941  gtag('config', '
2941G-D48BPF7LK0
vendor: 5 bytes, lines 2941-2942
2941');
2942
2943</script>
2943 
2944</body>
2945</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.